jokab/ScreenshotPlayer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

delete images feature

Browse Source
This commit is contained in:
Jose Aquino Jr 2025-05-27 17:11:36 +01:00
parent 0da9524f87
commit e3be402bb0
2 changed files with 70 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
screenshot.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.5 MiB

After

Width:  |  Height:  |  Size: 278 KiB

86
src/index.html
View File

@ -69,6 +69,11 @@
box-shadow: 0 0 10px rgba(255, 107, 107, 0.5);
}
.thumbnail.selected {
border-color: #4caf50;
background-color: rgba(76, 175, 80, 0.3);
}
.image-viewer {
background: rgba(255,255,255,0.1);
backdrop-filter: blur(10px);
@ -182,25 +187,25 @@
<article class="controls-card">
<div class="status" id="status">No folder selected</div>
<div class="timeline-progress" id="timelineProgress"></div>
<div class="timeline-labels" id="timelineLabels" style="display: flex; justify-content: space-between; font-size: 0.8rem; color: #fff; margin-bottom: 0.5rem;"></div>
<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" id="playBtn" onclick="togglePlay()" disabled>
<i>play_arrow</i>
<span>Play</span>
</button>
<button class="button primary" onclick="nextImage()" disabled id="nextBtn" class="round-btn" title="Next">
<i>skip_next</i>
</button>
@ -214,7 +219,9 @@
<span id="speedValue">1x</span>
</div>
<div class="status" id="status">No folder selected</div>
<button class="button danger" id="deleteBtn" onclick="deleteSelectedImages()" disabled>
<i>delete</i>
</button>
</div>
</article>
</div>
@ -228,6 +235,7 @@
let isPlaying = false;
let playInterval = null;
let playSpeed = 1000;
let selectedIndices = [];
function selectFolder() {
document.getElementById('folderInput').click();
@ -273,37 +281,60 @@
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.onclick = (e) => handleThumbnailClick(e, index);
thumb.title = `${img.name} - ${img.createdDate.toLocaleString()}`;
container.appendChild(thumb);
});
updateThumbnailHighlight();
}
function handleThumbnailClick(e, index) {
if (e.ctrlKey || e.metaKey) {
// Toggle selection
if (selectedIndices.includes(index)) {
selectedIndices = selectedIndices.filter(i => i !== index);
} else {
selectedIndices.push(index);
}
} else if (e.shiftKey && selectedIndices.length > 0) {
// Range select
const last = selectedIndices[selectedIndices.length - 1];
const [start, end] = [Math.min(last, index), Math.max(last, index)];
selectedIndices = [];
for (let i = start; i <= end; i++) selectedIndices.push(i);
} else {
// Single select
selectedIndices = [index];
}
updateThumbnailHighlight();
if (selectedIndices.length === 1) {
currentIndex = selectedIndices[0];
displayCurrentImage();
} else {
displayCurrentImage();
}
updateDeleteButton();
}
function updateThumbnailHighlight() {
const thumbnails = document.querySelectorAll('.thumbnail');
thumbnails.forEach((thumb, index) => {
thumb.classList.toggle('active', index === currentIndex);
thumb.classList.toggle('active', index === currentIndex && selectedIndices.length <= 1);
thumb.classList.toggle('selected', selectedIndices.includes(index));
});
// Scroll active thumbnail into view
if (thumbnails[currentIndex]) {
thumbnails[currentIndex].scrollIntoView({
if (selectedIndices.length === 1 && thumbnails[selectedIndices[0]]) {
thumbnails[selectedIndices[0]].scrollIntoView({
behavior: 'smooth',
block: 'nearest',
inline: 'center'
@ -340,7 +371,10 @@
container.innerHTML = '<div class="placeholder">No images loaded</div>';
return;
}
if (selectedIndices.length > 1) {
container.innerHTML = `<div class="placeholder">${selectedIndices.length} images selected. Use the Delete Selected button to remove them.</div>`;
return;
}
const current = images[currentIndex];
const createdDate = current.createdDate.toLocaleString();
@ -552,6 +586,24 @@
document.getElementById('status').textContent = message;
}
function updateDeleteButton() {
document.getElementById('deleteBtn').disabled = selectedIndices.length === 0;
}
function deleteSelectedImages() {
if (selectedIndices.length === 0) return;
// Remove selected images
images = images.filter((_, idx) => !selectedIndices.includes(idx));
// Reset selection and currentIndex
selectedIndices = [];
currentIndex = Math.min(currentIndex, images.length - 1);
createThumbnails();
updateButtons();
displayCurrentImage();
updateStatus(`Deleted selected images.`);
updateDeleteButton();
}
// Keyboard shortcuts
document.addEventListener('keydown', function(e) {
switch(e.code) {