added video import and playback functionality

app/static/js/modal-pagination.js

@@ -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";
+            hasNextPageInput.value = doc.getElementById('hasNextPage')?.value || "false";
-            const newNextUrl = doc.getElementById('nextPageUrl')?.value || "";
+            nextPageUrlInput.value = doc.getElementById('nextPageUrl')?.value || "";
-            const newHasPrev = doc.getElementById('hasPrevPage')?.value || "false";
+            hasPrevPageInput.value = doc.getElementById('hasPrevPage')?.value || "false";
-            const newPrevUrl = doc.getElementById('prevPageUrl')?.value || "";
+            prevPageUrlInput.value = doc.getElementById('prevPageUrl')?.value || "";
-
-            hasNextPageInput.value = newHasNext;
-            nextPageUrlInput.value = newNextUrl;
-            hasPrevPageInput.value = newHasPrev;
-            prevPageUrlInput.value = newPrevUrl;
 
             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";
+            hasNextPageInput.value = doc.getElementById('hasNextPage')?.value || "false";
-            const newNextUrl = doc.getElementById('nextPageUrl')?.value || "";
+            nextPageUrlInput.value = doc.getElementById('nextPageUrl')?.value || "";
-            const newHasPrev = doc.getElementById('hasPrevPage')?.value || "false";
+            hasPrevPageInput.value = doc.getElementById('hasPrevPage')?.value || "false";
-            const newPrevUrl = doc.getElementById('prevPageUrl')?.value || "";
+            prevPageUrlInput.value = doc.getElementById('prevPageUrl')?.value || "";
-
-            hasNextPageInput.value = newHasNext;
-            nextPageUrlInput.value = newNextUrl;
-            hasPrevPageInput.value = newHasPrev;
-            prevPageUrlInput.value = newPrevUrl;
 
             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

@@ -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;

app/templates/_gallery_grid.html

@@ -3,10 +3,15 @@
   {% for image in images.items %}
     <div class="gallery-item">
       <div class="gallery-thumb img-clickable"
-           data-full="{{ url_for('main.serve_image', filename=image.filepath | replace('/images/', '') ) }}"
+          data-full="{{ url_for('main.serve_image', filename=image.filepath | replace('/images/', '') ) }}"
-           style="background-image: url('{{ url_for('main.serve_image', filename=(image.thumb_path or image.filepath) | replace('/images/', '') ) }}');"
+          data-type="{{ 'video' if image.filename.lower().endswith(('.mp4', '.mov')) else 'image' }}"
-           data-filename="{{ image.filename }}">
+          style="background-image: url('{{ url_for('main.serve_image', filename=(image.thumb_path or image.filepath) | replace('/images/', '') ) }}');"
+          data-filename="{{ image.filename }}">
+        {% if image.filename.lower().endswith(('.mp4', '.mov')) %}
+          <div class="play-overlay">▶</div>
+        {% endif %}
       </div>
+
       <a href="{{ url_for('main.artist_gallery', artist_name=image.artist) }}">{{ image.artist }}</a>
       <span class="image-date">{{ image.taken_at or image.imported_at | datetimeformat }}</span>
     </div>

app/utils/image_importer.py

@@ -1,5 +1,4 @@
 # app/utils/image_importer.py
-
 from datetime import datetime
 import os, shutil, hashlib, time
 from PIL import Image
@@ -7,6 +6,7 @@ import exifread
 import mimetypes
 import imagehash
 import uuid
+import subprocess
 
 from app import db
 from app.models import ImageRecord
@@ -29,7 +29,7 @@ def import_images_task(source_dir, dest_dir):
 
         for root, _, files in os.walk(artist_path):
             for file in files:
-                if file.lower().endswith(('.jpg', '.jpeg', '.png', '.gif', '.bmp', '.tiff')):
+                if file.lower().endswith(('.jpg', '.jpeg', '.jfif', '.png', '.gif', '.bmp', '.tiff', '.webp', '.mp4', '.mov')):
                     full_path = os.path.join(root, file)
                     filename = os.path.basename(full_path)
 
@@ -61,7 +61,12 @@ def import_images_task(source_dir, dest_dir):
                     shutil.copy2(full_path, dest_path)
 
                     try:
-                        thumb_path = generate_thumbnail(dest_path)
+                        if dest_path.lower().endswith(('.mp4', '.mov')):
+                            thumb_filename = f"{uuid.uuid4().hex}.jpg"
+                            thumb_path = os.path.join("/images/thumbs", thumb_filename)
+                            thumb_path = generate_video_thumbnail(dest_path, thumb_path)
+                        else:
+                            thumb_path = generate_thumbnail(dest_path)
                     except Exception as e:
                         print(f"[WARN] Failed to generate thumbnail for {filename}: {e}")
                         thumb_path = None
@@ -128,6 +133,24 @@ def generate_thumbnail(image_path, size=(400, 400), overwrite=False):
 
     return str(thumb_path)
 
+def generate_video_thumbnail(video_path, output_path, time_position="00:00:01"):
+    os.makedirs(os.path.dirname(output_path), exist_ok=True)
+
+    command = [
+        "ffmpeg",
+        "-i", video_path,
+        "-ss", time_position,
+        "-vframes", "1",
+        "-vf", f"scale={THUMB_SIZE[0]}:-1",
+        output_path
+    ]
+
+    try:
+        subprocess.run(command, check=True, stdout=subprocess.DEVNULL, stderr=subprocess.DEVNULL)
+        return output_path
+    except subprocess.CalledProcessError as e:
+        print(f"[WARN] Failed to extract video thumbnail for {video_path}: {e}")
+        return None
 
 def calculate_hash(file_path):
     hash_func = hashlib.sha256()
@@ -165,6 +188,29 @@ def extract_metadata(file_path):
         'taken_at': None
     }
 
+    metadata['file_size'] = os.path.getsize(file_path)
+    ext = os.path.splitext(file_path)[1].lower()
+
+    if ext in ('.mp4', '.mov'):
+        # Handle video dimensions using ffprobe
+        try:
+            import subprocess, json
+            cmd = [
+                "ffprobe", "-v", "error",
+                "-select_streams", "v:0",
+                "-show_entries", "stream=width,height",
+                "-of", "json", file_path
+            ]
+            result = subprocess.run(cmd, stdout=subprocess.PIPE, stderr=subprocess.DEVNULL, text=True)
+            data = json.loads(result.stdout)
+            stream = data.get("streams", [{}])[0]
+            metadata['width'] = stream.get('width')
+            metadata['height'] = stream.get('height')
+            metadata['format'] = 'mp4'
+        except Exception as e:
+            print(f"[WARN] Failed to extract video metadata: {file_path} – {e}")
+        return metadata
+
     try:
         metadata['file_size'] = os.path.getsize(file_path)
         with Image.open(file_path) as img:

dockerfile

@@ -6,7 +6,7 @@ WORKDIR /app
 
 # Install PostgreSQL client
 RUN apt-get update && \
-    apt-get install -y postgresql-client && \
+    apt-get install -y postgresql-client ffmpeg && \
     apt-get clean && \
     rm -rf /var/lib/apt/lists/*