new project modal & seperate playback and music likes

src/screens/Playbacks/components/PlaybackItem.web.js

@@ -17,12 +17,7 @@ import {
 } from "react-native";
 import { icons, img } from "../../../assets";
 import KaraokeLyrics from "../../../components/KaraokeLyrics";
-import {
-  arrayRemove,
-  arrayUnion,
-  projectsRef,
-  usersRef,
-} from "../../../config/firebase";
+import { usersRef } from "../../../config/firebase";
 import { Routes } from "../../../navigation";
 import { navigate } from "../../../navigation/NavigationService";
 import { useUser } from "../../../providers/UserDataProvider";
@@ -30,6 +25,11 @@ import { Palette } from "../../../styles";
 import { FONT_FAMILY } from "../../../styles/Fonts";
 import { size } from "../../../styles/Style";
 import CommentsPanel from "./CommentsPanel.web";
+import {
+  getProjectLikes,
+  LIKE_TARGET,
+  toggleProjectLike,
+} from "../../../utils/likes";
 
 // Debug logging toggle for web playback
 const DEBUG_PLAYBACK_WEB = true;
@@ -61,7 +61,7 @@ const PlaybackItem = ({
   const wasActiveRef = useRef(false);
   const startedRef = useRef(false);
 
-  const initialLikedBy = Array.isArray(item?.likedBy) ? item.likedBy : [];
+  const initialLikedBy = getProjectLikes(item, LIKE_TARGET.PLAYBACK);
   const [isLiked, setIsLiked] = useState(
     currentUID ? initialLikedBy.includes(currentUID) : false
   );
@@ -130,10 +130,10 @@ const PlaybackItem = ({
   }, [owner?.followedBy, currentUID]);
 
   useEffect(() => {
-    const lb = Array.isArray(item?.likedBy) ? item.likedBy : [];
+    const lb = getProjectLikes(item, LIKE_TARGET.PLAYBACK);
     setLikesCount(lb.length);
     setIsLiked(currentUID ? lb.includes(currentUID) : false);
-  }, [item?.likedBy, currentUID]);
+  }, [item?.likes?.playback, currentUID]);
 
   useEffect(() => {
     startedRef.current = false;
@@ -428,15 +428,12 @@ const PlaybackItem = ({
                     setIsLiked(nextLiked);
                     setLikesCount((c) => Math.max(0, c + (nextLiked ? 1 : -1)));
 
-                    const ref = projectsRef.doc(item.id);
-                    await ref.set(
-                      {
-                        likedBy: nextLiked
-                          ? arrayUnion(currentUID)
-                          : arrayRemove(currentUID),
-                      },
-                      { merge: true }
-                    );
+                    await toggleProjectLike({
+                      projectId: item.id,
+                      currentUID,
+                      target: LIKE_TARGET.PLAYBACK,
+                      next: nextLiked,
+                    });
                   } catch (_e) {
                     setIsLiked((v) => !v);
                     setLikesCount((c) =>