Merge branch 'feat/videos-matching-v8-v13'

1 files changed, 88 insertions, 20 deletions

diff --git a/packages/meshbay-hub/src/meshbay_hub/static/video-app.js b/packages/meshbay-hub/src/meshbay_hub/static/video-app.js
index f73def0..6d13e27 100644
--- a/packages/meshbay-hub/src/meshbay_hub/static/video-app.js
+++ b/packages/meshbay-hub/src/meshbay_hub/static/video-app.js
@@ -478,12 +478,26 @@ function TmdbSearchOverlay({
 }
 
 function VideoDetailModal({
-  title, meta, repEntry, show, transportRef, gekRef, onClose, onPlay, isNodeAdmin,
+  title, meta, repEntry, show, files, transportRef, gekRef, onClose, onPlay, isNodeAdmin,
 }) {
   const confident = Boolean(meta && meta.confidence && meta.tmdb_id);
   const [searching, setSearching] = useState(false);
+  const [rematching, setRematching] = useState(false);
   const mediaType = show ? 'tv' : 'movie';
 
+  // §10.1/V13: drop this file's cached match on the node and let it
+  // re-resolve with the current matcher — the one-click alternative to the
+  // full search-and-pick flow above.
+  const doRematch = useCallback(async () => {
+    if (rematching) return;
+    setRematching(true);
+    try {
+      await transportRef.current.rematchTmdbMatch(repEntry.id, buildSignFn(transportRef));
+      bumpMediaMetaGeneration();
+    } catch { /* leave the current match in place */ }
+    setRematching(false);
+  }, [rematching, repEntry, transportRef]);
+
   // Reset whenever a different file/show is opened in this same modal
   // instance — repEntry/show change identity, selectedSeason must not
   // silently keep pointing at whatever the previous show's season 4 was.
@@ -535,20 +549,40 @@ function VideoDetailModal({
             `}
           `}
           ${isNodeAdmin && html`
-            <button class="admin-btn video-fix-match" onClick=${() => setSearching(true)}>
-              ${t('video.fix_match')}
-            </button>
+            <div class="video-admin-actions">
+              <button class="admin-btn video-fix-match" onClick=${() => setSearching(true)}>
+                ${t('video.fix_match')}
+              </button>
+              <button class="admin-btn" onClick=${doRematch} disabled=${rematching}>
+                ${rematching ? html`<span class="spinner"></span>` : t('video.rematch_one')}
+              </button>
+            </div>
           `}
           ${showMultiSeason && html`
             <${SeasonTabs} seasons=${show.seasons} selected=${selectedSeason}
               onSelect=${setSelectedSeason} />
           `}
-          ${!show && html`
+          ${!show && (!files || files.length <= 1) && html`
             <button class="admin-btn" onClick=${() => onPlay(repEntry)}>
               <${Icon} name="play" /> ${t('group.play')}
               ${repEntry.duration ? ` (${formatDuration(repEntry.duration)})` : ''}
             </button>
           `}
+          ${!show && files && files.length > 1 && html`
+            <div class="video-version-list">
+              ${[...files]
+                .sort((a, b) => (b.height || 0) - (a.height || 0) || (b.size || 0) - (a.size || 0))
+                .map((f) => html`
+                <button class="video-episode-row" key=${f.id} onClick=${() => onPlay(f)}>
+                  <${Icon} name="play" />
+                  <span class="video-episode-label">
+                    ${[formatResolution(f.width, f.height), formatDuration(f.duration),
+                       formatSize(f.size)].filter(Boolean).join(' · ')}
+                  </span>
+                </button>
+              `)}
+            </div>
+          `}
           ${show && html`
             <div class="video-season-list">
               ${(showMultiSeason ? show.seasons.filter((s) => s.season === selectedSeason) : show.seasons)
@@ -643,28 +677,62 @@ function PosterGrid({ movies, shows, transportRef, gekRef, onPreview, tmdbEnable
     });
   }, [shows, metaByGroup]);
 
-  const openDetail = (title, repEntry, show) => setDetail({ title, repEntry, show });
+  // The movie counterpart of mergedShows (§10.1/V12): two files that TMDB
+  // resolves to the same id — the usual case being one film present at two
+  // resolutions, or the same rip in two folders — collapse to one card
+  // whose detail modal lists the versions. Same keying discipline as
+  // mergedShows: the first constituent's id is stable and unique, so an
+  // unmerged movie keeps the exact key its card already had and a merge
+  // updates props instead of remounting (which would throw away an
+  // already-resolved poster).
+  const mergedMovies = useMemo(() => {
+    const byTmdbId = new Map();
+    const standalone = [];
+    for (const e of movies) {
+      const meta = metaByGroup[`movie:${e.id}`];
+      const tmdbId = meta && meta.confidence && meta.tmdb_id;
+      if (tmdbId) {
+        if (!byTmdbId.has(tmdbId)) byTmdbId.set(tmdbId, []);
+        byTmdbId.get(tmdbId).push(e);
+      } else {
+        standalone.push([e]);
+      }
+    }
+    return [...byTmdbId.values(), ...standalone].map((files) => ({
+      key: `movie:${files[0].id}`,
+      title: files[0].display_title || files[0].name,
+      files,
+    }));
+  }, [movies, metaByGroup]);
+
+  const openDetail = (title, repEntry, show, files) => setDetail({ title, repEntry, show, files });
   const detailTRef = detail && detail.repEntry._tRef ? detail.repEntry._tRef : transportRef;
   const detailGRef = detail && detail.repEntry._gRef ? detail.repEntry._gRef : gekRef;
   const detailMeta = useMediaMeta(detailTRef, detail ? detail.repEntry.id : null, !!detail);
 
   return html`
     <div class="video-grid">
-      ${movies.map((e) => html`
-        <${LazyTile} key=${e.id}>
-          <${PosterCard} title=${e.display_title || e.name}
-            subtitle=${formatDuration(e.duration)} repEntry=${e}
-            groupKey=${`movie:${e.id}`}
+      ${mergedMovies.map((m) => {
+        const repEntry = m.files.find((e) => e.thumb_hash) || m.files[0];
+        const subtitle = m.files.length > 1
+          ? t('video.versions', { n: m.files.length })
+          : formatDuration(repEntry.duration);
+        // With TMDB off and only one file there is nothing the detail modal
+        // would add for a movie (no overview, no season list) — straight to
+        // the player. More than one file always needs the version picker.
+        const straightToPlayer = !tmdbEnabled && m.files.length === 1;
+        return html`
+        <${LazyTile} key=${m.key}>
+          <${PosterCard} title=${m.title}
+            subtitle=${subtitle} repEntry=${repEntry}
+            groupKey=${`movie:${m.files[0].id}`}
+            onMetaResolved=${handleMetaResolved}
             transportRef=${transportRef} gekRef=${gekRef}
-            onOpen=${() => (tmdbEnabled
-              // With TMDB off there is nothing the detail modal would show
-              // for a movie (no overview, no season list to pick from,
-              // unlike a show) — so it would just be an extra click in
-              // front of a Play button. Straight to the player instead.
-              ? openDetail(e.display_title || e.name, e, null)
-              : onPreview(e))} />
+            onOpen=${() => (straightToPlayer
+              ? onPreview(repEntry)
+              : openDetail(m.title, repEntry, null, m.files))} />
         </${LazyTile}>
-      `)}
+      `; })}
       ${mergedShows.map((s) => {
         // Prefer an episode that actually has a thumbnail over blindly
         // episodes[0]: if that specific file's enrichment hasn't produced
@@ -696,7 +764,7 @@ function PosterGrid({ movies, shows, transportRef, gekRef, onPreview, tmdbEnable
     </div>
     ${detail && html`
       <${VideoDetailModal} title=${detail.title} meta=${detailMeta}
-        repEntry=${detail.repEntry} show=${detail.show}
+        repEntry=${detail.repEntry} show=${detail.show} files=${detail.files}
         transportRef=${detailTRef} gekRef=${detailGRef} isNodeAdmin=${isNodeAdmin}
         onClose=${() => setDetail(null)}
         onPlay=${(entry) => { setDetail(null); onPreview(entry); }} />