@therealtinhtute/baroiplayer 1.0.8 → 1.2.0

package/dist/src/components/variants/minimal/MinimalSeekBar.tsx

@@ -1,150 +0,0 @@
-"use client"
-
-import React, { useRef, useState } from "react"
-import { useMediaSelector, useMediaDispatch, MediaActionTypes } from "../../../context/media-context"
-import { formatTime } from "../../../lib/format-time"
-import { cn } from "../../../lib/utils"
-
-export interface MinimalSeekBarProps {
-  thumbnails?: string
-  onSeek?: (time: number) => void
-  className?: string
-}
-
-export function MinimalSeekBar({
-  thumbnails,
-  onSeek,
-  className,
-}: MinimalSeekBarProps) {
-  const dispatch = useMediaDispatch()
-  const currentTime = useMediaSelector((state) => state.currentTime)
-  const duration = useMediaSelector((state) => state.duration)
-  const buffered = useMediaSelector((state) => state.buffered)
-  
-  const [isDragging, setIsDragging] = useState(false)
-  const [hoverTime, setHoverTime] = useState(0)
-  const [hoverPosition, setHoverPosition] = useState(0)
-  const seekBarRef = useRef<HTMLDivElement>(null)
-
-  const progress = duration > 0 ? (currentTime / duration) * 100 : 0
-  const bufferedProgress = buffered && buffered.length > 0 && duration > 0
-    ? (buffered.end(buffered.length - 1) / duration) * 100
-    : 0
-
-  const handleSeek = (clientX: number) => {
-    if (!seekBarRef.current || duration === 0) return
-    
-    const rect = seekBarRef.current.getBoundingClientRect()
-    const position = Math.max(0, Math.min(1, (clientX - rect.left) / rect.width))
-    const newTime = position * duration
-    
-    dispatch({
-      type: MediaActionTypes.SEEK,
-      detail: newTime
-    })
-    
-    onSeek?.(newTime)
-  }
-
-  const handleMouseDown = (e: React.MouseEvent) => {
-    e.preventDefault()
-    setIsDragging(true)
-    handleSeek(e.clientX)
-  }
-
-  const handleMouseMove = (e: React.MouseEvent) => {
-    if (!seekBarRef.current || duration === 0) return
-    
-    const rect = seekBarRef.current.getBoundingClientRect()
-    const position = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width))
-    const time = position * duration
-    
-    setHoverTime(time)
-    setHoverPosition((e.clientX - rect.left))
-    
-    if (isDragging) {
-      handleSeek(e.clientX)
-    }
-  }
-
-  const handleMouseUp = () => {
-    setIsDragging(false)
-  }
-
-  const handleMouseLeave = () => {
-    setIsDragging(false)
-    setHoverTime(0)
-  }
-
-  React.useEffect(() => {
-    if (isDragging) {
-      const handleGlobalMouseMove = (e: MouseEvent) => {
-        handleSeek(e.clientX)
-      }
-      
-      const handleGlobalMouseUp = () => {
-        setIsDragging(false)
-      }
-      
-      document.addEventListener("mousemove", handleGlobalMouseMove)
-      document.addEventListener("mouseup", handleGlobalMouseUp)
-      
-      return () => {
-        document.removeEventListener("mousemove", handleGlobalMouseMove)
-        document.removeEventListener("mouseup", handleGlobalMouseUp)
-      }
-    }
-  }, [isDragging])
-
-  return (
-    <div className={cn("group relative", className)}>
-      {/* Preview Tooltip */}
-      {hoverTime > 0 && (
-        <div
-          className="pointer-events-none absolute bottom-full z-50 mb-2"
-          style={{ left: `${hoverPosition}px`, transform: "translateX(-50%)" }}
-        >
-          {thumbnails && (
-            <div className="mb-1 rounded bg-black/90 p-1">
-              <div className="h-18 w-32 rounded bg-gray-800" />
-            </div>
-          )}
-          <div className="whitespace-nowrap rounded bg-black/90 px-2 py-1 text-white text-xs">
-            {formatTime(hoverTime)}
-          </div>
-        </div>
-      )}
-
-      {/* Seek Bar */}
-      <div
-        ref={seekBarRef}
-        className="minimal-seekbar"
-        onMouseDown={handleMouseDown}
-        onMouseMove={handleMouseMove}
-        onMouseUp={handleMouseUp}
-        onMouseLeave={handleMouseLeave}
-      >
-        {/* Buffered Progress */}
-        <div
-          className="minimal-seekbar-buffered"
-          style={{ width: `${bufferedProgress}%` }}
-        />
-
-        {/* Progress */}
-        <div
-          className="minimal-seekbar-progress"
-          style={{ width: `${progress}%` }}
-        />
-
-        {/* Thumb */}
-        <div
-          className={cn(
-            "minimal-seekbar-thumb",
-            isDragging && "active"
-          )}
-          style={{ left: `${progress}%` }}
-        />
-      </div>
-    </div>
-  )
-}

