Screenshots

[ShaneIsrael]

This pull request introduces image support to the application, including environment variable updates, documentation, and major client-side additions for displaying and managing images. It also includes dependency updates and minor UI improvements for both images and videos.

Image support and configuration:

• Added IMAGE_DIRECTORY environment variable to .env.dev, .env.prod, and Dockerfile to specify the directory for raw image files. [1] [2] [3]
• Updated EnvironmentVariables.md to document IMAGE_DIRECTORY and improved documentation for THUMBNAIL_VIDEO_LOCATION.

Client-side image features:

• Added new dependencies (react-zoom-pan-pinch) and bumped client version to 1.5.7 in package.json and package-lock.json. [1] [2] [3] [4]
• Introduced image feed and image viewing routes in App.js, with new components ImageFeed and ViewImage, and updated routing logic. [1] [2] [3]
• Added utility functions for image URLs and thumbnails in common/utils.js.
• Implemented new ImageCards and MasonryImageCard components for displaying images in a masonry layout with lazy loading and responsive columns.

Video and UI enhancements:

• Added optional media type indicator to CompactVideoCard for distinguishing videos. [1] [2]
• Fixed game link URLs in CompactVideoCard to use correct paths. [1] [2]

Upload improvements:

• Prepared UploadCard for image thumbnail URL handling by adding a ref and removing premature thumbnail extraction. [1] [2] [3]