Fix mute issue. Also move the video room outside

CS3219-AY2324S1 · Oct 17, 2023 · c5d56f9 · c5d56f9
1 parent f62f493
commit c5d56f9
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 10 deletions.
diff --git a/frontend/src/components/room/description.tsx b/frontend/src/components/room/description.tsx
@@ -18,7 +18,6 @@ type DescriptionProps = {
 export default function Description({
   question,
   className,
-  room
 }: DescriptionProps) {
   return (
     <Card className={`m-2 ml-0 px-6 h-full ${className} overflow-y-auto overflow-x-wrap pb-4`}>
@@ -45,7 +44,6 @@ export default function Description({
           <div dangerouslySetInnerHTML={{ __html: question.description }} className="max-w-2xl overflow-x-auto"></div>
         </TypographySmall>
       </div>
-      <VideoRoom room={room} />
     </Card>
   );
 }
diff --git a/frontend/src/components/room/video-room.tsx b/frontend/src/components/room/video-room.tsx
@@ -5,6 +5,7 @@ import { Mic, MicOff, Video, VideoOff } from 'lucide-react';
 
 interface VideoRoomProps {
     room: Room | null;
+    className?: string;
 }
 
 function SingleVideoTrack({ track, userId, isLocal, isMute, toggleMute, isCameraOn, toggleCamera }:
@@ -27,7 +28,7 @@ function SingleVideoTrack({ track, userId, isLocal, isMute, toggleMute, isCamera
         className="flex items-center justify-start gap-4"
         key={userId}
     >
-        <div className="w-64 h-36 p-2 flex flex-col items-center justify-center border border-primary rounded-lg">
+        <div className="w-64 p-2 flex flex-col items-center justify-center border border-primary rounded-lg">
             <div ref={videoContainer}></div>
             <div className="flex-1 ml-1 w-full h-8 flex items-center justify-between">
                 <p>{userId}</p>
@@ -59,7 +60,7 @@ function SingleAudioTrack({track}: {track: RemoteAudioTrack}) {
     ></div>);
 }
 
-export default function VideoRoom({ room }: VideoRoomProps) {
+const VideoRoom: React.FC<VideoRoomProps> = ({ room, className }) => {
     const [isCameraOn, setIsCameraOn] = useState(true);
     const [isMute, setIsMute] = useState(false);
     const [participants, setParticipants] = useState<RemoteParticipant[]>([]);
@@ -103,7 +104,7 @@ export default function VideoRoom({ room }: VideoRoomProps) {
     const toggleMute = () => {
         room?.localParticipant.audioTracks.forEach(publication => {
             if (publication.track) {
-                publication.track.enable(!isMute);
+                publication.track.enable(isMute);
                 setIsMute(!isMute);
             }
         });
@@ -128,6 +129,7 @@ export default function VideoRoom({ room }: VideoRoomProps) {
     }, [room]);
 
     return (
+        <div className={className}>
         <div className="flex gap-4 absolute bottom-10">
             {localParticipant ? Array.from(localParticipant.videoTracks.values()).map(publication => {
                 if (publication.track.kind === 'video') {
@@ -137,8 +139,6 @@ export default function VideoRoom({ room }: VideoRoomProps) {
             {participants.flatMap(participant => {
                 return Array.from(participant.videoTracks.values()).map(publication => {
                     if (publication.track?.kind === 'video') {
-                        console.log("remote track")
-                        // return <div key={publication.trackSid}><p>remote track</p></div>;
                         return <SingleVideoTrack track={publication.track} key={participant.identity} userId={participant.identity} isLocal={false} isMute={isMute} toggleMute={toggleMute} isCameraOn={isCameraOn} toggleCamera={toggleCamera} />;
                     } else {
                         return null; 
@@ -154,7 +154,8 @@ export default function VideoRoom({ room }: VideoRoomProps) {
                     }
                 });
             })}
-        </div>
+        </div></div>
     );
-}
+};
 
+export default VideoRoom;
diff --git a/frontend/src/pages/room/[id].tsx b/frontend/src/pages/room/[id].tsx
@@ -48,7 +48,6 @@ export default function Room() {
               question={question}
               participants={["Charisma", "Chun Wei"]}
               room={room}
-              className="h-[60vh]"
             />
           </TabsContent>
           <TabsContent value="solution">{question.solution}</TabsContent>
@@ -62,6 +61,7 @@ export default function Room() {
           />
         </div>
       </div>
+      <VideoRoom className="bottom-0.5 left-0.5 fixed" room={room} />
     </div>
   );
 }