front/src/components/AudioPlayer.tsx

@@ -30,7 +30,6 @@ 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';
 
@@ -90,7 +89,6 @@ export const AudioPlayer = ({}: AudioPlayerProps) => {
         : ''
     );
   }, [dataTrack, setMediaSource]);
-  const { isVisible } = usePageVisibility();
   const backColor = useColorModeValue('back.100', 'back.800');
   const configButton = {
     borderRadius: 'full',
@@ -203,6 +201,7 @@ export const AudioPlayer = ({}: AudioPlayerProps) => {
     if (!audioRef || !audioRef.current) {
       return;
     }
+    console.log(`onTimeUpdate ${audioRef.current.currentTime}`);
     setTimeProgress(audioRef.current.currentTime);
   };
   const onDurationChange = (event) => {};
@@ -221,8 +220,6 @@ export const AudioPlayer = ({}: AudioPlayerProps) => {
     return result;
   };
   return (
-    <>
-      {isVisible && (
     <>
       {!isNullOrUndefined(trackOffset) && (
         <Flex
@@ -369,8 +366,6 @@ export const AudioPlayer = ({}: AudioPlayerProps) => {
           </Flex>
         </Flex>
       )}
-        </>
-      )}
 
       <chakra.audio
         src={mediaSource}

front/src/scene/AppRoutes.tsx

@@ -15,7 +15,6 @@ import { HomePage } from '@/scene/home/HomePage';
 import { SSORoutes } from '@/scene/sso/SSORoutes';
 import { TrackRoutes } from '@/scene/track/TrackRoutes';
 import { useHasRight } from '@/service/session';
-import { usePageVisibility } from '@/utils/visibleook';
 
 import { AddPage } from './home/AddPage';
 import { SettingsPage } from './home/SettingsPage';
@@ -23,7 +22,6 @@ import { OnAirPage } from './onAir/OnAirPage';
 
 export const AppRoutes = () => {
   const { isReadable } = useHasRight('USER');
-  const { isVisible } = usePageVisibility();
   return (
     <HistoryRouter
       // @ts-expect-error
@@ -33,9 +31,6 @@ export const AppRoutes = () => {
       <Routes>
         {/* Need to keep it in all case, it is the only way to log-in */}
         <Route path="sso/*" element={<SSORoutes />} />
-        {/* Disable full display to prevent update of GUI when the application is hided */}
-        {isVisible && (
-          <>
         {isReadable ? (
           <>
             <Route path="/" element={<Navigate to="home" replace />} />
@@ -53,8 +48,6 @@ export const AppRoutes = () => {
         ) : (
           <Route path="*" element={<Error401 />} />
         )}
-          </>
-        )}
       </Routes>
     </HistoryRouter>
   );

front/src/utils/visibleook.tsx

@@ -1,19 +0,0 @@
-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 };
-};