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