From 667c140d54eb8139bf3d6d80f2fe2edd1ab78059 Mon Sep 17 00:00:00 2001 From: WaDadidou Date: Wed, 20 Nov 2024 18:25:12 -0500 Subject: [PATCH] chore(feed): Add thumbnail to Media and simplify MediaPlayerBar --- packages/components/FilePreview/AudioView.tsx | 5 ++- .../components/mediaPlayer/MediaNameImage.tsx | 35 ++----------------- .../mediaPlayer/MediaPlayerVideo.tsx | 4 ++- packages/components/music/TrackCard.tsx | 2 ++ .../socialFeed/Map/MapPosts/MusicMapPost.tsx | 7 ++++ .../socialFeed/Map/MapPosts/VideoMapPost.tsx | 7 ++++ packages/utils/types/mediaPlayer.ts | 1 + 7 files changed, 27 insertions(+), 34 deletions(-) diff --git a/packages/components/FilePreview/AudioView.tsx b/packages/components/FilePreview/AudioView.tsx index 66a10c2d63..8b5ef63c67 100644 --- 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 index 9586fab330..2429d55bf7 100644 --- 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 ( { diff --git a/packages/components/music/TrackCard.tsx b/packages/components/music/TrackCard.tsx index af139ef2b5..3362c9eb01 100644 --- 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 index 7a66e8c39c..6b7a74441f 100644 --- 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,6 +49,9 @@ export const MusicMapPost: FC<{ fileUrl: musicAudioNotePostMetadata.audioFile.url, duration: musicAudioNotePostMetadata.audioFile.audioMetadata?.duration, postId: post.id, + thumbnailURI: + musicAudioNotePostMetadata.audioFile.thumbnailFileData?.url || + defaultThumbnailImage, } : musicPostMetadata?.files ? { @@ -55,6 +59,9 @@ export const MusicMapPost: FC<{ 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 index 0543c18f7a..aee0d56075 100644 --- 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 index 160681e60d..543d7c14b3 100644 --- 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; }