Merge pull request #268 from SWM-FIRE/FIRE-207-study]-webrtc-세미나-준비-이하령

Fire 207 study] webrtc 세미나 준비 이하령
SWM-FIRE · Oct 18, 2022 · 6d9c78b · 6d9c78b
2 parents 4fc6ca7 + 55ecae3
commit 6d9c78b
Show file tree

Hide file tree

Showing 7 changed files with 55 additions and 33 deletions.
diff --git a/src/adapters/mediaStateChange.ts b/src/adapters/mediaStateChange.ts
@@ -24,14 +24,14 @@ const mediaStateChange = () => {
 
   const emitAudioStateChange = (room: string, enabled: boolean) => {
     newSocket?.emit(SOCKET_EVENT.AUDIO_STATE_CHANGE, { room, enabled });
-    toggleAudioStream(enabled);
   };
 
   useEffect(() => {
     newSocket?.on(SOCKET_EVENT.AUDIO_STATE_CHANGE, (data) => {
       const { uid, enabled } = data;
       const isMe = uid === userId;
       const audioStateUser = findUserByUid(uid);
+
       if (!audioStateUser && !isMe) {
         appendUser({
           nickname: '',
@@ -41,10 +41,12 @@ const mediaStateChange = () => {
           enabledVideo: true,
           enabledAudio: enabled,
           isAlreadyEntered: true,
-          volume: enabled ? 0.5 : 0,
+          volume: 0.5,
         });
       } else if (audioStateUser && !isMe) {
         setEnabledAudioByUid(uid, enabled);
+      } else if (isMe) {
+        toggleAudioStream(enabled);
       }
     });
 

diff --git a/src/adapters/roomSocket.ts b/src/adapters/roomSocket.ts
@@ -12,6 +12,10 @@ const generateSocket = () => {
     : null;
 };
 
+const deleteSocket = () => {
+  roomSocket.socket = null;
+};
+
 export default roomSocket;
 
-export { generateSocket };
+export { generateSocket, deleteSocket };
diff --git a/src/components/ready/RoomDetail.tsx b/src/components/ready/RoomDetail.tsx
@@ -1,38 +1,33 @@
-import React, { useState } from 'react';
+import React from 'react';
 import styled from 'styled-components';
 import { useNavigate } from 'react-router-dom';
 import Card from './card/Card';
 
 export default function RoomDetail({ roomNo: roomId, setIsPrompt }) {
   const navigate = useNavigate();
-  const [disableButton, setDisableButton] = useState(true);
+
+  // eslint-disable-next-line no-undef
+  const permissionName = 'microphone' as PermissionName;
+  const checkValid = !!navigator.permissions?.query;
 
   const enterRoom = (event: React.MouseEvent<HTMLButtonElement>) => {
     event.preventDefault();
-    if (disableButton) {
-      setIsPrompt(true);
-    } else if (localStorage.getItem('access_token')) {
-      navigate(`/room/${roomId}`);
+    if (checkValid) {
+      navigator.permissions.query({ name: permissionName }).then((result) => {
+        if (result.state === 'granted') {
+          setIsPrompt(false);
+          if (localStorage.getItem('access_token')) {
+            navigate(`/room/${roomId}`);
+          }
+        } else if (result.state === 'prompt') {
+          setIsPrompt(true);
+        } else if (result.state === 'denied') {
+          setIsPrompt(true);
+        }
+      });
     }
   };
 
-  // eslint-disable-next-line no-undef
-  const permissionName = 'microphone' as PermissionName;
-  const checkValid = !!navigator.permissions?.query;
-  if (checkValid) {
-    navigator.permissions.query({ name: permissionName }).then((result) => {
-      console.log(result);
-      if (result.state === 'granted') {
-        setIsPrompt(false);
-        setDisableButton(false);
-      } else if (result.state === 'prompt') {
-        setDisableButton(true);
-      } else if (result.state === 'denied') {
-        setDisableButton(true);
-      }
-    });
-  }
-
   return (
     <Container>
       <Card room={roomId} />

diff --git a/src/components/room/sideProfileModal/ControlVolume.tsx b/src/components/room/sideProfileModal/ControlVolume.tsx
@@ -21,7 +21,7 @@ export default function ControlVolume({ user }: { user: VideoUserInterface }) {
   };
   const onChangeVolume = (event: React.ChangeEvent<HTMLInputElement>) => {
     setNewVolume(event.target.valueAsNumber);
-    setVolumeByUid(user.uid, event.target.valueAsNumber);
+    if (userSpeaker) setVolumeByUid(user.uid, event.target.valueAsNumber);
   };
 
   useEffect(() => {

diff --git a/src/hooks/usePeerConnection.ts b/src/hooks/usePeerConnection.ts
@@ -26,7 +26,6 @@ const usePeerConnection = () => {
   const { appendMessages } = messageStore();
   const { emitAudioStateChange } = mediaStateChange();
   const newSocket = roomSocket.socket;
-
   const RTCConfig = {
     iceServers: [
       {
@@ -151,8 +150,8 @@ const usePeerConnection = () => {
     const onNewUser = async ({ sid, uid }) => {
       emitAudioStateChange(roomId, userMic);
       getUser(uid).then((res) => {
-        const newUser = findUserByUid(uid);
-        if (!newUser) {
+        const existingUser = findUserByUid(uid);
+        if (!existingUser) {
           appendUser({
             nickname: res.data.nickname,
             uid,
@@ -163,7 +162,7 @@ const usePeerConnection = () => {
             isAlreadyEntered: false,
             volume: 0.5,
           });
-        } else if (newUser) {
+        } else if (existingUser) {
           setNicknameByUid(uid, res.data.nickname);
           setAvatarByUid(uid, res.data.avatar);
           setSidByUid(uid, sid);
@@ -208,7 +207,7 @@ const usePeerConnection = () => {
       newSocket.off(SOCKET_EVENT.ANSWER_MADE);
       newSocket.off(SOCKET_EVENT.ICE_CANDIDATE);
     };
-  }, [userMediaStream, pcs, connectedUsers]);
+  }, [userMediaStream, pcs, connectedUsers, userMic]);
 };
 
 export default usePeerConnection;
diff --git a/src/pages/Ready.tsx b/src/pages/Ready.tsx
@@ -17,10 +17,25 @@ export default function ReadyPage() {
   const videoRef = useRef<HTMLVideoElement>(null);
   const { roomId } = useParams();
   const navigate = useNavigate();
-  const [isPrompt, setIsPrompt] = useState(true);
+  const [isPrompt, setIsPrompt] = useState(false);
   const [isSetting, setIsSetting] = useState(false);
 
   useEffect(() => {
+    // eslint-disable-next-line no-undef
+    const permissionName = 'microphone' as PermissionName;
+    const checkValid = !!navigator.permissions?.query;
+
+    if (checkValid) {
+      navigator.permissions.query({ name: permissionName }).then((result) => {
+        if (result.state === 'granted') {
+          setIsPrompt(false);
+        } else if (result.state === 'prompt') {
+          setIsPrompt(true);
+        } else if (result.state === 'denied') {
+          setIsPrompt(true);
+        }
+      });
+    }
     if (localStorage.getItem('inviteId') === roomId) {
       localStorage.removeItem('inviteId');
     }

diff --git a/src/pages/Room.tsx b/src/pages/Room.tsx
@@ -1,3 +1,4 @@
+import { useEffect } from 'react';
 import styled, { ThemeProvider } from 'styled-components';
 import { Toaster } from 'react-hot-toast';
 import { useParams } from 'react-router-dom';
@@ -17,10 +18,16 @@ import ScreenShareModal from '../components/room/ScreenModal';
 import ProfileModal from '../components/room/profileModal/ProfileModal';
 import InviteModal from '../components/room/InviteModal/InviteModal';
 import CodeModal from '../components/room/codeModal/CodeModal';
+import { deleteSocket } from '../adapters/roomSocket';
 
 export default function Room() {
   const { roomId } = useParams();
   const { isLoading, error, data } = useRoom(roomId);
+  useEffect(() => {
+    return () => {
+      deleteSocket();
+    };
+  }, []);
   const {
     screenModal,
     settingModal,