@burdenoff/microfe-hookmovies 2026.705.2 → 2026.706.2

package/dist/hookmovies/pages/consumer/PlayerPage.js

@@ -0,0 +1,542 @@
+import { useHookMovies as e } from "../../context/HookMoviesContext.js";
+import { useCheckEntitlement as t, useLocalizations as n, useMyWatchProgress as r, useRecordProgress as i, useTitle as a } from "../../hooks/useHookMoviesApi.js";
+import { useFileUrl as o } from "../../hooks/useFiles.js";
+import { useCallback as s, useEffect as c, useMemo as l, useRef as u, useState as d } from "react";
+import { AlertCircle as ee, ArrowLeft as te, Cast as ne, Check as f, Download as re, Film as ie, Loader2 as ae, Lock as oe, Maximize as se, Minimize as ce, Pause as le, Play as ue, RotateCw as p, Settings as de, Subtitles as fe, Volume1 as pe, Volume2 as me, VolumeX as he } from "lucide-react";
+import { useParams as ge } from "react-router-dom";
+import { Fragment as _e, jsx as m, jsxs as h } from "react/jsx-runtime";
+//#region src/hookmovies/pages/consumer/PlayerPage.tsx
+function ve(e) {
+	if (!Number.isFinite(e) || e < 0) return "--:--";
+	let t = Math.floor(e), n = Math.floor(t / 3600), r = Math.floor(t % 3600 / 60), i = t % 60, a = (e) => e.toString().padStart(2, "0");
+	return n > 0 ? `${n}:${a(r)}:${a(i)}` : `${r}:${a(i)}`;
+}
+function g(e) {
+	let t = e.trim();
+	if (!t) return "Unknown";
+	try {
+		return new Intl.DisplayNames(["en"], { type: "language" }).of(t) ?? t.toUpperCase();
+	} catch {
+		return t.toUpperCase();
+	}
+}
+var _ = 5, ye = .1, be = 1e4, xe = 15, Se = ({ localization: e }) => {
+	let { data: t } = o(e.fileId), n = e.kind === "CAPTION" ? `${g(e.language)} (CC)` : g(e.language);
+	return /* @__PURE__ */ m("track", {
+		kind: e.kind === "CAPTION" ? "captions" : "subtitles",
+		label: n,
+		srcLang: e.language,
+		src: t ?? void 0,
+		default: e.isDefault
+	});
+}, v = () => {
+	let { titleId: f, episodeId: p } = ge(), { navigateTo: g } = e(), { data: v, isLoading: we, isError: Te, refetch: Ee } = a(f), S = t(f), C = n(f, p), w = r(f), De = i(), T = l(() => p ? v?.episodes.find((e) => e.id === p) ?? null : null, [p, v]), E = p ? void 0 : v?.videoFileId ?? void 0, D = o(E), O = o(v?.posterFileId ?? void 0), Oe = o(v?.backdropFileId ?? void 0), k = l(() => (C.data ?? []).filter((e) => e.kind === "SUBTITLE" || e.kind === "CAPTION"), [C.data]), ke = l(() => (C.data ?? []).filter((e) => e.kind === "DUB"), [C.data]), A = u(null), Ae = u(null), [j, M] = d(!1), [N, P] = d(0), [F, je] = d(0), [I, Me] = d(1), [L, Ne] = d(!1), [Pe, R] = d(!1), [z, Fe] = d(!1), [B, V] = d(!1), [Ie, Le] = d(!1), [Re, ze] = d(!0), [H, Be] = d("none"), [U, Ve] = d(-1), He = u(0), Ue = u(!1), We = u(!1), W = u(null), Ge = u(De.mutate);
+	Ge.current = De.mutate;
+	let Ke = u(j);
+	Ke.current = j;
+	let G = E ? D.data ?? null : null, qe = !!(G && G.split("?")[0]?.toLowerCase().endsWith(".m3u8")), Je = k.length > 0, Ye = !Number.isFinite(F) || F === 0, K = s((e) => {
+		let t = A.current;
+		if (!t || !f) return;
+		let n = Math.floor(t.currentTime);
+		n <= 0 && !e || (Ge.current({
+			titleId: f,
+			episodeId: p,
+			positionSeconds: n,
+			completed: e,
+			lastDevice: "web"
+		}), He.current = Date.now());
+	}, [f, p]);
+	c(() => () => {
+		Ke.current && K(!1);
+	}, [K]), c(() => {
+		let e = A.current;
+		if (!e || Ue.current || !z || w.isLoading) return;
+		Ue.current = !0;
+		let t = (w.data ?? []).find((e) => p ? e.episodeId === p : !e.episodeId);
+		t && !t.completed && t.positionSeconds > _ && Number.isFinite(e.duration) && t.positionSeconds < e.duration - _ && (e.currentTime = t.positionSeconds, P(t.positionSeconds));
+	}, [
+		z,
+		w.isLoading,
+		w.data,
+		p
+	]), c(() => {
+		We.current || k.length === 0 || (We.current = !0, Ve(k.findIndex((e) => e.isDefault)));
+	}, [k]);
+	let q = s(() => {
+		let e = A.current;
+		if (!e) return;
+		let t = e.textTracks;
+		for (let e = 0; e < t.length; e += 1) t[e].mode = e === U ? "showing" : "disabled";
+	}, [U]);
+	c(() => {
+		q();
+	}, [
+		q,
+		k.length,
+		z
+	]), c(() => {
+		let e = () => Le(!!document.fullscreenElement);
+		return document.addEventListener("fullscreenchange", e), () => document.removeEventListener("fullscreenchange", e);
+	}, []);
+	let J = s(() => {
+		ze(!0), W.current && clearTimeout(W.current), W.current = setTimeout(() => {
+			Ke.current && H === "none" && ze(!1);
+		}, 3e3);
+	}, [H]);
+	c(() => () => {
+		W.current && clearTimeout(W.current);
+	}, []);
+	let Y = s(() => {
+		let e = A.current;
+		e && (e.paused ? e.play().catch(() => V(!0)) : e.pause());
+	}, []), X = s((e) => {
+		let t = A.current;
+		!t || !Number.isFinite(t.duration) || (t.currentTime = Math.min(Math.max(t.currentTime + e, 0), t.duration), P(t.currentTime));
+	}, []), Xe = s((e) => {
+		let t = A.current;
+		t && (t.currentTime = e, P(e));
+	}, []), Z = s((e) => {
+		let t = A.current;
+		if (!t) return;
+		let n = Math.min(Math.max(e, 0), 1);
+		t.volume = n, t.muted = n === 0, Me(n), Ne(n === 0);
+	}, []), Ze = s(() => {
+		let e = A.current;
+		if (!e) return;
+		let t = !e.muted;
+		e.muted = t, Ne(t);
+	}, []), Q = s(() => {
+		let e = Ae.current;
+		e && (document.fullscreenElement ? document.exitFullscreen?.().catch(() => void 0) : e.requestFullscreen?.().catch(() => void 0));
+	}, []), Qe = s((e) => {
+		let t = e.target;
+		if (!((t.tagName === "INPUT" || t.tagName === "BUTTON") && e.key !== " " && e.key !== "k")) switch (e.key) {
+			case " ":
+			case "k":
+				e.preventDefault(), Y(), J();
+				break;
+			case "ArrowRight":
+				e.preventDefault(), X(_), J();
+				break;
+			case "ArrowLeft":
+				e.preventDefault(), X(-_), J();
+				break;
+			case "ArrowUp":
+				e.preventDefault(), Z(I + ye), J();
+				break;
+			case "ArrowDown":
+				e.preventDefault(), Z(I - ye), J();
+				break;
+			case "f":
+			case "F":
+				e.preventDefault(), Q();
+				break;
+			case "m":
+			case "M":
+				e.preventDefault(), Ze(), J();
+				break;
+			default: break;
+		}
+	}, [
+		Y,
+		X,
+		Z,
+		Q,
+		Ze,
+		J,
+		I
+	]), $e = s(() => {
+		let e = A.current;
+		e && (P(e.currentTime), !e.paused && Date.now() - He.current >= be && K(Number.isFinite(e.duration) && e.currentTime >= e.duration - xe));
+	}, [K]), et = s(() => {
+		let e = A.current;
+		e && (je(e.duration), Fe(!0), V(!1), q());
+	}, [q]), tt = s(() => {
+		M(!1), K(!0);
+	}, [K]), $ = () => g(`title/${f ?? ""}`);
+	if (we || S.isLoading) return /* @__PURE__ */ m(y, { children: /* @__PURE__ */ h("div", {
+		className: "flex flex-col items-center gap-3 text-text-inverse",
+		children: [/* @__PURE__ */ m(ae, { className: "h-8 w-8 animate-spin" }), /* @__PURE__ */ m("p", {
+			className: "text-sm opacity-80",
+			children: "Loading…"
+		})]
+	}) });
+	if (Te || !v) return /* @__PURE__ */ m(y, { children: /* @__PURE__ */ m(b, {
+		icon: /* @__PURE__ */ m(ee, { className: "h-12 w-12" }),
+		title: "Title unavailable",
+		message: "We couldn't load this title. It may have been removed or you may not have access.",
+		primary: {
+			label: "Retry",
+			onClick: () => void Ee()
+		}
+	}) });
+	if (S.isError) return /* @__PURE__ */ m(y, { children: /* @__PURE__ */ m(b, {
+		icon: /* @__PURE__ */ m(ee, { className: "h-12 w-12" }),
+		title: "Couldn't verify access",
+		message: "We couldn't check your entitlement for this title. Please try again.",
+		primary: {
+			label: "Retry",
+			onClick: () => void S.refetch()
+		},
+		secondary: {
+			label: "Back to title",
+			onClick: $
+		}
+	}) });
+	if (!S.data?.entitled) return /* @__PURE__ */ m(y, {
+		backdrop: Oe.data ?? O.data ?? null,
+		children: /* @__PURE__ */ h("div", {
+			className: "mx-auto flex max-w-md flex-col items-center gap-5 text-center text-text-inverse",
+			children: [
+				O.data ? /* @__PURE__ */ m("img", {
+					src: O.data,
+					alt: `Poster for ${v.title}`,
+					className: "h-48 w-32 rounded-lg object-cover shadow-lg"
+				}) : /* @__PURE__ */ m("div", {
+					className: "flex h-48 w-32 items-center justify-center rounded-lg bg-bg-overlay",
+					children: /* @__PURE__ */ m(ie, { className: "h-10 w-10 opacity-70" })
+				}),
+				/* @__PURE__ */ h("div", {
+					className: "flex items-center gap-2 rounded-full bg-bg-overlay px-3 py-1 text-xs font-medium",
+					children: [/* @__PURE__ */ m(oe, { className: "h-3.5 w-3.5" }), "Not available to watch yet"]
+				}),
+				/* @__PURE__ */ h("div", { children: [/* @__PURE__ */ m("h1", {
+					className: "text-xl font-semibold",
+					children: v.title
+				}), /* @__PURE__ */ m("p", {
+					className: "mt-2 text-sm opacity-80",
+					children: "You don't have an active entitlement for this title. Open the title page to see where and how to watch, or to acquire access."
+				})] }),
+				/* @__PURE__ */ h("div", {
+					className: "flex flex-wrap items-center justify-center gap-3",
+					children: [/* @__PURE__ */ m("button", {
+						type: "button",
+						onClick: $,
+						className: "inline-flex items-center gap-2 rounded-lg bg-action-primary-bg px-4 py-2 text-sm font-medium text-action-primary-text hover:opacity-90 motion-safe:transition-opacity",
+						children: "Where to watch"
+					}), /* @__PURE__ */ m("button", {
+						type: "button",
+						onClick: () => g("browse"),
+						className: "inline-flex items-center gap-2 rounded-lg border border-text-inverse/30 px-4 py-2 text-sm font-medium text-text-inverse hover:bg-bg-overlay motion-safe:transition-colors",
+						children: "Browse catalog"
+					})]
+				})
+			]
+		})
+	});
+	let nt = T ? `${v.title} — E${T.number} · ${T.name}` : v.title, rt = !!E && D.isLoading, it = !E || !D.isLoading && !G, at = L || I === 0 ? he : I < .5 ? pe : me, ot = F > 0 ? Math.min(N / F * 100, 100) : 0;
+	return /* @__PURE__ */ h("div", {
+		className: "flex h-full flex-col bg-bg-inverse",
+		children: [/* @__PURE__ */ h("div", {
+			className: "flex items-center gap-3 px-4 py-3 sm:px-6",
+			children: [/* @__PURE__ */ h("button", {
+				type: "button",
+				onClick: $,
+				className: "inline-flex items-center gap-2 rounded-lg px-2 py-1.5 text-sm font-medium text-text-inverse/90 hover:bg-bg-overlay motion-safe:transition-colors",
+				"aria-label": "Back to title",
+				children: [/* @__PURE__ */ m(te, { className: "h-4 w-4" }), /* @__PURE__ */ m("span", {
+					className: "hidden sm:inline",
+					children: "Back"
+				})]
+			}), /* @__PURE__ */ m("h1", {
+				className: "min-w-0 flex-1 truncate text-sm font-semibold text-text-inverse sm:text-base",
+				children: nt
+			})]
+		}), /* @__PURE__ */ m("div", {
+			className: "flex flex-1 items-center justify-center px-0 sm:px-6 sm:pb-6",
+			children: /* @__PURE__ */ m("div", {
+				ref: Ae,
+				className: "group relative aspect-video w-full max-w-6xl overflow-hidden bg-bg-inverse sm:rounded-xl",
+				onMouseMove: J,
+				onKeyDown: Qe,
+				onClick: (e) => {
+					e.target === A.current && Y();
+				},
+				tabIndex: 0,
+				role: "region",
+				"aria-label": `Video player for ${nt}`,
+				children: it ? /* @__PURE__ */ m("div", {
+					className: "absolute inset-0 flex items-center justify-center p-6",
+					children: /* @__PURE__ */ m(b, {
+						icon: /* @__PURE__ */ m(ie, { className: "h-12 w-12" }),
+						title: T ? "Episode video not available" : "No video attached",
+						message: T ? "This episode does not have a playable video file attached yet." : "This title does not have a playable video file attached yet.",
+						secondary: {
+							label: "Back to title",
+							onClick: $
+						}
+					})
+				}) : /* @__PURE__ */ h(_e, { children: [
+					/* @__PURE__ */ m("video", {
+						ref: A,
+						className: "h-full w-full bg-bg-inverse",
+						src: G ?? void 0,
+						poster: O.data ?? void 0,
+						crossOrigin: Je ? "anonymous" : void 0,
+						playsInline: !0,
+						preload: "metadata",
+						onLoadedMetadata: et,
+						onDurationChange: () => {
+							let e = A.current;
+							e && je(e.duration);
+						},
+						onTimeUpdate: $e,
+						onPlay: () => {
+							M(!0), J();
+						},
+						onPause: () => {
+							M(!1), ze(!0), K(!1);
+						},
+						onEnded: tt,
+						onWaiting: () => R(!0),
+						onPlaying: () => R(!1),
+						onCanPlay: () => R(!1),
+						onError: () => V(!0),
+						children: k.map((e) => /* @__PURE__ */ m(Se, { localization: e }, e.id))
+					}),
+					(Pe || rt) && !B && /* @__PURE__ */ m("div", {
+						className: "pointer-events-none absolute inset-0 flex items-center justify-center",
+						children: /* @__PURE__ */ m(ae, { className: "h-10 w-10 animate-spin text-text-inverse" })
+					}),
+					B && /* @__PURE__ */ m("div", {
+						className: "absolute inset-0 flex items-center justify-center bg-overlay-scrim p-6",
+						children: /* @__PURE__ */ m(b, {
+							icon: /* @__PURE__ */ m(ee, { className: "h-12 w-12" }),
+							title: "Playback failed",
+							message: qe ? "This stream is HLS (.m3u8) and your browser could not play it natively. Try a browser with native HLS support." : "We could not play this video. The link may have expired — reload to try again.",
+							primary: {
+								label: "Reload",
+								onClick: () => {
+									V(!1), D.refetch();
+								}
+							},
+							secondary: {
+								label: "Back to title",
+								onClick: $
+							}
+						})
+					}),
+					!j && !Pe && !B && z && /* @__PURE__ */ m("button", {
+						type: "button",
+						onClick: Y,
+						"aria-label": "Play",
+						className: "absolute inset-0 flex items-center justify-center",
+						children: /* @__PURE__ */ m("span", {
+							className: "flex h-16 w-16 items-center justify-center rounded-full bg-action-primary-bg text-action-primary-text shadow-lg motion-safe:transition-transform group-hover:scale-105",
+							children: /* @__PURE__ */ m(ue, { className: "ml-1 h-7 w-7" })
+						})
+					}),
+					/* @__PURE__ */ h("div", {
+						className: `absolute inset-x-0 bottom-0 bg-overlay-scrim px-3 pb-3 pt-10 motion-safe:transition-opacity motion-safe:duration-300 sm:px-4 ${Re || !j ? "opacity-100" : "pointer-events-none opacity-0"}`,
+						children: [/* @__PURE__ */ h("div", {
+							className: "mb-2 flex items-center gap-3",
+							children: [
+								/* @__PURE__ */ m("span", {
+									className: "w-12 shrink-0 text-right text-xs tabular-nums text-text-inverse/90",
+									children: ve(N)
+								}),
+								/* @__PURE__ */ h("div", {
+									className: "relative flex-1",
+									children: [/* @__PURE__ */ m("div", {
+										className: "h-1.5 w-full overflow-hidden rounded-full bg-text-inverse/25",
+										children: /* @__PURE__ */ m("div", {
+											className: "h-full rounded-full bg-action-primary-bg",
+											style: { width: `${ot}%` }
+										})
+									}), /* @__PURE__ */ m("input", {
+										type: "range",
+										min: 0,
+										max: Number.isFinite(F) && F > 0 ? F : 0,
+										step: "any",
+										value: N,
+										disabled: Ye,
+										onChange: (e) => Xe(Number(e.target.value)),
+										"aria-label": "Seek",
+										className: "absolute inset-0 h-full w-full cursor-pointer opacity-0 disabled:cursor-not-allowed",
+										style: { accentColor: "var(--color-action-primary-bg)" }
+									})]
+								}),
+								/* @__PURE__ */ m("span", {
+									className: "w-12 shrink-0 text-xs tabular-nums text-text-inverse/70",
+									children: Ye ? "LIVE" : ve(F)
+								})
+							]
+						}), /* @__PURE__ */ h("div", {
+							className: "flex items-center gap-1 sm:gap-2",
+							children: [
+								/* @__PURE__ */ m(x, {
+									label: j ? "Pause" : "Play",
+									onClick: Y,
+									children: m(j ? le : ue, { className: "h-5 w-5" })
+								}),
+								/* @__PURE__ */ h("div", {
+									className: "flex items-center gap-1.5",
+									children: [/* @__PURE__ */ m(x, {
+										label: L ? "Unmute" : "Mute",
+										onClick: Ze,
+										children: /* @__PURE__ */ m(at, { className: "h-5 w-5" })
+									}), /* @__PURE__ */ m("input", {
+										type: "range",
+										min: 0,
+										max: 1,
+										step: .05,
+										value: L ? 0 : I,
+										onChange: (e) => Z(Number(e.target.value)),
+										"aria-label": "Volume",
+										className: "hidden h-1 w-20 cursor-pointer sm:block",
+										style: { accentColor: "var(--color-action-primary-bg)" }
+									})]
+								}),
+								/* @__PURE__ */ h("div", {
+									className: "ml-auto flex items-center gap-1 sm:gap-2",
+									children: [
+										/* @__PURE__ */ h("div", {
+											className: "relative",
+											children: [/* @__PURE__ */ m(x, {
+												label: "Subtitles & audio",
+												onClick: () => Be((e) => e === "subtitles" ? "none" : "subtitles"),
+												active: U >= 0,
+												expanded: H === "subtitles",
+												disabled: k.length === 0 && ke.length === 0,
+												disabledHint: "No subtitle or audio tracks available for this title.",
+												children: /* @__PURE__ */ m(fe, { className: "h-5 w-5" })
+											}), H === "subtitles" && /* @__PURE__ */ m(Ce, {
+												subtitleLocs: k,
+												dubLocs: ke,
+												selectedSubIdx: U,
+												onSelectSub: (e) => {
+													Ve(e), Be("none");
+												}
+											})]
+										}),
+										/* @__PURE__ */ m(x, {
+											label: "Quality",
+											onClick: () => void 0,
+											disabled: !0,
+											disabledHint: "Adaptive quality selection isn't available for this source.",
+											children: /* @__PURE__ */ m(de, { className: "h-5 w-5" })
+										}),
+										/* @__PURE__ */ m(x, {
+											label: "Cast",
+											onClick: () => void 0,
+											disabled: !0,
+											disabledHint: "Casting to external devices isn't supported in this player.",
+											children: /* @__PURE__ */ m(ne, { className: "h-5 w-5" })
+										}),
+										/* @__PURE__ */ m(x, {
+											label: "Download for offline",
+											onClick: () => void 0,
+											disabled: !0,
+											disabledHint: "Offline downloads aren't available for this title.",
+											children: /* @__PURE__ */ m(re, { className: "h-5 w-5" })
+										}),
+										/* @__PURE__ */ m(x, {
+											label: Ie ? "Exit fullscreen" : "Fullscreen",
+											onClick: Q,
+											children: m(Ie ? ce : se, { className: "h-5 w-5" })
+										})
+									]
+								})
+							]
+						})]
+					})
+				] })
+			})
+		})]
+	});
+}, y = ({ children: e, backdrop: t }) => /* @__PURE__ */ h("div", {
+	className: "relative flex h-full min-h-[60vh] items-center justify-center overflow-hidden bg-bg-inverse p-6",
+	children: [t && /* @__PURE__ */ h(_e, { children: [/* @__PURE__ */ m("img", {
+		src: t,
+		alt: "",
+		"aria-hidden": !0,
+		className: "absolute inset-0 h-full w-full object-cover opacity-30"
+	}), /* @__PURE__ */ m("div", { className: "absolute inset-0 bg-overlay-scrim" })] }), /* @__PURE__ */ m("div", {
+		className: "relative z-10 w-full",
+		children: e
+	})]
+}), b = ({ icon: e, title: t, message: n, primary: r, secondary: i }) => /* @__PURE__ */ h("div", {
+	className: "mx-auto flex max-w-md flex-col items-center gap-4 text-center text-text-inverse",
+	children: [
+		/* @__PURE__ */ m("span", {
+			className: "text-text-inverse/80",
+			children: e
+		}),
+		/* @__PURE__ */ h("div", { children: [/* @__PURE__ */ m("h2", {
+			className: "text-lg font-semibold",
+			children: t
+		}), /* @__PURE__ */ m("p", {
+			className: "mt-1 text-sm opacity-80",
+			children: n
+		})] }),
+		(r || i) && /* @__PURE__ */ h("div", {
+			className: "flex flex-wrap items-center justify-center gap-3",
+			children: [r && /* @__PURE__ */ h("button", {
+				type: "button",
+				onClick: r.onClick,
+				className: "inline-flex items-center gap-2 rounded-lg bg-action-primary-bg px-4 py-2 text-sm font-medium text-action-primary-text hover:opacity-90 motion-safe:transition-opacity",
+				children: [/* @__PURE__ */ m(p, { className: "h-4 w-4" }), r.label]
+			}), i && /* @__PURE__ */ m("button", {
+				type: "button",
+				onClick: i.onClick,
+				className: "inline-flex items-center gap-2 rounded-lg border border-text-inverse/30 px-4 py-2 text-sm font-medium text-text-inverse hover:bg-bg-overlay motion-safe:transition-colors",
+				children: i.label
+			})]
+		})
+	]
+}), x = ({ label: e, onClick: t, children: n, active: r, disabled: i, disabledHint: a, expanded: o }) => /* @__PURE__ */ h("button", {
+	type: "button",
+	onClick: t,
+	disabled: i,
+	"aria-label": e,
+	"aria-pressed": r,
+	"aria-expanded": o,
+	title: i && a ? a : e,
+	className: `relative rounded-lg p-2 motion-safe:transition-colors ${i ? "cursor-not-allowed text-text-inverse/40" : "text-text-inverse hover:bg-bg-overlay"}`,
+	children: [n, r && !i && /* @__PURE__ */ m("span", { className: "absolute bottom-0.5 left-1/2 h-1 w-1 -translate-x-1/2 rounded-full bg-action-primary-bg" })]
+}), Ce = ({ subtitleLocs: e, dubLocs: t, selectedSubIdx: n, onSelectSub: r }) => /* @__PURE__ */ h("div", {
+	role: "menu",
+	"aria-label": "Subtitles and audio",
+	className: "absolute bottom-full right-0 mb-2 max-h-72 w-56 overflow-y-auto rounded-lg border border-border-seam bg-bg-surface p-1.5 shadow-lg",
+	children: [
+		/* @__PURE__ */ m("p", {
+			className: "px-2 py-1 text-[11px] font-semibold uppercase tracking-wide text-text-secondary",
+			children: "Subtitles"
+		}),
+		/* @__PURE__ */ m(we, {
+			label: "Off",
+			selected: n === -1,
+			onClick: () => r(-1)
+		}),
+		e.map((e, t) => /* @__PURE__ */ m(we, {
+			label: e.kind === "CAPTION" ? `${g(e.language)} (CC)` : g(e.language),
+			selected: n === t,
+			onClick: () => r(t)
+		}, e.id)),
+		t.length > 0 && /* @__PURE__ */ h(_e, { children: [/* @__PURE__ */ m("p", {
+			className: "mt-1 px-2 py-1 text-[11px] font-semibold uppercase tracking-wide text-text-secondary",
+			children: "Audio (dub)"
+		}), t.map((e) => /* @__PURE__ */ h("button", {
+			type: "button",
+			role: "menuitem",
+			disabled: !0,
+			title: "Alternate dub tracks are separate assets and can't be switched in this player.",
+			className: "flex w-full cursor-not-allowed items-center justify-between rounded-md px-2 py-1.5 text-left text-sm text-text-disabled",
+			children: [/* @__PURE__ */ m("span", { children: g(e.language) }), /* @__PURE__ */ m(oe, { className: "h-3.5 w-3.5" })]
+		}, e.id))] })
+	]
+}), we = ({ label: e, selected: t, onClick: n }) => /* @__PURE__ */ h("button", {
+	type: "button",
+	role: "menuitemradio",
+	"aria-checked": t,
+	onClick: n,
+	className: `flex w-full items-center justify-between rounded-md px-2 py-1.5 text-left text-sm motion-safe:transition-colors ${t ? "bg-bg-sunken font-medium text-text-primary" : "text-text-secondary hover:bg-bg-sunken hover:text-text-primary"}`,
+	children: [/* @__PURE__ */ m("span", {
+		className: "truncate",
+		children: e
+	}), t && /* @__PURE__ */ m(f, { className: "h-4 w-4 shrink-0 text-action-primary-bg" })]
+});
+//#endregion
+export { v as PlayerPage };
+
+//# sourceMappingURL=PlayerPage.js.map