From ce16f26ba1f28a310fe67d994cecbb440fddcd0e Mon Sep 17 00:00:00 2001
From: TheRealSharKzy~ <thomas.boillot1@etu.univ-lorraine.fr>
Date: Wed, 3 Apr 2024 17:56:19 +0200
Subject: [PATCH] refactor(frontend): started to change the active room page
 frontend

---
 expo/app/(tabs)/rooms/index.tsx           |  6 +++
 expo/components/ActiveRoomView.tsx        | 54 ++++++++++-----------
 expo/components/player/Player.tsx         | 59 ++++++++++++++++++-----
 expo/components/player/PlayerControls.tsx |  7 ++-
 expo/components/player/RoomPlayer.tsx     | 13 ++---
 5 files changed, 91 insertions(+), 48 deletions(-)

diff --git a/expo/app/(tabs)/rooms/index.tsx b/expo/app/(tabs)/rooms/index.tsx
index eb9ca753..b31b4f55 100644
--- a/expo/app/(tabs)/rooms/index.tsx
+++ b/expo/app/(tabs)/rooms/index.tsx
@@ -28,8 +28,14 @@ const styles = StyleSheet.create({
     marginHorizontal: 24,
     marginVertical: 21,
     gap: 36,
+    maxHeight: 270,
   },
   buttonContainer: {
     gap: 8,
   },
+  title: {
+    fontSize: 32,
+    fontFamily: "Outfit-Bold",
+    maxWidth: 354,
+  },
 });
diff --git a/expo/components/ActiveRoomView.tsx b/expo/components/ActiveRoomView.tsx
index 31e6522a..7fae970f 100644
--- a/expo/components/ActiveRoomView.tsx
+++ b/expo/components/ActiveRoomView.tsx
@@ -3,7 +3,6 @@ import { Link, router } from "expo-router";
 import DoorOpen from "phosphor-react-native/src/icons/DoorOpen";
 import Gear from "phosphor-react-native/src/icons/Gear";
 import Plus from "phosphor-react-native/src/icons/Plus";
-import ThumbsDown from "phosphor-react-native/src/icons/ThumbsDown";
 import { useEffect, useState } from "react";
 import {
   ActivityIndicator,
@@ -112,20 +111,6 @@ const ActiveRoomView: React.FC<ActiveRoomViewProps> = ({ room }) => {
     );
   };
 
