>;
+
+function renderEmptyLibraryOverview(): string {
+ return `
+
+
+
+ Libraries
+ ${state.libraries.length}
+
+
+ Items
+ ${topLevelLibraryItems().length}
+
+
+ Status
+ ${state.libraries.some((entry) => entry.status === 'never_scanned') ? 'Pending scans' : 'Ready'}
+
+
+ `;
+}
+
+function renderLibraryRefreshStatusTag(library: MediaLibrary, activeRefreshProgress: MetadataRefreshProgress | undefined, stalePending: number): string {
+ if (activeRefreshProgress) {
+ return `Refreshing metadata ${activeRefreshProgress.completed}/${activeRefreshProgress.total} `;
+ }
+
+ return stalePending > 0
+ ? `Pending metadata ${library.metadata_refresh_completed}/${library.metadata_refresh_total} `
+ : '';
+}
+
+function libraryStatusTagClass(status: string): string {
+ if (status === 'available') {
+ return 'success';
+ }
+ if (status === 'never_scanned') {
+ return 'warning';
+ }
+ return '';
+}
+
+function renderMetadataRefreshNote(activeRefreshProgress: MetadataRefreshProgress | undefined): string {
+ const metadataRefreshFailedSuffix = activeRefreshProgress?.failed
+ ? ` (${activeRefreshProgress.failed} failed)`
+ : '';
+ return activeRefreshProgress
+ ? `Metadata refresh progress: ${activeRefreshProgress.completed}/${activeRefreshProgress.total}${metadataRefreshFailedSuffix}. Artwork and item cards update automatically as each item completes.
`
+ : '';
+}
+
+function renderStalePendingNote(stalePending: number): string {
+ const stalePendingVerb = stalePending === 1 ? ' is' : 's are';
+ return stalePending > 0
+ ? `${stalePending} item${stalePendingVerb} still marked pending without an active refresh worker. Use refresh metadata to resume the library refresh.
`
+ : '';
+}
+
+export function renderLibraryOverview(): string {
+ const library = activeLibrary();
+ if (!library) {
+ return renderEmptyLibraryOverview();
+ }
+
+ const activeRefreshProgress = metadataRefreshActivityProgressForLibrary(library.id);
+ const stalePending = Math.max(0, library.metadata_refresh_pending - activeLibraryPendingRefreshCount(library.id));
+ const scanPending = hasActiveLibraryScan(library.id);
+ const refreshStatusTag = renderLibraryRefreshStatusTag(library, activeRefreshProgress, stalePending);
+ const metadataRefreshNote = renderMetadataRefreshNote(activeRefreshProgress);
+ const stalePendingNote = renderStalePendingNote(stalePending);
+
+ return `
+
+
+
+
+ Top-level items
+ ${topLevelLibraryItems().length}
+
+
+ Video files
+ ${library.video_files}
+
+
+ Folders
+ ${library.paths.length}
+
+
+ Last scanned
+ ${escapeHtml(formatTimestamp(library.last_scanned_at))}
+
+
${escapeHtml(library.error)}
` : ''}
+ ${library.status === 'never_scanned' ? 'This library has not been scanned yet. It will populate after the next catalog scan starts.
' : ''}
+ ${metadataRefreshNote}
+ ${stalePendingNote}
+
+ `;
+}
+
+export function renderLibraryTab(): string {
+ const items = filteredTopLevelLibraryItems();
+ const library = activeLibrary();
+ const isSpecificLibrary = state.route.page === 'home' && typeof state.route.libraryId === 'number';
+ const browseFilterKind = state.browseFilter ? browseFilterKindLabel(state.browseFilter.kind) : '';
+
+ if (!items.length) {
+ if (state.libraryItemsLoading) {
+ return 'Loading library items…
';
+ }
+
+ if (state.browseFilter) {
+ return `No items matched the current ${escapeHtml(state.browseFilter.kind)} filter.
`;
+ }
+
+ if (library?.status === 'never_scanned') {
+ return 'This library has not been scanned yet. The show, season, and episode hierarchy will appear after the first scan completes.
';
+ }
+
+ if (library?.status && library.status !== 'available') {
+ return `This library is not ready yet: ${escapeHtml(libraryStatusLabel(library.status))}.
`;
+ }
+
+ return 'No browseable items are available yet for this library.
';
+ }
+
+ return `
+
+
+ ${state.browseFilter ? `
+
+ ${escapeHtml(browseFilterKind)}
+ ${escapeHtml(state.browseFilter.label)}
+ ${renderButtonContent('Clear filter', 'x')}
+
+ ` : ''}
+ ${items.map(renderItemCard).join('')}
+
+ `;
+}
+
+export function renderCollectionsTab(): string {
+ const collections = collectionSummaries();
+ if (!collections.length) {
+ return 'No linked collection data is available yet for this library.
';
+ }
+
+ return `
+
+ ${collections.map((collection) => {
+ const posterUrl = collection.artwork_url ?? collection.backdrop_url;
+ return `
+
+
+
+ ${renderIcon('layers', 'card-icon')}
+ ${collection.item_count} title${collection.item_count === 1 ? '' : 's'}
+
+
+ ${escapeHtml(collection.name)}
+
+ `;
+ }).join('')}
+
+ `;
+}
+
+export function renderPlaylistsTab(): string {
+ return `
+
+
+
+ Playlist creation is planned. Items will appear here when playlists are available.
+
+
+ `;
+}
+
+export function renderCategoriesTab(): string {
+ const categories = categorySummaries();
+ if (!categories.length) {
+ return 'No genre metadata is available yet for the current library.
';
+ }
+
+ return `
+
+ ${categories.map((category) => `
+
+
+ ${escapeHtml(category.items.slice(0, 3).map((item) => item.display_title).join(' · ') || 'No titles yet')}
+
+ `).join('')}
+
+ `;
+}
+
+export function renderHomeTabContent(): string {
+ if (state.route.page === 'browse-detail') {
+ return renderBrowseDetailPage();
+ }
+
+ if (state.browseFilter) {
+ return renderBrowseFilterDetail();
+ }
+
+ if (state.showFullSearchResults && state.searchQuery.trim()) {
+ return renderSearchResults();
+ }
+
+ switch (state.homeTab) {
+ case 'library':
+ return renderLibraryTab();
+ case 'collections':
+ return renderCollectionsTab();
+ case 'playlists':
+ return renderPlaylistsTab();
+ case 'categories':
+ return renderCategoriesTab();
+ default:
+ return renderShelfStack();
+ }
+}
+
+export function renderHomePage(): string {
+ if (state.route.page === 'browse-detail') {
+ return `
+ ${renderHomeNavbar()}
+ ${renderBrowseDetailPage()}
+ `;
+ }
+
+ return `
+ ${renderHomeNavbar()}
+ ${renderHomeFeature()}
+ ${renderHomeTabContent()}
+ `;
+}
+
+export function renderSearchPopover(): string {
+ if (!state.searchQuery.trim() || state.showFullSearchResults) {
+ return '';
+ }
+
+ if (!state.searchResults.length) {
+ return 'No library content matched the current search.
+
+
+ ${state.searchResults.slice(0, 8).map((result) => renderSearchResultRow(result, true)).join('')}
+
+
${renderIcon('folder-sync')}
+ ${renderIcon('database-zap')}
+ `
+ : '';
+
+ return `
+
+ `;
+}
diff --git a/crates/client-web/src/app/input.ts b/crates/client-web/src/app/input.ts
new file mode 100644
index 00000000..07963d4f
--- /dev/null
+++ b/crates/client-web/src/app/input.ts
@@ -0,0 +1,80 @@
+import type { AppState } from './types';
+
+const activeGamepadButtons = new Set();
+
+function visibleFocusableElements(): HTMLElement[] {
+ return Array.from(
+ document.querySelectorAll(
+ 'button:not(:disabled), a[href], input:not(:disabled), select:not(:disabled), textarea:not(:disabled), [tabindex]:not([tabindex="-1"])',
+ ),
+ ).filter((element) => element.offsetParent !== null);
+}
+
+function moveFocus(direction: 1 | -1): void {
+ const focusable = visibleFocusableElements();
+ if (!focusable.length) {
+ return;
+ }
+ const currentIndex = Math.max(0, focusable.indexOf(document.activeElement as HTMLElement));
+ focusable[(currentIndex + direction + focusable.length) % focusable.length]?.focus();
+}
+
+function activateFocusedElement(): void {
+ const focused = document.activeElement as HTMLElement | null;
+ if (focused?.matches('button, a[href], input, select, textarea')) {
+ focused.click();
+ }
+}
+
+function pollGamepads(): void {
+ const gamepads = navigator.getGamepads?.() ?? [];
+ gamepads.forEach((gamepad) => {
+ if (!gamepad) {
+ return;
+ }
+ const actions: Array<[string, boolean, () => void]> = [
+ ['up', Boolean(gamepad.buttons[12]?.pressed) || gamepad.axes[1] < -0.65, () => moveFocus(-1)],
+ ['down', Boolean(gamepad.buttons[13]?.pressed) || gamepad.axes[1] > 0.65, () => moveFocus(1)],
+ ['left', Boolean(gamepad.buttons[14]?.pressed) || gamepad.axes[0] < -0.65, () => moveFocus(-1)],
+ ['right', Boolean(gamepad.buttons[15]?.pressed) || gamepad.axes[0] > 0.65, () => moveFocus(1)],
+ ['activate', Boolean(gamepad.buttons[0]?.pressed), activateFocusedElement],
+ ['back', Boolean(gamepad.buttons[1]?.pressed), () => globalThis.history.back()],
+ ];
+ actions.forEach(([name, pressed, action]) => {
+ const key = `${gamepad.index}:${name}`;
+ if (pressed && !activeGamepadButtons.has(key)) {
+ activeGamepadButtons.add(key);
+ action();
+ } else if (!pressed) {
+ activeGamepadButtons.delete(key);
+ }
+ });
+ });
+ globalThis.requestAnimationFrame(pollGamepads);
+}
+
+/** Binds global keyboard and gamepad navigation controls for non-player screens. */
+export function bindGlobalInputHandlers(state: Pick): void {
+ globalThis.addEventListener('keydown', (event) => {
+ if (state.isPlayerOpen || state.activeTrailer || event.defaultPrevented) {
+ return;
+ }
+ if (!['ArrowRight', 'ArrowLeft', 'ArrowDown', 'ArrowUp'].includes(event.key)) {
+ return;
+ }
+ const target = event.target as HTMLElement | null;
+ if (target?.matches('input, textarea, select, [contenteditable="true"]')) {
+ return;
+ }
+ const focusable = visibleFocusableElements();
+ if (!focusable.length) {
+ return;
+ }
+ const currentIndex = Math.max(0, focusable.indexOf(document.activeElement as HTMLElement));
+ const direction = event.key === 'ArrowRight' || event.key === 'ArrowDown' ? 1 : -1;
+ focusable[(currentIndex + direction + focusable.length) % focusable.length]?.focus();
+ event.preventDefault();
+ });
+
+ globalThis.requestAnimationFrame(pollGamepads);
+}
diff --git a/crates/client-web/src/app/itemPersonView.ts b/crates/client-web/src/app/itemPersonView.ts
new file mode 100644
index 00000000..53cb9c27
--- /dev/null
+++ b/crates/client-web/src/app/itemPersonView.ts
@@ -0,0 +1,1095 @@
+/** Renders item detail, metadata search, person detail, and credit trays. */
+import type {
+ ItemMetadataMatch,
+ ItemMetadataPerson,
+ MediaItemDetail,
+ MediaItemExtra,
+ MediaItemSummary,
+ MediaPlaybackTarget,
+ MetadataPersonItemCredit,
+ MetadataProviderStatus,
+} from '../api';
+import { getArtworkUrl, getPersonImageUrl, resolveApiUrl } from '../api';
+import { escapeHtml, formatBitRate, formatDuration, formatFileSize, formatTimestamp } from './format';
+import { normalizedMetadataLanguages } from './formUtils';
+import { extractYouTubeVideoId } from './youtube';
+import { mediaExtraDurationLabel, mediaExtraTitle, mediaExtraTypeLabel } from './mediaExtras';
+import { currentThemeSongYouTubeTarget, currentTrailerOptions } from './mediaTargets';
+import { itemHasActiveMetadataRefresh, itemIsMetadataPending } from './activities';
+import { resumablePlaybackPositionMs } from './playbackProgress';
+import { providerAttributionLogo, providerDisplayName } from './providers';
+import { state } from './state';
+import type { PersonCreditGroup, TrailerOption } from './types';
+import {
+ activeLibrary,
+ activeLibrarySettings,
+ backNavigationTarget,
+ canManuallyLinkMetadata,
+ selectedItemCollectionRails,
+} from './selectors';
+import {
+ renderButtonContent,
+ renderCollapsibleText,
+ renderIcon,
+} from './ui';
+import { missingItemDetailBadgeMarkup, playbackDetailBadgeMarkup, renderItemCard, renderPlaybackTargetButton } from './homeView';
+
+export function renderMetadataSearchResults(): string {
+ const selectedItem = state.selectedItem;
+ if (!selectedItem) {
+ return '';
+ }
+
+ if (!state.metadataSearchResults.length) {
+ return 'Search metadata providers to link rich metadata and artwork.
';
+ }
+
+ return state.metadataSearchResults
+ .map((result) => `
+
+ ${result.artwork_url ? `
+
${escapeHtml(result.title)}
+
${escapeHtml(result.overview ?? 'No overview available.')}
+
+ ${renderMetadataSearchProviderAttribution(result.provider_id)}
+ ${result.release_year ?? 'Unknown year'}
+ ${escapeHtml(result.media_type)}
+ ${typeof result.score === 'number' ? `${Math.round(result.score * 100)}% match ` : ''}
+
+
+ ${renderButtonContent('Link', 'link-2')}
+
+
+ `)
+ .join('');
+}
+
+export function selectedItemMetadataProviderOptions(): MetadataProviderStatus[] {
+ const itemType = state.selectedItem?.item_type;
+ const libraryKind = activeLibrary()?.kind ?? libraryKindForItemType(itemType);
+ return (state.selectedItemMetadata?.providers ?? state.metadataProviders)
+ .filter((provider) => provider.role !== 'secondary')
+ .filter((provider) => provider.configured && provider.implemented)
+ .filter((provider) => !libraryKind || provider.supported_kinds.includes(libraryKind));
+}
+
+function libraryKindForItemType(itemType: string | undefined): string | undefined {
+ if (itemType === 'show') {
+ return 'shows';
+ }
+ if (itemType === 'movie') {
+ return 'movies';
+ }
+ return undefined;
+}
+
+export function defaultMetadataSearchProviderIds(): string[] {
+ const providers = selectedItemMetadataProviderOptions();
+ const providerIds = new Set(providers.map((provider) => provider.id));
+ const libraryProviderIds = activeLibrary()?.metadata_providers
+ ?? activeLibrarySettings()?.metadata_providers;
+ const selectedLibraryProviders = (libraryProviderIds ?? [])
+ .filter((providerId) => providerIds.has(providerId));
+ return libraryProviderIds ? selectedLibraryProviders : providers.map((provider) => provider.id);
+}
+
+export function selectedItemDefaultMetadataTitle(): string {
+ return state.selectedItem?.display_title.trim()
+ || state.selectedItemMetadata?.matches[0]?.title?.trim()
+ || '';
+}
+
+export function selectedItemDefaultMetadataYear(): string {
+ const year = state.selectedItem?.release_year ?? state.selectedItemMetadata?.matches[0]?.release_year;
+ return typeof year === 'number' ? String(year) : '';
+}
+
+export function defaultMetadataSearchLanguage(): string {
+ const library = activeLibrary();
+ const librarySettings = activeLibrarySettings();
+ const metadataLanguageMode = library?.metadata_language_mode ?? librarySettings?.metadata_language_mode;
+ const metadataLanguages = library?.metadata_languages ?? librarySettings?.metadata_languages;
+ if (metadataLanguageMode === 'manual') {
+ return normalizedMetadataLanguages(metadataLanguages)[0] ?? 'en-US';
+ }
+ return state.bootstrap?.current_user?.preferred_metadata_languages?.[0]
+ ?? state.metadataProviders.find((provider) => provider.configured)?.language
+ ?? 'en-US';
+}
+
+export function renderMetadataSearchProviderAttribution(providerId: string): string {
+ const label = providerDisplayName(providerId);
+ const logoUrl = providerAttributionLogo(providerId);
+ if (!logoUrl) {
+ return `${escapeHtml(label)} `;
+ }
+ return `
+ ${providers.map((provider) => `
+
+ ${escapeHtml(provider.display_name)}
+
+ `).join('')}
+
+ `;
+}
+
+export function renderLinkedMetadataSummary(): string {
+ const matches = state.selectedItemMetadata?.matches ?? [];
+ const linkedMatch = matches.find((match) => match.relation_kind === 'primary') ?? matches[0];
+ if (!linkedMatch) {
+ return 'No external metadata is linked yet.
';
+ }
+
+ const metadataRefreshPending = itemIsMetadataPending(state.selectedItem);
+ const metadataRefreshActive = itemHasActiveMetadataRefresh(state.selectedItem);
+ let refreshStateLabel = 'Up to date';
+ if (metadataRefreshActive) {
+ refreshStateLabel = 'Refreshing';
+ } else if (metadataRefreshPending || linkedMatch.refresh_state === 'pending') {
+ refreshStateLabel = 'Pending without worker';
+ } else if (linkedMatch.refresh_state === 'error') {
+ refreshStateLabel = 'Refresh failed';
+ }
+ let refreshStateClass = '';
+ if (metadataRefreshPending || linkedMatch.refresh_state === 'pending') {
+ refreshStateClass = 'warning';
+ } else if (linkedMatch.refresh_state === 'error') {
+ refreshStateClass = 'danger-tag';
+ }
+ const providersById = new Map(
+ (state.selectedItemMetadata?.providers ?? state.metadataProviders).map((provider) => [provider.id, provider]),
+ );
+ const contributingProviderIds = [
+ linkedMatch.provider_id,
+ ...matches.map((match) => match.provider_id).filter((providerId) => providerId !== linkedMatch.provider_id),
+ ].filter((providerId, index, providerIds) => providerIds.indexOf(providerId) === index);
+ const providerTags = contributingProviderIds
+ .map((providerId) => {
+ const className = providerId === linkedMatch.provider_id ? 'tag success' : 'tag';
+ return `${escapeHtml(providerId)} `;
+ })
+ .join('');
+ const attributions = contributingProviderIds
+ .map((providerId) => providersById.get(providerId))
+ .filter((provider): provider is MetadataProviderStatus => Boolean(provider?.attribution_text))
+ .map((provider) => {
+ const logoUrl = providerAttributionLogo(provider.id);
+ const logoMarkup = logoUrl ? `${logoMarkup}${escapeHtml(provider.attribution_text)} `;
+ })
+ .join('');
+
+ return `
+
+ ${providerTags}
+ ${escapeHtml(linkedMatch.media_type ?? 'linked')}
+ ${escapeHtml(refreshStateLabel)}
+ ${linkedMatch.release_year ? `${linkedMatch.release_year} ` : ''}
+ ${linkedMatch.locale_key ? `${escapeHtml(linkedMatch.locale_key)} ` : ''}
+
+ ${escapeHtml(linkedMatch.title ?? linkedMatch.external_id)}
+ Last refreshed ${escapeHtml(formatTimestamp(linkedMatch.last_refreshed_at ?? linkedMatch.updated_at))}
+ ${attributions}
+ ${linkedMatch.refresh_error ? `${escapeHtml(linkedMatch.refresh_error)} ` : ''}
+
+
+ `;
+}
+
+export function selectedItemPeople(): ItemMetadataPerson[] {
+ return state.selectedItemMetadata?.matches[0]?.people ?? [];
+}
+
+export function formatPersonDate(value?: string): string {
+ if (!value) {
+ return '';
+ }
+
+ const date = new Date(`${value}T00:00:00`);
+ if (Number.isNaN(date.getTime())) {
+ return value;
+ }
+
+ return date.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' });
+}
+
+export function personAgeLabel(birthday?: string, deathday?: string): string | undefined {
+ if (!birthday) {
+ return undefined;
+ }
+ const birthDate = new Date(`${birthday}T00:00:00`);
+ const endDate = deathday ? new Date(`${deathday}T00:00:00`) : new Date();
+ if (Number.isNaN(birthDate.getTime()) || Number.isNaN(endDate.getTime())) {
+ return undefined;
+ }
+ let age = endDate.getFullYear() - birthDate.getFullYear();
+ const birthdayThisYear = new Date(endDate.getFullYear(), birthDate.getMonth(), birthDate.getDate());
+ if (endDate < birthdayThisYear) {
+ age -= 1;
+ }
+ return deathday ? `${age} at death` : `${age} years old`;
+}
+
+export function renderPersonCredit(person: ItemMetadataPerson): string {
+ let imageUrl: string | undefined;
+ if (person.cached_image_path) {
+ imageUrl = getPersonImageUrl(person.person_id);
+ } else if (person.image_url) {
+ imageUrl = resolveApiUrl(person.image_url);
+ }
+ const subtitle = person.character_name || person.role || person.department || '';
+ return `
+
+
+ ${imageUrl ? '' : `${escapeHtml(person.name.slice(0, 1).toUpperCase())} `}
+
+ ${escapeHtml(person.name)}
+ ${subtitle ? `${escapeHtml(subtitle)} ` : ''}
+
+ `;
+}
+
+export function renderPeopleRail(): string {
+ const people = selectedItemPeople();
+ if (!people.length) {
+ return '';
+ }
+
+ return `
+
+
+
People
+ ${people.length} credit${people.length === 1 ? '' : 's'}
+
+
+
${renderIcon('chevron-left')}
+
+ ${people.map(renderPersonCredit).join('')}
+
+
${renderIcon('chevron-right')}
+
+ `;
+}
+
+export function selectedItemExtras(): MediaItemExtra[] {
+ return (state.selectedItem?.extras ?? []).filter((extra) => Boolean(extra.url?.trim()));
+}
+
+export function mediaExtraThumbnailUrl(extra: MediaItemExtra): string | undefined {
+ if (extra.thumbnail_url?.trim()) {
+ return resolveApiUrl(extra.thumbnail_url.trim());
+ }
+
+ const videoId = extractYouTubeVideoId(extra.url);
+ return videoId ? `https://i.ytimg.com/vi/${videoId}/hqdefault.jpg` : undefined;
+}
+
+export function renderMediaExtraCard(extra: MediaItemExtra, index: number): string {
+ const title = mediaExtraTitle(extra);
+ const typeLabel = mediaExtraTypeLabel(extra.extra_type);
+ const durationLabel = mediaExtraDurationLabel(extra);
+ const thumbnailUrl = mediaExtraThumbnailUrl(extra);
+ const placeholderIcon = extra.extra_type === 'theme_song' ? 'music' : 'play';
+ const thumbnailMarkup = thumbnailUrl
+ ? `
+
+
+
${escapeHtml(rail.collection.name)}
+
Also in this collection
+
+
${renderButtonContent('View collection', 'arrow-right')}
+
+
${renderIcon('chevron-left')}
+
${rail.items.map(renderItemCard).join('')}
+
${renderIcon('chevron-right')}
+
+ `;
+ })
+ .join('');
+}
+
+export function itemSortKey(item: MediaItemSummary): string {
+ const season = typeof item.season_number === 'number' ? String(item.season_number).padStart(5, '0') : '99999';
+ const episode = typeof item.episode_number === 'number' ? String(item.episode_number).padStart(5, '0') : '99999';
+ return `${season}:${episode}:${item.display_title.toLocaleLowerCase()}`;
+}
+
+export function compareMediaItems(left: MediaItemSummary, right: MediaItemSummary): number {
+ return itemSortKey(left).localeCompare(itemSortKey(right));
+}
+
+export function personCreditRootItem(entry: MetadataPersonItemCredit): MediaItemSummary {
+ return entry.hierarchy.find((item) => item.item_type === 'show')
+ ?? entry.hierarchy[0]
+ ?? entry.item;
+}
+
+export function personCreditSeasonItem(entry: MetadataPersonItemCredit): MediaItemSummary | undefined {
+ if (entry.item.item_type === 'season') {
+ return entry.item;
+ }
+
+ if (entry.item.item_type !== 'episode') {
+ return undefined;
+ }
+
+ return [...entry.hierarchy].reverse().find((item) => item.item_type === 'season');
+}
+
+export function personCreditGroups(credits: MetadataPersonItemCredit[]): PersonCreditGroup[] {
+ const groupsByRootId = new Map();
+
+ credits.forEach((entry) => {
+ const root = personCreditRootItem(entry);
+ if (!groupsByRootId.has(root.id)) {
+ groupsByRootId.set(root.id, { root, seasons: [] });
+ }
+
+ const group = groupsByRootId.get(root.id)!;
+ const season = personCreditSeasonItem(entry);
+ if (!season) {
+ return;
+ }
+
+ let seasonGroup = group.seasons.find((candidate) => candidate.season.id === season.id);
+ if (!seasonGroup) {
+ seasonGroup = { season, episodes: [] };
+ group.seasons.push(seasonGroup);
+ }
+
+ if (entry.item.item_type === 'episode' && !seasonGroup.episodes.some((episode) => episode.id === entry.item.id)) {
+ seasonGroup.episodes.push(entry.item);
+ }
+ });
+
+ const groups = [...groupsByRootId.values()]
+ .map((group) => ({
+ ...group,
+ seasons: sortedPersonCreditSeasons(group),
+ }));
+ groups.sort((left, right) => left.root.display_title.localeCompare(right.root.display_title));
+ return groups;
+}
+
+function sortedPersonCreditSeasons(group: PersonCreditGroup): PersonCreditGroup['seasons'] {
+ const seasons = group.seasons.map((seasonGroup) => {
+ const episodes = [...seasonGroup.episodes];
+ episodes.sort(compareMediaItems);
+ return {
+ ...seasonGroup,
+ episodes,
+ };
+ });
+ seasons.sort((left, right) => compareMediaItems(left.season, right.season));
+ return seasons;
+}
+
+function countLabel(count: number, singular: string): string {
+ if (count <= 0) {
+ return '';
+ }
+ return `${count} ${singular}${count === 1 ? '' : 's'}`;
+}
+
+export function renderPersonCreditGroup(group: PersonCreditGroup): string {
+ const seasonCount = group.seasons.length;
+ const episodeCount = group.seasons.reduce((total, season) => total + season.episodes.length, 0);
+ const traySummary = [
+ countLabel(seasonCount, 'season'),
+ countLabel(episodeCount, 'episode'),
+ ].filter(Boolean).join(' · ');
+ const seasonTrayMarkup = group.seasons.length ? renderPersonSeasonCreditTray(group, traySummary) : '';
+
+ return `
+
+ ${renderItemCard(group.root)}
+
+ ${seasonTrayMarkup}
+ `;
+}
+
+function renderPersonSeasonCreditTray(group: PersonCreditGroup, traySummary: string): string {
+ return `
+
+
+ ${escapeHtml(traySummary || 'Credits')}
+ ${renderIcon('x')}
+
+
+ ${group.seasons.map((seasonGroup) => {
+ const episodeTrayMarkup = seasonGroup.episodes.length ? renderPersonEpisodeCreditTray(seasonGroup) : '';
+ return `
+
+ ${renderItemCard(seasonGroup.season)}
+
+ ${episodeTrayMarkup}
+ `;
+ }).join('')}
+
+
+
+ ${escapeHtml(countLabel(seasonGroup.episodes.length, 'episode'))}
+ ${renderIcon('x')}
+
+
+ ${seasonGroup.episodes.map(renderItemCard).join('')}
+
+
${escapeHtml(title)} `)
+ .join('');
+ const knownForMarkup = response.person.known_for.length ? `${knownForTags}
` : '';
+
+ return `
+
+
+
+ ${personImageUrl ? `
` : `
${escapeHtml(response.person.name.slice(0, 1).toUpperCase())} `}
+
+
${escapeHtml(response.person.name)}
+
+ ${escapeHtml(providerDisplayName(response.person.provider_id))}
+ ${credits.length} item${credits.length === 1 ? '' : 's'}
+ ${response.person.birthday ? `${escapeHtml([formatPersonDate(response.person.birthday), age].filter(Boolean).join(' · '))} ` : ''}
+ ${response.person.gender ? `${escapeHtml(response.person.gender)} ` : ''}
+
+ ${response.person.birth_place ? `
${escapeHtml(response.person.birth_place)}
` : ''}
+ ${response.person.biography ? renderCollapsibleText(response.person.biography, `person-biography:${response.person.id}`) : ''}
+ ${knownForMarkup}
+
+
${renderButtonContent('Back', 'arrow-left')}
+ ${response.person.profile_url ? `
Provider page ` : ''}
+
+
+
+
+
+
Credits
+ ${creditGroups.length} title${creditGroups.length === 1 ? '' : 's'}
+
+ ${credits.length
+ ? `${creditGroups.map(renderPersonCreditGroup).join('')}
`
+ : 'No linked items are stored for this person yet.
'}
+
+
+ `;
+}
+
+export function directGridChildren(grid: HTMLElement, selector: string): HTMLElement[] {
+ return Array.from(grid.children)
+ .filter((child): child is HTMLElement => child instanceof HTMLElement && child.matches(selector));
+}
+
+export function directGridChildByData(grid: HTMLElement, selector: string, key: string, value: string | undefined): HTMLElement | undefined {
+ if (!value) {
+ return undefined;
+ }
+
+ return directGridChildren(grid, selector).find((child) => child.dataset[key] === value);
+}
+
+export function rowIndexForElement(element: HTMLElement, rowTops: number[]): number {
+ const rowIndex = rowTops.findIndex((top) => Math.abs(top - element.offsetTop) < 8);
+ return Math.max(rowIndex, 0);
+}
+
+export function activatePersonCreditTray(
+ grid: HTMLElement,
+ card: HTMLElement,
+ tray: HTMLElement,
+ cardSelector: string,
+ traySelector: string,
+): void {
+ if (card.classList.contains('is-active') && tray.classList.contains('is-active')) {
+ return;
+ }
+
+ const cards = directGridChildren(grid, cardSelector);
+ const trays = directGridChildren(grid, traySelector);
+
+ trays.forEach((entry) => {
+ entry.classList.remove('is-active');
+ entry.style.removeProperty('order');
+ });
+ cards.forEach((entry) => {
+ entry.classList.remove('is-active');
+ entry.style.removeProperty('order');
+ });
+
+ const rowTops = [...new Set(cards
+ .map((entry) => entry.offsetTop)
+ .sort((left, right) => left - right)
+ .filter((top, index, values) => index === 0 || Math.abs(top - values[index - 1]) >= 8))];
+
+ cards.forEach((entry) => {
+ entry.style.order = String(rowIndexForElement(entry, rowTops) * 2);
+ });
+
+ card.classList.add('is-active');
+ tray.classList.add('is-active');
+ tray.style.order = String(rowIndexForElement(card, rowTops) * 2 + 1);
+}
+
+export function collapsePersonCreditTrays(grid: HTMLElement, cardSelector: string, traySelector: string): void {
+ directGridChildren(grid, cardSelector).forEach((entry) => {
+ entry.classList.remove('is-active');
+ entry.style.removeProperty('order');
+ });
+ directGridChildren(grid, traySelector).forEach((entry) => {
+ entry.classList.remove('is-active');
+ entry.style.removeProperty('order');
+ });
+}
+
+export function bindPersonCreditTrays(): void {
+ const grid = document.querySelector('.person-credit-grid');
+ if (!grid) {
+ return;
+ }
+
+ const activateRootTray = (target: EventTarget | null): void => {
+ const card = target instanceof Element ? target.closest('.person-credit-card') : null;
+ if (card?.parentElement !== grid) {
+ return;
+ }
+
+ const tray = directGridChildByData(grid, '.person-season-tray', 'personCreditId', card.dataset.personCreditId);
+ if (!tray) {
+ return;
+ }
+
+ activatePersonCreditTray(grid, card, tray, '.person-credit-card', '.person-season-tray');
+ };
+
+ const activateSeasonTray = (target: EventTarget | null): void => {
+ const card = target instanceof Element ? target.closest('.person-season-credit-card') : null;
+ const seasonGrid = card?.parentElement;
+ if (!card || !(seasonGrid instanceof HTMLElement) || !seasonGrid.classList.contains('person-season-credit-grid')) {
+ return;
+ }
+
+ const tray = directGridChildByData(seasonGrid, '.person-episode-tray', 'personSeasonCreditId', card.dataset.personSeasonCreditId);
+ if (!tray) {
+ return;
+ }
+
+ activatePersonCreditTray(seasonGrid, card, tray, '.person-season-credit-card', '.person-episode-tray');
+ };
+
+ grid.addEventListener('mouseover', (event) => {
+ activateRootTray(event.target);
+ activateSeasonTray(event.target);
+ });
+ grid.addEventListener('focusin', (event) => {
+ activateRootTray(event.target);
+ activateSeasonTray(event.target);
+ });
+ grid.addEventListener('click', (event) => {
+ const target = event.target instanceof Element ? event.target : null;
+ const rootCloseButton = target?.closest('[data-close-person-credit-tray]');
+ if (rootCloseButton) {
+ event.preventDefault();
+ event.stopPropagation();
+ collapsePersonCreditTrays(grid, '.person-credit-card', '.person-season-tray');
+ return;
+ }
+
+ const seasonCloseButton = target?.closest('[data-close-person-season-credit-tray]');
+ const seasonGrid = seasonCloseButton?.closest('.person-season-credit-grid');
+ if (seasonCloseButton && seasonGrid) {
+ event.preventDefault();
+ event.stopPropagation();
+ collapsePersonCreditTrays(seasonGrid, '.person-season-credit-card', '.person-episode-tray');
+ }
+ });
+}
+
+function selectedItemPosterUrl(item: MediaItemDetail): string | undefined {
+ return item.poster_url
+ ? getArtworkUrl(item.id, 'poster', item.artwork_updated_at)
+ : undefined;
+}
+
+function selectedItemLogoUrl(item: MediaItemDetail): string | undefined {
+ return item.logo_url ? resolveApiUrl(item.logo_url) : undefined;
+}
+
+function selectedItemOverview(item: MediaItemDetail): string {
+ return item.overview
+ ?? state.selectedItemMetadata?.matches[0]?.overview
+ ?? 'No description is stored for this item yet.';
+}
+
+function selectedItemChildSectionTitle(item: MediaItemDetail): string {
+ if (item.item_type === 'show') {
+ return 'Seasons';
+ }
+
+ return item.item_type === 'season' ? 'Episodes' : 'Contained items';
+}
+
+function renderSelectedItemBreadcrumbs(item: MediaItemDetail): string {
+ if (!item.hierarchy.length) {
+ return '';
+ }
+
+ return `
+
+ ${item.hierarchy.map((hierarchyItem) => `
+ ${escapeHtml(hierarchyItem.display_title)}
+ `).join('/ ')}
+ /
+ ${escapeHtml(item.display_title)}
+
+ `;
+}
+
+function renderSelectedItemPoster(item: MediaItemDetail, posterUrl: string | undefined): string {
+ return posterUrl
+ ? `${escapeHtml(item.display_title.slice(0, 1).toUpperCase())} `;
+}
+
+function renderSelectedItemTitle(item: MediaItemDetail, logoUrl: string | undefined): string {
+ return logoUrl
+ ? `${escapeHtml(item.display_title)} `;
+}
+
+function renderSelectedItemHeroMeta(item: MediaItemDetail, genres: string[]): string {
+ const tags = [
+ missingItemDetailBadgeMarkup(item),
+ playbackDetailBadgeMarkup(item),
+ ];
+ if (item.release_year) {
+ tags.push(`${item.release_year} `);
+ }
+ if (item.content_rating) {
+ tags.push(`${escapeHtml(item.content_rating)} `);
+ }
+ if (typeof item.rating === 'number') {
+ tags.push(`${escapeHtml(item.rating.toFixed(1))} `);
+ }
+ tags.push(...genres.map((genre) => `${escapeHtml(genre)} `));
+
+ return `${tags.join('')}
`;
+}
+
+function renderResumeButton(item: MediaItemDetail, resumeMs: number): string {
+ if (!item.playable || resumeMs <= 0) {
+ return '';
+ }
+
+ const resumeLabel = `Resume ${formatDuration(resumeMs)}`;
+ return `${renderButtonContent(resumeLabel, 'play')} `;
+}
+
+function renderPrimaryPlayButton(item: MediaItemDetail, resumeMs: number): string {
+ if (!item.playable) {
+ return '';
+ }
+
+ const playButtonClass = resumeMs > 0 ? 'secondary-button' : '';
+ const playButtonLabel = resumeMs > 0 ? 'Start over' : 'Play now';
+ return `${renderButtonContent(playButtonLabel, 'play')} `;
+}
+
+function renderTrailerActionButton(preferredTrailer: TrailerOption | undefined, trailerButtonTitle: string): string {
+ return preferredTrailer
+ ? `${renderButtonContent('Play Trailer', 'play')} `
+ : '';
+}
+
+function renderThemeSongButton(themeSongOption: ReturnType): string {
+ return themeSongOption
+ ? `${renderButtonContent('Play Theme', 'volume-2')} `
+ : '';
+}
+
+interface SelectedItemActionsOptions {
+ item: MediaItemDetail;
+ resumeMs: number;
+ playbackTarget?: MediaPlaybackTarget;
+ restartPlaybackTarget?: MediaPlaybackTarget;
+ preferredTrailer?: TrailerOption;
+ themeSongOption?: ReturnType;
+ trailerButtonTitle: string;
+ backTarget: ReturnType;
+}
+
+function renderSelectedItemActions(options: SelectedItemActionsOptions): string {
+ const {
+ item,
+ resumeMs,
+ playbackTarget,
+ restartPlaybackTarget,
+ preferredTrailer,
+ themeSongOption,
+ trailerButtonTitle,
+ backTarget,
+ } = options;
+
+ return `
+
+ ${renderResumeButton(item, resumeMs)}
+ ${renderPrimaryPlayButton(item, resumeMs)}
+ ${playbackTarget ? renderPlaybackTargetButton(playbackTarget, false) : ''}
+ ${restartPlaybackTarget ? renderPlaybackTargetButton(restartPlaybackTarget, true) : ''}
+ ${renderTrailerActionButton(preferredTrailer, trailerButtonTitle)}
+ ${renderThemeSongButton(themeSongOption)}
+ ${renderButtonContent(backTarget.label, 'arrow-left')}
+
+ `;
+}
+
+function playableTarget(item: MediaItemDetail): MediaPlaybackTarget | undefined {
+ return item.playable ? undefined : item.playback_target ?? undefined;
+}
+
+function restartPlayableTarget(item: MediaItemDetail): MediaPlaybackTarget | undefined {
+ return item.playable ? undefined : item.restart_playback_target ?? undefined;
+}
+
+function renderTrailerPicker(trailerOptions: TrailerOption[], hasMultipleTrailers: boolean): string {
+ if (!hasMultipleTrailers || !state.isTrailerMenuOpen) {
+ return '';
+ }
+
+ return `
+
+
+
Choose a trailer
+ ${renderButtonContent('Close', 'x')}
+
+
+ ${trailerOptions.map((option, index) => `
+ ${escapeHtml(option.title)}
+ `).join('')}
+
+
+ `;
+}
+
+function selectedItemTechnicalFacts(item: MediaItemDetail): Array<{ label: string; value: string }> {
+ return [
+ { label: 'Duration', value: formatDuration(item.duration_ms) },
+ {
+ label: 'Format',
+ value: [item.container?.toUpperCase(), item.media_kind.toUpperCase()].filter(Boolean).join(' • ') || 'Unknown',
+ },
+ {
+ label: 'Codecs',
+ value: [item.video_codec, item.audio_codec].filter(Boolean).join(' / ') || 'Unknown',
+ },
+ {
+ label: 'Resolution',
+ value: item.width && item.height ? `${item.width}×${item.height}` : 'Unknown',
+ },
+ { label: 'Bitrate', value: formatBitRate(item.bit_rate) },
+ { label: 'Size', value: formatFileSize(item.file_size) },
+ ];
+}
+
+function renderSelectedItemFactList(item: MediaItemDetail): string {
+ return `
+
+ ${selectedItemTechnicalFacts(item).map((fact) => `
+
+ ${escapeHtml(fact.label)}
+ ${escapeHtml(fact.value)}
+
+ `).join('')}
+
+
+ ${renderSelectedItemPoster(item, posterUrl)}
+
+
+ ${renderSelectedItemTitle(item, logoUrl)}
+ ${item.tagline ? `
${escapeHtml(item.tagline)}
` : ''}
+ ${renderSelectedItemHeroMeta(item, genres)}
+ ${renderCollapsibleText(overview, `item-overview:${item.id}`)}
+ ${actionsMarkup}
+ ${trailerPickerMarkup}
+
${escapeHtml(state.selectedPlayback?.reason ?? 'Loading playback capabilities…')}
+ ${renderSelectedItemFactList(item)}
+
+ `;
+}
+
+function renderSelectedItemChildrenSection(item: MediaItemDetail): string {
+ if (!item.children.length) {
+ return '';
+ }
+
+ const childCountLabel = countLabel(item.children.length, 'item');
+ const childGridClass = item.item_type === 'season' ? 'season-episodes-grid' : '';
+ return `
+
+
+
${escapeHtml(selectedItemChildSectionTitle(item))}
+ ${childCountLabel}
+
+ ${item.children.map(renderItemCard).join('')}
+
+ `;
+}
+
+function renderMetadataRefreshButton(
+ supportsManualLinking: boolean,
+ linkedMatch: ItemMetadataMatch | undefined,
+ metadataRefreshActive: boolean,
+): string {
+ if (!supportsManualLinking) {
+ return '';
+ }
+
+ const refreshButtonDisabled = linkedMatch && !metadataRefreshActive ? '' : 'disabled';
+ const refreshButtonLabel = metadataRefreshActive ? 'Refreshing metadata' : 'Force refresh metadata';
+ return `${renderButtonContent(refreshButtonLabel, 'refresh-cw')} `;
+}
+
+function renderMetadataSearchPanel(supportsManualLinking: boolean): string {
+ if (!supportsManualLinking) {
+ return 'Season and episode metadata is inherited and refreshed automatically from the linked show.
';
+ }
+
+ return `
+
+ ${renderMetadataSearchResults()}
+ `;
+}
+
+function renderSelectedItemSupportGrid(
+ item: MediaItemDetail,
+ library: ReturnType,
+ supportsManualLinking: boolean,
+ metadataRefreshButtonMarkup: string,
+ metadataSearchPanel: string,
+): string {
+ return `
+
+
+
+
File and library
+
+
+
+ Library
+ ${escapeHtml(library?.name ?? 'Unknown')}
+
+
+ Folders
+ ${escapeHtml(String(library?.paths.length ?? 0))}
+
+
+ Source
+ ${escapeHtml(item.relative_path)}
+
+
+ Updated
+ ${escapeHtml(formatTimestamp(item.modified_at))}
+
+
+
+
+
+
${supportsManualLinking ? 'Link metadata' : 'Metadata'}
+ ${metadataRefreshButtonMarkup}
+
+ ${renderLinkedMetadataSummary()}
+ ${metadataSearchPanel}
+
+
+ `;
+}
+
+function renderSelectedItemPage(item: MediaItemDetail): string {
+ const trailerOptions = currentTrailerOptions();
+ const hasMultipleTrailers = trailerOptions.length > 1;
+ const supportsManualLinking = canManuallyLinkMetadata(item);
+ const linkedMatch = state.selectedItemMetadata?.matches[0];
+ const metadataRefreshActive = itemHasActiveMetadataRefresh(item);
+ const resumeMs = resumablePlaybackPositionMs(item);
+ const trailerButtonTitle = hasMultipleTrailers
+ ? 'Click to play the first trailer. Right-click or press and hold to choose another trailer.'
+ : 'Play Trailer';
+ const actionsMarkup = renderSelectedItemActions({
+ item,
+ resumeMs,
+ playbackTarget: playableTarget(item),
+ restartPlaybackTarget: restartPlayableTarget(item),
+ preferredTrailer: trailerOptions[0],
+ themeSongOption: currentThemeSongYouTubeTarget(),
+ trailerButtonTitle,
+ backTarget: backNavigationTarget(),
+ });
+ const metadataRefreshButtonMarkup = renderMetadataRefreshButton(supportsManualLinking, linkedMatch, metadataRefreshActive);
+
+ return `
+
+ ${renderSelectedItemBreadcrumbs(item)}
+ ${renderSelectedItemHero(
+ item,
+ selectedItemPosterUrl(item),
+ selectedItemLogoUrl(item),
+ selectedItemOverview(item),
+ item.genres.length ? item.genres : [],
+ actionsMarkup,
+ renderTrailerPicker(trailerOptions, hasMultipleTrailers),
+ )}
+
+ ${renderPeopleRail()}
+
+ ${renderItemExtrasRail()}
+
+ ${renderSelectedItemChildrenSection(item)}
+
+ ${renderSelectedItemCollectionRails()}
+
+ ${renderSelectedItemSupportGrid(
+ item,
+ state.libraries.find((entry) => entry.id === item.library_id),
+ supportsManualLinking,
+ metadataRefreshButtonMarkup,
+ renderMetadataSearchPanel(supportsManualLinking),
+ )}
+
+ `;
+}
+
+export function renderItemPage(): string {
+ if (!state.selectedItem) {
+ return '';
+ }
+
+ return renderSelectedItemPage(state.selectedItem);
+}
diff --git a/crates/client-web/src/app/mediaExtras.ts b/crates/client-web/src/app/mediaExtras.ts
new file mode 100644
index 00000000..c3079d78
--- /dev/null
+++ b/crates/client-web/src/app/mediaExtras.ts
@@ -0,0 +1,33 @@
+import type { MediaItemExtra } from '../api';
+import { formatMediaTime } from './format';
+import type { TrailerOption } from './types';
+
+/** Converts a media-extra type identifier into a display label. */
+export function mediaExtraTypeLabel(extraType: string): string {
+ return extraType
+ .split('_')
+ .filter(Boolean)
+ .map((part) => part.slice(0, 1).toUpperCase() + part.slice(1))
+ .join(' ') || 'Extra';
+}
+
+/** Returns the best title for an extra, falling back to its type label. */
+export function mediaExtraTitle(extra: MediaItemExtra): string {
+ return extra.title?.trim() || mediaExtraTypeLabel(extra.extra_type);
+}
+
+/** Formats an extra duration for display. */
+export function mediaExtraDurationLabel(extra: MediaItemExtra): string {
+ return typeof extra.duration_seconds === 'number' && extra.duration_seconds > 0
+ ? formatMediaTime(extra.duration_seconds)
+ : 'Unknown length';
+}
+
+/** Converts a trailer extra into the overlay player's trailer option shape. */
+export function mediaExtraToTrailerOption(extra: MediaItemExtra): TrailerOption {
+ return {
+ title: mediaExtraTitle(extra),
+ url: extra.url,
+ label: mediaExtraTypeLabel(extra.extra_type),
+ };
+}
diff --git a/crates/client-web/src/app/mediaTargets.ts b/crates/client-web/src/app/mediaTargets.ts
new file mode 100644
index 00000000..ca56dd3f
--- /dev/null
+++ b/crates/client-web/src/app/mediaTargets.ts
@@ -0,0 +1,63 @@
+import { state } from './state';
+import { collectionSummaries } from './selectors';
+import type { TrailerOption } from './types';
+import { extractYouTubeVideoId } from './youtube';
+import { mediaExtraToTrailerOption } from './mediaExtras';
+
+export function currentTrailerOptions(): TrailerOption[] {
+ const options: TrailerOption[] = [];
+ const seenUrls = new Set();
+
+ if (state.selectedItem?.trailer_url) {
+ const url = state.selectedItem.trailer_url;
+ seenUrls.add(url);
+ options.push({
+ title: state.selectedItem.trailer_title?.trim() || 'Trailer',
+ url,
+ });
+ }
+
+ for (const extra of state.selectedItem?.extras ?? []) {
+ if (extra.extra_type !== 'trailer' || !extra.url || seenUrls.has(extra.url)) {
+ continue;
+ }
+
+ seenUrls.add(extra.url);
+ options.push(mediaExtraToTrailerOption(extra));
+ }
+
+ return options;
+}
+
+export function currentThemeSongTarget(): { title: string; url: string } | undefined {
+ const route = state.route;
+ if (route.page === 'browse-detail' && route.kind === 'collection') {
+ const collection = collectionSummaries().find((entry) => entry.id === route.key);
+ return collection?.theme_song_url
+ ? { title: collection.name, url: collection.theme_song_url }
+ : undefined;
+ }
+
+ if (route.page !== 'item' || !state.selectedItem?.theme_song_url) {
+ return undefined;
+ }
+
+ return {
+ title: state.selectedItem.display_title,
+ url: state.selectedItem.theme_song_url,
+ };
+}
+
+export function currentThemeSongYouTubeTarget(): { title: string; url: string; videoId: string } | undefined {
+ const target = currentThemeSongTarget();
+ const videoId = target ? extractYouTubeVideoId(target.url) : undefined;
+ if (!target || !videoId) {
+ return undefined;
+ }
+
+ return {
+ title: target.title,
+ url: target.url,
+ videoId,
+ };
+}
diff --git a/crates/client-web/src/app/playbackController.ts b/crates/client-web/src/app/playbackController.ts
new file mode 100644
index 00000000..30f6427c
--- /dev/null
+++ b/crates/client-web/src/app/playbackController.ts
@@ -0,0 +1,1385 @@
+/** Controls trailer, theme-song, and browser playback UI state. */
+import { createIcons, icons } from 'lucide';
+import type { AppIconName, ThemeSongSource, TrailerOption, YouTubePlayer } from './types';
+import type { MediaAudioTrack, MediaItemDetail, PlaybackSession } from '../api';
+import {
+ createPlaybackSession,
+ deletePlaybackSession,
+ getArtworkUrl,
+ getItem,
+ getSessionStreamUrl,
+ getWebClientProfile,
+ resolveApiUrl,
+ updatePlaybackProgress,
+} from '../api';
+import { YOUTUBE_PLAYER_STATE, YOUTUBE_THEME_PLACEHOLDER_VIDEO_ID } from './constants';
+import { escapeHtml, formatDuration, formatMediaTime } from './format';
+import { currentThemeSongTarget } from './mediaTargets';
+import { state } from './state';
+import { renderButtonContent, renderIcon, subtitleLanguage } from './ui';
+import { buildYouTubeWatchUrl, extractYouTubeVideoId, loadYouTubeIframeApi } from './youtube';
+
+type RenderCallback = (preserveScroll?: boolean) => void;
+type RefreshDataCallback = (showLoading?: boolean) => Promise;
+
+let renderApp: RenderCallback = () => undefined;
+let refreshAppData: RefreshDataCallback = async () => undefined;
+
+/** Connects playback side effects back to the application coordinator. */
+export function configurePlaybackController(callbacks: { render: RenderCallback; refreshData: RefreshDataCallback }): void {
+ renderApp = callbacks.render;
+ refreshAppData = callbacks.refreshData;
+}
+
+function render(preserveScroll = true): void {
+ renderApp(preserveScroll);
+}
+
+function refreshData(showLoading = true): Promise {
+ return refreshAppData(showLoading);
+}
+
+let themeSongYouTubePlayer: YouTubePlayer | undefined;
+
+let themeSongYouTubePlayerReady: Promise | undefined;
+
+let activeThemeSongYouTubeVideoId: string | undefined;
+
+let trailerYouTubePlayer: YouTubePlayer | undefined;
+
+let trailerYouTubePlayerReady: Promise | undefined;
+
+let activeTrailerYouTubeVideoId: string | undefined;
+
+let trailerProgressHandle: number | undefined;
+
+let trailerVolume = 1;
+
+let trailerMuted = false;
+
+const ESCALATING_SEEK_STEPS = [10, 20, 30, 60, 120, 300] as const;
+const ESCALATING_SEEK_WINDOW_MS = 900;
+
+/** Renders the active playback overlay, including trailers and browser playback. */
+export function renderPlayerOverlay(): string {
+ return state.activeTrailer ? renderTrailerOverlay() : renderMediaPlayerOverlay();
+}
+
+function renderTrailerControlsMarkup(videoId: string | undefined): string {
+ if (!videoId) {
+ return '';
+ }
+
+ return `
+