analytica-frontend-lib 1.1.12 → 1.1.13

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/dist/VideoPlayer/index.js +61 -30
  2. package/dist/VideoPlayer/index.js.map +1 -1
  3. package/dist/VideoPlayer/index.mjs +61 -30
  4. package/dist/VideoPlayer/index.mjs.map +1 -1
  5. package/dist/index.js +61 -30
  6. package/dist/index.js.map +1 -1
  7. package/dist/index.mjs +61 -30
  8. package/dist/index.mjs.map +1 -1
  9. package/package.json +1 -1
package/dist/VideoPlayer/index.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/components/VideoPlayer/VideoPlayer.tsx","../../src/utils/utils.ts","../../src/components/IconButton/IconButton.tsx","../../src/components/Text/Text.tsx"],"sourcesContent":["import {\n useRef,\n useState,\n useEffect,\n useCallback,\n MouseEvent,\n KeyboardEvent,\n} from 'react';\nimport {\n Play,\n Pause,\n SpeakerHigh,\n SpeakerSlash,\n ArrowsOutSimple,\n ArrowsInSimple,\n ClosedCaptioning,\n DotsThreeVertical,\n} from 'phosphor-react';\nimport { cn } from '../../utils/utils';\nimport IconButton from '../IconButton/IconButton';\nimport Text from '../Text/Text';\n\n// Constants for timeout durations\nconst CONTROLS_HIDE_TIMEOUT = 3000; // 3 seconds for normal control hiding\nconst LEAVE_HIDE_TIMEOUT = 1000; // 1 second when mouse leaves the video area\n\n/**\n * VideoPlayer component props interface\n */\ninterface VideoPlayerProps {\n /** Video source URL */\n src: string;\n /** Video poster/thumbnail URL */\n poster?: string;\n /** Subtitles URL */\n subtitles?: string;\n /** Video title */\n title?: string;\n /** Video subtitle/description */\n subtitle?: string;\n /** Initial playback time in seconds */\n initialTime?: number;\n /** Callback fired when video time updates (seconds) */\n onTimeUpdate?: (seconds: number) => void;\n /** Callback fired with progress percentage (0-100) */\n onProgress?: (progress: number) => void;\n /** Callback fired when video completes (>95% watched) */\n onVideoComplete?: () => void;\n /** Additional CSS classes */\n className?: string;\n /** Auto-save progress to localStorage */\n autoSave?: boolean;\n /** localStorage key for saving progress */\n storageKey?: string;\n}\n\n/**\n * Format seconds to MM:SS display format\n * @param seconds - Time in seconds\n * @returns Formatted time string\n */\nconst formatTime = (seconds: number): string => {\n if (!seconds || isNaN(seconds)) return '0:00';\n const mins = Math.floor(seconds / 60);\n const secs = Math.floor(seconds % 60);\n return `${mins}:${secs.toString().padStart(2, '0')}`;\n};\n\n/**\n * Progress bar component props\n */\ninterface ProgressBarProps {\n currentTime: number;\n duration: number;\n progressPercentage: number;\n onSeek: (time: number) => void;\n}\n\n/**\n * Progress bar subcomponent\n */\nconst ProgressBar = ({\n currentTime,\n duration,\n progressPercentage,\n onSeek,\n}: ProgressBarProps) => (\n <div className=\"px-4 pb-2\">\n <input\n type=\"range\"\n min={0}\n max={duration || 100}\n value={currentTime}\n onChange={(e) => onSeek(parseFloat(e.target.value))}\n className=\"w-full h-1 bg-neutral-600 rounded-full appearance-none cursor-pointer slider:bg-primary-600 focus:outline-none focus:ring-2 focus:ring-primary-500\"\n aria-label=\"Video progress\"\n style={{\n background: `linear-gradient(to right, var(--color-primary-700) ${progressPercentage}%, var(--color-secondary-300) ${progressPercentage}%)`,\n }}\n />\n </div>\n);\n\n/**\n * Volume controls component props\n */\ninterface VolumeControlsProps {\n volume: number;\n isMuted: boolean;\n onVolumeChange: (volume: number) => void;\n onToggleMute: () => void;\n}\n\n/**\n * Volume controls subcomponent\n */\nconst VolumeControls = ({\n volume,\n isMuted,\n onVolumeChange,\n onToggleMute,\n}: VolumeControlsProps) => (\n <div className=\"flex items-center gap-2\">\n <IconButton\n icon={isMuted ? <SpeakerSlash size={24} /> : <SpeakerHigh size={24} />}\n onClick={onToggleMute}\n aria-label={isMuted ? 'Unmute' : 'Mute'}\n className=\"!bg-transparent !text-white hover:!bg-white/20\"\n />\n\n <input\n type=\"range\"\n min={0}\n max={100}\n value={Math.round(volume * 100)}\n onChange={(e) => onVolumeChange(parseInt(e.target.value))}\n className=\"w-20 h-1 bg-neutral-600 rounded-full appearance-none cursor-pointer focus:outline-none focus:ring-2 focus:ring-primary-500\"\n aria-label=\"Volume control\"\n style={{\n background: `linear-gradient(to right, var(--color-primary-700) ${volume * 100}%, var(--color-secondary-300) ${volume * 100}%)`,\n }}\n />\n </div>\n);\n\n/**\n * Speed menu component props\n */\ninterface SpeedMenuProps {\n showSpeedMenu: boolean;\n playbackRate: number;\n onToggleMenu: () => void;\n onSpeedChange: (speed: number) => void;\n}\n\n/**\n * Speed menu subcomponent\n */\nconst SpeedMenu = ({\n showSpeedMenu,\n playbackRate,\n onToggleMenu,\n onSpeedChange,\n}: SpeedMenuProps) => (\n <div className=\"relative\">\n <IconButton\n icon={<DotsThreeVertical size={24} />}\n onClick={onToggleMenu}\n aria-label=\"Playback speed\"\n className=\"!bg-transparent !text-white hover:!bg-white/20\"\n />\n {showSpeedMenu && (\n <div className=\"absolute bottom-12 right-0 bg-black/90 rounded-lg p-2 min-w-20\">\n {[0.5, 0.75, 1, 1.25, 1.5, 2].map((speed) => (\n <button\n key={speed}\n onClick={() => onSpeedChange(speed)}\n className={`block w-full text-left px-3 py-1 text-sm rounded hover:bg-white/20 transition-colors ${\n playbackRate === speed ? 'text-primary-400' : 'text-white'\n }`}\n >\n {speed}x\n </button>\n ))}\n </div>\n )}\n </div>\n);\n\n/**\n * Video player component with controls and progress tracking\n * Integrates with backend lesson progress system\n *\n * @param props - VideoPlayer component props\n * @returns Video player element with controls\n */\nconst VideoPlayer = ({\n src,\n poster,\n subtitles,\n title,\n subtitle: subtitleText,\n initialTime = 0,\n onTimeUpdate,\n onProgress,\n onVideoComplete,\n className,\n autoSave = true,\n storageKey = 'video-progress',\n}: VideoPlayerProps) => {\n const videoRef = useRef<HTMLVideoElement>(null);\n const [isPlaying, setIsPlaying] = useState(false);\n const [currentTime, setCurrentTime] = useState(0);\n const [duration, setDuration] = useState(0);\n const [isMuted, setIsMuted] = useState(false);\n const [volume, setVolume] = useState(1);\n const [isFullscreen, setIsFullscreen] = useState(false);\n const [showControls, setShowControls] = useState(true);\n const [hasCompleted, setHasCompleted] = useState(false);\n const [showCaptions, setShowCaptions] = useState(false);\n\n // Reset completion flag when changing videos\n useEffect(() => {\n setHasCompleted(false);\n }, [src]);\n const [playbackRate, setPlaybackRate] = useState(1);\n const [showSpeedMenu, setShowSpeedMenu] = useState(false);\n const lastSaveTimeRef = useRef(0);\n const trackRef = useRef<HTMLTrackElement>(null);\n const controlsTimeoutRef = useRef<number | null>(null);\n const lastMousePositionRef = useRef({ x: 0, y: 0 });\n const mouseMoveTimeoutRef = useRef<number | null>(null);\n\n /**\n * Check if user is currently interacting with controls\n */\n const isUserInteracting = useCallback(() => {\n // Check if speed menu is open\n if (showSpeedMenu) return true;\n\n // Check if any control element has focus\n const activeElement = document.activeElement;\n const videoContainer = videoRef.current?.parentElement;\n\n if (activeElement && videoContainer?.contains(activeElement)) {\n // Check if focused element is a control (button, input, etc.)\n const isControl = activeElement.matches('button, input, [tabindex]');\n if (isControl) return true;\n }\n\n return false;\n }, [showSpeedMenu]);\n\n /**\n * Clear controls timeout\n */\n const clearControlsTimeout = useCallback(() => {\n if (controlsTimeoutRef.current) {\n clearTimeout(controlsTimeoutRef.current);\n controlsTimeoutRef.current = null;\n }\n }, []);\n\n /**\n * Clear mouse move timeout\n */\n const clearMouseMoveTimeout = useCallback(() => {\n if (mouseMoveTimeoutRef.current) {\n clearTimeout(mouseMoveTimeoutRef.current);\n mouseMoveTimeoutRef.current = null;\n }\n }, []);\n\n /**\n * Show controls and set auto-hide timer\n */\n const showControlsWithTimer = useCallback(() => {\n setShowControls(true);\n clearControlsTimeout();\n\n // Only hide controls if video is playing\n if (isPlaying) {\n // Use consistent timeout of 3 seconds\n controlsTimeoutRef.current = window.setTimeout(() => {\n setShowControls(false);\n }, CONTROLS_HIDE_TIMEOUT);\n }\n }, [isPlaying, clearControlsTimeout]);\n\n /**\n * Handle mouse move with position detection\n */\n const handleMouseMove = useCallback(\n (event: MouseEvent) => {\n const currentX = event.clientX;\n const currentY = event.clientY;\n const lastPos = lastMousePositionRef.current;\n\n // Check if mouse actually moved (minimum 5px threshold)\n const hasMoved =\n Math.abs(currentX - lastPos.x) > 5 ||\n Math.abs(currentY - lastPos.y) > 5;\n\n if (hasMoved) {\n lastMousePositionRef.current = { x: currentX, y: currentY };\n showControlsWithTimer();\n }\n },\n [showControlsWithTimer]\n );\n\n /**\n * Handle mouse leave to hide controls faster\n */\n const handleMouseLeave = useCallback(() => {\n clearControlsTimeout();\n\n // Only hide controls if video is playing and user is not interacting\n if (isPlaying && !isUserInteracting()) {\n // Use shorter timeout when mouse leaves\n controlsTimeoutRef.current = window.setTimeout(() => {\n setShowControls(false);\n }, LEAVE_HIDE_TIMEOUT);\n }\n }, [isPlaying, clearControlsTimeout, isUserInteracting]);\n\n /**\n * Initialize video element properties\n */\n useEffect(() => {\n // Set initial volume\n if (videoRef.current) {\n videoRef.current.volume = volume;\n videoRef.current.muted = isMuted;\n }\n }, [volume, isMuted]);\n\n /**\n * Synchronize isPlaying state with media events\n */\n useEffect(() => {\n const video = videoRef.current;\n if (!video) return;\n\n const onPlay = () => setIsPlaying(true);\n const onPause = () => setIsPlaying(false);\n const onEnded = () => setIsPlaying(false);\n\n video.addEventListener('play', onPlay);\n video.addEventListener('pause', onPause);\n video.addEventListener('ended', onEnded);\n\n return () => {\n video.removeEventListener('play', onPlay);\n video.removeEventListener('pause', onPause);\n video.removeEventListener('ended', onEnded);\n };\n }, []);\n\n /**\n * Handle controls auto-hide when play state changes\n */\n useEffect(() => {\n if (isPlaying) {\n // Start timer when video starts playing\n showControlsWithTimer();\n } else {\n // Keep controls visible when paused\n clearControlsTimeout();\n setShowControls(true);\n }\n }, [isPlaying, showControlsWithTimer, clearControlsTimeout]);\n\n /**\n * Handle fullscreen state changes from browser events\n */\n useEffect(() => {\n const handleFullscreenChange = () => {\n const isCurrentlyFullscreen = !!document.fullscreenElement;\n setIsFullscreen(isCurrentlyFullscreen);\n\n // Show controls when entering fullscreen, hide after timeout if playing\n if (isCurrentlyFullscreen) {\n showControlsWithTimer();\n }\n };\n\n document.addEventListener('fullscreenchange', handleFullscreenChange);\n\n return () => {\n document.removeEventListener('fullscreenchange', handleFullscreenChange);\n };\n }, [showControlsWithTimer]);\n\n /**\n * Get initial time from props or localStorage\n */\n const getInitialTime = useCallback((): number | undefined => {\n if (!autoSave || !storageKey) {\n return Number.isFinite(initialTime) && initialTime >= 0\n ? initialTime\n : undefined;\n }\n\n const saved = Number(localStorage.getItem(`${storageKey}-${src}`) || NaN);\n const hasValidInitial = Number.isFinite(initialTime) && initialTime >= 0;\n const hasValidSaved = Number.isFinite(saved) && saved >= 0;\n\n if (hasValidInitial) return initialTime;\n if (hasValidSaved) return saved;\n return undefined;\n }, [autoSave, storageKey, src, initialTime]);\n\n /**\n * Load saved progress from localStorage\n */\n useEffect(() => {\n const start = getInitialTime();\n if (start !== undefined && videoRef.current) {\n videoRef.current.currentTime = start;\n setCurrentTime(start);\n }\n }, [getInitialTime]);\n\n /**\n * Save progress to localStorage periodically\n */\n const saveProgress = useCallback(\n (time: number) => {\n if (!autoSave || !storageKey) return;\n\n const now = Date.now();\n if (now - lastSaveTimeRef.current > 5000) {\n localStorage.setItem(`${storageKey}-${src}`, time.toString());\n lastSaveTimeRef.current = now;\n }\n },\n [autoSave, storageKey, src]\n );\n\n /**\n * Handle play/pause toggle\n */\n const togglePlayPause = useCallback(async () => {\n const video = videoRef.current;\n if (!video) return;\n\n if (!video.paused) {\n video.pause();\n return;\n }\n\n try {\n await video.play();\n } catch {\n // Playback prevented (e.g., autoplay policy); keep state unchanged.\n }\n }, []);\n\n /**\n * Handle volume change\n */\n const handleVolumeChange = useCallback(\n (newVolume: number) => {\n const video = videoRef.current;\n if (!video) return;\n\n const volumeValue = newVolume / 100; // Convert 0-100 to 0-1\n video.volume = volumeValue;\n setVolume(volumeValue);\n\n // Auto mute/unmute based on volume\n const shouldMute = volumeValue === 0;\n const shouldUnmute = volumeValue > 0 && isMuted;\n\n if (shouldMute) {\n video.muted = true;\n setIsMuted(true);\n } else if (shouldUnmute) {\n video.muted = false;\n setIsMuted(false);\n }\n },\n [isMuted]\n );\n\n /**\n * Handle mute toggle\n */\n const toggleMute = useCallback(() => {\n const video = videoRef.current;\n if (!video) return;\n\n if (isMuted) {\n // Unmute: restore volume or set to 50% if it was 0\n const restoreVolume = volume > 0 ? volume : 0.5;\n video.volume = restoreVolume;\n video.muted = false;\n setVolume(restoreVolume);\n setIsMuted(false);\n } else {\n // Mute: set volume to 0 and mute\n video.muted = true;\n setIsMuted(true);\n }\n }, [isMuted, volume]);\n\n /**\n * Handle video seek\n */\n const handleSeek = useCallback((newTime: number) => {\n const video = videoRef.current;\n if (video) {\n video.currentTime = newTime;\n }\n }, []);\n\n /**\n * Handle fullscreen toggle\n */\n const toggleFullscreen = useCallback(() => {\n const container = videoRef.current?.parentElement;\n if (!container) return;\n\n if (!isFullscreen && container.requestFullscreen) {\n container.requestFullscreen();\n } else if (isFullscreen && document.exitFullscreen) {\n document.exitFullscreen();\n }\n }, [isFullscreen]);\n\n /**\n * Handle playback speed change\n */\n const handleSpeedChange = useCallback((speed: number) => {\n if (videoRef.current) {\n videoRef.current.playbackRate = speed;\n setPlaybackRate(speed);\n setShowSpeedMenu(false);\n }\n }, []);\n\n /**\n * Toggle speed menu visibility\n */\n const toggleSpeedMenu = useCallback(() => {\n setShowSpeedMenu(!showSpeedMenu);\n }, [showSpeedMenu]);\n\n /**\n * Toggle captions visibility\n */\n const toggleCaptions = useCallback(() => {\n if (!trackRef.current?.track || !subtitles) return;\n\n const newShowCaptions = !showCaptions;\n setShowCaptions(newShowCaptions);\n\n // Control track mode programmatically - only show if subtitles are available\n trackRef.current.track.mode =\n newShowCaptions && subtitles ? 'showing' : 'hidden';\n }, [showCaptions, subtitles]);\n\n /**\n * Check video completion and fire callback\n */\n const checkVideoCompletion = useCallback(\n (progressPercent: number) => {\n if (progressPercent >= 95 && !hasCompleted) {\n setHasCompleted(true);\n onVideoComplete?.();\n }\n },\n [hasCompleted, onVideoComplete]\n );\n\n /**\n * Handle time update\n */\n const handleTimeUpdate = useCallback(() => {\n const video = videoRef.current;\n if (!video) return;\n\n const current = video.currentTime;\n setCurrentTime(current);\n\n // Save progress periodically\n saveProgress(current);\n\n // Fire callbacks\n onTimeUpdate?.(current);\n\n if (duration > 0) {\n const progressPercent = (current / duration) * 100;\n onProgress?.(progressPercent);\n checkVideoCompletion(progressPercent);\n }\n }, [duration, saveProgress, onTimeUpdate, onProgress, checkVideoCompletion]);\n\n /**\n * Handle loaded metadata\n */\n const handleLoadedMetadata = useCallback(() => {\n if (videoRef.current) {\n setDuration(videoRef.current.duration);\n }\n }, []);\n\n /**\n * Initialize track mode when track is available\n */\n useEffect(() => {\n if (trackRef.current?.track) {\n // Set initial mode based on showCaptions state and subtitle availability\n trackRef.current.track.mode =\n showCaptions && subtitles ? 'showing' : 'hidden';\n }\n }, [subtitles, showCaptions]);\n\n /**\n * Handle visibility change and blur to pause video when losing focus\n */\n useEffect(() => {\n const handleVisibilityChange = () => {\n if (document.hidden && isPlaying && videoRef.current) {\n videoRef.current.pause();\n setIsPlaying(false);\n }\n };\n\n const handleBlur = () => {\n if (isPlaying && videoRef.current) {\n videoRef.current.pause();\n setIsPlaying(false);\n }\n };\n\n document.addEventListener('visibilitychange', handleVisibilityChange);\n window.addEventListener('blur', handleBlur);\n\n return () => {\n document.removeEventListener('visibilitychange', handleVisibilityChange);\n window.removeEventListener('blur', handleBlur);\n // Clean up timers on unmount\n clearControlsTimeout();\n clearMouseMoveTimeout();\n };\n }, [isPlaying, clearControlsTimeout, clearMouseMoveTimeout]);\n\n const progressPercentage = duration > 0 ? (currentTime / duration) * 100 : 0;\n\n /**\n * Calculate top controls opacity based on state\n */\n const getTopControlsOpacity = useCallback(() => {\n if (isFullscreen) {\n return showControls ? 'opacity-100' : 'opacity-0';\n }\n return !isPlaying || showControls\n ? 'opacity-100'\n : 'opacity-0 group-hover:opacity-100';\n }, [isFullscreen, showControls, isPlaying]);\n\n /**\n * Calculate bottom controls opacity based on state\n */\n const getBottomControlsOpacity = useCallback(() => {\n if (isFullscreen) {\n return showControls ? 'opacity-100' : 'opacity-0';\n }\n return !isPlaying || showControls\n ? 'opacity-100'\n : 'opacity-0 group-hover:opacity-100';\n }, [isFullscreen, showControls, isPlaying]);\n\n /**\n * Handle video element keyboard events\n */\n const handleVideoKeyDown = useCallback(\n (e: KeyboardEvent) => {\n if (e.key) {\n // Prevent bubbling to parent handlers to avoid double toggles\n e.stopPropagation();\n showControlsWithTimer();\n }\n\n switch (e.key) {\n case ' ':\n case 'Enter':\n e.preventDefault();\n togglePlayPause();\n break;\n case 'ArrowLeft':\n e.preventDefault();\n if (videoRef.current) {\n videoRef.current.currentTime -= 10;\n }\n break;\n case 'ArrowRight':\n e.preventDefault();\n if (videoRef.current) {\n videoRef.current.currentTime += 10;\n }\n break;\n case 'ArrowUp':\n e.preventDefault();\n handleVolumeChange(Math.min(100, volume * 100 + 10));\n break;\n case 'ArrowDown':\n e.preventDefault();\n handleVolumeChange(Math.max(0, volume * 100 - 10));\n break;\n case 'm':\n case 'M':\n e.preventDefault();\n toggleMute();\n break;\n case 'f':\n case 'F':\n e.preventDefault();\n toggleFullscreen();\n break;\n default:\n break;\n }\n },\n [\n showControlsWithTimer,\n togglePlayPause,\n handleVolumeChange,\n volume,\n toggleMute,\n toggleFullscreen,\n ]\n );\n\n return (\n <div className={cn('flex flex-col', className)}>\n {/* Integrated Header */}\n {(title || subtitleText) && (\n <div className=\"bg-subject-1 rounded-t-xl px-8 py-4 flex items-end justify-between min-h-20\">\n <div className=\"flex flex-col gap-1\">\n {title && (\n <Text\n as=\"h2\"\n size=\"lg\"\n weight=\"bold\"\n color=\"text-text-900\"\n className=\"leading-5 tracking-wide\"\n >\n {title}\n </Text>\n )}\n {subtitleText && (\n <Text\n as=\"p\"\n size=\"sm\"\n weight=\"normal\"\n color=\"text-text-600\"\n className=\"leading-5\"\n >\n {subtitleText}\n </Text>\n )}\n </div>\n </div>\n )}\n\n {/* Video Container */}\n <section\n className={cn(\n 'relative w-full bg-background overflow-hidden group',\n title || subtitleText ? 'rounded-b-xl' : 'rounded-xl',\n // Hide cursor when controls are hidden and video is playing\n isPlaying && !showControls\n ? 'cursor-none group-hover:cursor-default'\n : 'cursor-default'\n )}\n aria-label={title ? `Video player: ${title}` : 'Video player'}\n onMouseMove={handleMouseMove}\n onMouseEnter={showControlsWithTimer}\n onMouseLeave={handleMouseLeave}\n >\n {/* Video Element */}\n <video\n ref={videoRef}\n src={src}\n poster={poster}\n className=\"w-full h-full object-contain\"\n controlsList=\"nodownload\"\n onTimeUpdate={handleTimeUpdate}\n onLoadedMetadata={handleLoadedMetadata}\n onClick={togglePlayPause}\n onKeyDown={handleVideoKeyDown}\n tabIndex={0}\n aria-label={title ? `Video: ${title}` : 'Video player'}\n >\n <track\n ref={trackRef}\n kind=\"captions\"\n src={subtitles || 'data:text/vtt;charset=utf-8,WEBVTT'}\n srcLang=\"pt-br\"\n label={\n subtitles ? 'Legendas em Português' : 'Sem legendas disponíveis'\n }\n default={false}\n />\n </video>\n\n {/* Center Play Button */}\n {!isPlaying && (\n <div className=\"absolute inset-0 flex items-center justify-center bg-black/30 transition-opacity\">\n <IconButton\n icon={<Play size={32} weight=\"regular\" className=\"ml-1\" />}\n onClick={togglePlayPause}\n aria-label=\"Play video\"\n className=\"!bg-transparent !text-white !w-auto !h-auto hover:!bg-transparent hover:!text-gray-200\"\n />\n </div>\n )}\n\n {/* Top Controls */}\n <div\n className={cn(\n 'absolute top-0 left-0 right-0 p-4 bg-gradient-to-b from-black/70 to-transparent transition-opacity',\n getTopControlsOpacity()\n )}\n >\n <div className=\"flex justify-start\">\n <IconButton\n icon={\n isFullscreen ? (\n <ArrowsInSimple size={24} />\n ) : (\n <ArrowsOutSimple size={24} />\n )\n }\n onClick={toggleFullscreen}\n aria-label={isFullscreen ? 'Exit fullscreen' : 'Enter fullscreen'}\n className=\"!bg-transparent !text-white hover:!bg-white/20\"\n />\n </div>\n </div>\n\n {/* Bottom Controls */}\n <div\n className={cn(\n 'absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/90 to-transparent transition-opacity',\n getBottomControlsOpacity()\n )}\n >\n {/* Progress Bar */}\n <ProgressBar\n currentTime={currentTime}\n duration={duration}\n progressPercentage={progressPercentage}\n onSeek={handleSeek}\n />\n\n {/* Control Buttons */}\n <div className=\"flex items-center justify-between px-4 pb-4\">\n {/* Left Controls */}\n <div className=\"flex items-center gap-4\">\n {/* Play/Pause */}\n <IconButton\n icon={isPlaying ? <Pause size={24} /> : <Play size={24} />}\n onClick={togglePlayPause}\n aria-label={isPlaying ? 'Pause' : 'Play'}\n className=\"!bg-transparent !text-white hover:!bg-white/20\"\n />\n\n {/* Volume */}\n <VolumeControls\n volume={volume}\n isMuted={isMuted}\n onVolumeChange={handleVolumeChange}\n onToggleMute={toggleMute}\n />\n\n {/* Captions */}\n {subtitles && (\n <IconButton\n icon={<ClosedCaptioning size={24} />}\n onClick={toggleCaptions}\n aria-label={showCaptions ? 'Hide captions' : 'Show captions'}\n className={cn(\n '!bg-transparent hover:!bg-white/20',\n showCaptions ? '!text-primary-400' : '!text-white'\n )}\n />\n )}\n\n {/* Time Display */}\n <Text size=\"sm\" weight=\"medium\" color=\"text-white\">\n {formatTime(currentTime)} / {formatTime(duration)}\n </Text>\n </div>\n\n {/* Right Controls */}\n <div className=\"flex items-center gap-4\">\n {/* Speed Control */}\n <SpeedMenu\n showSpeedMenu={showSpeedMenu}\n playbackRate={playbackRate}\n onToggleMenu={toggleSpeedMenu}\n onSpeedChange={handleSpeedChange}\n />\n </div>\n </div>\n </div>\n </section>\n </div>\n );\n};\n\nexport default VideoPlayer;\n","import { clsx, type ClassValue } from 'clsx';\nimport { twMerge } from 'tailwind-merge';\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs));\n}\n","import { ButtonHTMLAttributes, ReactNode, forwardRef } from 'react';\nimport { cn } from '../../utils/utils';\n\n/**\n * IconButton component props interface\n */\nexport type IconButtonProps = {\n /** Ícone a ser exibido no botão */\n icon: ReactNode;\n /** Tamanho do botão */\n size?: 'sm' | 'md';\n /** Estado de seleção/ativo do botão - permanece ativo até ser clicado novamente ou outro botão ser ativado */\n active?: boolean;\n /** Additional CSS classes to apply */\n className?: string;\n} & ButtonHTMLAttributes<HTMLButtonElement>;\n\n/**\n * IconButton component for Analytica Ensino platforms\n *\n * Um botão compacto apenas com ícone, ideal para menus dropdown,\n * barras de ferramentas e ações secundárias.\n * Oferece dois tamanhos com estilo consistente.\n * Estado ativo permanece até ser clicado novamente ou outro botão ser ativado.\n * Suporta forwardRef para acesso programático ao elemento DOM.\n *\n * @param icon - O ícone a ser exibido no botão\n * @param size - Tamanho do botão (sm, md)\n * @param active - Estado ativo/selecionado do botão\n * @param className - Classes CSS adicionais\n * @param props - Todos os outros atributos HTML padrão de button\n * @returns Um elemento button compacto estilizado apenas com ícone\n *\n * @example\n * ```tsx\n * <IconButton\n * icon={<MoreVerticalIcon />}\n * size=\"sm\"\n * onClick={() => openMenu()}\n * />\n * ```\n *\n * @example\n * ```tsx\n * // Botão ativo em uma barra de ferramentas - permanece ativo até outro clique\n * <IconButton\n * icon={<BoldIcon />}\n * active={isBold}\n * onClick={toggleBold}\n * />\n * ```\n *\n * @example\n * ```tsx\n * // Usando ref para controle programático\n * const buttonRef = useRef<HTMLButtonElement>(null);\n *\n * <IconButton\n * ref={buttonRef}\n * icon={<EditIcon />}\n * size=\"md\"\n * onClick={() => startEditing()}\n * />\n * ```\n */\nconst IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(\n (\n { icon, size = 'md', active = false, className = '', disabled, ...props },\n ref\n ) => {\n // Classes base para todos os estados\n const baseClasses = [\n 'inline-flex',\n 'items-center',\n 'justify-center',\n 'rounded-lg',\n 'font-medium',\n 'bg-transparent',\n 'text-text-950',\n 'cursor-pointer',\n 'hover:bg-primary-600',\n 'hover:text-text',\n 'focus-visible:outline-none',\n 'focus-visible:ring-2',\n 'focus-visible:ring-offset-0',\n 'focus-visible:ring-indicator-info',\n 'disabled:opacity-50',\n 'disabled:cursor-not-allowed',\n 'disabled:pointer-events-none',\n ];\n\n // Classes de tamanho\n const sizeClasses = {\n sm: ['w-6', 'h-6', 'text-sm'],\n md: ['w-10', 'h-10', 'text-base'],\n };\n\n // Classes de estado ativo\n const activeClasses = active\n ? ['!bg-primary-50', '!text-primary-950', 'hover:!bg-primary-100']\n : [];\n\n const allClasses = [\n ...baseClasses,\n ...sizeClasses[size],\n ...activeClasses,\n ].join(' ');\n\n // Garantir acessibilidade com aria-label padrão\n const ariaLabel = props['aria-label'] ?? 'Botão de ação';\n\n return (\n <button\n ref={ref}\n type=\"button\"\n className={cn(allClasses, className)}\n disabled={disabled}\n aria-pressed={active}\n aria-label={ariaLabel}\n {...props}\n >\n <span className=\"flex items-center justify-center\">{icon}</span>\n </button>\n );\n }\n);\n\nIconButton.displayName = 'IconButton';\n\nexport default IconButton;\n","import { ComponentPropsWithoutRef, ElementType, ReactNode } from 'react';\nimport { cn } from '../../utils/utils';\n\n/**\n * Base text component props\n */\ntype BaseTextProps = {\n /** Content to be displayed */\n children?: ReactNode;\n /** Text size variant */\n size?:\n | '2xs'\n | 'xs'\n | 'sm'\n | 'md'\n | 'lg'\n | 'xl'\n | '2xl'\n | '3xl'\n | '4xl'\n | '5xl'\n | '6xl';\n /** Font weight variant */\n weight?:\n | 'hairline'\n | 'light'\n | 'normal'\n | 'medium'\n | 'semibold'\n | 'bold'\n | 'extrabold'\n | 'black';\n /** Color variant - white for light backgrounds, black for dark backgrounds */\n color?: string;\n /** Additional CSS classes to apply */\n className?: string;\n};\n\n/**\n * Polymorphic text component props that ensures type safety based on the 'as' prop\n */\ntype TextProps<T extends ElementType = 'p'> = BaseTextProps & {\n /** HTML tag to render */\n as?: T;\n} & Omit<ComponentPropsWithoutRef<T>, keyof BaseTextProps>;\n\n/**\n * Text component for Analytica Ensino platforms\n *\n * A flexible polymorphic text component with multiple sizes, weights, and colors.\n * Automatically adapts to dark and light themes with full type safety.\n *\n * @param children - The content to display\n * @param size - The text size variant (2xs, xs, sm, md, lg, xl, 2xl, 3xl, 4xl, 5xl, 6xl)\n * @param weight - The font weight variant (hairline, light, normal, medium, semibold, bold, extrabold, black)\n * @param color - The color variant - adapts to theme\n * @param as - The HTML tag to render - determines allowed attributes via TypeScript\n * @param className - Additional CSS classes\n * @param props - HTML attributes valid for the chosen tag only\n * @returns A styled text element with type-safe attributes\n *\n * @example\n * ```tsx\n * <Text size=\"lg\" weight=\"bold\" color=\"text-info-800\">\n * This is a large, bold text\n * </Text>\n *\n * <Text as=\"a\" href=\"/link\" target=\"_blank\">\n * Link with type-safe anchor attributes\n * </Text>\n *\n * <Text as=\"button\" onClick={handleClick} disabled>\n * Button with type-safe button attributes\n * </Text>\n * ```\n */\nconst Text = <T extends ElementType = 'p'>({\n children,\n size = 'md',\n weight = 'normal',\n color = 'text-text-950',\n as,\n className = '',\n ...props\n}: TextProps<T>) => {\n let sizeClasses = '';\n let weightClasses = '';\n\n // Text size classes mapping\n const sizeClassMap = {\n '2xs': 'text-2xs',\n xs: 'text-xs',\n sm: 'text-sm',\n md: 'text-md',\n lg: 'text-lg',\n xl: 'text-xl',\n '2xl': 'text-2xl',\n '3xl': 'text-3xl',\n '4xl': 'text-4xl',\n '5xl': 'text-5xl',\n '6xl': 'text-6xl',\n } as const;\n\n sizeClasses = sizeClassMap[size] ?? sizeClassMap.md;\n\n // Font weight classes mapping\n const weightClassMap = {\n hairline: 'font-hairline',\n light: 'font-light',\n normal: 'font-normal',\n medium: 'font-medium',\n semibold: 'font-semibold',\n bold: 'font-bold',\n extrabold: 'font-extrabold',\n black: 'font-black',\n } as const;\n\n weightClasses = weightClassMap[weight] ?? weightClassMap.normal;\n\n const baseClasses = 'font-primary';\n const Component = as ?? ('p' as ElementType);\n\n return (\n <Component\n className={cn(baseClasses, sizeClasses, weightClasses, color, className)}\n {...props}\n >\n {children}\n </Component>\n );\n};\n\nexport default Text;\n"],"mappings":"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","names":["jsx","jsx"]}
1
+ {"version":3,"sources":["../../src/components/VideoPlayer/VideoPlayer.tsx","../../src/utils/utils.ts","../../src/components/IconButton/IconButton.tsx","../../src/components/Text/Text.tsx"],"sourcesContent":["import {\n useRef,\n useState,\n useEffect,\n useCallback,\n MouseEvent,\n KeyboardEvent,\n} from 'react';\nimport {\n Play,\n Pause,\n SpeakerHigh,\n SpeakerSlash,\n ArrowsOutSimple,\n ArrowsInSimple,\n ClosedCaptioning,\n DotsThreeVertical,\n} from 'phosphor-react';\nimport { cn } from '../../utils/utils';\nimport IconButton from '../IconButton/IconButton';\nimport Text from '../Text/Text';\n\n// Constants for timeout durations\nconst CONTROLS_HIDE_TIMEOUT = 3000; // 3 seconds for normal control hiding\nconst LEAVE_HIDE_TIMEOUT = 1000; // 1 second when mouse leaves the video area\nconst INIT_DELAY = 100; // ms delay to initialize controls on mount\n\n/**\n * VideoPlayer component props interface\n */\ninterface VideoPlayerProps {\n /** Video source URL */\n src: string;\n /** Video poster/thumbnail URL */\n poster?: string;\n /** Subtitles URL */\n subtitles?: string;\n /** Video title */\n title?: string;\n /** Video subtitle/description */\n subtitle?: string;\n /** Initial playback time in seconds */\n initialTime?: number;\n /** Callback fired when video time updates (seconds) */\n onTimeUpdate?: (seconds: number) => void;\n /** Callback fired with progress percentage (0-100) */\n onProgress?: (progress: number) => void;\n /** Callback fired when video completes (>95% watched) */\n onVideoComplete?: () => void;\n /** Additional CSS classes */\n className?: string;\n /** Auto-save progress to localStorage */\n autoSave?: boolean;\n /** localStorage key for saving progress */\n storageKey?: string;\n}\n\n/**\n * Format seconds to MM:SS display format\n * @param seconds - Time in seconds\n * @returns Formatted time string\n */\nconst formatTime = (seconds: number): string => {\n if (!seconds || isNaN(seconds)) return '0:00';\n const mins = Math.floor(seconds / 60);\n const secs = Math.floor(seconds % 60);\n return `${mins}:${secs.toString().padStart(2, '0')}`;\n};\n\n/**\n * Progress bar component props\n */\ninterface ProgressBarProps {\n currentTime: number;\n duration: number;\n progressPercentage: number;\n onSeek: (time: number) => void;\n}\n\n/**\n * Progress bar subcomponent\n */\nconst ProgressBar = ({\n currentTime,\n duration,\n progressPercentage,\n onSeek,\n}: ProgressBarProps) => (\n <div className=\"px-4 pb-2\">\n <input\n type=\"range\"\n min={0}\n max={duration || 100}\n value={currentTime}\n onChange={(e) => onSeek(parseFloat(e.target.value))}\n className=\"w-full h-1 bg-neutral-600 rounded-full appearance-none cursor-pointer slider:bg-primary-600 focus:outline-none focus:ring-2 focus:ring-primary-500\"\n aria-label=\"Video progress\"\n style={{\n background: `linear-gradient(to right, var(--color-primary-700) ${progressPercentage}%, var(--color-secondary-300) ${progressPercentage}%)`,\n }}\n />\n </div>\n);\n\n/**\n * Volume controls component props\n */\ninterface VolumeControlsProps {\n volume: number;\n isMuted: boolean;\n onVolumeChange: (volume: number) => void;\n onToggleMute: () => void;\n}\n\n/**\n * Volume controls subcomponent\n */\nconst VolumeControls = ({\n volume,\n isMuted,\n onVolumeChange,\n onToggleMute,\n}: VolumeControlsProps) => (\n <div className=\"flex items-center gap-2\">\n <IconButton\n icon={isMuted ? <SpeakerSlash size={24} /> : <SpeakerHigh size={24} />}\n onClick={onToggleMute}\n aria-label={isMuted ? 'Unmute' : 'Mute'}\n className=\"!bg-transparent !text-white hover:!bg-white/20\"\n />\n\n <input\n type=\"range\"\n min={0}\n max={100}\n value={Math.round(volume * 100)}\n onChange={(e) => onVolumeChange(parseInt(e.target.value))}\n className=\"w-20 h-1 bg-neutral-600 rounded-full appearance-none cursor-pointer focus:outline-none focus:ring-2 focus:ring-primary-500\"\n aria-label=\"Volume control\"\n style={{\n background: `linear-gradient(to right, var(--color-primary-700) ${volume * 100}%, var(--color-secondary-300) ${volume * 100}%)`,\n }}\n />\n </div>\n);\n\n/**\n * Speed menu component props\n */\ninterface SpeedMenuProps {\n showSpeedMenu: boolean;\n playbackRate: number;\n onToggleMenu: () => void;\n onSpeedChange: (speed: number) => void;\n}\n\n/**\n * Speed menu subcomponent\n */\nconst SpeedMenu = ({\n showSpeedMenu,\n playbackRate,\n onToggleMenu,\n onSpeedChange,\n}: SpeedMenuProps) => (\n <div className=\"relative\">\n <IconButton\n icon={<DotsThreeVertical size={24} />}\n onClick={onToggleMenu}\n aria-label=\"Playback speed\"\n className=\"!bg-transparent !text-white hover:!bg-white/20\"\n />\n {showSpeedMenu && (\n <div className=\"absolute bottom-12 right-0 bg-black/90 rounded-lg p-2 min-w-20\">\n {[0.5, 0.75, 1, 1.25, 1.5, 2].map((speed) => (\n <button\n key={speed}\n onClick={() => onSpeedChange(speed)}\n className={`block w-full text-left px-3 py-1 text-sm rounded hover:bg-white/20 transition-colors ${\n playbackRate === speed ? 'text-primary-400' : 'text-white'\n }`}\n >\n {speed}x\n </button>\n ))}\n </div>\n )}\n </div>\n);\n\n/**\n * Video player component with controls and progress tracking\n * Integrates with backend lesson progress system\n *\n * @param props - VideoPlayer component props\n * @returns Video player element with controls\n */\nconst VideoPlayer = ({\n src,\n poster,\n subtitles,\n title,\n subtitle: subtitleText,\n initialTime = 0,\n onTimeUpdate,\n onProgress,\n onVideoComplete,\n className,\n autoSave = true,\n storageKey = 'video-progress',\n}: VideoPlayerProps) => {\n const videoRef = useRef<HTMLVideoElement>(null);\n const [isPlaying, setIsPlaying] = useState(false);\n const [currentTime, setCurrentTime] = useState(0);\n const [duration, setDuration] = useState(0);\n const [isMuted, setIsMuted] = useState(false);\n const [volume, setVolume] = useState(1);\n const [isFullscreen, setIsFullscreen] = useState(false);\n const [showControls, setShowControls] = useState(true);\n const [hasCompleted, setHasCompleted] = useState(false);\n const [showCaptions, setShowCaptions] = useState(false);\n\n // Reset completion flag when changing videos\n useEffect(() => {\n setHasCompleted(false);\n }, [src]);\n const [playbackRate, setPlaybackRate] = useState(1);\n const [showSpeedMenu, setShowSpeedMenu] = useState(false);\n const lastSaveTimeRef = useRef(0);\n const trackRef = useRef<HTMLTrackElement>(null);\n const controlsTimeoutRef = useRef<number | null>(null);\n const lastMousePositionRef = useRef({ x: 0, y: 0 });\n\n /**\n * Check if user is currently interacting with controls\n */\n const isUserInteracting = useCallback(() => {\n // Check if speed menu is open\n if (showSpeedMenu) {\n return true;\n }\n\n // Check if any control element has focus\n const activeElement = document.activeElement;\n const videoContainer = videoRef.current?.parentElement;\n\n if (activeElement && videoContainer?.contains(activeElement)) {\n // Ignore the video element itself - it should not prevent control hiding\n if (activeElement === videoRef.current) {\n return false;\n }\n\n // Check if focused element is a control (button, input, etc.)\n const isControl = activeElement.matches('button, input, [tabindex]');\n if (isControl) {\n return true;\n }\n }\n\n return false;\n }, [showSpeedMenu]);\n\n /**\n * Clear controls timeout\n */\n const clearControlsTimeout = useCallback(() => {\n if (controlsTimeoutRef.current) {\n clearTimeout(controlsTimeoutRef.current);\n controlsTimeoutRef.current = null;\n }\n }, []);\n\n /**\n * Show controls and set auto-hide timer\n */\n const showControlsWithTimer = useCallback(() => {\n setShowControls(true);\n clearControlsTimeout();\n\n // In fullscreen mode, only hide if video is playing\n if (isFullscreen) {\n if (isPlaying) {\n controlsTimeoutRef.current = window.setTimeout(() => {\n setShowControls(false);\n }, CONTROLS_HIDE_TIMEOUT);\n }\n } else {\n // In normal mode, always set a timer to hide controls\n controlsTimeoutRef.current = window.setTimeout(() => {\n setShowControls(false);\n }, CONTROLS_HIDE_TIMEOUT);\n }\n }, [isFullscreen, isPlaying, clearControlsTimeout]);\n\n /**\n * Handle mouse move with position detection\n */\n const handleMouseMove = useCallback(\n (event: MouseEvent) => {\n const currentX = event.clientX;\n const currentY = event.clientY;\n const lastPos = lastMousePositionRef.current;\n\n // Check if mouse actually moved (minimum 5px threshold)\n const hasMoved =\n Math.abs(currentX - lastPos.x) > 5 ||\n Math.abs(currentY - lastPos.y) > 5;\n\n if (hasMoved) {\n lastMousePositionRef.current = { x: currentX, y: currentY };\n showControlsWithTimer();\n }\n },\n [showControlsWithTimer]\n );\n\n /**\n * Handle mouse enter to show controls with appropriate timer logic\n */\n const handleMouseEnter = useCallback(() => {\n showControlsWithTimer();\n }, [showControlsWithTimer]);\n\n /**\n * Handle mouse leave to hide controls faster\n */\n const handleMouseLeave = useCallback(() => {\n const userInteracting = isUserInteracting();\n clearControlsTimeout();\n\n // Hide controls when mouse leaves, except when in fullscreen or user is interacting\n if (!isFullscreen && !userInteracting) {\n // Use shorter timeout when mouse leaves\n controlsTimeoutRef.current = window.setTimeout(() => {\n setShowControls(false);\n }, LEAVE_HIDE_TIMEOUT);\n }\n }, [isFullscreen, clearControlsTimeout, isUserInteracting]);\n\n /**\n * Initialize video element properties\n */\n useEffect(() => {\n // Set initial volume\n if (videoRef.current) {\n videoRef.current.volume = volume;\n videoRef.current.muted = isMuted;\n }\n }, [volume, isMuted]);\n\n /**\n * Synchronize isPlaying state with media events\n */\n useEffect(() => {\n const video = videoRef.current;\n if (!video) return;\n\n const onPlay = () => setIsPlaying(true);\n const onPause = () => setIsPlaying(false);\n const onEnded = () => setIsPlaying(false);\n\n video.addEventListener('play', onPlay);\n video.addEventListener('pause', onPause);\n video.addEventListener('ended', onEnded);\n\n return () => {\n video.removeEventListener('play', onPlay);\n video.removeEventListener('pause', onPause);\n video.removeEventListener('ended', onEnded);\n };\n }, []);\n\n /**\n * Handle controls auto-hide when play state changes\n */\n useEffect(() => {\n if (isPlaying) {\n // Start timer when video starts playing\n showControlsWithTimer();\n } else {\n // Keep controls visible when paused only in fullscreen\n clearControlsTimeout();\n if (isFullscreen) {\n setShowControls(true);\n } else {\n // In normal mode (not fullscreen), initialize timer even when paused\n // This ensures controls will hide properly from the start\n showControlsWithTimer();\n }\n }\n }, [isPlaying, isFullscreen, showControlsWithTimer, clearControlsTimeout]);\n\n /**\n * Handle fullscreen state changes from browser events\n */\n useEffect(() => {\n const handleFullscreenChange = () => {\n const isCurrentlyFullscreen = !!document.fullscreenElement;\n setIsFullscreen(isCurrentlyFullscreen);\n\n // Show controls when entering fullscreen, hide after timeout if playing\n if (isCurrentlyFullscreen) {\n showControlsWithTimer();\n }\n };\n\n document.addEventListener('fullscreenchange', handleFullscreenChange);\n\n return () => {\n document.removeEventListener('fullscreenchange', handleFullscreenChange);\n };\n }, [showControlsWithTimer]);\n\n /**\n * Initialize controls behavior on component mount\n * This ensures controls work correctly from the first load\n */\n useEffect(() => {\n const init = () => {\n if (!isFullscreen) {\n showControlsWithTimer();\n }\n };\n // Prefer rAF to avoid arbitrary timing if available; fall back to INIT_DELAY.\n let raf1 = 0,\n raf2 = 0,\n tid: number | undefined;\n if (typeof window.requestAnimationFrame === 'function') {\n raf1 = requestAnimationFrame(() => {\n raf2 = requestAnimationFrame(init);\n });\n return () => {\n cancelAnimationFrame(raf1);\n cancelAnimationFrame(raf2);\n };\n } else {\n tid = window.setTimeout(init, INIT_DELAY);\n return () => {\n if (tid) clearTimeout(tid);\n };\n }\n }, []); // Run only once on mount\n\n /**\n * Get initial time from props or localStorage\n */\n const getInitialTime = useCallback((): number | undefined => {\n if (!autoSave || !storageKey) {\n return Number.isFinite(initialTime) && initialTime >= 0\n ? initialTime\n : undefined;\n }\n\n const saved = Number(localStorage.getItem(`${storageKey}-${src}`) || NaN);\n const hasValidInitial = Number.isFinite(initialTime) && initialTime >= 0;\n const hasValidSaved = Number.isFinite(saved) && saved >= 0;\n\n if (hasValidInitial) return initialTime;\n if (hasValidSaved) return saved;\n return undefined;\n }, [autoSave, storageKey, src, initialTime]);\n\n /**\n * Load saved progress from localStorage\n */\n useEffect(() => {\n const start = getInitialTime();\n if (start !== undefined && videoRef.current) {\n videoRef.current.currentTime = start;\n setCurrentTime(start);\n }\n }, [getInitialTime]);\n\n /**\n * Save progress to localStorage periodically\n */\n const saveProgress = useCallback(\n (time: number) => {\n if (!autoSave || !storageKey) return;\n\n const now = Date.now();\n if (now - lastSaveTimeRef.current > 5000) {\n localStorage.setItem(`${storageKey}-${src}`, time.toString());\n lastSaveTimeRef.current = now;\n }\n },\n [autoSave, storageKey, src]\n );\n\n /**\n * Handle play/pause toggle\n */\n const togglePlayPause = useCallback(async () => {\n const video = videoRef.current;\n if (!video) return;\n\n if (!video.paused) {\n video.pause();\n return;\n }\n\n try {\n await video.play();\n } catch {\n // Playback prevented (e.g., autoplay policy); keep state unchanged.\n }\n }, []);\n\n /**\n * Handle volume change\n */\n const handleVolumeChange = useCallback(\n (newVolume: number) => {\n const video = videoRef.current;\n if (!video) return;\n\n const volumeValue = newVolume / 100; // Convert 0-100 to 0-1\n video.volume = volumeValue;\n setVolume(volumeValue);\n\n // Auto mute/unmute based on volume\n const shouldMute = volumeValue === 0;\n const shouldUnmute = volumeValue > 0 && isMuted;\n\n if (shouldMute) {\n video.muted = true;\n setIsMuted(true);\n } else if (shouldUnmute) {\n video.muted = false;\n setIsMuted(false);\n }\n },\n [isMuted]\n );\n\n /**\n * Handle mute toggle\n */\n const toggleMute = useCallback(() => {\n const video = videoRef.current;\n if (!video) return;\n\n if (isMuted) {\n // Unmute: restore volume or set to 50% if it was 0\n const restoreVolume = volume > 0 ? volume : 0.5;\n video.volume = restoreVolume;\n video.muted = false;\n setVolume(restoreVolume);\n setIsMuted(false);\n } else {\n // Mute: set volume to 0 and mute\n video.muted = true;\n setIsMuted(true);\n }\n }, [isMuted, volume]);\n\n /**\n * Handle video seek\n */\n const handleSeek = useCallback((newTime: number) => {\n const video = videoRef.current;\n if (video) {\n video.currentTime = newTime;\n }\n }, []);\n\n /**\n * Handle fullscreen toggle\n */\n const toggleFullscreen = useCallback(() => {\n const container = videoRef.current?.parentElement;\n if (!container) return;\n\n if (!isFullscreen && container.requestFullscreen) {\n container.requestFullscreen();\n } else if (isFullscreen && document.exitFullscreen) {\n document.exitFullscreen();\n }\n }, [isFullscreen]);\n\n /**\n * Handle playback speed change\n */\n const handleSpeedChange = useCallback((speed: number) => {\n if (videoRef.current) {\n videoRef.current.playbackRate = speed;\n setPlaybackRate(speed);\n setShowSpeedMenu(false);\n }\n }, []);\n\n /**\n * Toggle speed menu visibility\n */\n const toggleSpeedMenu = useCallback(() => {\n setShowSpeedMenu(!showSpeedMenu);\n }, [showSpeedMenu]);\n\n /**\n * Toggle captions visibility\n */\n const toggleCaptions = useCallback(() => {\n if (!trackRef.current?.track || !subtitles) return;\n\n const newShowCaptions = !showCaptions;\n setShowCaptions(newShowCaptions);\n\n // Control track mode programmatically - only show if subtitles are available\n trackRef.current.track.mode =\n newShowCaptions && subtitles ? 'showing' : 'hidden';\n }, [showCaptions, subtitles]);\n\n /**\n * Check video completion and fire callback\n */\n const checkVideoCompletion = useCallback(\n (progressPercent: number) => {\n if (progressPercent >= 95 && !hasCompleted) {\n setHasCompleted(true);\n onVideoComplete?.();\n }\n },\n [hasCompleted, onVideoComplete]\n );\n\n /**\n * Handle time update\n */\n const handleTimeUpdate = useCallback(() => {\n const video = videoRef.current;\n if (!video) return;\n\n const current = video.currentTime;\n setCurrentTime(current);\n\n // Save progress periodically\n saveProgress(current);\n\n // Fire callbacks\n onTimeUpdate?.(current);\n\n if (duration > 0) {\n const progressPercent = (current / duration) * 100;\n onProgress?.(progressPercent);\n checkVideoCompletion(progressPercent);\n }\n }, [duration, saveProgress, onTimeUpdate, onProgress, checkVideoCompletion]);\n\n /**\n * Handle loaded metadata\n */\n const handleLoadedMetadata = useCallback(() => {\n if (videoRef.current) {\n setDuration(videoRef.current.duration);\n }\n }, []);\n\n /**\n * Initialize track mode when track is available\n */\n useEffect(() => {\n if (trackRef.current?.track) {\n // Set initial mode based on showCaptions state and subtitle availability\n trackRef.current.track.mode =\n showCaptions && subtitles ? 'showing' : 'hidden';\n }\n }, [subtitles, showCaptions]);\n\n /**\n * Handle visibility change and blur to pause video when losing focus\n */\n useEffect(() => {\n const handleVisibilityChange = () => {\n if (document.hidden && isPlaying && videoRef.current) {\n videoRef.current.pause();\n setIsPlaying(false);\n }\n };\n\n const handleBlur = () => {\n if (isPlaying && videoRef.current) {\n videoRef.current.pause();\n setIsPlaying(false);\n }\n };\n\n document.addEventListener('visibilitychange', handleVisibilityChange);\n window.addEventListener('blur', handleBlur);\n\n return () => {\n document.removeEventListener('visibilitychange', handleVisibilityChange);\n window.removeEventListener('blur', handleBlur);\n // Clean up timers on unmount\n clearControlsTimeout();\n };\n }, [isPlaying, clearControlsTimeout]);\n\n const progressPercentage = duration > 0 ? (currentTime / duration) * 100 : 0;\n\n /**\n * Calculate top controls opacity based on state\n */\n const getTopControlsOpacity = useCallback(() => {\n return showControls ? 'opacity-100' : 'opacity-0';\n }, [showControls]);\n\n /**\n * Calculate bottom controls opacity based on state\n */\n const getBottomControlsOpacity = useCallback(() => {\n return showControls ? 'opacity-100' : 'opacity-0';\n }, [showControls]);\n\n /**\n * Handle video element keyboard events\n */\n const handleVideoKeyDown = useCallback(\n (e: KeyboardEvent) => {\n if (e.key) {\n // Prevent bubbling to parent handlers to avoid double toggles\n e.stopPropagation();\n showControlsWithTimer();\n }\n\n switch (e.key) {\n case ' ':\n case 'Enter':\n e.preventDefault();\n togglePlayPause();\n break;\n case 'ArrowLeft':\n e.preventDefault();\n if (videoRef.current) {\n videoRef.current.currentTime -= 10;\n }\n break;\n case 'ArrowRight':\n e.preventDefault();\n if (videoRef.current) {\n videoRef.current.currentTime += 10;\n }\n break;\n case 'ArrowUp':\n e.preventDefault();\n handleVolumeChange(Math.min(100, volume * 100 + 10));\n break;\n case 'ArrowDown':\n e.preventDefault();\n handleVolumeChange(Math.max(0, volume * 100 - 10));\n break;\n case 'm':\n case 'M':\n e.preventDefault();\n toggleMute();\n break;\n case 'f':\n case 'F':\n e.preventDefault();\n toggleFullscreen();\n break;\n default:\n break;\n }\n },\n [\n showControlsWithTimer,\n togglePlayPause,\n handleVolumeChange,\n volume,\n toggleMute,\n toggleFullscreen,\n ]\n );\n\n return (\n <div className={cn('flex flex-col', className)}>\n {/* Integrated Header */}\n {(title || subtitleText) && (\n <div className=\"bg-subject-1 px-8 py-4 flex items-end justify-between min-h-20\">\n <div className=\"flex flex-col gap-1\">\n {title && (\n <Text\n as=\"h2\"\n size=\"lg\"\n weight=\"bold\"\n color=\"text-text-900\"\n className=\"leading-5 tracking-wide\"\n >\n {title}\n </Text>\n )}\n {subtitleText && (\n <Text\n as=\"p\"\n size=\"sm\"\n weight=\"normal\"\n color=\"text-text-600\"\n className=\"leading-5\"\n >\n {subtitleText}\n </Text>\n )}\n </div>\n </div>\n )}\n\n {/* Video Container */}\n <section\n className={cn(\n 'relative w-full bg-background overflow-hidden group',\n 'rounded-b-xl',\n // Hide cursor when controls are hidden and video is playing\n isPlaying && !showControls\n ? 'cursor-none group-hover:cursor-default'\n : 'cursor-default'\n )}\n aria-label={title ? `Video player: ${title}` : 'Video player'}\n onMouseMove={handleMouseMove}\n onMouseEnter={handleMouseEnter}\n onTouchStart={handleMouseEnter}\n onMouseLeave={handleMouseLeave}\n >\n {/* Video Element */}\n <video\n ref={videoRef}\n src={src}\n poster={poster}\n className=\"w-full h-full object-contain\"\n controlsList=\"nodownload\"\n onTimeUpdate={handleTimeUpdate}\n onLoadedMetadata={handleLoadedMetadata}\n onClick={togglePlayPause}\n onKeyDown={handleVideoKeyDown}\n tabIndex={0}\n aria-label={title ? `Video: ${title}` : 'Video player'}\n >\n <track\n ref={trackRef}\n kind=\"captions\"\n src={subtitles || 'data:text/vtt;charset=utf-8,WEBVTT'}\n srcLang=\"pt-br\"\n label={\n subtitles ? 'Legendas em Português' : 'Sem legendas disponíveis'\n }\n default={false}\n />\n </video>\n\n {/* Center Play Button */}\n {!isPlaying && (\n <div className=\"absolute inset-0 flex items-center justify-center bg-black/30 transition-opacity\">\n <IconButton\n icon={<Play size={32} weight=\"regular\" className=\"ml-1\" />}\n onClick={togglePlayPause}\n aria-label=\"Play video\"\n className=\"!bg-transparent !text-white !w-auto !h-auto hover:!bg-transparent hover:!text-gray-200\"\n />\n </div>\n )}\n\n {/* Top Controls */}\n <div\n className={cn(\n 'absolute top-0 left-0 right-0 p-4 bg-gradient-to-b from-black/70 to-transparent transition-opacity',\n getTopControlsOpacity()\n )}\n >\n <div className=\"flex justify-start\">\n <IconButton\n icon={\n isFullscreen ? (\n <ArrowsInSimple size={24} />\n ) : (\n <ArrowsOutSimple size={24} />\n )\n }\n onClick={toggleFullscreen}\n aria-label={isFullscreen ? 'Exit fullscreen' : 'Enter fullscreen'}\n className=\"!bg-transparent !text-white hover:!bg-white/20\"\n />\n </div>\n </div>\n\n {/* Bottom Controls */}\n <div\n className={cn(\n 'absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/90 to-transparent transition-opacity',\n getBottomControlsOpacity()\n )}\n >\n {/* Progress Bar */}\n <ProgressBar\n currentTime={currentTime}\n duration={duration}\n progressPercentage={progressPercentage}\n onSeek={handleSeek}\n />\n\n {/* Control Buttons */}\n <div className=\"flex items-center justify-between px-4 pb-4\">\n {/* Left Controls */}\n <div className=\"flex items-center gap-4\">\n {/* Play/Pause */}\n <IconButton\n icon={isPlaying ? <Pause size={24} /> : <Play size={24} />}\n onClick={togglePlayPause}\n aria-label={isPlaying ? 'Pause' : 'Play'}\n className=\"!bg-transparent !text-white hover:!bg-white/20\"\n />\n\n {/* Volume */}\n <VolumeControls\n volume={volume}\n isMuted={isMuted}\n onVolumeChange={handleVolumeChange}\n onToggleMute={toggleMute}\n />\n\n {/* Captions */}\n {subtitles && (\n <IconButton\n icon={<ClosedCaptioning size={24} />}\n onClick={toggleCaptions}\n aria-label={showCaptions ? 'Hide captions' : 'Show captions'}\n className={cn(\n '!bg-transparent hover:!bg-white/20',\n showCaptions ? '!text-primary-400' : '!text-white'\n )}\n />\n )}\n\n {/* Time Display */}\n <Text size=\"sm\" weight=\"medium\" color=\"text-white\">\n {formatTime(currentTime)} / {formatTime(duration)}\n </Text>\n </div>\n\n {/* Right Controls */}\n <div className=\"flex items-center gap-4\">\n {/* Speed Control */}\n <SpeedMenu\n showSpeedMenu={showSpeedMenu}\n playbackRate={playbackRate}\n onToggleMenu={toggleSpeedMenu}\n onSpeedChange={handleSpeedChange}\n />\n </div>\n </div>\n </div>\n </section>\n </div>\n );\n};\n\nexport default VideoPlayer;\n","import { clsx, type ClassValue } from 'clsx';\nimport { twMerge } from 'tailwind-merge';\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs));\n}\n","import { ButtonHTMLAttributes, ReactNode, forwardRef } from 'react';\nimport { cn } from '../../utils/utils';\n\n/**\n * IconButton component props interface\n */\nexport type IconButtonProps = {\n /** Ícone a ser exibido no botão */\n icon: ReactNode;\n /** Tamanho do botão */\n size?: 'sm' | 'md';\n /** Estado de seleção/ativo do botão - permanece ativo até ser clicado novamente ou outro botão ser ativado */\n active?: boolean;\n /** Additional CSS classes to apply */\n className?: string;\n} & ButtonHTMLAttributes<HTMLButtonElement>;\n\n/**\n * IconButton component for Analytica Ensino platforms\n *\n * Um botão compacto apenas com ícone, ideal para menus dropdown,\n * barras de ferramentas e ações secundárias.\n * Oferece dois tamanhos com estilo consistente.\n * Estado ativo permanece até ser clicado novamente ou outro botão ser ativado.\n * Suporta forwardRef para acesso programático ao elemento DOM.\n *\n * @param icon - O ícone a ser exibido no botão\n * @param size - Tamanho do botão (sm, md)\n * @param active - Estado ativo/selecionado do botão\n * @param className - Classes CSS adicionais\n * @param props - Todos os outros atributos HTML padrão de button\n * @returns Um elemento button compacto estilizado apenas com ícone\n *\n * @example\n * ```tsx\n * <IconButton\n * icon={<MoreVerticalIcon />}\n * size=\"sm\"\n * onClick={() => openMenu()}\n * />\n * ```\n *\n * @example\n * ```tsx\n * // Botão ativo em uma barra de ferramentas - permanece ativo até outro clique\n * <IconButton\n * icon={<BoldIcon />}\n * active={isBold}\n * onClick={toggleBold}\n * />\n * ```\n *\n * @example\n * ```tsx\n * // Usando ref para controle programático\n * const buttonRef = useRef<HTMLButtonElement>(null);\n *\n * <IconButton\n * ref={buttonRef}\n * icon={<EditIcon />}\n * size=\"md\"\n * onClick={() => startEditing()}\n * />\n * ```\n */\nconst IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(\n (\n { icon, size = 'md', active = false, className = '', disabled, ...props },\n ref\n ) => {\n // Classes base para todos os estados\n const baseClasses = [\n 'inline-flex',\n 'items-center',\n 'justify-center',\n 'rounded-lg',\n 'font-medium',\n 'bg-transparent',\n 'text-text-950',\n 'cursor-pointer',\n 'hover:bg-primary-600',\n 'hover:text-text',\n 'focus-visible:outline-none',\n 'focus-visible:ring-2',\n 'focus-visible:ring-offset-0',\n 'focus-visible:ring-indicator-info',\n 'disabled:opacity-50',\n 'disabled:cursor-not-allowed',\n 'disabled:pointer-events-none',\n ];\n\n // Classes de tamanho\n const sizeClasses = {\n sm: ['w-6', 'h-6', 'text-sm'],\n md: ['w-10', 'h-10', 'text-base'],\n };\n\n // Classes de estado ativo\n const activeClasses = active\n ? ['!bg-primary-50', '!text-primary-950', 'hover:!bg-primary-100']\n : [];\n\n const allClasses = [\n ...baseClasses,\n ...sizeClasses[size],\n ...activeClasses,\n ].join(' ');\n\n // Garantir acessibilidade com aria-label padrão\n const ariaLabel = props['aria-label'] ?? 'Botão de ação';\n\n return (\n <button\n ref={ref}\n type=\"button\"\n className={cn(allClasses, className)}\n disabled={disabled}\n aria-pressed={active}\n aria-label={ariaLabel}\n {...props}\n >\n <span className=\"flex items-center justify-center\">{icon}</span>\n </button>\n );\n }\n);\n\nIconButton.displayName = 'IconButton';\n\nexport default IconButton;\n","import { ComponentPropsWithoutRef, ElementType, ReactNode } from 'react';\nimport { cn } from '../../utils/utils';\n\n/**\n * Base text component props\n */\ntype BaseTextProps = {\n /** Content to be displayed */\n children?: ReactNode;\n /** Text size variant */\n size?:\n | '2xs'\n | 'xs'\n | 'sm'\n | 'md'\n | 'lg'\n | 'xl'\n | '2xl'\n | '3xl'\n | '4xl'\n | '5xl'\n | '6xl';\n /** Font weight variant */\n weight?:\n | 'hairline'\n | 'light'\n | 'normal'\n | 'medium'\n | 'semibold'\n | 'bold'\n | 'extrabold'\n | 'black';\n /** Color variant - white for light backgrounds, black for dark backgrounds */\n color?: string;\n /** Additional CSS classes to apply */\n className?: string;\n};\n\n/**\n * Polymorphic text component props that ensures type safety based on the 'as' prop\n */\ntype TextProps<T extends ElementType = 'p'> = BaseTextProps & {\n /** HTML tag to render */\n as?: T;\n} & Omit<ComponentPropsWithoutRef<T>, keyof BaseTextProps>;\n\n/**\n * Text component for Analytica Ensino platforms\n *\n * A flexible polymorphic text component with multiple sizes, weights, and colors.\n * Automatically adapts to dark and light themes with full type safety.\n *\n * @param children - The content to display\n * @param size - The text size variant (2xs, xs, sm, md, lg, xl, 2xl, 3xl, 4xl, 5xl, 6xl)\n * @param weight - The font weight variant (hairline, light, normal, medium, semibold, bold, extrabold, black)\n * @param color - The color variant - adapts to theme\n * @param as - The HTML tag to render - determines allowed attributes via TypeScript\n * @param className - Additional CSS classes\n * @param props - HTML attributes valid for the chosen tag only\n * @returns A styled text element with type-safe attributes\n *\n * @example\n * ```tsx\n * <Text size=\"lg\" weight=\"bold\" color=\"text-info-800\">\n * This is a large, bold text\n * </Text>\n *\n * <Text as=\"a\" href=\"/link\" target=\"_blank\">\n * Link with type-safe anchor attributes\n * </Text>\n *\n * <Text as=\"button\" onClick={handleClick} disabled>\n * Button with type-safe button attributes\n * </Text>\n * ```\n */\nconst Text = <T extends ElementType = 'p'>({\n children,\n size = 'md',\n weight = 'normal',\n color = 'text-text-950',\n as,\n className = '',\n ...props\n}: TextProps<T>) => {\n let sizeClasses = '';\n let weightClasses = '';\n\n // Text size classes mapping\n const sizeClassMap = {\n '2xs': 'text-2xs',\n xs: 'text-xs',\n sm: 'text-sm',\n md: 'text-md',\n lg: 'text-lg',\n xl: 'text-xl',\n '2xl': 'text-2xl',\n '3xl': 'text-3xl',\n '4xl': 'text-4xl',\n '5xl': 'text-5xl',\n '6xl': 'text-6xl',\n } as const;\n\n sizeClasses = sizeClassMap[size] ?? sizeClassMap.md;\n\n // Font weight classes mapping\n const weightClassMap = {\n hairline: 'font-hairline',\n light: 'font-light',\n normal: 'font-normal',\n medium: 'font-medium',\n semibold: 'font-semibold',\n bold: 'font-bold',\n extrabold: 'font-extrabold',\n black: 'font-black',\n } as const;\n\n weightClasses = weightClassMap[weight] ?? weightClassMap.normal;\n\n const baseClasses = 'font-primary';\n const Component = as ?? ('p' as ElementType);\n\n return (\n <Component\n className={cn(baseClasses, sizeClasses, weightClasses, color, className)}\n {...props}\n >\n {children}\n </Component>\n );\n};\n\nexport default Text;\n"],"mappings":"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","names":["jsx","jsx"]}
package/dist/index.js CHANGED
@@ -6828,6 +6828,7 @@ var import_phosphor_react18 = require("phosphor-react");
6828
6828
  var import_jsx_runtime36 = require("react/jsx-runtime");