-  const leaveRoom = async () => {
-    if (!userProfile || !room) return;
-
-    const response = await fetch(url + "/leave", { credentials: "include" });
-    if (!response.ok) {
-      return Alert.alert(await response.text());
-    }
-
-    if (!socket) return Alert.alert("Impossible de trouver le socket.");
-    socket.disconnect();
-
-    router.replace("/rooms");
-  };
-
   /**
    * Handle the dislike of a track
    * @param index -1 for actual track, otherwise the index of the track in the queue
@@ -141,11 +126,25 @@ const ActiveRoomView: React.FC<ActiveRoomViewProps> = ({ room }) => {
     }
   };
 
+  const leaveRoom = async () => {
+    if (!userProfile || !room) return;
+
+    const response = await fetch(url + "/leave", { credentials: "include" });
+    if (!response.ok) {
+      return Alert.alert(await response.text());
+    }
+
+    if (!socket) return Alert.alert("Impossible de trouver le socket.");
+    socket.disconnect();
+
+    router.replace("/rooms");
+  };
+
   const networkStatus = useNetworkStatus();
 
   return (
     <ScrollView
-      style={{
+      contentContainerStyle={{
         paddingVertical: 32,
         paddingHorizontal: 12,
         minHeight: "100%",
@@ -189,16 +188,6 @@ const ActiveRoomView: React.FC<ActiveRoomViewProps> = ({ room }) => {
               </Button>
             </View>
             <RoomPlayer socket={socket} room={room} />
-            <Button
-              onPress={() => {
-                handleDislike(-1);
-              }}
-              prependIcon={<ThumbsDown />}
-              size="small"
-              type={voteSkipActualTrack ? "filled" : "outline"}
-            >
-              Voter pour passer
-            </Button>
             <Text style={styles.title}>
               File d'attente ({liveRoom?.queue.length ?? 0})
             </Text>
@@ -228,6 +217,11 @@ const ActiveRoomView: React.FC<ActiveRoomViewProps> = ({ room }) => {
               />
             )}
           </View>
+          <View style={headerStyles.buttonContainer}>
+            <Button block href={`/rooms/${room.id}/invite`}>
+              Inviter des amis
+            </Button>
+          </View>
 
           <Button
             icon={<Plus />}
@@ -247,8 +241,9 @@ export default ActiveRoomView;
 const floatingStyle = StyleSheet.create({
   container: {
     position: "absolute",
-    bottom: 24,
+    bottom: 0,
     right: 24,
+    zIndex: 1,
   },
   text: {
     color: "#FFF",
@@ -262,10 +257,15 @@ const headerStyles = StyleSheet.create({
     paddingHorizontal: 24,
     paddingVertical: 14,
     gap: 10,
+    maxHeight: 378,
   },
   buttonContainer: {
     gap: 8,
   },
+  headerTitle: {
+    fontSize: 32,
+    fontFamily: "Outfit-Bold",
+  },
   titleContainer: {
     flexDirection: "row",
     alignItems: "center",
diff --git a/expo/components/player/Player.tsx b/expo/components/player/Player.tsx
index 1933d4ec..25dde21b 100644
--- a/expo/components/player/Player.tsx
+++ b/expo/components/player/Player.tsx
@@ -1,8 +1,13 @@
 import { PlayingJSONTrack } from "commons/backend-types";
 import { Image } from "expo-image";
-import React from "react";
+import ThumbsDown from "phosphor-react-native/src/icons/ThumbsDown";
+import React, { useState } from "react";
 import { StyleSheet, Text, View } from "react-native";
 
+import { useWebSocket } from "../../app/(tabs)/rooms/[id]/_layout";
+import { useUserProfile } from "../../lib/userProfile";
+import Button from "../Button";
+
 type PlayerProps = {
   state: PlayingJSONTrack | null;
   children?: React.ReactNode;
@@ -12,6 +17,26 @@ const blurhash =
   "|rF?hV%2WCj[ayj[a|j[az_NaeWBj@ayfRayfQfQM{M|azj[azf6fQfQfQIpWXofj[ayj[j[fQayWCoeoeaya}j[ayfQa{oLj?j[WVj[ayayj[fQoff7azayj[ayj[j[ayofayayayj[fQj[ayayj[ayfjj[j[ayjuayj[";
 
 const Player: React.FC<PlayerProps> = ({ state, children }) => {
+  const [voteSkipActualTrack, setVoteSkipActualTrack] =
+    useState<boolean>(false);
+  const socket = useWebSocket();
+  const userProfile = useUserProfile();
+
+  /**
+   * Handle the dislike of a track
+   * @param index -1 for actual track, otherwise the index of the track in the queue
+   * @returns void
+   */
+  const handleDislike = (index: number) => {
+    if (!socket || !userProfile) return;
+    const userId = userProfile.user_profile_id;
+
+    socket.emit("queue:voteSkip", index, userId);
+    if (index === -1) {
+      setVoteSkipActualTrack(!voteSkipActualTrack);
+    }
+  };
+
   return (
     <View style={styles.container}>
       {state && (
@@ -22,12 +47,23 @@ const Player: React.FC<PlayerProps> = ({ state, children }) => {
             alt={state.title}
             style={styles.image}
           />
-          <View>
-            <Text style={styles.title}>{state.title}</Text>
-            <View style={styles.artistContainer}>
-              <Text>{state.artistsName}</Text>
+          <View style={{ gap: 16 }}>
+            <View>
+              <Text style={styles.title}>{state.title}</Text>
+              <View>
+                <Text style={styles.artistName}>{state.artistsName}</Text>
+              </View>
             </View>
-            {children}
+            <Button
+              onPress={() => {
+                handleDislike(-1);
+              }}
+              prependIcon={<ThumbsDown />}
+              size="small"
+              type={voteSkipActualTrack ? "filled" : "outline"}
+            >
+              Voter pour passer
+            </Button>
           </View>
         </>
       )}
@@ -40,20 +76,21 @@ const styles = StyleSheet.create({
   container: {
     flexDirection: "row",
     alignItems: "center",
-    justifyContent: "space-between",
+    gap: 10,
     maxWidth: 500,
   },
   image: {
     width: 128,
     height: 128,
+    borderRadius: 6,
   },
   title: {
     fontSize: 18,
-    fontWeight: "bold",
+    fontFamily: "Outfit-Medium",
   },
-  artistContainer: {
-    flexDirection: "row",
-    alignItems: "center",
+  artistName: {
+    color: "#C3C3C3",
+    fontFamily: "Outfit-Medium",
   },
 });
 
diff --git a/expo/components/player/PlayerControls.tsx b/expo/components/player/PlayerControls.tsx
index 509f22b6..7e88e48a 100644
--- a/expo/components/player/PlayerControls.tsx
+++ b/expo/components/player/PlayerControls.tsx
@@ -4,7 +4,7 @@ import Play from "phosphor-react-native/src/icons/Play";
 import SkipBack from "phosphor-react-native/src/icons/SkipBack";
 import SkipForward from "phosphor-react-native/src/icons/SkipForward";
 import React, { useState } from "react";
-import { StyleSheet, View, Text } from "react-native";
+import { StyleSheet, Text, View } from "react-native";
 
 import { PlayerRemote } from "../../lib/audioRemote";
 import Button from "../Button";
@@ -76,7 +76,6 @@ const PlayerControls: React.FC<PlayerControlsProps> = ({ state, remote }) => {
 
   return (
     <View>
-      <Button onPress={skipTo90}>Aller à 90%</Button>
       <View style={styles.progressContainer}>
         <Text>{formatDuration(state.currentTime)}</Text>
         <View style={styles.progressBar}>
@@ -125,8 +124,8 @@ const styles = StyleSheet.create({
   controls: {
     flexDirection: "row",
     alignItems: "center",
-    justifyContent: "space-between",
-    gap: 3,
+    justifyContent: "center",
+    gap: 32,
   },
   progressContainer: {
     flexDirection: "row",
diff --git a/expo/components/player/RoomPlayer.tsx b/expo/components/player/RoomPlayer.tsx
index c632f213..454f2e5b 100644
--- a/expo/components/player/RoomPlayer.tsx
+++ b/expo/components/player/RoomPlayer.tsx
@@ -1,9 +1,9 @@
-import { PlayingJSONTrack, RoomJSON } from "commons/backend-types";
+import { PlayingJSONTrack } from "commons/backend-types";
 import {
   ClientToServerEvents,
   ServerToClientEvents,
 } from "commons/socket.io-types";
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useState } from "react";
 import { View } from "react-native";
 import { Socket } from "socket.io-client";
 
@@ -66,11 +66,12 @@ const RoomPlayer: React.FC<RoomPlayerProps> = ({ room, socket }) => {
             socket={socket}
           />
         )}
-        <Player state={playbackState}>
-          {isHost && remote && (
+        <Player state={playbackState} />
+        {isHost && remote && (
+          <View style={{ paddingTop: 32 }}>
             <PlayerControls state={playbackState} remote={remote} />
-          )}
-        </Player>
+          </View>
+        )}
       </View>
 
       <Button type="outline" onPress={playCoolSong}>