chore(feed): Add thumbnail to Media and simplify MediaPlayerBar

TERITORI · Nov 20, 2024 · 667c140 · 667c140
1 parent 8ad4855
commit 667c140
Show file tree

Hide file tree

Showing 7 changed files with 27 additions and 34 deletions.
diff --git a/packages/components/FilePreview/AudioView.tsx b/packages/components/FilePreview/AudioView.tsx
@@ -20,6 +20,8 @@ import { BrandText } from "../BrandText";
 import { OptimizedImage } from "../OptimizedImage";
 import { SVG } from "../SVG";
 
+import defaultThumbnailImage from "@/assets/default-images/default-video-thumbnail.webp";
+
 const THUMBNAIL_SIZE = 140;
 
 export const AudioView: React.FC<{
@@ -35,7 +37,7 @@ export const AudioView: React.FC<{
   duration,
   waveform,
   postId,
-  fallbackImageURI: fallbackImageSource,
+  fallbackImageURI: fallbackImageSource = defaultThumbnailImage,
 }) => {
   const { media, handlePlayPause, loadAndPlaySoundsQueue, playbackStatus } =
     useMediaPlayer();
@@ -49,6 +51,7 @@ export const AudioView: React.FC<{
         fileUrl,
         duration,
         postId,
+        thumbnailURI: imageURI || fallbackImageSource,
       };
       // TODO: Play songs of social feed: Add songs of next posts in queue
       await loadAndPlaySoundsQueue([songToPlay]);

diff --git a/packages/components/mediaPlayer/MediaNameImage.tsx b/packages/components/mediaPlayer/MediaNameImage.tsx
@@ -8,18 +8,11 @@ import { OptimizedImage } from "../OptimizedImage";
 import { SpacerRow } from "../spacer";
 import { Username } from "../user/Username";
 
-import defaultThumbnailImage from "@/assets/default-images/default-track-thumbnail.png";
-import defaultVideoThumbnail from "@/assets/default-images/default-video-thumbnail.webp";
 import { usePost } from "@/hooks/feed/usePost";
 import { zodTryParseJSON } from "@/utils/sanitize";
 import { neutral77 } from "@/utils/style/colors";
 import { fontSemibold12 } from "@/utils/style/fonts";
-import {
-  PostCategory,
-  ZodSocialFeedTrackMetadata,
-  ZodSocialFeedVideoMetadata,
-  zodSocialFeedCommonMetadata,
-} from "@/utils/types/feed";
+import { zodSocialFeedCommonMetadata } from "@/utils/types/feed";
 import { Media } from "@/utils/types/mediaPlayer";
 
 const IMAGE_SIZE = 32;
@@ -37,29 +30,7 @@ export const MediaNameImage: FC<{
   const title =
     baseMetadata?.title ||
     `${media.isVideo ? "Video" : "Audio"} from Social Feed`;
-  let imageURI = media.isVideo ? defaultVideoThumbnail : defaultThumbnailImage;
-  switch (post.category) {
-    case PostCategory.MusicAudio: {
-      const metadata = zodTryParseJSON(
-        ZodSocialFeedTrackMetadata,
-        post.metadata,
-      );
-      if (metadata?.audioFile.thumbnailFileData?.url) {
-        imageURI = metadata.audioFile.thumbnailFileData.url;
-      }
-      break;
-    }
-    case PostCategory.Video: {
-      const metadata = zodTryParseJSON(
-        ZodSocialFeedVideoMetadata,
-        post.metadata,
-      );
-      if (metadata?.videoFile.thumbnailFileData?.url) {
-        imageURI = metadata.videoFile.thumbnailFileData.url;
-      }
-      break;
-    }
-  }
+
   return (
     <OmniLink
       style={[{ alignSelf: "flex-start" }, style]}
@@ -77,7 +48,7 @@ export const MediaNameImage: FC<{
         }}
       >
         <OptimizedImage
-          sourceURI={imageURI}
+          sourceURI={media.thumbnailURI}
           style={imageCStyle}
           height={IMAGE_SIZE}
           width={IMAGE_SIZE}

diff --git a/packages/components/mediaPlayer/MediaPlayerVideo.tsx b/packages/components/mediaPlayer/MediaPlayerVideo.tsx
@@ -173,7 +173,8 @@ function ExpoAvVideo({
     }
   });
 
-  const thumbnailURI = videoMetadata.videoFile.thumbnailFileData?.url;
+  const thumbnailURI =
+    videoMetadata.videoFile.thumbnailFileData?.url || defaultThumbnailImage;
 
   const mediaToSet: Media = {
     id,
@@ -182,6 +183,7 @@ function ExpoAvVideo({
     // postId is used to difference videos from Social Feed
     postId,
     isVideo: true,
+    thumbnailURI,
   };
 
   const onPressPlayPause = async () => {

diff --git a/packages/components/music/TrackCard.tsx b/packages/components/music/TrackCard.tsx
@@ -59,6 +59,8 @@ export const TrackCard: React.FC<{
       fileUrl: track.audioFile.url,
       duration: track.audioFile.audioMetadata?.duration,
       postId: post.id,
+      thumbnailURI:
+        track.audioFile.thumbnailFileData?.url || defaultThumbnailImage,
     };
     await loadAndPlaySoundsQueue([mediaToPlay]);
   };

diff --git a/packages/components/socialFeed/Map/MapPosts/MusicMapPost.tsx b/packages/components/socialFeed/Map/MapPosts/MusicMapPost.tsx
@@ -3,6 +3,7 @@ import { View } from "react-native";
 import { v4 as uuidv4 } from "uuid";
 
 import { Post } from "@/api/feed/v1/feed";
+import defaultThumbnailImage from "@/assets/default-images/default-track-thumbnail.png";
 import { BrandText } from "@/components/BrandText";
 import { MediaPlayerBarRefined } from "@/components/mediaPlayer/MediaPlayerBarRefined";
 import { Separator } from "@/components/separators/Separator";
@@ -48,13 +49,19 @@ export const MusicMapPost: FC<{
         fileUrl: musicAudioNotePostMetadata.audioFile.url,
         duration: musicAudioNotePostMetadata.audioFile.audioMetadata?.duration,
         postId: post.id,
+        thumbnailURI:
+          musicAudioNotePostMetadata.audioFile.thumbnailFileData?.url ||
+          defaultThumbnailImage,
       }
     : musicPostMetadata?.files
       ? {
           id,
           fileUrl: musicPostMetadata.files[0].url,
           duration: musicPostMetadata.files[0].audioMetadata?.duration,
           postId: post.id,
+          thumbnailURI:
+            musicPostMetadata.files[0].thumbnailFileData?.url ||
+            defaultThumbnailImage,
         }
       : undefined;
 

diff --git a/packages/components/socialFeed/Map/MapPosts/VideoMapPost.tsx b/packages/components/socialFeed/Map/MapPosts/VideoMapPost.tsx
@@ -9,6 +9,7 @@ import { View } from "react-native";
 import { v4 as uuidv4 } from "uuid";
 
 import { Post } from "@/api/feed/v1/feed";
+import defaultThumbnailImage from "@/assets/default-images/default-track-thumbnail.png";
 import { BrandText } from "@/components/BrandText";
 import { MediaPlayerBarRefined } from "@/components/mediaPlayer/MediaPlayerBarRefined";
 import { Separator } from "@/components/separators/Separator";
@@ -69,6 +70,9 @@ export const VideoMapPost: FC<{
         duration: videoPostMetadata.videoFile.videoMetadata?.duration, // FIXME: Known issue: Always 0. So, for videos, duration is set by playbackStatus, so it's 0 on the timer since the video is not started once
         postId: post.id,
         isVideo: true,
+        thumbnailURI:
+          videoPostMetadata.videoFile.thumbnailFileData?.url ||
+          defaultThumbnailImage,
       }
     : videoNotePostMetadata?.files
       ? {
@@ -77,6 +81,9 @@ export const VideoMapPost: FC<{
           duration: videoNotePostMetadata.files[0].videoMetadata?.duration,
           postId: post.id,
           isVideo: true,
+          thumbnailURI:
+            videoNotePostMetadata.files[0].thumbnailFileData?.url ||
+            defaultThumbnailImage,
         }
       : undefined;
   const videoMetadata: SocialFeedVideoMetadata | undefined = videoPostMetadata

diff --git a/packages/utils/types/mediaPlayer.ts b/packages/utils/types/mediaPlayer.ts
@@ -4,4 +4,5 @@ export interface Media {
   duration?: number;
   postId?: string;
   isVideo?: boolean;
+  thumbnailURI: string;
 }