fix: media player bar fix

TERITORI · Sep 11, 2023 · 5ff6fb3 · 5ff6fb3
1 parent c397b84
commit 5ff6fb3
Show file tree

Hide file tree

Showing 7 changed files with 59 additions and 36 deletions.
diff --git a/packages/components/FilePreview/AudioView.tsx b/packages/components/FilePreview/AudioView.tsx
@@ -34,7 +34,7 @@ export const AudioView: React.FC<{
     media,
     isPlaying,
     handlePlayPause,
-    loadAndPlaySound,
+    loadAndPlayQueue,
     playbackStatus,
   } = useMediaPlayer();
   const isInMediaPlayer = useMemo(
@@ -51,15 +51,17 @@ export const AudioView: React.FC<{
       await handlePlayPause();
     } else {
       const songToPlay: Media = {
-        imageUrl: userInfo.metadata.image || undefined,
+        imageUrl:
+          file?.thumbnailFileData?.url || userInfo.metadata.image || undefined,
         name: "Song from Social Feed",
         createdBy: authorId,
         fileUrl: file.url,
         duration: file.audioMetadata?.duration,
-        // postId is used to difference audios from Social Feed (News feed  or Article consultation)
+        // postId is used to difference audios from Social Feed (News feed or Article consultation)
         postId: postId || Math.floor(Math.random() * 200000).toString(),
       };
-      await loadAndPlaySound(songToPlay);
+      // TODO: Play songs of social feed: Add songs of next posts in queue
+      await loadAndPlayQueue([songToPlay]);
     }
   };
 