package/dist/src/components/variants/minimal/MinimalVolumeControl.d.ts

@@ -1,7 +0,0 @@
-import type { IconSet } from "../../icons";
-export interface MinimalVolumeControlProps {
-    icons: IconSet;
-    className?: string;
-}
-export declare function MinimalVolumeControl({ icons, className, }: MinimalVolumeControlProps): import("react/jsx-runtime").JSX.Element | null;
-//# sourceMappingURL=MinimalVolumeControl.d.ts.map

package/dist/src/components/variants/minimal/MinimalVolumeControl.tsx

@@ -1,80 +0,0 @@
-"use client"
-
-import React, { useState } from "react"
-import { useMediaSelector, useMediaDispatch, MediaActionTypes } from "../../../context/media-context"
-import { cn } from "../../../lib/utils"
-import type { IconSet } from "../../icons"
-
-export interface MinimalVolumeControlProps {
-  icons: IconSet
-  className?: string
-}
-
-export function MinimalVolumeControl({
-  icons,
-  className,
-}: MinimalVolumeControlProps) {
-  const dispatch = useMediaDispatch()
-  const volume = useMediaSelector((state) => state.volume)
-  const isMuted = useMediaSelector((state) => state.isMuted)
-  const [isExpanded, setIsExpanded] = useState(false)
-
-  const handleVolumeChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const newVolume = parseFloat(e.target.value)
-    dispatch({
-      type: MediaActionTypes.SET_VOLUME,
-      detail: newVolume
-    })
-  }
-
-  const handleMuteToggle = () => {
-    dispatch({
-      type: MediaActionTypes.TOGGLE_MUTE
-    })
-  }
-
-  const VolumeIcon = isMuted || volume === 0 ? icons.volumeMuted : icons.volume
-
-  if (!VolumeIcon) return null
-
-  return (
-    <div
-      className={cn(
-        "minimal-volume-group flex items-center gap-2",
-        className
-      )}
-      onMouseEnter={() => setIsExpanded(true)}
-      onMouseLeave={() => setIsExpanded(false)}
-    >
-      {/* Volume Button */}
-      <button
-        className="minimal-btn inline-flex h-8 w-8 items-center justify-center rounded-full border border-white/20 bg-white/10 text-white transition-all duration-150 hover:border-white/30 hover:bg-white/20"
-        onClick={handleMuteToggle}
-        aria-label={isMuted ? "Unmute" : "Mute"}
-      >
-        <VolumeIcon size={18} />
-      </button>
-
-      {/* Volume Slider */}
-      <div
-        className={cn(
-          "overflow-hidden transition-all duration-250",
-          isExpanded ? "w-20 opacity-100" : "w-0 opacity-0"
-        )}
-      >
-        <input
-          type="range"
-          min="0"
-          max="1"
-          step="0.01"
-          value={isMuted ? 0 : volume}
-          onChange={handleVolumeChange}
-          className="minimal-volume-slider h-1 w-full cursor-pointer appearance-none rounded-full bg-white/20"
-          style={{
-            background: `linear-gradient(to right, rgb(59 130 246) 0%, rgb(59 130 246) ${(isMuted ? 0 : volume) * 100}%, rgba(255,255,255,0.2) ${(isMuted ? 0 : volume) * 100}%, rgba(255,255,255,0.2) 100%)`
-          }}
-        />
-      </div>
-    </div>
-  )
-}

package/dist/src/components/variants/minimal/SimpleMinimalPlayer.d.ts

