new project modal & seperate playback and music likes

src/screens/Playbacks/Playbacks.js

@@ -15,12 +15,7 @@ import { icons, img } from "../../assets";
 import { openComments } from "../../components/bottomsheets/CommentsBottomSheet";
 import KaraokeLyrics from "../../components/KaraokeLyrics";
 import ProfilePicture from "../../components/ProfilePicture";
-import {
-  arrayRemove,
-  arrayUnion,
-  projectsRef,
-  usersRef,
-} from "../../config/firebase";
+import { projectsRef, usersRef } from "../../config/firebase";
 import useDataFromRef from "../../hooks/useDataFromRef";
 import { Routes } from "../../navigation";
 import { navigate } from "../../navigation/NavigationService";
@@ -28,11 +23,16 @@ import { useUser } from "../../providers/UserDataProvider";
 import { Palette } from "../../styles";
 import { FONT_FAMILY } from "../../styles/Fonts";
 import { size } from "../../styles/Style";
+import {
+  getProjectLikes,
+  LIKE_TARGET,
+  toggleProjectLike,
+} from "../../utils/likes";
 
 const PlaybackItem = ({ item, isActive, userCache, getUserByUid }) => {
   const { currentUID, followUser, unfollowUser } = useUser() || {};
   const videoUrl = item?.playbackUrl || null;
-  const initialLikedBy = Array.isArray(item?.likedBy) ? item.likedBy : [];
+  const initialLikedBy = getProjectLikes(item, LIKE_TARGET.PLAYBACK);
   const [isLiked, setIsLiked] = useState(
     currentUID ? initialLikedBy.includes(currentUID) : false
   );
@@ -100,10 +100,10 @@ const PlaybackItem = ({ item, isActive, userCache, getUserByUid }) => {
   }, [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]);
 
   const projectTitle = typeof item?.title === "string" ? item.title.trim() : "";
 
@@ -292,16 +292,12 @@ const PlaybackItem = ({ item, isActive, userCache, getUserByUid }) => {
                 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),
-                    // Optionally: updatedAt could be set if needed
-                  },
-                  { merge: true }
-                );
+                await toggleProjectLike({
+                  projectId: item.id,
+                  currentUID,
+                  target: LIKE_TARGET.PLAYBACK,
+                  next: nextLiked,
+                });
               } catch (e) {
                 // rollback on failure
                 setIsLiked((v) => !v);

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) =>