\r {controls && (\r <>\r <_Controls />\r <_ControlsGradient />\r <_CommandCue />\r <_TogglePlayOverlay />\r \r )}\r <_LoadingOverlay />\r <_ErrorOverlay />\r \r \r )\r }\r )\r Video.displayName = "Video"\r \r export { Video }\r `,highlightedCodeHtml:`

"use client"

import * as React from "react"

import { cn } from "@/lib/utils"

import { _CommandCue } from "./command-cue"
import { _Container } from "./container"
import { _Controls, _ControlsGradient } from "./controls"
import { _ErrorOverlay, _LoadingOverlay, _TogglePlayOverlay } from "./overlay"
import { _VideoStoreProvider } from "./store"
import { _VideoControlTooltipProvider } from "./tooltip"

interface VideoProps extends React.VideoHTMLAttributes<HTMLVideoElement> {}

const Video = React.forwardRef<HTMLVideoElement, VideoProps>(
  (
    { className, children, controls = true, preload = "metadata", ...props },
    forwardedRef
  ) => {
    //
    const videoRef = React.useRef<HTMLVideoElement | null>(null)

    // Sync internal ref with forwarded ref
    React.useImperativeHandle(forwardedRef, () => videoRef.current!, [])

    return (
      <_VideoStoreProvider videoRef={videoRef}>
        <_Container controls={controls}>
          <video
            ref={videoRef}
            {...props}
            preload={preload}
            data-slot="video"
            className={cn("bg-accent aspect-video w-full", className)}
          >
            {children}
            Your browser does not support the video tag.
          </video>
          {controls && (
            <>
              <_Controls />
              <_ControlsGradient />
              <_CommandCue />
              <_TogglePlayOverlay />
            </>
          )}
          <_LoadingOverlay />
          <_ErrorOverlay />
        </_Container>
      </_VideoStoreProvider>
    )
  }
)
Video.displayName = "Video"

export { Video }

