@therealtinhtute/baroiplayer 1.0.0

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

@@ -0,0 +1,316 @@
+"use client"
+
+import React from "react"
+import { useMediaSelector, useMediaDispatch, MediaActionTypes } from "../../context/media-context"
+import { cn } from "../../lib/utils"
+import { formatTime } from "../../lib/format-time"
+
+// Types for advanced features
+export interface Chapter {
+	id: string
+	title: string
+	startTime: number
+	endTime: number
+	thumbnail?: string
+}
+
+export interface QualityLevel {
+	id: string
+	label: string
+	width: number
+	height: number
+	bitrate?: number
+}
+
+export interface Subtitle {
+	id: string
+	label: string
+	language: string
+	src: string
+	default?: boolean
+}
+
+// Quality selector component
+export const QualitySelector = function QualitySelector({
+	qualities,
+	currentQuality,
+	onQualityChange,
+	className
+}: {
+	qualities: QualityLevel[]
+	currentQuality: string
+	onQualityChange: (qualityId: string) => void
+	className?: string
+}) {
+	const [isOpen, setIsOpen] = React.useState(false)
+
+	const currentQualityLabel = React.useMemo(() => {
+		return qualities.find(q => q.id === currentQuality)?.label || "Auto"
+	}, [qualities, currentQuality])
+
+	return (
+		<div className={cn("relative", className)}>
+			<button
+				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"
+			>
+				<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"/>
+				</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>
+			</button>
+
+			{isOpen && (
+				<div className="absolute right-0 bottom-full mb-2 min-w-32 rounded-lg border border-white/20 bg-black/90 py-2 backdrop-blur-sm">
+					{qualities.map((quality) => (
+						<button
+							key={quality.id}
+							onClick={() => {
+								onQualityChange(quality.id)
+								setIsOpen(false)
+							}}
+							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">
+									({Math.round(quality.bitrate / 1000)}k)
+								</span>
+							)}
+						</button>
+					))}
+				</div>
+			)}
+		</div>
+	)
+}
+
+// Subtitle selector component
+export const SubtitleSelector = function SubtitleSelector({
+	subtitles,
+	currentSubtitle,
+	onSubtitleChange,
+	className
+}: {
+	subtitles: Subtitle[]
+	currentSubtitle: string | null
+	onSubtitleChange: (subtitleId: string | null) => void
+	className?: string
+}) {
+	const [isOpen, setIsOpen] = React.useState(false)
+
+	const currentSubtitleLabel = React.useMemo(() => {
+		if (!currentSubtitle) return "Off"
+		return subtitles.find(s => s.id === currentSubtitle)?.label || "Off"
+	}, [subtitles, currentSubtitle])
+
+	return (
+		<div className={cn("relative", className)}>
+			<button
+				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"
+			>
+				<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"/>
+				</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>
+			</button>
+
+			{isOpen && (
+				<div className="absolute right-0 bottom-full mb-2 min-w-32 rounded-lg border border-white/20 bg-black/90 py-2 backdrop-blur-sm">
+					<button
+						onClick={() => {
+							onSubtitleChange(null)
+							setIsOpen(false)
+						}}
+						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) => (
+						<button
+							key={subtitle.id}
+							onClick={() => {
+								onSubtitleChange(subtitle.id)
+								setIsOpen(false)
+							}}
+							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>
+					))}
+				</div>
+			)}
+		</div>
+	)
+}
+
+// Playback speed selector
+export const PlaybackSpeedSelector = function PlaybackSpeedSelector({
+	className
+}: {
+	className?: string
+}) {
+	const dispatch = useMediaDispatch()
+	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])
+
+	return (
+		<div className={cn("relative", className)}>
+			<button
+				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"
+			>
+				<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"/>
+				</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>
+			</button>
+
+			{isOpen && (
+				<div className="absolute right-0 bottom-full mb-2 min-w-20 rounded-lg border border-white/20 bg-black/90 py-2 backdrop-blur-sm">
+					{speeds.map((speed) => (
+						<button
+							key={speed}
+							onClick={() => handleSpeedChange(speed)}
+							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>
+					))}
+				</div>
+			)}
+		</div>
+	)
+}
+
+// Chapters component
+export const ChaptersPanel = function ChaptersPanel({
+	chapters,
+	onChapterSelect,
+	className
+}: {
+	chapters: Chapter[]
+	onChapterSelect: (chapter: Chapter) => void
+	className?: string
+}) {
+	const currentTime = useMediaSelector(state => state.currentTime)
+
+	const currentChapter = React.useMemo(() => {
+		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)}>
+			<h3 className="mb-3 font-semibold text-white">Chapters</h3>
+			<div className="max-h-64 space-y-2 overflow-y-auto">
+				{chapters.map((chapter) => (
+					<button
+						key={chapter.id}
+						onClick={() => onChapterSelect(chapter)}
+						className={cn(
+							"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}
+								alt={chapter.title}
+								className="h-9 w-16 rounded object-cover"
+							/>
+						)}
+						<div className="min-w-0 flex-1">
+							<div className="truncate font-medium text-white">{chapter.title}</div>
+							<div className="text-sm text-white/60">
+								{formatTime(chapter.startTime)} - {formatTime(chapter.endTime)}
+							</div>
+						</div>
+					</button>
+				))}
+			</div>
+		</div>
+	)
+}
+
+// Picture-in-Picture button
+export const PictureInPictureButton = function PictureInPictureButton({
+	className
+}: {
+	className?: string
+}) {
+	const dispatch = useMediaDispatch()
+	const isPictureInPicture = useMediaSelector(state => state.isPictureInPicture)
+
+	const handleTogglePiP = React.useCallback(() => {
+		dispatch({
+			type: isPictureInPicture ? MediaActionTypes.EXIT_PIP : MediaActionTypes.ENTER_PIP
+		})
+	}, [dispatch, isPictureInPicture])
+
+	return (
+		<button
+			type="button"
+			onClick={handleTogglePiP}
+			className={cn(
+				"flex h-10 w-10 items-center justify-center rounded-full text-white",
+				"transition-colors hover:bg-white/10",
+				className
+			)}
+			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"/>
+			</svg>
+		</button>
+	)
+}