50:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 51:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 52:T8f9,.cr-video { display: grid; gap: var(--cr-space-2); margin: 0; font-family: var(--cr-font-family-sans); } .cr-video__stage { position: relative; overflow: hidden; border-radius: var(--cr-radius-xl); background: var(--cr-gray-950); } .cr-video__media { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: contain; } /* Controls sit on the picture, so they use fixed light-on-dark glass in both themes. */ .cr-video__big-play { position: absolute; top: 50%; left: 50%; display: grid; place-items: center; width: 68px; height: 68px; border: 1px solid var(--cr-color-glass-edge); border-radius: var(--cr-radius-full); background: color-mix(in srgb, var(--cr-gray-950) 45%, transparent); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); color: var(--cr-gray-0); font-size: 22px; cursor: pointer; transform: translate(-50%, -50%); } .cr-video__bar { position: absolute; right: 14px; bottom: 14px; left: 14px; display: flex; align-items: center; gap: var(--cr-space-3); padding: 8px 14px 8px 8px; border-radius: var(--cr-radius-full); background: color-mix(in srgb, var(--cr-gray-950) 55%, transparent); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); color: var(--cr-gray-0); } .cr-video__button { display: grid; flex: none; place-items: center; width: 36px; height: 36px; border: 0; border-radius: var(--cr-radius-full); background: color-mix(in srgb, var(--cr-gray-0) 18%, transparent); color: inherit; font: inherit; font-size: 14px; cursor: pointer; } .cr-video__cc { font-size: 11px; font-weight: var(--cr-font-weight-bold); } .cr-video__cc[aria-pressed='true'] { background: var(--cr-gray-0); color: var(--cr-gray-950); } .cr-video__time { font-size: var(--cr-font-size-xs); font-variant-numeric: tabular-nums; white-space: nowrap; } .cr-video__seek { flex: 1; min-width: 60px; accent-color: var(--cr-gray-0); } .cr-video__button:focus-visible, .cr-video__big-play:focus-visible, .cr-video__seek:focus-visible { outline: var(--cr-focus-width) solid var(--cr-color-focus); outline-offset: var(--cr-focus-offset); } .cr-video__caption { color: var(--cr-color-text-muted); font-size: var(--cr-font-size-xs); } 53:T10dc,'use client'; import { useEffect, useRef, useState, type ReactNode } from 'react'; import { cx } from '@/lib/creance/cx'; import { ExpandIcon, MutedIcon, PauseBarsIcon, PlayIcon, VolumeIcon } from '@/lib/creance/icons'; import './Video.css'; export interface VideoProps { src: string; /** WebVTT captions. Shown by default: recordings of agents are mostly read, not heard. */ captions?: { src: string; label?: string; lang?: string }; poster?: string; /** Names the player, such as "Run 41 recording". */ label: string; caption?: ReactNode; className?: string; } const time = (s: number) => (Number.isFinite(s) ? `${Math.floor(s / 60)}:${String(Math.floor(s % 60)).padStart(2, '0')}` : '0:00'); /** * A video with glass controls: play, seek, time, captions, mute and full screen. It never autoplays, * starts muted, and shows captions when they exist. */ export function Video({ src, captions, poster, label, caption, className }: VideoProps) { const video = useRef(null); const frame = useRef(null); const [playing, setPlaying] = useState(false); const [muted, setMuted] = useState(true); const [cc, setCc] = useState(!!captions); const [now, setNow] = useState(0); const [length, setLength] = useState(0); useEffect(() => { const track = video.current?.textTracks[0]; if (track) track.mode = cc ? 'showing' : 'hidden'; }, [cc]); const toggle = () => { const v = video.current; if (!v) return; if (v.paused) void v.play(); else v.pause(); }; return (

{/* Captions are a track when provided; the control bar is the keyboard path. */} {/* eslint-disable-next-line jsx-a11y/media-has-caption */}

{!playing && ( )}

{time(now)} / {time(length)} { if (video.current) video.current.currentTime = Number(e.currentTarget.value); }} /> {captions && ( )}

{caption &&

{caption}

} ); } 4f:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[null,["$","$L50",null,{"namespace":"@creance","registryDependencies":["https://creance.pages.dev/r/creance-base.json"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"video/Video.css","content":"$52","type":"registry:file","target":"@components/creance/video/Video.css"},{"path":"video/Video.tsx","content":"$53","type":"registry:ui","target":"@components/creance/video/Video.tsx"}],"className":"h-[70svh] min-h-80"}]]}]