release(v1.8.2): media progress tracking + watched badges; PWA scaffolding; mobile switcher (closes #37)

2025-11-04 20:34:42 -05:00
parent 4bb9d81370
commit c843f00738
23 changed files with 1320 additions and 384 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,37 @@
 # Changelog

+## Changes 11/4/2025 (v1.8.2)
+
+release(v1.8.2): media progress tracking + watched badges; PWA scaffolding; mobile switcher (closes #37)
+
+- **Highlights**
+  - Video: auto-save playback progress and mark “Watched”, with resume-on-open and inline status chips on list/gallery.
+  - Mobile: introduced FileRise Mobile (Capacitor) companion repo + in-app server switcher and PWA bits.
+
+- **Details**
+  - API (new):
+    - POST /api/media/updateProgress.php — persist per-user progress (seconds/duration/completed).
+    - GET  /api/media/getProgress.php — fetch per-file progress.
+    - GET  /api/media/getViewedMap.php — folder map for badges.
+
+- **Frontend (media):**
+  - Video previews now resume from last position, periodically save progress, and mark completed on end, with toasts.
+  - Added status badges (“Watched” / %-complete) in table & gallery; CSS polish for badges.
+  - Badges render during list/gallery refresh; safer filename wrapping for badge injection.
+
+- **Mobile & PWA:**
+  - New in-app server switcher (Capacitor-aware) loaded only in app/standalone contexts.
+  - Service Worker + manifest added (root scope via /public/sw.js; worker body in /js/pwa/sw.js; manifest icons).
+  - main.js conditionally imports the mobile switcher and registers the SW on web origins only.
+
+- **Notes**
+  - Companion repo: **filerise-mobile** (Capacitor app shell) created for iOS/Android distribution.
+  - No breaking changes expected; endpoints are additive.
+
+Closes #37.
+
+---
+
 ## Changes 11/3/2025 (V1.8.1)

 release(v1.8.1): fix(security,onlyoffice): sanitize DS origin; safe api.js/iframe probes; better UX placeholder
--- a/README.md
+++ b/README.md
@@ -369,12 +369,13 @@ FileRise can open & edit office docs using your **self-hosted ONLYOFFICE Documen
   **Apache**

   ```apache
-   Header always set Content-Security-Policy "default-src 'self'; frame-src 'self' https://docs.example.com; script-src 'self' https://docs.example.com https://docs.example.com/web-apps/apps/api/documents/api.js; connect-src 'self' https://docs.example.com; style-src 'self' 'unsafe-inline'; img-src 'self' data: blob:; font-src 'self'"
+   Header always set Content-Security-Policy "default-src 'self'; base-uri 'self'; frame-ancestors 'self'; object-src 'none'; script-src 'self' 'sha256-ajmGY+5VJOY6+8JHgzCqsqI8w9dCQfAmqIkFesOKItM=' https://your-onlyoffice-server.example.com https://your-onlyoffice-server.example.com/web-apps/apps/api/documents/api.js; style-src 'self' 'unsafe-inline'; img-src 'self' data: blob:; font-src 'self'; connect-src 'self' https://your-onlyoffice-server.example.com; media-src 'self' blob:; worker-src 'self' blob:; form-action 'self'; frame-src 'self' https://your-onlyoffice-server.example.com"
   ```

   **Nginx**

-   ```add_header Content-Security-Policy "default-src 'self'; frame-src 'self' https://docs.example.com; script-src 'self' https://docs.example.com https://docs.example.com/web-apps/apps/api/documents/api.js; connect-src 'self' https://docs.example.com; style-src 'self' 'unsafe-inline'; img-src 'self' data: blob:; font-src 'self'" always;
+   ```nginx
+   add_header Content-Security-Policy "default-src 'self'; base-uri 'self'; frame-ancestors 'self'; object-src 'none'; script-src 'self' 'sha256-ajmGY+5VJOY6+8JHgzCqsqI8w9dCQfAmqIkFesOKItM=' https://your-onlyoffice-server.example.com https://your-onlyoffice-server.example.com/web-apps/apps/api/documents/api.js; style-src 'self' 'unsafe-inline'; img-src 'self' data: blob:; font-src 'self'; connect-src 'self' https://your-onlyoffice-server.example.com; media-src 'self' blob:; worker-src 'self' blob:; form-action 'self'; frame-src 'self' https://your-onlyoffice-server.example.com" always;
   ```

   **Notes**
--- a/public/api/media/getProgress.php
+++ b/public/api/media/getProgress.php
@@ -0,0 +1,7 @@
+<?php
+// public/api/media/getProgress.php
+require_once __DIR__ . '/../../../config/config.php';
+require_once PROJECT_ROOT . '/src/controllers/MediaController.php';
+
+$ctl = new MediaController();
+$ctl->getProgress();
--- a/public/api/media/getViewedMap.php
+++ b/public/api/media/getViewedMap.php
@@ -0,0 +1,7 @@
+<?php
+// public/api/media/getViewedMap.php
+require_once __DIR__ . '/../../../config/config.php';
+require_once PROJECT_ROOT . '/src/controllers/MediaController.php';
+
+$ctl = new MediaController();
+$ctl->getViewedMap();
--- a/public/api/media/updateProgress.php
+++ b/public/api/media/updateProgress.php
@@ -0,0 +1,7 @@
+<?php
+// public/api/media/updateProgress.php
+require_once __DIR__ . '/../../../config/config.php';
+require_once PROJECT_ROOT . '/src/controllers/MediaController.php';
+
+$ctl = new MediaController();
+$ctl->updateProgress();
--- a/public/assets/icons/apple-touch-icon.png
+++ b/public/assets/icons/apple-touch-icon.png
--- a/public/assets/icons/base-1024.png
+++ b/public/assets/icons/base-1024.png
--- a/public/assets/icons/icon-192.png
+++ b/public/assets/icons/icon-192.png
--- a/public/assets/icons/icon-512.png
+++ b/public/assets/icons/icon-512.png
--- a/public/assets/icons/maskable-512.png
+++ b/public/assets/icons/maskable-512.png
--- a/public/css/styles.css
+++ b/public/css/styles.css
@@ -1900,4 +1900,29 @@ body {
  background: #fafafa;
    border-color: #e2e2e2;
  }
-  
+  /* media modal polish */
+.media-modal { background: var(--panel-bg, #121212); }
+.media-header-bar .btn { padding: 6px 10px; }
+.gallery-nav-btn { color: #fff; opacity: 0.85; }
+.gallery-nav-btn:hover { opacity: 1; transform: scale(1.05); }
+
+/* badges */
+.status-badge {
+  display: inline-block;
+  margin-left: 6px;
+  padding: 2px 6px;
+  font-size: 11px;
+  line-height: 1.3;
+  border-radius: 999px;
+  border: 1px solid rgba(255,255,255,.15);
+  background: rgba(255,255,255,.08);
+  color: #fff;
+}
+.status-badge.watched {
+  border-color: rgba(34,197,94,.35);      /* green-ish */
+  background: rgba(34,197,94,.15);
+}
+.status-badge.progress {
+  border-color: rgba(250,204,21,.35);     /* amber-ish */
+  background: rgba(250,204,21,.15);
+}
--- a/public/index.html
+++ b/public/index.html
@@ -10,7 +10,8 @@
  <link rel="icon" type="image/png" href="/assets/logo.png"><link rel="icon" type="image/svg+xml" href="/assets/logo.svg">
  <meta name="description" content="FileRise is a fast, self-hosted file manager with granular per-folder ACLs, drag-and-drop folder moves, WebDAV, tagging, and a clean UI.">
  <meta name="csrf-token" content=""><meta name="share-url" content=""><meta name="theme-color" content="#0b5ed7"><meta name="color-scheme" content="light dark">
-
+  <link rel="manifest" href="/manifest.webmanifest?v={{APP_QVER}}">
+  <link rel="apple-touch-icon" href="/assets/icons/icon-192.png?v={{APP_QVER}}">
  
 <!-- Critical CSS -->
  <link rel="stylesheet" href="/vendor/bootstrap/4.5.2/bootstrap.min.css?v={{APP_QVER}}">
@@ -27,8 +28,8 @@
  
  <!-- App entry -->
  <link rel="modulepreload" href="/js/main.js?v={{APP_QVER}}"><script type="module" src="/js/main.js?v={{APP_QVER}}"></script>
-  </head>
-
+  
+</head>
 <body>
  <div id="appRoot" style="visibility:hidden">
  <header class="header-container">
@@ -73,7 +74,7 @@
                <!-- Trash items will be loaded here -->
              </div>
              <div style="text-align: right;">
-                <button id="restoreSelectedBtn" class="btn btn-primary" data-i18n-key="restore_selected"  style="display: none;">Restore
+                <button id="restoreSelectedBtn" class="btn btn-primary" data-i18n-key="restore_selected">Restore
                  Selected</button>
                <button id="restoreAllBtn" class="btn btn-secondary" data-i18n-key="restore_all">Restore All</button>
                <button id="deleteTrashSelectedBtn" class="btn btn-warning" data-i18n-key="delete_selected_trash">Delete
@@ -485,5 +486,4 @@
  </div>
 </div>
 </body>
-
 </html>
--- a/public/js/fileListView.js
+++ b/public/js/fileListView.js
@@ -157,7 +157,121 @@ function wireSelectAll(fileListContent) {
    }
    return body ?? {};
  }
-  
+  // ---- Viewed badges (table + gallery) ----
+// ---------- Badge factory (center text vertically) ----------
+function makeBadge(state) {
+  if (!state) return null;
+  const el = document.createElement('span');
+  el.className = 'status-badge';
+  el.style.cssText = [
+    'display:inline-flex',
+    'align-items:center',
+    'justify-content:center',
+    'vertical-align:middle',
+    'margin-left:6px',
+    'padding:2px 8px',
+    'min-height:18px',
+    'line-height:1',
+    'border-radius:999px',
+    'font-size:.78em',
+    'border:1px solid rgba(0,0,0,.2)',
+    'background:rgba(0,0,0,.06)'
+  ].join(';');
+
+  if (state.completed) {
+    el.classList.add('watched');
+    el.textContent = (t('watched') || t('viewed') || 'Watched');
+    el.style.borderColor = 'rgba(34,197,94,.45)';
+    el.style.background  = 'rgba(34,197,94,.12)';
+    el.style.color       = '#22c55e';
+    return el;
+  }
+
+  if (Number.isFinite(state.seconds) && Number.isFinite(state.duration) && state.duration > 0) {
+    const pct = Math.max(1, Math.min(99, Math.round((state.seconds / state.duration) * 100)));
+    el.classList.add('progress');
+    el.textContent = `${pct}%`;
+    el.style.borderColor = 'rgba(245,158,11,.45)';
+    el.style.background  = 'rgba(245,158,11,.12)';
+    el.style.color       = '#f59e0b';
+    return el;
+  }
+
+  return null;
+}
+
+// ---------- Public: set/clear badges for one file (table + gallery) ----------
+function applyBadgeToDom(name, state) {
+  const safe = CSS.escape(name);
+
+  // Table
+  document.querySelectorAll(`tr[data-file-name="${safe}"] .name-cell, tr[data-file-name="${safe}"] .file-name-cell`)
+    .forEach(cell => {
+      cell.querySelector('.status-badge')?.remove();
+      const b = makeBadge(state);
+      if (b) cell.appendChild(b);
+    });
+
+  // Gallery
+  document.querySelectorAll(`.gallery-card[data-file-name="${safe}"] .gallery-file-name`)
+    .forEach(title => {
+      title.querySelector('.status-badge')?.remove();
+      const b = makeBadge(state);
+      if (b) title.appendChild(b);
+    });
+}
+
+export function setFileWatchedBadge(name, watched = true) {
+  applyBadgeToDom(name, watched ? { completed: true } : null);
+}
+
+export function setFileProgressBadge(name, seconds, duration) {
+  if (duration > 0 && seconds >= 0) {
+    applyBadgeToDom(name, { seconds, duration, completed: seconds >= duration - 1 });
+  } else {
+    applyBadgeToDom(name, null);
+  }
+}
+
+export async function refreshViewedBadges(folder) {
+  let map = null;
+  try {
+    const res = await fetch(`/api/media/getViewedMap.php?folder=${encodeURIComponent(folder)}&t=${Date.now()}`, { credentials: 'include' });
+    const j = await res.json();
+    map = j?.map || null;
+  } catch { /* ignore */ }
+
+  // Clear any existing badges
+  document.querySelectorAll(
+    '#fileList tr[data-file-name] .file-name-cell .status-badge, ' +
+    '#fileList tr[data-file-name] .name-cell .status-badge, ' +
+    '.gallery-card[data-file-name] .gallery-file-name .status-badge'
+  ).forEach(n => n.remove());
+
+  if (!map) return;
+
+  // Table rows
+  document.querySelectorAll('#fileList tr[data-file-name]').forEach(tr => {
+    const name = tr.getAttribute('data-file-name');
+    const state = map[name];
+    if (!state) return;
+    const cell = tr.querySelector('.name-cell, .file-name-cell');
+    if (!cell) return;
+    const badge = makeBadge(state);
+    if (badge) cell.appendChild(badge);
+  });
+
+  // Gallery cards
+  document.querySelectorAll('.gallery-card[data-file-name]').forEach(card => {
+    const name = card.getAttribute('data-file-name');
+    const state = map[name];
+    if (!state) return;
+    const title = card.querySelector('.gallery-file-name');
+    if (!title) return;
+    const badge = makeBadge(state);
+    if (badge) title.appendChild(badge);
+  });
+}
  /**
   * Convert a file size string (e.g. "456.9KB", "1.2 MB", "1024") into bytes.
   */
@@ -548,6 +662,7 @@ function searchFiles(searchTerm) {
      }
      updateFileActionButtons();
      fileListContainer.style.visibility = "visible";
+
  
      // ----- FOLDERS NEXT (populate strip when ready; doesn't block rows) -----
      try {
@@ -712,9 +827,14 @@ function searchFiles(searchTerm) {
    if (totalFiles > 0) {
      filteredFiles.slice(startIndex, endIndex).forEach((file, idx) => {
        // Build row with a neutral base, then correct the links/preview below.
-        let rowHTML = buildFileTableRow(file, fakeBase);
        // Give the row an ID so we can patch attributes safely
-        rowHTML = rowHTML.replace("<tr", `<tr id="file-row-${encodeURIComponent(file.name)}-${startIndex + idx}"`);
+        const idSafe = encodeURIComponent(file.name) + "-" + (startIndex + idx);
+        let rowHTML = buildFileTableRow(file, fakeBase);
+        
+        // add row id + data-file-name, and ensure the name cell also has "name-cell"
+        rowHTML = rowHTML
+  .replace("<tr", `<tr id="file-row-${idSafe}" data-file-name="${escapeHTML(file.name)}"`)
+  .replace('class="file-name-cell"', 'class="file-name-cell name-cell"');
  
        let tagBadgesHTML = "";
        if (file.tags && file.tags.length > 0) {
@@ -724,9 +844,13 @@ function searchFiles(searchTerm) {
          });
          tagBadgesHTML += "</div>";
        }
-        rowsHTML += rowHTML.replace(/(<td class="file-name-cell">)(.*?)(<\/td>)/, (match, p1, p2, p3) => {
-          return p1 + p2 + tagBadgesHTML + p3;
-        });
+        rowsHTML += rowHTML.replace(
+          /(<td\s+class="[^"]*\bfile-name-cell\b[^"]*">)([\s\S]*?)(<\/td>)/,
+          (m, open, inner, close) => {
+            // keep the original filename content, then add your tag badges, then close
+            return `${open}<span class="filename-text">${inner}</span>${tagBadgesHTML}${close}`;
+          }
+        );
      });
    } else {
      rowsHTML += `<tr><td colspan="8">No files found.</td></tr>`;
@@ -904,6 +1028,7 @@ function searchFiles(searchTerm) {
      });
    });
    updateFileActionButtons();
+    
    document.querySelectorAll("#fileList tbody tr").forEach(row => {
      row.setAttribute("draggable", "true");
      import('./fileDragDrop.js?v={{APP_QVER}}').then(module => {
@@ -914,6 +1039,7 @@ function searchFiles(searchTerm) {
      btn.addEventListener("click", e => e.stopPropagation());
    });
    bindFileListContextMenu();
+    refreshViewedBadges(folder).catch(() => {});
  }
  
  // A helper to compute the max image height based on the current column count.
@@ -1040,6 +1166,7 @@ function searchFiles(searchTerm) {
      // card with checkbox, preview, info, buttons
      galleryHTML += `
        <div class="gallery-card"
+             data-file-name="${escapeHTML(file.name)}"
             style="position:relative; border:1px solid #ccc; padding:5px; text-align:center;">
          <input type="checkbox"
                 class="file-checkbox"
@@ -1236,7 +1363,7 @@ function searchFiles(searchTerm) {
      if (window.viewMode === "gallery") renderGalleryView(folder);
      else renderFileTable(folder);
    };
-  
+    refreshViewedBadges(folder).catch(() => {});
    updateFileActionButtons();
    createViewToggleButton();
  }
--- a/public/js/filePreview.js
+++ b/public/js/filePreview.js
@@ -1,7 +1,7 @@
 // filePreview.js
 import { escapeHTML, showToast } from './domUtils.js?v={{APP_QVER}}';
-import { fileData } from './fileListView.js?v={{APP_QVER}}';
 import { t } from './i18n.js?v={{APP_QVER}}';
+import { fileData, setFileProgressBadge, setFileWatchedBadge } from './fileListView.js?v={{APP_QVER}}';

 // Build a preview URL that always goes through the API layer (respects ACLs/UPLOAD_DIR)
 export function buildPreviewUrl(folder, name) {
@@ -9,12 +9,11 @@ export function buildPreviewUrl(folder, name) {
  return `/api/file/download.php?folder=${encodeURIComponent(f)}&file=${encodeURIComponent(name)}&inline=1&t=${Date.now()}`;
 }

+/* -------------------------------- Share modal (existing) -------------------------------- */
 export function openShareModal(file, folder) {
-  // Remove any existing modal
  const existing = document.getElementById("shareModal");
  if (existing) existing.remove();

-  // Build the modal
  const modal = document.createElement("div");
  modal.id = "shareModal";
  modal.classList.add("modal");
@@ -51,18 +50,9 @@ export function openShareModal(file, folder) {
        </div>

        <p style="margin-top:15px;">${t("password_optional")}</p>
-        <input
-          type="text"
-          id="sharePassword"
-          placeholder="${t("password_optional")}"
-          style="width:100%;padding:5px;"
-        />
+        <input type="text" id="sharePassword" placeholder="${t("password_optional")}" style="width:100%;padding:5px;"/>

-        <button
-          id="generateShareLinkBtn"
-          class="btn btn-primary"
-          style="margin-top:15px;"
-        >
+        <button id="generateShareLinkBtn" class="btn btn-primary" style="margin-top:15px;">
          ${t("generate_share_link")}
        </button>

@@ -79,392 +69,524 @@ export function openShareModal(file, folder) {
  document.body.appendChild(modal);
  modal.style.display = "block";

-  // Close handler
-  document.getElementById("closeShareModal")
-    .addEventListener("click", () => modal.remove());
+  document.getElementById("closeShareModal").addEventListener("click", () => modal.remove());
+  document.getElementById("shareExpiration").addEventListener("change", e => {
+    const container = document.getElementById("customExpirationContainer");
+    container.style.display = e.target.value === "custom" ? "block" : "none";
+  });

-  // Show/hide custom-duration inputs
-  document.getElementById("shareExpiration")
-    .addEventListener("change", e => {
-      const container = document.getElementById("customExpirationContainer");
-      container.style.display = e.target.value === "custom" ? "block" : "none";
-    });
+  document.getElementById("generateShareLinkBtn").addEventListener("click", () => {
+    const sel = document.getElementById("shareExpiration");
+    let value, unit;

-  // Generate share link
-  document.getElementById("generateShareLinkBtn")
-    .addEventListener("click", () => {
-      const sel = document.getElementById("shareExpiration");
-      let value, unit;
-
-      if (sel.value === "custom") {
-        value = parseInt(document.getElementById("customExpirationValue").value, 10);
-        unit = document.getElementById("customExpirationUnit").value;
-      } else {
-        value = parseInt(sel.value, 10);
-        unit = "minutes";
-      }
-
-      const password = document.getElementById("sharePassword").value;
-
-      fetch("/api/file/createShareLink.php", {
-        method: "POST",
-        credentials: "include",
-        headers: {
-          "Content-Type": "application/json",
-          "X-CSRF-Token": window.csrfToken
-        },
-        body: JSON.stringify({
-          folder,
-          file: file.name,
-          expirationValue: value,
-          expirationUnit: unit,
-          password
-        })
-      })
-        .then(res => res.json())
-        .then(data => {
-          if (data.token) {
-            const url = `${window.location.origin}/api/file/share.php?token=${encodeURIComponent(data.token)}`;
-            document.getElementById("shareLinkInput").value = url;
-            document.getElementById("shareLinkDisplay").style.display = "block";
-          } else {
-            showToast(t("error_generating_share") + ": " + (data.error || "Unknown"));
-          }
-        })
-        .catch(err => {
-          console.error(err);
-          showToast(t("error_generating_share"));
-        });
-    });
-
-  // Copy to clipboard
-  document.getElementById("copyShareLinkBtn")
-    .addEventListener("click", () => {
-      const input = document.getElementById("shareLinkInput");
-      input.select();
-      document.execCommand("copy");
-      showToast(t("link_copied"));
-    });
-}
-
-export function previewFile(fileUrl, fileName) {
-  let modal = document.getElementById("filePreviewModal");
-  if (!modal) {
-    modal = document.createElement("div");
-    modal.id = "filePreviewModal";
-    Object.assign(modal.style, {
-      position: "fixed",
-      top: "0",
-      left: "0",
-      width: "100vw",
-      height: "100vh",
-      backgroundColor: "rgba(0,0,0,0.7)",
-      display: "flex",
-      justifyContent: "center",
-      alignItems: "center",
-      zIndex: "1000"
-    });
-    modal.innerHTML = `
-      <div class="modal-content image-preview-modal-content" style="position: relative; max-width: 90vw; max-height: 90vh;">
-        <span id="closeFileModal" class="close-image-modal" style="position: absolute; top: 10px; right: 10px; font-size: 24px; cursor: pointer;">&times;</span>
-        <h4 class="image-modal-header"></h4>
-        <div class="file-preview-container" style="position: relative; text-align: center;"></div>
-      </div>`;
-    document.body.appendChild(modal);
-
-    function closeModal() {
-      const mediaElements = modal.querySelectorAll("video, audio");
-      mediaElements.forEach(media => {
-        media.pause();
-        if (media.tagName.toLowerCase() !== 'video') {
-          try { media.currentTime = 0; } catch (e) { }
-        }
-      });
-      modal.remove();
+    if (sel.value === "custom") {
+      value = parseInt(document.getElementById("customExpirationValue").value, 10);
+      unit = document.getElementById("customExpirationUnit").value;
+    } else {
+      value = parseInt(sel.value, 10);
+      unit = "minutes";
    }

-    document.getElementById("closeFileModal").addEventListener("click", closeModal);
-    modal.addEventListener("click", function (e) {
-      if (e.target === modal) {
-        closeModal();
-      }
-    });
-  }
-  modal.querySelector("h4").textContent = fileName;
-  const container = modal.querySelector(".file-preview-container");
-  container.innerHTML = "";
+    const password = document.getElementById("sharePassword").value;

-  const extension = fileName.split('.').pop().toLowerCase();
-  const isImage = /\.(jpg|jpeg|png|gif|bmp|webp|svg|ico)$/i.test(fileName);
+    fetch("/api/file/createShareLink.php", {
+      method: "POST",
+      credentials: "include",
+      headers: { "Content-Type": "application/json", "X-CSRF-Token": window.csrfToken },
+      body: JSON.stringify({ folder, file: file.name, expirationValue: value, expirationUnit: unit, password })
+    })
+      .then(res => res.json())
+      .then(data => {
+        if (data.token) {
+          const url = `${window.location.origin}/api/file/share.php?token=${encodeURIComponent(data.token)}`;
+          document.getElementById("shareLinkInput").value = url;
+          document.getElementById("shareLinkDisplay").style.display = "block";
+        } else {
+          showToast(t("error_generating_share") + ": " + (data.error || "Unknown"));
+        }
+      })
+      .catch(err => {
+        console.error(err);
+        showToast(t("error_generating_share"));
+      });
+  });
+
+  document.getElementById("copyShareLinkBtn").addEventListener("click", () => {
+    const input = document.getElementById("shareLinkInput");
+    input.select();
+    document.execCommand("copy");
+    showToast(t("link_copied"));
+  });
+}
+
+/* -------------------------------- Media modal viewer -------------------------------- */
+const IMG_RE = /\.(jpg|jpeg|png|gif|bmp|webp|svg|ico)$/i;
+const VID_RE = /\.(mp4|mkv|webm|mov|ogv)$/i;
+const AUD_RE = /\.(mp3|wav|m4a|ogg|flac|aac|wma|opus)$/i;
+
+function ensureMediaModal() {
+  let overlay = document.getElementById("filePreviewModal");
+  if (overlay) return overlay;
+
+  overlay = document.createElement("div");
+  overlay.id = "filePreviewModal";
+  Object.assign(overlay.style, {
+    position: "fixed",
+    inset: "0",
+    width: "100vw",
+    height: "100vh",
+    backgroundColor: "rgba(0,0,0,0.7)",
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center",
+    zIndex: "1000"
+  });
+
+  const root   = document.documentElement;
+  const styles = getComputedStyle(root);
+  const isDark = root.classList.contains('dark-mode');
+  const panelBg = styles.getPropertyValue('--panel-bg').trim() || styles.getPropertyValue('--bg-color').trim() || (isDark ? '#121212' : '#ffffff');
+  const textCol = styles.getPropertyValue('--text-color').trim() || (isDark ? '#eaeaea' : '#111111');
+
+  const navBg     = isDark ? 'rgba(255,255,255,.28)' : 'rgba(0,0,0,.45)';
+  const navFg     = '#fff';
+  const navBorder = isDark ? 'rgba(255,255,255,.35)' : 'rgba(0,0,0,.25)';
+
+  overlay.innerHTML = `
+    <div class="modal-content media-modal" style="
+      position: relative;
+      max-width: 92vw;
+      max-height: 92vh;
+      width: 92vw;
+      box-sizing: border-box;
+      padding: 12px;
+      background: ${panelBg};
+      color: ${textCol};
+      overflow: hidden;
+      border-radius: 10px;
+    ">
+      <div class="media-stage" style="position:relative; display:flex; align-items:center; justify-content:center; height: calc(92vh - 8px);">
+        <!-- filename badge (top-left) -->
+        <div class="media-title-badge" style="
+          position:absolute; top:8px; left:12px; max-width:60vw;
+          padding:4px 10px; border-radius:10px;
+          background: ${isDark ? 'rgba(0,0,0,.55)' : 'rgba(255,255,255,.65)'};
+          color: ${isDark ? '#fff' : '#111'};
+          font-weight:600; font-size:13px; line-height:1.3; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; z-index:1002;">
+        </div>
+
+        <!-- top-right actions row (aligned with your X at top:10px) -->
+        <div class="media-actions-bar" style="
+          position:absolute; top:10px; right:56px; display:flex; gap:6px; align-items:center; z-index:1002;">
+          <span class="status-chip" style="
+            display:none; padding:4px 8px; border-radius:999px; font-size:12px; line-height:1;
+            border:1px solid rgba(250,204,21,.45); background:rgba(250,204,21,.15); color:#facc15;"></span>
+          <div class="action-group" style="display:flex; gap:6px;"></div>
+        </div>
+
+        <!-- your absolute close X -->
+        <span id="closeFileModal" class="close-image-modal" title="${t('close')}">&times;</span>
+
+        <!-- centered media -->
+        <div class="file-preview-container" style="position:relative; text-align:center; flex:1; min-width:0;"></div>
+
+        <!-- high-contrast prev/next -->
+        <button class="nav-left"  aria-label="${t('previous')||'Previous'}" style="
+          position:absolute; left:8px; top:50%; transform:translateY(-50%);
+          height:56px; min-width:44px; padding:0 12px; font-size:42px; line-height:1;
+          background:${navBg}; color:${navFg}; border:1px solid ${navBorder};
+          text-shadow: 0 1px 2px rgba(0,0,0,.6);
+          border-radius:12px; cursor:pointer; display:none; z-index:1001; backdrop-filter: blur(2px);
+          box-shadow: 0 2px 8px rgba(0,0,0,.35);">‹</button>
+        <button class="nav-right" aria-label="${t('next')||'Next'}" style="
+          position:absolute; right:8px; top:50%; transform:translateY(-50%);
+          height:56px; min-width:44px; padding:0 12px; font-size:42px; line-height:1;
+          background:${navBg}; color:${navFg}; border:1px solid ${navBorder};
+          text-shadow: 0 1px 2px rgba(0,0,0,.6);
+          border-radius:12px; cursor:pointer; display:none; z-index:1001; backdrop-filter: blur(2px);
+          box-shadow: 0 2px 8px rgba(0,0,0,.35);">›</button>
+      </div>
+    </div>`;
+
+  document.body.appendChild(overlay);
+
+  function closeModal() {
+    try { overlay.querySelectorAll("video,audio").forEach(m => { try{m.pause()}catch(_){}}); } catch {}
+    if (overlay._onKey) window.removeEventListener('keydown', overlay._onKey);
+    overlay.remove();
+  }
+  overlay.querySelector("#closeFileModal").addEventListener("click", closeModal);
+  overlay.addEventListener("click", (e) => { if (e.target === overlay) closeModal(); });
+
+  return overlay;
+}
+
+function setTitle(overlay, name) {
+  const el = overlay.querySelector('.media-title-badge');
+  if (el) el.textContent = name || '';
+}
+
+function makeMI(name, title) {
+  const b = document.createElement('button');
+  b.className = `material-icons ${name}`;
+  b.textContent = name; // Material Icons font
+  b.title = title;
+  Object.assign(b.style, {
+    width: "32px",
+    height: "32px",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    background: "rgba(0,0,0,.25)",
+    border: "1px solid rgba(255,255,255,.25)",
+    cursor: "pointer",
+    userSelect: "none",
+    fontSize: "20px",
+    padding: "0",
+    borderRadius: "8px",
+    color: "#fff",
+    lineHeight: "1"
+  });
+  return b;
+}
+
+function setNavVisibility(overlay, showPrev, showNext) {
+  const prev = overlay.querySelector('.nav-left');
+  const next = overlay.querySelector('.nav-right');
+  prev.style.display = showPrev ? 'inline-flex' : 'none';
+  next.style.display = showNext ? 'inline-flex' : 'none';
+}
+
+function setRowWatchedBadge(name, watched) {
+  try {
+    const cell = document.querySelector(`tr[data-file-name="${CSS.escape(name)}"] .name-cell`);
+    if (!cell) return;
+    const old = cell.querySelector('.status-badge.watched');
+    if (watched) {
+      if (!old) {
+        const b = document.createElement('span');
+        b.className = 'status-badge watched';
+        b.textContent = t("watched") || t("viewed") || "Watched";
+        b.style.marginLeft = "6px";
+        cell.appendChild(b);
+      }
+    } else if (old) {
+      old.remove();
+    }
+  } catch {}
+}
+
+/* -------------------------------- Entry -------------------------------- */
+export function previewFile(fileUrl, fileName) {
+  const overlay    = ensureMediaModal();
+  const container  = overlay.querySelector(".file-preview-container");
+  const actionWrap = overlay.querySelector(".media-actions-bar .action-group");
+  const statusChip = overlay.querySelector(".media-actions-bar .status-chip");
+
+  // replace nav buttons to clear old listeners
+  let prevBtn = overlay.querySelector('.nav-left');
+  let nextBtn = overlay.querySelector('.nav-right');
+  const newPrev = prevBtn.cloneNode(true);
+  const newNext = nextBtn.cloneNode(true);
+  prevBtn.replaceWith(newPrev);
+  nextBtn.replaceWith(newNext);
+  prevBtn = newPrev; nextBtn = newNext;
+
+  // reset
+  container.innerHTML = "";
+  actionWrap.innerHTML = "";
+  if (statusChip) statusChip.style.display = 'none';
+  if (overlay._onKey) window.removeEventListener('keydown', overlay._onKey);
+  overlay._onKey = null;
+
+  const folder = window.currentFolder || 'root';
+  const name   = fileName;
+  const lower  = (name || '').toLowerCase();
+  const isImage = IMG_RE.test(lower);
+  const isVideo = VID_RE.test(lower);
+  const isAudio = AUD_RE.test(lower);
+
+  setTitle(overlay, name);
+
+  /* -------------------- IMAGES -------------------- */
  if (isImage) {
-    // Create the image element with default transform data.
    const img = document.createElement("img");
    img.src = fileUrl;
    img.className = "image-modal-img";
-    img.style.maxWidth = "80vw";
-    img.style.maxHeight = "80vh";
+    img.style.maxWidth  = "88vw";
+    img.style.maxHeight = "88vh";
    img.style.transition = "transform 0.3s ease";
    img.dataset.scale = 1;
    img.dataset.rotate = 0;
-    img.style.position = 'relative';
-    img.style.zIndex = '1';
+    container.appendChild(img);

-    // Filter gallery images for navigation.
-    const images = fileData.filter(file => /\.(jpg|jpeg|png|gif|bmp|webp|svg|ico)$/i.test(file.name));
+    const zoomInBtn   = makeMI('zoom_in',      t('zoom_in')       || 'Zoom In');
+    const zoomOutBtn  = makeMI('zoom_out',     t('zoom_out')      || 'Zoom Out');
+    const rotateLeft  = makeMI('rotate_left',  t('rotate_left')   || 'Rotate Left');
+    const rotateRight = makeMI('rotate_right', t('rotate_right')  || 'Rotate Right');
+    actionWrap.appendChild(zoomInBtn);
+    actionWrap.appendChild(zoomOutBtn);
+    actionWrap.appendChild(rotateLeft);
+    actionWrap.appendChild(rotateRight);

-    // Create a flex wrapper to hold left panel, center image, and right panel.
-    const wrapper = document.createElement('div');
-    wrapper.className = 'image-wrapper';
-    wrapper.style.display = 'flex';
-    wrapper.style.alignItems = 'center';
-    wrapper.style.justifyContent = 'center';
-    wrapper.style.position = 'relative';
+    zoomInBtn.addEventListener('click', (e) => {
+      e.stopPropagation();
+      let s = parseFloat(img.dataset.scale) || 1; s += 0.1;
+      img.dataset.scale = s;
+      img.style.transform = `scale(${s}) rotate(${img.dataset.rotate}deg)`;
+    });
+    zoomOutBtn.addEventListener('click', (e) => {
+      e.stopPropagation();
+      let s = parseFloat(img.dataset.scale) || 1; s = Math.max(0.1, s - 0.1);
+      img.dataset.scale = s;
+      img.style.transform = `scale(${s}) rotate(${img.dataset.rotate}deg)`;
+    });
+    rotateLeft.addEventListener('click', (e) => {
+      e.stopPropagation();
+      let r = parseFloat(img.dataset.rotate) || 0; r = (r - 90 + 360) % 360;
+      img.dataset.rotate = r;
+      img.style.transform = `scale(${img.dataset.scale}) rotate(${r}deg)`;
+    });
+    rotateRight.addEventListener('click', (e) => {
+      e.stopPropagation();
+      let r = parseFloat(img.dataset.rotate) || 0; r = (r + 90) % 360;
+      img.dataset.rotate = r;
+      img.style.transform = `scale(${img.dataset.scale}) rotate(${r}deg)`;
+    });

-    // --- Left Panel: Contains Zoom controls (top) and Prev button (bottom) ---
-    const leftPanel = document.createElement('div');
-    leftPanel.className = 'left-panel';
-    leftPanel.style.display = 'flex';
-    leftPanel.style.flexDirection = 'column';
-    leftPanel.style.justifyContent = 'space-between';
-    leftPanel.style.alignItems = 'center';
-    leftPanel.style.width = '60px';
-    leftPanel.style.height = '100%';
-    leftPanel.style.zIndex = '10';
+    const images = (Array.isArray(fileData) ? fileData : []).filter(f => IMG_RE.test(f.name));
+    overlay.mediaType  = 'image';
+    overlay.mediaList  = images;
+    overlay.mediaIndex = Math.max(0, images.findIndex(f => f.name === name));
+    setNavVisibility(overlay, images.length > 1, images.length > 1);

-    // Top container for zoom buttons.
-    const leftTop = document.createElement('div');
-    leftTop.style.display = 'flex';
-    leftTop.style.flexDirection = 'column';
-    leftTop.style.gap = '4px';
-    // Zoom In button.
-    const zoomInBtn = document.createElement('button');
-    zoomInBtn.className = 'material-icons zoom_in';
-    zoomInBtn.title = 'Zoom In';
-    zoomInBtn.style.background = 'transparent';
-    zoomInBtn.style.border = 'none';
-    zoomInBtn.style.cursor = 'pointer';
-    zoomInBtn.textContent = 'zoom_in';
-    // Zoom Out button.
-    const zoomOutBtn = document.createElement('button');
-    zoomOutBtn.className = 'material-icons zoom_out';
-    zoomOutBtn.title = 'Zoom Out';
-    zoomOutBtn.style.background = 'transparent';
-    zoomOutBtn.style.border = 'none';
-    zoomOutBtn.style.cursor = 'pointer';
-    zoomOutBtn.textContent = 'zoom_out';
-    leftTop.appendChild(zoomInBtn);
-    leftTop.appendChild(zoomOutBtn);
-    leftPanel.appendChild(leftTop);
+    const navigate = (dir) => {
+      if (!overlay.mediaList || overlay.mediaList.length < 2) return;
+      overlay.mediaIndex = (overlay.mediaIndex + dir + overlay.mediaList.length) % overlay.mediaList.length;
+      const newFile = overlay.mediaList[overlay.mediaIndex].name;
+      setTitle(overlay, newFile);
+      img.dataset.scale = 1;
+      img.dataset.rotate = 0;
+      img.style.transform = 'scale(1) rotate(0deg)';
+      img.src = buildPreviewUrl(folder, newFile);
+    };

-    // Bottom container for prev button.
-    const leftBottom = document.createElement('div');
-    leftBottom.style.display = 'flex';
-    leftBottom.style.justifyContent = 'center';
-    leftBottom.style.alignItems = 'center';
-    leftBottom.style.width = '100%';
    if (images.length > 1) {
-      const prevBtn = document.createElement("button");
-      prevBtn.textContent = "‹";
-      prevBtn.className = "gallery-nav-btn";
-      prevBtn.style.background = 'transparent';
-      prevBtn.style.border = 'none';
-      prevBtn.style.color = 'white';
-      prevBtn.style.fontSize = '48px';
-      prevBtn.style.cursor = 'pointer';
-      prevBtn.addEventListener("click", function (e) {
-        e.stopPropagation();
-        // Safety check:
-        if (!modal.galleryImages || modal.galleryImages.length === 0) return;
-        modal.galleryCurrentIndex = (modal.galleryCurrentIndex - 1 + modal.galleryImages.length) % modal.galleryImages.length;
-        let newFile = modal.galleryImages[modal.galleryCurrentIndex];
-        modal.querySelector("h4").textContent = newFile.name;
-        img.src = buildPreviewUrl(window.currentFolder || 'root', newFile.name);
-        // Reset transforms.
-        img.dataset.scale = 1;
-        img.dataset.rotate = 0;
-        img.style.transform = 'scale(1) rotate(0deg)';
-      });
-      leftBottom.appendChild(prevBtn);
-    } else {
-      // Insert an empty placeholder for consistent layout.
-      leftBottom.innerHTML = '&nbsp;';
+      prevBtn.addEventListener('click', (e) => { e.stopPropagation(); navigate(-1); });
+      nextBtn.addEventListener('click', (e) => { e.stopPropagation(); navigate(+1); });
+      const onKey = (e) => {
+        if (!document.body.contains(overlay)) { window.removeEventListener("keydown", onKey); return; }
+        if (e.key === "ArrowLeft")  navigate(-1);
+        if (e.key === "ArrowRight") navigate(+1);
+      };
+      window.addEventListener("keydown", onKey);
+      overlay._onKey = onKey;
    }
-    leftPanel.appendChild(leftBottom);

-    // --- Center Panel: Contains the image ---
-    const centerPanel = document.createElement('div');
-    centerPanel.className = 'center-image-container';
-    centerPanel.style.flexGrow = '1';
-    centerPanel.style.textAlign = 'center';
-    centerPanel.style.position = 'relative';
-    centerPanel.style.zIndex = '1';
-    centerPanel.appendChild(img);
+    overlay.style.display = "flex";
+    return;
+  }

-    // --- Right Panel: Contains Rotate controls (top) and Next button (bottom) ---
-    const rightPanel = document.createElement('div');
-    rightPanel.className = 'right-panel';
-    rightPanel.style.display = 'flex';
-    rightPanel.style.flexDirection = 'column';
-    rightPanel.style.justifyContent = 'space-between';
-    rightPanel.style.alignItems = 'center';
-    rightPanel.style.width = '60px';
-    rightPanel.style.height = '100%';
-    rightPanel.style.zIndex = '10';
+  /* -------------------- PDF => new tab -------------------- */
+  if (lower.endsWith('.pdf')) {
+    const separator = fileUrl.includes('?') ? '&' : '?';
+    const urlWithTs = fileUrl + separator + 't=' + Date.now();
+    window.open(urlWithTs, "_blank");
+    overlay.remove();
+    return;
+  }

-    // Top container for rotate buttons.
-    const rightTop = document.createElement('div');
-    rightTop.style.display = 'flex';
-    rightTop.style.flexDirection = 'column';
-    rightTop.style.gap = '4px';
-    // Rotate Left button.
-    const rotateLeftBtn = document.createElement('button');
-    rotateLeftBtn.className = 'material-icons rotate_left';
-    rotateLeftBtn.title = 'Rotate Left';
-    rotateLeftBtn.style.background = 'transparent';
-    rotateLeftBtn.style.border = 'none';
-    rotateLeftBtn.style.cursor = 'pointer';
-    rotateLeftBtn.textContent = 'rotate_left';
-    // Rotate Right button.
-    const rotateRightBtn = document.createElement('button');
-    rotateRightBtn.className = 'material-icons rotate_right';
-    rotateRightBtn.title = 'Rotate Right';
-    rotateRightBtn.style.background = 'transparent';
-    rotateRightBtn.style.border = 'none';
-    rotateRightBtn.style.cursor = 'pointer';
-    rotateRightBtn.textContent = 'rotate_right';
-    rightTop.appendChild(rotateLeftBtn);
-    rightTop.appendChild(rotateRightBtn);
-    rightPanel.appendChild(rightTop);
+  /* -------------------- VIDEOS -------------------- */
+  if (isVideo) {
+    let video = document.createElement("video"); // let so we can rebind
+    video.controls = true;
+    video.style.maxWidth  = "88vw";
+    video.style.maxHeight = "88vh";
+    video.style.objectFit = "contain";
+    container.appendChild(video);

-    // Bottom container for next button.
-    const rightBottom = document.createElement('div');
-    rightBottom.style.display = 'flex';
-    rightBottom.style.justifyContent = 'center';
-    rightBottom.style.alignItems = 'center';
-    rightBottom.style.width = '100%';
-    if (images.length > 1) {
-      const nextBtn = document.createElement("button");
-      nextBtn.textContent = "›";
-      nextBtn.className = "gallery-nav-btn";
-      nextBtn.style.background = 'transparent';
-      nextBtn.style.border = 'none';
-      nextBtn.style.color = 'white';
-      nextBtn.style.fontSize = '48px';
-      nextBtn.style.cursor = 'pointer';
-      nextBtn.addEventListener("click", function (e) {
-        e.stopPropagation();
-        // Safety check:
-        if (!modal.galleryImages || modal.galleryImages.length === 0) return;
-        modal.galleryCurrentIndex = (modal.galleryCurrentIndex + 1) % modal.galleryImages.length;
-        let newFile = modal.galleryImages[modal.galleryCurrentIndex];
-        modal.querySelector("h4").textContent = newFile.name;
-        img.src = buildPreviewUrl(window.currentFolder || 'root', newFile.name);
-        // Reset transforms.
-        img.dataset.scale = 1;
-        img.dataset.rotate = 0;
-        img.style.transform = 'scale(1) rotate(0deg)';
-      });
-      rightBottom.appendChild(nextBtn);
-    } else {
-      // Insert a placeholder so that center remains properly aligned.
-      rightBottom.innerHTML = '&nbsp;';
+    const markBtn  = document.createElement('button');
+    const clearBtn = document.createElement('button');
+    markBtn.className  = 'btn btn-sm btn-success';
+    clearBtn.className = 'btn btn-sm btn-secondary';
+    markBtn.textContent  = t("mark_as_viewed") || "Mark as viewed";
+    clearBtn.textContent = t("clear_progress") || "Clear progress";
+    actionWrap.appendChild(markBtn);
+    actionWrap.appendChild(clearBtn);
+
+    const videos = (Array.isArray(fileData) ? fileData : []).filter(f => VID_RE.test(f.name));
+    overlay.mediaType  = 'video';
+    overlay.mediaList  = videos;
+    overlay.mediaIndex = Math.max(0, videos.findIndex(f => f.name === name));
+    setNavVisibility(overlay, videos.length > 1, videos.length > 1);
+
+    const setVideoSrc = (nm) => { video.src = buildPreviewUrl(folder, nm); setTitle(overlay, nm); };
+
+    const SAVE_INTERVAL_MS = 5000;
+    let lastSaveAt = 0;
+    let pending = false;
+
+    async function getProgress(nm) {
+      try {
+        const res = await fetch(`/api/media/getProgress.php?folder=${encodeURIComponent(folder)}&file=${encodeURIComponent(nm)}&t=${Date.now()}`, { credentials: "include" });
+        const data = await res.json();
+        return data && data.state ? data.state : null;
+      } catch { return null; }
    }
-    rightPanel.appendChild(rightBottom);
-
-    // Assemble panels into the wrapper.
-    wrapper.appendChild(leftPanel);
-    wrapper.appendChild(centerPanel);
-    wrapper.appendChild(rightPanel);
-    container.appendChild(wrapper);
-
-    // --- Set up zoom controls event listeners ---
-    zoomInBtn.addEventListener('click', function (e) {
-      e.stopPropagation();
-      let scale = parseFloat(img.dataset.scale) || 1;
-      scale += 0.1;
-      img.dataset.scale = scale;
-      img.style.transform = 'scale(' + scale + ') rotate(' + img.dataset.rotate + 'deg)';
-    });
-    zoomOutBtn.addEventListener('click', function (e) {
-      e.stopPropagation();
-      let scale = parseFloat(img.dataset.scale) || 1;
-      scale = Math.max(0.1, scale - 0.1);
-      img.dataset.scale = scale;
-      img.style.transform = 'scale(' + scale + ') rotate(' + img.dataset.rotate + 'deg)';
-    });
-
-    // Attach rotation control listeners (always present now).
-    rotateLeftBtn.addEventListener('click', function (e) {
-      e.stopPropagation();
-      let rotate = parseFloat(img.dataset.rotate) || 0;
-      rotate = (rotate - 90 + 360) % 360;
-      img.dataset.rotate = rotate;
-      img.style.transform = 'scale(' + img.dataset.scale + ') rotate(' + rotate + 'deg)';
-    });
-    rotateRightBtn.addEventListener('click', function (e) {
-      e.stopPropagation();
-      let rotate = parseFloat(img.dataset.rotate) || 0;
-      rotate = (rotate + 90) % 360;
-      img.dataset.rotate = rotate;
-      img.style.transform = 'scale(' + img.dataset.scale + ') rotate(' + rotate + 'deg)';
-    });
-
-    // Save gallery details if there is more than one image.
-    if (images.length > 1) {
-      modal.galleryImages = images;
-      modal.galleryCurrentIndex = images.findIndex(f => f.name === fileName);
+    async function sendProgress({nm, seconds, duration, completed, clear}) {
+      try {
+        pending = true;
+        const res = await fetch("/api/media/updateProgress.php", {
+          method: "POST",
+          credentials: "include",
+          headers: { "Content-Type": "application/json", "X-CSRF-Token": window.csrfToken },
+          body: JSON.stringify({ folder, file: nm, seconds, duration, completed, clear })
+        });
+        const data = await res.json();
+        pending = false;
+        return data;
+      } catch (e) { pending = false; console.error(e); return null; }
    }
-  } else {
-    // Handle non-image file previews.
-    if (extension === "pdf") {
-      // build a cache‐busted URL
-      const separator = fileUrl.includes('?') ? '&' : '?';
-      const urlWithTs = fileUrl + separator + 't=' + Date.now();
+    const lsKey = (nm) => `videoProgress-${folder}/${nm}`;

-      // open in a new tab (avoids CSP frame-ancestors)
-      window.open(urlWithTs, "_blank");
+    function renderStatus(state) {
+      if (!statusChip) return;
+      // Completed
+      if (state && state.completed) {
+        
+        statusChip.textContent = (t('viewed') || 'Viewed') + ' ✓';
+        statusChip.style.display = 'inline-block';
+        statusChip.style.borderColor = 'rgba(34,197,94,.45)';
+        statusChip.style.background  = 'rgba(34,197,94,.15)';
+        statusChip.style.color       = '#22c55e';
+        markBtn.style.display  = 'none';
+        clearBtn.style.display = '';
+        clearBtn.textContent   = t('reset_progress') || t('clear_progress') || 'Reset';
+        return;
+      }
+      // In progress
+      if (state && Number.isFinite(state.seconds) && Number.isFinite(state.duration) && state.duration > 0) {
+        const pct = Math.max(1, Math.min(99, Math.round((state.seconds / state.duration) * 100)));
+        statusChip.textContent = `${pct}%`;
+        statusChip.style.display = 'inline-block';
+        statusChip.style.borderColor = 'rgba(250,204,21,.45)';
+        statusChip.style.background  = 'rgba(250,204,21,.15)';
+        statusChip.style.color       = '#facc15';
+        markBtn.style.display  = '';
+        clearBtn.style.display = '';
+        clearBtn.textContent   = t('reset_progress') || t('clear_progress') || 'Reset';
+        return;
+      }
+      // No progress
+      statusChip.style.display = 'none';
+      markBtn.style.display  = '';
+      clearBtn.style.display = 'none';
+    }

-      // tear down the just-created modal
-      const modal = document.getElementById("filePreviewModal");
-      if (modal) modal.remove();
+    function bindVideoEvents(nm) {
+      const nv = video.cloneNode(true);
+      video.replaceWith(nv);
+      video = nv;

-      // stop further preview logic
-      return;
-    } else if (/\.(mp4|mkv|webm|mov|ogv)$/i.test(fileName)) {
-      const video = document.createElement("video");
-      video.src = fileUrl;
-      video.controls = true;
-      video.className = "image-modal-img";
-
-      const progressKey = 'videoProgress-' + fileUrl;
-      video.addEventListener("loadedmetadata", () => {
-        const savedTime = localStorage.getItem(progressKey);
-        if (savedTime) {
-          video.currentTime = parseFloat(savedTime);
+      video.addEventListener("loadedmetadata", async () => {
+        try {
+          const state = await getProgress(nm);
+          if (state && Number.isFinite(state.seconds) && state.seconds > 0 && state.seconds < (video.duration || Infinity)) {
+            video.currentTime = state.seconds;
+            const seconds = Math.floor(video.currentTime || 0);
+const duration = Math.floor(video.duration || 0);
+setFileProgressBadge(nm, seconds, duration);
+            showToast((t("resumed_from") || "Resumed from") + " " + Math.floor(state.seconds) + "s");
+          } else {
+            const ls = localStorage.getItem(lsKey(nm));
+            if (ls) video.currentTime = parseFloat(ls);
+          }
+          renderStatus(state || null);
+        } catch {
+          renderStatus(null);
        }
      });
-      video.addEventListener("timeupdate", () => {
-        localStorage.setItem(progressKey, video.currentTime);
+
+      video.addEventListener("timeupdate", async () => {
+        const now = Date.now();
+        if ((now - lastSaveAt) < SAVE_INTERVAL_MS || pending) return;
+        lastSaveAt = now;
+        const seconds = Math.floor(video.currentTime || 0);
+        const duration = Math.floor(video.duration || 0);
+        sendProgress({ nm, seconds, duration });
+        setFileProgressBadge(nm, seconds, duration);
+        try { localStorage.setItem(lsKey(nm), String(seconds)); } catch {}
+        renderStatus({ seconds, duration, completed: false });
      });
-      video.addEventListener("ended", () => {
-        localStorage.removeItem(progressKey);
+
+      video.addEventListener("ended", async () => {
+        const duration = Math.floor(video.duration || 0);
+        await sendProgress({ nm, seconds: duration, duration, completed: true });
+        try { localStorage.removeItem(lsKey(nm)); } catch {}
+        showToast(t("marked_viewed") || "Marked as viewed");
+        setFileWatchedBadge(nm, true);
+        renderStatus({ seconds: duration, duration, completed: true });
      });
-      container.appendChild(video);
-    } else if (/\.(mp3|wav|m4a|ogg|flac|aac|wma|opus)$/i.test(fileName)) {
-      const audio = document.createElement("audio");
-      audio.src = fileUrl;
-      audio.controls = true;
-      audio.className = "audio-modal";
-      audio.style.maxWidth = "80vw";
-      container.appendChild(audio);
-    } else {
-      container.textContent = "Preview not available for this file type.";
+
+      markBtn.onclick = async () => {
+        const duration = Math.floor(video.duration || 0);
+        await sendProgress({ nm, seconds: duration, duration, completed: true });
+        showToast(t("marked_viewed") || "Marked as viewed");
+        setFileWatchedBadge(nm, true);
+        renderStatus({ seconds: duration, duration, completed: true });
+      };
+      clearBtn.onclick = async () => {
+        await sendProgress({ nm, seconds: 0, duration: null, completed: false, clear: true });
+        try { localStorage.removeItem(lsKey(nm)); } catch {}
+        showToast(t("progress_cleared") || "Progress cleared");
+        setFileWatchedBadge(nm, false);
+        renderStatus(null);
+      };
    }
+
+    const navigate = (dir) => {
+      if (!overlay.mediaList || overlay.mediaList.length < 2) return;
+      overlay.mediaIndex = (overlay.mediaIndex + dir + overlay.mediaList.length) % overlay.mediaList.length;
+      const nm = overlay.mediaList[overlay.mediaIndex].name;
+      setVideoSrc(nm);
+      bindVideoEvents(nm);
+    };
+
+    if (videos.length > 1) {
+      prevBtn.addEventListener('click', (e) => { e.stopPropagation(); navigate(-1); });
+      nextBtn.addEventListener('click', (e) => { e.stopPropagation(); navigate(+1); });
+      const onKey = (e) => {
+        if (!document.body.contains(overlay)) { window.removeEventListener("keydown", onKey); return; }
+        if (e.key === "ArrowLeft")  navigate(-1);
+        if (e.key === "ArrowRight") navigate(+1);
+      };
+      window.addEventListener("keydown", onKey);
+      overlay._onKey = onKey;
+    }
+
+    setVideoSrc(name);
+    renderStatus(null);
+    bindVideoEvents(name);
+    overlay.style.display = "flex";
+    return;
+  }
+
+  /* -------------------- AUDIO / OTHER -------------------- */
+  if (isAudio) {
+    const audio = document.createElement("audio");
+    audio.src = fileUrl;
+    audio.controls = true;
+    audio.className = "audio-modal";
+    audio.style.maxWidth = "88vw";
+    container.appendChild(audio);
+    overlay.style.display = "flex";
+  } else {
+    container.textContent = t("preview_not_available") || "Preview not available for this file type.";
+    overlay.style.display = "flex";
  }
-  modal.style.display = "flex";
 }

-// Preserve original functionality.
+/* -------------------------------- Small display helper -------------------------------- */
 export function displayFilePreview(file, container) {
  const actualFile = file.file || file;
  if (!(actualFile instanceof File)) {
@@ -472,10 +594,9 @@ export function displayFilePreview(file, container) {
    return;
  }
  container.style.display = "inline-block";
-  while (container.firstChild) {
-    container.removeChild(container.firstChild);
-  }
-  if (/\.(jpg|jpeg|png|gif|bmp|webp|svg|ico)$/i.test(actualFile.name)) {
+  while (container.firstChild) container.removeChild(container.firstChild);
+
+  if (IMG_RE.test(actualFile.name)) {
    const img = document.createElement("img");
    img.src = URL.createObjectURL(actualFile);
    img.classList.add("file-preview-img");
@@ -488,5 +609,6 @@ export function displayFilePreview(file, container) {
  }
 }

+// expose for HTML onclick usage
 window.previewFile = previewFile;
 window.openShareModal = openShareModal;
--- a/public/js/i18n.js
+++ b/public/js/i18n.js
@@ -302,7 +302,17 @@ const translations = {
    "acl_move_folder_info": "Moving folders is restricted to folder owners or managers. Destination folders must also allow moves in.",
    "context_move_folder": "Move Folder...",
    "context_move_here": "Move Here",
-    "context_move_cancel": "Cancel Move"
+    "context_move_cancel": "Cancel Move",
+    "mark_as_viewed": "Mark as viewed",
+    "viewed": "Viewed",
+    "resumed_from": "Resumed from",
+    "clear_progress": "Clear progress",
+    "marked_viewed": "Marked as viewed",
+    "progress_cleared": "Progress cleared",
+    "previous": "Previous",
+    "next": "Next",
+    "watched": "Watched",
+    "reset_progress": "Reset Progress"
  },
  es: {
    "please_log_in_to_continue": "Por favor, inicie sesión para continuar.",
--- a/public/js/main.js
+++ b/public/js/main.js
@@ -1057,4 +1057,52 @@ function bindDarkMode() {

    if (overlay) overlay.style.display = 'none';
  }, { once: true });
+})();
+
+
+// --- Mobile switcher + PWA SW (mobile-only) ---
+(() => {
+  // keep it simple + robust
+  const qs = new URLSearchParams(location.search);
+  const hasFrAppHint = qs.get('frapp') === '1';
+
+  const isStandalone =
+    (window.matchMedia && window.matchMedia('(display-mode: standalone)').matches) ||
+    (typeof navigator.standalone === 'boolean' && navigator.standalone);
+
+  const isCapUA = /\bCapacitor\b/i.test(navigator.userAgent);
+  const hasCapBridge = !!(window.Capacitor && window.Capacitor.Plugins);
+
+  // “mobile-ish”: native mobile UAs OR touch + reasonably narrow viewport (covers iPad-on-Mac UA)
+  const isMobileish =
+    /Android|iPhone|iPad|iPod|Mobile|Silk|IEMobile|Opera Mini/i.test(navigator.userAgent) ||
+    (navigator.maxTouchPoints > 1 && Math.min(screen.width, screen.height) <= 900);
+
+  // load the switcher only in the mobile app, or mobile standalone PWA, or when explicitly hinted
+  const shouldLoadSwitcher =
+    hasCapBridge || isCapUA || (isStandalone && isMobileish) || (hasFrAppHint && isMobileish);
+
+  // expose a flag to inspect later
+  window.FR_APP = !!(hasCapBridge || isCapUA || (isStandalone && isMobileish));
+
+  const QVER = (window.APP_QVER && String(window.APP_QVER)) || '{{APP_QVER}}';
+
+  if (shouldLoadSwitcher) {
+    import(`/js/mobile/switcher.js?v=${encodeURIComponent(QVER)}`)
+      .then(() => {
+        if (hasFrAppHint && !sessionStorage.getItem('frx_opened_once')) {
+          sessionStorage.setItem('frx_opened_once', '1');
+          window.dispatchEvent(new CustomEvent('frx:openSwitcher'));
+        }
+      })
+      .catch(err => console.info('[FileRise] switcher import failed:', err));
+  }
+
+  // SW only for web (https or localhost), never in Capacitor
+  const onHttps = location.protocol === 'https:' || location.hostname === 'localhost';
+  if ('serviceWorker' in navigator && onHttps && !hasCapBridge && !isCapUA) {
+    window.addEventListener('load', () => {
+      navigator.serviceWorker.register(`/js/pwa/sw.js?v=${encodeURIComponent(QVER)}`).catch(() => {});
+    });
+  }
 })();
--- a/public/js/mobile/switcher.js
+++ b/public/js/mobile/switcher.js
@@ -0,0 +1,287 @@
+(function(){
+    const isCap = !!window.Capacitor || /Capacitor/i.test(navigator.userAgent);
+    if (!isCap) return;
+    if ((location.origin || '').startsWith('capacitor://')) return;
+  
+    const Plugins = (window.Capacitor && window.Capacitor.Plugins) || {};
+    const Pref = Plugins.Preferences ? {
+      get:   ({key}) => Plugins.Preferences.get({key}),
+      set:   ({key,value}) => Plugins.Preferences.set({key,value}),
+      remove:({key}) => Plugins.Preferences.remove({key})
+    } : {
+      get:    async ({key}) => ({ value: localStorage.getItem(key) || null }),
+      set:    async ({key,value}) => localStorage.setItem(key, value),
+      remove: async ({key}) => localStorage.removeItem(key)
+    };
+    const Http = (Plugins.Http || Plugins.CapacitorHttp) || null;
+  
+    const K_INST='fr_instances_v1', K_ACTIVE='fr_active_v1', K_STATUS='fr_status_v1';
+  
+    const $ = s => document.querySelector(s);
+    const el = (t,a={},html='') => { const n=document.createElement(t); for (const k in a) n.setAttribute(k,a[k]); n.innerHTML=html; return n; };
+    const normalize = u => { if(!u) return ''; let v=u.trim(); if(!/^https?:\/\//i.test(v)) v='https://'+v; return v.replace(/\/+$/,''); };
+    const host = u => { try{ return new URL(normalize(u)).hostname }catch{ return '' } };
+    const originOf = u => { try{ return new URL(normalize(u)).origin }catch{ return '' } };
+    const faviconUrl = u => { try{ const x=new URL(normalize(u)); return x.origin+'/favicon.ico' }catch{ return '' } };
+    const initialsIcon = (hn='FR') => {
+      const t=(hn||'FR').replace(/^www\./,'').slice(0,2).toUpperCase();
+      const svg=`<svg xmlns='http://www.w3.org/2000/svg' width='64' height='64'>
+        <rect width='100%' height='100%' rx='12' ry='12' fill='#2196F3'/>
+        <text x='50%' y='54%' text-anchor='middle' font-family='system-ui,-apple-system,Segoe UI,Roboto,sans-serif'
+              font-size='28' font-weight='700' fill='#fff'>${t}</text></svg>`;
+      return 'data:image/svg+xml;utf8,'+encodeURIComponent(svg);
+    };
+  
+    async function getStatusCache(){ const raw=(await Pref.get({key:K_STATUS})).value; try{ return raw?JSON.parse(raw):{} }catch{ return {}; } }
+    async function writeStatus(origin, ok){ const cache=await getStatusCache(); cache[origin]={ ok, ts: Date.now() }; await Pref.set({key:K_STATUS, value:JSON.stringify(cache)}); }
+  
+    async function verifyFileRise(u, timeout=5000){
+      if (!u || !Http) return {ok:false};
+      const base = normalize(u), origin = originOf(base);
+      const tryJson = async (url, validate) => {
+        try{
+          const r = await Http.get({ url, connectTimeout:timeout, readTimeout:timeout, headers:{'Accept':'application/json','Cache-Control':'no-cache'} });
+          if (r && r.data) {
+            const j = (typeof r.data === 'string') ? JSON.parse(r.data) : r.data;
+            return !!validate(j);
+          }
+        }catch(_){}
+        return false;
+      };
+      if (await tryJson(origin + '/siteConfig.json', j => j && (j.appTitle || j.headerTitle || j.auth || j.oidc || j.basicAuth))) return {ok:true, origin};
+      if (await tryJson(origin + '/api/ping.php',    j => j && (j.ok===true || j.status==='ok' || j.pong || j.app==='FileRise'))) return {ok:true, origin};
+      if (await tryJson(origin + '/api/version.php', j => j && (j.version || j.app==='FileRise'))) return {ok:true, origin};
+      try{
+        const r = await Http.get({ url: origin+'/', connectTimeout:timeout, readTimeout:timeout, headers:{'Cache-Control':'no-cache'} });
+        if (typeof r.data === 'string' && /FileRise/i.test(r.data)) return {ok:true, origin};
+      }catch(_){}
+      return {ok:false, origin};
+    }
+  
+    async function probeReachable(u, timeout=3000){
+      try{
+        const base = new URL(normalize(u)).origin, ico=base+'/favicon.ico';
+        if (Http){
+          try{ const r=await Http.get({ url: ico, connectTimeout:timeout, readTimeout:timeout, headers:{'Cache-Control':'no-cache'} });
+               if (r && typeof r.status==='number' && r.status<500) return true; }catch(e){}
+          try{ const r2=await Http.get({ url: base+'/', connectTimeout:timeout, readTimeout:timeout, headers:{'Cache-Control':'no-cache'} });
+               if (r2 && typeof r2.status==='number' && r2.status<500) return true; }catch(e){}
+          return false;
+        }
+        return await new Promise(res=>{
+          const img=new Image(), t=setTimeout(()=>done(false), timeout);
+          function done(ok){ clearTimeout(t); img.onload=img.onerror=null; res(ok); }
+          img.onload=()=>done(true); img.onerror=()=>done(false);
+          img.src = ico + (ico.includes('?')?'&':'?') + '__fr=' + Date.now();
+        });
+      }catch{ return false; }
+    }
+  
+    async function loadInstances(){ const raw=(await Pref.get({key:K_INST})).value; try{ return raw?JSON.parse(raw):[] }catch{ return [] } }
+    async function saveInstances(list){ await Pref.set({key:K_INST, value:JSON.stringify(list)}); }
+    async function getActive(){ return (await Pref.get({key:K_ACTIVE})).value }
+    async function setActive(id){ await Pref.set({key:K_ACTIVE, value:id||''}) }
+  
+    // ---- Styles (slide-up sheet + disabled buttons + safe-area) ----
+    if (!$('#frx-mobile-style')) {
+      const css = `
+        .frx-fab { position:fixed; right:16px; bottom:calc(env(safe-area-inset-bottom,0px) + 18px); width:52px; height:52px; border-radius:26px;
+          background: linear-gradient(180deg,#64B5F6,#2196F3 65%,#1976D2); color:#fff; display:grid; place-items:center;
+          box-shadow:0 10px 22px rgba(33,150,243,.38); z-index:2147483647; cursor:pointer; user-select:none; }
+        .frx-fab:active { transform: translateY(1px) scale(.98); }
+        .frx-fab svg { width:26px; height:26px; fill:white }
+        .frx-scrim{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:2147483645;opacity:0;visibility:hidden;transition:opacity .24s ease}
+        .frx-scrim.show{opacity:1;visibility:visible}
+        .frx-sheet{position:fixed;left:0;right:0;bottom:0;background:#0f172a;color:#e5e7eb;
+          border-top-left-radius:16px;border-top-right-radius:16px;box-shadow:0 -10px 30px rgba(0,0,0,.3);
+          z-index:2147483646;transform:translateY(100%);opacity:0;visibility:hidden;
+          transition:transform .28s cubic-bezier(.2,.8,.2,1), opacity .28s ease; will-change:transform}
+        .frx-sheet.show{transform:translateY(0);opacity:1;visibility:visible}
+        .frx-sheet .hdr{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid rgba(255,255,255,.08)}
+        .frx-title{display:flex;align-items:center;gap:10px;font-weight:800}
+        .frx-title img{width:22px;height:22px}
+        .frx-list{max-height:60vh;overflow:auto;padding:8px 12px}
+        .frx-chip{border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:12px;margin:8px 4px;background:rgba(255,255,255,.04)}
+        .frx-chip.active{outline:3px solid rgba(33,150,243,.35); border-color:#2196F3}
+        .frx-top{display:flex;gap:10px;align-items:center;justify-content:space-between;margin-bottom:10px}
+        .frx-left{display:flex;gap:10px;align-items:center}
+        .frx-ico{width:20px;height:20px;border-radius:6px;overflow:hidden;background:#fff;display:grid;place-items:center}
+        .frx-ico img{width:100%;height:100%;object-fit:cover;display:block}
+        .frx-name{font-weight:800}
+        .frx-host{font-size:12px;opacity:.8;margin-top:2px}
+        .frx-status{display:flex;align-items:center;gap:6px;font-size:12px;opacity:.9}
+        .frx-dot{width:10px;height:10px;border-radius:50%;}
+        .frx-dot.on{background:#10B981;box-shadow:0 0 0 3px rgba(16,185,129,.18)}
+        .frx-dot.off{background:#ef4444;box-shadow:0 0 0 3px rgba(239,68,68,.18)}
+        .frx-actions{display:flex;gap:8px;flex-wrap:wrap}
+        .frx-btn{appearance:none;border:0;border-radius:10px;padding:10px 12px;font-weight:700;cursor:pointer;transition:.15s ease opacity, .15s ease filter}
+        .frx-btn[disabled]{opacity:.5;cursor:not-allowed;filter:grayscale(20%)}
+        .frx-primary{background:linear-gradient(180deg,#64B5F6,#2196F3);color:#fff}
+        .frx-ghost{background:transparent;color:#cbd5e1;border:1px solid rgba(255,255,255,.12)}
+        .frx-danger{background:transparent;color:#f44336;border:1px solid rgba(244,67,54,.45)}
+        .frx-row{display:flex;gap:8px;align-items:center}
+        .frx-field{display:grid;gap:6px;margin:8px 4px}
+        .frx-input{width:100%;padding:12px;border-radius:10px;border:1px solid rgba(255,255,255,.12);background:transparent;color:inherit}
+        .frx-footer{display:flex;justify-content:flex-end;gap:8px;padding:10px 12px;border-top:1px solid rgba(255,255,255,.08)}
+        @media (pointer:coarse) { .frx-fab { width:58px; height:58px; border-radius:29px; } }
+      `;
+      document.head.appendChild(el('style',{id:'frx-mobile-style'}, css));
+    }
+  
+    // DOM
+    const scrim = el('div',{class:'frx-scrim', id:'frx-scrim'});
+    const sheet = el('div',{class:'frx-sheet', id:'frx-sheet'}, `
+      <div class="hdr">
+        <div class="frx-title">
+          <img src="/assets/logo.svg" alt="FileRise" onerror="this.style.display='none'"><span>FileRise Switcher</span>
+        </div>
+        <div class="frx-row">
+          <button class="frx-btn frx-ghost" id="frx-home">Home</button>
+          <button class="frx-btn frx-ghost" id="frx-close">Close</button>
+        </div>
+      </div>
+      <div class="frx-list" id="frx-list"></div>
+      <div style="padding:10px 12px">
+        <div class="frx-field">
+          <input class="frx-input" id="frx-name" placeholder="Display name (optional)"/>
+          <input class="frx-input" id="frx-url"  placeholder="https://files.example.com"/>
+        </div>
+      </div>
+      <div class="frx-footer">
+        <button class="frx-btn frx-ghost" id="frx-add-cancel">Close</button>
+        <button class="frx-btn frx-primary" id="frx-add-save">+ Add server</button>
+      </div>
+    `);
+    const fab = el('div',{class:'frx-fab', id:'frx-fab', title:'Switch server'}, `<svg viewBox="0 0 24 24"><path d="M7 7h10v2H7V7zm0 4h10v2H7v-2zm0 4h10v2H7v-2z"/></svg>`);
+    document.body.appendChild(scrim); document.body.appendChild(sheet); document.body.appendChild(fab);
+  
+    function show(){ scrim.classList.add('show'); sheet.classList.add('show'); fab.style.display='none'; }
+    function hide(){ scrim.classList.remove('show'); sheet.classList.remove('show'); fab.style.display='grid'; }
+    $('#frx-close').addEventListener('click', hide);
+    $('#frx-add-cancel').addEventListener('click', hide);
+    $('#frx-home').addEventListener('click', ()=>{ try{ location.href='capacitor://localhost/index.html'; }catch{} });
+    scrim.addEventListener('click', hide);
+    document.addEventListener('keydown', e=>{ if(e.key==='Escape') hide(); });
+  
+    function chipNode(item, isActive){
+      const hv=host(item.url);
+      const node = el('div',{class:'frx-chip'+(isActive?' active':''), 'data-id':item.id});
+      const top  = el('div',{class:'frx-top'});
+      const left = el('div',{class:'frx-left'});
+      const ico  = el('div',{class:'frx-ico'});
+      const img  = new Image();
+      img.alt=''; img.src=item.favicon||faviconUrl(item.url)||initialsIcon(hv);
+      img.onerror=()=>{ img.onerror=null; img.src=initialsIcon(hv); };
+      ico.appendChild(img);
+      const txt  = el('div',{}, `<div class="frx-name">${item.name || hv}</div><div class="frx-host">${hv}</div>`);
+      left.appendChild(ico); left.appendChild(txt);
+      const status = el('div',{class:'frx-status'}, `<span class="frx-dot" id="frx-dot-${item.id}"></span><span id="frx-lbl-${item.id}">Checking…</span>`);
+      top.appendChild(left); top.appendChild(status);
+      const actions = el('div',{class:'frx-actions'});
+      const bOpen = el('button',{class:'frx-btn frx-primary', 'data-act':'open', disabled:true}, 'Open');
+      const bRen  = el('button',{class:'frx-btn frx-ghost',   'data-act':'rename'}, 'Rename');
+      const bDel  = el('button',{class:'frx-btn frx-danger',  'data-act':'remove'}, 'Remove');
+      actions.appendChild(bOpen); actions.appendChild(bRen); actions.appendChild(bDel);
+      node.appendChild(top); node.appendChild(actions);
+      return node;
+    }
+  
+    async function renderList(){
+      const listEl=$('#frx-list'); listEl.innerHTML='';
+      const list=await loadInstances(); const active=await getActive();
+      const cache=await getStatusCache();
+  
+      list.sort((a,b)=>(b.lastUsed||0)-(a.lastUsed||0)).forEach(item=>{
+        const chip = chipNode(item, item.id===active);
+        const o = originOf(item.url), cached = cache[o];
+        const dot = chip.querySelector(`#frx-dot-${item.id}`), lbl = chip.querySelector(`#frx-lbl-${item.id}`);
+        const openBtn = chip.querySelector('[data-act="open"]');
+  
+        if (cached){
+          dot.classList.add(cached.ok ? 'on':'off');
+          lbl.textContent = cached.ok ? 'Online' : 'Offline';
+          openBtn.disabled = !cached.ok;
+        } else {
+          lbl.textContent = 'Unknown';
+          openBtn.disabled = true;
+        }
+  
+        chip.addEventListener('click', async (e)=>{
+          const act = e.target?.dataset?.act;
+          if (!act) return;
+  
+          if (act==='open'){
+            if (openBtn.disabled) return;
+            await setActive(item.id);
+            const url=normalize(item.url), withFlag=url+(url.includes('?')?'&':'?')+'frapp=1';
+            window.location.replace(withFlag);
+          } else if (act==='rename'){
+            const nn=prompt('New display name:', item.name || host(item.url));
+            if (nn!=null){
+              const L=await loadInstances(); const it=L.find(x=>x.id===item.id);
+              if (it){ it.name=nn.trim(); it.lastUsed=Date.now(); await saveInstances(L); renderList(); }
+            }
+          } else if (act==='remove'){
+            if (!confirm('Remove this server?')) return;
+            let L=await loadInstances(); L=L.filter(x=>x.id!==item.id); await saveInstances(L);
+            const a=await getActive(); if (a===item.id) await setActive(L[0]?.id||''); renderList();
+          }
+        });
+  
+        listEl.appendChild(chip);
+  
+        // Live refresh (best effort)
+        (async ()=>{
+          const ok = await probeReachable(item.url, 2500);
+          const d = document.getElementById(`frx-dot-${item.id}`);
+          const l = document.getElementById(`frx-lbl-${item.id}`);
+          const b = chip.querySelector('[data-act="open"]');
+          if (d && l && b){
+            d.classList.remove('on','off');
+            d.classList.add(ok?'on':'off');
+            l.textContent = ok ? 'Online' : 'Offline';
+            b.disabled = !ok;
+          }
+          const o2 = originOf(item.url); if (o2) writeStatus(o2, ok);
+        })();
+      });
+    }
+  
+    $('#frx-add-save').addEventListener('click', async ()=>{
+      const name = $('#frx-name').value.trim();
+      const url  = $('#frx-url').value.trim();
+      if (!url) { alert('Enter a valid URL'); return; }
+  
+      // Verify: must be FileRise
+      const vf = await verifyFileRise(url);
+      if (!vf.ok) { alert('That address does not look like a FileRise server.'); return; }
+  
+      let L = await loadInstances();
+      const h  = host(url);
+      const dupe = L.find(i => host(i.url)===h);
+      const inst = dupe || { id:'i'+Math.random().toString(36).slice(2)+Date.now().toString(36) };
+      inst.name = name || inst.name || h;
+      inst.url  = normalize(url);
+      inst.favicon = faviconUrl(url);
+      inst.lastUsed = Date.now();
+      if (!dupe) L.push(inst);
+      await saveInstances(L);
+      await setActive(inst.id);
+  
+      if (vf.origin) await writeStatus(vf.origin, true);
+  
+      window.location.replace(inst.url + (inst.url.includes('?')?'&':'?') + 'frapp=1');
+    });
+  
+    fab.addEventListener('click', async ()=>{ await renderList(); show(); });
+    
+  
+    // Ensure zoom gestures work if the host page tried to disable them
+    (function ensureZoomable(){
+      let m = document.querySelector('meta[name=viewport]');
+      const desired = 'width=device-width, initial-scale=1, viewport-fit=cover, user-scalable=yes, minimum-scale=1, maximum-scale=5';
+      if (!m){ m = document.createElement('meta'); m.setAttribute('name','viewport'); document.head.appendChild(m); }
+      const c = m.getAttribute('content') || '';
+      if (/user-scalable=no|maximum-scale=1/.test(c)) m.setAttribute('content', desired);
+    })();
+  })();
--- a/public/js/pwa/register-sw.js
+++ b/public/js/pwa/register-sw.js
@@ -0,0 +1,5 @@
+if ('serviceWorker' in navigator) {
+    window.addEventListener('load', () => {
+      navigator.serviceWorker.register('/sw.js?v={{APP_QVER}}').catch(() => {});
+    });
+  }
--- a/public/js/pwa/sw.js
+++ b/public/js/pwa/sw.js
@@ -0,0 +1,9 @@
+// public/js/pwa/sw.js
+const SW_VERSION = '{{APP_QVER}}';
+const STATIC_CACHE = `fr-static-${SW_VERSION}`;
+const STATIC_ASSETS = [
+  '/', '/index.html',
+  '/css/styles.css?v={{APP_QVER}}',
+  '/js/main.js?v={{APP_QVER}}',
+  '/assets/logo.svg?v={{APP_QVER}}'
+];
--- a/public/manifest.webmanifest
+++ b/public/manifest.webmanifest
@@ -0,0 +1,14 @@
+{
+    "name": "FileRise",
+    "short_name": "FileRise",
+    "start_url": "/?pwa=1",
+    "scope": "/",
+    "display": "standalone",
+    "background_color": "#111111",
+    "theme_color": "#0b5ed7",
+    "icons": [
+      { "src": "/assets/icons/icon-192.png?v={{APP_QVER}}", "sizes": "192x192", "type": "image/png" },
+      { "src": "/assets/icons/icon-512.png?v={{APP_QVER}}", "sizes": "512x512", "type": "image/png" },
+      { "src": "/assets/icons/maskable-512.png?v={{APP_QVER}}", "sizes": "512x512", "type": "image/png", "purpose": "maskable" }
+    ]
+  }
--- a/public/sw.js
+++ b/public/sw.js
@@ -0,0 +1,6 @@
+// Root-scoped stub. Keeps the worker’s scope at “/” level
+try {
+  self.importScripts('/js/pwa/sw.js?v={{APP_QVER}}');
+} catch (_) {
+  // no-op
+}
--- a/src/controllers/MediaController.php
+++ b/src/controllers/MediaController.php
@@ -0,0 +1,135 @@
+<?php
+// src/controllers/MediaController.php
+declare(strict_types=1);
+
+require_once PROJECT_ROOT . '/config/config.php';
+require_once PROJECT_ROOT . '/src/models/MediaModel.php';
+require_once PROJECT_ROOT . '/src/lib/ACL.php';
+
+class MediaController
+{
+    private function jsonStart(): void {
+        if (session_status() !== PHP_SESSION_ACTIVE) session_start();
+        header('Content-Type: application/json; charset=utf-8');
+        set_error_handler(function ($severity, $message, $file, $line) {
+            if (!(error_reporting() & $severity)) return;
+            throw new ErrorException($message, 0, $severity, $file, $line);
+        });
+    }
+    private function jsonEnd(): void { restore_error_handler(); }
+    private function out($payload, int $status=200): void {
+        http_response_code($status);
+        echo json_encode($payload, JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES);
+    }
+    private function readJson(): array {
+        $raw = file_get_contents('php://input');
+        $data = json_decode($raw, true);
+        return is_array($data) ? $data : [];
+    }
+    private function requireAuth(): ?string {
+        if (empty($_SESSION['authenticated']) || $_SESSION['authenticated'] !== true) {
+            $this->out(['error'=>'Unauthorized'], 401); return 'no';
+        }
+        return null;
+    }
+    private function checkCsrf(): ?string {
+        $headers = function_exists('getallheaders') ? array_change_key_case(getallheaders(), CASE_LOWER) : [];
+        $received = $headers['x-csrf-token'] ?? '';
+        if (!isset($_SESSION['csrf_token']) || $received !== $_SESSION['csrf_token']) {
+            $this->out(['error'=>'Invalid CSRF token'], 403); return 'no';
+        }
+        return null;
+    }
+    private function normalizeFolder($f): string {
+        $f = trim((string)$f);
+        return ($f==='' || strtolower($f)==='root') ? 'root' : $f;
+    }
+    private function validFolder($f): bool {
+        return $f==='root' || (bool)preg_match(REGEX_FOLDER_NAME, $f);
+    }
+    private function validFile($f): bool {
+        $f = basename((string)$f);
+        return $f !== '' && (bool)preg_match(REGEX_FILE_NAME, $f);
+    }
+    private function enforceRead(string $folder, string $username): ?string {
+        $perms = loadUserPermissions($username) ?: [];
+        return ACL::canRead($username, $perms, $folder) ? null : "Forbidden";
+    }
+
+    /** POST /api/media/updateProgress.php */
+    public function updateProgress(): void {
+        $this->jsonStart();
+        try {
+            if ($this->requireAuth()) return;
+            if ($this->checkCsrf())    return;
+
+            $u = $_SESSION['username'] ?? '';
+            $d = $this->readJson();
+            $folder = $this->normalizeFolder($d['folder'] ?? 'root');
+            $file   = (string)($d['file'] ?? '');
+            $seconds   = isset($d['seconds'])  ? floatval($d['seconds'])  : 0.0;
+            $duration  = isset($d['duration']) ? floatval($d['duration']) : null;
+            $completed = isset($d['completed']) ? (bool)$d['completed'] : null;
+            $clear     = isset($d['clear']) ? (bool)$d['clear'] : false;
+
+            if (!$this->validFolder($folder) || !$this->validFile($file)) {
+                $this->out(['error'=>'Invalid folder/file'], 400); return;
+            }
+            if ($this->enforceRead($folder, $u)) { $this->out(['error'=>'Forbidden'], 403); return; }
+
+            if ($clear) {
+                $ok = MediaModel::clearProgress($u, $folder, $file);
+                $this->out(['success'=>$ok]); return;
+            }
+
+            $row = MediaModel::saveProgress($u, $folder, $file, $seconds, $duration, $completed);
+            $this->out(['success'=>true, 'state'=>$row]);
+        } catch (Throwable $e) {
+            error_log('MediaController::updateProgress: '.$e->getMessage());
+            $this->out(['error'=>'Internal server error'], 500);
+        } finally { $this->jsonEnd(); }
+    }
+
+    /** GET /api/media/getProgress.php?folder=…&file=… */
+    public function getProgress(): void {
+        $this->jsonStart();
+        try {
+            if ($this->requireAuth()) return;
+            $u = $_SESSION['username'] ?? '';
+            $folder = $this->normalizeFolder($_GET['folder'] ?? 'root');
+            $file   = (string)($_GET['file'] ?? '');
+
+            if (!$this->validFolder($folder) || !$this->validFile($file)) {
+                $this->out(['error'=>'Invalid folder/file'], 400); return;
+            }
+            if ($this->enforceRead($folder, $u)) { $this->out(['error'=>'Forbidden'], 403); return; }
+
+            $row = MediaModel::getProgress($u, $folder, $file);
+            $this->out(['state'=>$row]);
+        } catch (Throwable $e) {
+            error_log('MediaController::getProgress: '.$e->getMessage());
+            $this->out(['error'=>'Internal server error'], 500);
+        } finally { $this->jsonEnd(); }
+    }
+
+    /** GET /api/media/getViewedMap.php?folder=…  (optional, for badges) */
+    public function getViewedMap(): void {
+        $this->jsonStart();
+        try {
+            if ($this->requireAuth()) return;
+            $u = $_SESSION['username'] ?? '';
+            $folder = $this->normalizeFolder($_GET['folder'] ?? 'root');
+
+            if (!$this->validFolder($folder)) {
+                $this->out(['error'=>'Invalid folder'], 400); return;
+            }
+            if ($this->enforceRead($folder, $u)) { $this->out(['error'=>'Forbidden'], 403); return; }
+
+            $map = MediaModel::getFolderMap($u, $folder);
+            $this->out(['map'=>$map]);
+        } catch (Throwable $e) {
+            error_log('MediaController::getViewedMap: '.$e->getMessage());
+            $this->out(['error'=>'Internal server error'], 500);
+        } finally { $this->jsonEnd(); }
+    }
+}
--- a/src/models/MediaModel.php
+++ b/src/models/MediaModel.php
@@ -0,0 +1,94 @@
+<?php
+// src/models/MediaModel.php
+declare(strict_types=1);
+
+require_once PROJECT_ROOT . '/config/config.php';
+require_once PROJECT_ROOT . '/src/lib/ACL.php';
+
+class MediaModel
+{
+    private static function baseDir(): string {
+        $dir = rtrim(USERS_DIR, '/\\') . DIRECTORY_SEPARATOR . 'user_state';
+        if (!is_dir($dir)) @mkdir($dir, 0775, true);
+        return $dir . DIRECTORY_SEPARATOR;
+    }
+
+    private static function filePathFor(string $username): string {
+        // case-insensitive username file
+        $safe = strtolower(preg_replace('/[^a-z0-9_\-\.]/i', '_', $username));
+        return self::baseDir() . $safe . '_media.json';
+    }
+
+    private static function loadState(string $username): array {
+        $path = self::filePathFor($username);
+        if (!file_exists($path)) return ["version"=>1, "items"=>[]];
+        $json = file_get_contents($path);
+        $data = json_decode($json, true);
+        return (is_array($data) && isset($data['items'])) ? $data : ["version"=>1, "items"=>[]];
+    }
+
+    private static function saveState(string $username, array $state): bool {
+        $path = self::filePathFor($username);
+        $tmp  = $path . '.tmp';
+        $ok   = file_put_contents($tmp, json_encode($state, JSON_UNESCAPED_SLASHES | JSON_PRETTY_PRINT), LOCK_EX);
+        if ($ok === false) return false;
+        return @rename($tmp, $path);
+    }
+
+    /** Save/merge a single file progress record. */
+    public static function saveProgress(string $username, string $folder, string $file, float $seconds, ?float $duration, ?bool $completed): array {
+        $folderKey = ($folder === '' || strtolower($folder)==='root') ? 'root' : $folder;
+        $nowIso    = date('c');
+
+        $state = self::loadState($username);
+        if (!isset($state['items'][$folderKey])) $state['items'][$folderKey] = [];
+        if (!isset($state['items'][$folderKey][$file])) {
+            $state['items'][$folderKey][$file] = [
+                "seconds"   => 0,
+                "duration"  => $duration ?? 0,
+                "completed" => false,
+                "updatedAt" => $nowIso
+            ];
+        }
+
+        $row =& $state['items'][$folderKey][$file];
+        if ($duration !== null && $duration > 0) $row['duration'] = $duration;
+        if ($seconds >= 0) $row['seconds'] = $seconds;
+        if ($completed !== null) $row['completed'] = (bool)$completed;
+        // auto-complete if we’re basically done
+        if (!$row['completed'] && $row['duration'] > 0 && $row['seconds'] >= max(0, $row['duration'] * 0.95)) {
+            $row['completed'] = true;
+        }
+        $row['updatedAt'] = $nowIso;
+
+        self::saveState($username, $state);
+        return $row;
+    }
+
+    /** Get a single file progress record. */
+    public static function getProgress(string $username, string $folder, string $file): array {
+        $folderKey = ($folder === '' || strtolower($folder)==='root') ? 'root' : $folder;
+        $state = self::loadState($username);
+        $row   = $state['items'][$folderKey][$file] ?? null;
+        return is_array($row) ? $row : ["seconds"=>0,"duration"=>0,"completed"=>false,"updatedAt"=>null];
+    }
+
+    /** Folder map: filename => {seconds,duration,completed,updatedAt} */
+    public static function getFolderMap(string $username, string $folder): array {
+        $folderKey = ($folder === '' || strtolower($folder)==='root') ? 'root' : $folder;
+        $state = self::loadState($username);
+        $items = $state['items'][$folderKey] ?? [];
+        return is_array($items) ? $items : [];
+    }
+
+    /** Clear one file’s progress (e.g., “mark unviewed”). */
+    public static function clearProgress(string $username, string $folder, string $file): bool {
+        $folderKey = ($folder === '' || strtolower($folder)==='root') ? 'root' : $folder;
+        $state = self::loadState($username);
+        if (isset($state['items'][$folderKey][$file])) {
+            unset($state['items'][$folderKey][$file]);
+            return self::saveState($username, $state);
+        }
+        return true;
+    }
+}