feat: stop music for playbacks

src/screens/Playbacks/Playbacks.js

@@ -5,6 +5,7 @@ import Carousel from 'react-native-reanimated-carousel'
 import { responsiveHeight } from 'react-native-responsive-dimensions'
 import { projectsRef } from '../../config/firebase'
 import useDataFromRef from '../../hooks/useDataFromRef'
+import usePlayer from '../../hooks/usePlayer'
 import PlaybackItem from './components/PlaybackItem'
 import PlaybackCharts from './components/PlaybackCharts'
 import { Palette } from '../../styles'
@@ -14,7 +15,9 @@ const Playbacks = () => {
   const [activeIndex, setActiveIndex] = useState(0)
   const userCache = useRef(new Map())
   const isFocused = useIsFocused()
+  const wasFocusedRef = useRef(false)
   const route = useRoute()
+  const { stop } = usePlayer() || {}
   const initialFocusProjectId = route?.params?.projectId || route?.params?.focusId || null
   const [focusProjectId, setFocusProjectId] = useState(initialFocusProjectId)
   const [viewMode, setViewMode] = useState(initialFocusProjectId ? 'feed' : 'charts')
@@ -88,6 +91,13 @@ const Playbacks = () => {
     }
   }, [route?.params?.focusId, route?.params?.projectId])
 
+  useEffect(() => {
+    if (isFocused && !wasFocusedRef.current) {
+      stop?.().catch(() => {})
+    }
+    wasFocusedRef.current = isFocused
+  }, [isFocused, stop])
+
   useEffect(() => {
     if (viewMode !== 'feed') {
       return

src/screens/Playbacks/Playbacks.web.js

@@ -12,6 +12,7 @@ import {
 import { icons } from '../../assets'
 import { projectsRef } from '../../config/firebase'
 import useDataFromRef from '../../hooks/useDataFromRef'
+import usePlayer from '../../hooks/usePlayer'
 import { useUser } from '../../providers/UserDataProvider'
 import { Palette } from '../../styles'
 import { FONT_FAMILY } from '../../styles/Fonts'
@@ -22,6 +23,8 @@ const Playbacks = () => {
   const { height: windowHeight } = useWindowDimensions()
   const [activeIndex, setActiveIndex] = useState(0)
   const route = useRoute()
+  const { stop } = usePlayer() || {}
+  const wasFocusedRef = useRef(false)
   const initialFocusProjectId = route?.params?.projectId || route?.params?.focusId || null
   const [focusProjectId, setFocusProjectId] = useState(initialFocusProjectId)
   const [viewMode, setViewMode] = useState(initialFocusProjectId ? 'feed' : 'charts')
@@ -60,6 +63,13 @@ const Playbacks = () => {
   const backgroundSeekPendingRef = useRef(false)
   const listRef = useRef(null)
 
+  useEffect(() => {
+    if (isFocused && !wasFocusedRef.current) {
+      stop?.().catch(() => {})
+    }
+    wasFocusedRef.current = isFocused
+  }, [isFocused, stop])
+
   useEffect(() => {
     const total = playbacks?.length || 0
     if (total <= 0) {

src/screens/cover/SongDownload.js

@@ -547,6 +547,15 @@ const SongDownload = ({ route }) => {
     setAdventureChoice('stop')
   }, [])
 
+  const handleGoHome = useCallback(() => {
+    navigate(Routes.BottomTab, {
+      screen: Routes.HomeStack,
+      params: {
+        screen: Routes.Home,
+      },
+    })
+  }, [])
+
   return (
     <Page backgroundImg={background.studioBG2} headerType="NONE">
       <MusicLandHeader onPressBack={handleBackPress} progress={84} />
@@ -592,6 +601,11 @@ const SongDownload = ({ route }) => {
 
 
           <ClubAdvantagesCard style={styles.clubCardSpacing} />
+          <GradientButton
+            title="Revenir à l'accueil"
+            onPress={handleGoHome}
+            containerStyle={styles.returnHomeButton}
+          />
         </ScrollView>
       ) : (
         <View style={styles.adventureGatePlaceholder} />
@@ -703,6 +717,12 @@ const styles = StyleSheet.create({
   clubCardSpacing: {
     marginTop: gutters * 0.5,
   },
+  returnHomeButton: {
+    width: '100%',
+    maxWidth: 320,
+    alignSelf: 'center',
+    marginTop: gutters * 0.6,
+  },
 })
 
 export default SongDownload