[FEAT] Play all the playlist in background when phone is stop.

the explanation is the android does not support to update the GUI interface
when the application is down, but it support some update of the playing file
in the audio tag.

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) => {};
@@ -220,6 +221,8 @@ export const AudioPlayer = ({}: AudioPlayerProps) => {
     return result;
   };
   return (
+    <>
+      {isVisible && (
         <>
           {!isNullOrUndefined(trackOffset) && (
             <Flex
@@ -366,6 +369,8 @@ export const AudioPlayer = ({}: AudioPlayerProps) => {
               </Flex>
             </Flex>
           )}
+        </>
+      )}
 
       <chakra.audio
         src={mediaSource}

front/src/scene/AppRoutes.tsx

@@ -15,6 +15,7 @@ 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';
@@ -22,6 +23,7 @@ import { OnAirPage } from './onAir/OnAirPage';
 
 export const AppRoutes = () => {
   const { isReadable } = useHasRight('USER');
+  const { isVisible } = usePageVisibility();
   return (
     <HistoryRouter
       // @ts-expect-error
@@ -31,6 +33,9 @@ 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 />} />
@@ -48,6 +53,8 @@ export const AppRoutes = () => {
             ) : (
               <Route path="*" element={<Error401 />} />
             )}
+          </>
+        )}
       </Routes>
     </HistoryRouter>
   );

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