feat/user-track

backend/src/socketio/Room.ts

@@ -99,9 +99,8 @@ export default class Room {
     }
   }
 
-  async add(rawUrl: string) {
+  async add(rawUrl: string, accountId: string) {
     if (!this.remote) return;
-
     const trackMetadata = this.trackFactory.fromUrl(rawUrl);
     if (trackMetadata === null) return;
 
@@ -121,7 +120,7 @@ export default class Room {
 
     this.queue.push({
       ...track,
-      addedBy: "TODO", // TODO: Add the id of the user who added the track
+      addedBy: accountId,
       votes: [],
     });
     if (this.queue.length !== 1) return;

backend/src/socketio/RoomIO.ts

@@ -57,16 +57,11 @@ export default function onRoomWSConnection(socket: TypedSocket) {
      */
     sendQueue(socket, room);
 
-    socket.on("queue:add", async (params: string) => {
-      await room.add(params);
+    socket.on("queue:add", async (rawUrl: string, accountId: string) => {
+      await room.add(rawUrl, accountId);
       sendQueue(socket, room);
     });
 
-    socket.on("queue:add", async (rawUrl: string) => {
-      await room.add(rawUrl);
-      roomSocket.emit("queue:update", Room.toJSON(room));
-    });
-
     // We should check the origin of the request to prevent anyone that isn't the host from removing anything
     socket.on("queue:remove", async (index: number) => {
       if (Number.isSafeInteger(index)) {

commons/backend-types.ts

@@ -15,7 +15,10 @@ export interface RoomJSONTrack extends JSONTrack {
    * The user id of the user who added the track to the queue
    */
   addedBy: string;
-  votes: string[]; // array of user ids
+  /**
+   * An array of user ids of users who have voted to skip this track
+   */
+  votes: string[];
 }
 
 export interface PlayingJSONTrack extends RoomJSONTrack {

commons/socket.io-types.ts

@@ -80,7 +80,7 @@ export interface ClientToServerEvents
   extends LocalPlayerClientToServerEvents,
     PlayerClientToServerEvents {
   /** Add a track to the queue. */
-  "queue:add": (rawUrl: string) => void;
+  "queue:add": (rawUrl: string, accountId: string) => void;
   /** Remove a track from the queue by its index. */
   "queue:remove": (index: number) => void;
   /** Remove a track from the queue by its link. */

expo/app/(tabs)/rooms/[id]/add.tsx

@@ -10,9 +10,11 @@ import { Text } from "../../../../components/Themed";
 import Library from "../../../../components/room/Library";
 import SearchedTrackItem from "../../../../components/room/SearchedTrackItem";
 import { useDebounce } from "../../../../lib/useDebounce";
+import { useUserProfile } from "../../../../lib/userProfile";
 
 export default function AddTrack() {
   const { id } = useLocalSearchParams();
+  const userProfile = useUserProfile();
 
   const [searchBar, setSearchBar] = useState("");
   const [result, setResult] = useState<JSONTrack[] | null>(null);
@@ -24,18 +26,26 @@ export default function AddTrack() {
     if (debouncedSearchMusic) searchMusic();
   }, [debouncedSearchMusic]);
 
-  const addMusic = (value: string) => {
+  const addMusic = (url: string) => {
     if (!socket) return;
+    if (!userProfile)
+      return Alert.alert(
+        "Les utilisateurs anonymes ne sont pas autorisés à accéder à cette fonctionnalité. Veuillez vous connecter."
+      );
     try {
-      socket.emit("queue:add", new URL(value).toString());
+      socket.emit(
+        "queue:add",
+        new URL(url).toString(),
+        userProfile.user_profile_id
+      );
     } catch {
       setSearchBar("");
       setResult(null);
       Alert.alert("Erreur, impossible d'ajouter la musique");
     }
     if (router.canGoBack()) return router.back();
-    const url = ("/(tabs)/rooms/" + id) as any;
-    router.push(url);
+    const path = ("/(tabs)/rooms/" + id) as any;
+    router.push(path);
   };
 
   const searchMusic = () => {

expo/components/ActiveRoomView.tsx

@@ -93,8 +93,8 @@ const ActiveRoomView: React.FC<ActiveRoomViewProps> = ({ room }) => {
       setLiveRoom(data);
     });
 
-    socket.on("queue:update", (data: RoomJSON) => {
-      setLiveRoom(data);
+    socket.on("queue:update", async (room: RoomJSON) => {
+      setLiveRoom(room);
     });
   }, [socket]);
 
@@ -223,6 +223,7 @@ const ActiveRoomView: React.FC<ActiveRoomViewProps> = ({ room }) => {
                         )) ||
                       false
                     }
+                    addedBy={item.addedBy}
                   />
                 )}
               />

expo/components/room/TrackItem.tsx

@@ -9,14 +9,16 @@ import { Menu, MenuOptions, MenuTrigger } from "react-native-popup-menu";
 import MinimalistTrackItem from "./MinimalistTrackItem";
 import SocketIo from "../../lib/socketio";
 import CustomMenuOption from "../CustomMenuOption";
+import Avatar from "../profile/Avatar";
 
 export default function TrackItem(prop: {
   track: JSONTrack;
   index: number;
   roomId: string;
   isMenuDisabled: boolean;
-  handleDislike?: () => void;
-  disliked?: boolean;
+  handleDislike: () => void;
+  disliked: boolean;
+  addedBy: string;
 }) {
   const {
     title,
@@ -45,10 +47,14 @@ export default function TrackItem(prop: {
       artistsName={artists}
       imgUrl={rawImageUrl}
       profilePictureImage={
-        <Image
-          source={require("../../assets/images/album-cover.jpg")}
-          style={itemStyles.profileImage}
-        />
+        prop.addedBy ? (
+          <Avatar id={prop.addedBy} style={itemStyles.profileImage} />
+        ) : (
+          <Image
+            source={require("../../assets/images/album-cover.jpg")}
+            style={itemStyles.profileImage}
+          />
+        )
       }
     >
       <Pressable onPress={handleDislike}>