Merge pull request #47 from quoije/cursor/page-title-and-player-ui-a564

Page title and player UI
2025-12-22 03:06:19 -05:00
parent 88129ca5ac 20d0a52f78
commit 1b27b378ec
10 changed files with 210 additions and 94 deletions
@@ -688,80 +688,135 @@
          </div>
        </div>

-        <div class="row g-3">
-          <div class="col-md-6">
-            <label for="edit_imdb_id" class="form-label">IMDB ID (ex: tt1234567)</label>
-            <input type="text" class="form-control" id="edit_imdb_id" placeholder="tt..." required>
-          </div>
-          <div class="col-md-6">
-            <label for="edit_year" class="form-label">Oscar year</label>
-            <input type="number" class="form-control" id="edit_year" placeholder="2026" min="1900" max="3000">
-          </div>
+        <ul class="nav nav-tabs" id="editMovieTabs" role="tablist">
+          <li class="nav-item" role="presentation">
+            <button
+              class="nav-link active"
+              id="edit-movie-tab-info"
+              data-bs-toggle="tab"
+              data-bs-target="#edit-movie-pane-info"
+              type="button"
+              role="tab"
+              aria-controls="edit-movie-pane-info"
+              aria-selected="true"
+            >
+              Info
+            </button>
+          </li>
+          <li class="nav-item" role="presentation">
+            <button
+              class="nav-link"
+              id="edit-movie-tab-video"
+              data-bs-toggle="tab"
+              data-bs-target="#edit-movie-pane-video"
+              type="button"
+              role="tab"
+              aria-controls="edit-movie-pane-video"
+              aria-selected="false"
+            >
+              Player / Vidéo
+            </button>
+          </li>
+        </ul>

-          <div class="col-md-6">
-            <label for="edit_category" class="form-label">Catégorie</label>
-            <input type="text" class="form-control" id="edit_category" placeholder="Best Picture, etc." required>
-          </div>
-          <div class="col-md-6">
-            <label class="form-label">Lecteur (source)</label>
-            <div class="row g-2">
-              <div class="col-12">
-                <label for="edit_player_mode" class="form-label">Mode</label>
-                <select id="edit_player_mode" class="form-select">
-                  <option value="auto">Auto</option>
-                  <option value="video">Video</option>
-                  <option value="embed">Embed</option>
-                </select>
-                <div class="form-text">Auto = video_src → embed_src → vod_link.</div>
+        <div class="tab-content pt-3" id="editMovieTabsContent">
+          <!-- Info tab -->
+          <div
+            class="tab-pane fade show active"
+            id="edit-movie-pane-info"
+            role="tabpanel"
+            aria-labelledby="edit-movie-tab-info"
+            tabindex="0"
+          >
+            <div class="row g-3">
+              <div class="col-md-6">
+                <label for="edit_imdb_id" class="form-label">IMDB ID (ex: tt1234567)</label>
+                <input type="text" class="form-control" id="edit_imdb_id" placeholder="tt..." required>
              </div>
-              <div class="col-12">
-                <label for="edit_video_src" class="form-label">Video URL (mp4/webm/m3u8)</label>
-                <input type="text" class="form-control" id="edit_video_src" placeholder="https://.../movie.mp4 or .../playlist.m3u8">
-                <div class="form-text">If you use a server file (below) and leave this empty, it will auto-use <code>/api/video/&lt;movieId&gt;</code>.</div>
+              <div class="col-md-6">
+                <label for="edit_year" class="form-label">Oscar year</label>
+                <input type="number" class="form-control" id="edit_year" placeholder="2026" min="1900" max="3000">
              </div>
-              <div class="col-12">
-                <label for="edit_video_file" class="form-label">Server video file (optional)</label>
-                <input type="text" class="form-control font-monospace" id="edit_video_file" placeholder="my_movie.mp4 or 2026/my_movie.mp4">
-                <div class="form-text">Relative path under <code>VIDEO_FILES_DIR</code> (default: <code>public/video</code>).</div>
+
+              <div class="col-md-6">
+                <label for="edit_category" class="form-label">Catégorie</label>
+                <input type="text" class="form-control" id="edit_category" placeholder="Best Picture, etc." required>
              </div>
