Component

Controls

The full controls bar — progress, play, volume, speed, and fullscreen.

Overview

YtcnControls is the complete controls bar used inside YtcnPlayer. It composes the progress bar, play/pause button, volume slider, speed picker, and fullscreen toggle into a single horizontal bar. It can also be used standalone with the useYtcnPlayer hook for custom player layouts.

custom-layout.tsx

"use client"

import { useYtcnPlayer } from "@/hooks/ytcn/use-ytcn-player"
import { YtcnControls } from "@/components/ytcn/ytcn-controls"
import { useIdleControls } from "@/hooks/ytcn/use-idle-controls"

export function CustomLayout({ videoId }: { videoId: string }) {
  const { containerRef, playerDivRef, state, controls } =
    useYtcnPlayer({ videoId })
  const { controlsVisible } = useIdleControls({
    isPlaying: state.isPlaying,
    isFullscreen: state.isFullscreen,
    isSettingsOpen: false,
  })

  return (
    <div ref={containerRef} className="relative aspect-video">
      <div ref={playerDivRef} className="absolute inset-0" />
      <YtcnControls
        state={state}
        onTogglePlay={controls.togglePlay}
        onSeek={controls.seekTo}
        onVolumeChange={controls.setVolume}
        onToggleMute={controls.toggleMute}
        onSpeedChange={controls.setSpeed}
        onToggleFullscreen={controls.toggleFullscreen}
        isFullscreen={state.isFullscreen}
        visible={controlsVisible}
        containerRef={containerRef}
      />
    </div>
  )
}

Props

Prop	Type	Default	Description
state*	PlayerState	—	Full player state object from useYtcnPlayer.
onTogglePlay*	() => void	—	Toggle play/pause.
onSeek*	(seconds: number) => void	—	Seek to an absolute position in seconds.
onVolumeChange*	(volume: number) => void	—	Set volume from 0 to 100.
onToggleMute*	() => void	—	Toggle mute state.
onSpeedChange*	(speed: PlaybackSpeed) => void	—	Set playback speed.
onToggleFullscreen*	() => void	—	Toggle fullscreen mode.
isFullscreen*	boolean	—	Whether the player is currently in fullscreen.
visible*	boolean	—	Controls visibility. Managed by useIdleControls hook.
containerRef*	RefObject<HTMLDivElement>	—	Used to portal popovers inside the fullscreen element.

Visibility behavior

Two modes

In windowed mode, controls appear on hover using CSS group-hover. In fullscreen, visibility is controlled by the useIdleControls hook, which hides controls after 3 seconds of mouse inactivity.

Player

Progress