kangaroo-and-rabbit/karideo
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

[FIX] correct fullsceen hide of menu

Browse Source
This commit is contained in:
Edouard DUPIN 2025-02-26 00:20:21 +01:00
parent 263a4ae4c0
commit 6df71e3341
1 changed files with 19 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
front/src/components/VideoPlayer.tsx
View File

@ -5,6 +5,7 @@ import {
MdFastForward, MdFastForward,
MdFastRewind, MdFastRewind,
MdFullscreen, MdFullscreen,
MdFullscreenExit,
MdLooksOne, MdLooksOne,
MdNavigateBefore, MdNavigateBefore,
MdNavigateNext, MdNavigateNext,
@ -63,6 +64,8 @@ const formatTime = (time) => {
}; };
export const VideoPlayer = ({}: AudioPlayerProps) => { export const VideoPlayer = ({}: AudioPlayerProps) => {
const { playMediaList, MediaOffset, previous, next, first, clear } =
useActivePlaylistService();
const [time, setTime] = useState(10); const [time, setTime] = useState(10);
const [isRunning, setIsRunning] = useState(true); const [isRunning, setIsRunning] = useState(true);
useEffect(() => { useEffect(() => {
@ -82,22 +85,24 @@ export const VideoPlayer = ({}: AudioPlayerProps) => {
}, [time, isRunning]); }, [time, isRunning]);
const resetTimer = () => { const resetTimer = () => {
setTime(10); if (playMediaList.length !== 0 && !!document.fullscreenElement) {
setIsRunning(true);
};
useEffect(() => {
const resetTimer = () => {
setTime(10); setTime(10);
setIsRunning(true); setIsRunning(true);
}
};
useEffect(() => {
const resetTimerLocal = () => {
if (playMediaList.length !== 0 && !!document.fullscreenElement) {
setTime(10);
setIsRunning(true);
}
}; };
window.addEventListener("mousemove", resetTimer); window.addEventListener("mousemove", resetTimerLocal);
return () => { return () => {
window.removeEventListener("mousemove", resetTimer); window.removeEventListener("mousemove", resetTimerLocal);
}; };
}, []); }, [playMediaList, setTime, setIsRunning]);
const { playMediaList, MediaOffset, previous, next, first, clear } =
useActivePlaylistService();
const containerRef = useRef<HTMLDivElement>(null); const containerRef = useRef<HTMLDivElement>(null);
const videoRef = useRef<HTMLVideoElement>(null); const videoRef = useRef<HTMLVideoElement>(null);
const [isPlaying, setIsPlaying] = useState<boolean>(false); const [isPlaying, setIsPlaying] = useState<boolean>(false);
@ -111,7 +116,7 @@ export const VideoPlayer = ({}: AudioPlayerProps) => {
const { dataType } = useSpecificType(dataMedia?.typeId); const { dataType } = useSpecificType(dataMedia?.typeId);
const { dataSeries } = useSpecificSeries(dataMedia?.seriesId); const { dataSeries } = useSpecificSeries(dataMedia?.seriesId);
const isMobile = useBreakpointValue({ base: false, sm: true }); const isMobile = useBreakpointValue({ base: true, md: false });
const [mediaSource, setMediaSource] = useState<string>(''); const [mediaSource, setMediaSource] = useState<string>('');
useEffect(() => { useEffect(() => {
setMediaSource( setMediaSource(
@ -471,7 +476,9 @@ export const VideoPlayer = ({}: AudioPlayerProps) => {
onClick={onFullScreen} onClick={onFullScreen}
variant="ghost" variant="ghost"
> >
<MdFullscreen style={{ width: '100%', height: '100%' }} /> {!!document.fullscreenElement ?
<MdFullscreenExit style={{ width: '100%', height: '100%' }} />:
<MdFullscreen style={{ width: '100%', height: '100%' }} />}
</IconButton> </IconButton>
{isPiPSupported && !isMobile && {isPiPSupported && !isMobile &&
<IconButton <IconButton