mirror of
https://github.com/nicetry247/offlineacademy.git
synced 2026-07-26 11:58:44 +00:00
initial commit
This commit is contained in:
Nice Try
Executable
+641
@@ -0,0 +1,641 @@
|
||||
'use client'
|
||||
|
||||
import * as React from 'react'
|
||||
import { useState, useEffect, useRef, useCallback } from 'react'
|
||||
import { Play, Pause, Volume2, VolumeX, Maximize, Minimize, SkipBack, SkipForward, Loader2, HelpCircle, PictureInPicture2, Check } from 'lucide-react'
|
||||
import { cn, formatTime } from '@/lib/utils'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { KeyboardShortcutsOverlay } from '@/components/KeyboardShortcutsOverlay'
|
||||
|
||||
interface VideoPlayerProps {
|
||||
src: string
|
||||
poster?: string
|
||||
subtitles?: string
|
||||
onTimeUpdate?: (time: number) => void
|
||||
onEnded?: () => void
|
||||
onProgressSave?: (time: number) => void
|
||||
initialTime?: number
|
||||
autoPlay?: boolean
|
||||
seekRequest?: { time: number; nonce: number } | null
|
||||
}
|
||||
|
||||
export function VideoPlayer({
|
||||
src,
|
||||
poster,
|
||||
subtitles,
|
||||
onTimeUpdate,
|
||||
onEnded,
|
||||
onProgressSave,
|
||||
initialTime = 0,
|
||||
autoPlay = true,
|
||||
seekRequest = null,
|
||||
}: VideoPlayerProps) {
|
||||
const videoRef = useRef<HTMLVideoElement>(null)
|
||||
const [isPlaying, setIsPlaying] = useState(false)
|
||||
const [currentTime, setCurrentTime] = useState(initialTime)
|
||||
const [duration, setDuration] = useState(0)
|
||||
const [volume, setVolume] = useState(1)
|
||||
const [isMuted, setIsMuted] = useState(false)
|
||||
const [isFullscreen, setIsFullscreen] = useState(false)
|
||||
const [showControls, setShowControls] = useState(true)
|
||||
const [buffered, setBuffered] = useState(0)
|
||||
const [playbackRate, setPlaybackRate] = useState(1)
|
||||
const playbackRates = [0.75, 1, 1.25, 1.5, 2]
|
||||
const [showShortcuts, setShowShortcuts] = useState(false)
|
||||
const [isPiPSupported, setIsPiPSupported] = useState(false)
|
||||
const [isPiPActive, setIsPiPActive] = useState(false)
|
||||
const [hoverProgress, setHoverProgress] = useState<{ time: number; x: number } | null>(null)
|
||||
const [showSettingsMenu, setShowSettingsMenu] = useState(false)
|
||||
const settingsMenuRef = useRef<HTMLDivElement>(null)
|
||||
const controlsTimeoutRef = useRef<ReturnType<typeof setTimeout>>()
|
||||
const progressSaveTimeoutRef = useRef<ReturnType<typeof setTimeout>>()
|
||||
const hasAutoPlayedRef = useRef(false)
|
||||
|
||||
const formatTimeDisplay = (seconds: number) => formatTime(seconds)
|
||||
|
||||
useEffect(() => {
|
||||
if (autoPlay && videoRef.current && !hasAutoPlayedRef.current) {
|
||||
hasAutoPlayedRef.current = true
|
||||
const playPromise = videoRef.current.play()
|
||||
if (playPromise !== undefined) {
|
||||
playPromise
|
||||
.then(() => {
|
||||
setIsPlaying(true)
|
||||
})
|
||||
.catch(() => {
|
||||
// Auto-play failed (browser policy), user must tap to play
|
||||
setIsPlaying(false)
|
||||
hasAutoPlayedRef.current = false // Allow retry on user interaction
|
||||
})
|
||||
}
|
||||
}
|
||||
}, [autoPlay])
|
||||
|
||||
useEffect(() => {
|
||||
const video = videoRef.current
|
||||
if (!video) return
|
||||
|
||||
const handleEnterPiP = () => setIsPiPActive(true)
|
||||
const handleLeavePiP = () => setIsPiPActive(false)
|
||||
|
||||
video.addEventListener('enterpictureinpicture', handleEnterPiP)
|
||||
video.addEventListener('leavepictureinpicture', handleLeavePiP)
|
||||
|
||||
return () => {
|
||||
video.removeEventListener('enterpictureinpicture', handleEnterPiP)
|
||||
video.removeEventListener('leavepictureinpicture', handleLeavePiP)
|
||||
}
|
||||
}, [])
|
||||
|
||||
useEffect(() => {
|
||||
if (typeof document !== 'undefined') {
|
||||
setIsPiPSupported(Boolean((document as Document & { pictureInPictureEnabled?: boolean }).pictureInPictureEnabled))
|
||||
}
|
||||
}, [])
|
||||
|
||||
useEffect(() => {
|
||||
const handleFullscreenChange = () => {
|
||||
setIsFullscreen(Boolean(document.fullscreenElement))
|
||||
}
|
||||
|
||||
document.addEventListener('fullscreenchange', handleFullscreenChange)
|
||||
return () => document.removeEventListener('fullscreenchange', handleFullscreenChange)
|
||||
}, [])
|
||||
|
||||
const handleMouseMove = useCallback(() => {
|
||||
setShowControls(true)
|
||||
if (controlsTimeoutRef.current) clearTimeout(controlsTimeoutRef.current)
|
||||
controlsTimeoutRef.current = setTimeout(() => setShowControls(false), 3000)
|
||||
}, [])
|
||||
|
||||
const togglePlay = useCallback(() => {
|
||||
if (!videoRef.current) return
|
||||
if (isPlaying) {
|
||||
videoRef.current.pause()
|
||||
} else {
|
||||
videoRef.current.play()
|
||||
}
|
||||
}, [isPlaying])
|
||||
|
||||
const togglePictureInPicture = useCallback(async () => {
|
||||
if (!videoRef.current) return
|
||||
|
||||
const video = videoRef.current
|
||||
const doc = document as Document & { pictureInPictureEnabled?: boolean; pictureInPictureElement?: Element | null }
|
||||
|
||||
if (!doc.pictureInPictureEnabled) {
|
||||
window.alert('Picture-in-Picture is not supported in this browser.')
|
||||
return
|
||||
}
|
||||
|
||||
try {
|
||||
if (doc.pictureInPictureElement === video) {
|
||||
await doc.exitPictureInPicture?.()
|
||||
} else {
|
||||
await video.requestPictureInPicture?.()
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Picture-in-Picture toggle failed:', error)
|
||||
}
|
||||
}, [])
|
||||
|
||||
const saveProgress = useCallback((time: number) => {
|
||||
if (progressSaveTimeoutRef.current) clearTimeout(progressSaveTimeoutRef.current)
|
||||
progressSaveTimeoutRef.current = setTimeout(() => {
|
||||
onProgressSave?.(time)
|
||||
}, 500)
|
||||
}, [onProgressSave])
|
||||
|
||||
const seekToPercent = (percent: number) => {
|
||||
if (videoRef.current && duration > 0) {
|
||||
videoRef.current.currentTime = (percent / 100) * duration
|
||||
setCurrentTime(videoRef.current.currentTime)
|
||||
saveProgress(videoRef.current.currentTime)
|
||||
}
|
||||
}
|
||||
|
||||
const handleProgressHover = useCallback((e: React.MouseEvent<HTMLDivElement>) => {
|
||||
if (duration > 0) {
|
||||
const rect = e.currentTarget.getBoundingClientRect()
|
||||
const percent = (e.clientX - rect.left) / rect.width
|
||||
const hoverTime = percent * duration
|
||||
setHoverProgress({ time: hoverTime, x: e.clientX - rect.left })
|
||||
}
|
||||
}, [duration])
|
||||
|
||||
const handleProgressLeave = useCallback(() => {
|
||||
setHoverProgress(null)
|
||||
}, [])
|
||||
|
||||
const handleProgressClick = useCallback((e: React.MouseEvent<HTMLDivElement>) => {
|
||||
if (videoRef.current && duration > 0) {
|
||||
const rect = e.currentTarget.getBoundingClientRect()
|
||||
const percent = (e.clientX - rect.left) / rect.width
|
||||
videoRef.current.currentTime = percent * duration
|
||||
setCurrentTime(videoRef.current.currentTime)
|
||||
saveProgress(videoRef.current.currentTime)
|
||||
}
|
||||
}, [duration, saveProgress])
|
||||
|
||||
useEffect(() => {
|
||||
const handleKeyDown = (e: KeyboardEvent) => {
|
||||
if (!videoRef.current) return
|
||||
const video = videoRef.current
|
||||
|
||||
if (e.target instanceof HTMLInputElement || e.target instanceof HTMLTextAreaElement) return
|
||||
|
||||
switch (e.key) {
|
||||
case '?':
|
||||
if (e.shiftKey) {
|
||||
e.preventDefault()
|
||||
setShowShortcuts(prev => !prev)
|
||||
}
|
||||
break
|
||||
case ' ':
|
||||
case 'k':
|
||||
e.preventDefault()
|
||||
togglePlay()
|
||||
break
|
||||
case 'j':
|
||||
case 'ArrowLeft':
|
||||
e.preventDefault()
|
||||
video.currentTime = Math.max(0, video.currentTime - 10)
|
||||
saveProgress(video.currentTime)
|
||||
break
|
||||
case 'l':
|
||||
case 'ArrowRight':
|
||||
e.preventDefault()
|
||||
video.currentTime = Math.min(video.duration, video.currentTime + 30)
|
||||
saveProgress(video.currentTime)
|
||||
break
|
||||
case 'ArrowUp':
|
||||
e.preventDefault()
|
||||
video.volume = Math.min(1, video.volume + 0.1)
|
||||
setVolume(video.volume)
|
||||
setIsMuted(false)
|
||||
break
|
||||
case 'ArrowDown':
|
||||
e.preventDefault()
|
||||
video.volume = Math.max(0, video.volume - 0.1)
|
||||
setVolume(video.volume)
|
||||
if (video.volume === 0) setIsMuted(true)
|
||||
break
|
||||
case 'm':
|
||||
if (videoRef.current) {
|
||||
videoRef.current.muted = !isMuted
|
||||
setIsMuted(!isMuted)
|
||||
}
|
||||
break
|
||||
case 'f':
|
||||
if (videoRef.current) {
|
||||
if (!isFullscreen) {
|
||||
videoRef.current.requestFullscreen()
|
||||
} else {
|
||||
document.exitFullscreen()
|
||||
}
|
||||
}
|
||||
break
|
||||
case 'p':
|
||||
case 'i':
|
||||
e.preventDefault()
|
||||
togglePictureInPicture()
|
||||
break
|
||||
case 'Escape':
|
||||
e.preventDefault()
|
||||
if (showShortcuts) {
|
||||
setShowShortcuts(false)
|
||||
break
|
||||
}
|
||||
if (document.fullscreenElement) {
|
||||
document.exitFullscreen()
|
||||
break
|
||||
}
|
||||
if (isPiPActive) {
|
||||
togglePictureInPicture()
|
||||
}
|
||||
break
|
||||
case ',':
|
||||
case '[':
|
||||
video.playbackRate = Math.max(0.25, video.playbackRate - 0.25)
|
||||
setPlaybackRate(video.playbackRate)
|
||||
break
|
||||
case '.':
|
||||
case ']':
|
||||
video.playbackRate = Math.min(2, video.playbackRate + 0.25)
|
||||
setPlaybackRate(video.playbackRate)
|
||||
break
|
||||
case '0':
|
||||
case '1':
|
||||
case '2':
|
||||
case '3':
|
||||
case '4':
|
||||
case '5':
|
||||
case '6':
|
||||
case '7':
|
||||
case '8':
|
||||
case '9':
|
||||
e.preventDefault()
|
||||
seekToPercent(parseInt(e.key) * 10)
|
||||
break
|
||||
}
|
||||
}
|
||||
|
||||
window.addEventListener('keydown', handleKeyDown)
|
||||
return () => window.removeEventListener('keydown', handleKeyDown)
|
||||
}, [togglePlay, isMuted, isFullscreen, saveProgress, duration, seekToPercent, togglePictureInPicture, showShortcuts, isPiPActive])
|
||||
|
||||
const handleLoadedMetadata = () => {
|
||||
if (videoRef.current) {
|
||||
setDuration(videoRef.current.duration)
|
||||
if (initialTime > 0) {
|
||||
videoRef.current.currentTime = initialTime
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const handleTimeUpdate = () => {
|
||||
if (videoRef.current) {
|
||||
const time = videoRef.current.currentTime
|
||||
setCurrentTime(time)
|
||||
onTimeUpdate?.(time)
|
||||
saveProgress(time)
|
||||
}
|
||||
}
|
||||
|
||||
const handleDurationChange = () => {
|
||||
if (videoRef.current) {
|
||||
setDuration(videoRef.current.duration)
|
||||
}
|
||||
}
|
||||
|
||||
const handleProgress = () => {
|
||||
if (videoRef.current && videoRef.current.buffered.length > 0) {
|
||||
setBuffered(videoRef.current.buffered.end(videoRef.current.buffered.length - 1))
|
||||
}
|
||||
}
|
||||
|
||||
const handleEnded = () => {
|
||||
setIsPlaying(false)
|
||||
onEnded?.()
|
||||
}
|
||||
|
||||
const handlePlay = () => setIsPlaying(true)
|
||||
|
||||
const handlePause = () => {
|
||||
setIsPlaying(false)
|
||||
if (videoRef.current) {
|
||||
saveProgress(videoRef.current.currentTime)
|
||||
}
|
||||
}
|
||||
|
||||
const handleVolumeChangeNative = () => {
|
||||
if (videoRef.current) {
|
||||
setVolume(videoRef.current.volume)
|
||||
setIsMuted(videoRef.current.muted)
|
||||
}
|
||||
}
|
||||
|
||||
const handleRateChange = () => {
|
||||
if (videoRef.current) {
|
||||
setPlaybackRate(videoRef.current.playbackRate)
|
||||
}
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
if (videoRef.current) {
|
||||
videoRef.current.playbackRate = playbackRate
|
||||
}
|
||||
}, [playbackRate])
|
||||
|
||||
useEffect(() => {
|
||||
if (videoRef.current && initialTime > 0 && videoRef.current.readyState >= 1) {
|
||||
videoRef.current.currentTime = initialTime
|
||||
// Allow auto-play attempt again when seeking to saved position
|
||||
hasAutoPlayedRef.current = false
|
||||
}
|
||||
}, [initialTime])
|
||||
|
||||
useEffect(() => {
|
||||
if (!videoRef.current || !seekRequest) return
|
||||
|
||||
const nextTime = Math.max(0, seekRequest.time)
|
||||
videoRef.current.currentTime = nextTime
|
||||
setCurrentTime(nextTime)
|
||||
saveProgress(nextTime)
|
||||
|
||||
videoRef.current.play().catch(() => {})
|
||||
}, [seekRequest?.nonce, saveProgress])
|
||||
|
||||
useEffect(() => {
|
||||
return () => {
|
||||
if (controlsTimeoutRef.current) clearTimeout(controlsTimeoutRef.current)
|
||||
if (progressSaveTimeoutRef.current) clearTimeout(progressSaveTimeoutRef.current)
|
||||
}
|
||||
}, [])
|
||||
|
||||
useEffect(() => {
|
||||
function handleClickOutside(e: MouseEvent) {
|
||||
if (settingsMenuRef.current && !settingsMenuRef.current.contains(e.target as Node)) {
|
||||
setShowSettingsMenu(false)
|
||||
}
|
||||
}
|
||||
if (showSettingsMenu) {
|
||||
document.addEventListener('mousedown', handleClickOutside)
|
||||
}
|
||||
return () => document.removeEventListener('mousedown', handleClickOutside)
|
||||
}, [showSettingsMenu])
|
||||
|
||||
return (
|
||||
<div
|
||||
className="video-player-container"
|
||||
onMouseMove={handleMouseMove}
|
||||
onMouseLeave={() => setShowControls(false)}
|
||||
>
|
||||
<div className="relative w-full h-full" style={{ position: 'relative' }}>
|
||||
<video
|
||||
ref={videoRef}
|
||||
src={src}
|
||||
poster={poster}
|
||||
preload="metadata"
|
||||
playsInline
|
||||
onLoadedMetadata={handleLoadedMetadata}
|
||||
onTimeUpdate={handleTimeUpdate}
|
||||
onDurationChange={handleDurationChange}
|
||||
onProgress={handleProgress}
|
||||
onEnded={handleEnded}
|
||||
onPlay={handlePlay}
|
||||
onPause={handlePause}
|
||||
onVolumeChange={handleVolumeChangeNative}
|
||||
onRateChange={handleRateChange}
|
||||
onClick={togglePlay}
|
||||
className="w-full h-full cursor-pointer"
|
||||
>
|
||||
{subtitles && (
|
||||
<track kind="subtitles" src={subtitles} srcLang="en" label="English" default />
|
||||
)}
|
||||
</video>
|
||||
</div>
|
||||
|
||||
{videoRef.current && videoRef.current.readyState < 2 && (
|
||||
<div className="absolute inset-0 flex items-center justify-center bg-black/50 z-10">
|
||||
<Loader2 className="h-8 w-8 text-primary animate-spin" />
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div
|
||||
className={cn(
|
||||
'absolute bottom-0 left-0 right-0 p-3 bg-gradient-to-t from-black/90 to-transparent transition-opacity duration-200',
|
||||
showControls || isPlaying ? 'opacity-100' : 'opacity-0 pointer-events-none'
|
||||
)}
|
||||
>
|
||||
<div className="flex items-center gap-3 mb-2 relative">
|
||||
<span className="text-xs text-white font-mono w-12 text-right">
|
||||
{formatTimeDisplay(currentTime)}
|
||||
</span>
|
||||
<div
|
||||
className="flex-1 h-1.5 bg-white/20 rounded-full cursor-pointer relative"
|
||||
onMouseMove={handleProgressHover}
|
||||
onMouseLeave={handleProgressLeave}
|
||||
onClick={handleProgressClick}
|
||||
>
|
||||
{buffered > 0 && duration > 0 && (
|
||||
<div
|
||||
className="absolute top-0 left-0 h-full bg-white/30 rounded-full"
|
||||
style={{ width: `${(buffered / duration) * 100}%` }}
|
||||
/>
|
||||
)}
|
||||
<div
|
||||
className="absolute top-0 left-0 h-full bg-primary rounded-full transition-none"
|
||||
style={{ width: `${duration > 0 ? (currentTime / duration) * 100 : 0}%` }}
|
||||
/>
|
||||
{hoverProgress && (
|
||||
<div
|
||||
className="absolute bottom-full left-0 mb-2 transform -translate-x-1/2 transition-opacity duration-100 opacity-100 pointer-events-none z-20"
|
||||
style={{ left: `${(hoverProgress.x / (duration > 0 ? 1 : 1)) * 100}%` }}
|
||||
>
|
||||
<div className="bg-black/90 text-white text-xs px-2 py-1 rounded whitespace-nowrap shadow-lg">
|
||||
{formatTimeDisplay(hoverProgress.time)}
|
||||
</div>
|
||||
<div className="w-0 h-0 border-4 border-t-black/90 border-r-transparent border-l-transparent border-b-transparent mt-1" />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<span className="text-xs text-white font-mono w-12">
|
||||
{formatTimeDisplay(duration)}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="text-white hover:bg-white/20"
|
||||
onClick={togglePlay}
|
||||
aria-label={isPlaying ? 'Pause' : 'Play'}
|
||||
>
|
||||
{isPlaying ? <Pause className="h-5 w-5" /> : <Play className="h-5 w-5" />}
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="text-white hover:bg-white/20"
|
||||
onClick={() => videoRef.current && (videoRef.current.currentTime = Math.max(0, videoRef.current.currentTime - 10))}
|
||||
aria-label="Rewind 10s"
|
||||
>
|
||||
<SkipBack className="h-5 w-5" />
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="text-white hover:bg-white/20"
|
||||
onClick={() => videoRef.current && (videoRef.current.currentTime = Math.min(duration, videoRef.current.currentTime + 30))}
|
||||
aria-label="Forward 30s"
|
||||
>
|
||||
<SkipForward className="h-5 w-5" />
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2 relative">
|
||||
<div className="flex items-center gap-2">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="text-white hover:bg-white/20"
|
||||
onClick={() => {
|
||||
if (videoRef.current) {
|
||||
videoRef.current.muted = !isMuted
|
||||
setIsMuted(!isMuted)
|
||||
}
|
||||
}}
|
||||
aria-label={isMuted ? 'Unmute' : 'Mute'}
|
||||
>
|
||||
{isMuted || volume === 0 ? <VolumeX className="h-5 w-5" /> : <Volume2 className="h-5 w-5" />}
|
||||
</Button>
|
||||
<input
|
||||
type="range"
|
||||
min="0"
|
||||
max="1"
|
||||
step="0.1"
|
||||
value={isMuted ? 0 : volume}
|
||||
onChange={(e) => {
|
||||
const vol = parseFloat(e.target.value)
|
||||
if (videoRef.current) {
|
||||
videoRef.current.volume = vol
|
||||
setVolume(vol)
|
||||
setIsMuted(vol === 0)
|
||||
}
|
||||
}}
|
||||
className="w-20 h-1 bg-white/20 rounded-lg appearance-none accent-primary cursor-pointer"
|
||||
aria-label="Volume"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Fullscreen - FIRST */}
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="text-white hover:bg-white/20"
|
||||
onClick={async () => {
|
||||
if (videoRef.current) {
|
||||
if (!isFullscreen) {
|
||||
try {
|
||||
await videoRef.current.requestFullscreen({ navigationUI: 'hide' })
|
||||
} catch {
|
||||
videoRef.current.requestFullscreen()
|
||||
}
|
||||
} else {
|
||||
document.exitFullscreen()
|
||||
}
|
||||
}
|
||||
}}
|
||||
aria-label={isFullscreen ? 'Exit fullscreen' : 'Fullscreen'}
|
||||
>
|
||||
{isFullscreen ? <Minimize className="h-5 w-5" /> : <Maximize className="h-5 w-5" />}
|
||||
</Button>
|
||||
|
||||
{/* Picture-in-Picture */}
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className={cn(
|
||||
'text-white hover:bg-white/20',
|
||||
isPiPActive && 'bg-primary text-primary-foreground hover:bg-primary/90'
|
||||
)}
|
||||
onClick={togglePictureInPicture}
|
||||
disabled={!isPiPSupported}
|
||||
aria-label={isPiPActive ? 'Exit Picture-in-Picture' : 'Picture-in-Picture'}
|
||||
title={isPiPSupported ? 'Toggle Picture-in-Picture (I)' : 'Picture-in-Picture not supported'}
|
||||
>
|
||||
<PictureInPicture2 className="h-5 w-5" />
|
||||
</Button>
|
||||
|
||||
{/* Settings Menu (3-dot) - Speed + Shortcuts */}
|
||||
<div className="relative" ref={settingsMenuRef}>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="text-white hover:bg-white/20"
|
||||
onClick={() => setShowSettingsMenu(!showSettingsMenu)}
|
||||
aria-label="Settings"
|
||||
aria-expanded={showSettingsMenu}
|
||||
>
|
||||
<svg className="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
|
||||
<circle cx="12" cy="12" r="1"></circle>
|
||||
<circle cx="19" cy="12" r="1"></circle>
|
||||
<circle cx="5" cy="12" r="1"></circle>
|
||||
</svg>
|
||||
</Button>
|
||||
|
||||
{showSettingsMenu && (
|
||||
<div
|
||||
className="absolute bottom-full right-0 mb-2 w-40 glass-card-elevated rounded-lg p-2 shadow-xl border border-white/10 animate-in zoom-in-95 z-20"
|
||||
role="menu"
|
||||
>
|
||||
<div className="px-3 py-2 text-xs font-semibold text-white/60 uppercase tracking-wider">Speed</div>
|
||||
{playbackRates.map((rate) => (
|
||||
<button
|
||||
key={rate}
|
||||
onClick={() => {
|
||||
if (videoRef.current) {
|
||||
videoRef.current.playbackRate = rate
|
||||
}
|
||||
setPlaybackRate(rate)
|
||||
setShowSettingsMenu(false)
|
||||
}}
|
||||
className={`w-full flex items-center justify-between px-3 py-2 text-sm text-white hover:bg-white/10 rounded ${playbackRate === rate ? 'bg-primary/20 text-primary' : ''}`}
|
||||
role="menuitemradio"
|
||||
aria-checked={playbackRate === rate}
|
||||
>
|
||||
<span>{rate}x</span>
|
||||
{playbackRate === rate && <Check className="h-4 w-4" />}
|
||||
</button>
|
||||
))}
|
||||
<hr className="border-white/10 my-1" />
|
||||
<button
|
||||
onClick={() => setShowShortcuts(true)}
|
||||
className="w-full flex items-center justify-between px-3 py-2 text-sm text-white hover:bg-white/10 rounded"
|
||||
role="menuitem"
|
||||
>
|
||||
<span>Keyboard Shortcuts</span>
|
||||
<HelpCircle className="h-4 w-4" />
|
||||
</button>
|
||||
<hr className="border-white/10 my-1" />
|
||||
<button
|
||||
onClick={() => setShowSettingsMenu(false)}
|
||||
className="w-full flex items-center justify-center px-3 py-2 text-sm text-white/70 hover:bg-white/10 rounded"
|
||||
role="menuitem"
|
||||
>
|
||||
Close
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<KeyboardShortcutsOverlay isOpen={showShortcuts} onClose={() => setShowShortcuts(false)} />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user