@openrails/contentkit-ui 0.0.0-placeholder → 0.68.0

package/dist/components/video-player.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"video-player.js","names":[],"sources":["../../src/components/video-player.tsx"],"sourcesContent":["import {\n  AlertCircleIcon,\n  ArrowShrink02Icon,\n  ClosedCaptionIcon,\n  FullScreenIcon,\n  PauseIcon,\n  PictureInPicture01Icon,\n  PictureInPictureExitIcon,\n  PictureInPictureOnIcon,\n  PlayIcon,\n  RectangularIcon,\n  Refresh01Icon,\n  Settings01Icon,\n} from \"@hugeicons/core-free-icons\";\nimport { HugeiconsIcon } from \"@hugeicons/react\";\nimport { cn } from \"cn\";\nimport { useCallback, useEffect, useRef, useState, type CSSProperties, type MouseEvent, type ReactNode } from \"react\";\nimport type { ContentKitUiAppearance } from \"../appearance.js\";\nimport { formatDuration } from \"../client/gallery.js\";\nimport type { PlaybackError } from \"../client/playback.js\";\nimport {\n  JUMP_SEEK,\n  PLAYBACK_SPEEDS,\n  PLAYER_VOLUME_KEY,\n  nextSpeed,\n  playerKeyAction,\n  resumeAt,\n  writeVolume,\n  type PlayerAction,\n  type PlayerTrack,\n} from \"../client/player.js\";\nimport { useHlsPlayer, type HlsPlayerOptions } from \"../react/gallery.js\";\nimport { useInlinePreview } from \"../react/inline-preview.js\";\nimport { useActiveCues, useFullscreen, useMediaState, usePictureInPicture, useProgressReports, useSprite, type PlaybackProgress } from \"../react/player.js\";\nimport { useMessages } from \"../i18n/context.js\";\nimport { ContentKitUiRoot } from \"../scope.js\";\nimport { RenditionImg } from \"./rendition-img.js\";\nimport { publicRenditions, type PublicPreset } from \"../client/public.js\";\nimport type { EncodeProgress as Progress } from \"../client/generated/wire.js\";\nimport { EncodeProgress } from \"./encode-progress.js\";\nimport { Button } from \"#ckui/ui/button\";\nimport { Captions, ControlButton, SeekBar, SeekFlash, SettingsMenu, Spinner, VolumeControl, clock, playerButtonClass, type MenuSection, type SeekFlashState } from \"./player-controls.js\";\n\ntype XhrSetup = HlsPlayerOptions[\"xhrSetup\"];\n\n/** The first frame of a video's seek sprite (sprite.vtt), fitted like object-fit. */\nexport function SpriteFrame({ vtt, xhrSetup, fit = \"contain\", className }: { vtt: string; xhrSetup?: XhrSetup; fit?: \"contain\" | \"cover\"; className?: string }) {\n  const sprite = useSprite(vtt, xhrSetup);\n  const cue = sprite?.cues[0];\n  if (!sprite || !cue) return null;\n  return (\n    <svg\n      aria-hidden\n      className={cn(\"pointer-events-none absolute inset-0 size-full\", className)}\n      viewBox={`${cue.x} ${cue.y} ${cue.w} ${cue.h}`}\n      preserveAspectRatio={fit === \"cover\" ? \"xMidYMid slice\" : \"xMidYMid meet\"}\n      data-ckui=\"sprite-frame\"\n    >\n      <image href={cue.url} width={sprite.width} height={sprite.height} />\n    </svg>\n  );\n}\n\ntype At<T> = T extends unknown ? T & { time: number } : never;\n\n/** Playback as it happens, for analytics; never during an inline preview. */\nexport type PlayerEvent = At<\n  | { type: \"play\" | \"playing\" | \"pause\" | \"waiting\" | \"ended\" }\n  | { type: \"seek\"; from: number }\n  | { type: \"rate\"; rate: number }\n  | { type: \"volume\"; volume: number; muted: boolean }\n  /** The viewer's quality choice; height null is Auto. */\n  | { type: \"quality\"; height: number | null }\n  | { type: \"audio\"; track: PlayerTrack }\n  | { type: \"subtitles\"; track: PlayerTrack | null }\n  | { type: \"fullscreen\" | \"pip\" | \"theater\"; on: boolean }\n  | { type: \"error\"; error: PlaybackError }\n>;\n\n/** Everything a VideoMiniPlayer needs to carry on where the player stopped. */\nexport interface PlayerHandoff {\n  base: string;\n  time: number;\n  playing: boolean;\n  width?: number;\n  height?: number;\n  duration?: number;\n  poster?: string | PublicPreset | null;\n  audioLanguage?: string;\n  subtitleLanguage?: string | null;\n}\n\n/** A host entry in the settings menu: a choice (e.g. version) or an action (e.g. report a problem). */\nexport type PlayerMenuItem =\n  | { label: string; value: string; options: readonly { value: string; label: string }[]; onChange: (value: string) => void }\n  | { label: string; onSelect: () => void };\n\nexport interface PlayerSlotContext {\n  /** Where popups must portal to stay visible: the player while fullscreen, else undefined (the body). */\n  container?: HTMLElement;\n  /** The control buttons' class. */\n  className: string;\n}\n\nexport interface VideoPlayerProps extends Omit<HlsPlayerOptions, \"src\"> {\n  /** The ladder's HLS folder (client.media.hlsBase: {media}/{kind}/{id}/hls/{dir}): master.m3u8 and sprite.vtt resolve under it. */\n  base?: string | null;\n  /** Shown until playback starts: the poster's public preset or a URL; default the first sprite frame. */\n  poster?: string | PublicPreset | null;\n  /** The video's size (read API w/h): the box is reserved before anything loads; default the decoded frame's. */\n  width?: number;\n  height?: number;\n  duration?: number;\n  /** A pending encode (an editor read's `pending` and `progress`): shows its progress instead of a player. */\n  pending?: boolean;\n  progress?: Progress | null;\n  /** Why the video cannot be encoded (an editor read's `failed.message`). */\n  failed?: string;\n  /**\n   * `frame` is as wide as its column allows at the video's aspect, never\n   * taller than `maxHeight`; `fill` fills a sized parent (a carousel slide).\n   */\n  layout?: \"frame\" | \"fill\";\n  maxHeight?: string;\n  /** Preview muted inline before play (hover, or in view on touch); default the provider's. */\n  inlinePreview?: boolean;\n  /** Where the preview starts, seconds; default 10% in. */\n  previewStart?: number;\n  /** Shortcuts while focus is in the player (default), page-wide (a watch page: one such player per page), or none. */\n  keyboard?: \"focus\" | \"global\" | false;\n  /** Resume points and watch time: every `progressInterval` of playback, and on pause, seek, end, page hide and unload. */\n  onProgress?: (progress: PlaybackProgress) => void;\n  /** Milliseconds. Default 10000. */\n  progressInterval?: number;\n  onEvent?: (event: PlayerEvent) => void;\n  /** Theater mode is the host's layout; the button shows with onTheaterChange. */\n  theater?: boolean;\n  onTheaterChange?: (theater: boolean) => void;\n  /** Shows the mini-player button: the player pauses and hands over where it was. */\n  onMiniPlayer?: (handoff: PlayerHandoff) => void;\n  /** A control-bar slot for the host's downloads. */\n  renderDownloads?: (ctx: PlayerSlotContext) => ReactNode;\n  /** Host entries in the settings menu, after its own. */\n  menuItems?: readonly PlayerMenuItem[];\n  crossOrigin?: \"anonymous\" | \"use-credentials\";\n  label?: string;\n  className?: string;\n  style?: CSSProperties;\n  appearance?: ContentKitUiAppearance;\n}\n\nconst CONTROLS_IDLE_MS = 2500;\nconst DOUBLE_TAP_MS = 300;\nconst TAP_SEEK_CONTINUE_MS = 700;\nconst SEEK_FLASH_MS = 650;\n\nconst TEXT_ENTRY =\n  'textarea, select, [contenteditable]:not([contenteditable=\"false\"]), [role=textbox], [role=combobox], [role=searchbox], input:not([type=range]):not([type=button]):not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=reset])';\nconst MENU = \"[role=menu], [role=menuitem], [role=menuitemradio], [role=menuitemcheckbox], [role=listbox], [role=option]\";\nconst OUTSIDE_INTERACTIVE = \"a, button, input, [role=button], [role=dialog], [role=alertdialog]\";\n\n/**\n * Whether a shortcut key belongs to the player: never while typing or in a\n * menu, not the arrows on a slider (it steps itself), and outside the\n * player (page-wide shortcuts) not on another control.\n */\nexport function keyAllowed(target: EventTarget | null, key: string, root: Element): boolean {\n  if (!(target instanceof Element)) return true;\n  if (target.closest(TEXT_ENTRY) || target.closest(MENU)) return false;\n  if (target.closest(\"input[type=range], [role=slider]\") && /^(Arrow|Page|Home$|End$)/.test(key)) return false;\n  return root.contains(target) || !target.closest(OUTSIDE_INTERACTIVE);\n}\n\n// Space on one of the player's buttons is play/pause, not a click on the button last used.\nconst spaceOnButton = (target: EventTarget | null, root: Element) =>\n  target instanceof Element && root.contains(target) && !!target.closest(\"button\") && !target.closest(MENU);\n\n/**\n * An HLS player that never spins forever: poster and play control, its own\n * controls (seek with sprite preview, volume, subtitles, audio, quality,\n * speed, picture-in-picture, theater, fullscreen, mini player), shortcuts,\n * touch gestures, resume and progress reports, and a specific error with\n * Retry and a support code.\n */\nexport function VideoPlayer({\n  base,\n  poster,\n  width,\n  height,\n  duration,\n  pending,\n  progress,\n  failed,\n  layout = \"frame\",\n  maxHeight = \"80svh\",\n  inlinePreview,\n  previewStart,\n  keyboard = \"focus\",\n  onProgress,\n  progressInterval = 10_000,\n  onEvent,\n  theater,\n  onTheaterChange,\n  onMiniPlayer,\n  renderDownloads,\n  menuItems,\n  crossOrigin,\n  label,\n  className,\n  style,\n  appearance,\n  startAt,\n  ...options\n}: VideoPlayerProps) {\n  const { t } = useMessages();\n  const playable = !!base && !pending && !failed;\n  const src = playable ? `${base}master.m3u8` : null;\n  const start = resumeAt(startAt, duration);\n  const player = useHlsPlayer({ ...options, src, startAt: start });\n  const { status, error, started, previewing, audio, subtitles, quality } = player;\n  const [root, setRoot] = useState<HTMLDivElement | null>(null);\n  const [video, setVideo] = useState<HTMLVideoElement | null>(null);\n  const attach = player.ref;\n  const videoRef = useCallback(\n    (el: HTMLVideoElement | null) => {\n      attach(el);\n      setVideo(el);\n    },\n    [attach],\n  );\n  useInlinePreview({\n    setting: inlinePreview,\n    available: playable && !started && !error && options.active !== false && !options.autoPlay,\n    target: root,\n    playing: started && status === \"playing\",\n    start: () => player.preview(previewStartAt(previewStart, duration)),\n    stop: player.unload,\n  });\n  const media = useMediaState(video);\n  const fs = useFullscreen(root, video);\n  const pip = usePictureInPicture(video);\n  const cues = useActiveCues(video);\n  const sprite = useSprite(started && base ? `${base}sprite.vtt` : null, options.xhrSetup);\n  const live = !previewing && started;\n  useProgressReports(video, { enabled: live, source: live ? src : null, interval: progressInterval, onProgress });\n\n  // Events.\n  const emit = useRef(onEvent);\n  emit.current = onEvent;\n  const sending = useRef(false);\n  sending.current = !previewing && status !== \"idle\";\n  const send = useCallback((e: { type: string; [k: string]: unknown }, always = false) => {\n    if ((always || sending.current) && emit.current) emit.current({ ...e, time: video?.currentTime ?? 0 } as PlayerEvent);\n  }, [video]);\n  useEffect(() => {\n    if (!video) return;\n    let from = 0;\n    const h: Record<string, () => void> = {\n      play: () => send({ type: \"play\" }),\n      playing: () => send({ type: \"playing\" }),\n      pause: () => !video.ended && send({ type: \"pause\" }),\n      waiting: () => send({ type: \"waiting\" }),\n      ended: () => send({ type: \"ended\" }),\n      timeupdate: () => {\n        if (!video.seeking) from = video.currentTime;\n      },\n      seeked: () => {\n        send({ type: \"seek\", from });\n        from = video.currentTime;\n      },\n      ratechange: () => send({ type: \"rate\", rate: video.playbackRate }),\n    };\n    for (const [k, f] of Object.entries(h)) video.addEventListener(k, f);\n    return () => {\n      for (const [k, f] of Object.entries(h)) video.removeEventListener(k, f);\n    };\n  }, [video, send]);\n  useEffect(() => {\n    if (error && !previewing) send({ type: \"error\", error }, true);\n  }, [error, previewing, send]);\n  const was = useRef({ fs: false, pip: false });\n  useEffect(() => {\n    if (was.current.fs !== fs.active) send({ type: \"fullscreen\", on: fs.active });\n    if (was.current.pip !== pip.active) send({ type: \"pip\", on: pip.active });\n    was.current = { fs: fs.active, pip: pip.active };\n  }, [fs.active, pip.active, send]);\n\n  // A new resume point for the playing source seeks to it.\n  const lastStart = useRef(start);\n  useEffect(() => {\n    if (lastStart.current === start) return;\n    lastStart.current = start;\n    if (video && started) video.currentTime = start;\n  }, [start, video, started]);\n\n  // Controls show on pointer movement and hide after a pause in it while playing.\n  const [poked, setPoked] = useState(false);\n  const idle = useRef<ReturnType<typeof setTimeout>>(undefined);\n  const poke = useCallback(() => {\n    setPoked(true);\n    clearTimeout(idle.current);\n    idle.current = setTimeout(() => setPoked(false), CONTROLS_IDLE_MS);\n  }, []);\n  const hide = useCallback(() => {\n    clearTimeout(idle.current);\n    setPoked(false);\n  }, []);\n  useEffect(() => () => clearTimeout(idle.current), []);\n  useEffect(() => {\n    if (started) poke();\n  }, [started, poke]);\n  const [menuOpen, setMenuOpen] = useState(false);\n  const [scrubbing, setScrubbing] = useState(false);\n  const [keyFocus, setKeyFocus] = useState(false);\n  const controlsShown = started && !error && (poked || media.paused || media.ended || menuOpen || scrubbing || keyFocus);\n\n  const [flash, setFlash] = useState<SeekFlashState | null>(null);\n  const flashTimer = useRef<ReturnType<typeof setTimeout>>(undefined);\n  const flashSeek = useCallback((direction: -1 | 1, seconds: number) => {\n    const continuing = flashTimer.current !== undefined;\n    clearTimeout(flashTimer.current);\n    setFlash((prev) => ({ direction, seconds: continuing && prev?.direction === direction ? prev.seconds + seconds : seconds }));\n    flashTimer.current = setTimeout(() => {\n      setFlash(null);\n      flashTimer.current = undefined;\n    }, SEEK_FLASH_MS);\n  }, []);\n  useEffect(() => () => clearTimeout(flashTimer.current), []);\n\n  const volumeKey = options.volumeKey === undefined ? PLAYER_VOLUME_KEY : options.volumeKey;\n  const dur = media.duration || duration || 0;\n  const seek = (to: number) => {\n    if (video) video.currentTime = Math.min(dur || to, Math.max(0, to));\n  };\n  const seekBy = (seconds: number) => {\n    if (!video) return;\n    seek(video.currentTime + seconds);\n    flashSeek(seconds < 0 ? -1 : 1, Math.abs(seconds));\n  };\n  const toggle = () => {\n    if (!video) return;\n    if (!started || video.ended) {\n      if (video.ended) video.currentTime = 0;\n      player.play();\n    } else if (video.paused) player.play();\n    else video.pause();\n  };\n  const setVolume = (v: number) => {\n    if (!video) return;\n    video.volume = Math.min(1, Math.max(0, v));\n    if (video.volume > 0 && video.muted) video.muted = false;\n    writeVolume(volumeKey, { volume: video.volume, muted: video.muted });\n    send({ type: \"volume\", volume: video.volume, muted: video.muted });\n  };\n  const toggleMute = () => {\n    if (!video) return;\n    video.muted = !video.muted;\n    if (!video.muted && video.volume === 0) video.volume = 1;\n    writeVolume(volumeKey, { volume: video.volume, muted: video.muted });\n    send({ type: \"volume\", volume: video.volume, muted: video.muted });\n  };\n  const selectAudio = (i: number) => {\n    audio.select(i);\n    const track = audio.list[i];\n    if (track) send({ type: \"audio\", track });\n  };\n  const lastSub = useRef(-1);\n  if (subtitles.selected >= 0) lastSub.current = subtitles.selected;\n  const selectSubs = (i: number) => {\n    subtitles.select(i);\n    send({ type: \"subtitles\", track: subtitles.list[i] ?? null });\n  };\n  const toggleCaptions = () => selectSubs(subtitles.selected >= 0 ? -1 : lastSub.current >= 0 ? lastSub.current : 0);\n  const selectQuality = (i: number) => {\n    quality.select(i);\n    send({ type: \"quality\", height: quality.levels.find((l) => l.index === i)?.height ?? null });\n  };\n  const toggleTheater = () => {\n    onTheaterChange?.(!theater);\n    send({ type: \"theater\", on: !theater });\n  };\n  const openMini = () => {\n    if (!onMiniPlayer || !base || !video) return;\n    const a = audio.list[audio.selected];\n    const s = subtitles.list[subtitles.selected];\n    const handoff: PlayerHandoff = {\n      base,\n      time: video.currentTime,\n      playing: !video.paused && !video.ended,\n      width: width ?? (video.videoWidth || undefined),\n      height: height ?? (video.videoHeight || undefined),\n      duration: dur || undefined,\n      poster,\n      audioLanguage: a?.lang,\n      subtitleLanguage: s?.lang ?? null,\n    };\n    video.pause();\n    if (fs.active) fs.toggle();\n    onMiniPlayer(handoff);\n  };\n\n  const run = (a: PlayerAction): boolean => {\n    if (!video) return false;\n    if (!started && a.type !== \"toggle\") return false;\n    switch (a.type) {\n      case \"toggle\":\n        toggle();\n        break;\n      case \"seekBy\":\n        seekBy(a.seconds);\n        break;\n      case \"seekTo\":\n        if (!dur) return false;\n        seek(dur * a.fraction);\n        break;\n      case \"volumeBy\":\n        setVolume((video.muted ? 0 : video.volume) + a.delta);\n        break;\n      case \"mute\":\n        toggleMute();\n        break;\n      case \"captions\":\n        if (!subtitles.list.length) return false;\n        toggleCaptions();\n        break;\n      case \"fullscreen\":\n        if (!fs.supported) return false;\n        fs.toggle();\n        break;\n      case \"theater\":\n        if (!onTheaterChange) return false;\n        toggleTheater();\n        break;\n      case \"miniPlayer\":\n        if (!onMiniPlayer) return false;\n        openMini();\n        break;\n      case \"speed\":\n        video.playbackRate = nextSpeed(video.playbackRate, a.step);\n        break;\n    }\n    if (started) poke();\n    return true;\n  };\n  const runRef = useRef(run);\n  runRef.current = run;\n  const active = options.active !== false;\n  useEffect(() => {\n    if (!keyboard || !root || !active) return;\n    const on: EventTarget = keyboard === \"global\" ? document : root;\n    const down = (e: Event) => {\n      const k = e as KeyboardEvent;\n      if (k.defaultPrevented) return;\n      const action = playerKeyAction(k);\n      if (!action || !keyAllowed(k.target, k.key, root) || !runRef.current(action)) return;\n      k.preventDefault();\n    };\n    const up = (e: Event) => {\n      const k = e as KeyboardEvent;\n      if (k.key === \" \" && spaceOnButton(k.target, root)) k.preventDefault();\n    };\n    on.addEventListener(\"keydown\", down);\n    on.addEventListener(\"keyup\", up);\n    return () => {\n      on.removeEventListener(\"keydown\", down);\n      on.removeEventListener(\"keyup\", up);\n    };\n  }, [keyboard, root, active]);\n\n  // Mouse: click plays and pauses, double click is fullscreen. Touch: a tap\n  // shows or hides the controls; double taps on either side seek 10 s, and\n  // taps that keep coming keep seeking.\n  const pointerType = useRef(\"mouse\");\n  const lastTap = useRef<{ at: number; side: -1 | 1 } | null>(null);\n  const tapSeekUntil = useRef(0);\n  const onSurfaceClick = (e: MouseEvent<HTMLDivElement>) => {\n    if (pointerType.current === \"mouse\") {\n      toggle();\n      poke();\n      return;\n    }\n    const r = e.currentTarget.getBoundingClientRect();\n    const x = r.width ? (e.clientX - r.left) / r.width : 0.5;\n    const side = x < 0.4 ? -1 : x > 0.6 ? 1 : null;\n    const now = Date.now();\n    const last = lastTap.current;\n    lastTap.current = side ? { at: now, side } : null;\n    if (side && last?.side === side && (now < tapSeekUntil.current || now - last.at <= DOUBLE_TAP_MS)) {\n      tapSeekUntil.current = now + TAP_SEEK_CONTINUE_MS;\n      seekBy(side * JUMP_SEEK);\n      return;\n    }\n    if (controlsShown && !media.paused) hide();\n    else poke();\n  };\n  const onSurfaceDoubleClick = () => {\n    if (Date.now() >= tapSeekUntil.current && fs.supported) fs.toggle();\n  };\n\n  const aspect = width && height ? width / height : (media.aspect ?? 16 / 9);\n  const frame: CSSProperties = fs.active\n    ? { width: \"100%\", height: \"100%\", borderRadius: 0 }\n    : layout === \"frame\"\n      ? { aspectRatio: String(aspect), width: `min(100%, calc(${maxHeight} * ${aspect}))`, marginInline: \"auto\" }\n      : {};\n  const posterOutputs = typeof poster === \"string\" ? [] : publicRenditions(poster);\n  const busy = !error && !previewing && (status === \"loading\" || status === \"buffering\");\n  // The preview shows once frames play; the cover stays until then.\n  const shown = previewing && status === \"playing\";\n  const fade = cn(\"transition-opacity duration-300 motion-reduce:transition-none\", shown && \"opacity-0\");\n  const portal = fs.active && root ? root : undefined;\n  const sections = settingsSections();\n\n  function trackName(tr: PlayerTrack) {\n    const name = tr.label || t(\"player.track\", { number: tr.index + 1 });\n    return tr.forced ? t(\"player.forced\", { label: name }) : name;\n  }\n  function settingsSections(): MenuSection[] {\n    const out: MenuSection[] = [];\n    if (audio.list.length > 1)\n      out.push({ key: \"audio\", label: t(\"player.audio\"), value: String(audio.selected), options: audio.list.map((x) => ({ value: String(x.index), label: trackName(x) })), onChange: (v) => selectAudio(Number(v)) });\n    if (subtitles.list.length)\n      out.push({\n        key: \"subtitles\",\n        label: t(\"player.subtitles\"),\n        value: String(subtitles.selected),\n        options: [{ value: \"-1\", label: t(\"player.subtitlesOff\") }, ...subtitles.list.map((x) => ({ value: String(x.index), label: trackName(x) }))],\n        onChange: (v) => selectSubs(Number(v)),\n      });\n    if (quality.levels.length > 1) {\n      const playing = quality.levels.find((l) => l.index === quality.current);\n      out.push({\n        key: \"quality\",\n        label: t(\"player.quality\"),\n        value: String(quality.selected),\n        options: [\n          ...[...quality.levels].reverse().map((l) => ({ value: String(l.index), label: qualityLabel(l.height) })),\n          { value: \"-1\", label: playing && quality.selected === -1 ? t(\"player.autoCurrent\", { quality: qualityLabel(playing.height).split(\" \")[0]! }) : t(\"player.auto\") },\n        ],\n        onChange: (v) => selectQuality(Number(v)),\n      });\n    }\n    out.push({\n      key: \"speed\",\n      label: t(\"player.speed\"),\n      value: String(media.rate),\n      options: PLAYBACK_SPEEDS.map((r) => ({ value: String(r), label: r === 1 ? t(\"player.normal\") : `${r}×` })),\n      onChange: (v) => {\n        if (video) video.playbackRate = Number(v);\n      },\n    });\n    menuItems?.forEach((m, i) => {\n      if (\"options\" in m) out.push({ key: `host-${i}`, label: m.label, value: m.value, options: m.options, onChange: m.onChange });\n    });\n    return out;\n  }\n  const actions = menuItems?.filter((m): m is Extract<PlayerMenuItem, { onSelect: () => void }> => \"onSelect\" in m);\n\n  return (\n    <ContentKitUiRoot\n      appearance={appearance}\n      className={cn(\n        \"@container relative w-full touch-manipulation overflow-hidden bg-black text-white outline-none\",\n        layout === \"fill\" ? \"size-full\" : !fs.active && \"rounded-lg\",\n        started && !controlsShown && \"cursor-none\",\n        className,\n      )}\n      style={{ ...frame, ...style }}\n      data-ckui=\"video-player\"\n      data-status={failed ? \"failed\" : pending ? \"pending\" : status}\n      data-previewing={previewing ? \"\" : undefined}\n      data-fullscreen={fs.active ? \"\" : undefined}\n      data-controls={controlsShown ? \"\" : undefined}\n      ref={setRoot}\n      role=\"group\"\n      aria-label={label ?? t(\"player.label\")}\n      tabIndex={playable ? -1 : undefined}\n      onPointerDown={(e) => (pointerType.current = e.pointerType || \"mouse\")}\n      onPointerMove={(e) => e.pointerType === \"mouse\" && started && poke()}\n      onPointerLeave={(e) => e.pointerType === \"mouse\" && !scrubbing && !menuOpen && hide()}\n      onFocus={(e) => setKeyFocus(focusVisible(e.target))}\n      onBlur={() => setKeyFocus(false)}\n    >\n      {failed ? (\n        <Panel icon>{t(\"player.failed\")}</Panel>\n      ) : pending || !base ? (\n        <div className=\"absolute inset-0 flex items-center justify-center bg-muted p-6 text-foreground\">\n          <EncodeProgress progress={progress} className=\"max-w-xs\" />\n        </div>\n      ) : (\n        <>\n          <video ref={videoRef} className=\"absolute inset-0 size-full object-contain\" playsInline preload=\"none\" crossOrigin={crossOrigin} aria-label={label} />\n          {started && !error && <div data-ckui=\"surface\" className=\"absolute inset-0\" onClick={onSurfaceClick} onDoubleClick={onSurfaceDoubleClick} />}\n          {!started && !error && (\n            <>\n              {typeof poster === \"string\" ? (\n                <img alt=\"\" src={poster} decoding=\"async\" className={cn(\"pointer-events-none absolute inset-0 size-full object-contain\", fade)} />\n              ) : posterOutputs.length ? (\n                <RenditionImg outputs={posterOutputs} className={cn(\"pointer-events-none absolute inset-0 size-full object-contain\", fade)} />\n              ) : (\n                <SpriteFrame vtt={`${base}sprite.vtt`} xhrSetup={options.xhrSetup} className={fade} />\n              )}\n              <BigButton label={t(\"player.play\")} onClick={player.play} disabled={busy} className={fade}>\n                {busy ? <Spinner /> : <HugeiconsIcon icon={PlayIcon} className=\"ml-1 size-7 fill-current\" strokeWidth={1.5} />}\n              </BigButton>\n              {duration ? (\n                <span className=\"pointer-events-none absolute right-2 bottom-2 rounded bg-black/65 px-1.5 py-0.5 text-xs font-medium tabular-nums\">{formatDuration(duration)}</span>\n              ) : null}\n            </>\n          )}\n          {started && !error && media.ended && (\n            <BigButton label={t(\"player.replay\")} onClick={toggle}>\n              <HugeiconsIcon icon={Refresh01Icon} className=\"size-7\" strokeWidth={1.75} />\n            </BigButton>\n          )}\n          <Captions cues={live ? cues : []} bottom={controlsShown ? \"4.75rem\" : \"1.25rem\"} />\n          {started && busy && (\n            <div className=\"pointer-events-none absolute inset-0 flex items-center justify-center\">\n              <span className=\"flex size-14 items-center justify-center rounded-full bg-black/45\">\n                <Spinner />\n              </span>\n            </div>\n          )}\n          <SeekFlash flash={flash} />\n          {started && !error && (\n            <div\n              data-ckui=\"controls\"\n              data-ckui-noswipe=\"\"\n              className={cn(\n                \"pointer-events-none absolute inset-x-0 bottom-0 z-10 flex flex-col bg-linear-to-t from-black/75 via-black/35 to-transparent px-2 pt-12 pb-1 transition-opacity duration-200 motion-reduce:transition-none\",\n                controlsShown ? \"opacity-100 *:pointer-events-auto\" : \"opacity-0\",\n              )}\n            >\n              <SeekBar time={media.time} duration={dur} buffered={media.buffered} onSeek={seek} onScrub={(v) => setScrubbing(v !== null)} sprite={sprite} />\n              <div className=\"flex items-center gap-0.5\">\n                <ControlButton\n                  label={media.ended ? t(\"player.replay\") : media.paused ? t(\"player.resume\") : t(\"player.pause\")}\n                  shortcut=\"k\"\n                  icon={media.ended ? Refresh01Icon : media.paused ? PlayIcon : PauseIcon}\n                  onClick={toggle}\n                  data-ckui=\"play\"\n                />\n                <VolumeControl volume={media.volume} muted={media.muted} onVolume={setVolume} onMute={toggleMute} />\n                <span className=\"ml-1 shrink-0 text-xs font-medium whitespace-nowrap text-white/90 tabular-nums\" data-ckui=\"time\">\n                  {clock(media.time)} / {clock(dur)}\n                </span>\n                <div className=\"min-w-0 flex-1\" />\n                {subtitles.list.length > 0 && (\n                  <ControlButton label={t(\"player.subtitles\")} shortcut=\"c\" icon={ClosedCaptionIcon} aria-pressed={subtitles.selected >= 0} onClick={toggleCaptions} data-ckui=\"captions-toggle\" />\n                )}\n                {renderDownloads?.({ container: portal, className: playerButtonClass })}\n                <SettingsMenu icon={Settings01Icon} label={t(\"player.settings\")} sections={sections} actions={actions} container={portal} onOpenChange={setMenuOpen} />\n                {onMiniPlayer && <ControlButton className=\"@max-sm:hidden\" label={t(\"player.miniPlayer\")} shortcut=\"i\" icon={PictureInPictureOnIcon} onClick={openMini} data-ckui=\"mini-player-open\" />}\n                {pip.supported && (\n                  <ControlButton\n                    className=\"@max-md:hidden\"\n                    label={pip.active ? t(\"player.exitPip\") : t(\"player.pip\")}\n                    icon={pip.active ? PictureInPictureExitIcon : PictureInPicture01Icon}\n                    onClick={pip.toggle}\n                    data-ckui=\"pip\"\n                  />\n                )}\n                {onTheaterChange && (\n                  <ControlButton\n                    className=\"max-lg:hidden\"\n                    label={t(\"player.theater\")}\n                    shortcut=\"t\"\n                    icon={RectangularIcon}\n                    aria-pressed={!!theater}\n                    onClick={toggleTheater}\n                    data-ckui=\"theater\"\n                  />\n                )}\n                {fs.supported && (\n                  <ControlButton\n                    label={fs.active ? t(\"player.exitFullscreen\") : t(\"player.fullscreen\")}\n                    shortcut=\"f\"\n                    icon={fs.active ? ArrowShrink02Icon : FullScreenIcon}\n                    onClick={fs.toggle}\n                    data-ckui=\"fullscreen\"\n                  />\n                )}\n              </div>\n            </div>\n          )}\n          <span className=\"sr-only\" aria-live=\"polite\">\n            {busy ? t(\"player.loading\") : \"\"}\n          </span>\n          {error && (\n            <Panel icon code={error.code} onRetry={player.retry}>\n              {t(`player.errors.${error.kind}`)}\n            </Panel>\n          )}\n        </>\n      )}\n    </ContentKitUiRoot>\n  );\n}\n\nfunction focusVisible(el: EventTarget) {\n  try {\n    return el instanceof Element && el.matches(\":focus-visible\") && !!el.closest(\"[data-ckui=controls]\");\n  } catch {\n    return false;\n  }\n}\n\nfunction BigButton({ label, onClick, disabled, className, children }: { label: string; onClick: () => void; disabled?: boolean; className?: string; children: ReactNode }) {\n  return (\n    <button\n      type=\"button\"\n      className=\"absolute inset-0 z-[7] flex items-center justify-center outline-none focus-visible:[&>span]:ring-4 focus-visible:[&>span]:ring-white/60\"\n      onClick={onClick}\n      aria-label={label}\n      disabled={disabled}\n    >\n      <span className={cn(\"flex size-16 items-center justify-center rounded-full bg-black/55 shadow-lg backdrop-blur-sm transition motion-safe:hover:scale-105\", className)}>{children}</span>\n    </button>\n  );\n}\n\n/** A preview's start: the given second, else 10% in, kept a second before the end. */\nexport function previewStartAt(start: number | undefined, duration: number | undefined): number {\n  const d = duration ?? 0;\n  const t = start ?? d * 0.1;\n  return Math.max(0, d > 1 ? Math.min(t, d - 1) : 0);\n}\n\n/** \"2160p 4K\", \"1080p HD\", \"720p\": a rung by its short side. */\nexport function qualityLabel(height: number): string {\n  return `${height}p${height >= 2160 ? \" 4K\" : height === 1080 ? \" HD\" : \"\"}`;\n}\n\nfunction Panel({ children, icon, code, onRetry }: { children: string; icon?: boolean; code?: string; onRetry?: () => void }) {\n  const { t } = useMessages();\n  return (\n    <div role=\"alert\" data-ckui=\"player-error\" data-ckui-noswipe=\"\" className=\"absolute inset-0 z-20 flex flex-col items-center justify-center gap-3 bg-black/80 p-6 text-center\">\n      {icon && <HugeiconsIcon icon={AlertCircleIcon} className=\"size-7 text-white/80\" strokeWidth={1.75} />}\n      <p className=\"max-w-sm text-sm font-medium text-balance\">{children}</p>\n      {onRetry && (\n        <Button size=\"sm\" variant=\"secondary\" onClick={onRetry}>\n          <HugeiconsIcon icon={Refresh01Icon} data-icon=\"inline-start\" />\n          {t(\"player.retry\")}\n        </Button>\n      )}\n      {code && <p className=\"font-mono text-[11px] text-white/55\">{t(\"player.code\", { code })}</p>}\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/components/video-poster-picker.d.ts

@@ -0,0 +1,59 @@
+import { AspectRatio } from '../client/aspect.js';
+import { ReactNode } from 'react';
+import { ContentKitClient } from '../client/client.js';
+import { CropSource } from '../client/image.js';
+import { ContentKitErrorHandler } from '../react/context.js';
+import { VideoSaveState } from '../react/video.js';
+import { PublicPreset } from '../client/public.js';
+import { FileInfo, ReadResult, RefBody } from '../client/generated/wire.js';
+export interface VideoPickerProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    /** The video item. */
+    item: RefBody;
+    /** The video upload path. Default "source". */
+    video?: string;
+    /** The poster upload path (its Upload.Frames is the video). Default "poster". */
+    path?: string;
+    /** The poster's public preset, refetched after a save. */
+    image?: PublicPreset | null;
+    /**
+     * Frames from another item's video (its upload at path, default
+     * "source"): a chosen frame is uploaded to the poster path as an image.
+     * Default the item's own video.
+     */
+    frames?: {
+        item: RefBody;
+        path?: string;
+    } | null;
+    /** The cover's "W:H"; default the video's shape. */
+    aspect?: AspectRatio;
+    client?: ContentKitClient;
+    /** An editor read of the item from the host; otherwise fetched. */
+    read?: ReadResult | null;
+    /** Called with the processed poster upload after a save. */
+    onChange?: (poster: FileInfo) => void;
+    /** Every failure (load, frame grab, save or render); default the provider's. The dialog shows it too. */
+    onError?: ContentKitErrorHandler;
+    title?: ReactNode;
+    className?: string;
+}
+export interface VideoPosterPickerProps extends VideoPickerProps {
+    /** `accept` of the image input. Default "image/*". */
+    accept?: string;
+    /** Replaces decodeImage (tests). */
+    decode?: (file: File) => Promise<CropSource>;
+}
+/** m:ss.s */
+export declare function formatTime(s: number): string;
+/**
+ * Sets a video's cover (its poster upload): scrub to an exact frame (a coarse
+ * strip, a slider and frame steps over GET /frame) and use it whole or
+ * cropped (a frame op), or upload an image and crop it at the video's aspect
+ * (a put), or let the worker choose the frame. Covers keep the video's aspect.
+ */
+export declare function VideoPosterPicker(p: VideoPosterPickerProps): import('react').JSX.Element;
+export declare function SaveProgress({ state, label }: {
+    state: VideoSaveState;
+    label: string;
+}): import('react').JSX.Element | null;