@@ -1,22 +0,0 @@
-import type { LoadingStateProps } from "../../LoadingState";
-export interface SimpleMinimalPlayerProps {
-    src: string;
-    poster?: string;
-    className?: string;
-    subtitleSrc?: string;
-    subtitleTracks?: Array<{
-        id: string;
-        label: string;
-        language?: string;
-        src?: string;
-    }>;
-    crossOrigin?: "anonymous" | "use-credentials";
-    volumeOrientation?: "horizontal" | "vertical";
-    loadingComponent?: React.ComponentType<{
-        context: "initial" | "seeking" | "buffering";
-    }>;
-    showLoadingState?: boolean;
-    loadingProps?: Partial<LoadingStateProps>;
-}
-export declare function SimpleMinimalPlayer(props: SimpleMinimalPlayerProps): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=SimpleMinimalPlayer.d.ts.map

package/dist/src/components/variants/minimal/SimpleMinimalPlayer.tsx

@@ -1,209 +0,0 @@
-"use client"
-
-import { useState, useEffect, useRef, useCallback } from "react"
-import { cn } from "../../../lib/utils"
-import { useVideoPlayer } from "../../../hooks/useVideoPlayer"
-import { useEnhancedSubtitles } from "../../../hooks/useEnhancedSubtitles"
-import { useMediaControls } from "../../../hooks/useMediaControls"
-import { useKeyboardShortcuts } from "../../../hooks/useKeyboardShortcuts"
-import { useScreenshot } from "../../../hooks/useScreenshot"
-import { VideoElement } from "./components/VideoElement"
-import { SubtitleDisplay } from "./components/SubtitleDisplay"
-import { CenterPlayButton } from "./components/CenterPlayButton"
-import { ControlBar } from "./components/ControlBar"
-import { LoadingState, CustomLoading, LoadingPresets } from "../../LoadingState"
-import type { LoadingStateProps } from "../../LoadingState"
-
-export interface SimpleMinimalPlayerProps {
-	src: string
-	poster?: string
-	className?: string
-	subtitleSrc?: string
-	subtitleTracks?: Array<{
-		id: string
-		label: string
-		language?: string
-		src?: string
-	}>
-	crossOrigin?: "anonymous" | "use-credentials"
-	volumeOrientation?: "horizontal" | "vertical"
-	loadingComponent?: React.ComponentType<{ context: "initial" | "seeking" | "buffering" }>
-	showLoadingState?: boolean
-	loadingProps?: Partial<LoadingStateProps>
-}
-
-export function SimpleMinimalPlayer(props: SimpleMinimalPlayerProps) {
-	const {
-		src,
-		poster,
-		className,
-		subtitleSrc,
-		subtitleTracks,
-		crossOrigin,
-		volumeOrientation = "horizontal",
-		loadingComponent: LoadingComponent = undefined,
-		showLoadingState = true,
-		loadingProps = {}
-	} = props
-	const containerRef = useRef<HTMLDivElement>(null)
-	const [showSettings, setShowSettings] = useState(false)
-	const [playbackRate, setPlaybackRate] = useState(1)
-
-	const { videoRef, state: videoState, controls: videoControls } = useVideoPlayer(containerRef)
-	const {
-		subtitlesEnabled,
-		currentSubtitle,
-		toggleSubtitles,
-		getCurrentSubtitle,
-		setCurrentSubtitle,
-		selectSubtitleTrack,
-		availableTracks,
-		currentTrackId,
-		loadError,
-		hasSubtitles
-	} = useEnhancedSubtitles({
-		subtitleSrc,
-		subtitleTracks,
-		onLoadError: (error) => console.error("Subtitle load error:", error)
-	})
-	const { takeScreenshot } = useScreenshot(videoRef)
-	const {
-		controlsVisible,
-		showVolumeSlider,
-		setShowVolumeSlider,
-		handleMouseMove,
-		handleMouseEnter,
-		handleMouseLeave
-	} = useMediaControls(videoState.isPlaying, showSettings)
-
-	// Update subtitle display based on current time
-	useEffect(() => {
-		if (subtitlesEnabled) {
-			const subtitle = getCurrentSubtitle(videoState.currentTime)
-			setCurrentSubtitle(subtitle)
-		}
-	}, [videoState.currentTime, subtitlesEnabled, getCurrentSubtitle, setCurrentSubtitle])
-
-	// Change playback rate
-	const changePlaybackRate = (rate: number) => {
-    		if (!videoRef.current) return
-    		videoRef.current.playbackRate = rate
-    		setPlaybackRate(rate)
-    		setShowSettings(false)
-    	}
-
-	// Keyboard shortcuts
-	useKeyboardShortcuts({
-		videoControls,
-		toggleSubtitles,
-		takeScreenshot,
-		duration: videoState.duration
-	})
-
-	return (
-		<div
-			ref={containerRef}
-			className={cn("minimal-player relative rounded-lg bg-black", className)}
-			style={{ overflow: "hidden" }}
-			onMouseMove={handleMouseMove}
-			onMouseEnter={handleMouseEnter}
-			onMouseLeave={handleMouseLeave}
-		>
-			<VideoElement
-				videoRef={videoRef}
-				src={src}
-				poster={poster}
-				subtitleSrc={subtitleSrc}
-				subtitlesEnabled={subtitlesEnabled}
-				crossOrigin={crossOrigin}
-				onTogglePlay={videoControls.togglePlay}
-			/>
-
-			<SubtitleDisplay
-				subtitlesEnabled={subtitlesEnabled}
-				subtitleText={currentSubtitle}
-			/>
-
-			{/* Show center play button only when not loading */}
-			{!videoState.isLoading && (
-				<CenterPlayButton
-					isPlaying={videoState.isPlaying}
-					onTogglePlay={videoControls.togglePlay}
-				/>
-			)}
-
-			<ControlBar
-				controlsVisible={controlsVisible}
-				currentTime={videoState.currentTime}
-				duration={videoState.duration}
-				isPlaying={videoState.isPlaying}
-				volume={videoState.volume}
-				isMuted={videoState.isMuted}
-				showVolumeSlider={showVolumeSlider}
-				isFullscreen={videoState.isFullscreen}
-				showSettings={showSettings}
-				playbackRate={playbackRate}
-				subtitleSrc={subtitleSrc}
-				subtitlesEnabled={subtitlesEnabled}
-				subtitleTracks={availableTracks}
-				currentTrackId={currentTrackId}
-				hasSubtitles={hasSubtitles}
-				subtitleLoadError={loadError}
-				volumeOrientation={volumeOrientation}
-				bufferedRanges={videoState.bufferedRanges}
-				isSeeking={videoState.isSeeking}
-				onSeek={videoControls.seekTo}
-				onTogglePlay={videoControls.togglePlay}
-				onSeekBackward={videoControls.seekBackward}
-				onSeekForward={videoControls.seekForward}
-				onToggleMute={videoControls.toggleMute}
-				onVolumeChange={videoControls.setVolume}
-				onShowVolumeSlider={setShowVolumeSlider}
-				onToggleSubtitles={toggleSubtitles}
-				onSelectSubtitleTrack={selectSubtitleTrack}
-				onTakeScreenshot={takeScreenshot}
-				onToggleFullscreen={videoControls.toggleFullscreen}
-				onToggleSettings={() => setShowSettings(!showSettings)}
-				onChangePlaybackRate={changePlaybackRate}
-			/>
-
-			{/* Loading states */}
-			{showLoadingState && (
-				<>
-					{/* Initial loading */}
-					{videoState.isLoading && !videoState.isSeeking && !videoState.isBuffering && (
-						LoadingComponent ? (
-							<CustomLoading context="initial">
-								<LoadingComponent context="initial" />
-							</CustomLoading>
-						) : (
-							<LoadingPresets.Initial {...loadingProps} />
-						)
-					)}
-
-					{/* Seeking */}
-					{videoState.isSeeking && (
-						LoadingComponent ? (
-							<CustomLoading context="seeking">
-								<LoadingComponent context="seeking" />
-							</CustomLoading>
-						) : (
-							<LoadingPresets.Seeking {...loadingProps} />
-						)
-					)}
-
-					{/* Buffering */}
-					{videoState.isBuffering && !videoState.isSeeking && (
-						LoadingComponent ? (
-							<CustomLoading context="buffering">
-								<LoadingComponent context="buffering" />
-							</CustomLoading>
-						) : (
-							<LoadingPresets.Buffering {...loadingProps} />
-						)
-					)}
-				</>
-			)}
-		</div>
-	)
-}

