52: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"] 53: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"] 54:T5550,import * as SliderPrimitive from "@kobalte/core/slider"; import { Show, createContext, createMemo, createSignal, untrack, useContext, } from "solid-js"; import { VolumeControl, VolumeControlMute, VolumeControlSlider, } from "@/components/ui/volume-control"; import type { VolumeControlProps } from "@/components/ui/volume-control"; import { useAudioPlayer } from "@/hooks/use-audio-player"; import type { AudioPlayerController, UseAudioPlayerOptions, } from "@/hooks/use-audio-player"; import { useFrameSource } from "@/hooks/use-frame-source"; import { clamp } from "@/lib/audio/decibels"; import { formatTime } from "@/lib/audio/time"; import { provideContext } from "@/lib/solid/context"; import { createCompatEffect } from "@/lib/solid/effect"; import type { ButtonDOMProps, DivDOMProps, ImageDOMProps, JSXElement, SpanDOMProps, } from "@/lib/solid/jsx-types"; import { useKobalteSliderCompat } from "@/lib/solid/kobalte-slider"; import { forwardProps, omitProps } from "@/lib/solid/props"; import { mergeStyleVars } from "@/lib/solid/style"; import type { StyleValue } from "@/lib/solid/style"; import { cn } from "@/lib/utils"; const DEFAULT_RATES = [0.5, 0.75, 1, 1.25, 1.5, 2]; const SEEK_STEP = 5; const SEEK_LARGE_STEP = 15; const VOLUME_STEP = 0.05; interface PlayerContextValue { readonly player: AudioPlayerController; readonly onPrevious?: () => void; readonly onNext?: () => void; } const PlayerContext = createContext(); const usePlayerPart = (part: string) => { const context = useContext(PlayerContext); if (!context) throw new Error(`${part} must be used inside AudioPlayer.`); return context; }; export const useAudioPlayerContext = () => usePlayerPart("useAudioPlayerContext").player; export interface AudioPlayerProps extends Omit< DivDOMProps, | "onPlay" | "onPause" | "onEnded" | "onError" | "onTimeUpdate" | "onKeyDown" >, UseAudioPlayerOptions { className?: string; player?: AudioPlayerController; onTimeUpdate?: (time: number) => void; onPrevious?: () => void; onNext?: () => void; shortcuts?: boolean; onKeyDown?: (event: KeyboardEvent) => void; } const isEditable = (target: EventTarget | null) => target instanceof HTMLElement && (target.isContentEditable || ["INPUT", "SELECT", "TEXTAREA"].includes(target.tagName)); export const AudioPlayer = (props: AudioPlayerProps) => { return ( } > {(player) => } ); }; const InternalAudioPlayer = (props: { settings: AudioPlayerProps }) => { const player = useAudioPlayer(() => props.settings); return ; }; const AudioPlayerRoot = ( props: AudioPlayerProps & { player: AudioPlayerController } ) => { const player = () => props.player; const settings: PlayerContextValue = { get player() { return player(); }, get onPrevious() { return props.onPrevious; }, get onNext() { return props.onNext; }, }; createCompatEffect( () => player().currentTime, (time) => { props.onTimeUpdate?.(time); } ); const keyDown = (event: KeyboardEvent) => { props.onKeyDown?.(event); if ( props.shortcuts === false || event.defaultPrevented || event.metaKey || event.ctrlKey || event.altKey || isEditable(event.target) ) return; const target = event.target; if (!(target instanceof HTMLElement)) return; const controller = player(); const slider = target.getAttribute("role") === "slider"; const amount = event.shiftKey ? SEEK_LARGE_STEP : SEEK_STEP; const actions = { " ": target.tagName === "BUTTON" ? null : () => void controller.toggle(), k: target.tagName === "BUTTON" ? null : () => void controller.toggle(), m: () => controller.setMuted(!controller.muted), ArrowDown: slider ? null : () => controller.setVolume(clamp(controller.volume - VOLUME_STEP, 0, 1)), ArrowUp: slider ? null : () => controller.setVolume(clamp(controller.volume + VOLUME_STEP, 0, 1)), ArrowLeft: slider ? null : () => controller.seek(controller.currentTime - amount), ArrowRight: slider ? null : () => controller.seek(controller.currentTime + amount), Home: slider ? null : () => controller.seek(0), End: slider ? null : () => controller.seek(controller.duration), }; if (!Object.hasOwn(actions, event.key)) return; // SAFETY: The own-property check proves this is a player shortcut. const action = actions[event.key as keyof typeof actions]; if (action) { event.preventDefault(); action(); } }; const rest = omitProps(props, [ "class", "className", "children", "player", "onPrevious", "onNext", "onTimeUpdate", "shortcuts", "onKeyDown", "src", "autoPlay", "loop", "volume", "muted", "playbackRate", "preload", "crossOrigin", "onPlay", "onPause", "onEnded", "onError", ]); return provideContext(PlayerContext, settings, () => (

{props.children}

)); }; interface ImageProps extends ImageDOMProps { className?: string; } interface SpanProps extends SpanDOMProps { className?: string; } interface DivProps extends DivDOMProps { className?: string; } export const AudioPlayerArtwork = (props: ImageProps) => { const rest = omitProps(props, ["class", "className"]); return ( ); }; export const AudioPlayerTitle = (props: SpanProps) => { const rest = omitProps(props, ["class", "className"]); return ( ); }; export const AudioPlayerDescription = (props: SpanProps) => { const rest = omitProps(props, ["class", "className"]); return ( ); }; export const AudioPlayerControls = (props: DivProps) => { const rest = omitProps(props, ["class", "className"]); return (

); }; const BUTTON_CLASS = "inline-flex size-8 shrink-0 items-center justify-center rounded-full text-foreground outline-none transition-colors hover:bg-muted focus-visible:ring-3 focus-visible:ring-ring/30 disabled:pointer-events-none disabled:opacity-40 [&_svg:not([class*='size-'])]:size-4"; export interface PlayerButtonState { readonly slot: string; readonly playing?: boolean; readonly loading?: boolean; readonly looping?: boolean; } export interface PlayerButtonRenderProps extends ButtonDOMProps { "data-slot": string; "data-playing"?: string; "data-loading"?: string; "data-looping"?: string; onClick: (event: MouseEvent) => void; } export interface PlayerButtonProps extends Omit { className?: string; onClick?: (event: MouseEvent) => void; render?: ( props: PlayerButtonRenderProps, state: PlayerButtonState ) => JSXElement; } interface ButtonProps extends PlayerButtonProps { slotName: string; label: string; action: () => void; playing?: boolean; loading?: boolean; looping?: boolean; } const PlayerButton = (props: ButtonProps) => { const rest = omitProps(props, [ "class", "className", "slotName", "label", "action", "onClick", "children", "render", "playing", "loading", "looping", ]); const state: PlayerButtonState = { get slot() { return props.slotName; }, get playing() { return props.playing; }, get loading() { return props.loading; }, get looping() { return props.looping; }, }; const renderProps: PlayerButtonRenderProps = { get "aria-label"() { return props.label; }, get class() { return cn( BUTTON_CLASS, !props.children && "w-auto px-2.5", props.class, props.className ); }, type: "button", get "data-slot"() { return props.slotName; }, get "data-playing"() { return props.playing ? "" : undefined; }, get "data-loading"() { return props.loading ? "" : undefined; }, get "data-looping"() { return props.looping ? "" : undefined; }, onClick: (event: MouseEvent) => { props.onClick?.(event); if (!event.defaultPrevented) props.action(); }, get children() { return props.children ?? {props.label}; }, }; forwardProps(renderProps, rest); const render = untrack(() => props.render); if (render) { const rendered = createMemo(() => render(renderProps, state)); return <>{rendered()}; } return