package/dist/components/video-poster-picker.js

@@ -0,0 +1,335 @@
+import { aspectOf as e, ratio as t } from "../client/aspect.js";
+import { useMessages as n } from "../i18n/context.js";
+import { useContentKitClient as r, useErrorReporter as i } from "../react/context.js";
+import { Progress as a } from "../ui/progress.js";
+import { decodeImage as o } from "../client/image.js";
+import { Alert as ee, AlertDescription as te } from "../ui/alert.js";
+import { Button as s } from "../ui/button.js";
+import { Dialog as c, DialogContent as l, DialogDescription as u, DialogFooter as ne, DialogHeader as d, DialogTitle as f } from "../ui/dialog.js";
+import { Slider as re } from "../ui/slider.js";
+import { progressLabel as p, progressValue as m } from "./progress.js";
+import { ImageCropDialog as ie } from "./image-crop-dialog.js";
+import { useFrameStrip as ae, useVideoFrame as oe, useVideoImages as h, useVideoPoster as se } from "../react/video.js";
+import { useEffect as g, useRef as ce, useState as _ } from "react";
+import { Fragment as v, jsx as y, jsxs as b } from "react/jsx-runtime";
+import { cn as x } from "cn";
+import { Alert02Icon as le, ArrowLeft01Icon as ue, ArrowRight01Icon as de, ImageUpload01Icon as S, Loading03Icon as C, Video01Icon as fe } from "@hugeicons/core-free-icons";
+import { HugeiconsIcon as w } from "@hugeicons/react";
+//#region src/components/video-poster-picker.tsx
+var T = 1 / 30;
+function E(e) {
+	let t = Math.floor(e / 60), n = e - t * 60;
+	return `${t}:${n < 10 ? "0" : ""}${n.toFixed(1)}`;
+}
+function D(e) {
+	let { t } = n(), [r, i] = _(!1);
+	return /* @__PURE__ */ y(c, {
+		open: e.open,
+		onOpenChange: (t) => !r && e.onOpenChange(t),
+		children: /* @__PURE__ */ b(l, {
+			className: x("gap-0 overflow-hidden p-0 sm:max-w-2xl", e.className),
+			showCloseButton: !r,
+			"data-ckui": "poster-picker",
+			children: [/* @__PURE__ */ b(d, {
+				className: "px-5 pt-5 pb-4 pr-12",
+				children: [/* @__PURE__ */ y(f, { children: e.title ?? t("poster.title") }), /* @__PURE__ */ y(u, { children: t("poster.description") })]
+			}), e.open && /* @__PURE__ */ y(O, {
+				...e,
+				onSaving: i
+			})]
+		})
+	});
+}
+function O(a) {
+	let { t: c, error: l } = n(), u = r(a.client), d = i(a.onError), f = h({
+		client: u,
+		ref: a.item,
+		video: a.video,
+		poster: a.path,
+		read: a.read
+	}), p = a.frames ?? null, m = h({
+		client: u,
+		ref: p?.item ?? a.item,
+		video: p?.path ?? a.video,
+		poster: a.path,
+		read: p ? void 0 : a.read
+	}), C = p?.item ?? a.item;
+	g(() => void (f.error && d(f.error, "poster.load")), [f.error, d]);
+	let D = p ? m.error : void 0;
+	g(() => void (D && d(D, "poster.load")), [D, d]);
+	let { poster: O } = f, j = m.video, M = p ? void 0 : O?.frame, [N, pe] = _(!p && O && !M ? "upload" : "frame"), [me, P] = _(), [F, I] = _(null), [L, he] = _("frame"), [ge, R] = _(), _e = ce(null), z = j && !j.staged ? j.dur ?? 0 : 0, B = a.aspect ?? (j?.w && j.h ? e(j.w, j.h) : "16:9"), V = me ?? M?.t ?? z * .25, H = z > 0 ? j.path : void 0, U = se({
+		client: u,
+		ref: a.item,
+		path: a.path,
+		onSaved: (e) => {
+			f.set(e), a.onChange?.(e), a.onOpenChange(!1);
+		},
+		onError: (e) => d(e, "poster.save")
+	}), W = U.state.status === "saving", G = ce(a.onSaving);
+	G.current = a.onSaving, g(() => G.current(W), [W]);
+	let K = (e) => d(e, "poster.frame"), q = oe({
+		client: u,
+		ref: C,
+		path: H,
+		time: z > 0 ? V : void 0,
+		width: 960,
+		onError: K
+	}), ve = ae({
+		client: u,
+		ref: C,
+		path: H,
+		duration: z,
+		count: 8,
+		width: 160,
+		onError: K
+	}), J = (e, t) => p ? U.saveFrameFrom(C, H, e, t) : U.saveFrame(e, t);
+	g(() => () => F?.revoke?.(), [F]);
+	let Y = async (e, t) => {
+		R(void 0);
+		try {
+			if (e === "upload") I(await (a.decode ?? o)(t));
+			else {
+				let e = await u.media.getFrame(C, H, V, 1280), t = URL.createObjectURL(e);
+				I({
+					url: t,
+					width: j.w,
+					height: j.h,
+					revoke: () => URL.revokeObjectURL(t)
+				});
+			}
+			he(e);
+		} catch (t) {
+			R(l(t)), d(t, e === "upload" ? "slot.decode" : "poster.frame");
+		}
+	}, X = (e) => e && void Y("upload", e), [ye, Z] = _(!1), be = {
+		onDragOver: (e) => {
+			!W && e.dataTransfer.types.includes("Files") && (e.preventDefault(), Z(!0));
+		},
+		onDragLeave: () => Z(!1),
+		onDrop: (e) => {
+			e.preventDefault(), Z(!1), X(e.dataTransfer.files[0]);
+		}
+	}, Q = U.state.status === "error" ? U.state.error : f.error ?? D ?? (q.error && !q.url ? q.error : void 0), $ = ge ?? (Q ? l(Q) : void 0);
+	return /* @__PURE__ */ b(v, { children: [
+		/* @__PURE__ */ b("div", {
+			className: "grid gap-4 px-5",
+			children: [
+				/* @__PURE__ */ y("div", {
+					className: "inline-flex w-fit rounded-lg bg-muted p-0.5",
+					role: "tablist",
+					"aria-label": c("poster.title"),
+					children: ["frame", "upload"].map((e) => /* @__PURE__ */ b("button", {
+						type: "button",
+						role: "tab",
+						"aria-selected": N === e,
+						disabled: W,
+						onClick: () => pe(e),
+						className: x("inline-flex h-7 items-center gap-1.5 rounded-md px-3 text-sm font-medium text-muted-foreground transition-colors outline-none focus-visible:ring-3 focus-visible:ring-ring/50", N === e && "bg-background text-foreground shadow-xs"),
+						children: [/* @__PURE__ */ y(w, {
+							icon: e === "frame" ? fe : S,
+							strokeWidth: 2,
+							className: "size-4"
+						}), c(e === "frame" ? "poster.frame" : "poster.upload")]
+					}, e))
+				}),
+				N === "frame" && (m.loading && !j ? /* @__PURE__ */ y(k, {
+					loading: !0,
+					aspect: B
+				}) : z ? /* @__PURE__ */ b(v, { children: [/* @__PURE__ */ y(k, {
+					url: q.url,
+					loading: q.loading || !q.url && !q.error,
+					aspect: B
+				}), /* @__PURE__ */ b("div", {
+					className: "grid gap-2",
+					children: [/* @__PURE__ */ b("div", {
+						className: "flex items-center gap-1.5",
+						children: [
+							/* @__PURE__ */ y(s, {
+								variant: "ghost",
+								size: "icon-sm",
+								"aria-label": c("poster.previousFrame"),
+								disabled: W || V <= 0,
+								onClick: () => P(Math.max(0, V - T)),
+								children: /* @__PURE__ */ y(w, {
+									icon: ue,
+									strokeWidth: 2
+								})
+							}),
+							/* @__PURE__ */ y(re, {
+								"aria-label": c("poster.time"),
+								className: "mx-1 flex-1",
+								min: 0,
+								max: z,
+								step: .01,
+								value: V,
+								disabled: W,
+								onValueChange: (e) => P(Array.isArray(e) ? e[0] : e)
+							}),
+							/* @__PURE__ */ y(s, {
+								variant: "ghost",
+								size: "icon-sm",
+								"aria-label": c("poster.nextFrame"),
+								disabled: W || V >= z,
+								onClick: () => P(Math.min(z, V + T)),
+								children: /* @__PURE__ */ y(w, {
+									icon: de,
+									strokeWidth: 2
+								})
+							}),
+							/* @__PURE__ */ y("span", {
+								className: "w-14 text-right text-xs text-muted-foreground tabular-nums",
+								"data-ckui": "time",
+								children: E(V)
+							})
+						]
+					}), /* @__PURE__ */ y("div", {
+						className: "grid grid-cols-8 gap-1",
+						"data-ckui": "frame-strip",
+						children: ve.map((e) => {
+							let n = Math.abs(e.time - V) <= z / 16;
+							return /* @__PURE__ */ y("button", {
+								type: "button",
+								disabled: W,
+								"aria-label": c("poster.jumpTo", { time: E(e.time) }),
+								onClick: () => P(e.time),
+								style: { aspectRatio: String(t(B)) },
+								className: x("relative overflow-hidden rounded-md bg-muted outline-none ring-offset-1 ring-offset-background focus-visible:ring-2 focus-visible:ring-ring", n && "ring-2 ring-primary"),
+								children: e.url && /* @__PURE__ */ y("img", {
+									src: e.url,
+									alt: "",
+									className: "absolute inset-0 size-full object-contain"
+								})
+							}, e.time);
+						})
+					})]
+				})] }) : /* @__PURE__ */ y("p", {
+					className: "rounded-lg bg-muted px-4 py-6 text-center text-sm text-muted-foreground",
+					"data-ckui": "processing",
+					children: c("poster.processing")
+				})),
+				N === "upload" && /* @__PURE__ */ b("label", {
+					className: x("flex aspect-video cursor-pointer flex-col items-center justify-center gap-2 rounded-lg border border-dashed border-border text-sm text-muted-foreground transition-colors hover:border-primary hover:bg-primary/5", ye && "border-primary bg-primary/5", W && "pointer-events-none opacity-60"),
+					"data-ckui": "poster-drop",
+					...be,
+					children: [
+						/* @__PURE__ */ y(w, {
+							icon: S,
+							strokeWidth: 1.5,
+							className: "size-8"
+						}),
+						c("poster.drop"),
+						/* @__PURE__ */ y("input", {
+							ref: _e,
+							type: "file",
+							accept: a.accept ?? "image/*",
+							className: "sr-only",
+							"data-ckui": "file",
+							disabled: W,
+							onChange: (e) => {
+								let t = e.target.files?.[0];
+								e.target.value = "", X(t);
+							}
+						})
+					]
+				}),
+				$ && /* @__PURE__ */ b(ee, {
+					variant: "destructive",
+					role: "alert",
+					children: [/* @__PURE__ */ y(w, {
+						icon: le,
+						strokeWidth: 2
+					}), /* @__PURE__ */ y(te, { children: $ })]
+				}),
+				/* @__PURE__ */ y(A, {
+					state: U.state,
+					label: c("poster.rendering")
+				})
+			]
+		}),
+		/* @__PURE__ */ b(ne, {
+			className: "px-5 pt-4 pb-5 sm:justify-between",
+			children: [p ? /* @__PURE__ */ y("span", {}) : /* @__PURE__ */ y(s, {
+				variant: "ghost",
+				disabled: W || !!M?.auto,
+				onClick: () => void U.saveAuto(),
+				title: c("poster.autoHint"),
+				children: c("poster.auto")
+			}), /* @__PURE__ */ b("div", {
+				className: "flex flex-col-reverse gap-2 sm:flex-row",
+				children: [/* @__PURE__ */ y(s, {
+					variant: "outline",
+					disabled: W,
+					onClick: () => a.onOpenChange(!1),
+					children: c("common.cancel")
+				}), N === "frame" && z > 0 && /* @__PURE__ */ b(v, { children: [/* @__PURE__ */ y(s, {
+					variant: "outline",
+					disabled: W,
+					onClick: () => void Y("frame"),
+					children: c("poster.crop")
+				}), /* @__PURE__ */ y(s, {
+					disabled: W,
+					onClick: () => void J(V),
+					children: c(W ? "common.saving" : "poster.useFrame")
+				})] })]
+			})]
+		}),
+		/* @__PURE__ */ y(ie, {
+			open: !!F,
+			onOpenChange: (e) => !e && !W && I(null),
+			source: F,
+			aspect: B,
+			rotatable: L === "upload",
+			targetWidth: 1920,
+			title: c("poster.cropTitle"),
+			busy: W,
+			progress: U.state.status === "saving" ? U.state.progress : void 0,
+			rendering: U.state.status === "saving" && U.state.rendering,
+			error: U.state.status === "error" && F ? l(U.state.error) : void 0,
+			onConfirm: (e) => {
+				L === "frame" ? J(V, e) : F?.file && U.saveUpload(F.file, e);
+			}
+		})
+	] });
+}
+function k({ url: e, loading: n, aspect: r }) {
+	let i = t(r) ?? 16 / 9;
+	return /* @__PURE__ */ b("div", {
+		className: "relative mx-auto max-h-[50svh] max-w-full overflow-hidden rounded-lg bg-zinc-950",
+		style: {
+			aspectRatio: String(i),
+			width: `min(100%, calc(50svh * ${i}))`
+		},
+		"data-ckui": "frame-stage",
+		children: [e && /* @__PURE__ */ y("img", {
+			src: e,
+			alt: "",
+			className: "absolute inset-0 size-full object-contain"
+		}), n && /* @__PURE__ */ y("div", {
+			className: "absolute inset-0 flex items-center justify-center text-white/70",
+			children: /* @__PURE__ */ y(w, {
+				icon: C,
+				strokeWidth: 2,
+				className: "size-6 animate-spin"
+			})
+		})]
+	});
+}
+function A({ state: e, label: t }) {
+	let { t: r } = n();
+	if (e.status !== "saving") return null;
+	let i = e.rendering || !e.progress, o = i ? t : p(r, e.progress, !1);
+	return /* @__PURE__ */ y(a, {
+		value: i ? null : m(e.progress, !1),
+		className: "gap-2",
+		"aria-label": o,
+		"data-ckui": "save-progress",
+		children: /* @__PURE__ */ y("span", {
+			className: "text-xs text-muted-foreground",
+			children: o
+		})
+	});
+}
+//#endregion
+export { A as SaveProgress, D as VideoPosterPicker, E as formatTime };
+
+//# sourceMappingURL=video-poster-picker.js.map