diff --git a/packages/components/FilePreview/EditableAudioPreview.tsx b/packages/components/FilePreview/EditableAudioPreview.tsx
@@ -42,7 +42,7 @@ export const EditableAudioPreview: React.FC<AudioPreviewProps> = ({
     media,
     isPlaying,
     handlePlayPause,
-    loadAndPlaySound,
+    loadAndPlayQueue,
     playbackStatus,
     removeSound,
   } = useMediaPlayer();
@@ -60,13 +60,15 @@ export const EditableAudioPreview: React.FC<AudioPreviewProps> = ({
       await handlePlayPause();
     } else {
       const songToAdd: Media = {
-        imageUrl: userInfo.metadata.image || undefined,
+        imageUrl:
+          file.thumbnailFileData?.url || userInfo.metadata.image || undefined,
         name: file.fileName,
         createdBy: userId,
         fileUrl: file.url,
         duration: file.audioMetadata?.duration,
       };
-      await loadAndPlaySound(songToAdd);
+      // TODO: Play songs of social feed: Add songs of next posts in queue
+      await loadAndPlayQueue([songToAdd]);
     }
   };
   useEffect(() => {

diff --git a/packages/components/mediaPlayer/MediaNameImage.tsx b/packages/components/mediaPlayer/MediaNameImage.tsx
@@ -1,5 +1,5 @@
 import { FC } from "react";
-import { Image, View } from "react-native";
+import { Image, StyleProp, View, ViewStyle } from "react-native";
 
 import { useMediaPlayer } from "../../context/MediaPlayerProvider";
 import { useNSUserInfo } from "../../hooks/useNSUserInfo";
@@ -12,7 +12,9 @@ import { BrandText } from "../BrandText";
 import { OmniLink } from "../OmniLink";
 import { SpacerRow } from "../spacer";
 
-export const MediaNameImage: FC = () => {
+export const MediaNameImage: FC<{
+  style?: StyleProp<ViewStyle>;
+}> = ({ style }) => {
   const { media } = useMediaPlayer();
   const authorNSInfo = useNSUserInfo(media?.createdBy);
   const [, userAddress] = parseUserId(media?.createdBy);
@@ -26,6 +28,7 @@ export const MediaNameImage: FC = () => {
   if (!media) return <View />;
   return (
     <OmniLink
+      style={[{ alignSelf: "flex-start" }, style]}
       to={
         media?.albumId
           ? {
@@ -52,11 +55,18 @@ export const MediaNameImage: FC = () => {
         <View
           style={{
             justifyContent: "space-between",
+            flex: 1,
           }}
         >
-          <BrandText style={fontSemibold12}>{media.name}</BrandText>
+          <BrandText style={fontSemibold12} isTicker>
+            {media.name}
+          </BrandText>
           {media?.createdBy && (
-            <BrandText style={[fontSemibold12, { color: neutral77 }]}>
+            <BrandText
+              style={[fontSemibold12, { color: neutral77 }]}
+              ellipsizeMode="middle"
+              numberOfLines={1}
+            >
               {"@" + username}
             </BrandText>
           )}

diff --git a/packages/components/mediaPlayer/MediaPlayerBar.tsx b/packages/components/mediaPlayer/MediaPlayerBar.tsx
@@ -112,14 +112,25 @@ export const MediaPlayerBar: FC<{
             color={playbackStatus?.isLooping ? secondaryColor : neutralA3}
           />
         </CustomPressable>
-        <SpacerRow size={4} />
       </View>
+      <SpacerRow size={4} />
 
-      <View style={{ flexDirection: "row", alignItems: "center" }}>
+      <View
+        style={{
+          flexDirection: "row",
+          alignItems: "center",
+          justifyContent: "flex-end",
+          flex: 1,
+        }}
+      >
         <TimerSlider />
         <SpacerRow size={4} />
-        <MediaNameImage />
+        <View style={{ maxWidth: 600, flex: 1 }}>
+          <MediaNameImage style={{ maxWidth: 600 }} />
+        </View>
       </View>
+      <SpacerRow size={4} />
+
       <VolumeSlider />
     </View>
   );

diff --git a/packages/components/mediaPlayer/MediaPlayerBarMobile.tsx b/packages/components/mediaPlayer/MediaPlayerBarMobile.tsx
@@ -57,7 +57,7 @@ export const MediaPlayerBarMobile: FC<{
         }}
       >
         {/*TODO: Test this on mobile*/}
-        <GestureHandlerRootView>
+        <GestureHandlerRootView style={{ flex: 1 }}>
           <Swipeable
             containerStyle={{
               height: "100%",
@@ -67,9 +67,10 @@ export const MediaPlayerBarMobile: FC<{
             onSwipeableRightOpen={canPrev ? prevMedia : undefined}
             onSwipeableLeftOpen={canNext ? nextMedia : undefined}
           >
-            <MediaNameImage />
+            <MediaNameImage style={{ width: "100%" }} />
           </Swipeable>
         </GestureHandlerRootView>
+        <SpacerRow size={2} />
 
         <View style={{ flexDirection: "row", alignItems: "center" }}>
           <CustomPressable onPress={() => setIsRandom((isRandom) => !isRandom)}>

diff --git a/packages/components/mediaPlayer/TimerSliderMobile.tsx b/packages/components/mediaPlayer/TimerSliderMobile.tsx
@@ -1,35 +1,35 @@
+import Slider from "@react-native-community/slider";
 import React, { FC, useState } from "react";
 import { View } from "react-native";
 
 import { useMediaPlayer } from "../../context/MediaPlayerProvider";
 import { neutral55, secondaryColor } from "../../utils/style/colors";
 
 export const TimerSliderMobile: FC = () => {
-  const { media, playbackStatus } = useMediaPlayer();
   const [width, setWidth] = useState(0);
-  const minimumTrackWidth =
-    width && media?.duration && playbackStatus?.positionMillis
-      ? width / (media.duration / playbackStatus.positionMillis)
-      : 0;
+  const { media, playbackStatus, onChangeTimerPosition } = useMediaPlayer();
 
   return (
     <View
       style={{ flexDirection: "row", width: "100%" }}
       onLayout={(e) => setWidth(e.nativeEvent.layout.width)}
     >
-      <View
-        style={{
-          width: minimumTrackWidth,
-          height: 4,
-          backgroundColor: secondaryColor,
-        }}
-      />
-      <View
-        style={{
-          width: width - minimumTrackWidth,
-          height: 4,
-          backgroundColor: neutral55,
+      <Slider
+        onSlidingComplete={(a: number) => onChangeTimerPosition(a)}
+        value={playbackStatus?.positionMillis}
+        tapToSeek
+        // @ts-expect-error FIXME: thumbStyle only allowed in SliderPropsWindows
+        thumbStyle={{
+          width: 0,
+          height: 0,
         }}
+        thumbTintColor={secondaryColor}
+        maximumValue={media?.duration}
+        minimumTrackTintColor={secondaryColor}
+        maximumTrackTintColor={neutral55}
+        //TODO: Increase bar height is isSliding. By extension, change style, remove borderRadius etc. But this style prop doesn't allow to style the bar :'(
+        style={{ width }}
+        disabled={!media}
       />
     </View>
   );

diff --git a/packages/context/MediaPlayerProvider.tsx b/packages/context/MediaPlayerProvider.tsx
@@ -23,7 +23,6 @@ interface DefaultValue {
   isMediaPlayerOpen: boolean;
   setIsMediaPlayerOpen: Dispatch<SetStateAction<boolean>>;
   loadAndPlayQueue: (queue: Media[], mediaToStart?: Media) => Promise<void>;
-  loadAndPlaySound: (media: Media, queue?: Media[]) => Promise<void>;
   removeSound: () => Promise<void>;
   canNext: boolean;
   canPrev: boolean;
@@ -44,7 +43,6 @@ const defaultValue: DefaultValue = {
   isMediaPlayerOpen: false,
   setIsMediaPlayerOpen: () => {},
   loadAndPlayQueue: async () => {},
-  loadAndPlaySound: async () => {},
   removeSound: async () => {},
   canNext: false,
   canPrev: false,
@@ -212,7 +210,6 @@ export const MediaPlayerContextProvider: React.FC = ({ children }) => {
         isMediaPlayerOpen,
         setIsMediaPlayerOpen,
         loadAndPlayQueue,
-        loadAndPlaySound,
         removeSound,
         canNext,
         canPrev,