Photo Share is a SvelteKit project designed for sharing and viewing photos and videos. It features a user-friendly interface for navigating folders, previewing files, and downloading selected items. Check out an example deployment at photos.loganmiller.dev/wedding/photos.
- Installation
- Environment Variables
- Running the Project
- Uploading Media
- Supported File Types
- Features
- Folder Navigation
- Preview and Download
- Deploying as a Docker Container
- Contributing
- License
-
Clone the repository:
git clone https://github.com/yourusername/photo-share.git cd photo-share
-
Install dependencies:
pnpm install
Create a .env
file in the root of your project and set the following environment variables based on your setup:
NODE_ENV=development
PUBLIC_DEV_DATA_DIR=C:\Users\me\Pictures\photo-share
PUBLIC_PROD_DATA_DIR=/data
These variables specify the directories where your media files are stored. Adjust the paths according to your development and production environments.
To start the development server, run:
pnpm run dev
This will launch the SvelteKit application at http://localhost:3000
.
For production, build the application and start the server:
pnpm run build
pnpm run preview
Media files (images and videos) should be uploaded to the directory specified in your environment variables:
- For development:
PUBLIC_DEV_DATA_DIR
- For production:
PUBLIC_PROD_DATA_DIR
Organize your files in folders as desired. The application will automatically read and display the folder structure.
Photo Share supports the following file types:
- Images:
.jpg
,.jpeg
,.png
,.gif
- Videos:
.mp4
,.avi
,.mov
Other file types will be listed but not previewed.
Sure! Here's an updated description of the components in the README file, including the ImageViewer
component:
The folder navigation component (FolderNav.svelte
) allows users to browse through directories and select folders to view their contents.
The grid view component (GridView.svelte
) displays a grid of media files (images and videos) in the selected folder. It allows users to:
- Preview files by clicking on them
- Select individual files using checkboxes
- Open a full-size preview of a file
The image viewer component (ImageViewer.svelte
) provides a full-size preview of a selected image or video file. It offers the following features:
- Displays the full-size image or video
- Allows navigation to the previous or next file in the folder
- Provides a checkbox to select/deselect the current file
- Offers a download button to save the current file
- Supports closing the preview and returning to the grid view
The download component (DownloadButton.svelte
) allows users to download selected files or all files in a folder. It provides the following options:
- Download selected files: Users can select individual files using checkboxes in the grid view and click the download button to download them as a ZIP archive.
- Download all files in a folder: Users can click the download button without selecting any files to download all files in the current folder as a ZIP archive.
These components work together to provide a seamless experience for navigating folders, previewing files, selecting files, and downloading them.
The repository includes a Dockerfile
for containerizing the Photo Share application. To deploy the application as a Docker container, follow these steps:
-
Build the Docker image:
docker build -t photo-share .
-
Run the Docker container, mounting your media folder to
/data
in the container:docker run -d -p 3000:3000 -v /path/to/your/media:/data --name photo-share photo-share
Replace
/path/to/your/media
with the path to your media folder on your host machine. This command maps the/data
directory in the container to your local media folder, allowing the application to access your media files.
Contributions are welcome! Please fork the repository and create a pull request with your changes.
- Fork the repository.
- Create a feature branch.
- Commit your changes.
- Push to your branch.
- Create a new Pull Request.
This project is licensed under the MIT License. See the LICENSE file for details.