fix: avoid shared player bar on map posts

TERITORI · Sep 17, 2024 · 8adc320 · 8adc320
1 parent 3ea8b8c
commit 8adc320
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 9 deletions.
diff --git a/packages/components/mediaPlayer/MediaPlayerBarRefined.tsx b/packages/components/mediaPlayer/MediaPlayerBarRefined.tsx
@@ -16,13 +16,11 @@ export const MediaPlayerBarRefined: FC<{
 }> = ({ mediaToPlay }) => {
   const { handlePlayPause, media, loadAndPlaySoundsQueue, playbackStatus } =
     useMediaPlayer();
+  const isInMediaPlayer = media?.postId === mediaToPlay.postId;
 
   const onPressPlayPause = async () => {
-    if (!media && mediaToPlay) {
-      await loadAndPlaySoundsQueue([mediaToPlay]);
-    } else {
-      await handlePlayPause();
-    }
+    if (isInMediaPlayer) await handlePlayPause();
+    else await loadAndPlaySoundsQueue([mediaToPlay]);
   };
 
   return (
@@ -36,7 +34,9 @@ export const MediaPlayerBarRefined: FC<{
       <CustomPressable onPress={onPressPlayPause}>
         <SVG
           source={
-            playbackStatus?.isPlaying && !playbackStatus?.didJustFinish
+            isInMediaPlayer &&
+            playbackStatus?.isPlaying &&
+            !playbackStatus?.didJustFinish
               ? pauseSVG
               : playSVG
           }
@@ -48,7 +48,12 @@ export const MediaPlayerBarRefined: FC<{
       <SpacerRow size={0.5} />
 
       <TimerSliderAlt
-        duration={mediaToPlay.duration || playbackStatus?.durationMillis || 0}
+        duration={
+          (isInMediaPlayer
+            ? playbackStatus?.durationMillis
+            : mediaToPlay.duration) || 0
+        }
+        playbackStatus={isInMediaPlayer ? playbackStatus : undefined}
       />
     </View>
   );

diff --git a/packages/components/mediaPlayer/TimerSliderAlt.tsx b/packages/components/mediaPlayer/TimerSliderAlt.tsx
@@ -1,4 +1,5 @@
 import Slider from "@react-native-community/slider";
+import { AVPlaybackStatusSuccess } from "expo-av";
 import React, { FC, useState } from "react";
 import { View } from "react-native";
 
@@ -20,8 +21,9 @@ import FlexRow from "@/components/FlexRow";
 // Same as TimerSlider but with duration above the Slider
 export const TimerSliderAlt: FC<{
   duration: number;
-}> = ({ duration }) => {
-  const { media, onChangeTimerPosition, playbackStatus } = useMediaPlayer();
+  playbackStatus?: AVPlaybackStatusSuccess;
+}> = ({ duration, playbackStatus }) => {
+  const { media, onChangeTimerPosition } = useMediaPlayer();
   const [isHovered, setIsHovered] = useState(false);
   const [isSliding, setIsSliding] = useState(false);