feat/room-wireframe-integration

backend/src/RoomStorage.ts

@@ -64,7 +64,18 @@ export default class RoomStorage {
         const newPlaybackState = newPlaybackStateResponse.data;
         room.setPlaybackState(newPlaybackState);
 
-        if (!newPlaybackState) return console.debug("No music is playing");
+        if (!newPlaybackState) {
+          if (
+            room.getQueue().length > 0 &&
+            room.getStreamingService().isClientSide()
+          ) {
+            const nextTrack = room.shiftQueue();
+            if (!nextTrack) return console.debug("No more tracks in the queue");
+            return remote.playTrack(nextTrack.url);
+          }
+
+          return console.debug("No music is playing");
+        }
 
         const remainingTime =
           newPlaybackState.duration - newPlaybackState.currentTime;

backend/src/socketio/Room.ts

@@ -69,7 +69,7 @@ export default class Room {
       room.setRemote(remote);
       roomStorage.addRoom(room);
     } else {
-      room.setHostSocket(hostSocket);
+      if (hostSocket) room.setHostSocket(hostSocket);
     }
 
     return { data: room, error: null };

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

@@ -12,6 +12,7 @@ import Alert from "../../../../components/Alert";
 import ErrorBoundary from "../../../../components/ErrorBoundary";
 import RoomErrorBoundary from "../../../../components/ErrorComponent/RoomError";
 import WebsocketError from "../../../../components/ErrorComponent/WebsocketError";
+import HeaderBack from "../../../../components/HeaderBack";
 import { useAsyncError } from "../../../../lib/AsyncError";
 import { getApiUrl } from "../../../../lib/apiUrl";
 import SocketIo from "../../../../lib/socketio";
@@ -94,7 +95,10 @@ export default function RoomTabLayout() {
     <ErrorBoundary fallback={<RoomErrorBoundary />}>
       <WebSocketProvider roomId={id}>
         <Stack>
-          <Stack.Screen name="index" options={{ title: "Nom de la salle" }} />
+          <Stack.Screen
+            name="index"
+            options={{ header: () => <HeaderBack /> }}
+          />
           <Stack.Screen
             name="invite"
             options={{ presentation: "modal", title: "Menu d'invitation" }}

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

@@ -10,6 +10,7 @@ import { useEffect, useState } from "react";
 import { Alert, Platform, StyleSheet } from "react-native";
 
 import Button from "../../../../components/Button";
+import CustomTextInput from "../../../../components/CustomTextInput";
 import { View } from "../../../../components/Themed";
 import { supabase } from "../../../../lib/supabase";
 
@@ -60,19 +61,26 @@ export default function InvitationModal() {
 
   return (
     <View style={styles.modalContent}>
-      <View style={styles.shareButtonsContainer}>
-        {isCopied ? (
-          <Button block prependIcon={<Check />}>
-            Lien copié
+      <View style={styles.shareOptions}>
+        <CustomTextInput
+          value={room?.code || "no code"}
+          style={styles.code}
+          disabled
+        />
+        <View style={styles.shareButtonsContainer}>
+          {isCopied ? (
+            <Button block prependIcon={<Check />}>
+              Lien copié
+            </Button>
+          ) : (
+            <Button block onPress={handleShare} prependIcon={<Share />}>
+              Copier le lien
+            </Button>
+          )}
+          <Button type="outline" icon={<QrCode />} href={`/rooms/${id}/qrcode`}>
+            Afficher le QR code
           </Button>
-        ) : (
-          <Button block onPress={handleShare} prependIcon={<Share />}>
-            Copier le lien
-          </Button>
-        )}
-        <Button type="outline" icon={<QrCode />} href={`/rooms/${id}/qrcode`}>
-          Afficher le QR code
-        </Button>
+        </View>
       </View>
       <Button block href={`/rooms/${id}`} prependIcon={<ArrowRight />}>
         Retour à la salle d'écoute
@@ -122,4 +130,15 @@ const styles = StyleSheet.create({
     gap: 16,
     alignSelf: "stretch",
   },
+  shareOptions: {
+    gap: 16,
+    flexDirection: "column",
+    maxWidth: 390,
+  },
+  code: {
+    textAlign: "center",
+    fontFamily: "Outfit-Bold",
+    borderRadius: 16,
+    borderWidth: 0,
+  },
 });

expo/app/(tabs)/rooms/index.tsx

@@ -17,5 +17,14 @@ const styles = StyleSheet.create({
     marginHorizontal: 24,
     marginVertical: 21,
     gap: 36,
+    maxHeight: 270,
+  },
+  buttonContainer: {
+    gap: 8,
+  },
+  title: {
+    fontSize: 32,
+    fontFamily: "Outfit-Bold",
+    maxWidth: 354,
   },
 });