@therealtinhtute/baroiplayer 1.0.8 → 1.2.0

package/src/components/variants/minimal/EnhancedMinimalMediaPlayer.tsx

@@ -8,19 +8,19 @@ import React, {
 	useTransition,
 	useOptimistic,
 	useDeferredValue,
-	Suspense,
+	Suspense
 } from "react"
-import { MediaPlayerRoot } from "../../media-player-root"
-import { MediaPlayerVideo } from "../../media-player-video"
-import { MinimalControls } from "./MinimalControls"
-import { MinimalOverlay } from "./MinimalOverlay"
-import { MinimalLoading } from "./MinimalLoading"
-import { PerformanceIndicator } from "../../enhanced/enhanced-controls"
-import { DebugPanel } from "../../enhanced/debug-panel"
 import { useIntelligentPreloading } from "../../../hooks/use-intelligent-preloading"
 import { cn } from "../../../lib/utils"
+import { DebugPanel } from "../../enhanced/debug-panel"
+import { PerformanceIndicator } from "../../enhanced/enhanced-controls"
 import type { IconSet } from "../../icons"
 import { defaultMinimalIcons } from "../../icons"
+import { MediaPlayerRoot } from "../../media-player-root"
+import { MediaPlayerVideo } from "../../media-player-video"
+import { MinimalControls } from "./MinimalControls"
+import { MinimalLoading } from "./MinimalLoading"
+import { MinimalOverlay } from "./MinimalOverlay"
 
 export interface EnhancedMinimalMediaPlayerProps {
 	src: string | string[]
@@ -61,7 +61,7 @@ export interface EnhancedMinimalMediaPlayerProps {
 	enableIntelligentPreloading?: boolean
 	enablePerformanceMonitoring?: boolean
 	showDebugPanel?: boolean
-	preloadingStrategy?: 'conservative' | 'balanced' | 'aggressive'
+	preloadingStrategy?: "conservative" | "balanced" | "aggressive"
 	enableReact19Optimizations?: boolean
 }
 
@@ -109,10 +109,10 @@ export function EnhancedMinimalMediaPlayer({
 
 	// Enhanced features
 	enableIntelligentPreloading = true,
-	enablePerformanceMonitoring = process.env.NODE_ENV === 'development',
+	enablePerformanceMonitoring = process.env.NODE_ENV === "development",
 	showDebugPanel = false,
-	preloadingStrategy = 'balanced',
-	enableReact19Optimizations = true,
+	preloadingStrategy = "balanced",
+	enableReact19Optimizations = true
 }: EnhancedMinimalMediaPlayerProps) {
 	// React 19 concurrent features
 	const [isPending, startTransition] = useTransition()
@@ -134,7 +134,7 @@ export function EnhancedMinimalMediaPlayer({
 		error: null,
 		controlsVisible: true,
 		isHovered: false,
-		userInteracting: false,
+		userInteracting: false
 	})
 
 	// Performance metrics
@@ -142,7 +142,7 @@ export function EnhancedMinimalMediaPlayer({
 		fps: 0,
 		bufferHealth: 0,
 		quality: 0,
-		bandwidth: 0,
+		bandwidth: 0
 	})
 
 	// Refs
@@ -158,10 +158,10 @@ export function EnhancedMinimalMediaPlayer({
 	// Prepare media sources for preloading
 	const mediaSources = React.useMemo(() => {
 		if (qualities && qualities.length > 0) {
-			return qualities.map(q => ({ src: q.src, type: 'video/mp4' }))
+			return qualities.map((q) => ({ src: q.src, type: "video/mp4" as const }))
 		}
 		const sources = Array.isArray(src) ? src : [src]
-		return sources.map(s => ({ src: s, type: 'video/mp4' }))
+		return sources.map((s) => ({ src: s, type: "video/mp4" as const }))
 	}, [src, qualities])
 
 	// Intelligent preloading
@@ -169,7 +169,7 @@ export function EnhancedMinimalMediaPlayer({
 		trackUserBehavior: enableIntelligentPreloading,
 		adaptToNetwork: true,
 		strategy: preloadingStrategy,
-		maxPreloadItems: 2,
+		maxPreloadItems: 2
 	})
 
 	// Auto-hide controls logic
@@ -181,17 +181,23 @@ export function EnhancedMinimalMediaPlayer({
 		}
 
 		startTransition(() => {
-			setMediaState(prev => ({ ...prev, controlsVisible: true }))
+			setMediaState((prev) => ({ ...prev, controlsVisible: true }))
 		})
 
 		if (!mediaState.userInteracting && mediaState.isPlaying) {
 			hideTimeoutRef.current = setTimeout(() => {
 				startTransition(() => {
-					setMediaState(prev => ({ ...prev, controlsVisible: false }))
+					setMediaState((prev) => ({ ...prev, controlsVisible: false }))
 				})
 			}, hideDelay)
 		}
-	}, [autoHideControls, hideDelay, mediaState.userInteracting, mediaState.isPlaying, startTransition])
+	}, [
+		autoHideControls,
+		hideDelay,
+		mediaState.userInteracting,
+		mediaState.isPlaying,
+		startTransition
+	])
 
 	// Handle mouse movement
 	const handleMouseMove = useCallback(() => {
@@ -201,7 +207,7 @@ export function EnhancedMinimalMediaPlayer({
 	// Handle mouse enter/leave
 	const handleMouseEnter = useCallback(() => {
 		startTransition(() => {
-			setMediaState(prev => ({ ...prev, isHovered: true, controlsVisible: true }))
+			setMediaState((prev) => ({ ...prev, isHovered: true, controlsVisible: true }))
 		})
 		if (hideTimeoutRef.current) {
 			clearTimeout(hideTimeoutRef.current)
@@ -210,12 +216,12 @@ export function EnhancedMinimalMediaPlayer({
 
 	const handleMouseLeave = useCallback(() => {
 		startTransition(() => {
-			setMediaState(prev => ({ ...prev, isHovered: false }))
+			setMediaState((prev) => ({ ...prev, isHovered: false }))
 		})
 		if (mediaState.isPlaying && autoHideControls && !mediaState.userInteracting) {
 			hideTimeoutRef.current = setTimeout(() => {
 				startTransition(() => {
-					setMediaState(prev => ({ ...prev, controlsVisible: false }))
+					setMediaState((prev) => ({ ...prev, controlsVisible: false }))
 				})
 			}, 500)
 		}
@@ -224,7 +230,7 @@ export function EnhancedMinimalMediaPlayer({
 	// Handle user interaction
 	const handleUserInteractionStart = useCallback(() => {
 		startTransition(() => {
-			setMediaState(prev => ({ ...prev, userInteracting: true, controlsVisible: true }))
+			setMediaState((prev) => ({ ...prev, userInteracting: true, controlsVisible: true }))
 		})
 		if (hideTimeoutRef.current) {
 			clearTimeout(hideTimeoutRef.current)
@@ -233,51 +239,61 @@ export function EnhancedMinimalMediaPlayer({
 
 	const handleUserInteractionEnd = useCallback(() => {
 		startTransition(() => {
-			setMediaState(prev => ({ ...prev, userInteracting: false }))
+			setMediaState((prev) => ({ ...prev, userInteracting: false }))
 		})
 		resetHideTimer()
 	}, [resetHideTimer, startTransition])
 
 	// Handle play state changes
-	const handlePlayStateChange = useCallback((playing: boolean) => {
-		startTransition(() => {
-			setMediaState(prev => ({ ...prev, isPlaying: playing }))
-		})
-
-		if (playing) {
-			onPlay?.()
-			resetHideTimer()
-		} else {
-			onPause?.()
+	const handlePlayStateChange = useCallback(
+		(playing: boolean) => {
 			startTransition(() => {
-				setMediaState(prev => ({ ...prev, controlsVisible: true }))
+				setMediaState((prev) => ({ ...prev, isPlaying: playing }))
 			})
-			if (hideTimeoutRef.current) {
-				clearTimeout(hideTimeoutRef.current)
+
+			if (playing) {
+				onPlay?.()
+				resetHideTimer()
+			} else {
+				onPause?.()
+				startTransition(() => {
+					setMediaState((prev) => ({ ...prev, controlsVisible: true }))
+				})
+				if (hideTimeoutRef.current) {
+					clearTimeout(hideTimeoutRef.current)
+				}
 			}
-		}
-	}, [onPlay, onPause, resetHideTimer, startTransition])
+		},
+		[onPlay, onPause, resetHideTimer, startTransition]
+	)
 
 	// Handle loading state
 	const handleLoadStart = useCallback(() => {
 		startTransition(() => {
-			setMediaState(prev => ({ ...prev, isLoading: true, error: null }))
+			setMediaState((prev) => ({ ...prev, isLoading: true, error: null }))
 		})
 	}, [startTransition])
 
 	const handleLoadedData = useCallback(() => {
 		startTransition(() => {
-			setMediaState(prev => ({ ...prev, isLoading: false }))
+			setMediaState((prev) => ({ ...prev, isLoading: false }))
 		})
 	}, [startTransition])
 
 	// Handle errors
-	const handleError = useCallback((e: Error) => {
-		startTransition(() => {
-			setMediaState(prev => ({ ...prev, isLoading: false, error: e.message || "An error occurred" }))
-		})
-		onError?.(e)
-	}, [onError, startTransition])
+	const handleError = useCallback(
+		(e: Error) => {
+			startTransition(() => {
+				setMediaState((prev) => ({
+					...prev,
+					isLoading: false,
+					error: e.message || "An error occurred"
+				}))
+			})
+			onError?.(e)
+		},
+		[onError, startTransition]
+	)
 
 	// Performance monitoring
 	useEffect(() => {
@@ -291,7 +307,7 @@ export function EnhancedMinimalMediaPlayer({
 				const fps = Math.round((frameCountRef.current * 1000) / (currentTime - lastTimeRef.current))
 
 				startTransition(() => {
-					setPerformanceMetrics(prev => ({ ...prev, fps }))
+					setPerformanceMetrics((prev) => ({ ...prev, fps }))
 				})
 
 				frameCountRef.current = 0
@@ -304,12 +320,12 @@ export function EnhancedMinimalMediaPlayer({
 		}
 
 		if (videoRef.current) {
-			videoRef.current.addEventListener('play', measureFPS)
+			videoRef.current.addEventListener("play", measureFPS)
 		}
 
 		return () => {
 			if (videoRef.current) {
-				videoRef.current.removeEventListener('play', measureFPS)
+				videoRef.current.removeEventListener("play", measureFPS)
 			}
 		}
 	}, [enablePerformanceMonitoring, startTransition])
@@ -334,7 +350,7 @@ export function EnhancedMinimalMediaPlayer({
 				}
 
 				startTransition(() => {
-					setPerformanceMetrics(prev => ({ ...prev, bufferHealth }))
+					setPerformanceMetrics((prev) => ({ ...prev, bufferHealth }))
 				})
 			}
 		}
@@ -353,16 +369,21 @@ export function EnhancedMinimalMediaPlayer({
 	}, [])
 
 	// Determine video source
-	const videoSrc = qualities && qualities.length > 0
-		? qualities.find(q => q.default)?.src || qualities[0]?.src || (typeof src === 'string' ? src : src[0])
-		: (typeof src === 'string' ? src : src[0])
+	const videoSrc =
+		qualities && qualities.length > 0
+			? qualities.find((q) => q.default)?.src ||
+				qualities[0]?.src ||
+				(typeof src === "string" ? src : src[0])
+			: typeof src === "string"
+				? src
+				: src[0]
 
 	// Determine current quality for performance display
 	const currentQuality = React.useMemo(() => {
 		if (!qualities || !videoRef.current) return 0
 		const currentSrc = videoRef.current.currentSrc
-		const currentQuality = qualities.find(q => q.src === currentSrc || q.src.includes(currentSrc))
-		return parseInt(currentQuality?.quality.replace('p', '')) || 0
+		const currentQuality = qualities.find((q) => q.src === currentSrc || q.src.includes(currentSrc))
+		return parseInt(currentQuality?.quality?.replace("p", "") || "0") || 0
 	}, [qualities, videoRef.current?.currentSrc])
 
 	return (
@@ -376,14 +397,12 @@ export function EnhancedMinimalMediaPlayer({
 			data-theme={theme}
 			onMouseMove={handleMouseMove}
 			onMouseEnter={handleMouseEnter}
-			onMouseLeave={handleMouseLeave}
-		>
+			onMouseLeave={handleMouseLeave}>
 			<MediaPlayerRoot
 				className="relative h-full w-full"
 				autoHide={false}
 				enableGestures={true}
-				enableMobileOptimizations={true}
-			>
+				enableMobileOptimizations={true}>
 				{/* Media Resource Preloader */}
 				{enableIntelligentPreloading && (
 					<Suspense fallback={null}>
@@ -395,7 +414,7 @@ export function EnhancedMinimalMediaPlayer({
 
 				{/* Video Element */}
 				<MediaPlayerVideo
-					ref={videoRef}
+					
 					src={videoSrc}
 					poster={poster}
 					autoPlay={autoPlay}
@@ -429,8 +448,17 @@ export function EnhancedMinimalMediaPlayer({
 					<div className="absolute inset-0 z-50 flex items-center justify-center bg-black/80">
 						<div className="text-center">
 							<div className="mb-4 text-red-500">
-								<svg className="mx-auto h-12 w-12" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-									<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+								<svg
+									className="mx-auto h-12 w-12"
+									fill="none"
+									viewBox="0 0 24 24"
+									stroke="currentColor">
+									<path
+										strokeLinecap="round"
+										strokeLinejoin="round"
+										strokeWidth={2}
+										d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+									/>
 								</svg>
 							</div>
 							<p className="mb-2 text-lg text-white">Playback Error</p>
@@ -442,28 +470,21 @@ export function EnhancedMinimalMediaPlayer({
 				{/* Watermark */}
 				{watermark && (
 					<div
-						className={cn(
-							"pointer-events-none absolute z-20",
-							{
-								"top-4 left-4": watermark.position === "top-left",
-								"top-4 right-4": watermark.position === "top-right",
-								"bottom-16 left-4": watermark.position === "bottom-left",
-								"right-4 bottom-16": watermark.position === "bottom-right",
-							}
-						)}
-						style={{ opacity: watermark.opacity || 0.7 }}
-					>
+						className={cn("pointer-events-none absolute z-20", {
+							"top-4 left-4": watermark.position === "top-left",
+							"top-4 right-4": watermark.position === "top-right",
+							"bottom-16 left-4": watermark.position === "bottom-left",
+							"right-4 bottom-16": watermark.position === "bottom-right"
+						})}
+						style={{ opacity: watermark.opacity || 0.7 }}>
 						<img
 							src={watermark.src}
 							alt=""
-							className={cn(
-								"object-contain",
-								{
-									"h-8": watermark.size === "small",
-									"h-12": watermark.size === "medium" || !watermark.size,
-									"h-16": watermark.size === "large",
-								}
-							)}
+							className={cn("object-contain", {
+								"h-8": watermark.size === "small",
+								"h-12": watermark.size === "medium" || !watermark.size,
+								"h-16": watermark.size === "large"
+							})}
 						/>
 					</div>
 				)}
@@ -510,7 +531,7 @@ export function EnhancedMinimalMediaPlayer({
 								fps: performanceMetrics.fps,
 								bufferHealth: performanceMetrics.bufferHealth,
 								quality: currentQuality,
-								bandwidth: performanceMetrics.bandwidth,
+								bandwidth: performanceMetrics.bandwidth
 							}}
 							className="text-white/60 text-xs"
 						/>
@@ -524,7 +545,7 @@ export function EnhancedMinimalMediaPlayer({
 					performanceMetrics={{
 						fps: performanceMetrics.fps,
 						bufferHealth: performanceMetrics.bufferHealth,
-						networkBandwidth: performanceMetrics.bandwidth,
+						networkBandwidth: performanceMetrics.bandwidth
 					}}
 					playbackState={{
 						currentTime: deferredCurrentTime,
@@ -532,14 +553,14 @@ export function EnhancedMinimalMediaPlayer({
 						volume: deferredVolume,
 						isPlaying: mediaState.isPlaying,
 						quality: currentQuality,
-						isBuffering: mediaState.isLoading || isPending,
+						isBuffering: mediaState.isLoading || isPending
 					}}
 					preloadingStats={{
 						preloadedItems: preloadingControls.getStats().preloadedItems,
 						engagementScore: preloadingControls.getStats().engagementScore,
 						queueLength: preloadingControls.getStats().queueLength,
-						hitRate: preloadingControls.getStats().hitRate,
-						totalSaved: preloadingControls.getStats().totalSaved,
+						hitRate: 0,
+						totalSaved: 0
 					}}
 					position="top-right"
 					title="Enhanced Minimal Player Debug"
@@ -549,4 +570,4 @@ export function EnhancedMinimalMediaPlayer({
 	)
 }
 
-export default EnhancedMinimalMediaPlayer
+export default EnhancedMinimalMediaPlayer

package/src/components/variants/minimal/MinimalControls.tsx

@@ -1,142 +1,124 @@
 "use client"
 
 import React from "react"
+import { cn } from "../../../lib/utils"
+import type { IconSet } from "../../icons"
+import { MediaPlayerFullscreen } from "../../media-player-fullscreen"
 import { MediaPlayerPlay } from "../../media-player-play"
 import { MediaPlayerSeek } from "../../media-player-seek"
 import { MediaPlayerTime } from "../../media-player-time"
 import { MediaPlayerVolume } from "../../media-player-volume"
-import { MediaPlayerFullscreen } from "../../media-player-fullscreen"
 import { MinimalPlayButton } from "./MinimalPlayButton"
 import { MinimalSeekBar } from "./MinimalSeekBar"
 import { MinimalVolumeControl } from "./MinimalVolumeControl"
-import { cn } from "../../../lib/utils"
-import type { IconSet } from "../../icons"
 
 export interface MinimalControlsProps {
-  visible: boolean
-  icons: IconSet
-  isPlaying: boolean
-  showQualitySelector?: boolean
-  showSpeedControl?: boolean
-  qualities?: Array<{
-    src: string
-    quality: string
-    default?: boolean
-  }>
-  thumbnails?: string
-  onUserInteractionStart?: () => void
-  onUserInteractionEnd?: () => void
-  onSeek?: (time: number) => void
+	visible: boolean
+	icons: IconSet
+	isPlaying: boolean
+	showQualitySelector?: boolean
+	showSpeedControl?: boolean
+	qualities?: Array<{
+		src: string
+		quality: string
+		default?: boolean
+	}>
+	thumbnails?: string
+	onUserInteractionStart?: () => void
+	onUserInteractionEnd?: () => void
+	onSeek?: (time: number) => void
 }
 
 export function MinimalControls({
-  visible,
-  icons,
-  isPlaying,
-  showQualitySelector,
-  showSpeedControl,
-  qualities,
-  thumbnails,
-  onUserInteractionStart,
-  onUserInteractionEnd,
-  onSeek,
+	visible,
+	icons,
+	isPlaying,
+	showQualitySelector,
+	showSpeedControl,
+	qualities,
+	thumbnails,
+	onUserInteractionStart,
+	onUserInteractionEnd,
+	onSeek
 }: MinimalControlsProps) {
-  return (
-    <div
-      className={cn(
-        "minimal-control-bar",
-        "absolute right-0 bottom-0 left-0 z-40",
-        "px-6 py-3 transition-all duration-200",
-        visible ? "minimal-controls-visible" : "minimal-controls-hidden"
-      )}
-      data-hidden={!visible}
-      onMouseDown={onUserInteractionStart}
-      onMouseUp={onUserInteractionEnd}
-      onTouchStart={onUserInteractionStart}
-      onTouchEnd={onUserInteractionEnd}
-    >
-      {/* Seek Bar - Top of controls */}
-      <div className="mb-2">
-        <MinimalSeekBar
-          thumbnails={thumbnails}
-          onSeek={onSeek}
-        />
-      </div>
+	return (
+		<div
+			className={cn(
+				"minimal-control-bar",
+				"absolute right-0 bottom-0 left-0 z-40",
+				"px-6 py-3 transition-all duration-200",
+				visible ? "minimal-controls-visible" : "minimal-controls-hidden"
+			)}
+			data-hidden={!visible}
+			onMouseDown={onUserInteractionStart}
+			onMouseUp={onUserInteractionEnd}
+			onTouchStart={onUserInteractionStart}
+			onTouchEnd={onUserInteractionEnd}>
+			{/* Seek Bar - Top of controls */}
+			<div className="mb-2">
+				<MinimalSeekBar thumbnails={thumbnails} onSeek={onSeek} />
+			</div>
 
-      {/* Main Controls Row */}
-      <div className="flex items-center justify-between gap-3">
-        {/* Left Side Controls */}
-        <div className="flex items-center gap-3">
-          {/* Play/Pause Button */}
-          <MinimalPlayButton
-            isPlaying={isPlaying}
-            icons={icons}
-          />
+			{/* Main Controls Row */}
+			<div className="flex items-center justify-between gap-3">
+				{/* Left Side Controls */}
+				<div className="flex items-center gap-3">
+					{/* Play/Pause Button */}
+					<MinimalPlayButton isPlaying={isPlaying} icons={icons} />
 
-          {/* Volume Control */}
-          <MinimalVolumeControl
-            icons={icons}
-          />
+					{/* Volume Control */}
+					<MinimalVolumeControl icons={icons} />
 
-          {/* Time Display */}
-          <div className="minimal-time select-none font-mono text-sm text-white/90">
-            <MediaPlayerTime variant="current" />
-            <span className="mx-1 text-white/60">/</span>
-            <MediaPlayerTime variant="duration" />
-          </div>
-        </div>
+					{/* Time Display */}
+					<div className="minimal-time select-none font-mono text-sm text-white/90">
+						<MediaPlayerTime variant="current" />
+						<span className="mx-1 text-white/60">/</span>
+						<MediaPlayerTime variant="duration" />
+					</div>
+				</div>
 
-        {/* Right Side Controls */}
-        <div className="flex items-center gap-2">
-          {/* Quality Selector */}
-          {showQualitySelector && qualities && qualities.length > 1 && (
-            <button
-              className="minimal-btn w-auto px-3 font-medium text-xs"
-              title="Quality"
-            >
-              {qualities.find(q => q.default)?.quality || qualities[0]?.quality || 'Auto'}
-            </button>
-          )}
+				{/* Right Side Controls */}
+				<div className="flex items-center gap-2">
+					{/* Quality Selector */}
+					{showQualitySelector && qualities && qualities.length > 1 && (
+						<button className="minimal-btn w-auto px-3 font-medium text-xs" title="Quality">
+							{qualities.find((q) => q.default)?.quality || qualities[0]?.quality || "Auto"}
+						</button>
+					)}
 
-          {/* Speed Control */}
-          {showSpeedControl && (
-            <button
-              className="minimal-btn w-auto px-3 font-medium text-xs"
-              title="Playback Speed"
-            >
-              1x
-            </button>
-          )}
+					{/* Speed Control */}
+					{showSpeedControl && (
+						<button className="minimal-btn w-auto px-3 font-medium text-xs" title="Playback Speed">
+							1x
+						</button>
+					)}
 
-          {/* Settings */}
-          {icons.settings && (showQualitySelector || showSpeedControl) && (
-            <button className="minimal-btn" title="Settings">
-              <icons.settings size={18} />
-            </button>
-          )}
+					{/* Settings */}
+					{icons.settings && (showQualitySelector || showSpeedControl) && (
+						<button className="minimal-btn" title="Settings">
+							<icons.settings size={18} />
+						</button>
+					)}
 
-          {/* Fullscreen Button */}
-          <button
-            className="minimal-btn"
-            title="Toggle Fullscreen"
-            onClick={() => {
-              // This would need to be connected to fullscreen logic
-              const elem = document.documentElement
-              if (!document.fullscreenElement) {
-                elem.requestFullscreen?.()
-              } else {
-                document.exitFullscreen?.()
-              }
-            }}
-          >
-            {document.fullscreenElement ? (
-              icons.exitFullscreen && <icons.exitFullscreen size={18} />
-            ) : (
-              icons.fullscreen && <icons.fullscreen size={18} />
-            )}
-          </button>
-        </div>
-      </div>
-    </div>
-  )
+					{/* Fullscreen Button */}
+					<button
+						className="minimal-btn"
+						title="Toggle Fullscreen"
+						onClick={() => {
+							// This would need to be connected to fullscreen logic
+							const elem = document.documentElement
+							if (!document.fullscreenElement) {
+								elem.requestFullscreen?.()
+							} else {
+								document.exitFullscreen?.()
+							}
+						}}>
+						{document.fullscreenElement
+							? icons.exitFullscreen && <icons.exitFullscreen size={18} />
+							: icons.fullscreen && <icons.fullscreen size={18} />}
+					</button>
+				</div>
+			</div>
+		</div>
+	)
 }