ScreenshotPlayer/Readme.md
2025-05-27 23:02:54 +00:00

55 lines
2.3 KiB
Markdown

# Screenshot Timeline Player
**Screenshot Timeline Player** was created **(vibe-coded)** as a companion app for ShareX's Auto Capture feature. While you can use it with any folder of images, it truly shines when paired with ShareX's automated screenshot workflows. This app lets you view and play back your screenshots in chronological order, turning a folder of images into a timeline you can scrub, play, and explore.
![Empty Player](/images/Screenshot_empty.jpeg)
![Screenshot Timeline Player UI](/images/screenshot.png)
## Designed as a ShareX Companion App
Did you know that [ShareX](https://getsharex.com/), the awesome FOSS screengrabber, has a cool feature called **Auto Capture**? Auto Capture lets you automatically take screenshots at regular intervals, making it perfect for documenting workflows, monitoring changes, or just capturing everything that happens on your screen—without lifting a finger.
![alt text](/images/sharex-autocapture.png)
## Features
- **Folder Selection:** Load a folder of images (screenshots) at once.
- **Timeline Playback:** Play images in order, like a video.
- **Playback Controls:** Play, pause, go to first/last, next/previous image.
- **Speed Control:** Adjust playback speed (0.5x to 5x).
- **Thumbnails:** See and jump to any image using the thumbnail strip.
- **Keyboard Shortcuts:**
- `Space`: Play/Pause
- `←` / `→`: Previous/Next image
- **Multi Delete** Select multiple images and delete in one go.
## Usage
1. **Open the app** in your browser (open `src/index.html`).
2. Click **Select Folder** and choose a folder containing your screenshots or images (ideally, a folder created by ShareX Auto Capture).
3. Use the playback controls or keyboard shortcuts to navigate through your images.
## Supported Image Formats
- PNG, JPG, JPEG, GIF, BMP, WEBP
## Requirements
- A modern web browser (Chrome, Edge, Firefox, Safari).
- No installation or backend required.
- [ShareX](https://getsharex.com/) (recommended for best experience).
## How it Works
- The app uses the browser's [File System Access API](https://developer.mozilla.org/en-US/docs/Web/API/File_System_Access_API) to load images from your local folder.
- Images are sorted by their last modified date to create a timeline.
## License
MIT License. See [LICENSE](LICENSE) for details.
---
Made with [BeerCSS](https://www.beercss.com/) 🍺