package/dist/components/video-poster-picker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"video-poster-picker.js","names":[],"sources":["../../src/components/video-poster-picker.tsx"],"sourcesContent":["import { aspectOf, ratio, type AspectRatio } from \"../client/aspect.js\";\nimport { Alert02Icon, ArrowLeft01Icon, ArrowRight01Icon, ImageUpload01Icon, Loading03Icon, Video01Icon } from \"@hugeicons/core-free-icons\";\nimport { HugeiconsIcon } from \"@hugeicons/react\";\nimport { cn } from \"cn\";\nimport { useEffect, useRef, useState, type DragEvent, type ReactNode } from \"react\";\nimport type { ContentKitClient } from \"../client/client.js\";\nimport { useMessages } from \"../i18n/context.js\";\nimport { decodeImage, type CropSource } from \"../client/image.js\";\nimport { useContentKitClient, useErrorReporter, type ContentKitErrorHandler } from \"../react/context.js\";\nimport { useFrameStrip, useVideoFrame, useVideoImages, useVideoPoster, type VideoSaveState } from \"../react/video.js\";\nimport type { PublicPreset } from \"../client/public.js\";\nimport type { Edit, FileInfo, ReadResult, RefBody } from \"../client/generated/wire.js\";\nimport { Alert, AlertDescription } from \"#ckui/ui/alert\";\nimport { Button } from \"#ckui/ui/button\";\nimport { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from \"#ckui/ui/dialog\";\nimport { Progress } from \"#ckui/ui/progress\";\nimport { Slider } from \"#ckui/ui/slider\";\nimport { ImageCropDialog } from \"./image-crop-dialog.js\";\nimport { progressLabel, progressValue } from \"./progress.js\";\n\nconst FRAME_STEP = 1 / 30;\n\nexport interface VideoPickerProps {\n  open: boolean;\n  onOpenChange: (open: boolean) => void;\n  /** The video item. */\n  item: RefBody;\n  /** The video upload path. Default \"source\". */\n  video?: string;\n  /** The poster upload path (its Upload.Frames is the video). Default \"poster\". */\n  path?: string;\n  /** The poster's public preset, refetched after a save. */\n  image?: PublicPreset | null;\n  /**\n   * Frames from another item's video (its upload at path, default\n   * \"source\"): a chosen frame is uploaded to the poster path as an image.\n   * Default the item's own video.\n   */\n  frames?: { item: RefBody; path?: string } | null;\n  /** The cover's \"W:H\"; default the video's shape. */\n  aspect?: AspectRatio;\n  client?: ContentKitClient;\n  /** An editor read of the item from the host; otherwise fetched. */\n  read?: ReadResult | null;\n  /** Called with the processed poster upload after a save. */\n  onChange?: (poster: FileInfo) => void;\n  /** Every failure (load, frame grab, save or render); default the provider's. The dialog shows it too. */\n  onError?: ContentKitErrorHandler;\n  title?: ReactNode;\n  className?: string;\n}\n\nexport interface VideoPosterPickerProps extends VideoPickerProps {\n  /** `accept` of the image input. Default \"image/*\". */\n  accept?: string;\n  /** Replaces decodeImage (tests). */\n  decode?: (file: File) => Promise<CropSource>;\n}\n\n/** m:ss.s */\nexport function formatTime(s: number): string {\n  const m = Math.floor(s / 60);\n  const sec = s - m * 60;\n  return `${m}:${sec < 10 ? \"0\" : \"\"}${sec.toFixed(1)}`;\n}\n\n/**\n * Sets a video's cover (its poster upload): scrub to an exact frame (a coarse\n * strip, a slider and frame steps over GET /frame) and use it whole or\n * cropped (a frame op), or upload an image and crop it at the video's aspect\n * (a put), or let the worker choose the frame. Covers keep the video's aspect.\n */\nexport function VideoPosterPicker(p: VideoPosterPickerProps) {\n  const { t } = useMessages();\n  const [saving, setSaving] = useState(false);\n  return (\n    <Dialog open={p.open} onOpenChange={(o) => !saving && p.onOpenChange(o)}>\n      <DialogContent className={cn(\"gap-0 overflow-hidden p-0 sm:max-w-2xl\", p.className)} showCloseButton={!saving} data-ckui=\"poster-picker\">\n        <DialogHeader className=\"px-5 pt-5 pb-4 pr-12\">\n          <DialogTitle>{p.title ?? t(\"poster.title\")}</DialogTitle>\n          <DialogDescription>{t(\"poster.description\")}</DialogDescription>\n        </DialogHeader>\n        {p.open && <PosterBody {...p} onSaving={setSaving} />}\n      </DialogContent>\n    </Dialog>\n  );\n}\n\nfunction PosterBody(p: VideoPosterPickerProps & { onSaving: (b: boolean) => void }) {\n  const { t, error: errorText } = useMessages();\n  const client = useContentKitClient(p.client);\n  const report = useErrorReporter(p.onError);\n  const loaded = useVideoImages({ client, ref: p.item, video: p.video, poster: p.path, read: p.read });\n  const other = p.frames ?? null;\n  const source = useVideoImages({ client, ref: other?.item ?? p.item, video: other?.path ?? p.video, poster: p.path, read: other ? undefined : p.read });\n  const sourceRef = other?.item ?? p.item;\n  useEffect(() => void (loaded.error && report(loaded.error, \"poster.load\")), [loaded.error, report]);\n  const sourceError = other ? source.error : undefined;\n  useEffect(() => void (sourceError && report(sourceError, \"poster.load\")), [sourceError, report]);\n  const { poster: current } = loaded;\n  const video = source.video;\n  // A frame of the item's own video is a frame op; one of another video is an uploaded image.\n  const selection = other ? undefined : current?.frame;\n  const [mode, setMode] = useState<\"frame\" | \"upload\">(!other && current && !selection ? \"upload\" : \"frame\");\n  const [time, setTime] = useState<number>();\n  const [crop, setCrop] = useState<CropSource | null>(null);\n  const [cropFor, setCropFor] = useState<\"frame\" | \"upload\">(\"frame\");\n  const [decodeError, setDecodeError] = useState<string>();\n  const input = useRef<HTMLInputElement>(null);\n  const duration = video && !video.staged ? (video.dur ?? 0) : 0;\n  const aspect = p.aspect ?? (video?.w && video.h ? aspectOf(video.w, video.h) : \"16:9\");\n  const shown = time ?? selection?.t ?? duration * 0.25;\n  // Frames come from the placed video (GET /frame answers conflict while it is staged).\n  const path = duration > 0 ? video!.path : undefined;\n  const poster = useVideoPoster({\n    client,\n    ref: p.item,\n    path: p.path,\n    onSaved: (f) => {\n      loaded.set(f);\n      p.onChange?.(f);\n      p.onOpenChange(false);\n    },\n    onError: (e) => report(e, \"poster.save\"),\n  });\n  const busy = poster.state.status === \"saving\";\n  const onSaving = useRef(p.onSaving);\n  onSaving.current = p.onSaving;\n  useEffect(() => onSaving.current(busy), [busy]);\n  const onFrameError = (e: unknown) => report(e, \"poster.frame\");\n  const frame = useVideoFrame({ client, ref: sourceRef, path, time: duration > 0 ? shown : undefined, width: 960, onError: onFrameError });\n  const strip = useFrameStrip({ client, ref: sourceRef, path, duration, count: 8, width: 160, onError: onFrameError });\n  const saveFrame = (t: number, edit?: Edit | null) => (other ? poster.saveFrameFrom(sourceRef, path!, t, edit) : poster.saveFrame(t, edit));\n  useEffect(() => () => crop?.revoke?.(), [crop]);\n\n  const openCrop = async (source: \"frame\" | \"upload\", f?: File) => {\n    setDecodeError(undefined);\n    try {\n      if (source === \"upload\") setCrop(await (p.decode ?? decodeImage)(f!));\n      else {\n        const blob = await client.media.getFrame(sourceRef, path!, shown, 1280);\n        const url = URL.createObjectURL(blob);\n        // Frame edits are in the frame's pixels (the video's w×h), whatever the preview's size.\n        setCrop({ url, width: video!.w!, height: video!.h!, revoke: () => URL.revokeObjectURL(url) });\n      }\n      setCropFor(source);\n    } catch (e) {\n      setDecodeError(errorText(e));\n      report(e, source === \"upload\" ? \"slot.decode\" : \"poster.frame\");\n    }\n  };\n  const pickFile = (f?: File) => f && void openCrop(\"upload\", f);\n  const [over, setOver] = useState(false);\n  const drop = {\n    onDragOver: (e: DragEvent) => {\n      if (busy || !e.dataTransfer.types.includes(\"Files\")) return;\n      e.preventDefault();\n      setOver(true);\n    },\n    onDragLeave: () => setOver(false),\n    onDrop: (e: DragEvent) => {\n      e.preventDefault();\n      setOver(false);\n      pickFile(e.dataTransfer.files[0]);\n    },\n  };\n  const failed = poster.state.status === \"error\" ? poster.state.error : (loaded.error ?? sourceError ?? (frame.error && !frame.url ? frame.error : undefined));\n  const error = decodeError ?? (failed ? errorText(failed) : undefined);\n\n  return (\n    <>\n      <div className=\"grid gap-4 px-5\">\n        <div className=\"inline-flex w-fit rounded-lg bg-muted p-0.5\" role=\"tablist\" aria-label={t(\"poster.title\")}>\n          {([\"frame\", \"upload\"] as const).map((m) => (\n            <button\n              key={m}\n              type=\"button\"\n              role=\"tab\"\n              aria-selected={mode === m}\n              disabled={busy}\n              onClick={() => setMode(m)}\n              className={cn(\n                \"inline-flex h-7 items-center gap-1.5 rounded-md px-3 text-sm font-medium text-muted-foreground transition-colors outline-none focus-visible:ring-3 focus-visible:ring-ring/50\",\n                mode === m && \"bg-background text-foreground shadow-xs\",\n              )}\n            >\n              <HugeiconsIcon icon={m === \"frame\" ? Video01Icon : ImageUpload01Icon} strokeWidth={2} className=\"size-4\" />\n              {t(m === \"frame\" ? \"poster.frame\" : \"poster.upload\")}\n            </button>\n          ))}\n        </div>\n\n        {mode === \"frame\" &&\n          (source.loading && !video ? (\n            <Stage loading aspect={aspect} />\n          ) : !duration ? (\n            <p className=\"rounded-lg bg-muted px-4 py-6 text-center text-sm text-muted-foreground\" data-ckui=\"processing\">\n              {t(\"poster.processing\")}\n            </p>\n          ) : (\n            <>\n              <Stage url={frame.url} loading={frame.loading || (!frame.url && !frame.error)} aspect={aspect} />\n              <div className=\"grid gap-2\">\n                <div className=\"flex items-center gap-1.5\">\n                  <Button variant=\"ghost\" size=\"icon-sm\" aria-label={t(\"poster.previousFrame\")} disabled={busy || shown <= 0} onClick={() => setTime(Math.max(0, shown - FRAME_STEP))}>\n                    <HugeiconsIcon icon={ArrowLeft01Icon} strokeWidth={2} />\n                  </Button>\n                  <Slider\n                    aria-label={t(\"poster.time\")}\n                    className=\"mx-1 flex-1\"\n                    min={0}\n                    max={duration}\n                    step={0.01}\n                    value={shown}\n                    disabled={busy}\n                    onValueChange={(v) => setTime(Array.isArray(v) ? v[0]! : (v as number))}\n                  />\n                  <Button\n                    variant=\"ghost\"\n                    size=\"icon-sm\"\n                    aria-label={t(\"poster.nextFrame\")}\n                    disabled={busy || shown >= duration}\n                    onClick={() => setTime(Math.min(duration, shown + FRAME_STEP))}\n                  >\n                    <HugeiconsIcon icon={ArrowRight01Icon} strokeWidth={2} />\n                  </Button>\n                  <span className=\"w-14 text-right text-xs text-muted-foreground tabular-nums\" data-ckui=\"time\">\n                    {formatTime(shown)}\n                  </span>\n                </div>\n                <div className=\"grid grid-cols-8 gap-1\" data-ckui=\"frame-strip\">\n                  {strip.map((f) => {\n                    const near = Math.abs(f.time - shown) <= duration / 16;\n                    return (\n                      <button\n                        key={f.time}\n                        type=\"button\"\n                        disabled={busy}\n                        aria-label={t(\"poster.jumpTo\", { time: formatTime(f.time) })}\n                        onClick={() => setTime(f.time)}\n                        style={{ aspectRatio: String(ratio(aspect)) }}\n                        className={cn(\n                          \"relative overflow-hidden rounded-md bg-muted outline-none ring-offset-1 ring-offset-background focus-visible:ring-2 focus-visible:ring-ring\",\n                          near && \"ring-2 ring-primary\",\n                        )}\n                      >\n                        {f.url && <img src={f.url} alt=\"\" className=\"absolute inset-0 size-full object-contain\" />}\n                      </button>\n                    );\n                  })}\n                </div>\n              </div>\n            </>\n          ))}\n\n        {mode === \"upload\" && (\n          <label\n            className={cn(\n              \"flex aspect-video cursor-pointer flex-col items-center justify-center gap-2 rounded-lg border border-dashed border-border text-sm text-muted-foreground transition-colors hover:border-primary hover:bg-primary/5\",\n              over && \"border-primary bg-primary/5\",\n              busy && \"pointer-events-none opacity-60\",\n            )}\n            data-ckui=\"poster-drop\"\n            {...drop}\n          >\n            <HugeiconsIcon icon={ImageUpload01Icon} strokeWidth={1.5} className=\"size-8\" />\n            {t(\"poster.drop\")}\n            <input\n              ref={input}\n              type=\"file\"\n              accept={p.accept ?? \"image/*\"}\n              className=\"sr-only\"\n              data-ckui=\"file\"\n              disabled={busy}\n              onChange={(e) => {\n                const f = e.target.files?.[0];\n                e.target.value = \"\";\n                pickFile(f);\n              }}\n            />\n          </label>\n        )}\n\n        {error && (\n          <Alert variant=\"destructive\" role=\"alert\">\n            <HugeiconsIcon icon={Alert02Icon} strokeWidth={2} />\n            <AlertDescription>{error}</AlertDescription>\n          </Alert>\n        )}\n        <SaveProgress state={poster.state} label={t(\"poster.rendering\")} />\n      </div>\n\n      <DialogFooter className=\"px-5 pt-4 pb-5 sm:justify-between\">\n        {other ? (\n          <span />\n        ) : (\n          <Button variant=\"ghost\" disabled={busy || !!selection?.auto} onClick={() => void poster.saveAuto()} title={t(\"poster.autoHint\")}>\n            {t(\"poster.auto\")}\n          </Button>\n        )}\n        <div className=\"flex flex-col-reverse gap-2 sm:flex-row\">\n          <Button variant=\"outline\" disabled={busy} onClick={() => p.onOpenChange(false)}>\n            {t(\"common.cancel\")}\n          </Button>\n          {mode === \"frame\" && duration > 0 && (\n            <>\n              <Button variant=\"outline\" disabled={busy} onClick={() => void openCrop(\"frame\")}>\n                {t(\"poster.crop\")}\n              </Button>\n              <Button disabled={busy} onClick={() => void saveFrame(shown)}>\n                {busy ? t(\"common.saving\") : t(\"poster.useFrame\")}\n              </Button>\n            </>\n          )}\n        </div>\n      </DialogFooter>\n\n      <ImageCropDialog\n        open={!!crop}\n        onOpenChange={(o) => !o && !busy && setCrop(null)}\n        source={crop}\n        aspect={aspect}\n        rotatable={cropFor === \"upload\"}\n        targetWidth={1920}\n        title={t(\"poster.cropTitle\")}\n        busy={busy}\n        progress={poster.state.status === \"saving\" ? poster.state.progress : undefined}\n        rendering={poster.state.status === \"saving\" && poster.state.rendering}\n        error={poster.state.status === \"error\" && crop ? errorText(poster.state.error) : undefined}\n        onConfirm={(edit) => {\n          if (cropFor === \"frame\") void saveFrame(shown, edit);\n          else if (crop?.file) void poster.saveUpload(crop.file, edit);\n        }}\n      />\n    </>\n  );\n}\n\nfunction Stage({ url, loading, aspect: shape }: { url?: string; loading?: boolean; aspect: AspectRatio }) {\n  const aspect = ratio(shape) ?? 16 / 9;\n  return (\n    <div className=\"relative mx-auto max-h-[50svh] max-w-full overflow-hidden rounded-lg bg-zinc-950\" style={{ aspectRatio: String(aspect), width: `min(100%, calc(50svh * ${aspect}))` }} data-ckui=\"frame-stage\">\n      {url && <img src={url} alt=\"\" className=\"absolute inset-0 size-full object-contain\" />}\n      {loading && (\n        <div className=\"absolute inset-0 flex items-center justify-center text-white/70\">\n          <HugeiconsIcon icon={Loading03Icon} strokeWidth={2} className=\"size-6 animate-spin\" />\n        </div>\n      )}\n    </div>\n  );\n}\n\nexport function SaveProgress({ state, label }: { state: VideoSaveState; label: string }) {\n  const { t } = useMessages();\n  if (state.status !== \"saving\") return null;\n  const indeterminate = state.rendering || !state.progress;\n  const text = indeterminate ? label : progressLabel(t, state.progress, false);\n  return (\n    <Progress value={indeterminate ? null : progressValue(state.progress, false)} className=\"gap-2\" aria-label={text} data-ckui=\"save-progress\">\n      <span className=\"text-xs text-muted-foreground\">{text}</span>\n    </Progress>\n  );\n}\n"],"mappings":"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"}

