From ebaa1d7508c382a251005737a309c98519107fc4 Mon Sep 17 00:00:00 2001 From: WaDadidou Date: Tue, 17 Sep 2024 11:30:09 -0400 Subject: [PATCH] fix: feed map media player --- packages/components/FilePreview/AudioView.tsx | 4 +- .../mediaPlayer/MediaPlayerBarRefined.tsx | 30 ++----- .../mediaPlayer/MediaPlayerVideo.tsx | 26 +++--- .../socialFeed/Map/MapPosts/MusicMapPost.tsx | 16 +++- .../socialFeed/Map/MapPosts/VideoMapPost.tsx | 89 +++++++++++++++---- .../socialFeed/RichText/RichText.web.tsx | 1 - .../SocialCard/MusicPostTrackContent.tsx | 1 - .../SocialCard/SocialMessageContent.tsx | 1 - 8 files changed, 108 insertions(+), 60 deletions(-) diff --git a/packages/components/FilePreview/AudioView.tsx b/packages/components/FilePreview/AudioView.tsx index cc539082fc..66a10c2d63 100644 --- a/packages/components/FilePreview/AudioView.tsx +++ b/packages/components/FilePreview/AudioView.tsx @@ -27,7 +27,6 @@ export const AudioView: React.FC<{ imageURI?: string; duration: number; waveform: number[]; - authorId: string; postId: string; fallbackImageURI?: string; }> = ({ @@ -35,13 +34,12 @@ export const AudioView: React.FC<{ imageURI, duration, waveform, - authorId, postId, fallbackImageURI: fallbackImageSource, }) => { const { media, handlePlayPause, loadAndPlaySoundsQueue, playbackStatus } = useMediaPlayer(); - const isInMediaPlayer = media?.postId === postId; + const isInMediaPlayer = !!media && postId === media.postId; const onPressPlayPause = async () => { if (isInMediaPlayer) { diff --git a/packages/components/mediaPlayer/MediaPlayerBarRefined.tsx b/packages/components/mediaPlayer/MediaPlayerBarRefined.tsx index 37c7ce077f..03fd8125ad 100644 --- a/packages/components/mediaPlayer/MediaPlayerBarRefined.tsx +++ b/packages/components/mediaPlayer/MediaPlayerBarRefined.tsx @@ -1,3 +1,4 @@ +import { AVPlaybackStatusSuccess } from "expo-av"; import React, { FC } from "react"; import { View } from "react-native"; @@ -8,21 +9,12 @@ import { SpacerRow } from "../spacer"; import pauseSVG from "@/assets/icons/pause.svg"; import playSVG from "@/assets/icons/play.svg"; import { TimerSliderAlt } from "@/components/mediaPlayer/TimerSliderAlt"; -import { useMediaPlayer } from "@/context/MediaPlayerProvider"; import { secondaryColor } from "@/utils/style/colors"; -import { Media } from "@/utils/types/mediaPlayer"; export const MediaPlayerBarRefined: FC<{ - mediaToPlay: Media; -}> = ({ mediaToPlay }) => { - const { handlePlayPause, media, loadAndPlaySoundsQueue, playbackStatus } = - useMediaPlayer(); - const isInMediaPlayer = media?.postId === mediaToPlay.postId; - - const onPressPlayPause = async () => { - if (isInMediaPlayer) await handlePlayPause(); - else await loadAndPlaySoundsQueue([mediaToPlay]); - }; - + playbackStatus?: AVPlaybackStatusSuccess; + onPressPlayPause: () => void; + isInMediaPlayer: boolean; +}> = ({ playbackStatus, onPressPlayPause }) => { return ( ); diff --git a/packages/components/mediaPlayer/MediaPlayerVideo.tsx b/packages/components/mediaPlayer/MediaPlayerVideo.tsx index 92f5441f61..c37a763cb5 100644 --- a/packages/components/mediaPlayer/MediaPlayerVideo.tsx +++ b/packages/components/mediaPlayer/MediaPlayerVideo.tsx @@ -10,7 +10,6 @@ import React, { FC, RefObject, SetStateAction, - useEffect, useMemo, useRef, useState, @@ -56,7 +55,6 @@ interface MediaPlayerVideoProps { resizeMode?: ResizeMode; style?: StyleProp; hideControls?: boolean; - isThumbnailShown?: boolean; } const CONTROLS_HEIGHT = 68; @@ -69,11 +67,14 @@ export const MediaPlayerVideo: FC = ({ resizeMode, style, hideControls, - isThumbnailShown, }) => { const { media, onLayoutPlayerVideo } = useMediaPlayer(); const { current: id } = useRef(uuidv4()); - const isInMediaPlayer = useMemo(() => media?.id === id, [id, media?.id]); + // TODO: Really need useMemo here ? + const isInMediaPlayer = useMemo( + () => !!media && (postId === media?.postId || media?.id === id), + [media, postId, id], + ); const containerRef = useRef(null); const videoRef = useRef ); @@ -126,7 +126,6 @@ type ExpoAvVideoType = { resizeMode?: ResizeMode; id: string; setControlsShown: Dispatch>; - isThumbnailShown?: boolean; }; function ExpoAvVideo({ @@ -142,7 +141,6 @@ function ExpoAvVideo({ id, containerRef, setControlsShown, - isThumbnailShown, }: ExpoAvVideoType) { const { onVideoStatusUpdate, @@ -156,11 +154,7 @@ function ExpoAvVideo({ const [localStatus, setLocalStatus] = useState(); const [extraPressCount, setExtraPressCount] = useState(0); const [pressTimer, setPressTimer] = useState(); - const [localIsThumbnailShown, setLocalThumbnailShown] = useState(false); - - useEffect(() => { - setLocalThumbnailShown(!!isThumbnailShown); - }, [isThumbnailShown]); + const [isThumbnailShown, setThumbnailShown] = useState(false); // Handle show/hide controls by hovering the video area with mouse const mousePosition = useMousePosition(); @@ -185,13 +179,13 @@ function ExpoAvVideo({ id, fileUrl: videoMetadata.videoFile.url, duration: videoMetadata.videoFile.videoMetadata?.duration, - // postId is used to difference videos from Social Feed (News feed or Article consultation) + // postId is used to difference videos from Social Feed postId, isVideo: true, }; const onPressPlayPause = async () => { - setLocalThumbnailShown(false); + setThumbnailShown(false); if (isInMediaPlayer || !videoRef.current) { await handlePlayPause(); } else { @@ -201,7 +195,7 @@ function ExpoAvVideo({ // Handle play/pause and trigger fullscreen on double press const onPressVideoWrapper = () => { - setLocalThumbnailShown(false); + setThumbnailShown(false); setExtraPressCount((backCount) => backCount + 1); if (extraPressCount === 1) { if (isInMediaPlayer) { @@ -257,7 +251,7 @@ function ExpoAvVideo({ height: "100%", }} > - {localIsThumbnailShown && ( + {isThumbnailShown && ( = ({ post }) => { const { current: id } = useRef(uuidv4()); + const { handlePlayPause, playbackStatus, loadAndPlaySoundsQueue, media } = + useMediaPlayer(); + const isInMediaPlayer = + !!media && (post.id === media.postId || media.id === id); const musicAudioNotePostMetadata = zodTryParseJSON( ZodSocialFeedTrackMetadata, post.metadata, @@ -53,6 +58,11 @@ export const MusicMapPost: FC<{ } : undefined; + const onPressPlayPause = async () => { + if (isInMediaPlayer) await handlePlayPause(); + else if (mediaToPlay) await loadAndPlaySoundsQueue([mediaToPlay]); + }; + return ( @@ -63,7 +73,11 @@ export const MusicMapPost: FC<{ {mediaToPlay ? ( - + ) : ( No media to play diff --git a/packages/components/socialFeed/Map/MapPosts/VideoMapPost.tsx b/packages/components/socialFeed/Map/MapPosts/VideoMapPost.tsx index a32e336945..0543c18f7a 100644 --- a/packages/components/socialFeed/Map/MapPosts/VideoMapPost.tsx +++ b/packages/components/socialFeed/Map/MapPosts/VideoMapPost.tsx @@ -1,16 +1,22 @@ -import { ResizeMode } from "expo-av"; -import React, { FC, useRef } from "react"; +import { + AVPlaybackStatus, + AVPlaybackStatusSuccess, + ResizeMode, + Video, +} from "expo-av"; +import React, { FC, useRef, useState } from "react"; import { View } from "react-native"; import { v4 as uuidv4 } from "uuid"; import { Post } from "@/api/feed/v1/feed"; import { BrandText } from "@/components/BrandText"; import { MediaPlayerBarRefined } from "@/components/mediaPlayer/MediaPlayerBarRefined"; -import { MediaPlayerVideo } from "@/components/mediaPlayer/MediaPlayerVideo"; import { Separator } from "@/components/separators/Separator"; import { MapPostWrapper } from "@/components/socialFeed/Map/MapPosts/MapPostWrapper"; import { SpacerColumn } from "@/components/spacer"; +import { useFeedbacks } from "@/context/FeedbacksProvider"; import { useMediaPlayer } from "@/context/MediaPlayerProvider"; +import { web3ToWeb2URI } from "@/utils/ipfs"; import { zodTryParseJSON } from "@/utils/sanitize"; import { errorColor, neutralFF, withAlpha } from "@/utils/style/colors"; import { fontSemibold10 } from "@/utils/style/fonts"; @@ -25,8 +31,22 @@ import { Media } from "@/utils/types/mediaPlayer"; export const VideoMapPost: FC<{ post: Post; }> = ({ post }) => { - const { media } = useMediaPlayer(); const { current: id } = useRef(uuidv4()); + const videoRef = useRef