`}),(0,s.jsx)(n.p,{children:(0,s.jsx)(n.code,{children:"video/command-cue.tsx"})}),(0,s.jsx)(o,{name:"video/command-cue",rawCodeString:`import {\r FastForwardIcon,\r PauseIcon,\r PlayIcon,\r RewindIcon,\r Volume1Icon,\r Volume2Icon,\r VolumeXIcon,\r } from "lucide-react"\r \r import { cn } from "@/lib/utils"\r \r import { _useVideoStore } from "./store"\r import { Command } from "./types"\r \r const commandCueIcon: Record = {\r play: ,\r pause: ,\r forward: ,\r backward: ,\r volumeUp: ,\r volumeDown: ,\r mute: ,\r unmute: ,\r speedUp: ,\r speedDown: ,\r }\r \r const CommandCueBubble = () => {\r const commandCue = _useVideoStore((state) => state.commandCue)\r \r if (!commandCue) return null\r \r const { command, id } = commandCue\r \r return (\r

\r \r

\r {commandCueIcon[command]}\r

\r \r )\r }\r \r const CommandCueValueBubble = ({ children }: { children: React.ReactNode }) => (\r

\r {children}\r

\r )\r \r const CommandCue = () => {\r const commandCue = _useVideoStore((state) => state.commandCue)\r \r if (!commandCue) return null\r \r // Helper booleans for overlay types\r const isVolumeAction = ["volumeUp", "volumeDown", "mute", "unmute"].includes(\r commandCue.command\r )\r const isSpeedAction = ["speedUp", "speedDown"].includes(commandCue.command)\r \r return (\r <>\r \r \r {/* Volume percentage overlay */}\r {isVolumeAction && (\r \r {commandCue.command === "mute"\r ? "0%"\r : \`\${Math.round((commandCue.data?.volume ?? 0) * 100)}%\`}\r \r )}\r \r {/* Speed overlay */}\r {isSpeedAction && (\r \r {commandCue.data?.speed ?? 1}x\r \r )}\r \r )\r }\r \r export { CommandCue as _CommandCue }\r `,highlightedCodeHtml:`

import {
  FastForwardIcon,
  PauseIcon,
  PlayIcon,
  RewindIcon,
  Volume1Icon,
  Volume2Icon,
  VolumeXIcon,
} from "lucide-react"

import { cn } from "@/lib/utils"

import { _useVideoStore } from "./store"
import { Command } from "./types"

const commandCueIcon: Record<Command, React.ReactNode> = {
  play: <PlayIcon className="fill-video text-video" />,
  pause: <PauseIcon className="fill-video text-video" />,
  forward: <FastForwardIcon className="fill-video text-video" />,
  backward: <RewindIcon className="fill-video text-video" />,
  volumeUp: <Volume2Icon className="text-video" />,
  volumeDown: <Volume1Icon className="text-video" />,
  mute: <VolumeXIcon className="text-video" />,
  unmute: <Volume2Icon className="text-video" />,
  speedUp: <FastForwardIcon className="text-video" />,
  speedDown: <RewindIcon className="text-video" />,
}

const CommandCueBubble = () => {
  const commandCue = _useVideoStore((state) => state.commandCue)

  if (!commandCue) return null

  const { command, id } = commandCue

  return (
    <div className="pointer-events-none absolute inset-0 flex items-center">
      <div
        key={id}
        className={cn(
          "flex w-full items-center justify-center",
          command === "forward" && "justify-end pr-24",
          command === "backward" && "justify-start pl-24"
        )}
      >
        <div className="rounded-full bg-black/40 p-4 backdrop-blur-sm [&_svg]:h-12 [&_svg]:w-12">
          {commandCueIcon[command]}
        </div>
      </div>
    </div>
  )
}

const CommandCueValueBubble = ({ children }: { children: React.ReactNode }) => (
  <div className="pointer-events-none absolute top-8 left-1/2 -translate-x-1/2 transform">
    <div className="animate-fade-in rounded-md bg-black/40 px-4 py-2 backdrop-blur-sm">
      <span className="text-video text-xl font-semibold">{children}</span>
    </div>
  </div>
)

const CommandCue = () => {
  const commandCue = _useVideoStore((state) => state.commandCue)

  if (!commandCue) return null

  // Helper booleans for overlay types
  const isVolumeAction = ["volumeUp", "volumeDown", "mute", "unmute"].includes(
    commandCue.command
  )
  const isSpeedAction = ["speedUp", "speedDown"].includes(commandCue.command)

  return (
    <>
      <CommandCueBubble />

      {/* Volume percentage overlay */}
      {isVolumeAction && (
        <CommandCueValueBubble>
          {commandCue.command === "mute"
            ? "0%"
            : \`\${Math.round((commandCue.data?.volume ?? 0) * 100)}%\`}
        </CommandCueValueBubble>
      )}

      {/* Speed overlay */}
      {isSpeedAction && (
        <CommandCueValueBubble>
          {commandCue.data?.speed ?? 1}x
        </CommandCueValueBubble>
      )}
    </>
  )
}

export { CommandCue as _CommandCue }

`}),(0,s.jsx)(n.p,{children:(0,s.jsx)(n.code,{children:"video/constant.ts"})}),(0,s.jsx)(o,{name:"video/constant.ts",rawCodeString:`export const _playbackSpeeds = [0.25, 0.5, 0.75, 1, 1.25, 1.5, 1.75, 2];\r `,highlightedCodeHtml:`

export const _playbackSpeeds = [0.25, 0.5, 0.75, 1, 1.25, 1.5, 1.75, 2];

`}),(0,s.jsx)(n.p,{children:(0,s.jsx)(n.code,{children:"video/container.tsx"})}),(0,s.jsx)(o,{name:"video/container",rawCodeString:`import * as React from "react"\r \r import { cn } from "@/lib/utils"\r \r import { _useKeyboardControls } from "./hooks"\r import { _useVideoStore } from "./store"\r \r const Container = ({\r children,\r controls,\r }: {\r children: React.ReactNode\r controls: boolean\r }) => {\r const setContainerNode = _useVideoStore((state) => state.setContainerNode)\r \r const registerUserInteraction = _useVideoStore(\r (state) => state.registerUserInteraction\r )\r \r const isFullscreen = _useVideoStore((state) => state.isFullscreen)\r \r const { handleKeyDown } = _useKeyboardControls()\r \r // Use the callback ref to set the container node in the store\r const containerCallbackRef = React.useCallback(\r (node: HTMLDivElement | null) => {\r setContainerNode(node)\r },\r [setContainerNode]\r )\r \r return (\r \r {children}\r \r )\r }\r \r export { Container as _Container }\r `,highlightedCodeHtml:`

import * as React from "react"

import { cn } from "@/lib/utils"

import { _useKeyboardControls } from "./hooks"
import { _useVideoStore } from "./store"

const Container = ({
  children,
  controls,
}: {
  children: React.ReactNode
  controls: boolean
}) => {
  const setContainerNode = _useVideoStore((state) => state.setContainerNode)

  const registerUserInteraction = _useVideoStore(
    (state) => state.registerUserInteraction
  )

  const isFullscreen = _useVideoStore((state) => state.isFullscreen)

  const { handleKeyDown } = _useKeyboardControls()

  // Use the callback ref to set the container node in the store
  const containerCallbackRef = React.useCallback(
    (node: HTMLDivElement | null) => {
      setContainerNode(node)
    },
    [setContainerNode]
  )

  return (
    <div
      ref={containerCallbackRef}
      onKeyDown={controls ? handleKeyDown : undefined}
      onMouseMove={registerUserInteraction}
      onFocus={registerUserInteraction}
      tabIndex={controls ? 0 : undefined}
      className={cn(
        "focus-visible:ring-video-ring relative flex w-full items-center focus-visible:ring-1 focus-visible:outline-none",
        !isFullscreen && "rounded-video [&_video]:rounded-video"
      )}
      data-slot="video-container"
    >
      {children}
    </div>
  )
}

export { Container as _Container }

`}),(0,s.jsx)(n.p,{children:(0,s.jsx)(n.code,{children:"video/controls.tsx"})}),(0,s.jsx)(o,{name:"video/controls",rawCodeString:`import * as React from "react"\r import * as SelectPrimitive from "@radix-ui/react-select"\r import * as SliderPrimitive from "@radix-ui/react-slider"\r import {\r CheckIcon,\r MaximizeIcon,\r MinimizeIcon,\r PauseIcon,\r PlayIcon,\r RotateCcwIcon,\r Volume1Icon,\r Volume2Icon,\r VolumeXIcon,\r } from "lucide-react"\r \r import { cn } from "@/lib/utils"\r \r import { _playbackSpeeds } from "./constant"\r import { _selectHideControlsState, _useVideoStore } from "./store"\r import {\r _VideoControlTooltip,\r _VideoControlTooltipContent,\r _VideoControlTooltipPortal,\r _VideoControlTooltipProvider,\r _VideoControlTooltipTrigger,\r } from "./tooltip"\r \r const Controls = () => {\r const hideControls = _useVideoStore(_selectHideControlsState)\r \r return (\r \r \r

\r <_VideoControlTooltipProvider delayDuration={300}>\r \r \r \r \r \r \r

\r \r )\r }\r \r const Seekbar = () => {\r const currentTime = _useVideoStore((state) => state.currentTime)\r const duration = _useVideoStore((state) => state.duration)\r \r const handleSeekbarChange = _useVideoStore(\r (state) => state.handleSeekbarChange\r )\r \r const [tooltipState, setTooltipState] = React.useState<{\r value: number | null\r coords: { x: number; y: number }\r }>({ value: null, coords: { x: 0, y: 0 } })\r \r const onValueChange = React.useCallback(\r (value: number[]) => {\r handleSeekbarChange(value[0])\r },\r [handleSeekbarChange]\r )\r \r const handlePointerMove = React.useCallback(\r (event: React.PointerEvent) => {\r const sliderElement = event.currentTarget\r const mousePositionX = event.clientX\r \r // Get Slider's Geometry\r const sliderRect = sliderElement.getBoundingClientRect()\r const sliderElementLeftEdgeX = sliderRect.left\r const sliderElementWidth = sliderRect.width\r \r // Calculate Pointer's Position Relative to Slider\r const pointerOffsetFromSliderLeftEdge =\r mousePositionX - sliderElementLeftEdgeX\r \r let valueUnderPointer: number | null = null\r \r if (\r sliderElementWidth === 0 ||\r pointerOffsetFromSliderLeftEdge < 0 ||\r pointerOffsetFromSliderLeftEdge > sliderElementWidth\r ) {\r valueUnderPointer = null\r } else {\r const sliderMinValue = 0\r const sliderMaxValue = duration\r \r // Calculate Slider Value from Pointer Position\r const pointerPositionAsFractionOfSlider = Math.max(\r 0,\r Math.min(1, pointerOffsetFromSliderLeftEdge / sliderElementWidth)\r )\r let rawValueAtPointer =\r sliderMinValue +\r pointerPositionAsFractionOfSlider * (sliderMaxValue - sliderMinValue)\r \r rawValueAtPointer = Math.round(rawValueAtPointer)\r valueUnderPointer = Math.max(\r sliderMinValue,\r Math.min(sliderMaxValue, rawValueAtPointer)\r )\r }\r \r if (valueUnderPointer !== null) {\r const tooltipCssX = event.clientX\r const tooltipCssY = sliderRect.top\r \r setTooltipState({\r value: valueUnderPointer,\r coords: { x: tooltipCssX, y: tooltipCssY },\r })\r } else {\r setTooltipState({ value: null, coords: { x: 0, y: 0 } })\r }\r },\r [duration]\r )\r \r const handlePointerLeave = React.useCallback(() => {\r setTooltipState({ value: null, coords: { x: 0, y: 0 } })\r }, [])\r \r return (\r

\r \r \r \r \r \r \r {tooltipState.value !== null && (\r \r {formatTime(tooltipState.value)}\r \r )}\r

\r )\r }\r \r const Button = ({\r children,\r className,\r ...props\r }: React.ButtonHTMLAttributes) => {\r return (\r \r {children}\r \r )\r }\r \r const PlayButton = () => {\r const hideControls = _useVideoStore(_selectHideControlsState)\r const togglePlay = _useVideoStore((state) => state.togglePlay)\r const hasEnded = _useVideoStore((state) => state.hasEnded)\r const isPlaying = _useVideoStore((state) => state.isPlaying)\r const containerNode = _useVideoStore((state) => state.containerNode)\r \r return (\r <_VideoControlTooltip>\r <_VideoControlTooltipTrigger asChild>\r \r \r <_VideoControlTooltipPortal container={containerNode}>\r <_VideoControlTooltipContent\r side="top"\r sideOffset={4}\r className={cn(hideControls && "opacity-0")}\r >\r

\r {hasEnded ? "Replay (k)" : isPlaying ? "Pause (k)" : "Play (k)"}\r

\r \r \r \r )\r }\r \r const VolumeControl = () => {\r const isMuted = _useVideoStore((state) => state.isMuted)\r const volume = _useVideoStore((state) => state.volume)\r const hideControls = _useVideoStore(_selectHideControlsState)\r const containerNode = _useVideoStore((state) => state.containerNode)\r \r const toggleMute = _useVideoStore((state) => state.toggleMute)\r const handleVolumeChange = _useVideoStore((state) => state.handleVolumeChange)\r const handleVolumeCommit = _useVideoStore((state) => state.handleVolumeCommit)\r \r const sliderValue = React.useMemo(\r () => [isMuted ? 0 : volume],\r [isMuted, volume]\r )\r \r return (\r

\r <_VideoControlTooltip>\r <_VideoControlTooltipTrigger asChild>\r \r \r <_VideoControlTooltipPortal container={containerNode}>\r <_VideoControlTooltipContent\r side="top"\r sideOffset={4}\r className={cn(hideControls && "opacity-0")}\r >\r

{isMuted ? "Unmute (m)" : "Mute (m)"}

\r \r \r \r \r

\r <_VideoControlTooltip>\r <_VideoControlTooltipTrigger asChild>\r \r \r \r \r \r \r \r \r <_VideoControlTooltipPortal container={containerNode}>\r <_VideoControlTooltipContent\r side="top"\r sideOffset={4}\r className={cn(hideControls && "opacity-0")}\r >\r

Volume

\r \r \r \r

\r )\r }\r \r const formatTime = (timeInSeconds: number) => {\r const hours = Math.floor(timeInSeconds / 3600)\r const minutes = Math.floor((timeInSeconds % 3600) / 60)\r const seconds = Math.floor(timeInSeconds % 60)\r if (hours > 0) {\r return \`\${hours}:\${minutes < 10 ? "0" : ""}\${minutes}:\${\r seconds < 10 ? "0" : ""\r }\${seconds}\`\r } else {\r return \`\${minutes}:\${seconds < 10 ? "0" : ""}\${seconds}\`\r }\r }\r \r const PlaybackTime = () => {\r const duration = _useVideoStore((state) => state.duration)\r const currentTime = _useVideoStore((state) => state.currentTime)\r \r return (\r

\r {formatTime(currentTime)} / {formatTime(duration)}\r

\r )\r }\r \r const PlaybackSpeedButton = () => {\r const containerNode = _useVideoStore((state) => state.containerNode)\r const playbackSpeed = _useVideoStore((state) => state.playbackSpeed)\r const handleSpeedChange = _useVideoStore((state) => state.handleSpeedChange)\r const hideControls = _useVideoStore(_selectHideControlsState)\r \r const handleFocusCapture = React.useCallback(\r (e: React.FocusEvent) => {\r if (!e.currentTarget.matches(":focus-visible")) {\r e.stopPropagation()\r }\r },\r []\r )\r \r const playbackSpeedValue = playbackSpeed.toString()\r \r return (\r \r <_VideoControlTooltip>\r <_VideoControlTooltipTrigger asChild>\r \r {playbackSpeed}x\r \r \r <_VideoControlTooltipPortal container={containerNode}>\r <_VideoControlTooltipContent\r side="top"\r sideOffset={4}\r className={cn(hideControls && "opacity-0")}\r >\r

Playback Speed

\r \r \r \r \r \r \r \r {_playbackSpeeds.map((playbackSpeed) => (\r \r \r \r \r \r \r \r {playbackSpeed}x\r \r \r ))}\r \r \r \r \r )\r }\r \r const FullScreenButton = () => {\r const containerNode = _useVideoStore((state) => state.containerNode)\r const isFullscreen = _useVideoStore((state) => state.isFullscreen)\r const hideControls = _useVideoStore(_selectHideControlsState)\r const toggleFullscreen = _useVideoStore((state) => state.toggleFullscreen)\r \r return (\r <_VideoControlTooltip>\r <_VideoControlTooltipTrigger asChild>\r \r \r <_VideoControlTooltipPortal container={containerNode}>\r <_VideoControlTooltipContent\r side="top"\r sideOffset={4}\r className={cn(hideControls && "opacity-0")}\r >\r

{isFullscreen ? "Exit Fullscreen (f)" : "Enter Fullscreen (f)"}

\r \r \r \r )\r }\r \r const ControlsGradient = () => {\r const hideControls = _useVideoStore(_selectHideControlsState)\r \r return (\r \r )\r }\r \r export { Controls as _Controls, ControlsGradient as _ControlsGradient }\r `,highlightedCodeHtml:`

import * as React from "react"
import * as SelectPrimitive from "@radix-ui/react-select"
import * as SliderPrimitive from "@radix-ui/react-slider"
import {
  CheckIcon,
  MaximizeIcon,
  MinimizeIcon,
  PauseIcon,
  PlayIcon,
  RotateCcwIcon,
  Volume1Icon,
  Volume2Icon,
  VolumeXIcon,
} from "lucide-react"

import { cn } from "@/lib/utils"

import { _playbackSpeeds } from "./constant"
import { _selectHideControlsState, _useVideoStore } from "./store"
import {
  _VideoControlTooltip,
  _VideoControlTooltipContent,
  _VideoControlTooltipPortal,
  _VideoControlTooltipProvider,
  _VideoControlTooltipTrigger,
} from "./tooltip"

const Controls = () => {
  const hideControls = _useVideoStore(_selectHideControlsState)

  return (
    <div
      className={cn(
        "peer absolute inset-x-0 bottom-0 z-30 grid items-end gap-2.5 p-3 transition-opacity duration-300 hover:!opacity-100",
        hideControls && "opacity-0"
      )}
      data-slot="controls"
    >
      <Seekbar />
      <div className="flex items-center gap-2">
        <_VideoControlTooltipProvider delayDuration={300}>
          <PlayButton />
          <VolumeControl />
          <PlaybackTime />
          <PlaybackSpeedButton />
          <FullScreenButton />
        </_VideoControlTooltipProvider>
      </div>
    </div>
  )
}

const Seekbar = () => {
  const currentTime = _useVideoStore((state) => state.currentTime)
  const duration = _useVideoStore((state) => state.duration)

  const handleSeekbarChange = _useVideoStore(
    (state) => state.handleSeekbarChange
  )

  const [tooltipState, setTooltipState] = React.useState<{
    value: number | null
    coords: { x: number; y: number }
  }>({ value: null, coords: { x: 0, y: 0 } })

  const onValueChange = React.useCallback(
    (value: number[]) => {
      handleSeekbarChange(value[0])
    },
    [handleSeekbarChange]
  )

  const handlePointerMove = React.useCallback(
    (event: React.PointerEvent<HTMLDivElement>) => {
      const sliderElement = event.currentTarget
      const mousePositionX = event.clientX

      // Get Slider's Geometry
      const sliderRect = sliderElement.getBoundingClientRect()
      const sliderElementLeftEdgeX = sliderRect.left
      const sliderElementWidth = sliderRect.width

      // Calculate Pointer's Position Relative to Slider
      const pointerOffsetFromSliderLeftEdge =
        mousePositionX - sliderElementLeftEdgeX

      let valueUnderPointer: number | null = null

      if (
        sliderElementWidth === 0 ||
        pointerOffsetFromSliderLeftEdge < 0 ||
        pointerOffsetFromSliderLeftEdge > sliderElementWidth
      ) {
        valueUnderPointer = null
      } else {
        const sliderMinValue = 0
        const sliderMaxValue = duration

        // Calculate Slider Value from Pointer Position
        const pointerPositionAsFractionOfSlider = Math.max(
          0,
          Math.min(1, pointerOffsetFromSliderLeftEdge / sliderElementWidth)
        )
        let rawValueAtPointer =
          sliderMinValue +
          pointerPositionAsFractionOfSlider * (sliderMaxValue - sliderMinValue)

        rawValueAtPointer = Math.round(rawValueAtPointer)
        valueUnderPointer = Math.max(
          sliderMinValue,
          Math.min(sliderMaxValue, rawValueAtPointer)
        )
      }

      if (valueUnderPointer !== null) {
        const tooltipCssX = event.clientX
        const tooltipCssY = sliderRect.top

        setTooltipState({
          value: valueUnderPointer,
          coords: { x: tooltipCssX, y: tooltipCssY },
        })
      } else {
        setTooltipState({ value: null, coords: { x: 0, y: 0 } })
      }
    },
    [duration]
  )

  const handlePointerLeave = React.useCallback(() => {
    setTooltipState({ value: null, coords: { x: 0, y: 0 } })
  }, [])

  return (
    <div className="relative flex items-center">
      <SliderPrimitive.Root
        step={1}
        onPointerMove={handlePointerMove}
        onPointerLeave={handlePointerLeave}
        value={[currentTime]}
        onValueChange={onValueChange}
        max={duration}
        className={
          "group/seekbar-slider has-[[data-slot='slider-thumb']:focus-visible]:ring-video-ring absolute flex h-5 w-full cursor-pointer touch-none items-center select-none has-[[data-slot='slider-thumb']:focus-visible]:ring-1"
        }
      >
        <SliderPrimitive.Track
          className={
            "bg-video/50 absolute h-[3px] w-full grow origin-center overflow-hidden rounded-full transition-[height] duration-150 group-hover/seekbar-slider:h-[5px]"
          }
        >
          <SliderPrimitive.Range className={"bg-video absolute h-full"} />
        </SliderPrimitive.Track>
        <SliderPrimitive.Thumb
          data-slot="slider-thumb"
          aria-label="Video progress"
          className="bg-video ring-video-ring/50 block h-3 w-3 shrink-0 rounded-full focus-visible:ring-2 focus-visible:outline-none"
        />
      </SliderPrimitive.Root>
      {tooltipState.value !== null && (
        <span
          className="bg-video text-video-foreground animate-in fade-in-0 zoom-in-95 slide-in-from-left-1/2 pointer-events-none fixed z-50 origin-center translate-x-[-50%] translate-y-[calc(-100%_-_4px)] transform overflow-hidden rounded-md px-3 py-1.5 text-xs tabular-nums shadow-lg"
          style={{
            left: \`\${tooltipState.coords.x}px\`,
            top: \`\${tooltipState.coords.y}px\`,
          }}
        >
          {formatTime(tooltipState.value)}
        </span>
      )}
    </div>
  )
}

const Button = ({
  children,
  className,
  ...props
}: React.ButtonHTMLAttributes<HTMLButtonElement>) => {
  return (
    <button
      className={cn(
        "focus-visible:ring-video-ring text-video hover:text-video/80 cursor-pointer rounded-md p-1 focus-visible:ring-1 focus-visible:outline-none",
        className
      )}
      {...props}
    >
      {children}
    </button>
  )
}

const PlayButton = () => {
  const hideControls = _useVideoStore(_selectHideControlsState)
  const togglePlay = _useVideoStore((state) => state.togglePlay)
  const hasEnded = _useVideoStore((state) => state.hasEnded)
  const isPlaying = _useVideoStore((state) => state.isPlaying)
  const containerNode = _useVideoStore((state) => state.containerNode)

  return (
    <_VideoControlTooltip>
      <_VideoControlTooltipTrigger asChild>
        <Button onClick={togglePlay}>
          {hasEnded ? (
            <RotateCcwIcon className="h-5 w-5" />
          ) : isPlaying ? (
            <PauseIcon className="h-5 w-5" />
          ) : (
            <PlayIcon className="h-5 w-5" />
          )}
          <span className="sr-only">
            {hasEnded ? "Replay" : isPlaying ? "Pause" : "Play"}
          </span>
        </Button>
      </_VideoControlTooltipTrigger>
      <_VideoControlTooltipPortal container={containerNode}>
        <_VideoControlTooltipContent
          side="top"
          sideOffset={4}
          className={cn(hideControls && "opacity-0")}
        >
          <p>
            {hasEnded ? "Replay (k)" : isPlaying ? "Pause (k)" : "Play (k)"}
          </p>
        </_VideoControlTooltipContent>
      </_VideoControlTooltipPortal>
    </_VideoControlTooltip>
  )
}

const VolumeControl = () => {
  const isMuted = _useVideoStore((state) => state.isMuted)
  const volume = _useVideoStore((state) => state.volume)
  const hideControls = _useVideoStore(_selectHideControlsState)
  const containerNode = _useVideoStore((state) => state.containerNode)

  const toggleMute = _useVideoStore((state) => state.toggleMute)
  const handleVolumeChange = _useVideoStore((state) => state.handleVolumeChange)
  const handleVolumeCommit = _useVideoStore((state) => state.handleVolumeCommit)

  const sliderValue = React.useMemo(
    () => [isMuted ? 0 : volume],
    [isMuted, volume]
  )

  return (
    <div className="relative flex items-center">
      <_VideoControlTooltip>
        <_VideoControlTooltipTrigger asChild>
          <Button onClick={toggleMute} className="peer">
            {isMuted || volume === 0 ? (
              <VolumeXIcon className="h-5 w-5" />
            ) : volume < 0.5 ? (
              <Volume1Icon className="h-5 w-5" />
            ) : (
              <Volume2Icon className="h-5 w-5" />
            )}
            <span className="sr-only">{isMuted ? "Unmute" : "Mute"}</span>
          </Button>
        </_VideoControlTooltipTrigger>
        <_VideoControlTooltipPortal container={containerNode}>
          <_VideoControlTooltipContent
            side="top"
            sideOffset={4}
            className={cn(hideControls && "opacity-0")}
          >
            <p>{isMuted ? "Unmute (m)" : "Mute (m)"}</p>
          </_VideoControlTooltipContent>
        </_VideoControlTooltipPortal>
      </_VideoControlTooltip>

      <div className="flex w-0 items-center self-stretch transition-all [--volume-slider-width:80px] peer-hover:w-[var(--volume-slider-width)] hover:w-[var(--volume-slider-width)] focus-visible:w-[var(--volume-slider-width)] has-[[data-slot='slider-thumb']:focus-visible]:w-[var(--volume-slider-width)]">
        <_VideoControlTooltip>
          <_VideoControlTooltipTrigger asChild>
            <SliderPrimitive.Root
              step={0.1}
              value={sliderValue}
              onValueChange={handleVolumeChange}
              onValueCommit={handleVolumeCommit}
              max={1}
              className="has-[[data-slot='slider-thumb']:focus-visible]:ring-video-ring relative mx-1 ml-2 flex w-full cursor-pointer touch-none items-center self-stretch overflow-hidden rounded-md transition-all duration-200 ease-in-out select-none has-[[data-slot='slider-thumb']:focus-visible]:overflow-auto has-[[data-slot='slider-thumb']:focus-visible]:ring-1"
            >
              <SliderPrimitive.Track className="bg-video/50 relative h-1 w-full grow overflow-hidden rounded-full">
                <SliderPrimitive.Range className="bg-video absolute h-full" />
              </SliderPrimitive.Track>

              <SliderPrimitive.Thumb
                data-slot="slider-thumb"
                className="bg-video ring-video-ring/50 block h-3 w-3 rounded-full focus-visible:ring-2 focus-visible:outline-none"
                aria-label="Volume control"
              />
            </SliderPrimitive.Root>
          </_VideoControlTooltipTrigger>
          <_VideoControlTooltipPortal container={containerNode}>
            <_VideoControlTooltipContent
              side="top"
              sideOffset={4}
              className={cn(hideControls && "opacity-0")}
            >
              <p>Volume</p>
            </_VideoControlTooltipContent>
          </_VideoControlTooltipPortal>
        </_VideoControlTooltip>
      </div>
    </div>
  )
}

const formatTime = (timeInSeconds: number) => {
  const hours = Math.floor(timeInSeconds / 3600)
  const minutes = Math.floor((timeInSeconds % 3600) / 60)
  const seconds = Math.floor(timeInSeconds % 60)
  if (hours > 0) {
    return \`\${hours}:\${minutes < 10 ? "0" : ""}\${minutes}:\${
      seconds < 10 ? "0" : ""
    }\${seconds}\`
  } else {
    return \`\${minutes}:\${seconds < 10 ? "0" : ""}\${seconds}\`
  }
}

const PlaybackTime = () => {
  const duration = _useVideoStore((state) => state.duration)
  const currentTime = _useVideoStore((state) => state.currentTime)

  return (
    <div className="text-video text-sm tabular-nums">
      {formatTime(currentTime)} / {formatTime(duration)}
    </div>
  )
}

const PlaybackSpeedButton = () => {
  const containerNode = _useVideoStore((state) => state.containerNode)
  const playbackSpeed = _useVideoStore((state) => state.playbackSpeed)
  const handleSpeedChange = _useVideoStore((state) => state.handleSpeedChange)
  const hideControls = _useVideoStore(_selectHideControlsState)

  const handleFocusCapture = React.useCallback(
    (e: React.FocusEvent<HTMLElement>) => {
      if (!e.currentTarget.matches(":focus-visible")) {
        e.stopPropagation()
      }
    },
    []
  )

  const playbackSpeedValue = playbackSpeed.toString()

  return (
    <SelectPrimitive.Root
      value={playbackSpeedValue}
      onValueChange={handleSpeedChange}
    >
      <_VideoControlTooltip>
        <_VideoControlTooltipTrigger asChild>
          <SelectPrimitive.Trigger
            onFocusCapture={handleFocusCapture}
            className="focus-visible:ring-video-ring text-video hover:text-video/80 ml-auto cursor-pointer rounded-md px-2 py-1 text-sm focus-visible:ring-1 focus-visible:outline-none"
          >
            <SelectPrimitive.Value>{playbackSpeed}x</SelectPrimitive.Value>
          </SelectPrimitive.Trigger>
        </_VideoControlTooltipTrigger>
        <_VideoControlTooltipPortal container={containerNode}>
          <_VideoControlTooltipContent
            side="top"
            sideOffset={4}
            className={cn(hideControls && "opacity-0")}
          >
            <p>Playback Speed</p>
          </_VideoControlTooltipContent>
        </_VideoControlTooltipPortal>
      </_VideoControlTooltip>

      <SelectPrimitive.Portal container={containerNode}>
        <SelectPrimitive.Content
          position="popper"
          className="bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-[--radix-select-content-available-height] origin-[--radix-select-content-transform-origin] overflow-x-hidden overflow-y-auto rounded-md border shadow-md data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1"
        >
          <SelectPrimitive.Viewport className="h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] p-1">
            {_playbackSpeeds.map((playbackSpeed) => (
              <SelectPrimitive.Item
                key={playbackSpeed}
                className={
                  "focus:bg-accent focus:text-accent-foreground relative flex w-full cursor-default items-center rounded-sm py-1.5 pr-8 pl-2 text-sm outline-none select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50"
                }
                value={playbackSpeed.toString()}
              >
                <span className="absolute right-2 flex h-3.5 w-3.5 items-center justify-center">
                  <SelectPrimitive.ItemIndicator>
                    <CheckIcon className="h-4 w-4" />
                  </SelectPrimitive.ItemIndicator>
                </span>
                <SelectPrimitive.ItemText>
                  {playbackSpeed}x
                </SelectPrimitive.ItemText>
              </SelectPrimitive.Item>
            ))}
          </SelectPrimitive.Viewport>
        </SelectPrimitive.Content>
      </SelectPrimitive.Portal>
    </SelectPrimitive.Root>
  )
}

const FullScreenButton = () => {
  const containerNode = _useVideoStore((state) => state.containerNode)
  const isFullscreen = _useVideoStore((state) => state.isFullscreen)
  const hideControls = _useVideoStore(_selectHideControlsState)
  const toggleFullscreen = _useVideoStore((state) => state.toggleFullscreen)

  return (
    <_VideoControlTooltip>
      <_VideoControlTooltipTrigger asChild>
        <Button onClick={toggleFullscreen}>
          {isFullscreen ? (
            <MinimizeIcon className="h-5 w-5" />
          ) : (
            <MaximizeIcon className="h-5 w-5" />
          )}
          <span className="sr-only">
            {isFullscreen ? "Exit Fullscreen" : "Enter Fullscreen"}
          </span>
        </Button>
      </_VideoControlTooltipTrigger>
      <_VideoControlTooltipPortal container={containerNode}>
        <_VideoControlTooltipContent
          side="top"
          sideOffset={4}
          className={cn(hideControls && "opacity-0")}
        >
          <p>{isFullscreen ? "Exit Fullscreen (f)" : "Enter Fullscreen (f)"}</p>
        </_VideoControlTooltipContent>
      </_VideoControlTooltipPortal>
    </_VideoControlTooltip>
  )
}

const ControlsGradient = () => {
  const hideControls = _useVideoStore(_selectHideControlsState)

  return (
    <div
      className={cn(
        "pointer-events-none absolute right-0 bottom-0 left-0 z-10 h-[100px] rounded-b-md bg-gradient-to-t from-black/30 via-black/20 via-70% to-transparent mix-blend-multiply transition-opacity duration-300 peer-hover:!opacity-100",
        hideControls && "opacity-0"
      )}
    />
  )
}

export { Controls as _Controls, ControlsGradient as _ControlsGradient }

`}),(0,s.jsx)(n.p,{children:(0,s.jsx)(n.code,{children:"video/hooks.tsx"})}),(0,s.jsx)(o,{name:"video/hooks",rawCodeString:`import * as React from "react"\r \r import { _playbackSpeeds } from "./constant"\r import { _useVideoRefs, _useVideoStore } from "./store"\r \r const SEEK_STEP = 5\r \r const useKeyboardControls = () => {\r const { videoRef } = _useVideoRefs()\r \r // Actions from the store\r const togglePlay = _useVideoStore((state) => state.togglePlay)\r const seekVideo = _useVideoStore((state) => state.seekVideo)\r const showCommandCue = _useVideoStore((state) => state.showCommandCue)\r const toggleMute = _useVideoStore((state) => state.toggleMute)\r const handleSpeedChange = _useVideoStore((state) => state.handleSpeedChange)\r const registerUserInteraction = _useVideoStore(\r (state) => state.registerUserInteraction\r )\r const toggleFullscreen = _useVideoStore((state) => state.toggleFullscreen) // Assuming we add this\r const setLastCommittedVolume = _useVideoStore(\r (state) => state.setLastCommittedVolume\r )\r \r // State from the store\r const isPlaying = _useVideoStore((state) => state.isPlaying)\r const isMuted = _useVideoStore((state) => state.isMuted)\r const playbackSpeed = _useVideoStore((state) => state.playbackSpeed)\r \r const handleKeyDown = (event: React.KeyboardEvent) => {\r if (!(event.target instanceof HTMLElement)) return\r \r switch (event.code) {\r case "Space":\r if (\r event.target.tagName !== "BUTTON" &&\r event.target.role !== "option"\r ) {\r event.preventDefault()\r togglePlay()\r showCommandCue(isPlaying ? "pause" : "play")\r }\r registerUserInteraction()\r \r break\r case "ArrowRight":\r if (event.target.role !== "slider") {\r event.preventDefault()\r seekVideo(SEEK_STEP)\r showCommandCue("forward")\r } else {\r registerUserInteraction()\r }\r break\r case "ArrowLeft":\r if (event.target.role !== "slider") {\r event.preventDefault()\r seekVideo(-SEEK_STEP)\r showCommandCue("backward")\r } else {\r registerUserInteraction()\r }\r break\r case "ArrowUp":\r if (\r event.target.role !== "slider" &&\r event.target.role !== "option" &&\r event.target.role !== "combobox" &&\r videoRef.current\r ) {\r event.preventDefault()\r const newVolume =\r Math.round(Math.min(1, videoRef.current.volume + 0.1) * 10) / 10\r videoRef.current.volume = newVolume\r if (videoRef.current.muted) {\r videoRef.current.muted = false\r }\r if (newVolume > 0) {\r setLastCommittedVolume(newVolume)\r }\r showCommandCue("volumeUp", { volume: newVolume })\r } else {\r registerUserInteraction()\r }\r break\r case "ArrowDown":\r if (\r event.target.role !== "slider" &&\r event.target.role !== "option" &&\r event.target.role !== "combobox" &&\r videoRef.current\r ) {\r event.preventDefault()\r const newVolume =\r Math.round(Math.max(0, videoRef.current.volume - 0.1) * 10) / 10\r videoRef.current.volume = newVolume\r \r if (newVolume === 0) {\r showCommandCue("mute", { volume: 0 })\r } else {\r showCommandCue("volumeDown", {\r volume: newVolume,\r })\r }\r \r if (newVolume > 0) {\r setLastCommittedVolume(newVolume)\r }\r } else {\r registerUserInteraction()\r }\r break\r case "KeyM":\r toggleMute()\r if (videoRef.current) {\r showCommandCue(isMuted ? "unmute" : "mute", {\r volume: isMuted ? videoRef.current.volume : 0,\r })\r }\r break\r case "KeyF":\r toggleFullscreen()\r break\r case "KeyK":\r togglePlay()\r showCommandCue(isPlaying ? "pause" : "play")\r break\r case "KeyL":\r seekVideo(SEEK_STEP)\r showCommandCue("forward")\r break\r case "KeyJ":\r seekVideo(-SEEK_STEP)\r showCommandCue("backward")\r break\r case "Period":\r if (event.shiftKey) {\r // Handle shift + . (>)\r const nextSpeed = _playbackSpeeds.find(\r (speed) => speed > playbackSpeed\r )\r if (nextSpeed) {\r handleSpeedChange(nextSpeed.toString())\r showCommandCue("speedUp", { speed: nextSpeed })\r }\r }\r break\r case "Comma":\r if (event.shiftKey) {\r // Handle shift + , (<)\r const prevSpeed = [..._playbackSpeeds]\r .reverse()\r .find((speed) => speed < playbackSpeed)\r if (prevSpeed) {\r handleSpeedChange(prevSpeed.toString())\r showCommandCue("speedDown", {\r speed: prevSpeed,\r })\r }\r }\r break\r }\r }\r \r return {\r handleKeyDown,\r }\r }\r \r export { useKeyboardControls as _useKeyboardControls }\r `,highlightedCodeHtml:`

import * as React from "react"

import { _playbackSpeeds } from "./constant"
import { _useVideoRefs, _useVideoStore } from "./store"

const SEEK_STEP = 5

const useKeyboardControls = () => {
  const { videoRef } = _useVideoRefs()

  // Actions from the store
  const togglePlay = _useVideoStore((state) => state.togglePlay)
  const seekVideo = _useVideoStore((state) => state.seekVideo)
  const showCommandCue = _useVideoStore((state) => state.showCommandCue)
  const toggleMute = _useVideoStore((state) => state.toggleMute)
  const handleSpeedChange = _useVideoStore((state) => state.handleSpeedChange)
  const registerUserInteraction = _useVideoStore(
    (state) => state.registerUserInteraction
  )
  const toggleFullscreen = _useVideoStore((state) => state.toggleFullscreen) // Assuming we add this
  const setLastCommittedVolume = _useVideoStore(
    (state) => state.setLastCommittedVolume
  )

  // State from the store
  const isPlaying = _useVideoStore((state) => state.isPlaying)
  const isMuted = _useVideoStore((state) => state.isMuted)
  const playbackSpeed = _useVideoStore((state) => state.playbackSpeed)

  const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {
    if (!(event.target instanceof HTMLElement)) return

    switch (event.code) {
      case "Space":
        if (
          event.target.tagName !== "BUTTON" &&
          event.target.role !== "option"
        ) {
          event.preventDefault()
          togglePlay()
          showCommandCue(isPlaying ? "pause" : "play")
        }
        registerUserInteraction()

        break
      case "ArrowRight":
        if (event.target.role !== "slider") {
          event.preventDefault()
          seekVideo(SEEK_STEP)
          showCommandCue("forward")
        } else {
          registerUserInteraction()
        }
        break
      case "ArrowLeft":
        if (event.target.role !== "slider") {
          event.preventDefault()
          seekVideo(-SEEK_STEP)
          showCommandCue("backward")
        } else {
          registerUserInteraction()
        }
        break
      case "ArrowUp":
        if (
          event.target.role !== "slider" &&
          event.target.role !== "option" &&
          event.target.role !== "combobox" &&
          videoRef.current
        ) {
          event.preventDefault()
          const newVolume =
            Math.round(Math.min(1, videoRef.current.volume + 0.1) * 10) / 10
          videoRef.current.volume = newVolume
          if (videoRef.current.muted) {
            videoRef.current.muted = false
          }
          if (newVolume > 0) {
            setLastCommittedVolume(newVolume)
          }
          showCommandCue("volumeUp", { volume: newVolume })
        } else {
          registerUserInteraction()
        }
        break
      case "ArrowDown":
        if (
          event.target.role !== "slider" &&
          event.target.role !== "option" &&
          event.target.role !== "combobox" &&
          videoRef.current
        ) {
          event.preventDefault()
          const newVolume =
            Math.round(Math.max(0, videoRef.current.volume - 0.1) * 10) / 10
          videoRef.current.volume = newVolume

          if (newVolume === 0) {
            showCommandCue("mute", { volume: 0 })
          } else {
            showCommandCue("volumeDown", {
              volume: newVolume,
            })
          }

          if (newVolume > 0) {
            setLastCommittedVolume(newVolume)
          }
        } else {
          registerUserInteraction()
        }
        break
      case "KeyM":
        toggleMute()
        if (videoRef.current) {
          showCommandCue(isMuted ? "unmute" : "mute", {
            volume: isMuted ? videoRef.current.volume : 0,
          })
        }
        break
      case "KeyF":
        toggleFullscreen()
        break
      case "KeyK":
        togglePlay()
        showCommandCue(isPlaying ? "pause" : "play")
        break
      case "KeyL":
        seekVideo(SEEK_STEP)
        showCommandCue("forward")
        break
      case "KeyJ":
        seekVideo(-SEEK_STEP)
        showCommandCue("backward")
        break
      case "Period":
        if (event.shiftKey) {
          // Handle shift + . (>)
          const nextSpeed = _playbackSpeeds.find(
            (speed) => speed > playbackSpeed
          )
          if (nextSpeed) {
            handleSpeedChange(nextSpeed.toString())
            showCommandCue("speedUp", { speed: nextSpeed })
          }
        }
        break
      case "Comma":
        if (event.shiftKey) {
          // Handle shift + , (<)
          const prevSpeed = [..._playbackSpeeds]
            .reverse()
            .find((speed) => speed < playbackSpeed)
          if (prevSpeed) {
            handleSpeedChange(prevSpeed.toString())
            showCommandCue("speedDown", {
              speed: prevSpeed,
            })
          }
        }
        break
    }
  }

  return {
    handleKeyDown,
  }
}

export { useKeyboardControls as _useKeyboardControls }

`}),(0,s.jsx)(n.p,{children:(0,s.jsx)(n.code,{children:"video/overlay.tsx"})}),(0,s.jsx)(o,{name:"video/overlay",rawCodeString:`import { Loader2Icon, PlayIcon, RotateCcwIcon } from "lucide-react"\r \r import { Button } from "@/components/ui/button"\r \r import { _useVideoRefs, _useVideoStore } from "./store"\r \r const LoadingOverlay = () => {\r const isBuffering = _useVideoStore((state) => state.isBuffering)\r const error = _useVideoStore((state) => state.error)\r \r if (!isBuffering || error) return null\r \r return (\r

\r \r

\r )\r }\r \r const TogglePlayOverlay = () => {\r const isPlaying = _useVideoStore((state) => state.isPlaying)\r const error = _useVideoStore((state) => state.error)\r const hadInitialInteraction = _useVideoStore(\r (state) => state.hadInitialInteraction\r )\r const isBuffering = _useVideoStore((state) => state.isBuffering)\r const togglePlay = _useVideoStore((state) => state.togglePlay)\r \r return (\r \r {/* Show initial play button if never played */}\r {!hadInitialInteraction && !isPlaying && !error && !isBuffering && (\r

\r \r

\r )}\r \r )\r }\r \r const ErrorOverlay = () => {\r const { videoRef } = _useVideoRefs()\r const error = _useVideoStore((state) => state.error)\r const setError = _useVideoStore((state) => state.setError)\r \r if (!error) return null\r \r return (\r

{error}

\r {\r setError(null)\r \r if (videoRef.current) {\r videoRef.current.load()\r const playPromise = videoRef.current.play()\r if (playPromise !== undefined) {\r playPromise.catch((error) => console.error("Play error:", error))\r }\r }\r }}\r >\r \r Refresh\r \r

\r )\r }\r \r export {\r LoadingOverlay as _LoadingOverlay,\r TogglePlayOverlay as _TogglePlayOverlay,\r ErrorOverlay as _ErrorOverlay,\r }\r `,highlightedCodeHtml:`

import { Loader2Icon, PlayIcon, RotateCcwIcon } from "lucide-react"

import { Button } from "@/components/ui/button"

import { _useVideoRefs, _useVideoStore } from "./store"

const LoadingOverlay = () => {
  const isBuffering = _useVideoStore((state) => state.isBuffering)
  const error = _useVideoStore((state) => state.error)

  if (!isBuffering || error) return null

  return (
    <div className="rounded-video absolute inset-0 z-0 flex items-center justify-center bg-black/10">
      <Loader2Icon className="text-video h-10 w-10 animate-spin" />
    </div>
  )
}

const TogglePlayOverlay = () => {
  const isPlaying = _useVideoStore((state) => state.isPlaying)
  const error = _useVideoStore((state) => state.error)
  const hadInitialInteraction = _useVideoStore(
    (state) => state.hadInitialInteraction
  )
  const isBuffering = _useVideoStore((state) => state.isBuffering)
  const togglePlay = _useVideoStore((state) => state.togglePlay)

  return (
    <div
      onClick={togglePlay}
      className="group/play-button rounded-video absolute inset-0 z-20 flex cursor-pointer items-center justify-center"
    >
      {/* Show initial play button if never played */}
      {!hadInitialInteraction && !isPlaying && !error && !isBuffering && (
        <div className="bg-video/10 flex h-16 w-16 items-center justify-center rounded-full backdrop-blur-sm transition-transform duration-200 group-hover/play-button:scale-110">
          <PlayIcon className="fill-video text-video h-8 w-8" />
        </div>
      )}
    </div>
  )
}

const ErrorOverlay = () => {
  const { videoRef } = _useVideoRefs()
  const error = _useVideoStore((state) => state.error)
  const setError = _useVideoStore((state) => state.setError)

  if (!error) return null

  return (
    <div className="rounded-video absolute inset-0 z-40 flex flex-col items-center justify-center bg-black/90">
      <p className="text-video mb-4 text-sm">{error}</p>
      <Button
        size={"sm"}
        onClick={() => {
          setError(null)

          if (videoRef.current) {
            videoRef.current.load()
            const playPromise = videoRef.current.play()
            if (playPromise !== undefined) {
              playPromise.catch((error) => console.error("Play error:", error))
            }
          }
        }}
      >
        <RotateCcwIcon className="h-4 w-4" />
        <span>Refresh</span>
      </Button>
    </div>
  )
}

export {
  LoadingOverlay as _LoadingOverlay,
  TogglePlayOverlay as _TogglePlayOverlay,
  ErrorOverlay as _ErrorOverlay,
}

`}),(0,s.jsx)(n.p,{children:(0,s.jsx)(n.code,{children:"video/store.tsx"})}),(0,s.jsx)(o,{name:"video/store",rawCodeString:`import * as React from "react" import { create, StoreApi, UseBoundStore } from "zustand" import { Command, CommandCue, CommandCueData } from "./types" type VideoStoreState = { videoElement: HTMLVideoElement | null setVideoElement: (element: HTMLVideoElement | null) => void isPlaying: boolean currentTime: number hasEnded: boolean duration: number isMuted: boolean volume: number playbackSpeed: number error: string | null lastCommittedVolume: number isFullscreen: boolean hasInteracted: boolean hadInitialInteraction: boolean commandCue: CommandCue | null isBuffering: boolean containerNode: HTMLDivElement | null setLastCommittedVolume: (volume: number) => void setError: (error: string | null) => void togglePlay: () => void toggleMute: () => void handleSpeedChange: (speed: string) => void seekVideo: (seconds: number) => void handleSeekbarChange: (newTime: number) => void handleVolumeChange: (newVolume: number[]) => void handleVolumeCommit: (newVolume: number[]) => void toggleFullscreen: () => void registerUserInteraction: () => void showCommandCue: (command: Command, data?: CommandCueData) => void setContainerNode: (node: HTMLDivElement | null) => void } type VideoContextValue = { useStore: UseBoundStore> videoRef: React.RefObject } const VideoContext = React.createContext(null) // Custom hook to use the video store const useVideoStore = (selector: (state: VideoStoreState) => T): T => { const contextValue = React.useContext(VideoContext) if (!contextValue) { throw new Error("useVideoStore must be used within a VideoStoreProvider") } return contextValue.useStore(selector) } const useVideoRefs = () => { const contextValue = React.useContext(VideoContext) if (!contextValue) { throw new Error("useVideoRefs must be used within a VideoProvider") } return { videoRef: contextValue.videoRef, } } // Provider component that creates and provides the store instance const VideoStoreProvider = ({ children, videoRef, }: { children: React.ReactNode videoRef: React.RefObject }) => { const [useStoreInstance] = React.useState(() => create((set, get) => { // Store previous element to remove listeners let previousVideoElement: HTMLVideoElement | null = null const BUFFERING_DELAY_MS = 500 // Delay before showing buffering indicator let bufferingTimeout: NodeJS.Timeout | null = null const USER_INTERACTION_TIMEOUT_MS = 2000 let userInteractionResetTimeout: NodeJS.Timeout | null = null const COMMAND_CUE_TIMEOUT_MS = 500 let commandCueResetTimeout: NodeJS.Timeout | null = null return { videoElement: null, setVideoElement: (element: HTMLVideoElement | null) => { const setIsBuffering = (newIsBuffering: boolean) => { if (bufferingTimeout) { clearTimeout(bufferingTimeout) bufferingTimeout = null } if (newIsBuffering === true) { bufferingTimeout = setTimeout(() => { set({ isBuffering: true }) }, BUFFERING_DELAY_MS) } else { set({ isBuffering: false }) } } const handlePlay = () => { set({ isPlaying: true, hasEnded: false, hadInitialInteraction: true, }) } const handlePause = () => { set({ isPlaying: false, }) setIsBuffering(false) } const handleVideoEnded = () => { set({ hasEnded: true, isPlaying: false, }) } const handleLoadedMetadata = () => { const { videoElement } = get() if (!videoElement) return set({ duration: videoElement.duration, }) } const handleTimeUpdate = () => { const { videoElement } = get() if (!videoElement) return const { hadInitialInteraction, hasEnded } = get() if (hadInitialInteraction !== true) { set({ hadInitialInteraction: true, }) } if (hasEnded !== videoElement.ended) { set({ hasEnded: videoElement.ended, }) } set({ currentTime: Math.floor(videoElement.currentTime) }) } const handlePlaybackRateChange = () => { const { videoElement } = get() if (!videoElement) return set({ playbackSpeed: videoElement.playbackRate }) } const handleVolumeChange = () => { const { videoElement } = get() if (!videoElement) return set({ volume: videoElement.volume, isMuted: videoElement.muted, }) } const handleWaiting = () => { const { videoElement } = get() if (!videoElement) return if (!videoElement.paused) { setIsBuffering(true) } } const handlePlaying = () => { setIsBuffering(false) } const handleError = () => { setIsBuffering(false) const { videoElement } = get() if (!videoElement) return if (videoElement.error) { set({ error: "An error occurred while loading the video", }) } } const handleLoadedData = () => { set({ error: null, }) } if (previousVideoElement) { previousVideoElement.removeEventListener("play", handlePlay) previousVideoElement.removeEventListener("pause", handlePause) previousVideoElement.removeEventListener("ended", handleVideoEnded) previousVideoElement.removeEventListener( "loadedmetadata", handleLoadedMetadata ) previousVideoElement.removeEventListener( "timeupdate", handleTimeUpdate ) previousVideoElement.removeEventListener( "ratechange", handlePlaybackRateChange ) previousVideoElement.removeEventListener( "volumechange", handleVolumeChange ) previousVideoElement.removeEventListener("waiting", handleWaiting) previousVideoElement.removeEventListener("playing", handlePlaying) previousVideoElement.removeEventListener("error", handleError) previousVideoElement.removeEventListener( "loadeddata", handleLoadedData ) } set({ videoElement: element }) previousVideoElement = element if (element) { // Attach listeners to the new element element.addEventListener("play", handlePlay) element.addEventListener("pause", handlePause) element.addEventListener("ended", handleVideoEnded) element.addEventListener("loadedmetadata", handleLoadedMetadata) element.addEventListener("timeupdate", handleTimeUpdate) element.addEventListener("ratechange", handlePlaybackRateChange) element.addEventListener("volumechange", handleVolumeChange) element.addEventListener("waiting", handleWaiting) element.addEventListener("playing", handlePlaying) element.addEventListener("error", handleError) element.addEventListener("loadeddata", handleLoadedData) } }, isPlaying: false, currentTime: 0, duration: 0, isMuted: false, volume: 1, playbackSpeed: 1, hasEnded: false, error: null, lastCommittedVolume: 1, isFullscreen: false, hasInteracted: false, hadInitialInteraction: false, commandCue: null, isBuffering: false, containerNode: null, setLastCommittedVolume: (volume: number) => { set({ lastCommittedVolume: volume }) }, setError: (error: string | null) => { set({ error }) }, togglePlay: () => { const { videoElement } = get() if (videoElement) { if (!videoElement.paused) { videoElement.pause() } else { const playPromise = videoElement.play() if (playPromise !== undefined) { playPromise.catch((error) => { console.error("Play error:", error) set({ error: "An error occurred while loading the video" }) }) } } } }, toggleMute: () => { const { videoElement, lastCommittedVolume } = get() if (!videoElement) return const isCurrentlyMuted = videoElement.muted const isVolumeZero = videoElement.volume === 0 if (isVolumeZero) { videoElement.volume = lastCommittedVolume } else { videoElement.muted = !isCurrentlyMuted } }, handleSpeedChange: (speed: string) => { const { videoElement } = get() if (!videoElement) return videoElement.playbackRate = parseFloat(speed) }, seekVideo: (seconds: number) => { const { videoElement } = get() if (!videoElement) return const newTime = Math.max( 0, Math.min(videoElement.currentTime + seconds, videoElement.duration) ) videoElement.currentTime = newTime set({ currentTime: newTime }) }, handleSeekbarChange: (newTime: number) => { const { videoElement } = get() if (!videoElement) return if (videoElement.duration !== undefined) { const seekToTime = Math.max( 0, Math.min(newTime, videoElement.duration) ) videoElement.currentTime = seekToTime set({ currentTime: seekToTime, hasEnded: videoElement.ended }) } }, handleVolumeChange: (newVolume: number[]) => { const { videoElement } = get() if (!videoElement) return const value = newVolume[0] videoElement.volume = value if (videoElement.muted) { videoElement.muted = false } }, handleVolumeCommit: (newVolume: number[]) => { // After slider use const value = newVolume[0] if (value > 0) { set({ lastCommittedVolume: value }) } }, toggleFullscreen: () => { const { containerNode } = get() if (!document.fullscreenElement) { const promise = containerNode?.requestFullscreen() promise?.then(() => set({ isFullscreen: true })) } else { const promise = document.exitFullscreen?.() promise?.then(() => set({ isFullscreen: false })) } }, registerUserInteraction: () => { const { hasInteracted } = get() if (!hasInteracted) { set({ hasInteracted: true }) } if (userInteractionResetTimeout) { clearTimeout(userInteractionResetTimeout) } userInteractionResetTimeout = setTimeout(() => { set({ hasInteracted: false }) }, USER_INTERACTION_TIMEOUT_MS) }, showCommandCue: (command: Command, data?: CommandCueData) => { if (commandCueResetTimeout) { clearTimeout(commandCueResetTimeout) } set({ commandCue: { command, id: Date.now(), data } }) commandCueResetTimeout = setTimeout(() => { set({ commandCue: null }) }, COMMAND_CUE_TIMEOUT_MS) }, setContainerNode: (node: HTMLDivElement | null) => { set({ containerNode: node }) }, } }) ) // Effect to set and clear the video element in the store React.useEffect(() => { const currentVideoElement = videoRef.current if (currentVideoElement) { useStoreInstance.getState().setVideoElement(currentVideoElement) } return () => { useStoreInstance.getState().setVideoElement(null) } }, [videoRef, useStoreInstance]) const contextValue = { useStore: useStoreInstance, videoRef, } return ( {children} ) } const selectHideControlsState = (state: VideoStoreState): boolean => { const isPaused = !state.isPlaying return !state.hasInteracted && !isPaused } export { VideoStoreProvider as _VideoStoreProvider, useVideoRefs as _useVideoRefs, useVideoStore as _useVideoStore, selectHideControlsState as _selectHideControlsState, } `,highlightedCodeHtml:`

import * as React from "react"
import { create, StoreApi, UseBoundStore } from "zustand"

import { Command, CommandCue, CommandCueData } from "./types"

type VideoStoreState = {
  videoElement: HTMLVideoElement | null
  setVideoElement: (element: HTMLVideoElement | null) => void
  isPlaying: boolean
  currentTime: number
  hasEnded: boolean
  duration: number
  isMuted: boolean
  volume: number
  playbackSpeed: number
  error: string | null
  lastCommittedVolume: number
  isFullscreen: boolean
  hasInteracted: boolean
  hadInitialInteraction: boolean
  commandCue: CommandCue | null
  isBuffering: boolean
  containerNode: HTMLDivElement | null

  setLastCommittedVolume: (volume: number) => void
  setError: (error: string | null) => void
  togglePlay: () => void
  toggleMute: () => void
  handleSpeedChange: (speed: string) => void
  seekVideo: (seconds: number) => void
  handleSeekbarChange: (newTime: number) => void
  handleVolumeChange: (newVolume: number[]) => void
  handleVolumeCommit: (newVolume: number[]) => void
  toggleFullscreen: () => void
  registerUserInteraction: () => void
  showCommandCue: (command: Command, data?: CommandCueData) => void
  setContainerNode: (node: HTMLDivElement | null) => void
}

type VideoContextValue = {
  useStore: UseBoundStore<StoreApi<VideoStoreState>>
  videoRef: React.RefObject<HTMLVideoElement | null>
}

const VideoContext = React.createContext<VideoContextValue | null>(null)

// Custom hook to use the video store
const useVideoStore = <T,>(selector: (state: VideoStoreState) => T): T => {
  const contextValue = React.useContext(VideoContext)
  if (!contextValue) {
    throw new Error("useVideoStore must be used within a VideoStoreProvider")
  }
  return contextValue.useStore(selector)
}

const useVideoRefs = () => {
  const contextValue = React.useContext(VideoContext)
  if (!contextValue) {
    throw new Error("useVideoRefs must be used within a VideoProvider")
  }

  return {
    videoRef: contextValue.videoRef,
  }
}

// Provider component that creates and provides the store instance
const VideoStoreProvider = ({
  children,
  videoRef,
}: {
  children: React.ReactNode
  videoRef: React.RefObject<HTMLVideoElement | null>
}) => {
  const [useStoreInstance] = React.useState(() =>
    create<VideoStoreState>((set, get) => {
      // Store previous element to remove listeners
      let previousVideoElement: HTMLVideoElement | null = null

      const BUFFERING_DELAY_MS = 500 // Delay before showing buffering indicator
      let bufferingTimeout: NodeJS.Timeout | null = null

      const USER_INTERACTION_TIMEOUT_MS = 2000
      let userInteractionResetTimeout: NodeJS.Timeout | null = null

      const COMMAND_CUE_TIMEOUT_MS = 500
      let commandCueResetTimeout: NodeJS.Timeout | null = null

      return {
        videoElement: null,
        setVideoElement: (element: HTMLVideoElement | null) => {
          const setIsBuffering = (newIsBuffering: boolean) => {
            if (bufferingTimeout) {
              clearTimeout(bufferingTimeout)
              bufferingTimeout = null
            }

            if (newIsBuffering === true) {
              bufferingTimeout = setTimeout(() => {
                set({ isBuffering: true })
              }, BUFFERING_DELAY_MS)
            } else {
              set({ isBuffering: false })
            }
          }

          const handlePlay = () => {
            set({
              isPlaying: true,
              hasEnded: false,
              hadInitialInteraction: true,
            })
          }

          const handlePause = () => {
            set({
              isPlaying: false,
            })
            setIsBuffering(false)
          }

          const handleVideoEnded = () => {
            set({
              hasEnded: true,
              isPlaying: false,
            })
          }

          const handleLoadedMetadata = () => {
            const { videoElement } = get()
            if (!videoElement) return
            set({
              duration: videoElement.duration,
            })
          }

          const handleTimeUpdate = () => {
            const { videoElement } = get()
            if (!videoElement) return

            const { hadInitialInteraction, hasEnded } = get()

            if (hadInitialInteraction !== true) {
              set({
                hadInitialInteraction: true,
              })
            }

            if (hasEnded !== videoElement.ended) {
              set({
                hasEnded: videoElement.ended,
              })
            }

            set({ currentTime: Math.floor(videoElement.currentTime) })
          }

          const handlePlaybackRateChange = () => {
            const { videoElement } = get()

            if (!videoElement) return
            set({ playbackSpeed: videoElement.playbackRate })
          }

          const handleVolumeChange = () => {
            const { videoElement } = get()

            if (!videoElement) return

            set({
              volume: videoElement.volume,
              isMuted: videoElement.muted,
            })
          }

          const handleWaiting = () => {
            const { videoElement } = get()
            if (!videoElement) return

            if (!videoElement.paused) {
              setIsBuffering(true)
            }
          }

          const handlePlaying = () => {
            setIsBuffering(false)
          }

          const handleError = () => {
            setIsBuffering(false)

            const { videoElement } = get()
            if (!videoElement) return
            if (videoElement.error) {
              set({
                error: "An error occurred while loading the video",
              })
            }
          }

          const handleLoadedData = () => {
            set({
              error: null,
            })
          }

          if (previousVideoElement) {
            previousVideoElement.removeEventListener("play", handlePlay)
            previousVideoElement.removeEventListener("pause", handlePause)
            previousVideoElement.removeEventListener("ended", handleVideoEnded)
            previousVideoElement.removeEventListener(
              "loadedmetadata",
              handleLoadedMetadata
            )
            previousVideoElement.removeEventListener(
              "timeupdate",
              handleTimeUpdate
            )
            previousVideoElement.removeEventListener(
              "ratechange",
              handlePlaybackRateChange
            )
            previousVideoElement.removeEventListener(
              "volumechange",
              handleVolumeChange
            )
            previousVideoElement.removeEventListener("waiting", handleWaiting)
            previousVideoElement.removeEventListener("playing", handlePlaying)
            previousVideoElement.removeEventListener("error", handleError)
            previousVideoElement.removeEventListener(
              "loadeddata",
              handleLoadedData
            )
          }

          set({ videoElement: element })
          previousVideoElement = element

          if (element) {
            // Attach listeners to the new element
            element.addEventListener("play", handlePlay)
            element.addEventListener("pause", handlePause)
            element.addEventListener("ended", handleVideoEnded)
            element.addEventListener("loadedmetadata", handleLoadedMetadata)
            element.addEventListener("timeupdate", handleTimeUpdate)
            element.addEventListener("ratechange", handlePlaybackRateChange)
            element.addEventListener("volumechange", handleVolumeChange)
            element.addEventListener("waiting", handleWaiting)
            element.addEventListener("playing", handlePlaying)
            element.addEventListener("error", handleError)
            element.addEventListener("loadeddata", handleLoadedData)
          }
        },
        isPlaying: false,
        currentTime: 0,
        duration: 0,
        isMuted: false,
        volume: 1,
        playbackSpeed: 1,
        hasEnded: false,
        error: null,
        lastCommittedVolume: 1,
        isFullscreen: false,
        hasInteracted: false,
        hadInitialInteraction: false,
        commandCue: null,
        isBuffering: false,
        containerNode: null,

        setLastCommittedVolume: (volume: number) => {
          set({ lastCommittedVolume: volume })
        },

        setError: (error: string | null) => {
          set({ error })
        },

        togglePlay: () => {
          const { videoElement } = get()

          if (videoElement) {
            if (!videoElement.paused) {
              videoElement.pause()
            } else {
              const playPromise = videoElement.play()
              if (playPromise !== undefined) {
                playPromise.catch((error) => {
                  console.error("Play error:", error)
                  set({ error: "An error occurred while loading the video" })
                })
              }
            }
          }
        },
        toggleMute: () => {
          const { videoElement, lastCommittedVolume } = get()

          if (!videoElement) return

          const isCurrentlyMuted = videoElement.muted
          const isVolumeZero = videoElement.volume === 0

          if (isVolumeZero) {
            videoElement.volume = lastCommittedVolume
          } else {
            videoElement.muted = !isCurrentlyMuted
          }
        },
        handleSpeedChange: (speed: string) => {
          const { videoElement } = get()
          if (!videoElement) return
          videoElement.playbackRate = parseFloat(speed)
        },
        seekVideo: (seconds: number) => {
          const { videoElement } = get()
          if (!videoElement) return

          const newTime = Math.max(
            0,
            Math.min(videoElement.currentTime + seconds, videoElement.duration)
          )
          videoElement.currentTime = newTime
          set({ currentTime: newTime })
        },
        handleSeekbarChange: (newTime: number) => {
          const { videoElement } = get()

          if (!videoElement) return

          if (videoElement.duration !== undefined) {
            const seekToTime = Math.max(
              0,
              Math.min(newTime, videoElement.duration)
            )

            videoElement.currentTime = seekToTime
            set({ currentTime: seekToTime, hasEnded: videoElement.ended })
          }
        },
        handleVolumeChange: (newVolume: number[]) => {
          const { videoElement } = get()

          if (!videoElement) return

          const value = newVolume[0]
          videoElement.volume = value

          if (videoElement.muted) {
            videoElement.muted = false
          }
        },
        handleVolumeCommit: (newVolume: number[]) => {
          // After slider use
          const value = newVolume[0]
          if (value > 0) {
            set({ lastCommittedVolume: value })
          }
        },

        toggleFullscreen: () => {
          const { containerNode } = get()
          if (!document.fullscreenElement) {
            const promise = containerNode?.requestFullscreen()
            promise?.then(() => set({ isFullscreen: true }))
          } else {
            const promise = document.exitFullscreen?.()
            promise?.then(() => set({ isFullscreen: false }))
          }
        },

        registerUserInteraction: () => {
          const { hasInteracted } = get()

          if (!hasInteracted) {
            set({ hasInteracted: true })
          }

          if (userInteractionResetTimeout) {
            clearTimeout(userInteractionResetTimeout)
          }
          userInteractionResetTimeout = setTimeout(() => {
            set({ hasInteracted: false })
          }, USER_INTERACTION_TIMEOUT_MS)
        },
        showCommandCue: (command: Command, data?: CommandCueData) => {
          if (commandCueResetTimeout) {
            clearTimeout(commandCueResetTimeout)
          }
          set({ commandCue: { command, id: Date.now(), data } })
          commandCueResetTimeout = setTimeout(() => {
            set({ commandCue: null })
          }, COMMAND_CUE_TIMEOUT_MS)
        },
        setContainerNode: (node: HTMLDivElement | null) => {
          set({ containerNode: node })
        },
      }
    })
  )

  // Effect to set and clear the video element in the store
  React.useEffect(() => {
    const currentVideoElement = videoRef.current
    if (currentVideoElement) {
      useStoreInstance.getState().setVideoElement(currentVideoElement)
    }
    return () => {
      useStoreInstance.getState().setVideoElement(null)
    }
  }, [videoRef, useStoreInstance])

  const contextValue = {
    useStore: useStoreInstance,
    videoRef,
  }

  return (
    <VideoContext.Provider value={contextValue}>
      {children}
    </VideoContext.Provider>
  )
}

const selectHideControlsState = (state: VideoStoreState): boolean => {
  const isPaused = !state.isPlaying
  return !state.hasInteracted && !isPaused
}

export {
  VideoStoreProvider as _VideoStoreProvider,
  useVideoRefs as _useVideoRefs,
  useVideoStore as _useVideoStore,
  selectHideControlsState as _selectHideControlsState,
}

`}),(0,s.jsx)(n.p,{children:(0,s.jsx)(n.code,{children:"video/tooltip.tsx"})}),(0,s.jsx)(o,{name:"video/tooltip",rawCodeString:`"use client"\r \r import * as React from "react"\r import * as TooltipPrimitive from "@radix-ui/react-tooltip"\r \r import { cn } from "@/lib/utils"\r \r const TooltipProvider = TooltipPrimitive.Provider\r \r const Tooltip = TooltipPrimitive.Root\r \r const TooltipTrigger = TooltipPrimitive.Trigger\r \r const TooltipPortal = TooltipPrimitive.Portal\r \r const TooltipContent = React.forwardRef<\r React.ElementRef,\r React.ComponentPropsWithoutRef\r >(({ className, sideOffset = 4, ...props }, ref) => (\r \r ))\r TooltipContent.displayName = TooltipPrimitive.Content.displayName\r \r export {\r Tooltip as _VideoControlTooltip,\r TooltipTrigger as _VideoControlTooltipTrigger,\r TooltipPortal as _VideoControlTooltipPortal,\r TooltipContent as _VideoControlTooltipContent,\r TooltipProvider as _VideoControlTooltipProvider,\r }\r `,highlightedCodeHtml:`

"use client"

import * as React from "react"
import * as TooltipPrimitive from "@radix-ui/react-tooltip"

import { cn } from "@/lib/utils"

const TooltipProvider = TooltipPrimitive.Provider

const Tooltip = TooltipPrimitive.Root

const TooltipTrigger = TooltipPrimitive.Trigger

const TooltipPortal = TooltipPrimitive.Portal

const TooltipContent = React.forwardRef<
  React.ElementRef<typeof TooltipPrimitive.Content>,
  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
>(({ className, sideOffset = 4, ...props }, ref) => (
  <TooltipPrimitive.Content
    ref={ref}
    sideOffset={sideOffset}
    className={cn(
      "bg-video text-video-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 origin-[--radix-tooltip-content-transform-origin] overflow-hidden rounded-md px-3 py-1.5 text-xs",
      className
    )}
    {...props}
  />
))
TooltipContent.displayName = TooltipPrimitive.Content.displayName

export {
  Tooltip as _VideoControlTooltip,
  TooltipTrigger as _VideoControlTooltipTrigger,
  TooltipPortal as _VideoControlTooltipPortal,
  TooltipContent as _VideoControlTooltipContent,
  TooltipProvider as _VideoControlTooltipProvider,
}

`}),(0,s.jsx)(n.p,{children:(0,s.jsx)(n.code,{children:"video/types.ts"})}),(0,s.jsx)(o,{name:"video/types.ts",rawCodeString:`export type Command =\r | "play"\r | "pause"\r | "forward"\r | "backward"\r | "volumeUp"\r | "volumeDown"\r | "mute"\r | "unmute"\r | "speedUp"\r | "speedDown";\r \r \r export type CommandCueData = {\r volume?: number;\r speed?: number;\r };\r \r export type CommandCue = {\r id: number;\r command: Command;\r data?: CommandCueData;\r };\r `,highlightedCodeHtml:`

export type Command =
    | "play"
    | "pause"
    | "forward"
    | "backward"
    | "volumeUp"
    | "volumeDown"
    | "mute"
    | "unmute"
    | "speedUp"
    | "speedDown";


export type CommandCueData = {
    volume?: number;
    speed?: number;
};

export type CommandCue = {
    id: number;
    command: Command;
    data?: CommandCueData;
};

`}),(0,s.jsx)(y,{children:"Configure tailwind"}),(0,s.jsxs)(t,{defaultValue:"v4",children:[(0,s.jsxs)(p,{children:[(0,s.jsx)(c,{value:"v4",children:"taiwind v4"}),(0,s.jsx)(c,{value:"v3",children:"tailwind v3"})]}),(0,s.jsx)(E,{value:"v4",children:(0,s.jsx)(r,{rawCodeString:`// global.css @theme inline { //... --color-video: var(--video); --color-video-foreground: var(--video-foreground); --color-video-ring: var(--video-ring); --radius-video: var(--radius-video); } :root { //... --video: oklch(0.922 0 0); --video-foreground: oklch(0.145 0 0); --video-ring: oklch(0.922 0 0); --radius-video: var(--radius-md); } `,highlightedCodeHtml:`

// global.css
@theme inline {
  //...
  --color-video: var(--video);
  --color-video-foreground: var(--video-foreground);
  --color-video-ring: var(--video-ring);
  --radius-video: var(--radius-video);
}

:root {
//...
--video: oklch(0.922 0 0);
--video-foreground: oklch(0.145 0 0);
--video-ring: oklch(0.922 0 0);
--radius-video: var(--radius-md);
}

`,language:"tsx"})}),(0,s.jsxs)(E,{value:"v3",children:[(0,s.jsx)(r,{rawCodeString:`// global.css :root { //... --video: 0 0% 91%; --video-foreground: 0 0% 15%; --video-ring: 0 0% 91%; --radius-video: var(--radius-md); } `,highlightedCodeHtml:`

// global.css
:root {
  //...
  --video: 0 0% 91%;
  --video-foreground: 0 0% 15%;
  --video-ring: 0 0% 91%;
  --radius-video: var(--radius-md);
}

`,language:"tsx"}),(0,s.jsx)(r,{rawCodeString:`// tailwind.config.js export default { //..., theme: { extend: { //..., colors:{ //..., video: { DEFAULT: 'hsl(var(--video))', foreground: 'hsl(var(--video-foreground))', ring: 'hsl(var(--video-ring))' } }, borderRadius: { video: 'var(--radius-md)', } } } } `,highlightedCodeHtml:`

// tailwind.config.js
export default {
  //...,
  theme: {
    extend: {
      //...,
      colors:{
        //...,
        video: {
  			  DEFAULT: 'hsl(var(--video))',
  				foreground: 'hsl(var(--video-foreground))',
          ring: 'hsl(var(--video-ring))'
  			}
      },
      borderRadius: {
  			video: 'var(--radius-md)',
  		}
    }
  }
}

`,language:"tsx"})]})]}),(0,s.jsx)(y,{children:"Update the import paths to match your project setup."})]})})]}),` `,(0,s.jsx)(n.h2,{children:"Usage"}),` `,(0,s.jsx)(r,{rawCodeString:'import { Video } from "@/components/ui/video"',highlightedCodeHtml:'

import { Video } from "@/components/ui/video"

',language:"tsx"}),` `,(0,s.jsx)(r,{rawCodeString:`

Video

Installation

Usage

Props

Examples

Default