initial
This commit is contained in:
Jose Aquino Jr
commit
b7d788be14
45
Readme.md
Normal file
45
Readme.md
Normal file
@ -0,0 +1,45 @@
|
||||
|
||||
# Screenshot Timeline Player
|
||||
|
||||
Screenshot Timeline Player is a web app that lets you view and play back a sequence of screenshots (or other images) in chronological order, like a timeline slideshow.
|
||||
|
||||
|
||||
|
||||
## 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
|
||||
|
||||
## 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.
|
||||
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.
|
||||
|
||||
## 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
|
||||
|
||||
This project is provided as-is for personal use.
|
||||
|
||||
---
|
||||
|
||||
Made with [BeerCSS](https://www.beercss.com/) 🍺
|
||||
BIN
screenshot.png
Normal file
BIN
screenshot.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.5 MiB |
450
src/index.html
Normal file
450
src/index.html
Normal file
@ -0,0 +1,450 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Screenshot Timeline Player</title>
|
||||
<link href="https://cdn.jsdelivr.net/npm/beercss@3.11.11/dist/cdn/beer.min.css" rel="stylesheet">
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 20px;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.main-container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.header {
|
||||
text-align: center;
|
||||
margin-bottom: 2rem;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.controls-card {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.thumbnails-container {
|
||||
background: rgba(255,255,255,0.1);
|
||||
backdrop-filter: blur(10px);
|
||||
border-radius: 0.5rem;
|
||||
padding: 1rem;
|
||||
margin-top: 1rem;
|
||||
border: 1px solid rgba(255,255,255,0.2);
|
||||
max-height: 150px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.thumbnails-scroll {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
padding: 0.5rem 0;
|
||||
overflow-x: auto;
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
.thumbnail {
|
||||
min-width: 100px;
|
||||
height: 80px;
|
||||
border-radius: 0.25rem;
|
||||
cursor: pointer;
|
||||
object-fit: cover;
|
||||
border: 2px solid transparent;
|
||||
transition: all 0.3s ease;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.thumbnail:hover {
|
||||
opacity: 1;
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.thumbnail.active {
|
||||
border-color: #ff6b6b;
|
||||
opacity: 1;
|
||||
box-shadow: 0 0 10px rgba(255, 107, 107, 0.5);
|
||||
}
|
||||
|
||||
.image-viewer {
|
||||
background: rgba(255,255,255,0.1);
|
||||
backdrop-filter: blur(10px);
|
||||
border-radius: 0.5rem;
|
||||
padding: 1rem;
|
||||
border: 1px solid rgba(255,255,255,0.2);
|
||||
min-height: 500px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.main-image {
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
object-fit: contain;
|
||||
border-radius: 0.5rem;
|
||||
box-shadow: 0 8px 32px rgba(0,0,0,0.3);
|
||||
}
|
||||
|
||||
.image-info {
|
||||
position: absolute;
|
||||
top: 1rem;
|
||||
left: 1rem;
|
||||
background: rgba(0,0,0,0.8);
|
||||
color: white;
|
||||
padding: 0.5rem 1rem;
|
||||
border-radius: 1rem;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.timeline-progress {
|
||||
height: 4px;
|
||||
background: linear-gradient(90deg, #ff6b6b, #ee5a24);
|
||||
border-radius: 2px;
|
||||
transition: width 0.3s ease;
|
||||
width: 0%;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
.control-group {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.speed-control {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.placeholder {
|
||||
text-align: center;
|
||||
color: rgba(255,255,255,0.7);
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.file-input {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.status {
|
||||
color: rgba(255,255,255,0.9);
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.control-group {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.status {
|
||||
margin-left: 0;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="dark">
|
||||
<div class="main-container">
|
||||
<div class="header">
|
||||
<h1>📸 Screenshot Timeline</h1>
|
||||
<p>Play your screenshots in chronological order</p>
|
||||
</div>
|
||||
|
||||
<article class="image-viewer" id="imageContainer">
|
||||
<div class="placeholder">
|
||||
Select a folder containing screenshots to begin
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<div class="thumbnails-container" id="thumbnailsContainer" style="display: none;">
|
||||
<div class="thumbnails-scroll" id="thumbnailsScroll">
|
||||
<!-- Thumbnails will be added here -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<article class="controls-card">
|
||||
<div class="control-group">
|
||||
<button class="button primary" onclick="selectFolder()">
|
||||
<i>folder</i>
|
||||
<span>Select Folder</span>
|
||||
</button>
|
||||
<button class="button primary" id="playBtn" onclick="togglePlay()" disabled>
|
||||
<i>play_arrow</i>
|
||||
<span>Play</span>
|
||||
</button>
|
||||
<button class="button primary" onclick="goToFirst()" disabled id="firstBtn" class="round-btn" title="First">
|
||||
<i>first_page</i>
|
||||
</button>
|
||||
<button class="button primary" onclick="previousImage()" disabled id="prevBtn" class="round-btn" title="Previous">
|
||||
<i>skip_previous</i>
|
||||
</button>
|
||||
<button class="button primary" onclick="nextImage()" disabled id="nextBtn" class="round-btn" title="Next">
|
||||
<i>skip_next</i>
|
||||
</button>
|
||||
<button class="button primary" onclick="goToLast()" disabled id="lastBtn" class="round-btn" title="Last">
|
||||
<i>last_page</i>
|
||||
</button>
|
||||
|
||||
<div class="speed-control">
|
||||
<span>Speed:</span>
|
||||
<input type="range" id="speedSlider" min="0.5" max="5" step="0.5" value="1" onchange="updateSpeed()">
|
||||
<span id="speedValue">1x</span>
|
||||
</div>
|
||||
|
||||
<div class="status" id="status">No folder selected</div>
|
||||
</div>
|
||||
|
||||
<div class="timeline-progress" id="timelineProgress"></div>
|
||||
</article>
|
||||
</div>
|
||||
|
||||
<input type="file" id="folderInput" class="file-input" webkitdirectory>
|
||||
|
||||
|
||||
<script>
|
||||
let images = [];
|
||||
let currentIndex = 0;
|
||||
let isPlaying = false;
|
||||
let playInterval = null;
|
||||
let playSpeed = 1000;
|
||||
|
||||
function selectFolder() {
|
||||
document.getElementById('folderInput').click();
|
||||
}
|
||||
|
||||
document.getElementById('folderInput').addEventListener('change', async function(e) {
|
||||
const files = Array.from(e.target.files);
|
||||
await loadImages(files);
|
||||
});
|
||||
|
||||
async function loadImages(files) {
|
||||
const imageFiles = files.filter(file =>
|
||||
file.type.startsWith('image/') &&
|
||||
/\.(png|jpg|jpeg|gif|bmp|webp)$/i.test(file.name)
|
||||
);
|
||||
|
||||
if (imageFiles.length === 0) {
|
||||
updateStatus('No image files found');
|
||||
return;
|
||||
}
|
||||
|
||||
updateStatus(`Loading ${imageFiles.length} images...`);
|
||||
|
||||
const imageData = await Promise.all(
|
||||
imageFiles.map(async file => ({
|
||||
file: file,
|
||||
url: URL.createObjectURL(file),
|
||||
name: file.name,
|
||||
createdDate: new Date(file.lastModified),
|
||||
size: file.size
|
||||
}))
|
||||
);
|
||||
|
||||
images = imageData.sort((a, b) => a.createdDate - b.createdDate);
|
||||
|
||||
currentIndex = 0;
|
||||
createThumbnails();
|
||||
updateButtons();
|
||||
displayCurrentImage();
|
||||
updateStatus(`Loaded ${images.length} images`);
|
||||
}
|
||||
|
||||
function createThumbnails() {
|
||||
const container = document.getElementById('thumbnailsScroll');
|
||||
const thumbnailsContainer = document.getElementById('thumbnailsContainer');
|
||||
|
||||
container.innerHTML = '';
|
||||
|
||||
if (images.length === 0) {
|
||||
thumbnailsContainer.style.display = 'none';
|
||||
return;
|
||||
}
|
||||
|
||||
thumbnailsContainer.style.display = 'block';
|
||||
|
||||
images.forEach((img, index) => {
|
||||
const thumb = document.createElement('img');
|
||||
thumb.src = img.url;
|
||||
thumb.className = 'thumbnail';
|
||||
thumb.onclick = () => goToImage(index);
|
||||
thumb.title = `${img.name} - ${img.createdDate.toLocaleString()}`;
|
||||
container.appendChild(thumb);
|
||||
});
|
||||
|
||||
updateThumbnailHighlight();
|
||||
}
|
||||
|
||||
function updateThumbnailHighlight() {
|
||||
const thumbnails = document.querySelectorAll('.thumbnail');
|
||||
thumbnails.forEach((thumb, index) => {
|
||||
thumb.classList.toggle('active', index === currentIndex);
|
||||
});
|
||||
|
||||
// Scroll active thumbnail into view
|
||||
// if (thumbnails[currentIndex]) {
|
||||
// thumbnails[currentIndex].scrollIntoView({
|
||||
// behavior: 'smooth',
|
||||
// block: 'nearest',
|
||||
// inline: 'center'
|
||||
// });
|
||||
// }
|
||||
}
|
||||
|
||||
function goToFirst() {
|
||||
if (images.length > 0) {
|
||||
currentIndex = 0;
|
||||
displayCurrentImage();
|
||||
}
|
||||
}
|
||||
|
||||
function goToLast() {
|
||||
if (images.length > 0) {
|
||||
currentIndex = images.length - 1;
|
||||
displayCurrentImage();
|
||||
}
|
||||
}
|
||||
|
||||
function goToImage(index) {
|
||||
if (index >= 0 && index < images.length) {
|
||||
currentIndex = index;
|
||||
displayCurrentImage();
|
||||
updateThumbnailHighlight();
|
||||
}
|
||||
}
|
||||
|
||||
function displayCurrentImage() {
|
||||
const container = document.getElementById('imageContainer');
|
||||
|
||||
if (images.length === 0) {
|
||||
container.innerHTML = '<div class="placeholder">No images loaded</div>';
|
||||
return;
|
||||
}
|
||||
|
||||
const current = images[currentIndex];
|
||||
const createdDate = current.createdDate.toLocaleString();
|
||||
|
||||
container.innerHTML = `
|
||||
<img src="${current.url}" alt="${current.name}" class="main-image">
|
||||
<div class="image-info">
|
||||
${currentIndex + 1} / ${images.length}<br>
|
||||
${current.name}<br>
|
||||
${createdDate}
|
||||
</div>
|
||||
`;
|
||||
|
||||
updateTimeline();
|
||||
updateThumbnailHighlight();
|
||||
}
|
||||
|
||||
function updateTimeline() {
|
||||
const progress = images.length > 0 ? ((currentIndex + 1) / images.length) * 100 : 0;
|
||||
document.getElementById('timelineProgress').style.width = progress + '%';
|
||||
}
|
||||
|
||||
function togglePlay() {
|
||||
if (isPlaying) {
|
||||
stopPlay();
|
||||
} else {
|
||||
startPlay();
|
||||
}
|
||||
}
|
||||
|
||||
function startPlay() {
|
||||
if (images.length === 0) return;
|
||||
|
||||
isPlaying = true;
|
||||
const playBtn = document.getElementById('playBtn');
|
||||
playBtn.innerHTML = '<i>pause</i><span>Pause</span>';
|
||||
|
||||
playInterval = setInterval(() => {
|
||||
if (currentIndex < images.length - 1) {
|
||||
nextImage();
|
||||
} else {
|
||||
stopPlay();
|
||||
}
|
||||
}, playSpeed);
|
||||
}
|
||||
|
||||
function stopPlay() {
|
||||
isPlaying = false;
|
||||
const playBtn = document.getElementById('playBtn');
|
||||
playBtn.innerHTML = '<i>play_arrow</i><span>Play</span>';
|
||||
|
||||
if (playInterval) {
|
||||
clearInterval(playInterval);
|
||||
playInterval = null;
|
||||
}
|
||||
}
|
||||
|
||||
function nextImage() {
|
||||
if (currentIndex < images.length - 1) {
|
||||
currentIndex++;
|
||||
displayCurrentImage();
|
||||
}
|
||||
}
|
||||
|
||||
function previousImage() {
|
||||
if (currentIndex > 0) {
|
||||
currentIndex--;
|
||||
displayCurrentImage();
|
||||
}
|
||||
}
|
||||
|
||||
function updateSpeed() {
|
||||
const speed = parseFloat(document.getElementById('speedSlider').value);
|
||||
playSpeed = 1000 / speed;
|
||||
document.getElementById('speedValue').textContent = speed + 'x';
|
||||
|
||||
if (isPlaying) {
|
||||
clearInterval(playInterval);
|
||||
playInterval = setInterval(() => {
|
||||
if (currentIndex < images.length - 1) {
|
||||
nextImage();
|
||||
} else {
|
||||
stopPlay();
|
||||
}
|
||||
}, playSpeed);
|
||||
}
|
||||
}
|
||||
|
||||
function updateButtons() {
|
||||
const hasImages = images.length > 0;
|
||||
document.getElementById('playBtn').disabled = !hasImages;
|
||||
document.getElementById('firstBtn').disabled = !hasImages;
|
||||
document.getElementById('prevBtn').disabled = !hasImages;
|
||||
document.getElementById('nextBtn').disabled = !hasImages;
|
||||
document.getElementById('lastBtn').disabled = !hasImages;
|
||||
}
|
||||
|
||||
function updateStatus(message) {
|
||||
document.getElementById('status').textContent = message;
|
||||
}
|
||||
|
||||
// Keyboard shortcuts
|
||||
document.addEventListener('keydown', function(e) {
|
||||
switch(e.code) {
|
||||
case 'Space':
|
||||
e.preventDefault();
|
||||
if (images.length > 0) togglePlay();
|
||||
break;
|
||||
case 'ArrowLeft':
|
||||
previousImage();
|
||||
break;
|
||||
case 'ArrowRight':
|
||||
nextImage();
|
||||
break;
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
x
Reference in New Issue
Block a user