diff --git a/front/src/components/AudioPlayer.tsx b/front/src/components/AudioPlayer.tsx index 0e24af7..f60b167 100644 --- a/front/src/components/AudioPlayer.tsx +++ b/front/src/components/AudioPlayer.tsx @@ -30,6 +30,7 @@ import { useSpecificGender } from '@/service/Gender'; import { useSpecificTrack } from '@/service/Track'; import { DataUrlAccess } from '@/utils/data-url-access'; import { isNullOrUndefined } from '@/utils/validator'; +import { usePageVisibility } from '@/utils/visibleook'; import { Slider } from './ui/slider'; @@ -89,6 +90,7 @@ export const AudioPlayer = ({}: AudioPlayerProps) => { : '' ); }, [dataTrack, setMediaSource]); + const { isVisible } = usePageVisibility(); const backColor = useColorModeValue('back.100', 'back.800'); const configButton = { borderRadius: 'full', @@ -201,7 +203,6 @@ export const AudioPlayer = ({}: AudioPlayerProps) => { if (!audioRef || !audioRef.current) { return; } - console.log(`onTimeUpdate ${audioRef.current.currentTime}`); setTimeProgress(audioRef.current.currentTime); }; const onDurationChange = (event) => {}; @@ -221,150 +222,154 @@ export const AudioPlayer = ({}: AudioPlayerProps) => { }; return ( <> - {!isNullOrUndefined(trackOffset) && ( - - - {dataTrack?.name ?? '???'} - - - {dataArtists.map((data) => data.name).join(', ')} /{' '} - {dataAlbum && dataAlbum?.name} - {dataGender && ` / ${dataGender.name}`} - - - onSeek(e.value)} - variant="outline" - colorPalette="brand" - marks={marks()} - //focusCapture={false} + {isVisible && ( + <> + {!isNullOrUndefined(trackOffset) && ( + - - - - - - {formatTime(timeProgress)} - - - {formatTime(duration)} - - - - - {isPlaying ? ( - - ) : ( - - )} - - - - - - {' '} - - - - - - - - - - - - {playModeIcon[playingMode]} - - - + + {dataTrack?.name ?? '???'} + + + {dataArtists.map((data) => data.name).join(', ')} /{' '} + {dataAlbum && dataAlbum?.name} + {dataGender && ` / ${dataGender.name}`} + + + onSeek(e.value)} + variant="outline" + colorPalette="brand" + marks={marks()} + //focusCapture={false} + > + + + + + + {formatTime(timeProgress)} + + + {formatTime(duration)} + + + + + {isPlaying ? ( + + ) : ( + + )} + + + + + + {' '} + + + + + + + + + + + + {playModeIcon[playingMode]} + + + + )} + )} { const { isReadable } = useHasRight('USER'); + const { isVisible } = usePageVisibility(); return ( { {/* Need to keep it in all case, it is the only way to log-in */} } /> - {isReadable ? ( + {/* Disable full display to prevent update of GUI when the application is hided */} + {isVisible && ( <> - } /> - } /> - } /> - } /> - } /> - } /> - } /> - } /> - } /> - } /> - } /> + {isReadable ? ( + <> + } /> + } /> + } /> + } /> + } /> + } /> + } /> + } /> + } /> + } /> + } /> + + ) : ( + } /> + )} - ) : ( - } /> )} diff --git a/front/src/utils/visibleook.tsx b/front/src/utils/visibleook.tsx new file mode 100644 index 0000000..fbd1682 --- /dev/null +++ b/front/src/utils/visibleook.tsx @@ -0,0 +1,19 @@ +import { useEffect, useState } from 'react'; + +export const usePageVisibility = () => { + const [isVisible, setIsVisible] = useState(!document.hidden); + + useEffect(() => { + const handleVisibilityChange = () => { + setIsVisible(!document.hidden); + }; + + document.addEventListener('visibilitychange', handleVisibilityChange); + + return () => { + document.removeEventListener('visibilitychange', handleVisibilityChange); + }; + }, []); + + return { isVisible }; +};