fix: map video and audio render, fix map location in url, better typi…

…ng, remove legacy stuff
TERITORI · Sep 17, 2024 · 3ea8b8c · 3ea8b8c
1 parent 6001362
commit 3ea8b8c
Show file tree

Hide file tree

Showing 22 changed files with 282 additions and 174 deletions.
diff --git a/packages/components/mediaPlayer/TimerSliderAlt.tsx b/packages/components/mediaPlayer/TimerSliderAlt.tsx
@@ -51,6 +51,7 @@ export const TimerSliderAlt: FC<{
         <Slider
           onSlidingStart={() => setIsSliding(true)}
           onSlidingComplete={(value: number) => {
+            // FIXME: onChangeTimerPosition doesn't work here
             onChangeTimerPosition(value);
             setIsSliding(false);
           }}

diff --git a/packages/components/music/TrackCard.tsx b/packages/components/music/TrackCard.tsx
@@ -23,6 +23,7 @@ import NormalPlay from "@/assets/icons/music/normal-play.svg";
 import { LocationButton } from "@/components/socialFeed/NewsFeed/LocationButton";
 import { useMediaPlayer } from "@/context/MediaPlayerProvider";
 import { useAppNavigation } from "@/hooks/navigation/useAppNavigation";
+import { locationToString } from "@/utils/feed/map";
 import { zodTryParseJSON } from "@/utils/sanitize";
 import {
   neutral17,
@@ -113,9 +114,10 @@ export const TrackCard: React.FC<{
             <View style={positionButtonBoxStyle}>
               <LocationButton
                 onPress={() =>
+                  track.location &&
                   navigation.navigate("Feed", {
                     tab: "map",
-                    locationToCenter: track.location,
+                    center: locationToString(track.location),
                   })
                 }
                 stroke={neutralFF}

diff --git a/packages/components/music/UploadMusicModal/UploadTrack.tsx b/packages/components/music/UploadMusicModal/UploadTrack.tsx
@@ -6,7 +6,6 @@ import {
   View,
   ViewStyle,
 } from "react-native";
-import { LatLng } from "react-native-leaflet-view";
 import { useSelector } from "react-redux";
 
 import AudioSVG from "../../../../assets/icons/audio.svg";
@@ -30,6 +29,7 @@ import {
 import { fontSemibold14 } from "../../../utils/style/fonts";
 import { layout } from "../../../utils/style/layout";
 import {
+  CustomLatLngExpression,
   PostCategory,
   SocialFeedTrackMetadata,
 } from "../../../utils/types/feed";
@@ -58,9 +58,11 @@ const UPLOAD_ALBUM_MODAL_WIDTH = 564;
 export const UploadTrack: React.FC<Props> = ({ onUploadDone }) => {
   const [developerMode] = useDeveloperMode();
   const [isMapShown, setIsMapShown] = useState(false);
-  const [location, setLocation] = useState<LatLng | undefined>();
+  const [location, setLocation] = useState<
+    CustomLatLngExpression | undefined
+  >();
 
-  const { setToastError } = useFeedbacks();
+  const { setToast } = useFeedbacks();
   const selectedNetwork = useSelectedNetworkInfo();
   const selectedWallet = useSelectedWallet();
   const userId = selectedWallet?.userId;
@@ -108,9 +110,11 @@ export const UploadTrack: React.FC<Props> = ({ onUploadDone }) => {
       console.error("post submit err", err);
       setIsUploadLoading(false);
       setIsProgressBarShown(false);
-      setToastError({
+      setToast({
         title: "Post creation failed",
         message: err instanceof Error ? err.message : `${err}`,
+        type: "error",
+        mode: "normal",
       });
     }
   };
@@ -145,9 +149,11 @@ export const UploadTrack: React.FC<Props> = ({ onUploadDone }) => {
       userIPFSKey || (await generateIpfsKey(selectedNetwork?.id || "", userId));
     if (!pinataJWTKey) {
       console.error("upload file err : No Pinata JWT");
-      setToastError({
+      setToast({
         title: "File upload failed",
         message: "No Pinata JWT",
+        type: "error",
+        mode: "normal",
       });
       setIsUploadLoading(false);
       return;
@@ -160,9 +166,11 @@ export const UploadTrack: React.FC<Props> = ({ onUploadDone }) => {
     });
     if (!uploadedFiles.find((file) => file.url)) {
       console.error("upload file err : Fail to pin to IPFS");
-      setToastError({
+      setToast({
         title: "File upload failed",
         message: "Fail to pin to IPFS, please try to Publish again",
+        type: "error",
+        mode: "normal",
       });
       setIsUploadLoading(false);
       return;

diff --git a/packages/components/socialFeed/Map/Map.tsx b/packages/components/socialFeed/Map/Map.tsx
@@ -5,22 +5,22 @@ import { MapProps } from "@/components/socialFeed/Map/Map.types";
 import { DEFAULT_MAP_POSITION, MAP_LAYER_URL } from "@/utils/feed/map";
 
 export const Map: FC<MapProps> = ({
-  locationSelected,
+  creatingPostLocation,
   locationToCenter = DEFAULT_MAP_POSITION,
 }) => {
   return (
     <LeafletView
       renderLoading={() => <></>}
       zoom={12}
-      mapCenterPosition={locationSelected || locationToCenter}
+      mapCenterPosition={creatingPostLocation || locationToCenter}
       mapLayers={[
         {
           url: MAP_LAYER_URL,
         },
       ]}
       mapMarkers={[
         {
-          position: locationSelected || locationToCenter,
+          position: creatingPostLocation || locationToCenter,
           icon: "https://i.ibb.co/gSnJ70P/location.png", //load image from web; not work with local image
           size: [32, 32],
         },

diff --git a/packages/components/socialFeed/Map/Map.types.ts b/packages/components/socialFeed/Map/Map.types.ts
@@ -1,11 +1,10 @@
 import { StyleProp, ViewStyle } from "react-native";
-import { LatLng } from "react-native-leaflet-view";
 
-import { PostCategory } from "@/utils/types/feed";
+import { CustomLatLngExpression, PostCategory } from "@/utils/types/feed";
 
 export interface MapProps {
-  locationSelected?: LatLng; // When the user is adding a location to a post he's creating
-  locationToCenter?: LatLng; // When the user want to see a post's position on the Map (From Jungle Feed for example)
-  postCategory?: PostCategory;
+  creatingPostLocation?: CustomLatLngExpression; // When the user is adding a location to a post he's creating
+  creatingPostCategory?: PostCategory; // When the user is adding a location to a post he's creating
+  locationToCenter?: CustomLatLngExpression; // When the user want to see a post's position on the Map (From Jungle Feed for example)
   style?: StyleProp<ViewStyle>;
 }
diff --git a/packages/components/socialFeed/Map/Map.web.tsx b/packages/components/socialFeed/Map/Map.web.tsx
@@ -1,12 +1,6 @@
 import "./styles.css";
 import "leaflet/dist/leaflet.css";
-import {
-  DivIcon,
-  LatLngBounds,
-  LatLngExpression,
-  point,
-  PointExpression,
-} from "leaflet";
+import { DivIcon, LatLngBounds, point, PointExpression } from "leaflet";
 import { FC, useEffect, useMemo, useState } from "react";
 import {
   MapContainer,
@@ -19,7 +13,6 @@ import {
 import MarkerClusterGroup from "react-leaflet-cluster";
 import { HeatmapLayer } from "react-leaflet-heatmap-layer-v3/lib";
 import { View } from "react-native";
-import { LatLng } from "react-native-leaflet-view";
 
 import { Post } from "@/api/feed/v1/feed";
 import { MapProps } from "@/components/socialFeed/Map/Map.types";
@@ -33,19 +26,24 @@ import { useSelectedNetworkId } from "@/hooks/useSelectedNetwork";
 import {
   DEFAULT_MAP_POSITION,
   getMapPostIconColorRgba,
-  getMapPostIconSVGString, MAP_LAYER_URL
+  getMapPostIconSVGString,
+  MAP_LAYER_URL,
 } from "@/utils/feed/map";
 import { zodTryParseJSON } from "@/utils/sanitize";
-import { PostCategory, ZodSocialFeedPostMetadata } from "@/utils/types/feed";
+import {
+  CustomLatLngExpression,
+  PostCategory,
+  ZodSocialFeedPostMetadata,
+} from "@/utils/types/feed";
 
 interface MarkerPopup {
-  position: LatLngExpression;
+  position: CustomLatLngExpression;
   post: Post;
   fileURL?: string;
 }
 
 // Custom map post icon
-const getIcon = (postCategory: PostCategory) => {
+const postIcon = (postCategory: PostCategory) => {
   const size = 32;
   const borderWidth = 1;
   const sizeWithBorders = 32 + borderWidth * 2;
@@ -58,8 +56,8 @@ const getIcon = (postCategory: PostCategory) => {
   });
 };
 
-// Custom cluster icon TODO: Make better style respecting the Figma
-const createClusterCustomIcon = function (cluster: any): DivIcon {
+// Custom cluster icon
+const clusterIcon = function (cluster: any) {
   return new DivIcon({
     html: `<div class="cluster-icon-wrapper"><span class="cluster-icon">${cluster.getChildCount()}</span></div>`,
     className: "custom-marker-cluster",
@@ -68,33 +66,21 @@ const createClusterCustomIcon = function (cluster: any): DivIcon {
 };
 
 export const Map: FC<MapProps> = ({
-  // FIXME: locationSelected not updated when selecting an address from AddressSearch
-  locationSelected,
   locationToCenter = DEFAULT_MAP_POSITION,
   style,
-  postCategory = -1,
+  creatingPostLocation,
+  creatingPostCategory = -1,
 }) => {
   const selectedNetworkId = useSelectedNetworkId();
   const [bounds, setBounds] = useState<LatLngBounds | null>(null);
 
   // Prevent infinite rendering after locationSelected update
-  const [localLocationSelected, setLocalLocationSelected] =
-    useState<LatLng>(locationSelected);
+  const [localLocationSelected, setLocalLocationSelected] = useState<
+    CustomLatLngExpression | undefined
+  >(creatingPostLocation);
   useEffect(() => {
-    setLocalLocationSelected(locationSelected);
-  }, [locationSelected]);
-
-  const customIcon = useMemo(
-    () =>
-      new DivIcon({
-        html: `<div style="border-radius: 99px;
-    height: 32px; width: 32px; border: 1px solid #A3A3A3;
-     background-color: rgba(${getMapPostIconColorRgba(postCategory)}); display: flex; align-items: center; justify-content: center;">${getMapPostIconSVGString(postCategory)}</div>`,
-        className: "",
-        iconSize: [34, 34],
-      }),
-    [postCategory],
-  );
+    setLocalLocationSelected(creatingPostLocation);
+  }, [creatingPostLocation]);
 
   // ---- Fetch existing posts that have a location and display them as markers
   const { data } = useFetchFeedLocation({
@@ -174,21 +160,12 @@ export const Map: FC<MapProps> = ({
       ]}
     >
       <MapContainer
-        center={locationSelected || locationToCenter}
+        center={creatingPostLocation || locationToCenter}
         zoom={12}
         attributionControl={false}
       >
         {/*----Loads and displays tiles on the map*/}
-        <TileLayer
-          noWrap
-          attribution=""
-          url={MAP_LAYER_URL}
-        />
-
-        {/*---- When the user creates a post and want to add a location to it*/}
-        {locationSelected && (
-          <Marker position={locationSelected} icon={customIcon} />
-        )}
+        <TileLayer noWrap attribution="" url={MAP_LAYER_URL} />
 
         {/*---- Heatmap displayed when dezoom*/}
         <HeatmapLayer
@@ -215,15 +192,19 @@ export const Map: FC<MapProps> = ({
         />
 
         {/*---- Existing posts that have a location*/}
-        <MarkerClusterGroup
-          chunkedLoading
-          iconCreateFunction={createClusterCustomIcon}
-        >
-          {/* Mapping through the markers */}
+        <MarkerClusterGroup chunkedLoading iconCreateFunction={clusterIcon}>
+          {/*  When the user is creating a post*/}
+          {creatingPostLocation && (
+            <Marker
+              position={creatingPostLocation}
+              icon={postIcon(creatingPostCategory)}
+            />
+          )}
+          {/* Mapping through the markers (Fetched posts) */}
           {markers?.map((marker, index) => (
             <Marker
               position={marker.position}
-              icon={getIcon(marker.post.category)}
+              icon={postIcon(marker.post.category)}
               key={index}
             >
               {marker.post.category === PostCategory.Normal ? (

diff --git a/packages/components/socialFeed/Map/MapPosts/MusicMapPost.tsx b/packages/components/socialFeed/Map/MapPosts/MusicMapPost.tsx
@@ -13,6 +13,7 @@ import { errorColor, neutralFF, withAlpha } from "@/utils/style/colors";
 import { fontSemibold10 } from "@/utils/style/fonts";
 import {
   zodSocialFeedCommonMetadata,
+  ZodSocialFeedPostMetadata,
   ZodSocialFeedTrackMetadata,
 } from "@/utils/types/feed";
 import { Media } from "@/utils/types/mediaPlayer";
@@ -21,20 +22,36 @@ export const MusicMapPost: FC<{
   post: Post;
 }> = ({ post }) => {
   const { current: id } = useRef(uuidv4());
-  const track = zodTryParseJSON(ZodSocialFeedTrackMetadata, post.metadata);
-
+  const musicAudioNotePostMetadata = zodTryParseJSON(
+    ZodSocialFeedTrackMetadata,
+    post.metadata,
+  );
+  const musicPostMetadata = zodTryParseJSON(
+    ZodSocialFeedPostMetadata,
+    post.metadata,
+  );
   const baseMetadata = zodTryParseJSON(
     zodSocialFeedCommonMetadata,
     post.metadata,
   );
   const title = baseMetadata?.title || "Music from Social Feed";
 
-  const mediaToPlay: Media | undefined = track && {
-    id,
-    fileUrl: track.audioFile.url,
-    duration: track.audioFile.audioMetadata?.duration,
-    postId: post.id,
-  };
+  // MusicAudio and Music have different metadata but have the same render on the map, so we handle these 2 cases
+  const mediaToPlay: Media | undefined = musicAudioNotePostMetadata
+    ? {
+        id,
+        fileUrl: musicAudioNotePostMetadata.audioFile.url,
+        duration: musicAudioNotePostMetadata.audioFile.audioMetadata?.duration,
+        postId: post.id,
+      }
+    : musicPostMetadata?.files
+      ? {
+          id,
+          fileUrl: musicPostMetadata.files[0].url,
+          duration: musicPostMetadata.files[0].audioMetadata?.duration,
+          postId: post.id,
+        }
+      : undefined;
 
   return (
     <MapPostWrapper post={post} style={{ width: 185 }}>