package/dist/components/video-poster.d.ts

@@ -0,0 +1,24 @@
+import { AspectRatio } from '../client/aspect.js';
+import { ComponentProps, ReactNode } from 'react';
+import { PublicPreset } from '../client/public.js';
+import { DensityRange } from '../client/rendition.js';
+export interface VideoPosterProps extends Omit<ComponentProps<"div">, "children"> {
+    /** The poster's public preset (its aspect is the video's), or an image URL. */
+    poster?: PublicPreset | string | null;
+    /** The box's "W:H"; default the preset's aspect, else "16:9". */
+    aspect?: AspectRatio;
+    /** Density range for picking the poster's width; default the provider's (2–3×). */
+    density?: DensityRange;
+    alt?: string;
+    /** Shown without a poster (or when it fails to load); default a muted box with a video icon. */
+    fallback?: ReactNode;
+    /** Overlays (duration, badges). */
+    children?: ReactNode;
+}
+/**
+ * A poster at its aspect, uncropped, spanning its container's width, at the
+ * width its rendered width × density needs. It never plays: use it for
+ * videos the viewer cannot play (a locked post); playable ones
+ * preview inline in VideoPlayer and MediaGallery.
+ */
+export declare function VideoPoster({ poster, aspect, density, alt, fallback, className, style, children, ...div }: VideoPosterProps): import('react').JSX.Element;