package/dist/src/components/variants/minimal/components/CenterPlayButton.d.ts

@@ -1,7 +0,0 @@
-interface CenterPlayButtonProps {
-    isPlaying: boolean;
-    onTogglePlay: () => void;
-}
-export declare const CenterPlayButton: ({ isPlaying, onTogglePlay }: CenterPlayButtonProps) => import("react/jsx-runtime").JSX.Element | null;
-export {};
-//# sourceMappingURL=CenterPlayButton.d.ts.map

package/dist/src/components/variants/minimal/components/CenterPlayButton.tsx

@@ -1,22 +0,0 @@
-import React, { memo } from "react"
-import { defaultMinimalIcons } from "../../../icons"
-
-interface CenterPlayButtonProps {
-	isPlaying: boolean
-	onTogglePlay: () => void
-}
-
-export const CenterPlayButton = function CenterPlayButton({
-	isPlaying,
-	onTogglePlay
-}: CenterPlayButtonProps) {
-	if (isPlaying) return null
-
-	const PlayIcon = defaultMinimalIcons.play
-
-	return (
-		<div className="minimal-center-play cursor-pointer" onClick={onTogglePlay}>
-			{PlayIcon && <PlayIcon size={60} />}
-		</div>
-	)
-}

package/dist/src/components/variants/minimal/components/ControlBar.d.ts