-              <div class="col-12">
-                <label for="edit_embed_src" class="form-label">Embed URL or iframe code</label>
-                <textarea class="form-control font-monospace" id="edit_embed_src" rows="3" placeholder="https://... OR <iframe ...>"></textarea>
+
+              <div class="col-md-6">
+                <label for="edit_rating" class="form-label">Rating (imdbRating)</label>
+                <input type="text" class="form-control" id="edit_rating" placeholder="7.9">
              </div>
+
              <div class="col-12">
-                <label for="edit_vod_link" class="form-label">Legacy VOD link (optional)</label>
-                <input type="text" class="form-control" id="edit_vod_link" placeholder="https://...">
+                <div class="form-check">
+                  <input class="form-check-input" type="checkbox" id="edit_refresh_omdb">
+                  <label class="form-check-label" for="edit_refresh_omdb">
+                    Recharger depuis OMDb (écrase titre / plot / rating / poster)
+                  </label>
+                </div>
+                <div class="form-text">Si coché, le serveur refait un appel OMDb via l’IMDB ID au moment de l’enregistrement.</div>
+              </div>
+
+              <div class="col-12">
+                <label for="edit_title" class="form-label">Titre</label>
+                <input type="text" class="form-control" id="edit_title" placeholder="Title">
+              </div>
+
+              <div class="col-12">
+                <label for="edit_poster" class="form-label">Poster URL</label>
+                <input type="url" class="form-control" id="edit_poster" placeholder="https://...">
+              </div>
+
+              <div class="col-12">
+                <label for="edit_description" class="form-label">Description (Plot)</label>
+                <textarea class="form-control" id="edit_description" rows="4" placeholder="Plot..."></textarea>
              </div>
            </div>
          </div>

-          <div class="col-12">
-            <div class="form-check">
-              <input class="form-check-input" type="checkbox" id="edit_refresh_omdb">
-              <label class="form-check-label" for="edit_refresh_omdb">
-                Recharger depuis OMDb (écrase titre / plot / rating / poster)
-              </label>
+          <!-- Video tab -->
+          <div
+            class="tab-pane fade"
+            id="edit-movie-pane-video"
+            role="tabpanel"
+            aria-labelledby="edit-movie-tab-video"
+            tabindex="0"
+          >
+            <div class="row g-3">
+              <div class="col-12">
+                <label class="form-label">Lecteur (source)</label>
+                <div class="row g-2">
+                  <div class="col-12 col-lg-4">
+                    <label for="edit_player_mode" class="form-label">Mode</label>
+                    <select id="edit_player_mode" class="form-select">
+                      <option value="auto">Auto</option>
+                      <option value="video">Video</option>
+                      <option value="embed">Embed</option>
+                    </select>
+                    <div class="form-text">Auto = video_src → embed_src → vod_link.</div>
+                  </div>
+                  <div class="col-12 col-lg-8">
+                    <label for="edit_video_src" class="form-label">Video URL (mp4/webm/m3u8)</label>
+                    <input type="text" class="form-control" id="edit_video_src" placeholder="https://.../movie.mp4 or .../playlist.m3u8">
+                    <div class="form-text">If you use a server file (below) and leave this empty, it will auto-use <code>/api/video/&lt;movieId&gt;</code>.</div>
+                  </div>
+                  <div class="col-12">
+                    <label for="edit_video_file" class="form-label">Server video file (optional)</label>
+                    <input type="text" class="form-control font-monospace" id="edit_video_file" placeholder="my_movie.mp4 or 2026/my_movie.mp4">
+                    <div class="form-text">Relative path under <code>VIDEO_FILES_DIR</code> (default: <code>public/video</code>).</div>
+                  </div>
+                  <div class="col-12">
+                    <label for="edit_embed_src" class="form-label">Embed URL or iframe code</label>
+                    <textarea class="form-control font-monospace" id="edit_embed_src" rows="3" placeholder="https://... OR <iframe ...>"></textarea>
+                  </div>
+                  <div class="col-12">
+                    <label for="edit_vod_link" class="form-label">Legacy VOD link (optional)</label>
+                    <input type="text" class="form-control" id="edit_vod_link" placeholder="https://...">
+                  </div>
+                </div>
+              </div>
            </div>
