@btndprojects/loam-ui-native 0.2.1 → 0.3.1

package/dist/chunk-CUE7VML6.js

@@ -0,0 +1,1141 @@
+import { TranscriptSlot } from './chunk-3A56MIAN.js';
+import { formatTime } from './chunk-CA3DUVYD.js';
+import { Skeleton } from './chunk-YJ5PXOX3.js';
+import { Spinner } from './chunk-G7H3NX3G.js';
+import { useLabels } from './chunk-APCWFOZW.js';
+import { Icon } from './chunk-PCEFCOLN.js';
+import { useResolvedMotion, springConfig } from './chunk-J64KGCGX.js';
+import * as React from 'react';
+import { Animated, Platform, BackHandler, View, Text, Pressable, Image } from 'react-native';
+import { createStyleSheet, useStyles, useLoamTheme } from '@btndprojects/loam-theme-native';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+var DEFAULT_LABELS = {
+  play: "Play",
+  pause: "Pause",
+  mute: "Mute",
+  unmute: "Unmute",
+  captions: "Captions",
+  captionsMark: "CC",
+  fullscreen: "Fullscreen",
+  seek: "Seek",
+  seekValue: (current, total) => `${current} of ${total}`,
+  poster: (aspectRatio) => `Poster ${aspectRatio}`,
+  buffering: "Buffering",
+  error: "This video couldn\u2019t be played.",
+  retry: "Retry",
+  volume: (percent) => `Volume ${percent}%`,
+  speed: (rate) => `Speed ${rate}\xD7`,
+  settings: "Settings",
+  speedRow: "Speed",
+  qualityRow: "Quality",
+  captionsOff: "Off",
+  back: "Back",
+  close: "Close",
+  exitFullscreen: "Exit fullscreen",
+  skipped: (seconds) => `${seconds > 0 ? "+" : "\u2212"}${Math.abs(seconds)} s`,
+  skipIntro: "Skip intro",
+  watched: (w, t) => `You watched ${w} of ${t}`,
+  resume: "Resume",
+  startOver: "Start over",
+  upNextIn: (n) => `Up next \xB7 in ${n}`,
+  playNow: "Play now",
+  replay: "Replay",
+  live: "LIVE",
+  goLive: (b) => `Go to live \xB7 -${b}`
+};
+var DOUBLE_TAP_SEEK = 10;
+var DOUBLE_TAP_MS = 280;
+var CHROME_HIDE_MS = 3e3;
+var UP_NEXT_SECONDS = 5;
+var RATES = [0.5, 0.75, 1, 1.25, 1.5, 2];
+var POSTER = {
+  /** Inset from the top of the stage. */
+  padTop: 10,
+  /** Label size. Matches `type.caption2` on both platforms, but stated for clarity. */
+  fontSize: 11,
+  // loam-allow-raw: ramp key, read via theme.fontSize at the use site
+  /**
+   * Tracking as an `em` multiple. `theme.tracking` steps either side are `wide`
+   * (0.04) and `caps` (0.12), so the doc's 0.08em has no token — the value is
+   * kept and scaled by the font size, since RN `letterSpacing` is absolute.
+   */
+  trackingEm: 0.08
+};
+var PLAY_GLYPH_NUDGE = -1;
+function VideoPlayer({
+  duration,
+  position,
+  playing,
+  title,
+  meta,
+  aspectRatio = 16 / 9,
+  captions = false,
+  quality,
+  qualities,
+  onQualityChange,
+  playbackRate = 1,
+  onPlaybackRateChange,
+  captionsOn,
+  onCaptionsChange,
+  fullscreen,
+  onFullscreenChange,
+  onTogglePlay,
+  onSeek,
+  transcript,
+  children,
+  motion = "full",
+  labels: labelsProp,
+  loading = false,
+  size = "md",
+  captionText,
+  chapters,
+  thumbnails,
+  skipIntro,
+  upNext,
+  resumeAt,
+  live = false,
+  liveOffset = 0,
+  onGoLive,
+  onRetry,
+  failed = false,
+  buffering = false,
+  buffered = 0,
+  defaultSettingsOpen,
+  previewAt,
+  feedback
+}) {
+  const labels = useLabels("videoPlayer", DEFAULT_LABELS, labelsProp);
+  const { styles } = useStyles(sheet);
+  const theme = useLoamTheme("video-player");
+  const [ownPlaying, setOwnPlaying] = React.useState(false);
+  const [ownPosition, setOwnPosition] = React.useState(0);
+  const [trackWidth, setTrackWidth] = React.useState(0);
+  const [controlsHeight, setControlsHeight] = React.useState(0);
+  const [ownCaptions, setOwnCaptions] = React.useState(false);
+  const [ownFullscreen, setOwnFullscreen] = React.useState(false);
+  const [chromeVisible, setChromeVisible] = React.useState(true);
+  const [settingsPage, setSettingsPage] = React.useState(
+    defaultSettingsOpen ?? null
+  );
+  const [pill, setPill] = React.useState(null);
+  const [scrubAt, setScrubAt] = React.useState(null);
+  const [resumeOpen, setResumeOpen] = React.useState(resumeAt != null && resumeAt > 0);
+  const [countdown, setCountdown] = React.useState(UP_NEXT_SECONDS);
+  const isCaptionsOn = captionsOn ?? ownCaptions;
+  const isFullscreen = fullscreen ?? ownFullscreen;
+  const isPlaying = playing ?? ownPlaying;
+  const current = position ?? ownPosition;
+  const pct = duration > 0 ? Math.min(1, Math.max(0, current / duration)) : 0;
+  const ended = duration > 0 && current >= duration && !isPlaying;
+  const showUpNext = ended && !!upNext && !failed;
+  const showResume = resumeOpen && !isPlaying && !failed && !showUpNext;
+  const showSkipIntro = !!skipIntro && current >= skipIntro.start && current < skipIntro.end;
+  const previewT = previewAt ?? scrubAt;
+  const segments = React.useMemo(() => {
+    const starts = [
+      0,
+      ...(chapters ?? []).map((c) => c.start).filter((t) => t > 0 && t < duration)
+    ];
+    return starts.map((start, i) => ({ start, end: starts[i + 1] ?? duration }));
+  }, [chapters, duration]);
+  const chapterAt = (t) => {
+    let at = chapters?.[0];
+    chapters?.forEach((c) => {
+      if (t >= c.start) at = c;
+    });
+    return at;
+  };
+  const upNextPlay = upNext?.onPlay;
+  React.useEffect(() => {
+    if (!showUpNext) {
+      setCountdown(UP_NEXT_SECONDS);
+      return void 0;
+    }
+    if (countdown <= 0) {
+      upNextPlay?.();
+      return void 0;
+    }
+    const id = setTimeout(() => setCountdown((n) => n - 1), 1e3);
+    return () => clearTimeout(id);
+  }, [showUpNext, countdown, upNextPlay]);
+  const level = useResolvedMotion(motion, "video-player");
+  const chrome = React.useRef(new Animated.Value(isPlaying ? 0 : 1)).current;
+  const wasPlaying = React.useRef(isPlaying);
+  React.useEffect(() => {
+    if (wasPlaying.current === isPlaying) return;
+    wasPlaying.current = isPlaying;
+    const to = isPlaying ? 0 : 1;
+    if (level === "none") chrome.setValue(to);
+    else
+      Animated.spring(chrome, {
+        ...springConfig(theme, "de"),
+        toValue: to,
+        useNativeDriver: true
+      }).start();
+  }, [isPlaying, level, chrome, theme]);
+  const hideTimer = React.useRef();
+  const showChrome = React.useCallback(() => {
+    setChromeVisible(true);
+    clearTimeout(hideTimer.current);
+    if (isPlaying && settingsPage == null) {
+      hideTimer.current = setTimeout(() => setChromeVisible(false), CHROME_HIDE_MS);
+    }
+  }, [isPlaying, settingsPage]);
+  React.useEffect(() => {
+    showChrome();
+    return () => clearTimeout(hideTimer.current);
+  }, [showChrome]);
+  const visible = chromeVisible || !isPlaying || settingsPage != null;
+  const fade = React.useRef(new Animated.Value(1)).current;
+  React.useEffect(() => {
+    const to = visible ? 1 : 0;
+    if (level === "none") fade.setValue(to);
+    else
+      Animated.timing(fade, {
+        toValue: to,
+        duration: theme.duration.base,
+        useNativeDriver: true
+      }).start();
+  }, [visible, level, fade, theme.duration.base]);
+  const setFullscreen = (next) => {
+    if (fullscreen == null) setOwnFullscreen(next);
+    onFullscreenChange?.(next);
+  };
+  React.useEffect(() => {
+    if (Platform.OS !== "android" || !isFullscreen && settingsPage == null) return void 0;
+    const sub = BackHandler.addEventListener("hardwareBackPress", () => {
+      if (settingsPage != null) setSettingsPage(null);
+      else setFullscreen(false);
+      return true;
+    });
+    return () => sub.remove();
+  }, [isFullscreen, settingsPage]);
+  const setCaptions = (on) => {
+    if (captionsOn == null) setOwnCaptions(on);
+    onCaptionsChange?.(on);
+  };
+  const lastTap = React.useRef(null);
+  const tapTimer = React.useRef();
+  const pillTimer = React.useRef();
+  React.useEffect(
+    () => () => {
+      clearTimeout(tapTimer.current);
+      clearTimeout(pillTimer.current);
+    },
+    []
+  );
+  const [stageWidth, setStageWidth] = React.useState(0);
+  const onStagePress = (x) => {
+    const side = stageWidth > 0 && x < stageWidth / 2 ? -1 : 1;
+    const now = Date.now();
+    const prev = lastTap.current;
+    if (prev && now - prev.at < DOUBLE_TAP_MS && prev.side === side) {
+      lastTap.current = null;
+      clearTimeout(tapTimer.current);
+      const next = Math.min(duration, Math.max(0, current + side * DOUBLE_TAP_SEEK));
+      if (position == null) setOwnPosition(next);
+      onSeek?.(next);
+      setPill(labels.skipped(side * DOUBLE_TAP_SEEK));
+      clearTimeout(pillTimer.current);
+      pillTimer.current = setTimeout(() => setPill(null), 800);
+      return;
+    }
+    lastTap.current = { at: now, side };
+    clearTimeout(tapTimer.current);
+    tapTimer.current = setTimeout(() => {
+      lastTap.current = null;
+      if (visible && isPlaying) {
+        clearTimeout(hideTimer.current);
+        setChromeVisible(false);
+      } else showChrome();
+    }, DOUBLE_TAP_MS);
+  };
+  const toggle = () => {
+    const next = !isPlaying;
+    if (playing == null) setOwnPlaying(next);
+    onTogglePlay?.(next);
+  };
+  const seekTo = (seconds) => {
+    const next = Math.min(duration, Math.max(0, seconds));
+    if (position == null) setOwnPosition(next);
+    onSeek?.(next);
+  };
+  const seekFromX = (x) => {
+    if (trackWidth <= 0 || duration <= 0) return;
+    const next = Math.min(duration, Math.max(0, x / trackWidth * duration));
+    setScrubAt(next);
+    seekTo(next);
+  };
+  const play = () => {
+    if (playing == null) setOwnPlaying(true);
+    onTogglePlay?.(true);
+  };
+  if (loading) {
+    return /* @__PURE__ */ jsx(View, { style: styles.root, accessibilityState: { busy: true }, "aria-busy": true, children: /* @__PURE__ */ jsx(View, { style: [styles.stage, { aspectRatio }], children: /* @__PURE__ */ jsx(Skeleton, { variant: "rect", style: { width: "100%", height: "100%" } }) }) });
+  }
+  return /* @__PURE__ */ jsxs(View, { style: styles.root, children: [
+    /* @__PURE__ */ jsxs(
+      View,
+      {
+        style: [styles.stage, { aspectRatio }],
+        onLayout: (e) => setStageWidth(e.nativeEvent.layout.width),
+        children: [
+          children ?? /* @__PURE__ */ jsx(View, { style: styles.placeholder, children: /* @__PURE__ */ jsx(Text, { style: styles.placeholderLabel, children: labels.poster(String(Math.round(aspectRatio * 100) / 100)) }) }),
+          /* @__PURE__ */ jsxs(
+            Pressable,
+            {
+              testID: "video-stage",
+              accessible: false,
+              onPress: (e) => onStagePress(e.nativeEvent.locationX),
+              style: styles.stagePress,
+              children: [
+                /* @__PURE__ */ jsx(Animated.View, { style: [styles.scrimTall, { opacity: fade, pointerEvents: "none" }] }),
+                /* @__PURE__ */ jsx(Animated.View, { style: [styles.scrim, { opacity: fade, pointerEvents: "none" }] }),
+                /* @__PURE__ */ jsx(
+                  Animated.View,
+                  {
+                    pointerEvents: "box-none",
+                    accessibilityElementsHidden: isPlaying,
+                    importantForAccessibility: isPlaying ? "no-hide-descendants" : "auto",
+                    style: [
+                      styles.playSlot,
+                      {
+                        bottom: controlsHeight,
+                        opacity: chrome,
+                        transform: level === "full" ? [{ scale: chrome.interpolate({ inputRange: [0, 1], outputRange: [0.9, 1] }) }] : []
+                      }
+                    ],
+                    children: isPlaying && level === "none" || showResume || failed || showUpNext ? null : /* @__PURE__ */ jsx(
+                      Pressable,
+                      {
+                        accessible: false,
+                        onPress: toggle,
+                        style: [styles.playButton, { pointerEvents: "auto" }],
+                        children: /* @__PURE__ */ jsx(
+                          Icon,
+                          {
+                            name: "play",
+                            size: theme.icon.lg,
+                            color: theme.media.onInk,
+                            strokeWidth: theme.icon.stroke
+                          }
+                        )
+                      }
+                    )
+                  }
+                )
+              ]
+            }
+          ),
+          buffering && !failed ? /* @__PURE__ */ jsx(View, { style: [styles.centre, { pointerEvents: "none" }], children: /* @__PURE__ */ jsx(Spinner, { size: "lg", color: theme.media.ink, accessibilityLabel: labels.buffering }) }) : null,
+          feedback || pill ? /* @__PURE__ */ jsxs(View, { style: [styles.pill, { pointerEvents: "none" }], children: [
+            feedback?.icon ? /* @__PURE__ */ jsx(Icon, { name: feedback.icon, size: theme.icon.md, color: theme.media.ink }) : null,
+            /* @__PURE__ */ jsx(Text, { style: styles.pillText, children: feedback ? feedback.text : pill }),
+            feedback?.pct != null ? /* @__PURE__ */ jsx(View, { style: styles.pillBar, children: /* @__PURE__ */ jsx(View, { style: [styles.pillBarFill, { width: `${feedback.pct}%` }] }) }) : null
+          ] }) : null,
+          isCaptionsOn && captionText ? /* @__PURE__ */ jsx(
+            View,
+            {
+              style: [
+                styles.captionSlot,
+                { bottom: visible ? controlsHeight + theme.space.s2 : theme.space.s4 },
+                { pointerEvents: "none" }
+              ],
+              children: /* @__PURE__ */ jsx(Text, { style: styles.captionText, children: captionText })
+            }
+          ) : null,
+          showResume ? /* @__PURE__ */ jsxs(View, { style: [styles.promptSlot, { bottom: controlsHeight }], children: [
+            /* @__PURE__ */ jsx(Text, { style: styles.promptNote, children: labels.watched(formatTime(resumeAt ?? 0), formatTime(duration)) }),
+            /* @__PURE__ */ jsxs(View, { style: styles.promptRow, children: [
+              /* @__PURE__ */ jsx(
+                MediaButton,
+                {
+                  label: labels.resume,
+                  tone: "solid",
+                  styles,
+                  onPress: () => {
+                    setResumeOpen(false);
+                    seekTo(resumeAt ?? 0);
+                    play();
+                  }
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                MediaButton,
+                {
+                  label: labels.startOver,
+                  tone: "glass",
+                  styles,
+                  onPress: () => {
+                    setResumeOpen(false);
+                    seekTo(0);
+                    play();
+                  }
+                }
+              )
+            ] })
+          ] }) : null,
+          showUpNext ? null : /* @__PURE__ */ jsxs(
+            Animated.View,
+            {
+              style: [
+                styles.controls,
+                { opacity: fade, pointerEvents: visible ? "box-none" : "none" }
+              ],
+              onLayout: (e) => setControlsHeight(e.nativeEvent.layout.height),
+              children: [
+                showSkipIntro ? /* @__PURE__ */ jsx(
+                  MediaButton,
+                  {
+                    label: labels.skipIntro,
+                    tone: "glass",
+                    styles,
+                    onPress: () => seekTo(skipIntro?.end ?? 0),
+                    style: styles.endSelf
+                  }
+                ) : null,
+                live && liveOffset > 0 ? /* @__PURE__ */ jsx(
+                  MediaButton,
+                  {
+                    label: labels.goLive(formatTime(liveOffset)),
+                    tone: "glass",
+                    round: true,
+                    styles,
+                    onPress: () => onGoLive?.(),
+                    style: styles.endSelf
+                  }
+                ) : null,
+                previewT != null && duration > 0 ? /* @__PURE__ */ jsxs(
+                  View,
+                  {
+                    style: [
+                      styles.preview,
+                      { start: `${Math.max(0.1, Math.min(0.9, previewT / duration)) * 100}%` },
+                      { pointerEvents: "none" }
+                    ],
+                    children: [
+                      thumbnails ? /* @__PURE__ */ jsx(Image, { source: { uri: thumbnails(previewT) }, style: styles.previewFrame }) : null,
+                      /* @__PURE__ */ jsxs(View, { style: styles.previewPill, children: [
+                        /* @__PURE__ */ jsx(Text, { style: styles.previewTime, children: formatTime(previewT) }),
+                        chapterAt(previewT) ? /* @__PURE__ */ jsx(Text, { numberOfLines: 1, style: styles.previewChapter, children: chapterAt(previewT)?.title }) : null
+                      ] })
+                    ]
+                  }
+                ) : null,
+                /* @__PURE__ */ jsx(
+                  Pressable,
+                  {
+                    accessibilityRole: "adjustable",
+                    accessibilityLabel: labels.seek,
+                    "aria-valuemin": 0,
+                    "aria-valuemax": Math.round(duration),
+                    "aria-valuenow": Math.round(current),
+                    "aria-valuetext": labels.seekValue(formatTime(current), formatTime(duration)),
+                    accessibilityActions: [{ name: "increment" }, { name: "decrement" }],
+                    onAccessibilityAction: (e) => {
+                      const delta = e.nativeEvent.actionName === "increment" ? 5 : -5;
+                      const next = Math.min(duration, Math.max(0, current + delta));
+                      if (position == null) setOwnPosition(next);
+                      onSeek?.(next);
+                    },
+                    onLayout: (e) => setTrackWidth(e.nativeEvent.layout.width),
+                    onPress: (e) => seekFromX(e.nativeEvent.locationX),
+                    onTouchMove: (e) => seekFromX(e.nativeEvent.locationX),
+                    onTouchEnd: () => setScrubAt(null),
+                    onTouchCancel: () => setScrubAt(null),
+                    hitSlop: theme.space.s3,
+                    style: styles.seek,
+                    children: /* @__PURE__ */ jsxs(View, { style: [styles.track, { pointerEvents: "none" }], children: [
+                      segments.map((seg) => {
+                        const share = (v) => `${Math.min(1, Math.max(0, (v - seg.start) / (seg.end - seg.start))) * 100}%`;
+                        return /* @__PURE__ */ jsxs(
+                          View,
+                          {
+                            style: [styles.segment, { flexGrow: seg.end - seg.start }],
+                            children: [
+                              /* @__PURE__ */ jsx(View, { style: [styles.buffered, { width: share(buffered) }] }),
+                              /* @__PURE__ */ jsx(View, { style: [styles.fill, { width: share(current) }] })
+                            ]
+                          },
+                          seg.start
+                        );
+                      }),
+                      /* @__PURE__ */ jsx(View, { style: [styles.knob, { start: `${pct * 100}%` }] })
+                    ] })
+                  }
+                ),
+                /* @__PURE__ */ jsxs(View, { style: styles.bar, children: [
+                  /* @__PURE__ */ jsx(
+                    Pressable,
+                    {
+                      accessibilityRole: "button",
+                      accessibilityLabel: isPlaying ? labels.pause : labels.play,
+                      accessibilityState: { selected: isPlaying },
+                      onPress: toggle,
+                      style: styles.barBtn,
+                      children: /* @__PURE__ */ jsx(
+                        Icon,
+                        {
+                          name: isPlaying ? "pause" : "play",
+                          size: theme.icon.md,
+                          color: theme.media.ink
+                        }
+                      )
+                    }
+                  ),
+                  live ? /* @__PURE__ */ jsxs(View, { style: styles.liveBadge, children: [
+                    /* @__PURE__ */ jsx(View, { style: styles.liveDot }),
+                    /* @__PURE__ */ jsx(Text, { style: styles.liveText, children: labels.live })
+                  ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+                    /* @__PURE__ */ jsx(Text, { style: styles.metaText, children: formatTime(current) }),
+                    /* @__PURE__ */ jsx(Text, { style: styles.metaText, children: "/" }),
+                    /* @__PURE__ */ jsx(Text, { style: styles.metaText, children: formatTime(duration) })
+                  ] }),
+                  chapterAt(current) ? /* @__PURE__ */ jsx(Text, { numberOfLines: 1, style: [styles.metaText, styles.chapterName], children: chapterAt(current)?.title }) : null,
+                  /* @__PURE__ */ jsxs(View, { style: styles.barEnd, children: [
+                    captions ? /* @__PURE__ */ jsx(
+                      Pressable,
+                      {
+                        accessibilityRole: "button",
+                        accessibilityLabel: labels.captions,
+                        accessibilityState: { selected: isCaptionsOn },
+                        "aria-pressed": isCaptionsOn,
+                        onPress: () => setCaptions(!isCaptionsOn),
+                        style: styles.barBtn,
+                        children: /* @__PURE__ */ jsx(
+                          Icon,
+                          {
+                            name: "captions",
+                            size: theme.icon.md,
+                            color: isCaptionsOn ? theme.color.accent : theme.media.ink
+                          }
+                        )
+                      }
+                    ) : null,
+                    /* @__PURE__ */ jsx(
+                      Pressable,
+                      {
+                        accessibilityRole: "button",
+                        accessibilityLabel: labels.speed(playbackRate),
+                        onPress: () => setSettingsPage("speed"),
+                        style: styles.barBtn,
+                        children: /* @__PURE__ */ jsxs(Text, { style: styles.metaText, children: [
+                          playbackRate,
+                          "\xD7"
+                        ] })
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      Pressable,
+                      {
+                        accessibilityRole: "button",
+                        accessibilityLabel: labels.settings,
+                        onPress: () => setSettingsPage("root"),
+                        style: styles.barBtn,
+                        children: /* @__PURE__ */ jsx(Icon, { name: "settings", size: theme.icon.md, color: theme.media.ink })
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      Pressable,
+                      {
+                        accessibilityRole: "button",
+                        accessibilityLabel: isFullscreen ? labels.exitFullscreen : labels.fullscreen,
+                        onPress: () => setFullscreen(!isFullscreen),
+                        style: styles.barBtn,
+                        children: /* @__PURE__ */ jsx(Icon, { name: "maximize", size: theme.icon.md, color: theme.media.ink })
+                      }
+                    )
+                  ] })
+                ] })
+              ]
+            }
+          ),
+          showUpNext && upNext ? /* @__PURE__ */ jsxs(View, { style: styles.overlay, children: [
+            /* @__PURE__ */ jsx(Text, { style: styles.overline, children: labels.upNextIn(countdown) }),
+            /* @__PURE__ */ jsxs(View, { style: styles.promptRow, children: [
+              upNext.poster ? /* @__PURE__ */ jsx(Image, { source: { uri: upNext.poster }, style: styles.upNextPoster }) : null,
+              /* @__PURE__ */ jsxs(View, { children: [
+                /* @__PURE__ */ jsx(Text, { style: styles.upNextTitle, children: upNext.title }),
+                upNext.duration ? /* @__PURE__ */ jsx(Text, { style: styles.metaText, children: upNext.duration }) : null
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxs(View, { style: styles.promptRow, children: [
+              /* @__PURE__ */ jsx(
+                MediaButton,
+                {
+                  label: labels.playNow,
+                  tone: "solid",
+                  styles,
+                  onPress: () => upNext.onPlay()
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                MediaButton,
+                {
+                  label: labels.replay,
+                  tone: "outline",
+                  styles,
+                  onPress: () => {
+                    seekTo(0);
+                    play();
+                  }
+                }
+              )
+            ] })
+          ] }) : null,
+          failed ? /* @__PURE__ */ jsxs(View, { accessibilityRole: "alert", style: styles.overlay, children: [
+            /* @__PURE__ */ jsx(Icon, { name: "alert-triangle", size: theme.icon.lg, color: theme.media.ink }),
+            /* @__PURE__ */ jsx(Text, { style: styles.errorText, children: labels.error }),
+            /* @__PURE__ */ jsx(
+              MediaButton,
+              {
+                label: labels.retry,
+                tone: "outline",
+                styles,
+                onPress: () => onRetry?.()
+              }
+            )
+          ] }) : null,
+          settingsPage != null ? /* @__PURE__ */ jsxs(View, { style: styles.sheetWrap, children: [
+            /* @__PURE__ */ jsx(
+              Pressable,
+              {
+                accessibilityRole: "button",
+                accessibilityLabel: labels.close,
+                onPress: () => setSettingsPage(null),
+                style: styles.sheetScrim
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              View,
+              {
+                accessibilityViewIsModal: true,
+                style: styles.sheetPanel,
+                accessibilityLabel: labels.settings,
+                children: settingsPage === "root" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                  /* @__PURE__ */ jsx(
+                    SheetRow,
+                    {
+                      label: labels.speedRow,
+                      value: `${playbackRate}\xD7`,
+                      onPress: () => setSettingsPage("speed"),
+                      styles
+                    }
+                  ),
+                  qualities && qualities.length > 1 ? /* @__PURE__ */ jsx(
+                    SheetRow,
+                    {
+                      label: labels.qualityRow,
+                      value: quality,
+                      onPress: () => setSettingsPage("quality"),
+                      styles
+                    }
+                  ) : null,
+                  captions ? /* @__PURE__ */ jsx(
+                    SheetRow,
+                    {
+                      label: labels.captions,
+                      value: isCaptionsOn ? void 0 : labels.captionsOff,
+                      checked: isCaptionsOn,
+                      onPress: () => setCaptions(!isCaptionsOn),
+                      styles
+                    }
+                  ) : null
+                ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+                  /* @__PURE__ */ jsx(
+                    SheetRow,
+                    {
+                      label: labels.back,
+                      onPress: () => setSettingsPage("root"),
+                      styles
+                    }
+                  ),
+                  settingsPage === "speed" ? RATES.map((r) => /* @__PURE__ */ jsx(
+                    SheetRow,
+                    {
+                      label: `${r}\xD7`,
+                      checked: r === playbackRate,
+                      onPress: () => {
+                        onPlaybackRateChange?.(r);
+                        setSettingsPage(null);
+                      },
+                      styles
+                    },
+                    r
+                  )) : (qualities ?? []).map((q) => /* @__PURE__ */ jsx(
+                    SheetRow,
+                    {
+                      label: q,
+                      checked: q === quality,
+                      onPress: () => {
+                        onQualityChange?.(q);
+                        setSettingsPage(null);
+                      },
+                      styles
+                    },
+                    q
+                  ))
+                ] })
+              }
+            )
+          ] }) : null
+        ]
+      }
+    ),
+    title || meta ? /* @__PURE__ */ jsxs(View, { style: styles.footer, children: [
+      title ? /* @__PURE__ */ jsx(
+        Text,
+        {
+          style: [
+            styles.title,
+            size !== "md" && { fontSize: theme.fontSize[size === "sm" ? 13 : 17] }
+          ],
+          children: title
+        }
+      ) : null,
+      meta ? /* @__PURE__ */ jsx(
+        Text,
+        {
+          style: [
+            styles.metaLine,
+            size !== "md" && { fontSize: theme.fontSize[size === "sm" ? 12 : 14] }
+          ],
+          children: meta
+        }
+      ) : null
+    ] }) : null,
+    transcript ? /* @__PURE__ */ jsx(View, { style: styles.transcript, children: /* @__PURE__ */ jsx(
+      TranscriptSlot,
+      {
+        transcript,
+        currentTime: current,
+        onSeek: (t) => {
+          if (position == null) setOwnPosition(t);
+          onSeek?.(t);
+        }
+      }
+    ) }) : null
+  ] });
+}
+function MediaButton({
+  label,
+  tone,
+  round = false,
+  onPress,
+  style,
+  styles
+}) {
+  return /* @__PURE__ */ jsx(
+    Pressable,
+    {
+      accessibilityRole: "button",
+      accessibilityLabel: label,
+      onPress,
+      style: [
+        styles.mediaBtn,
+        round && styles.mediaBtnRound,
+        tone === "solid" && styles.mediaBtnSolid,
+        tone === "glass" && styles.mediaBtnGlass,
+        tone === "outline" && styles.mediaBtnOutline,
+        style
+      ],
+      children: /* @__PURE__ */ jsx(Text, { style: [styles.mediaBtnText, tone === "solid" && styles.mediaBtnTextSolid], children: label })
+    }
+  );
+}
+function SheetRow({
+  label,
+  value,
+  checked,
+  onPress,
+  styles
+}) {
+  const theme = useLoamTheme("video-player");
+  return /* @__PURE__ */ jsxs(
+    Pressable,
+    {
+      accessibilityRole: "button",
+      accessibilityLabel: value ? `${label}, ${value}` : label,
+      accessibilityState: checked == null ? void 0 : { selected: checked },
+      onPress,
+      style: styles.sheetRow,
+      children: [
+        /* @__PURE__ */ jsx(Text, { style: styles.sheetRowText, children: label }),
+        value ? /* @__PURE__ */ jsx(Text, { style: styles.sheetRowValue, children: value }) : null,
+        checked ? /* @__PURE__ */ jsx(Icon, { name: "check", size: theme.icon.md, color: theme.color.accent }) : null
+      ]
+    }
+  );
+}
+var sheet = createStyleSheet((theme) => ({
+  transcript: { padding: theme.space[12], paddingTop: 0 },
+  root: {
+    borderRadius: theme.radius.lg,
+    borderWidth: theme.borderWidth.base,
+    borderColor: theme.color.border,
+    backgroundColor: theme.color.surface,
+    overflow: "hidden"
+  },
+  // The video ground: dark in every theme, as the design draws it, so the white
+  // chrome never rests on a light poster.
+  stage: { position: "relative", width: "100%", backgroundColor: theme.black.a14 },
+  // Top-centre, not centred: the label captions the empty poster, it does not
+  // pretend to be the poster's content.
+  placeholder: {
+    ...cover(),
+    alignItems: "center",
+    justifyContent: "flex-start",
+    paddingTop: theme.space[POSTER.padTop]
+  },
+  placeholderLabel: {
+    fontFamily: theme.font.mono,
+    fontSize: theme.fontSize[POSTER.fontSize],
+    letterSpacing: theme.fontSize[POSTER.fontSize] * POSTER.trackingEm,
+    textTransform: "uppercase",
+    color: theme.media.ink,
+    opacity: theme.opacity[80]
+  },
+  stagePress: cover(),
+  // A scrim, so white control glyphs never sit on unknown pixels. Fixed black
+  // rather than the mode-aware `overlay.*`: what is underneath is video, and
+  // darkening it is the only direction that makes a white glyph legible.
+  scrim: {
+    position: "absolute",
+    left: 0,
+    right: 0,
+    bottom: 0,
+    height: theme.space[76],
+    // 0.55 black: the white time and speed labels clear 4.5:1 even over a light poster.
+    backgroundColor: theme.black.a12
+  },
+  scrimTall: {
+    position: "absolute",
+    left: 0,
+    right: 0,
+    bottom: 0,
+    height: theme.space[128],
+    backgroundColor: theme.black.a4
+  },
+  centre: { ...cover(), alignItems: "center", justifyContent: "center" },
+  endSelf: { alignSelf: "flex-end" },
+  overlay: {
+    ...cover(),
+    alignItems: "center",
+    justifyContent: "center",
+    gap: theme.space.s3,
+    backgroundColor: theme.black.a12
+  },
+  overline: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.caption2.fontSize,
+    fontWeight: theme.fontWeight.semibold,
+    letterSpacing: theme.tracking.caps * theme.type.caption2.fontSize,
+    textTransform: "uppercase",
+    color: theme.media.ink
+  },
+  errorText: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.footnote.fontSize,
+    color: theme.media.ink,
+    textAlign: "center"
+  },
+  upNextPoster: { width: theme.space[100], aspectRatio: 16 / 9, borderRadius: theme.radius.sm },
+  upNextTitle: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.fontSize[14],
+    fontWeight: theme.fontWeight.semibold,
+    color: theme.media.ink
+  },
+  promptSlot: {
+    position: "absolute",
+    top: 0,
+    start: 0,
+    end: 0,
+    alignItems: "center",
+    justifyContent: "center",
+    gap: theme.space.s3
+  },
+  promptNote: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.footnote.fontSize,
+    color: theme.media.ink,
+    paddingHorizontal: theme.space.s2,
+    paddingVertical: theme.space[2],
+    borderRadius: theme.radius.xs,
+    backgroundColor: theme.black.a12,
+    overflow: "hidden"
+  },
+  promptRow: { flexDirection: "row", alignItems: "center", gap: theme.space.s2 },
+  mediaBtn: {
+    height: theme.space[36],
+    paddingHorizontal: theme.space[14],
+    borderRadius: theme.radius.md,
+    alignItems: "center",
+    justifyContent: "center",
+    borderWidth: theme.borderWidth.base,
+    borderColor: "transparent"
+  },
+  mediaBtnRound: { borderRadius: theme.radius.full },
+  mediaBtnSolid: { backgroundColor: theme.media.ink },
+  mediaBtnGlass: { backgroundColor: theme.black.a8, borderColor: theme.white.a5 },
+  mediaBtnOutline: { borderColor: theme.white.a12 },
+  mediaBtnText: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.footnote.fontSize,
+    fontWeight: theme.fontWeight.semibold,
+    color: theme.media.ink
+  },
+  mediaBtnTextSolid: { color: theme.media.onInk },
+  captionSlot: { position: "absolute", start: 0, end: 0, alignItems: "center" },
+  captionText: {
+    maxWidth: "80%",
+    fontFamily: theme.font.sans,
+    fontSize: theme.fontSize[16],
+    lineHeight: theme.fontSize[16] * 1.4,
+    textAlign: "center",
+    color: theme.media.ink,
+    paddingHorizontal: theme.space.s2,
+    paddingVertical: theme.space[2],
+    borderRadius: theme.radius.xs,
+    backgroundColor: theme.black.a12,
+    overflow: "hidden"
+  },
+  preview: {
+    position: "absolute",
+    bottom: "100%",
+    width: theme.space[160],
+    marginStart: -theme.space[160] / 2,
+    marginBottom: theme.space.s3,
+    alignItems: "center",
+    gap: theme.space.s1
+  },
+  previewFrame: {
+    width: "100%",
+    aspectRatio: 16 / 9,
+    borderRadius: theme.radius.sm,
+    backgroundColor: theme.black.a12
+  },
+  previewPill: {
+    height: theme.space[24],
+    maxWidth: "100%",
+    paddingHorizontal: theme.space[10],
+    flexDirection: "row",
+    alignItems: "center",
+    gap: theme.space.s2,
+    borderRadius: theme.radius.full,
+    backgroundColor: theme.black.a8,
+    borderWidth: theme.borderWidth.base,
+    borderColor: theme.white.a5
+  },
+  previewTime: {
+    fontFamily: theme.font.mono,
+    fontSize: theme.fontSize[12],
+    fontWeight: theme.fontWeight.semibold,
+    color: theme.media.ink
+  },
+  previewChapter: {
+    flexShrink: 1,
+    fontFamily: theme.font.sans,
+    fontSize: theme.fontSize[12],
+    color: theme.media.ink
+  },
+  segment: {
+    flexBasis: 0,
+    height: "100%",
+    overflow: "hidden",
+    borderRadius: theme.radius.full,
+    backgroundColor: theme.white.a9
+  },
+  buffered: {
+    position: "absolute",
+    start: 0,
+    top: 0,
+    bottom: 0,
+    backgroundColor: theme.white.a12
+  },
+  chapterName: { flexShrink: 1 },
+  liveBadge: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: theme.space.s1,
+    paddingHorizontal: theme.space.s2,
+    height: theme.space[24],
+    borderRadius: theme.radius.full,
+    backgroundColor: theme.black.a8,
+    borderWidth: theme.borderWidth.base,
+    borderColor: theme.white.a5
+  },
+  liveDot: {
+    width: theme.space.s2,
+    height: theme.space.s2,
+    borderRadius: theme.radius.full,
+    backgroundColor: theme.color.danger
+  },
+  liveText: {
+    fontFamily: theme.font.mono,
+    fontSize: theme.type.caption2.fontSize,
+    fontWeight: theme.fontWeight.semibold,
+    color: theme.media.ink
+  },
+  pillBar: {
+    width: theme.space[64],
+    height: theme.space.s1,
+    borderRadius: theme.radius.full,
+    overflow: "hidden",
+    backgroundColor: theme.white.a9
+  },
+  pillBarFill: { height: "100%", backgroundColor: theme.media.ink },
+  pill: {
+    position: "absolute",
+    alignSelf: "center",
+    top: "40%",
+    flexDirection: "row",
+    gap: theme.space.s2,
+    alignItems: "center",
+    height: theme.space[36],
+    paddingHorizontal: theme.space[16],
+    borderRadius: theme.radius.full,
+    backgroundColor: theme.black.a8,
+    justifyContent: "center"
+  },
+  pillText: {
+    fontFamily: theme.font.mono,
+    fontSize: theme.fontSize[13],
+    fontWeight: theme.fontWeight.semibold,
+    color: theme.media.ink
+  },
+  bar: {
+    height: theme.ctl.lg,
+    flexDirection: "row",
+    alignItems: "center",
+    gap: theme.space[4]
+  },
+  barBtn: {
+    minWidth: theme.ctl.lg,
+    height: theme.ctl.lg,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  barEnd: { marginStart: "auto", flexDirection: "row", alignItems: "center" },
+  sheetWrap: { ...cover(), justifyContent: "flex-end" },
+  sheetScrim: { ...cover(), backgroundColor: theme.black.a8 },
+  sheetPanel: {
+    backgroundColor: theme.color.surface,
+    borderTopLeftRadius: theme.radius.lg,
+    borderTopRightRadius: theme.radius.lg,
+    paddingVertical: theme.space[8]
+  },
+  sheetRow: {
+    minHeight: theme.space[48],
+    paddingHorizontal: theme.space[16],
+    flexDirection: "row",
+    alignItems: "center",
+    gap: theme.space[12]
+  },
+  sheetRowText: {
+    flex: 1,
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.body.fontSize,
+    color: theme.color.text
+  },
+  sheetRowValue: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.footnote.fontSize,
+    color: theme.color.text3
+  },
+  // The band of the stage the transport bar does not cover. `bottom` is set from
+  // the bar's measured height at render time.
+  playSlot: {
+    position: "absolute",
+    top: 0,
+    start: 0,
+    end: 0,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  // `tapMin`-sized *visual*, down from 56: the tap target is the whole stage, so
+  // the circle only has to be big enough to read as a play affordance. On a
+  // 16:9 stage 260pt wide, 56pt was a third of the frame's height and collided
+  // with the scrubber.
+  // loam-contrast-ignore — media chrome: the disc sits on video, `shadow.sm` is
+  // a lift rather than its boundary, and the glyph carries the state. An edge
+  // here would read as a defect over the frame.
+  playButton: {
+    // 56, media ink — the same on every video.
+    width: theme.space[56],
+    height: theme.space[56],
+    borderRadius: theme.radius.full,
+    backgroundColor: theme.media.ink,
+    alignItems: "center",
+    justifyContent: "center",
+    // Width is fixed, so trailing padding narrows the content box and pulls the
+    // centred glyph back by half of it — see PLAY_GLYPH_NUDGE.
+    paddingEnd: PLAY_GLYPH_NUDGE * -2,
+    ...theme.shadow.sm
+  },
+  controls: {
+    position: "absolute",
+    start: 0,
+    end: 0,
+    bottom: 0,
+    paddingHorizontal: theme.space.s3,
+    gap: theme.space.s1
+  },
+  // The visible rule is 4px; this row is the target it lives in.
+  seek: { height: theme.space.s5, justifyContent: "center" },
+  track: {
+    height: theme.space.s1,
+    borderRadius: theme.radius.full,
+    flexDirection: "row",
+    gap: theme.space[2],
+    alignItems: "center"
+  },
+  fill: {
+    position: "absolute",
+    start: 0,
+    top: 0,
+    bottom: 0,
+    backgroundColor: theme.color.accent
+  },
+  knob: {
+    position: "absolute",
+    top: -theme.space.s1,
+    width: theme.space.s3,
+    height: theme.space.s3,
+    marginStart: -theme.space.s3 / 2,
+    borderRadius: theme.radius.full,
+    backgroundColor: theme.color.surface,
+    ...theme.shadow.knob
+  },
+  metaRow: { flexDirection: "row", alignItems: "center", justifyContent: "space-between" },
+  badges: { flexDirection: "row", alignItems: "center", gap: theme.space.s2 },
+  metaText: {
+    fontFamily: theme.font.mono,
+    fontSize: theme.type.caption2.fontSize,
+    lineHeight: theme.type.caption2.lineHeight,
+    // The scrim over the poster is a light-mid tone in the tested (light) theme,
+    // so a bright caption failed AA (~2.3:1). The on-surface `text` token clears
+    // AA over the scrim (≥6.5:1) and matches the poster's own dark label.
+    // The bar now sits on the black scrim, so it takes the media ink.
+    color: theme.media.ink
+  },
+  footer: { padding: theme.space.s4, gap: theme.space.s1 },
+  title: {
+    fontFamily: theme.font.sans,
+    fontWeight: theme.fontWeight.semibold,
+    fontSize: theme.fontSize[15],
+    color: theme.color.text
+  },
+  metaLine: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.footnote.fontSize,
+    lineHeight: theme.type.footnote.lineHeight,
+    color: theme.color.text2
+  }
+}));
+function cover() {
+  return { position: "absolute", left: 0, right: 0, top: 0, bottom: 0 };
+}
+
+export { VideoPlayer };