diff options
Diffstat (limited to 'packages/meshbay-hub/src/meshbay_hub/static/video-app.js')
| -rw-r--r-- | packages/meshbay-hub/src/meshbay_hub/static/video-app.js | 83 |
1 files changed, 17 insertions, 66 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 50fbcf6..5222afb 100644 --- a/packages/meshbay-hub/src/meshbay_hub/static/video-app.js +++ b/packages/meshbay-hub/src/meshbay_hub/static/video-app.js @@ -484,7 +484,7 @@ function TmdbSearchOverlay({ } function VideoDetailModal({ - title, meta, repEntry, show, files, transportRef, gekRef, onClose, onPlay, isNodeAdmin, + title, meta, repEntry, show, transportRef, gekRef, onClose, onPlay, isNodeAdmin, }) { const confident = Boolean(meta && meta.confidence && meta.tmdb_id); const [searching, setSearching] = useState(false); @@ -568,27 +568,12 @@ function VideoDetailModal({ <${SeasonTabs} seasons=${show.seasons} selected=${selectedSeason} onSelect=${setSelectedSeason} /> `} - ${!show && (!files || files.length <= 1) && html` + ${!show && 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) @@ -683,35 +668,7 @@ function PosterGrid({ movies, shows, transportRef, gekRef, onPreview, tmdbEnable }); }, [shows, metaByGroup]); - // 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 openDetail = (title, repEntry, show) => setDetail({ title, repEntry, show }); const detailTRef = detail && detail.repEntry._tRef ? detail.repEntry._tRef : transportRef; const detailGRef = detail && detail.repEntry._gRef ? detail.repEntry._gRef : gekRef; const detailMeta = useMediaMeta( @@ -720,27 +677,21 @@ function PosterGrid({ movies, shows, transportRef, gekRef, onPreview, tmdbEnable return html` <div class="video-grid"> - ${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} + ${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}`} transportRef=${transportRef} gekRef=${gekRef} - onOpen=${() => (straightToPlayer - ? onPreview(repEntry) - : openDetail(m.title, repEntry, null, m.files))} /> + 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))} /> </${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 @@ -772,7 +723,7 @@ function PosterGrid({ movies, shows, transportRef, gekRef, onPreview, tmdbEnable </div> ${detail && html` <${VideoDetailModal} title=${detail.title} meta=${detailMeta} - repEntry=${detail.repEntry} show=${detail.show} files=${detail.files} + repEntry=${detail.repEntry} show=${detail.show} transportRef=${detailTRef} gekRef=${detailGRef} isNodeAdmin=${isNodeAdmin} onClose=${() => setDetail(null)} onPlay=${(entry) => { setDetail(null); onPreview(entry); }} /> |