-            <div class="form-text">Si coché, le serveur refait un appel OMDb via l’IMDB ID au moment de l’enregistrement.</div>
-          </div>
-
-          <div class="col-md-6">
-            <label for="edit_title" class="form-label">Titre</label>
-            <input type="text" class="form-control" id="edit_title" placeholder="Title">
-          </div>
-          <div class="col-md-6">
-            <label for="edit_rating" class="form-label">Rating (imdbRating)</label>
-            <input type="text" class="form-control" id="edit_rating" placeholder="7.9">
-          </div>
-
-          <div class="col-12">
-            <label for="edit_poster" class="form-label">Poster URL</label>
-            <input type="url" class="form-control" id="edit_poster" placeholder="https://...">
-          </div>
-
-          <div class="col-12">
-            <label for="edit_description" class="form-label">Description (Plot)</label>
-            <textarea class="form-control" id="edit_description" rows="4" placeholder="Plot..."></textarea>
          </div>
        </div>
      </div>
@@ -7,7 +7,27 @@ function isTokenExpired(decoded) {
  return !!decoded.exp && decoded.exp < currentTime;
 }

+async function applyActiveOscarYearToTitle() {
+  const base = 'Pool Oscars';
+  const current = String(document.title || base);
+  const sep = ' - ';
+  const idx = current.indexOf(sep);
+  const suffix = idx >= 0 ? current.slice(idx) : '';
+
+  try {
+    const res = await fetch('/api/settings/year', { method: 'GET' });
+    const data = res.ok ? await res.json().catch(() => null) : null;
+    const year = Number(data?.year);
+    document.title = Number.isInteger(year) ? `${base} (${year})${suffix}` : `${base}${suffix}`;
+  } catch (_) {
+    document.title = `${base}${suffix}`;
+  }
+}
+
 window.onload = function () {
+  // Best-effort: update page title with active year.
+  applyActiveOscarYearToTitle();
+
  const token = localStorage.getItem('auth_token');
  if (!token) {
    window.location.href = '/';
@@ -254,7 +254,7 @@ window.addEventListener('DOMContentLoaded', async function () {
    }

    const activeYear = await fetchActiveYear();
-    document.title = `Pool Oscars ${activeYear} - Checklist`;
+    document.title = `Pool Oscars (${activeYear}) - Checklist`;
    const oscarYearEl = document.getElementById('oscar-year');
    if (oscarYearEl) oscarYearEl.textContent = String(activeYear);

@@ -2332,7 +2332,7 @@ window.onload = async function () {
  // Initial load
  activeYear = await fetchActiveYear();
  if (activeYear) {
-    document.title = `Pool Oscars ${activeYear} - Admin`;
+    document.title = `Pool Oscars (${activeYear}) - Admin`;
  }

  hookModal100Inputs();
@@ -2352,7 +2352,7 @@ window.onload = async function () {
        activeYear = await setActiveYear(y);
        activeYearInput.value = String(activeYear);
        yearInput.value = String(activeYear);
-        document.title = `Pool Oscars ${activeYear} - Admin`;
+        document.title = `Pool Oscars (${activeYear}) - Admin`;
        showResponse('success', `Année active appliquée: ${activeYear}`);
        await refreshYears();
        await loadMoviesForManagement();
@@ -2,6 +2,26 @@ function decodeJwt(token) {
  return JSON.parse(atob(token.split('.')[1]));
 }

+async function applyActiveOscarYearToTitle() {
+  const base = 'Pool Oscars';
+  const current = String(document.title || base);
+  const sep = ' - ';
+  const idx = current.indexOf(sep);
+  const suffix = idx >= 0 ? current.slice(idx) : '';
+
+  try {
+    const res = await fetch('/api/settings/year', { method: 'GET' });
+    const data = res.ok ? await res.json().catch(() => null) : null;
+    const year = Number(data?.year);
+    document.title = Number.isInteger(year) ? `${base} (${year})${suffix}` : `${base}${suffix}`;
+  } catch (_) {
+    document.title = `${base}${suffix}`;
+  }
+}
+
+// Fire and forget.
+applyActiveOscarYearToTitle();
+
 // Check if the user is already logged in by looking for auth_token in localStorage
 const existingToken = localStorage.getItem('auth_token');
 if (existingToken) {
@@ -224,7 +224,7 @@ window.addEventListener('DOMContentLoaded', async function () {
    }

    const activeYear = await fetchActiveYear();
-    document.title = `Pool Oscars ${activeYear} - Films`;
+    document.title = `Pool Oscars (${activeYear}) - Films`;
    const oscarYearEl = document.getElementById('oscar-year');
    if (oscarYearEl) oscarYearEl.textContent = String(activeYear);

@@ -23,6 +23,18 @@ function normalizeUserId(raw) {
  return /^[a-f0-9]{24}$/i.test(s) ? s : null;
 }

+async function fetchActiveOscarYear() {
+  try {
+    const res = await fetch('/api/settings/year', { method: 'GET' });
+    if (!res.ok) return null;
+    const data = await res.json().catch(() => null);
+    const year = Number(data?.year);
+    return Number.isInteger(year) ? year : null;
+  } catch (_) {
+    return null;
+  }
+}
+
 async function fetchPlaybackProgress(movieId, token) {
  try {
    const res = await fetch(`/api/movies/${encodeURIComponent(movieId)}/progress`, {
@@ -341,12 +353,15 @@ function formatClock(seconds) {
  return `${m}:${String(sec).padStart(2, '0')}`;
 }

-function setHeader(movie) {
+function setHeader(movie, { activeYear } = {}) {
  const titleEl = document.getElementById('movie-title');
  const categoryEl = document.getElementById('movie-category');
  const ratingEl = document.getElementById('movie-rating');

-  if (titleEl) titleEl.textContent = movie?.title || 'Player';
+  const year = Number.isInteger(activeYear) ? activeYear : null;
+  const titlePrefix = year ? `Pool Oscars (${year})` : 'Pool Oscars';
+
+  if (titleEl) titleEl.textContent = movie?.title || titlePrefix;

  if (categoryEl) {
    const cat = movie?.category ? String(movie.category) : '';
@@ -358,7 +373,7 @@ function setHeader(movie) {
    ratingEl.textContent = r ? `⭐ ${r}` : '';
  }

-  document.title = movie?.title ? `Player - ${movie.title}` : 'Player';
+  document.title = movie?.title ? `${titlePrefix} - ${movie.title}` : titlePrefix;
 }

 function normalizeVodLink(raw) {
@@ -475,18 +490,6 @@ function hideAllPlayers() {
  }
 }

-function setOpenOriginal(raw) {
-  const openOriginal = document.getElementById('open-original');
-  if (!openOriginal) return;
-  if (raw) {
-    openOriginal.href = raw;
-    openOriginal.classList.remove('d-none');
-  } else {
-    openOriginal.removeAttribute('href');
-    openOriginal.classList.add('d-none');
-  }
-}
-
 function isApiVideoUrl(raw) {
  const s = String(raw || '').trim();
  if (!s) return false;
@@ -597,9 +600,6 @@ async function playVodLink(vodLink, { token } = {}) {
    return;
  }

-  // "Open original" button
-  setOpenOriginal(raw);
-
  // Prefer known embed providers
  const yt = toYoutubeEmbed(raw);
  if (yt) {
@@ -721,6 +721,9 @@ window.onload = async function () {
    return;
  }

+  // Load the active Oscar year in parallel with the movie fetch.
+  const activeYearPromise = fetchActiveOscarYear();
+
  let decoded = null;
  try {
    decoded = decodeJwt(token);
@@ -771,11 +774,11 @@ window.onload = async function () {
      return;
    }

-    setHeader(movie);
+    const activeYear = await activeYearPromise;
+    setHeader(movie, { activeYear });

    const resolved = resolveMovieSource(movie);
    if (!resolved?.src) {
-      setOpenOriginal(null);
      setSourceLabel('—');
      hideAllPlayers();
      showAlert('No playable source configured for this movie.');
@@ -786,10 +789,9 @@ window.onload = async function () {

    if (resolved.isLegacy) {
      // Legacy source: never embed it in the player.
-      setOpenOriginal(resolved.src);
-      setSourceLabel('Legacy link (opens in new tab)');
+      setSourceLabel('Legacy link');
      hideAllPlayers();
-      showAlertVariant('Legacy source: use “Open original” to watch in a new tab.', 'warning');
+      showAlertVariant('Legacy source: this link is not playable in the in-app player.', 'warning');
      return;
    }

@@ -2,6 +2,26 @@ function decodeJwt(token) {
  return JSON.parse(atob(token.split('.')[1]));
 }

+async function applyActiveOscarYearToTitle() {
+  const base = 'Pool Oscars';
+  const current = String(document.title || base);
+  const sep = ' - ';
+  const idx = current.indexOf(sep);
+  const suffix = idx >= 0 ? current.slice(idx) : '';
+
+  try {
+    const res = await fetch('/api/settings/year', { method: 'GET' });
+    const data = res.ok ? await res.json().catch(() => null) : null;
+    const year = Number(data?.year);
+    document.title = Number.isInteger(year) ? `${base} (${year})${suffix}` : `${base}${suffix}`;
+  } catch (_) {
+    document.title = `${base}${suffix}`;
+  }
+}
+
+// Fire and forget.
+applyActiveOscarYearToTitle();
+
 // Check if the user is already logged in by looking for auth_token in localStorage
 const existingToken = localStorage.getItem('auth_token');
 if (existingToken) {
@@ -365,7 +365,7 @@ window.addEventListener('DOMContentLoaded', async function () {
      pageLoader.setProgress(20);
      const activeYear = await fetchActiveYear();
      if (activeYear) {
-        document.title = `Pool Oscars ${activeYear} - Statistiques des utilisateurs`;
+        document.title = `Pool Oscars (${activeYear}) - Statistiques des utilisateurs`;
        const h2 = document.querySelector('h2');
        if (h2) h2.textContent = `Statistiques des utilisateurs (${activeYear})`;
      }
@@ -5,7 +5,7 @@
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <!-- IMPORTANT: the player may use ?token=... for cross-origin video streaming -->
  <meta name="referrer" content="no-referrer" />
-  <title>Player</title>
+  <title>Pool Oscars</title>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
  <link href="./css/app.css" rel="stylesheet">
  <link rel="preload" as="image" href="img/logo_w.png">
@@ -120,9 +120,8 @@
          <a id="admin-control-link" href="control.html" class="nav-link btn btn-warning me-2 d-none">Admin</a>
        </div>
        <div class="d-flex ms-auto mt-2 mt-lg-0 align-items-center gap-2">
-          <a id="open-original" class="btn btn-outline-light btn-sm d-none" target="_blank" rel="noopener noreferrer">Open original</a>
          <span id="user-name" class="navbar-text me-1"></span>
-          <button id="log-off" class="btn btn-danger btn-sm">Déconnexion</button>
+          <button id="log-off" class="btn btn-danger">Déconnexion</button>
        </div>
      </div>
    </div>