bvandeusen/imagerepo
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

added video import and playback functionality

Browse Source
This commit is contained in:
Bryan Van Deusen
2025-08-03 20:42:49 -04:00
parent 3c3bfed75f
commit c480a176c2
5 changed files with 111 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/static/js/modal-pagination.js
+40 -27
View File
@@ -1,14 +1,12 @@
// /app/static/js/modal-pagination.js
document.addEventListener('DOMContentLoaded', () => {
const modal = document.getElementById('imageModal');
const modalImage = document.getElementById('modalImage');
const modalPrev = document.getElementById('modalPrev');
const modalNext = document.getElementById('modalNext');
const modalClose = document.getElementById('modalClose');
const modalImageWrapper = document.querySelector('.modal-image-wrapper');
modalImage.setAttribute('draggable', 'false');
let images = Array.from(document.querySelectorAll('.img-clickable'));
let currentIndex = -1;
let isZoomed = false;
@@ -25,7 +23,26 @@ document.addEventListener('DOMContentLoaded', () => {
function updateImage(index) {
const img = images[index];
modalImage.src = img.dataset.full;
const fileType = img.dataset.type || "image";
modalImageWrapper.innerHTML = "";
if (fileType === "video") {
const video = document.createElement("video");
video.src = img.dataset.full;
video.controls = true;
video.autoplay = true;
video.style.maxWidth = "100%";
video.style.maxHeight = "100%";
modalImageWrapper.appendChild(video);
} else {
const image = document.createElement("img");
image.src = img.dataset.full;
image.alt = "Full View";
image.setAttribute("draggable", "false");
image.id = "modalImage";
modalImageWrapper.appendChild(image);
}
currentIndex = index;
resetZoom();
}
@@ -38,7 +55,7 @@ document.addEventListener('DOMContentLoaded', () => {
function closeModal() {
modal.classList.remove('active');
modalImage.src = '';
modalImageWrapper.innerHTML = '';
currentIndex = -1;
resetZoom();
history.replaceState({}, '', window.location.pathname + window.location.search);
@@ -65,15 +82,10 @@ document.addEventListener('DOMContentLoaded', () => {
img.addEventListener('click', () => openModal(i));
});
const newHasNext = doc.getElementById('hasNextPage')?.value || "false";
const newNextUrl = doc.getElementById('nextPageUrl')?.value || "";
const newHasPrev = doc.getElementById('hasPrevPage')?.value || "false";
const newPrevUrl = doc.getElementById('prevPageUrl')?.value || "";
hasNextPageInput.value = newHasNext;
nextPageUrlInput.value = newNextUrl;
hasPrevPageInput.value = newHasPrev;
prevPageUrlInput.value = newPrevUrl;
hasNextPageInput.value = doc.getElementById('hasNextPage')?.value || "false";
nextPageUrlInput.value = doc.getElementById('nextPageUrl')?.value || "";
hasPrevPageInput.value = doc.getElementById('hasPrevPage')?.value || "false";
prevPageUrlInput.value = doc.getElementById('prevPageUrl')?.value || "";
history.pushState({}, '', nextPageUrlInput.value);
openModal(0);
@@ -103,15 +115,10 @@ document.addEventListener('DOMContentLoaded', () => {
img.addEventListener('click', () => openModal(i));
});
const newHasNext = doc.getElementById('hasNextPage')?.value || "false";
const newNextUrl = doc.getElementById('nextPageUrl')?.value || "";
const newHasPrev = doc.getElementById('hasPrevPage')?.value || "false";
const newPrevUrl = doc.getElementById('prevPageUrl')?.value || "";
hasNextPageInput.value = newHasNext;
nextPageUrlInput.value = newNextUrl;
hasPrevPageInput.value = newHasPrev;
prevPageUrlInput.value = newPrevUrl;
hasNextPageInput.value = doc.getElementById('hasNextPage')?.value || "false";
nextPageUrlInput.value = doc.getElementById('nextPageUrl')?.value || "";
hasPrevPageInput.value = doc.getElementById('hasPrevPage')?.value || "false";
prevPageUrlInput.value = doc.getElementById('prevPageUrl')?.value || "";
history.pushState({}, '', prevPageUrlInput.value);
openModal(images.length - 1);
@@ -121,6 +128,8 @@ document.addEventListener('DOMContentLoaded', () => {
}
function toggleZoom() {
const isImage = modalImageWrapper.querySelector('img') !== null;
if (!isImage) return;
isZoomed = !isZoomed;
modalImageWrapper.classList.toggle('zoomed', isZoomed);
modalImageWrapper.style.cursor = isZoomed ? 'grab' : '';
@@ -139,7 +148,8 @@ document.addEventListener('DOMContentLoaded', () => {
}
modalImageWrapper.addEventListener('mousedown', (e) => {
if (!isZoomed) return;
const isImage = modalImageWrapper.querySelector('img') !== null;
if (!isZoomed || !isImage) return;
isDragging = true;
dragMoved = false;
modalImageWrapper.style.cursor = 'grabbing';
@@ -153,16 +163,19 @@ document.addEventListener('DOMContentLoaded', () => {
modalImageWrapper.addEventListener('mouseleave', () => {
isDragging = false;
if (isZoomed) modalImageWrapper.style.cursor = 'grab';
const isImage = modalImageWrapper.querySelector('img') !== null;
if (isZoomed && isImage) modalImageWrapper.style.cursor = 'grab';
});
modalImageWrapper.addEventListener('mouseup', () => {
isDragging = false;
if (isZoomed) modalImageWrapper.style.cursor = 'grab';
const isImage = modalImageWrapper.querySelector('img') !== null;
if (isZoomed && isImage) modalImageWrapper.style.cursor = 'grab';
});
modalImageWrapper.addEventListener('mousemove', (e) => {
if (!isDragging || !isZoomed) return;
const isImage = modalImageWrapper.querySelector('img') !== null;
if (!isDragging || !isZoomed || !isImage) return;
e.preventDefault();
dragMoved = true;
const x = e.pageX - modalImageWrapper.offsetLeft;
app/static/style.css
+13
View File
@@ -114,6 +114,7 @@ body {
}
.gallery-thumb {
position: relative;
width: 100%;
height: 100%;
background-size: cover;
@@ -135,6 +136,18 @@ body {
color: #d4d4d4;
}
.play-overlay {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 3rem;
color: white;
text-shadow: 0 0 8px rgba(0, 0, 0, 0.8);
opacity: 1;
pointer-events: none;
z-index: 2;
}
.pagination-container {
text-align: center;