package/dist/components/video-poster.js

@@ -0,0 +1,46 @@
+import { RenditionImg as e } from "./rendition-img.js";
+import { publicRenditions as t } from "../client/public.js";
+import { ratio as n } from "../client/aspect.js";
+import { ContentKitUiRoot as r } from "../scope.js";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+import { cn as o } from "cn";
+import { Video01Icon as s } from "@hugeicons/core-free-icons";
+import { HugeiconsIcon as c } from "@hugeicons/react";
+//#region src/components/video-poster.tsx
+function l({ poster: l, aspect: u, density: d, alt: f = "", fallback: p, className: m, style: h, children: g, ..._ }) {
+	let v = typeof l == "string" ? null : l, y = t(v), b = u ?? (v?.aspect || "16:9"), x = "absolute inset-0 size-full object-contain", S = p ?? /* @__PURE__ */ i("div", {
+		className: "absolute inset-0 flex items-center justify-center text-muted-foreground/70",
+		children: /* @__PURE__ */ i(c, {
+			icon: s,
+			strokeWidth: 1.5,
+			className: "size-10"
+		})
+	});
+	return /* @__PURE__ */ a(r, {
+		..._,
+		className: o("relative w-full overflow-hidden rounded-lg bg-muted", m),
+		style: {
+			aspectRatio: String(n(b) ?? 16 / 9),
+			...h
+		},
+		"data-ckui": "video-poster",
+		children: [typeof l == "string" ? /* @__PURE__ */ i("img", {
+			src: l,
+			alt: f,
+			loading: "lazy",
+			decoding: "async",
+			className: x
+		}) : y.length ? /* @__PURE__ */ i(e, {
+			outputs: y,
+			density: d,
+			alt: f,
+			loading: "lazy",
+			className: x,
+			fallback: S
+		}) : S, g]
+	});
+}
+//#endregion
+export { l as VideoPoster };
+
+//# sourceMappingURL=video-poster.js.map