@@ -1,43 +0,0 @@
-import type { BufferedRange } from "../../../../hooks/useVideoPlayer";
-interface ControlBarProps {
-    controlsVisible: boolean;
-    currentTime: number;
-    duration: number;
-    isPlaying: boolean;
-    volume: number;
-    isMuted: boolean;
-    showVolumeSlider: boolean;
-    isFullscreen: boolean;
-    showSettings: boolean;
-    playbackRate: number;
-    subtitleSrc?: string;
-    subtitlesEnabled: boolean;
-    subtitleTracks?: Array<{
-        id: string;
-        label: string;
-        language?: string;
-        src?: string;
-    }>;
-    currentTrackId?: string | null;
-    hasSubtitles?: boolean;
-    subtitleLoadError?: Error | null;
-    volumeOrientation?: "horizontal" | "vertical";
-    bufferedRanges?: BufferedRange[];
-    isSeeking?: boolean;
-    onSeek: (time: number) => void;
-    onTogglePlay: () => void;
-    onSeekBackward: () => void;
-    onSeekForward: () => void;
-    onToggleMute: () => void;
-    onVolumeChange: (volume: number) => void;
-    onShowVolumeSlider: (show: boolean) => void;
-    onToggleSubtitles: () => void;
-    onSelectSubtitleTrack?: (trackId: string | null) => void;
-    onTakeScreenshot: (ctrlKey: boolean) => void;
-    onToggleFullscreen: () => void;
-    onToggleSettings: () => void;
-    onChangePlaybackRate: (rate: number) => void;
-}
-export declare const ControlBar: ({ controlsVisible, currentTime, duration, isPlaying, volume, isMuted, showVolumeSlider, isFullscreen, showSettings, playbackRate, subtitleSrc, subtitlesEnabled, subtitleTracks, currentTrackId, hasSubtitles, subtitleLoadError, volumeOrientation, bufferedRanges, isSeeking, onSeek, onTogglePlay, onSeekBackward, onSeekForward, onToggleMute, onVolumeChange, onShowVolumeSlider, onToggleSubtitles, onSelectSubtitleTrack, onTakeScreenshot, onToggleFullscreen, onToggleSettings, onChangePlaybackRate }: ControlBarProps) => import("react/jsx-runtime").JSX.Element;
-export {};
-//# sourceMappingURL=ControlBar.d.ts.map

package/dist/src/components/variants/minimal/components/ControlBar.tsx

