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 };
+};