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) {