@@ -1,146 +0,0 @@
-import React, { memo } from "react"
-import { cn } from "../../../../lib/utils"
-import { SeekBar } from "./SeekBar"
-import { PlaybackControls } from "./PlaybackControls"
-import { VolumeControl } from "./VolumeControl"
-import { TimeDisplay } from "./TimeDisplay"
-import { RightControls } from "./RightControls"
-import type { BufferedRange } from "../../../../hooks/useVideoPlayer"
-
-interface ControlBarProps {
-	controlsVisible: boolean
-	currentTime: number
-	duration: number
-	isPlaying: boolean
-	volume: number
-	isMuted: boolean
-	showVolumeSlider: boolean
-	isFullscreen: boolean
-	showSettings: boolean
-	playbackRate: number
-	subtitleSrc?: string
-	subtitlesEnabled: boolean
-	subtitleTracks?: Array<{
-		id: string
-		label: string
-		language?: string
-		src?: string
-	}>
-	currentTrackId?: string | null
-	hasSubtitles?: boolean
-	subtitleLoadError?: Error | null
-	volumeOrientation?: "horizontal" | "vertical"
-	bufferedRanges?: BufferedRange[]
-	isSeeking?: boolean
-	onSeek: (time: number) => void
-	onTogglePlay: () => void
-	onSeekBackward: () => void
-	onSeekForward: () => void
-	onToggleMute: () => void
-	onVolumeChange: (volume: number) => void
-	onShowVolumeSlider: (show: boolean) => void
-	onToggleSubtitles: () => void
-	onSelectSubtitleTrack?: (trackId: string | null) => void
-	onTakeScreenshot: (ctrlKey: boolean) => void
-	onToggleFullscreen: () => void
-	onToggleSettings: () => void
-	onChangePlaybackRate: (rate: number) => void
-}
-
-export const ControlBar = function ControlBar({
-	controlsVisible,
-	currentTime,
-	duration,
-	isPlaying,
-	volume,
-	isMuted,
-	showVolumeSlider,
-	isFullscreen,
-	showSettings,
-	playbackRate,
-	subtitleSrc,
-	subtitlesEnabled,
-	subtitleTracks,
-	currentTrackId,
-	hasSubtitles,
-	subtitleLoadError,
-	volumeOrientation = "horizontal",
-	bufferedRanges,
-	isSeeking,
-	onSeek,
-	onTogglePlay,
-	onSeekBackward,
-	onSeekForward,
-	onToggleMute,
-	onVolumeChange,
-	onShowVolumeSlider,
-	onToggleSubtitles,
-	onSelectSubtitleTrack,
-	onTakeScreenshot,
-	onToggleFullscreen,
-	onToggleSettings,
-	onChangePlaybackRate
-}: ControlBarProps) {
-	return (
-		<div
-			className={cn(
-				"minimal-control-bar",
-				"absolute right-0 bottom-0 left-0 z-40",
-				"px-6 py-3 transition-all duration-200",
-				controlsVisible ? "minimal-controls-visible" : "minimal-controls-hidden"
-			)}
-		>
-			<SeekBar
-				currentTime={currentTime}
-				duration={duration}
-				bufferedRanges={bufferedRanges}
-				isSeeking={isSeeking}
-				onSeek={onSeek}
-			/>
-
-			<div className="flex items-center justify-between">
-				<div className="flex items-center gap-2">
-					<PlaybackControls
-						isPlaying={isPlaying}
-						onTogglePlay={onTogglePlay}
-						onSeekBackward={onSeekBackward}
-						onSeekForward={onSeekForward}
-					/>
-
-					<VolumeControl
-						volume={volume}
-						isMuted={isMuted}
-						showVolumeSlider={showVolumeSlider}
-						onToggleMute={onToggleMute}
-						onVolumeChange={onVolumeChange}
-						onShowVolumeSlider={onShowVolumeSlider}
-						orientation={volumeOrientation}
-					/>
-
-					<TimeDisplay
-						currentTime={currentTime}
-						duration={duration}
-					/>
-				</div>
-
-				<RightControls
-					subtitleSrc={subtitleSrc}
-					subtitlesEnabled={subtitlesEnabled}
-					subtitleTracks={subtitleTracks}
-					currentTrackId={currentTrackId}
-					hasSubtitles={hasSubtitles}
-					subtitleLoadError={subtitleLoadError}
-					isFullscreen={isFullscreen}
-					showSettings={showSettings}
-					playbackRate={playbackRate}
-					onToggleSubtitles={onToggleSubtitles}
-					onSelectSubtitleTrack={onSelectSubtitleTrack}
-					onTakeScreenshot={onTakeScreenshot}
-					onToggleFullscreen={onToggleFullscreen}
-					onToggleSettings={onToggleSettings}
-					onChangePlaybackRate={onChangePlaybackRate}
-				/>
-			</div>
-		</div>
-	)
-}