Add download button to viewer and mosaic interfaces for original media files

Author: dacr

frontend-user-interface/assets/css/styles.css

@@ -80,6 +80,11 @@ main { flex: 1; position: relative; }
 /* Reserved: placeholder class no longer used; keep for compatibility */
 .mosaic-placeholder { display: none; }
 
+/* Mosaic download button (bottom-right) */
+.mosaic-download-btn { position: absolute; right: 4px; bottom: 4px; background: rgba(37,99,235,0.92); color: #fff; border: none; border-radius: 12px; padding: 4px 6px; font-size: 11px; line-height: 1; cursor: pointer; opacity: 0; transform: translateY(4px); transition: opacity 160ms ease, transform 160ms ease; box-shadow: 0 1px 4px rgba(0,0,0,0.2); z-index: 5; }
+.mosaic-tile:hover .mosaic-download-btn, .mosaic-tile:focus-within .mosaic-download-btn { opacity: 1; transform: translateY(0); }
+.mosaic-download-btn:hover { background: #1d4ed8; }
+
 /* Tooltip for mosaic photo tiles */
 .mosaic-photo-tooltip {
   position: fixed;
@@ -180,13 +185,20 @@ section#tab-mosaic.tab.active { display: flex; }
 }
 
 /* Hover edit button on viewer image */
-.img-edit-btn { position: absolute; right: 8px; bottom: 8px; background: rgba(37,99,235,0.92); color: #fff; border: none; border-radius: 16px; padding: 6px 10px; font-size: 12px; cursor: pointer; opacity: 0; transform: translateY(4px); transition: opacity 160ms ease, transform 160ms ease; box-shadow: 0 2px 6px rgba(0,0,0,0.2); z-index: 5; }
+.img-edit-btn { position: absolute; right: 50px; bottom: 8px; background: rgba(37,99,235,0.92); color: #fff; border: none; border-radius: 16px; padding: 6px 10px; font-size: 12px; cursor: pointer; opacity: 0; transform: translateY(4px); transition: opacity 160ms ease, transform 160ms ease; box-shadow: 0 2px 6px rgba(0,0,0,0.2); z-index: 5; }
 .image-container:hover .img-edit-btn { opacity: 1; transform: translateY(0); }
 .img-edit-btn:hover { background: #1d4ed8; }
 /* Hide image edit button in fullscreen mode */
 .image-container:fullscreen .img-edit-btn { display: none !important; }
 .image-container:-webkit-full-screen .img-edit-btn { display: none !important; }
 
+/* Download button (Viewer) - Added to the right of edit button */
+.img-download-btn { position: absolute; right: 8px; bottom: 8px; background: rgba(37,99,235,0.92); color: #fff; border: none; border-radius: 16px; padding: 6px 10px; font-size: 12px; cursor: pointer; opacity: 0; transform: translateY(4px); transition: opacity 160ms ease, transform 160ms ease; box-shadow: 0 2px 6px rgba(0,0,0,0.2); z-index: 5; }
+.image-container:hover .img-download-btn { opacity: 1; transform: translateY(0); }
+.img-download-btn:hover { background: #1d4ed8; }
+.image-container:fullscreen .img-download-btn { display: none !important; }
+.image-container:-webkit-full-screen .img-download-btn { display: none !important; }
+
 /* Add face button (Viewer) */
 .img-add-btn { position: absolute; right: 92px; bottom: 8px; background: rgba(37,99,235,0.92); color: #fff; border: none; border-radius: 16px; padding: 6px 10px; font-size: 12px; cursor: pointer; opacity: 0; transform: translateY(4px); transition: opacity 160ms ease, transform 160ms ease; box-shadow: 0 2px 6px rgba(0,0,0,0.2); z-index: 5; }
 .image-container:hover .img-add-btn { opacity: 1; transform: translateY(0); }
@@ -195,7 +207,7 @@ section#tab-mosaic.tab.active { display: flex; }
 .image-container:-webkit-full-screen .img-add-btn { display: none !important; }
 
 /* Confirm-all inferred faces button (Viewer) */
-.img-confirm-btn { position: absolute; right: 176px; bottom: 8px; background: rgba(245,158,11,0.95); color: #111827; border: none; border-radius: 16px; padding: 6px 10px; font-size: 12px; cursor: pointer; opacity: 0; transform: translateY(4px); transition: opacity 160ms ease, transform 160ms ease; box-shadow: 0 2px 6px rgba(0,0,0,0.2); z-index: 5; display: none; }
+.img-confirm-btn { position: absolute; right: 200px; bottom: 8px; background: rgba(245,158,11,0.95); color: #111827; border: none; border-radius: 16px; padding: 6px 10px; font-size: 12px; cursor: pointer; opacity: 0; transform: translateY(4px); transition: opacity 160ms ease, transform 160ms ease; box-shadow: 0 2px 6px rgba(0,0,0,0.2); z-index: 5; display: none; }
 .image-container:hover .img-confirm-btn { opacity: 1; transform: translateY(0); }
 .img-confirm-btn:hover { background: rgba(245,158,11,1); }
 /* Hide confirm-all button in fullscreen mode (same as edit) */

frontend-user-interface/assets/js/app.js

@@ -2696,6 +2696,41 @@ function createMosaicTile(media) {
   // Do not set src yet; we will assign it once preload completes
   tile.appendChild(hiImg);
 
+  // Inject Download button
+  const dBtn = document.createElement('button');
+  dBtn.className = 'mosaic-download-btn';
+  dBtn.type = 'button';
+  dBtn.title = 'Download original image';
+  dBtn.textContent = '⬇';
+  dBtn.addEventListener('click', (e) => {
+    e.stopPropagation();
+    const url = api.mediaOriginalUrl(media.accessKey);
+    const dateVal = media.shootDateTime || (media.original ? media.original.cameraShootDateTime : null);
+    let ext = 'jpg';
+    if (media.original && media.original.kind === 'Video') { ext = 'mp4'; }
+    let filename = `selected_unknown.${ext}`;
+    if (dateVal) {
+      const d = new Date(dateVal);
+      if (!isNaN(d.getTime())) {
+        const pad = (n) => n.toString().padStart(2, '0');
+        const yyyy = d.getFullYear();
+        const MM = pad(d.getMonth() + 1);
+        const dd = pad(d.getDate());
+        const HH = pad(d.getHours());
+        const mm = pad(d.getMinutes());
+        const ss = pad(d.getSeconds());
+        filename = `selected_${yyyy}${MM}${dd}_${HH}${mm}${ss}.${ext}`;
+      }
+    }
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = filename;
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+  });
+  tile.appendChild(dBtn);
+
   async function showNormalized() {
     try {
       if (tile.__normalizedLoaded) {
@@ -5223,10 +5258,51 @@ function init() {
     btn.className = 'img-edit-btn';
     btn.type = 'button';
     btn.title = 'Edit media';
-    btn.textContent = '✎ Edit';
+    btn.textContent = '✎';
     btn.addEventListener('click', (e) => { e.stopPropagation(); if (currentMedia) openMediaEditModal(currentMedia); else alert('No media loaded'); });
     cont.appendChild(btn);
   }
+  // Inject Download button (bottom-right, right of edit button)
+  if (cont && !document.getElementById('img-download-btn')) {
+    const dBtn = document.createElement('button');
+    dBtn.id = 'img-download-btn';
+    dBtn.className = 'img-download-btn';
+    dBtn.type = 'button';
+    dBtn.title = 'Download original image';
+    dBtn.textContent = '⬇';
+    dBtn.addEventListener('click', (e) => {
+      e.stopPropagation();
+      if (currentMedia) {
+        const url = api.mediaOriginalUrl(currentMedia.accessKey);
+        const dateVal = currentMedia.shootDateTime || (currentMedia.original ? currentMedia.original.cameraShootDateTime : null);
+        let ext = 'jpg';
+        if (currentMedia.original && currentMedia.original.kind === 'Video') { ext = 'mp4'; }
+        let filename = `selected_unknown.${ext}`;
+        if (dateVal) {
+          const d = new Date(dateVal);
+          if (!isNaN(d.getTime())) {
+            const pad = (n) => n.toString().padStart(2, '0');
+            const yyyy = d.getFullYear();
+            const MM = pad(d.getMonth() + 1);
+            const dd = pad(d.getDate());
+            const HH = pad(d.getHours());
+            const mm = pad(d.getMinutes());
+            const ss = pad(d.getSeconds());
+            filename = `selected_${yyyy}${MM}${dd}_${HH}${mm}${ss}.${ext}`;
+          }
+        }
+        const a = document.createElement('a');
+        a.href = url;
+        a.download = filename;
+        document.body.appendChild(a);
+        a.click();
+        document.body.removeChild(a);
+      } else {
+        alert('No media loaded');
+      }
+    });
+    cont.appendChild(dBtn);
+  }
   // Inject Add Face button near the edit button
   if (cont && !document.getElementById('img-add-btn')) {
     const addBtn = document.createElement('button');