fix: rework post Video screen

TERITORI · Nov 27, 2023 · 4182e02 · 4182e02
1 parent 0db7ea7
commit 4182e02
Show file tree

Hide file tree

Showing 14 changed files with 1,383 additions and 411 deletions.
diff --git a/packages/components/mediaPlayer/MediaNameImage.tsx b/packages/components/mediaPlayer/MediaNameImage.tsx
@@ -28,25 +28,12 @@ export const MediaNameImage: FC<{
   return (
     <OmniLink
       style={[{ alignSelf: "flex-start" }, style]}
-      to={
-        media?.albumId
-          ? {
-              screen: "MusicAlbum",
-              params: { id: media.albumId },
-            }
-          : // TODO: Make a FeedVideoViewScreen
-            // : media.isVideo
-            // ? {
-            //     screen: "FeedVideoView",
-            //     params: { id: getNetworkObjectId(network?.id, media?.postId) || "", },
-            //   }
-            {
-              screen: "FeedPostView",
-              params: {
-                id: getNetworkObjectId(network?.id, media?.postId) || "",
-              },
-            }
-      }
+      to={{
+        screen: "FeedPostView",
+        params: {
+          id: getNetworkObjectId(network?.id, media?.postId) || "",
+        },
+      }}
     >
       <View
         style={{

diff --git a/packages/components/mediaPlayer/MediaPlayerVideo.tsx b/packages/components/mediaPlayer/MediaPlayerVideo.tsx
@@ -12,6 +12,7 @@ import { v4 as uuidv4 } from "uuid";
 
 import { TimerSlider } from "./TimerSlider";
 import { VolumeSlider } from "./VolumeSlider";
+import defaultThumbnailImage from "../../../assets/default-images/default-video-thumbnail.jpg";
 import FullScreenIcon from "../../../assets/icons/media-player/full-screen.svg";
 import NextIcon from "../../../assets/icons/media-player/next.svg";
 import PauseIcon from "../../../assets/icons/pause.svg";
@@ -44,7 +45,6 @@ interface MediaPlayerVideoProps {
   postId?: string;
   resizeMode?: ResizeMode;
   style?: StyleProp<ViewStyle>;
-  thumbnailURI?: string;
 }
 
 const CONTROLS_HEIGHT = 68;
@@ -57,7 +57,6 @@ export const MediaPlayerVideo: FC<MediaPlayerVideoProps> = ({
   postId,
   resizeMode,
   style,
-  thumbnailURI,
 }) => {
   const { setToastError } = useFeedbacks();
   const selectedNetwork = useSelectedNetworkInfo();
@@ -93,12 +92,19 @@ export const MediaPlayerVideo: FC<MediaPlayerVideoProps> = ({
   const [isControlsShown, setControlsShown] = useState(false);
   const [isThumbnailShown, setThumbnailShown] = useState(true);
 
+  const thumbnailURI =
+    videoMetadata.videoFile.thumbnailFileData?.url ||
+    userInfo.metadata.image ||
+    nameServiceDefaultImage(isDAO, selectedNetwork);
+  const fixedThumbnailURI = thumbnailURI
+    ? thumbnailURI.includes("://")
+      ? thumbnailURI
+      : "ipfs://" + thumbnailURI // we need this hack because ipfs "urls" in feed are raw CIDs
+    : defaultThumbnailImage;
+
   const mediaToSet: Media = {
     id,
-    imageUrl:
-      videoMetadata.videoFile.thumbnailFileData?.url ||
-      userInfo.metadata.image ||
-      nameServiceDefaultImage(isDAO, selectedNetwork),
+    imageUrl: fixedThumbnailURI,
     name: videoMetadata.title,
     createdBy: authorId,
     fileUrl: videoMetadata.videoFile.url,
@@ -200,9 +206,9 @@ export const MediaPlayerVideo: FC<MediaPlayerVideoProps> = ({
           height: "100%",
         }}
       >
-        {thumbnailURI && isThumbnailShown && (
+        {fixedThumbnailURI && isThumbnailShown && (
           <OptimizedImage
-            sourceURI={thumbnailURI}
+            sourceURI={fixedThumbnailURI}
             width={containerWidth}
             height={containerHeight}
             style={{

diff --git a/packages/components/music/MusicList.tsx b/packages/components/music/MusicList.tsx
@@ -17,6 +17,7 @@ import {
 } from "../../hooks/feed/useFetchFeed";
 import useSelectedWallet from "../../hooks/useSelectedWallet";
 import { zodTryParseJSON } from "../../utils/sanitize";
+import { BASE_POST } from "../../utils/social-feed";
 import { fontSemibold20 } from "../../utils/style/fonts";
 import { layout } from "../../utils/style/layout";
 
@@ -79,16 +80,9 @@ export const MusicList: React.FC<{
       .fill(undefined)
       .map((_, i) => {
         const n: Post = {
+          ...BASE_POST,
           identifier: `padded-${i}`,
           category: PostCategory.MusicAudio,
-          authorId: "",
-          metadata: "",
-          isDeleted: false,
-          parentPostIdentifier: "",
-          subPostLength: 0,
-          createdAt: 0,
-          tipAmount: 0,
-          reactions: [],
         };
         return n;
       });

diff --git a/packages/components/socialFeed/NewsFeed/NewsFeed.tsx b/packages/components/socialFeed/NewsFeed/NewsFeed.tsx
@@ -212,9 +212,17 @@ export const NewsFeed: React.FC<NewsFeedProps> = ({
           }}
         >
           {post.category === PostCategory.Article ? (
-            <SocialArticleCard post={post} style={cardStyle} />
+            <SocialArticleCard
+              post={post}
+              style={cardStyle}
+              refetchFeed={refetch}
+            />
           ) : post.category === PostCategory.Video ? (
-            <SocialVideoCard post={post} style={cardStyle} />
+            <SocialVideoCard
+              post={post}
+              style={cardStyle}
+              refetchFeed={refetch}
+            />
           ) : (
             <SocialThreadCard
               post={post}

diff --git a/packages/components/socialFeed/SocialCard/cards/SocialVideoCard.tsx b/packages/components/socialFeed/SocialCard/cards/SocialVideoCard.tsx
@@ -3,13 +3,18 @@ import React, { FC, memo, useEffect, useState } from "react";
 import { StyleProp, useWindowDimensions, View, ViewStyle } from "react-native";
 
 import { SOCIAl_CARD_BORDER_RADIUS } from "./SocialThreadCard";
-import defaultThumbnailImage from "../../../../../assets/default-images/default-video-thumbnail.jpg";
 import { Post } from "../../../../api/feed/v1/feed";
 import { useNSUserInfo } from "../../../../hooks/useNSUserInfo";
 import { useSelectedNetworkInfo } from "../../../../hooks/useSelectedNetwork";
 import useSelectedWallet from "../../../../hooks/useSelectedWallet";
-import { NetworkKind, parseUserId } from "../../../../networks";
+import {
+  getNetworkObjectId,
+  NetworkKind,
+  parseUserId,
+} from "../../../../networks";
+import { useAppNavigation } from "../../../../utils/navigation";
 import { zodTryParseJSON } from "../../../../utils/sanitize";
+import { DEFAULT_USERNAME } from "../../../../utils/social-feed";
 import {
   errorColor,
   neutral00,
@@ -52,14 +57,16 @@ export const SocialVideoCard: FC<{
   refetchFeed?: () => Promise<any>;
   isFlagged?: boolean;
 }> = memo(({ post, refetchFeed, style, isFlagged }) => {
+  const navigation = useAppNavigation();
   const selectedNetworkInfo = useSelectedNetworkInfo();
   const wallet = useSelectedWallet();
   const [localPost, setLocalPost] = useState<Post>(post);
   const [viewWidth, setViewWidth] = useState(0);
   const { width: windowWidth } = useWindowDimensions();
   const [, authorAddress] = parseUserId(localPost.authorId);
   const authorNSInfo = useNSUserInfo(localPost.authorId);
-  const username = authorNSInfo?.metadata?.tokenId || authorAddress;
+  const username =
+    authorNSInfo?.metadata?.tokenId || authorAddress || DEFAULT_USERNAME;
 
   const metadata = zodTryParseJSON(
     ZodSocialFeedVideoMetadata,
@@ -69,18 +76,9 @@ export const SocialVideoCard: FC<{
     ZodSocialFeedPostMetadata,
     localPost.metadata,
   );
-  const thumbnailImage =
-    metadata?.videoFile.thumbnailFileData ||
-    oldMetadata?.files?.find((file) => file.isCoverImage);
   const title = oldMetadata?.title || metadata?.title || "";
   const description = oldMetadata?.message || metadata?.description || "";
 
-  const thumbnailURI = thumbnailImage?.url
-    ? thumbnailImage.url.includes("://")
-      ? thumbnailImage.url
-      : "ipfs://" + thumbnailImage.url // we need this hack because ipfs "urls" in feed are raw CIDs
-    : defaultThumbnailImage;
-
   useEffect(() => {
     setLocalPost(post);
   }, [post]);
@@ -112,7 +110,6 @@ export const SocialVideoCard: FC<{
         ]}
       >
         <MediaPlayerVideo
-          thumbnailURI={thumbnailURI}
           videoMetadata={metadata}
           style={{
             height: 400,
@@ -125,13 +122,16 @@ export const SocialVideoCard: FC<{
           postId={localPost.identifier}
         />
 
+        <SpacerColumn size={1} />
         <CustomPressable
-          // TODO: Make a FeedVideoViewScreen
-          // onPress={() =>
-          //   navigation.navigate("FeedVideoView", {
-          //     id: getNetworkObjectId(selectedNetworkId, localPost.identifier),
-          //   })
-          // }
+          onPress={() =>
+            navigation.navigate("FeedPostView", {
+              id: getNetworkObjectId(
+                selectedNetworkInfo?.id,
+                localPost.identifier,
+              ),
+            })
+          }
           style={{
             flex: 1,
             paddingBottom: VIDEO_CARD_PADDING_VERTICAL,