6829
6829
  var CONTROLS_HIDE_TIMEOUT = 3e3;
6830
6830
  var LEAVE_HIDE_TIMEOUT = 1e3;
6831
+ var INIT_DELAY = 100;
6831
6832
  var formatTime = (seconds) => {
6832
6833
  if (!seconds || isNaN(seconds)) return "0:00";
6833
6834
  const mins = Math.floor(seconds / 60);
@@ -6946,14 +6947,20 @@ var VideoPlayer = ({
6946
6947
  const trackRef = (0, import_react22.useRef)(null);
6947
6948
  const controlsTimeoutRef = (0, import_react22.useRef)(null);
6948
6949
  const lastMousePositionRef = (0, import_react22.useRef)({ x: 0, y: 0 });
6949
- const mouseMoveTimeoutRef = (0, import_react22.useRef)(null);
6950
6950
  const isUserInteracting = (0, import_react22.useCallback)(() => {
6951
- if (showSpeedMenu) return true;
6951
+ if (showSpeedMenu) {
6952
+ return true;
6953
+ }
6952
6954
  const activeElement = document.activeElement;
6953
6955
  const videoContainer = videoRef.current?.parentElement;
6954
6956
  if (activeElement && videoContainer?.contains(activeElement)) {
6957
+ if (activeElement === videoRef.current) {
6958
+ return false;
6959
+ }
6955
6960
  const isControl = activeElement.matches("button, input, [tabindex]");
6956
- if (isControl) return true;
6961
+ if (isControl) {
6962
+ return true;
6963
+ }
6957
6964
  }
6958
6965
  return false;
6959
6966
  }, [showSpeedMenu]);
@@ -6963,21 +6970,21 @@ var VideoPlayer = ({
6963
6970
  controlsTimeoutRef.current = null;
6964
6971
  }
6965
6972
  }, []);
6966
- const clearMouseMoveTimeout = (0, import_react22.useCallback)(() => {
6967
- if (mouseMoveTimeoutRef.current) {
6968
- clearTimeout(mouseMoveTimeoutRef.current);
6969
- mouseMoveTimeoutRef.current = null;
6970
- }
6971
- }, []);
6972
6973
  const showControlsWithTimer = (0, import_react22.useCallback)(() => {
6973
6974
  setShowControls(true);
6974
6975
  clearControlsTimeout();
6975
- if (isPlaying) {
6976
+ if (isFullscreen) {
6977
+ if (isPlaying) {
6978
+ controlsTimeoutRef.current = window.setTimeout(() => {
6979
+ setShowControls(false);
6980
+ }, CONTROLS_HIDE_TIMEOUT);
6981
+ }
6982
+ } else {
6976
6983
  controlsTimeoutRef.current = window.setTimeout(() => {
6977
6984
  setShowControls(false);
6978
6985
  }, CONTROLS_HIDE_TIMEOUT);
6979
6986
  }
6980
- }, [isPlaying, clearControlsTimeout]);
6987
+ }, [isFullscreen, isPlaying, clearControlsTimeout]);
6981
6988
  const handleMouseMove = (0, import_react22.useCallback)(
6982
6989
  (event) => {
6983
6990
  const currentX = event.clientX;
@@ -6991,14 +6998,18 @@ var VideoPlayer = ({
6991
6998
  },
6992
6999
  [showControlsWithTimer]
6993
7000
  );
7001
+ const handleMouseEnter = (0, import_react22.useCallback)(() => {
7002
+ showControlsWithTimer();
7003
+ }, [showControlsWithTimer]);
6994
7004
  const handleMouseLeave = (0, import_react22.useCallback)(() => {
7005
+ const userInteracting = isUserInteracting();
6995
7006
  clearControlsTimeout();
6996
- if (isPlaying && !isUserInteracting()) {
7007
+ if (!isFullscreen && !userInteracting) {
6997
7008
  controlsTimeoutRef.current = window.setTimeout(() => {
6998
7009
  setShowControls(false);
6999
7010
  }, LEAVE_HIDE_TIMEOUT);
7000
7011
  }
7001
- }, [isPlaying, clearControlsTimeout, isUserInteracting]);
7012
+ }, [isFullscreen, clearControlsTimeout, isUserInteracting]);
7002
7013
  (0, import_react22.useEffect)(() => {
7003
7014
  if (videoRef.current) {
7004
7015
  videoRef.current.volume = volume;
@@ -7025,9 +7036,13 @@ var VideoPlayer = ({
7025
7036
  showControlsWithTimer();
7026
7037
  } else {
7027
7038
  clearControlsTimeout();
7028
- setShowControls(true);
7039
+ if (isFullscreen) {
7040
+ setShowControls(true);
7041
+ } else {
7042
+ showControlsWithTimer();
7043
+ }
7029
7044
  }
7030
- }, [isPlaying, showControlsWithTimer, clearControlsTimeout]);
7045
+ }, [isPlaying, isFullscreen, showControlsWithTimer, clearControlsTimeout]);
7031
7046
  (0, import_react22.useEffect)(() => {
7032
7047
  const handleFullscreenChange = () => {
7033
7048
  const isCurrentlyFullscreen = !!document.fullscreenElement;
@@ -7041,6 +7056,28 @@ var VideoPlayer = ({
7041
7056
  document.removeEventListener("fullscreenchange", handleFullscreenChange);
7042
7057
  };
7043
7058
  }, [showControlsWithTimer]);
7059
+ (0, import_react22.useEffect)(() => {
7060
+ const init = () => {
7061
+ if (!isFullscreen) {
7062
+ showControlsWithTimer();
7063
+ }
7064
+ };
7065
+ let raf1 = 0, raf2 = 0, tid;
7066
+ if (typeof window.requestAnimationFrame === "function") {
7067
+ raf1 = requestAnimationFrame(() => {
7068
+ raf2 = requestAnimationFrame(init);
7069
+ });
7070
+ return () => {
7071
+ cancelAnimationFrame(raf1);
7072
+ cancelAnimationFrame(raf2);
7073
+ };
7074
+ } else {
7075
+ tid = window.setTimeout(init, INIT_DELAY);
7076
+ return () => {
7077
+ if (tid) clearTimeout(tid);
7078
+ };
7079
+ }
7080
+ }, []);
7044
7081
  const getInitialTime = (0, import_react22.useCallback)(() => {
7045
7082
  if (!autoSave || !storageKey) {
7046
7083
  return Number.isFinite(initialTime) && initialTime >= 0 ? initialTime : void 0;
@@ -7197,22 +7234,15 @@ var VideoPlayer = ({
7197
7234
  document.removeEventListener("visibilitychange", handleVisibilityChange);
7198
7235
  window.removeEventListener("blur", handleBlur);
7199
7236
  clearControlsTimeout();
7200
- clearMouseMoveTimeout();
7201
7237
  };
7202
- }, [isPlaying, clearControlsTimeout, clearMouseMoveTimeout]);
7238
+ }, [isPlaying, clearControlsTimeout]);
7203
7239
  const progressPercentage = duration > 0 ? currentTime / duration * 100 : 0;
7204
7240
  const getTopControlsOpacity = (0, import_react22.useCallback)(() => {
7205
- if (isFullscreen) {
7206
- return showControls ? "opacity-100" : "opacity-0";
7207
- }
7208
- return !isPlaying || showControls ? "opacity-100" : "opacity-0 group-hover:opacity-100";
7209
- }, [isFullscreen, showControls, isPlaying]);
7241
+ return showControls ? "opacity-100" : "opacity-0";
7242
+ }, [showControls]);
7210
7243
  const getBottomControlsOpacity = (0, import_react22.useCallback)(() => {
7211
- if (isFullscreen) {
7212
- return showControls ? "opacity-100" : "opacity-0";
7213
- }
7214
- return !isPlaying || showControls ? "opacity-100" : "opacity-0 group-hover:opacity-100";
7215
- }, [isFullscreen, showControls, isPlaying]);
7244
+ return showControls ? "opacity-100" : "opacity-0";
7245
+ }, [showControls]);
7216
7246
  const handleVideoKeyDown = (0, import_react22.useCallback)(
7217
7247
  (e) => {
7218
7248
  if (e.key) {
@@ -7269,7 +7299,7 @@ var VideoPlayer = ({
7269
7299
  ]
7270
7300
  );
7271
7301
  return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: cn("flex flex-col", className), children: [
7272
- (title || subtitleText) && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "bg-subject-1 rounded-t-xl px-8 py-4 flex items-end justify-between min-h-20", children: /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "flex flex-col gap-1", children: [
7302
+ (title || subtitleText) && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "bg-subject-1 px-8 py-4 flex items-end justify-between min-h-20", children: /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "flex flex-col gap-1", children: [
7273
7303
  title && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
7274
7304
  Text_default,
7275
7305
  {
@@ -7298,13 +7328,14 @@ var VideoPlayer = ({
7298
7328
  {
7299
7329
  className: cn(
7300
7330
  "relative w-full bg-background overflow-hidden group",
7301
- title || subtitleText ? "rounded-b-xl" : "rounded-xl",
7331
+ "rounded-b-xl",
7302
7332
  // Hide cursor when controls are hidden and video is playing
7303
7333
  isPlaying && !showControls ? "cursor-none group-hover:cursor-default" : "cursor-default"
7304
7334
  ),
7305
7335
  "aria-label": title ? `Video player: ${title}` : "Video player",
7306
7336
  onMouseMove: handleMouseMove,
7307
- onMouseEnter: showControlsWithTimer,
7337
+ onMouseEnter: handleMouseEnter,
7338
+ onTouchStart: handleMouseEnter,
7308
7339
  onMouseLeave: handleMouseLeave,
7309
7340
  children: [
7310
7341
  /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(