refactor: breakdown VideoControls
This commit is contained in:
Peifan Li
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,195 @@
|
||||
import { Box, IconButton, Stack, Tooltip, useMediaQuery } from '@mui/material';
|
||||
import { Pause, PlayArrow } from '@mui/icons-material';
|
||||
import React from 'react';
|
||||
import { useTheme } from '@mui/material';
|
||||
import { useLanguage } from '../../../contexts/LanguageContext';
|
||||
import ProgressBar from './ProgressBar';
|
||||
import VolumeControl from './VolumeControl';
|
||||
import SubtitleControl from './SubtitleControl';
|
||||
import FullscreenControl from './FullscreenControl';
|
||||
import LoopControl from './LoopControl';
|
||||
import PlaybackControls from './PlaybackControls';
|
||||
|
||||
interface ControlsOverlayProps {
|
||||
isFullscreen: boolean;
|
||||
controlsVisible: boolean;
|
||||
isPlaying: boolean;
|
||||
currentTime: number;
|
||||
duration: number;
|
||||
isDragging: boolean;
|
||||
volume: number;
|
||||
showVolumeSlider: boolean;
|
||||
volumeSliderRef: React.RefObject<HTMLDivElement | null>;
|
||||
subtitles: Array<{ language: string; filename: string; path: string }>;
|
||||
subtitlesEnabled: boolean;
|
||||
isLooping: boolean;
|
||||
subtitleMenuAnchor: HTMLElement | null;
|
||||
onPlayPause: () => void;
|
||||
onSeek: (seconds: number) => void;
|
||||
onProgressChange: (value: number) => void;
|
||||
onProgressChangeCommitted: (value: number) => void;
|
||||
onProgressMouseDown: () => void;
|
||||
onVolumeChange: (value: number) => void;
|
||||
onVolumeClick: () => void;
|
||||
onVolumeMouseEnter: () => void;
|
||||
onVolumeMouseLeave: () => void;
|
||||
onSliderMouseEnter: () => void;
|
||||
onSliderMouseLeave: () => void;
|
||||
onSubtitleClick: (event: React.MouseEvent<HTMLElement>) => void;
|
||||
onCloseSubtitleMenu: () => void;
|
||||
onSelectSubtitle: (index: number) => void;
|
||||
onToggleFullscreen: () => void;
|
||||
onToggleLoop: () => void;
|
||||
onControlsMouseEnter: () => void;
|
||||
}
|
||||
|
||||
const ControlsOverlay: React.FC<ControlsOverlayProps> = ({
|
||||
isFullscreen,
|
||||
controlsVisible,
|
||||
isPlaying,
|
||||
currentTime,
|
||||
duration,
|
||||
isDragging,
|
||||
volume,
|
||||
showVolumeSlider,
|
||||
volumeSliderRef,
|
||||
subtitles,
|
||||
subtitlesEnabled,
|
||||
isLooping,
|
||||
subtitleMenuAnchor,
|
||||
onPlayPause,
|
||||
onSeek,
|
||||
onProgressChange,
|
||||
onProgressChangeCommitted,
|
||||
onProgressMouseDown,
|
||||
onVolumeChange,
|
||||
onVolumeClick,
|
||||
onVolumeMouseEnter,
|
||||
onVolumeMouseLeave,
|
||||
onSliderMouseEnter,
|
||||
onSliderMouseLeave,
|
||||
onSubtitleClick,
|
||||
onCloseSubtitleMenu,
|
||||
onSelectSubtitle,
|
||||
onToggleFullscreen,
|
||||
onToggleLoop,
|
||||
onControlsMouseEnter
|
||||
}) => {
|
||||
const theme = useTheme();
|
||||
const { t } = useLanguage();
|
||||
const isTouch = useMediaQuery('(hover: none), (pointer: coarse)');
|
||||
|
||||
return (
|
||||
<Box
|
||||
sx={{
|
||||
p: 1,
|
||||
bgcolor: theme.palette.mode === 'dark' ? '#1a1a1a' : '#f5f5f5',
|
||||
opacity: isFullscreen
|
||||
? (controlsVisible ? 0.3 : 0)
|
||||
: 1,
|
||||
visibility: isFullscreen && !controlsVisible ? 'hidden' : 'visible',
|
||||
transition: 'opacity 0.3s, visibility 0.3s, background-color 0.3s',
|
||||
pointerEvents: isFullscreen && !controlsVisible ? 'none' : 'auto',
|
||||
'&:hover': {
|
||||
opacity: isFullscreen && controlsVisible ? 1 : (isFullscreen ? 0 : 1)
|
||||
}
|
||||
}}
|
||||
onMouseEnter={onControlsMouseEnter}
|
||||
>
|
||||
{/* Progress Bar */}
|
||||
<Box sx={{ px: { xs: 0.5, sm: 2 }, mb: 1 }}>
|
||||
<Stack direction="row" spacing={{ xs: 0.5, sm: 1 }} alignItems="center">
|
||||
{/* Left Side: Volume and Play */}
|
||||
<Stack direction="row" spacing={0.5} alignItems="center" sx={{ mr: { xs: 0.5, sm: 1 } }}>
|
||||
<VolumeControl
|
||||
volume={volume}
|
||||
showVolumeSlider={showVolumeSlider}
|
||||
volumeSliderRef={volumeSliderRef}
|
||||
onVolumeChange={onVolumeChange}
|
||||
onVolumeClick={onVolumeClick}
|
||||
onMouseEnter={onVolumeMouseEnter}
|
||||
onMouseLeave={onVolumeMouseLeave}
|
||||
onSliderMouseEnter={onSliderMouseEnter}
|
||||
onSliderMouseLeave={onSliderMouseLeave}
|
||||
/>
|
||||
|
||||
{/* Play/Pause */}
|
||||
<Tooltip title={isPlaying ? t('paused') : t('playing')} disableHoverListener={isTouch}>
|
||||
<IconButton
|
||||
color={isPlaying ? "secondary" : "primary"}
|
||||
onClick={onPlayPause}
|
||||
size="small"
|
||||
>
|
||||
{isPlaying ? <Pause /> : <PlayArrow />}
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
</Stack>
|
||||
|
||||
<ProgressBar
|
||||
currentTime={currentTime}
|
||||
duration={duration}
|
||||
onProgressChange={onProgressChange}
|
||||
onProgressChangeCommitted={onProgressChangeCommitted}
|
||||
onProgressMouseDown={onProgressMouseDown}
|
||||
/>
|
||||
|
||||
{/* Subtitle Button (Mobile only, next to progress bar) */}
|
||||
<SubtitleControl
|
||||
subtitles={subtitles}
|
||||
subtitlesEnabled={subtitlesEnabled}
|
||||
subtitleMenuAnchor={subtitleMenuAnchor}
|
||||
onSubtitleClick={onSubtitleClick}
|
||||
onCloseMenu={onCloseSubtitleMenu}
|
||||
onSelectSubtitle={onSelectSubtitle}
|
||||
showOnMobile={true}
|
||||
/>
|
||||
|
||||
{/* Right Side: Fullscreen, Subtitle, Loop (Desktop only) */}
|
||||
<Stack direction="row" spacing={0.5} alignItems="center" sx={{ ml: 1, display: { xs: 'none', sm: 'flex' } }}>
|
||||
<FullscreenControl
|
||||
isFullscreen={isFullscreen}
|
||||
onToggle={onToggleFullscreen}
|
||||
/>
|
||||
|
||||
<SubtitleControl
|
||||
subtitles={subtitles}
|
||||
subtitlesEnabled={subtitlesEnabled}
|
||||
subtitleMenuAnchor={subtitleMenuAnchor}
|
||||
onSubtitleClick={onSubtitleClick}
|
||||
onCloseMenu={onCloseSubtitleMenu}
|
||||
onSelectSubtitle={onSelectSubtitle}
|
||||
/>
|
||||
|
||||
<LoopControl
|
||||
isLooping={isLooping}
|
||||
onToggle={onToggleLoop}
|
||||
/>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</Box>
|
||||
|
||||
{/* Seek Controls */}
|
||||
<PlaybackControls
|
||||
isPlaying={isPlaying}
|
||||
onPlayPause={onPlayPause}
|
||||
onSeek={onSeek}
|
||||
/>
|
||||
|
||||
{/* Mobile: Fullscreen, Loop */}
|
||||
<Stack direction="row" spacing={0.5} alignItems="center" sx={{ display: { xs: 'flex', sm: 'none' }, ml: 1, justifyContent: 'center', mt: 1 }}>
|
||||
<FullscreenControl
|
||||
isFullscreen={isFullscreen}
|
||||
onToggle={onToggleFullscreen}
|
||||
/>
|
||||
|
||||
<LoopControl
|
||||
isLooping={isLooping}
|
||||
onToggle={onToggleLoop}
|
||||
/>
|
||||
</Stack>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
export default ControlsOverlay;
|
||||
|
||||
@@ -0,0 +1,31 @@
|
||||
import { Fullscreen, FullscreenExit } from '@mui/icons-material';
|
||||
import { IconButton, Tooltip, useMediaQuery } from '@mui/material';
|
||||
import React from 'react';
|
||||
import { useLanguage } from '../../../contexts/LanguageContext';
|
||||
|
||||
interface FullscreenControlProps {
|
||||
isFullscreen: boolean;
|
||||
onToggle: () => void;
|
||||
}
|
||||
|
||||
const FullscreenControl: React.FC<FullscreenControlProps> = ({
|
||||
isFullscreen,
|
||||
onToggle
|
||||
}) => {
|
||||
const { t } = useLanguage();
|
||||
const isTouch = useMediaQuery('(hover: none), (pointer: coarse)');
|
||||
|
||||
return (
|
||||
<Tooltip title={isFullscreen ? t('exitFullscreen') : t('enterFullscreen')} disableHoverListener={isTouch}>
|
||||
<IconButton
|
||||
onClick={onToggle}
|
||||
size="small"
|
||||
>
|
||||
{isFullscreen ? <FullscreenExit /> : <Fullscreen />}
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
);
|
||||
};
|
||||
|
||||
export default FullscreenControl;
|
||||
|
||||
@@ -0,0 +1,32 @@
|
||||
import { Loop } from '@mui/icons-material';
|
||||
import { IconButton, Tooltip, useMediaQuery } from '@mui/material';
|
||||
import React from 'react';
|
||||
import { useLanguage } from '../../../contexts/LanguageContext';
|
||||
|
||||
interface LoopControlProps {
|
||||
isLooping: boolean;
|
||||
onToggle: () => void;
|
||||
}
|
||||
|
||||
const LoopControl: React.FC<LoopControlProps> = ({
|
||||
isLooping,
|
||||
onToggle
|
||||
}) => {
|
||||
const { t } = useLanguage();
|
||||
const isTouch = useMediaQuery('(hover: none), (pointer: coarse)');
|
||||
|
||||
return (
|
||||
<Tooltip title={`${t('loop')} ${isLooping ? t('on') : t('off')}`} disableHoverListener={isTouch}>
|
||||
<IconButton
|
||||
color={isLooping ? "primary" : "default"}
|
||||
onClick={onToggle}
|
||||
size="small"
|
||||
>
|
||||
<Loop />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
);
|
||||
};
|
||||
|
||||
export default LoopControl;
|
||||
|
||||
@@ -0,0 +1,96 @@
|
||||
import {
|
||||
FastForward,
|
||||
FastRewind,
|
||||
Forward10,
|
||||
KeyboardDoubleArrowLeft,
|
||||
KeyboardDoubleArrowRight,
|
||||
Pause,
|
||||
PlayArrow,
|
||||
Replay10
|
||||
} from '@mui/icons-material';
|
||||
import { IconButton, Stack, Tooltip, useMediaQuery } from '@mui/material';
|
||||
import React from 'react';
|
||||
import { useLanguage } from '../../../contexts/LanguageContext';
|
||||
|
||||
interface PlaybackControlsProps {
|
||||
isPlaying: boolean;
|
||||
onPlayPause: () => void;
|
||||
onSeek: (seconds: number) => void;
|
||||
}
|
||||
|
||||
const PlaybackControls: React.FC<PlaybackControlsProps> = ({
|
||||
isPlaying,
|
||||
onPlayPause,
|
||||
onSeek
|
||||
}) => {
|
||||
const { t } = useLanguage();
|
||||
const isTouch = useMediaQuery('(hover: none), (pointer: coarse)');
|
||||
|
||||
return (
|
||||
<Stack
|
||||
direction="row"
|
||||
spacing={0.5}
|
||||
justifyContent="center"
|
||||
alignItems="center"
|
||||
sx={{ width: '100%', flexWrap: 'wrap' }}
|
||||
>
|
||||
<Tooltip title="-10m" disableHoverListener={isTouch}>
|
||||
<IconButton
|
||||
onClick={() => onSeek(-600)}
|
||||
size="small"
|
||||
sx={{ padding: { xs: '10px', sm: '8px' } }}
|
||||
>
|
||||
<KeyboardDoubleArrowLeft />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
<Tooltip title="-1m" disableHoverListener={isTouch}>
|
||||
<IconButton
|
||||
onClick={() => onSeek(-60)}
|
||||
size="small"
|
||||
sx={{ padding: { xs: '10px', sm: '8px' } }}
|
||||
>
|
||||
<FastRewind />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
<Tooltip title="-10s" disableHoverListener={isTouch}>
|
||||
<IconButton
|
||||
onClick={() => onSeek(-10)}
|
||||
size="small"
|
||||
sx={{ padding: { xs: '10px', sm: '8px' } }}
|
||||
>
|
||||
<Replay10 />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
<Tooltip title="+10s" disableHoverListener={isTouch}>
|
||||
<IconButton
|
||||
onClick={() => onSeek(10)}
|
||||
size="small"
|
||||
sx={{ padding: { xs: '10px', sm: '8px' } }}
|
||||
>
|
||||
<Forward10 />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
<Tooltip title="+1m" disableHoverListener={isTouch}>
|
||||
<IconButton
|
||||
onClick={() => onSeek(60)}
|
||||
size="small"
|
||||
sx={{ padding: { xs: '10px', sm: '8px' } }}
|
||||
>
|
||||
<FastForward />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
<Tooltip title="+10m" disableHoverListener={isTouch}>
|
||||
<IconButton
|
||||
onClick={() => onSeek(600)}
|
||||
size="small"
|
||||
sx={{ padding: { xs: '10px', sm: '8px' } }}
|
||||
>
|
||||
<KeyboardDoubleArrowRight />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
</Stack>
|
||||
);
|
||||
};
|
||||
|
||||
export default PlaybackControls;
|
||||
|
||||
@@ -0,0 +1,91 @@
|
||||
import { Slider, Stack, Typography, useTheme } from '@mui/material';
|
||||
import React from 'react';
|
||||
|
||||
interface ProgressBarProps {
|
||||
currentTime: number;
|
||||
duration: number;
|
||||
onProgressChange: (value: number) => void;
|
||||
onProgressChangeCommitted: (value: number) => void;
|
||||
onProgressMouseDown: () => void;
|
||||
}
|
||||
|
||||
const ProgressBar: React.FC<ProgressBarProps> = ({
|
||||
currentTime,
|
||||
duration,
|
||||
onProgressChange,
|
||||
onProgressChangeCommitted,
|
||||
onProgressMouseDown
|
||||
}) => {
|
||||
const theme = useTheme();
|
||||
|
||||
const formatTime = (seconds: number): string => {
|
||||
if (isNaN(seconds) || !isFinite(seconds)) return '0:00';
|
||||
const hours = Math.floor(seconds / 3600);
|
||||
const minutes = Math.floor((seconds % 3600) / 60);
|
||||
const secs = Math.floor(seconds % 60);
|
||||
|
||||
if (hours > 0) {
|
||||
return `${hours}:${minutes.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
|
||||
}
|
||||
return `${minutes}:${secs.toString().padStart(2, '0')}`;
|
||||
};
|
||||
|
||||
return (
|
||||
<Stack direction="row" spacing={{ xs: 0.5, sm: 1 }} alignItems="center" sx={{ flex: 1, minWidth: 0 }}>
|
||||
<Typography variant="caption" sx={{ minWidth: { xs: '35px', sm: '45px' }, textAlign: 'right', fontSize: '0.75rem' }}>
|
||||
{formatTime(currentTime)}
|
||||
</Typography>
|
||||
<Slider
|
||||
value={duration > 0 && isFinite(duration) ? (currentTime / duration) * 100 : 0}
|
||||
onChange={(_event, newValue) => {
|
||||
const value = Array.isArray(newValue) ? newValue[0] : newValue;
|
||||
onProgressChange(value);
|
||||
}}
|
||||
onChangeCommitted={(_event, newValue) => {
|
||||
const value = Array.isArray(newValue) ? newValue[0] : newValue;
|
||||
onProgressChangeCommitted(value);
|
||||
}}
|
||||
onMouseDown={onProgressMouseDown}
|
||||
disabled={duration <= 0 || !isFinite(duration)}
|
||||
size="small"
|
||||
sx={{
|
||||
flex: 1,
|
||||
minWidth: 0,
|
||||
color: theme.palette.primary.main,
|
||||
transition: 'all 0.2s ease',
|
||||
'& .MuiSlider-thumb': {
|
||||
width: 12,
|
||||
height: 12,
|
||||
transition: 'width 0.2s, height 0.2s',
|
||||
'&:hover': {
|
||||
width: 16,
|
||||
height: 16,
|
||||
}
|
||||
},
|
||||
'& .MuiSlider-track': {
|
||||
height: 4,
|
||||
transition: 'height 0.2s ease',
|
||||
},
|
||||
'& .MuiSlider-rail': {
|
||||
height: 4,
|
||||
transition: 'height 0.2s ease',
|
||||
},
|
||||
'&:hover': {
|
||||
'& .MuiSlider-track': {
|
||||
height: 8,
|
||||
},
|
||||
'& .MuiSlider-rail': {
|
||||
height: 8,
|
||||
}
|
||||
}
|
||||
}}
|
||||
/>
|
||||
<Typography variant="caption" sx={{ minWidth: { xs: '35px', sm: '45px' }, textAlign: 'left', fontSize: '0.75rem' }}>
|
||||
{formatTime(duration)}
|
||||
</Typography>
|
||||
</Stack>
|
||||
);
|
||||
};
|
||||
|
||||
export default ProgressBar;
|
||||
|
||||
@@ -0,0 +1,61 @@
|
||||
import { Subtitles, SubtitlesOff } from '@mui/icons-material';
|
||||
import { IconButton, Menu, MenuItem, Tooltip, useMediaQuery } from '@mui/material';
|
||||
import React from 'react';
|
||||
import { useLanguage } from '../../../contexts/LanguageContext';
|
||||
|
||||
interface SubtitleControlProps {
|
||||
subtitles: Array<{ language: string; filename: string; path: string }>;
|
||||
subtitlesEnabled: boolean;
|
||||
subtitleMenuAnchor: HTMLElement | null;
|
||||
onSubtitleClick: (event: React.MouseEvent<HTMLElement>) => void;
|
||||
onCloseMenu: () => void;
|
||||
onSelectSubtitle: (index: number) => void;
|
||||
showOnMobile?: boolean;
|
||||
}
|
||||
|
||||
const SubtitleControl: React.FC<SubtitleControlProps> = ({
|
||||
subtitles,
|
||||
subtitlesEnabled,
|
||||
subtitleMenuAnchor,
|
||||
onSubtitleClick,
|
||||
onCloseMenu,
|
||||
onSelectSubtitle,
|
||||
showOnMobile = false
|
||||
}) => {
|
||||
const { t } = useLanguage();
|
||||
const isTouch = useMediaQuery('(hover: none), (pointer: coarse)');
|
||||
|
||||
if (!subtitles || subtitles.length === 0) return null;
|
||||
|
||||
return (
|
||||
<>
|
||||
<Tooltip title={subtitlesEnabled ? 'Subtitles' : 'Subtitles Off'} disableHoverListener={isTouch}>
|
||||
<IconButton
|
||||
color={subtitlesEnabled ? "primary" : "default"}
|
||||
onClick={onSubtitleClick}
|
||||
size="small"
|
||||
sx={showOnMobile ? { display: { xs: 'flex', sm: 'none' }, ml: { xs: 0.25, sm: 0.5 } } : {}}
|
||||
>
|
||||
{subtitlesEnabled ? <Subtitles /> : <SubtitlesOff />}
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
<Menu
|
||||
anchorEl={subtitleMenuAnchor}
|
||||
open={Boolean(subtitleMenuAnchor)}
|
||||
onClose={onCloseMenu}
|
||||
>
|
||||
<MenuItem onClick={() => onSelectSubtitle(-1)}>
|
||||
{t('off') || 'Off'}
|
||||
</MenuItem>
|
||||
{subtitles.map((subtitle, index) => (
|
||||
<MenuItem key={subtitle.language} onClick={() => onSelectSubtitle(index)}>
|
||||
{subtitle.language.toUpperCase()}
|
||||
</MenuItem>
|
||||
))}
|
||||
</Menu>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default SubtitleControl;
|
||||
|
||||
@@ -0,0 +1,161 @@
|
||||
import { Box, Typography } from '@mui/material';
|
||||
import React, { useMemo } from 'react';
|
||||
import { useLanguage } from '../../../contexts/LanguageContext';
|
||||
|
||||
interface VideoElementProps {
|
||||
videoRef: React.RefObject<HTMLVideoElement | null>;
|
||||
src: string;
|
||||
poster?: string;
|
||||
isLoading: boolean;
|
||||
loadError: string | null;
|
||||
subtitles: Array<{ language: string; filename: string; path: string }>;
|
||||
onClick: () => void;
|
||||
onPlay: () => void;
|
||||
onPause: () => void;
|
||||
onEnded?: () => void;
|
||||
onTimeUpdate: (e: React.SyntheticEvent<HTMLVideoElement>) => void;
|
||||
onLoadedMetadata: (e: React.SyntheticEvent<HTMLVideoElement>) => void;
|
||||
onError: (e: React.SyntheticEvent<HTMLVideoElement>) => void;
|
||||
onLoadStart: () => void;
|
||||
onCanPlay: () => void;
|
||||
onLoadedData: () => void;
|
||||
onSubtitleInit: (e: React.SyntheticEvent<HTMLVideoElement>) => void;
|
||||
}
|
||||
|
||||
const VideoElement: React.FC<VideoElementProps> = ({
|
||||
videoRef,
|
||||
src,
|
||||
poster,
|
||||
isLoading,
|
||||
loadError,
|
||||
subtitles,
|
||||
onClick,
|
||||
onPlay,
|
||||
onPause,
|
||||
onEnded,
|
||||
onTimeUpdate,
|
||||
onLoadedMetadata,
|
||||
onError,
|
||||
onLoadStart,
|
||||
onCanPlay,
|
||||
onLoadedData,
|
||||
onSubtitleInit
|
||||
}) => {
|
||||
const { t } = useLanguage();
|
||||
// Use useMemo to generate a stable unique ID per component instance
|
||||
// Using Date.now() and a simple counter is safe for non-cryptographic purposes
|
||||
const videoId = useMemo(() => {
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
const counter = (globalThis as any).__videoControlCounter = ((globalThis as any).__videoControlCounter || 0) + 1;
|
||||
return `video-controls-${Date.now()}-${counter}`;
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* Scoped style for centering subtitles */}
|
||||
<style>
|
||||
{`
|
||||
#${videoId}::cue {
|
||||
text-align: center !important;
|
||||
line-height: 1.5;
|
||||
background-color: rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
|
||||
#${videoId}::-webkit-media-text-track-display {
|
||||
text-align: center !important;
|
||||
}
|
||||
|
||||
#${videoId}::-webkit-media-text-track-container {
|
||||
text-align: center !important;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
#${videoId}::cue-region {
|
||||
text-align: center !important;
|
||||
}
|
||||
`}
|
||||
</style>
|
||||
|
||||
{/* Loading indicator */}
|
||||
{isLoading && (
|
||||
<Box
|
||||
sx={{
|
||||
position: 'absolute',
|
||||
top: '50%',
|
||||
left: '50%',
|
||||
transform: 'translate(-50%, -50%)',
|
||||
zIndex: 10,
|
||||
bgcolor: 'rgba(0, 0, 0, 0.7)',
|
||||
borderRadius: 2,
|
||||
p: 2,
|
||||
color: 'white'
|
||||
}}
|
||||
>
|
||||
<Typography variant="body2">{t('loadingVideo') || 'Loading video...'}</Typography>
|
||||
</Box>
|
||||
)}
|
||||
|
||||
{/* Error message */}
|
||||
{loadError && (
|
||||
<Box
|
||||
sx={{
|
||||
position: 'absolute',
|
||||
top: '50%',
|
||||
left: '50%',
|
||||
transform: 'translate(-50%, -50%)',
|
||||
zIndex: 10,
|
||||
bgcolor: 'rgba(211, 47, 47, 0.9)',
|
||||
borderRadius: 2,
|
||||
p: 2,
|
||||
color: 'white',
|
||||
maxWidth: '80%',
|
||||
textAlign: 'center'
|
||||
}}
|
||||
>
|
||||
<Typography variant="body2">{loadError}</Typography>
|
||||
</Box>
|
||||
)}
|
||||
|
||||
<video
|
||||
id={videoId}
|
||||
ref={videoRef}
|
||||
style={{ width: '100%', aspectRatio: '16/9', display: 'block', cursor: 'pointer' }}
|
||||
controls={false}
|
||||
src={src}
|
||||
preload="metadata"
|
||||
onClick={onClick}
|
||||
onPlay={onPlay}
|
||||
onPause={onPause}
|
||||
onEnded={onEnded}
|
||||
onTimeUpdate={onTimeUpdate}
|
||||
onLoadedMetadata={(e) => {
|
||||
onLoadedMetadata(e);
|
||||
onSubtitleInit(e);
|
||||
}}
|
||||
onError={onError}
|
||||
onLoadStart={onLoadStart}
|
||||
onCanPlay={onCanPlay}
|
||||
onLoadedData={onLoadedData}
|
||||
playsInline
|
||||
crossOrigin="anonymous"
|
||||
poster={poster}
|
||||
>
|
||||
{subtitles && subtitles.map((subtitle) => (
|
||||
<track
|
||||
key={subtitle.language}
|
||||
kind="subtitles"
|
||||
src={`${import.meta.env.VITE_BACKEND_URL}${subtitle.path}`}
|
||||
srcLang={subtitle.language}
|
||||
label={subtitle.language.toUpperCase()}
|
||||
/>
|
||||
))}
|
||||
Your browser does not support the video tag.
|
||||
</video>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default VideoElement;
|
||||
|
||||
@@ -0,0 +1,108 @@
|
||||
import { VolumeDown, VolumeOff, VolumeUp } from '@mui/icons-material';
|
||||
import { Box, IconButton, Slider, Tooltip, useMediaQuery, useTheme } from '@mui/material';
|
||||
import React from 'react';
|
||||
|
||||
interface VolumeControlProps {
|
||||
volume: number;
|
||||
showVolumeSlider: boolean;
|
||||
volumeSliderRef: React.RefObject<HTMLDivElement>;
|
||||
onVolumeChange: (value: number) => void;
|
||||
onVolumeClick: () => void;
|
||||
onMouseEnter: () => void;
|
||||
onMouseLeave: () => void;
|
||||
onSliderMouseEnter: () => void;
|
||||
onSliderMouseLeave: () => void;
|
||||
}
|
||||
|
||||
const VolumeControl: React.FC<VolumeControlProps> = ({
|
||||
volume,
|
||||
showVolumeSlider,
|
||||
volumeSliderRef,
|
||||
onVolumeChange,
|
||||
onVolumeClick,
|
||||
onMouseEnter,
|
||||
onMouseLeave,
|
||||
onSliderMouseEnter,
|
||||
onSliderMouseLeave
|
||||
}) => {
|
||||
const theme = useTheme();
|
||||
const isTouch = useMediaQuery('(hover: none), (pointer: coarse)');
|
||||
|
||||
const getVolumeIcon = () => {
|
||||
if (volume === 0) return <VolumeOff />;
|
||||
if (volume < 0.5) return <VolumeDown />;
|
||||
return <VolumeUp />;
|
||||
};
|
||||
|
||||
return (
|
||||
<Box
|
||||
ref={volumeSliderRef}
|
||||
sx={{
|
||||
position: 'relative',
|
||||
display: { xs: 'none', md: 'flex' },
|
||||
alignItems: 'center'
|
||||
}}
|
||||
onMouseEnter={onMouseEnter}
|
||||
onMouseLeave={onMouseLeave}
|
||||
>
|
||||
<Tooltip title={volume === 0 ? 'Unmute' : 'Mute'} disableHoverListener={isTouch}>
|
||||
<IconButton
|
||||
onClick={onVolumeClick}
|
||||
size="small"
|
||||
>
|
||||
{getVolumeIcon()}
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
{showVolumeSlider && (
|
||||
<Box
|
||||
sx={{
|
||||
position: 'absolute',
|
||||
bottom: '100%',
|
||||
left: '50%',
|
||||
transform: 'translateX(-50%)',
|
||||
mb: 0.5,
|
||||
width: '40px',
|
||||
bgcolor: theme.palette.mode === 'dark' ? '#2a2a2a' : '#fff',
|
||||
p: 1,
|
||||
borderRadius: 1,
|
||||
boxShadow: 2,
|
||||
zIndex: 1000,
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
pointerEvents: 'auto'
|
||||
}}
|
||||
onMouseEnter={onSliderMouseEnter}
|
||||
onMouseLeave={onSliderMouseLeave}
|
||||
>
|
||||
<Slider
|
||||
orientation="vertical"
|
||||
value={volume * 100}
|
||||
onChange={(_event, newValue) => {
|
||||
const value = Array.isArray(newValue) ? newValue[0] : newValue;
|
||||
onVolumeChange(value);
|
||||
}}
|
||||
min={0}
|
||||
max={100}
|
||||
size="small"
|
||||
sx={{
|
||||
height: '80px',
|
||||
'& .MuiSlider-thumb': {
|
||||
width: 12,
|
||||
height: 12,
|
||||
},
|
||||
'& .MuiSlider-track': {
|
||||
width: 4,
|
||||
},
|
||||
'& .MuiSlider-rail': {
|
||||
width: 4,
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
)}
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
export default VolumeControl;
|
||||
|
||||
@@ -0,0 +1,149 @@
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
|
||||
export const useFullscreen = (
|
||||
videoRef: React.RefObject<HTMLVideoElement | null>
|
||||
) => {
|
||||
const [isFullscreen, setIsFullscreen] = useState<boolean>(false);
|
||||
const [controlsVisible, setControlsVisible] = useState<boolean>(true);
|
||||
const hideControlsTimerRef = useRef<NodeJS.Timeout | null>(null);
|
||||
const videoContainerRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
useEffect(() => {
|
||||
const handleFullscreenChange = () => {
|
||||
setIsFullscreen(!!document.fullscreenElement);
|
||||
};
|
||||
|
||||
const handleWebkitBeginFullscreen = () => {
|
||||
setIsFullscreen(true);
|
||||
};
|
||||
|
||||
const handleWebkitEndFullscreen = () => {
|
||||
setIsFullscreen(false);
|
||||
};
|
||||
|
||||
const videoElement = videoRef.current;
|
||||
|
||||
document.addEventListener("fullscreenchange", handleFullscreenChange);
|
||||
if (videoElement) {
|
||||
videoElement.addEventListener(
|
||||
"webkitbeginfullscreen",
|
||||
handleWebkitBeginFullscreen
|
||||
);
|
||||
videoElement.addEventListener(
|
||||
"webkitendfullscreen",
|
||||
handleWebkitEndFullscreen
|
||||
);
|
||||
}
|
||||
|
||||
return () => {
|
||||
document.removeEventListener("fullscreenchange", handleFullscreenChange);
|
||||
if (videoElement) {
|
||||
videoElement.removeEventListener(
|
||||
"webkitbeginfullscreen",
|
||||
handleWebkitBeginFullscreen
|
||||
);
|
||||
videoElement.removeEventListener(
|
||||
"webkitendfullscreen",
|
||||
handleWebkitEndFullscreen
|
||||
);
|
||||
}
|
||||
};
|
||||
}, [videoRef]);
|
||||
|
||||
// Handle controls visibility in fullscreen mode
|
||||
useEffect(() => {
|
||||
const startHideTimer = () => {
|
||||
if (hideControlsTimerRef.current) {
|
||||
clearTimeout(hideControlsTimerRef.current);
|
||||
}
|
||||
|
||||
if (isFullscreen) {
|
||||
setControlsVisible(true);
|
||||
hideControlsTimerRef.current = setTimeout(() => {
|
||||
setControlsVisible(false);
|
||||
}, 5000);
|
||||
} else {
|
||||
setControlsVisible(true);
|
||||
if (hideControlsTimerRef.current) {
|
||||
clearTimeout(hideControlsTimerRef.current);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
startHideTimer();
|
||||
|
||||
return () => {
|
||||
if (hideControlsTimerRef.current) {
|
||||
clearTimeout(hideControlsTimerRef.current);
|
||||
}
|
||||
};
|
||||
}, [isFullscreen]);
|
||||
|
||||
// Handle mouse movement to show controls in fullscreen
|
||||
useEffect(() => {
|
||||
if (!isFullscreen) return;
|
||||
|
||||
const handleMouseMove = () => {
|
||||
setControlsVisible(true);
|
||||
|
||||
if (hideControlsTimerRef.current) {
|
||||
clearTimeout(hideControlsTimerRef.current);
|
||||
}
|
||||
|
||||
hideControlsTimerRef.current = setTimeout(() => {
|
||||
setControlsVisible(false);
|
||||
}, 5000);
|
||||
};
|
||||
|
||||
const container = videoContainerRef.current;
|
||||
if (container) {
|
||||
container.addEventListener("mousemove", handleMouseMove);
|
||||
return () => {
|
||||
container.removeEventListener("mousemove", handleMouseMove);
|
||||
};
|
||||
}
|
||||
}, [isFullscreen]);
|
||||
|
||||
const handleToggleFullscreen = () => {
|
||||
const videoContainer = videoRef.current?.parentElement;
|
||||
const videoElement = videoRef.current;
|
||||
|
||||
if (!videoContainer || !videoElement) return;
|
||||
|
||||
if (!document.fullscreenElement) {
|
||||
if (videoContainer.requestFullscreen) {
|
||||
videoContainer.requestFullscreen().catch((err) => {
|
||||
console.error(
|
||||
`Error attempting to enable fullscreen: ${err.message}`
|
||||
);
|
||||
});
|
||||
} else if ((videoElement as any).webkitEnterFullscreen) {
|
||||
(videoElement as any).webkitEnterFullscreen();
|
||||
}
|
||||
} else {
|
||||
if (document.exitFullscreen) {
|
||||
document.exitFullscreen();
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const handleControlsMouseEnter = () => {
|
||||
if (isFullscreen) {
|
||||
setControlsVisible(true);
|
||||
if (hideControlsTimerRef.current) {
|
||||
clearTimeout(hideControlsTimerRef.current);
|
||||
}
|
||||
hideControlsTimerRef.current = setTimeout(() => {
|
||||
setControlsVisible(false);
|
||||
}, 5000);
|
||||
}
|
||||
};
|
||||
|
||||
return {
|
||||
isFullscreen,
|
||||
controlsVisible,
|
||||
videoContainerRef,
|
||||
handleToggleFullscreen,
|
||||
handleControlsMouseEnter,
|
||||
};
|
||||
};
|
||||
@@ -0,0 +1,29 @@
|
||||
import { useEffect } from 'react';
|
||||
|
||||
interface UseKeyboardShortcutsProps {
|
||||
onSeekLeft: () => void;
|
||||
onSeekRight: () => void;
|
||||
}
|
||||
|
||||
export const useKeyboardShortcuts = ({ onSeekLeft, onSeekRight }: UseKeyboardShortcutsProps) => {
|
||||
useEffect(() => {
|
||||
const handleKeyDown = (e: KeyboardEvent) => {
|
||||
// Ignore if typing in an input or textarea
|
||||
if (document.activeElement instanceof HTMLInputElement || document.activeElement instanceof HTMLTextAreaElement) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (e.key === 'ArrowLeft') {
|
||||
onSeekLeft();
|
||||
} else if (e.key === 'ArrowRight') {
|
||||
onSeekRight();
|
||||
}
|
||||
};
|
||||
|
||||
window.addEventListener('keydown', handleKeyDown);
|
||||
return () => {
|
||||
window.removeEventListener('keydown', handleKeyDown);
|
||||
};
|
||||
}, [onSeekLeft, onSeekRight]);
|
||||
};
|
||||
|
||||
@@ -0,0 +1,97 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
|
||||
interface Subtitle {
|
||||
language: string;
|
||||
filename: string;
|
||||
path: string;
|
||||
}
|
||||
|
||||
interface UseSubtitlesProps {
|
||||
subtitles: Subtitle[];
|
||||
initialSubtitlesEnabled: boolean;
|
||||
videoRef: React.RefObject<HTMLVideoElement | null>;
|
||||
onSubtitlesToggle?: (enabled: boolean) => void;
|
||||
}
|
||||
|
||||
export const useSubtitles = ({
|
||||
subtitles,
|
||||
initialSubtitlesEnabled,
|
||||
videoRef,
|
||||
onSubtitlesToggle
|
||||
}: UseSubtitlesProps) => {
|
||||
const [subtitlesEnabled, setSubtitlesEnabled] = useState<boolean>(
|
||||
initialSubtitlesEnabled && subtitles.length > 0
|
||||
);
|
||||
const [subtitleMenuAnchor, setSubtitleMenuAnchor] = useState<null | HTMLElement>(null);
|
||||
|
||||
// Sync subtitle tracks when preference changes or subtitles become available
|
||||
useEffect(() => {
|
||||
if (videoRef.current && subtitles.length > 0) {
|
||||
const tracks = videoRef.current.textTracks;
|
||||
const newState = initialSubtitlesEnabled;
|
||||
setSubtitlesEnabled(newState);
|
||||
|
||||
// Hide all first
|
||||
for (let i = 0; i < tracks.length; i++) {
|
||||
tracks[i].mode = 'hidden';
|
||||
}
|
||||
|
||||
// If enabled, show the first one
|
||||
if (newState && tracks.length > 0) {
|
||||
tracks[0].mode = 'showing';
|
||||
}
|
||||
}
|
||||
}, [initialSubtitlesEnabled, subtitles, videoRef]);
|
||||
|
||||
const handleSubtitleClick = (event: React.MouseEvent<HTMLElement>) => {
|
||||
setSubtitleMenuAnchor(event.currentTarget);
|
||||
};
|
||||
|
||||
const handleCloseSubtitleMenu = () => {
|
||||
setSubtitleMenuAnchor(null);
|
||||
};
|
||||
|
||||
const handleSelectSubtitle = (index: number) => {
|
||||
if (videoRef.current) {
|
||||
const tracks = videoRef.current.textTracks;
|
||||
|
||||
// Hide all tracks first
|
||||
for (let i = 0; i < tracks.length; i++) {
|
||||
tracks[i].mode = 'hidden';
|
||||
}
|
||||
|
||||
if (index >= 0 && index < tracks.length) {
|
||||
tracks[index].mode = 'showing';
|
||||
setSubtitlesEnabled(true);
|
||||
if (onSubtitlesToggle) onSubtitlesToggle(true);
|
||||
} else {
|
||||
setSubtitlesEnabled(false);
|
||||
if (onSubtitlesToggle) onSubtitlesToggle(false);
|
||||
}
|
||||
}
|
||||
handleCloseSubtitleMenu();
|
||||
};
|
||||
|
||||
const initializeSubtitles = (e: React.SyntheticEvent<HTMLVideoElement>) => {
|
||||
const tracks = e.currentTarget.textTracks;
|
||||
const shouldShow = initialSubtitlesEnabled && subtitles.length > 0;
|
||||
|
||||
for (let i = 0; i < tracks.length; i++) {
|
||||
tracks[i].mode = 'hidden';
|
||||
}
|
||||
|
||||
if (shouldShow && tracks.length > 0) {
|
||||
tracks[0].mode = 'showing';
|
||||
}
|
||||
};
|
||||
|
||||
return {
|
||||
subtitlesEnabled,
|
||||
subtitleMenuAnchor,
|
||||
handleSubtitleClick,
|
||||
handleCloseSubtitleMenu,
|
||||
handleSelectSubtitle,
|
||||
initializeSubtitles
|
||||
};
|
||||
};
|
||||
|
||||
@@ -0,0 +1,83 @@
|
||||
import { useEffect, useRef, useState } from 'react';
|
||||
|
||||
export const useVideoLoading = () => {
|
||||
const [isLoading, setIsLoading] = useState<boolean>(false);
|
||||
const [loadError, setLoadError] = useState<string | null>(null);
|
||||
const loadTimeoutRef = useRef<NodeJS.Timeout | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
return () => {
|
||||
if (loadTimeoutRef.current) {
|
||||
clearTimeout(loadTimeoutRef.current);
|
||||
}
|
||||
};
|
||||
}, []);
|
||||
|
||||
const startLoading = () => {
|
||||
setIsLoading(true);
|
||||
setLoadError(null);
|
||||
|
||||
if (loadTimeoutRef.current) {
|
||||
clearTimeout(loadTimeoutRef.current);
|
||||
}
|
||||
|
||||
// Set a timeout for loading (30 seconds for large files)
|
||||
loadTimeoutRef.current = setTimeout(() => {
|
||||
setLoadError('Video is taking too long to load. Please try again or check your connection.');
|
||||
setIsLoading(false);
|
||||
}, 30000);
|
||||
};
|
||||
|
||||
const stopLoading = () => {
|
||||
setIsLoading(false);
|
||||
if (loadTimeoutRef.current) {
|
||||
clearTimeout(loadTimeoutRef.current);
|
||||
loadTimeoutRef.current = null;
|
||||
}
|
||||
};
|
||||
|
||||
const setError = (error: string | null) => {
|
||||
setIsLoading(false);
|
||||
setLoadError(error);
|
||||
if (loadTimeoutRef.current) {
|
||||
clearTimeout(loadTimeoutRef.current);
|
||||
loadTimeoutRef.current = null;
|
||||
}
|
||||
};
|
||||
|
||||
const handleVideoError = (e: React.SyntheticEvent<HTMLVideoElement>) => {
|
||||
console.error('Video error:', e);
|
||||
setIsLoading(false);
|
||||
const videoElement = e.currentTarget;
|
||||
if (videoElement.error) {
|
||||
console.error('Video error code:', videoElement.error.code);
|
||||
console.error('Video error message:', videoElement.error.message);
|
||||
let errorMessage = 'Failed to load video.';
|
||||
switch (videoElement.error?.code) {
|
||||
case 1: // MEDIA_ERR_ABORTED
|
||||
errorMessage = 'Video loading was aborted.';
|
||||
break;
|
||||
case 2: // MEDIA_ERR_NETWORK
|
||||
errorMessage = 'Network error while loading video. Please check your connection.';
|
||||
break;
|
||||
case 3: // MEDIA_ERR_DECODE
|
||||
errorMessage = 'Video decoding error. The file may be corrupted.';
|
||||
break;
|
||||
case 4: // MEDIA_ERR_SRC_NOT_SUPPORTED
|
||||
errorMessage = 'Video format not supported.';
|
||||
break;
|
||||
}
|
||||
setLoadError(errorMessage);
|
||||
}
|
||||
};
|
||||
|
||||
return {
|
||||
isLoading,
|
||||
loadError,
|
||||
startLoading,
|
||||
stopLoading,
|
||||
setError,
|
||||
handleVideoError
|
||||
};
|
||||
};
|
||||
|
||||
@@ -0,0 +1,188 @@
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
|
||||
interface UseVideoPlayerProps {
|
||||
src: string;
|
||||
autoPlay?: boolean;
|
||||
autoLoop?: boolean;
|
||||
startTime?: number;
|
||||
onTimeUpdate?: (currentTime: number) => void;
|
||||
onLoadedMetadata?: (duration: number) => void;
|
||||
// onEnded is passed through to the video element via the component, not used in this hook
|
||||
}
|
||||
|
||||
export const useVideoPlayer = ({
|
||||
src,
|
||||
autoPlay = false,
|
||||
autoLoop = false,
|
||||
startTime = 0,
|
||||
onTimeUpdate,
|
||||
onLoadedMetadata,
|
||||
}: UseVideoPlayerProps) => {
|
||||
const videoRef = useRef<HTMLVideoElement>(null);
|
||||
const [isPlaying, setIsPlaying] = useState<boolean>(false);
|
||||
const [isLooping, setIsLooping] = useState<boolean>(autoLoop);
|
||||
const [currentTime, setCurrentTime] = useState<number>(0);
|
||||
const [duration, setDuration] = useState<number>(0);
|
||||
const [isDragging, setIsDragging] = useState<boolean>(false);
|
||||
const videoSrcRef = useRef<string>("");
|
||||
|
||||
// Memory management: Clean up video source when component unmounts or src changes
|
||||
useEffect(() => {
|
||||
const videoElement = videoRef.current;
|
||||
if (!videoElement) return;
|
||||
|
||||
// Store previous src for cleanup
|
||||
const previousSrc = videoSrcRef.current;
|
||||
videoSrcRef.current = src;
|
||||
|
||||
// Clean up previous source to free memory
|
||||
if (previousSrc && previousSrc !== src) {
|
||||
videoElement.pause();
|
||||
videoElement.src = "";
|
||||
videoElement.load();
|
||||
// Reset state when src changes to prevent stale data flash
|
||||
setIsPlaying(false);
|
||||
setCurrentTime(0);
|
||||
setDuration(0);
|
||||
setIsDragging(false);
|
||||
}
|
||||
|
||||
// Set new source
|
||||
if (src) {
|
||||
videoElement.preload = "metadata";
|
||||
videoElement.src = src;
|
||||
}
|
||||
|
||||
return () => {
|
||||
// Cleanup on unmount
|
||||
if (videoElement) {
|
||||
videoElement.pause();
|
||||
videoElement.src = "";
|
||||
videoElement.load();
|
||||
}
|
||||
};
|
||||
}, [src]);
|
||||
|
||||
useEffect(() => {
|
||||
if (videoRef.current) {
|
||||
if (autoPlay) {
|
||||
videoRef.current.autoplay = true;
|
||||
}
|
||||
if (autoLoop) {
|
||||
videoRef.current.loop = true;
|
||||
setIsLooping(true);
|
||||
}
|
||||
}
|
||||
}, [autoPlay, autoLoop]);
|
||||
|
||||
// Listen for duration changes
|
||||
useEffect(() => {
|
||||
const videoElement = videoRef.current;
|
||||
if (!videoElement) return;
|
||||
|
||||
const handleDurationChange = () => {
|
||||
const videoDuration = videoElement.duration;
|
||||
setDuration(videoDuration);
|
||||
};
|
||||
|
||||
videoElement.addEventListener("durationchange", handleDurationChange);
|
||||
return () => {
|
||||
videoElement.removeEventListener("durationchange", handleDurationChange);
|
||||
};
|
||||
}, [videoRef]); // Include videoRef to ensure listener is attached when ref is ready
|
||||
|
||||
const handlePlayPause = () => {
|
||||
if (videoRef.current) {
|
||||
if (isPlaying) {
|
||||
videoRef.current.pause();
|
||||
} else {
|
||||
videoRef.current.play();
|
||||
}
|
||||
setIsPlaying(!isPlaying);
|
||||
}
|
||||
};
|
||||
|
||||
const handleSeek = (seconds: number) => {
|
||||
if (videoRef.current) {
|
||||
videoRef.current.currentTime += seconds;
|
||||
}
|
||||
};
|
||||
|
||||
const handleProgressChange = (newValue: number) => {
|
||||
if (!videoRef.current || duration <= 0 || !isFinite(duration)) return;
|
||||
const newTime = (newValue / 100) * duration;
|
||||
setCurrentTime(newTime);
|
||||
};
|
||||
|
||||
const handleProgressChangeCommitted = (newValue: number) => {
|
||||
if (videoRef.current && duration > 0 && isFinite(duration)) {
|
||||
const newTime = (newValue / 100) * duration;
|
||||
videoRef.current.currentTime = newTime;
|
||||
setCurrentTime(newTime);
|
||||
setIsDragging(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleProgressMouseDown = () => {
|
||||
setIsDragging(true);
|
||||
};
|
||||
|
||||
const handleToggleLoop = () => {
|
||||
if (videoRef.current) {
|
||||
const newState = !isLooping;
|
||||
videoRef.current.loop = newState;
|
||||
setIsLooping(newState);
|
||||
return newState;
|
||||
}
|
||||
return isLooping;
|
||||
};
|
||||
|
||||
const handleTimeUpdate = (e: React.SyntheticEvent<HTMLVideoElement>) => {
|
||||
const time = e.currentTarget.currentTime;
|
||||
if (!isDragging) {
|
||||
setCurrentTime(time);
|
||||
}
|
||||
if (onTimeUpdate) {
|
||||
onTimeUpdate(time);
|
||||
}
|
||||
};
|
||||
|
||||
const handleLoadedMetadata = (e: React.SyntheticEvent<HTMLVideoElement>) => {
|
||||
const videoDuration = e.currentTarget.duration;
|
||||
setDuration(videoDuration);
|
||||
if (startTime > 0) {
|
||||
e.currentTarget.currentTime = startTime;
|
||||
setCurrentTime(startTime);
|
||||
}
|
||||
if (onLoadedMetadata) {
|
||||
onLoadedMetadata(videoDuration);
|
||||
}
|
||||
};
|
||||
|
||||
const handlePlay = () => {
|
||||
setIsPlaying(true);
|
||||
};
|
||||
|
||||
const handlePause = () => {
|
||||
setIsPlaying(false);
|
||||
};
|
||||
|
||||
return {
|
||||
videoRef,
|
||||
isPlaying,
|
||||
isLooping,
|
||||
currentTime,
|
||||
duration,
|
||||
isDragging,
|
||||
handlePlayPause,
|
||||
handleSeek,
|
||||
handleProgressChange,
|
||||
handleProgressChangeCommitted,
|
||||
handleProgressMouseDown,
|
||||
handleToggleLoop,
|
||||
handleTimeUpdate,
|
||||
handleLoadedMetadata,
|
||||
handlePlay,
|
||||
handlePause,
|
||||
};
|
||||
};
|
||||
@@ -0,0 +1,130 @@
|
||||
import React, { useEffect, useRef, useState } from 'react';
|
||||
|
||||
export const useVolume = (videoRef: React.RefObject<HTMLVideoElement | null>) => {
|
||||
const [volume, setVolume] = useState<number>(1);
|
||||
const [previousVolume, setPreviousVolume] = useState<number>(1);
|
||||
const [showVolumeSlider, setShowVolumeSlider] = useState<boolean>(false);
|
||||
const volumeSliderRef = useRef<HTMLDivElement>(null);
|
||||
const volumeSliderHideTimerRef = useRef<NodeJS.Timeout | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (videoRef.current) {
|
||||
videoRef.current.volume = volume;
|
||||
}
|
||||
}, [volume, videoRef]);
|
||||
|
||||
// Close volume slider when clicking outside
|
||||
useEffect(() => {
|
||||
const handleClickOutside = (event: MouseEvent) => {
|
||||
if (volumeSliderRef.current && !volumeSliderRef.current.contains(event.target as Node)) {
|
||||
if (volumeSliderHideTimerRef.current) {
|
||||
clearTimeout(volumeSliderHideTimerRef.current);
|
||||
}
|
||||
setShowVolumeSlider(false);
|
||||
}
|
||||
};
|
||||
|
||||
if (showVolumeSlider) {
|
||||
document.addEventListener('mousedown', handleClickOutside);
|
||||
return () => {
|
||||
document.removeEventListener('mousedown', handleClickOutside);
|
||||
};
|
||||
}
|
||||
}, [showVolumeSlider]);
|
||||
|
||||
// Handle wheel event on volume control
|
||||
useEffect(() => {
|
||||
const handleWheel = (event: WheelEvent) => {
|
||||
if (volumeSliderRef.current && volumeSliderRef.current.contains(event.target as Node)) {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
if (videoRef.current) {
|
||||
const delta = event.deltaY > 0 ? 0.05 : -0.05;
|
||||
const newVolume = Math.max(0, Math.min(1, volume + delta));
|
||||
videoRef.current.volume = newVolume;
|
||||
setVolume(newVolume);
|
||||
if (newVolume > 0) {
|
||||
setPreviousVolume(newVolume);
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const container = volumeSliderRef.current;
|
||||
if (container) {
|
||||
container.addEventListener('wheel', handleWheel, { passive: false });
|
||||
return () => {
|
||||
container.removeEventListener('wheel', handleWheel);
|
||||
};
|
||||
}
|
||||
}, [volume, videoRef]);
|
||||
|
||||
// Cleanup timer on unmount
|
||||
useEffect(() => {
|
||||
return () => {
|
||||
if (volumeSliderHideTimerRef.current) {
|
||||
clearTimeout(volumeSliderHideTimerRef.current);
|
||||
}
|
||||
};
|
||||
}, []);
|
||||
|
||||
const handleVolumeChange = (newValue: number) => {
|
||||
if (videoRef.current) {
|
||||
const volumeValue = newValue / 100;
|
||||
videoRef.current.volume = volumeValue;
|
||||
setVolume(volumeValue);
|
||||
}
|
||||
};
|
||||
|
||||
const handleVolumeClick = () => {
|
||||
if (videoRef.current) {
|
||||
if (volume > 0) {
|
||||
setPreviousVolume(volume);
|
||||
videoRef.current.volume = 0;
|
||||
setVolume(0);
|
||||
} else {
|
||||
const volumeToRestore = previousVolume > 0 ? previousVolume : 1;
|
||||
videoRef.current.volume = volumeToRestore;
|
||||
setVolume(volumeToRestore);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const handleVolumeMouseEnter = () => {
|
||||
if (volumeSliderHideTimerRef.current) {
|
||||
clearTimeout(volumeSliderHideTimerRef.current);
|
||||
}
|
||||
setShowVolumeSlider(true);
|
||||
};
|
||||
|
||||
const handleVolumeMouseLeave = () => {
|
||||
volumeSliderHideTimerRef.current = setTimeout(() => {
|
||||
setShowVolumeSlider(false);
|
||||
}, 200);
|
||||
};
|
||||
|
||||
const handleSliderMouseEnter = () => {
|
||||
if (volumeSliderHideTimerRef.current) {
|
||||
clearTimeout(volumeSliderHideTimerRef.current);
|
||||
}
|
||||
};
|
||||
|
||||
const handleSliderMouseLeave = () => {
|
||||
volumeSliderHideTimerRef.current = setTimeout(() => {
|
||||
setShowVolumeSlider(false);
|
||||
}, 200);
|
||||
};
|
||||
|
||||
return {
|
||||
volume,
|
||||
showVolumeSlider,
|
||||
volumeSliderRef,
|
||||
handleVolumeChange,
|
||||
handleVolumeClick,
|
||||
handleVolumeMouseEnter,
|
||||
handleVolumeMouseLeave,
|
||||
handleSliderMouseEnter,
|
||||
handleSliderMouseLeave
|
||||
};
|
||||
};
|
||||
|
||||
178
frontend/src/components/VideoPlayer/VideoControls/index.tsx
Normal file
178
frontend/src/components/VideoPlayer/VideoControls/index.tsx
Normal file
@@ -0,0 +1,178 @@
|
||||
import { Box } from '@mui/material';
|
||||
import React, { useEffect } from 'react';
|
||||
import ControlsOverlay from './ControlsOverlay';
|
||||
import { useFullscreen } from './hooks/useFullscreen';
|
||||
import { useKeyboardShortcuts } from './hooks/useKeyboardShortcuts';
|
||||
import { useSubtitles } from './hooks/useSubtitles';
|
||||
import { useVideoLoading } from './hooks/useVideoLoading';
|
||||
import { useVideoPlayer } from './hooks/useVideoPlayer';
|
||||
import { useVolume } from './hooks/useVolume';
|
||||
import VideoElement from './VideoElement';
|
||||
|
||||
interface VideoControlsProps {
|
||||
src: string;
|
||||
autoPlay?: boolean;
|
||||
autoLoop?: boolean;
|
||||
onTimeUpdate?: (currentTime: number) => void;
|
||||
onLoadedMetadata?: (duration: number) => void;
|
||||
startTime?: number;
|
||||
subtitles?: Array<{ language: string; filename: string; path: string }>;
|
||||
subtitlesEnabled?: boolean;
|
||||
onSubtitlesToggle?: (enabled: boolean) => void;
|
||||
onLoopToggle?: (enabled: boolean) => void;
|
||||
onEnded?: () => void;
|
||||
poster?: string;
|
||||
}
|
||||
|
||||
const VideoControls: React.FC<VideoControlsProps> = ({
|
||||
src,
|
||||
autoPlay = false,
|
||||
autoLoop = false,
|
||||
onTimeUpdate,
|
||||
onLoadedMetadata,
|
||||
startTime = 0,
|
||||
subtitles = [],
|
||||
subtitlesEnabled: initialSubtitlesEnabled = true,
|
||||
onSubtitlesToggle,
|
||||
onLoopToggle,
|
||||
onEnded,
|
||||
poster
|
||||
}) => {
|
||||
// Core video player logic
|
||||
const videoPlayer = useVideoPlayer({
|
||||
src,
|
||||
autoPlay,
|
||||
autoLoop,
|
||||
startTime,
|
||||
onTimeUpdate,
|
||||
onLoadedMetadata
|
||||
});
|
||||
|
||||
// Fullscreen management
|
||||
const fullscreen = useFullscreen(videoPlayer.videoRef);
|
||||
|
||||
// Loading and error states
|
||||
const loading = useVideoLoading();
|
||||
|
||||
// Volume control
|
||||
const volume = useVolume(videoPlayer.videoRef);
|
||||
|
||||
// Subtitle management
|
||||
const subtitlesHook = useSubtitles({
|
||||
subtitles,
|
||||
initialSubtitlesEnabled,
|
||||
videoRef: videoPlayer.videoRef,
|
||||
onSubtitlesToggle
|
||||
});
|
||||
|
||||
// Keyboard shortcuts
|
||||
useKeyboardShortcuts({
|
||||
onSeekLeft: () => videoPlayer.handleSeek(-10),
|
||||
onSeekRight: () => videoPlayer.handleSeek(10)
|
||||
});
|
||||
|
||||
// Handle video source changes - trigger loading
|
||||
useEffect(() => {
|
||||
if (src) {
|
||||
loading.startLoading();
|
||||
} else {
|
||||
loading.stopLoading();
|
||||
loading.setError(null);
|
||||
}
|
||||
}, [src]); // eslint-disable-line react-hooks/exhaustive-deps
|
||||
|
||||
// Handle video loading events
|
||||
const handleLoadStart = () => {
|
||||
loading.startLoading();
|
||||
const videoElement = videoPlayer.videoRef.current;
|
||||
if (videoElement) {
|
||||
videoElement.preload = 'metadata';
|
||||
}
|
||||
};
|
||||
|
||||
const handleCanPlay = () => {
|
||||
loading.stopLoading();
|
||||
};
|
||||
|
||||
const handleLoadedData = () => {
|
||||
loading.stopLoading();
|
||||
};
|
||||
|
||||
const handleLoadedMetadata = (e: React.SyntheticEvent<HTMLVideoElement>) => {
|
||||
loading.stopLoading();
|
||||
videoPlayer.handleLoadedMetadata(e);
|
||||
};
|
||||
|
||||
// Note: onVolumeChange from video element is handled by the useVolume hook
|
||||
// through the useEffect that syncs volume state with the video element
|
||||
|
||||
const handleToggleLoop = () => {
|
||||
const newState = videoPlayer.handleToggleLoop();
|
||||
if (onLoopToggle) {
|
||||
onLoopToggle(newState);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Box
|
||||
ref={fullscreen.videoContainerRef}
|
||||
sx={{ width: '100%', bgcolor: 'black', borderRadius: { xs: 0, sm: 2 }, overflow: 'hidden', boxShadow: 4, position: 'relative' }}
|
||||
>
|
||||
<VideoElement
|
||||
videoRef={videoPlayer.videoRef}
|
||||
src={src}
|
||||
poster={poster}
|
||||
isLoading={loading.isLoading}
|
||||
loadError={loading.loadError}
|
||||
subtitles={subtitles}
|
||||
onClick={videoPlayer.handlePlayPause}
|
||||
onPlay={videoPlayer.handlePlay}
|
||||
onPause={videoPlayer.handlePause}
|
||||
onEnded={onEnded}
|
||||
onTimeUpdate={videoPlayer.handleTimeUpdate}
|
||||
onLoadedMetadata={handleLoadedMetadata}
|
||||
onError={loading.handleVideoError}
|
||||
onLoadStart={handleLoadStart}
|
||||
onCanPlay={handleCanPlay}
|
||||
onLoadedData={handleLoadedData}
|
||||
onSubtitleInit={subtitlesHook.initializeSubtitles}
|
||||
/>
|
||||
|
||||
<ControlsOverlay
|
||||
isFullscreen={fullscreen.isFullscreen}
|
||||
controlsVisible={fullscreen.controlsVisible}
|
||||
isPlaying={videoPlayer.isPlaying}
|
||||
currentTime={videoPlayer.currentTime}
|
||||
duration={videoPlayer.duration}
|
||||
isDragging={videoPlayer.isDragging}
|
||||
volume={volume.volume}
|
||||
showVolumeSlider={volume.showVolumeSlider}
|
||||
volumeSliderRef={volume.volumeSliderRef}
|
||||
subtitles={subtitles}
|
||||
subtitlesEnabled={subtitlesHook.subtitlesEnabled}
|
||||
isLooping={videoPlayer.isLooping}
|
||||
subtitleMenuAnchor={subtitlesHook.subtitleMenuAnchor}
|
||||
onPlayPause={videoPlayer.handlePlayPause}
|
||||
onSeek={videoPlayer.handleSeek}
|
||||
onProgressChange={videoPlayer.handleProgressChange}
|
||||
onProgressChangeCommitted={videoPlayer.handleProgressChangeCommitted}
|
||||
onProgressMouseDown={videoPlayer.handleProgressMouseDown}
|
||||
onVolumeChange={volume.handleVolumeChange}
|
||||
onVolumeClick={volume.handleVolumeClick}
|
||||
onVolumeMouseEnter={volume.handleVolumeMouseEnter}
|
||||
onVolumeMouseLeave={volume.handleVolumeMouseLeave}
|
||||
onSliderMouseEnter={volume.handleSliderMouseEnter}
|
||||
onSliderMouseLeave={volume.handleSliderMouseLeave}
|
||||
onSubtitleClick={subtitlesHook.handleSubtitleClick}
|
||||
onCloseSubtitleMenu={subtitlesHook.handleCloseSubtitleMenu}
|
||||
onSelectSubtitle={subtitlesHook.handleSelectSubtitle}
|
||||
onToggleFullscreen={fullscreen.handleToggleFullscreen}
|
||||
onToggleLoop={handleToggleLoop}
|
||||
onControlsMouseEnter={fullscreen.handleControlsMouseEnter}
|
||||
/>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
export default VideoControls;
|
||||
|
||||
Reference in New Issue
Block a user