@therealtinhtute/baroiplayer 1.0.8 → 1.2.0

package/src/components/enhanced/advanced-features.tsx

@@ -1,9 +1,9 @@
 "use client"
 
 import React from "react"
-import { useMediaSelector, useMediaDispatch, MediaActionTypes } from "../../context/media-context"
-import { cn } from "../../lib/utils"
+import { MediaActionTypes, useMediaDispatch, useMediaSelector } from "../../context/media-context"
 import { formatTime } from "../../lib/format-time"
+import { cn } from "../../lib/utils"
 
 // Types for advanced features
 export interface Chapter {
@@ -45,7 +45,7 @@ export const QualitySelector = function QualitySelector({
 	const [isOpen, setIsOpen] = React.useState(false)
 
 	const currentQualityLabel = React.useMemo(() => {
-		return qualities.find(q => q.id === currentQuality)?.label || "Auto"
+		return qualities.find((q) => q.id === currentQuality)?.label || "Auto"
 	}, [qualities, currentQuality])
 
 	return (
@@ -54,18 +54,16 @@ export const QualitySelector = function QualitySelector({
 				type="button"
 				onClick={() => setIsOpen(!isOpen)}
 				className="flex items-center gap-2 rounded-lg bg-black/50 px-3 py-2 text-white transition-colors hover:bg-black/70"
-				aria-label="Select quality"
-			>
+				aria-label="Select quality">
 				<svg viewBox="0 0 24 24" fill="currentColor" className="h-4 w-4">
-					<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
+					<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z" />
 				</svg>
 				<span className="text-sm">{currentQualityLabel}</span>
-				<svg 
-					viewBox="0 0 24 24" 
-					fill="currentColor" 
-					className={cn("h-4 w-4 transition-transform", isOpen && "rotate-180")}
-				>
-					<path d="M7 10l5 5 5-5z"/>
+				<svg
+					viewBox="0 0 24 24"
+					fill="currentColor"
+					className={cn("h-4 w-4 transition-transform", isOpen && "rotate-180")}>
+					<path d="M7 10l5 5 5-5z" />
 				</svg>
 			</button>
 
@@ -81,8 +79,7 @@ export const QualitySelector = function QualitySelector({
 							className={cn(
 								"w-full px-4 py-2 text-left text-sm text-white transition-colors hover:bg-white/10",
 								quality.id === currentQuality && "bg-primary/20 text-primary"
-							)}
-						>
+							)}>
 							{quality.label}
 							{quality.bitrate && (
 								<span className="ml-2 text-white/60 text-xs">
@@ -113,7 +110,7 @@ export const SubtitleSelector = function SubtitleSelector({
 
 	const currentSubtitleLabel = React.useMemo(() => {
 		if (!currentSubtitle) return "Off"
-		return subtitles.find(s => s.id === currentSubtitle)?.label || "Off"
+		return subtitles.find((s) => s.id === currentSubtitle)?.label || "Off"
 	}, [subtitles, currentSubtitle])
 
 	return (
@@ -122,18 +119,16 @@ export const SubtitleSelector = function SubtitleSelector({
 				type="button"
 				onClick={() => setIsOpen(!isOpen)}
 				className="flex items-center gap-2 rounded-lg bg-black/50 px-3 py-2 text-white transition-colors hover:bg-black/70"
-				aria-label="Select subtitles"
-			>
+				aria-label="Select subtitles">
 				<svg viewBox="0 0 24 24" fill="currentColor" className="h-4 w-4">
-					<path d="M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zM4 12h4v2H4v-2zm10 6H4v-2h10v2zm6 0h-4v-2h4v2zm0-4H10v-2h10v2z"/>
+					<path d="M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zM4 12h4v2H4v-2zm10 6H4v-2h10v2zm6 0h-4v-2h4v2zm0-4H10v-2h10v2z" />
 				</svg>
 				<span className="text-sm">{currentSubtitleLabel}</span>
-				<svg 
-					viewBox="0 0 24 24" 
-					fill="currentColor" 
-					className={cn("h-4 w-4 transition-transform", isOpen && "rotate-180")}
-				>
-					<path d="M7 10l5 5 5-5z"/>
+				<svg
+					viewBox="0 0 24 24"
+					fill="currentColor"
+					className={cn("h-4 w-4 transition-transform", isOpen && "rotate-180")}>
+					<path d="M7 10l5 5 5-5z" />
 				</svg>
 			</button>
 
@@ -147,8 +142,7 @@ export const SubtitleSelector = function SubtitleSelector({
 						className={cn(
 							"w-full px-4 py-2 text-left text-sm text-white transition-colors hover:bg-white/10",
 							!currentSubtitle && "bg-primary/20 text-primary"
-						)}
-					>
+						)}>
 						Off
 					</button>
 					{subtitles.map((subtitle) => (
@@ -161,8 +155,7 @@ export const SubtitleSelector = function SubtitleSelector({
 							className={cn(
 								"w-full px-4 py-2 text-left text-sm text-white transition-colors hover:bg-white/10",
 								subtitle.id === currentSubtitle && "bg-primary/20 text-primary"
-							)}
-						>
+							)}>
 							{subtitle.label}
 						</button>
 					))}
@@ -179,15 +172,18 @@ export const PlaybackSpeedSelector = function PlaybackSpeedSelector({
 	className?: string
 }) {
 	const dispatch = useMediaDispatch()
-	const playbackRate = useMediaSelector(state => state.playbackRate)
+	const playbackRate = useMediaSelector((state) => state.playbackRate)
 	const [isOpen, setIsOpen] = React.useState(false)
 
 	const speeds = [0.25, 0.5, 0.75, 1, 1.25, 1.5, 1.75, 2]
 
-	const handleSpeedChange = React.useCallback((speed: number) => {
-		dispatch({ type: MediaActionTypes.SET_PLAYBACK_RATE, detail: speed })
-		setIsOpen(false)
-	}, [dispatch])
+	const handleSpeedChange = React.useCallback(
+		(speed: number) => {
+			dispatch({ type: MediaActionTypes.SET_PLAYBACK_RATE, detail: speed })
+			setIsOpen(false)
+		},
+		[dispatch]
+	)
 
 	return (
 		<div className={cn("relative", className)}>
@@ -195,18 +191,16 @@ export const PlaybackSpeedSelector = function PlaybackSpeedSelector({
 				type="button"
 				onClick={() => setIsOpen(!isOpen)}
 				className="flex items-center gap-2 rounded-lg bg-black/50 px-3 py-2 text-white transition-colors hover:bg-black/70"
-				aria-label="Select playback speed"
-			>
+				aria-label="Select playback speed">
 				<svg viewBox="0 0 24 24" fill="currentColor" className="h-4 w-4">
-					<path d="M13,8A4,4 0 0,0 9,12A4,4 0 0,0 13,16A4,4 0 0,0 17,12A4,4 0 0,0 13,8M13,14A2,2 0 0,1 11,12A2,2 0 0,1 13,10A2,2 0 0,1 15,12A2,2 0 0,1 13,14M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M12,4A8,8 0 0,1 20,12A8,8 0 0,1 12,20A8,8 0 0,1 4,12A8,8 0 0,1 12,4Z"/>
+					<path d="M13,8A4,4 0 0,0 9,12A4,4 0 0,0 13,16A4,4 0 0,0 17,12A4,4 0 0,0 13,8M13,14A2,2 0 0,1 11,12A2,2 0 0,1 13,10A2,2 0 0,1 15,12A2,2 0 0,1 13,14M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M12,4A8,8 0 0,1 20,12A8,8 0 0,1 12,20A8,8 0 0,1 4,12A8,8 0 0,1 12,4Z" />
 				</svg>
 				<span className="text-sm">{playbackRate}x</span>
-				<svg 
-					viewBox="0 0 24 24" 
-					fill="currentColor" 
-					className={cn("h-4 w-4 transition-transform", isOpen && "rotate-180")}
-				>
-					<path d="M7 10l5 5 5-5z"/>
+				<svg
+					viewBox="0 0 24 24"
+					fill="currentColor"
+					className={cn("h-4 w-4 transition-transform", isOpen && "rotate-180")}>
+					<path d="M7 10l5 5 5-5z" />
 				</svg>
 			</button>
 
@@ -219,8 +213,7 @@ export const PlaybackSpeedSelector = function PlaybackSpeedSelector({
 							className={cn(
 								"w-full px-4 py-2 text-left text-sm text-white transition-colors hover:bg-white/10",
 								speed === playbackRate && "bg-primary/20 text-primary"
-							)}
-						>
+							)}>
 							{speed}x
 						</button>
 					))}
@@ -240,16 +233,20 @@ export const ChaptersPanel = function ChaptersPanel({
 	onChapterSelect: (chapter: Chapter) => void
 	className?: string
 }) {
-	const currentTime = useMediaSelector(state => state.currentTime)
+	const currentTime = useMediaSelector((state) => state.currentTime)
 
 	const currentChapter = React.useMemo(() => {
-		return chapters.find(chapter => 
-			currentTime >= chapter.startTime && currentTime < chapter.endTime
+		return chapters.find(
+			(chapter) => currentTime >= chapter.startTime && currentTime < chapter.endTime
 		)
 	}, [chapters, currentTime])
 
 	return (
-		<div className={cn("rounded-lg border border-white/20 bg-black/90 p-4 backdrop-blur-sm", className)}>
+		<div
+			className={cn(
+				"rounded-lg border border-white/20 bg-black/90 p-4 backdrop-blur-sm",
+				className
+			)}>
 			<h3 className="mb-3 font-semibold text-white">Chapters</h3>
 			<div className="max-h-64 space-y-2 overflow-y-auto">
 				{chapters.map((chapter) => (
@@ -260,8 +257,7 @@ export const ChaptersPanel = function ChaptersPanel({
 							"flex w-full items-center gap-3 rounded-lg p-3 text-left transition-colors",
 							"hover:bg-white/10",
 							chapter.id === currentChapter?.id && "border border-primary/30 bg-primary/20"
-						)}
-					>
+						)}>
 						{chapter.thumbnail && (
 							<img
 								src={chapter.thumbnail}
@@ -289,7 +285,7 @@ export const PictureInPictureButton = function PictureInPictureButton({
 	className?: string
 }) {
 	const dispatch = useMediaDispatch()
-	const isPictureInPicture = useMediaSelector(state => state.isPictureInPicture)
+	const isPictureInPicture = useMediaSelector((state) => state.isPictureInPicture)
 
 	const handleTogglePiP = React.useCallback(() => {
 		dispatch({
@@ -306,10 +302,9 @@ export const PictureInPictureButton = function PictureInPictureButton({
 				"transition-colors hover:bg-white/10",
 				className
 			)}
-			aria-label={isPictureInPicture ? "Exit Picture-in-Picture" : "Enter Picture-in-Picture"}
-		>
+			aria-label={isPictureInPicture ? "Exit Picture-in-Picture" : "Enter Picture-in-Picture"}>
 			<svg viewBox="0 0 24 24" fill="currentColor" className="h-5 w-5">
-				<path d="M19 7h-8v6h8V7zm2-4H3c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H3V5h18v14z"/>
+				<path d="M19 7h-8v6h8V7zm2-4H3c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H3V5h18v14z" />
 			</svg>
 		</button>
 	)