From ba7b6e4755f83d1f99495a03649a783e04668d3e Mon Sep 17 00:00:00 2001 From: Edouard DUPIN Date: Sun, 23 Mar 2025 21:01:54 +0100 Subject: [PATCH] [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 | 293 ++++++++++++++------------- front/src/scene/AppRoutes.tsx | 35 ++-- front/src/utils/visibleook.tsx | 19 ++ 3 files changed, 189 insertions(+), 158 deletions(-) create mode 100644 front/src/utils/visibleook.tsx 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 }; +};