From 0adb1a22e1a92cfe361c4be6682d6e3d86df1e9b Mon Sep 17 00:00:00 2001
From: 071yoon <yeonggilol@gmail.com>
Date: Wed, 27 Jul 2022 11:57:45 +0900
Subject: [PATCH 1/4] FIRE-332 add videoSocket file

---
 src/adapters/video/videoSocket.ts | 11 +++++++++++
 src/pages/Room.tsx                | 10 ++--------
 2 files changed, 13 insertions(+), 8 deletions(-)
 create mode 100644 src/adapters/video/videoSocket.ts

diff --git a/src/adapters/video/videoSocket.ts b/src/adapters/video/videoSocket.ts
new file mode 100644
index 00000000..9d704de4
--- /dev/null
+++ b/src/adapters/video/videoSocket.ts
@@ -0,0 +1,11 @@
+import { io } from 'socket.io-client';
+
+const videoSocket = io(process.env.REACT_APP_SOCKET_VIDEO_URL as string);
+
+function videoSocketInit() {
+  videoSocket.on('connect', () => {
+    console.log('socket server connected.');
+  });
+}
+
+export { videoSocketInit, videoSocket };
diff --git a/src/pages/Room.tsx b/src/pages/Room.tsx
index af9df85f..164ec17f 100644
--- a/src/pages/Room.tsx
+++ b/src/pages/Room.tsx
@@ -1,5 +1,4 @@
 import styled from 'styled-components';
-import io from 'socket.io-client';
 import axios from 'axios';
 import { useEffect, useState, useCallback } from 'react';
 import { useParams } from 'react-router-dom';
@@ -17,9 +16,9 @@ import {
   onChatMessage,
   onLeftRoom,
 } from '../adapters/chat/socketio';
+import { videoSocket, videoSocketInit } from '../adapters/video/videoSocket';
 
 export default function Room() {
-  const videoSocket = io(process.env.REACT_APP_SOCKET_VIDEO_URL as string);
   const [userList, setUserList] = useState({});
   const [messages, setMessages] = useState([]);
   const { isOpen } = controlModal();
@@ -28,12 +27,7 @@ export default function Room() {
   const { connectedUsers, appendUser, removeUser } = connectedUsersStore();
 
   useEffect(() => {
-    videoSocket.on('connect', () => {
-      console.log('video socket connected');
-      const payload = { room: roomId, uid: localStorage.getItem('uid') };
-      console.log('payload', payload);
-      videoSocket.emit('joinRoom', payload);
-    });
+    videoSocketInit();
 
     videoSocket.on(`${roomId}-update-user-list`, ({ users }) => {
       users.map((user) => {

From 64134fd3eeca03d09ea06bd9f03c6904224fc2a8 Mon Sep 17 00:00:00 2001
From: 071yoon <yeonggilol@gmail.com>
Date: Wed, 27 Jul 2022 15:48:10 +0900
Subject: [PATCH 2/4] FIRE-332 add chat at video
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

비디오 화면에서 5초동안 나오는 채팅 완료
---
 src/components/room/LocalScreen.tsx  | 24 +++++++++++++++----
 src/components/room/ScreenShare.tsx  |  4 +++-
 src/components/room/SingleScreen.tsx | 35 ++++++++++++++++------------
 3 files changed, 43 insertions(+), 20 deletions(-)

diff --git a/src/components/room/LocalScreen.tsx b/src/components/room/LocalScreen.tsx
index 33836891..60cbdf0d 100644
--- a/src/components/room/LocalScreen.tsx
+++ b/src/components/room/LocalScreen.tsx
@@ -1,11 +1,12 @@
-import React, { useEffect, useRef } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import styled from 'styled-components';
 import MyAvatar from '../../assets/avatar/MyAvatar';
 import controlModal from '../../stores/controlModal';
 import { useCreateMediaStream } from '../rtc/hooks/useCreateLocalStream';
 
-export default function LocalScreen({ nickname, avatar, uid }) {
+export default function LocalScreen({ nickname, avatar, uid, messages }) {
   const { userMediaStream, createMediaStream } = useCreateMediaStream();
+  const [currentTime, setCurrentTime] = useState<Date>(new Date());
   useEffect(() => {
     createMediaStream();
   }, []);
@@ -24,14 +25,29 @@ export default function LocalScreen({ nickname, avatar, uid }) {
     }
   }, [videoRef, userMediaStream]);
 
+  useEffect(() => {
+    const timer = setInterval(() => {
+      setCurrentTime(new Date());
+    }, 250);
+    return () => clearInterval(timer);
+  }, []);
+
+  const newMessage = messages.filter(
+    (message) =>
+      message.uid === uid &&
+      new Date(message.createdAt).getTime() > currentTime.getTime() - 5000,
+  );
   return (
     <Container onClick={OpenModal}>
       <Video ref={videoRef} autoPlay playsInline muted />
       <ControlBar>
         <ChatContainer>
           <ChatInner>
-            <Chats>Lorem ipsum dolor sit amet,</Chats>
-            <Chats>Vestibulum sit amet tellus suscipit</Chats>
+            {newMessage.map((message) => (
+              <Chats key={message.createdAt}>{message.message}</Chats>
+            ))}
+            {/* <Chats>Lorem ipsum dolor sit amet,</Chats> */}
+            {/* <Chats>Vestibulum sit amet tellus suscipit</Chats> */}
           </ChatInner>
         </ChatContainer>
         <AvatarPosition>
diff --git a/src/components/room/ScreenShare.tsx b/src/components/room/ScreenShare.tsx
index fa03bef4..85e1117a 100644
--- a/src/components/room/ScreenShare.tsx
+++ b/src/components/room/ScreenShare.tsx
@@ -5,7 +5,7 @@ import SingleScreen from './SingleScreen';
 import LocalScreen from './LocalScreen';
 import connectedUsersStore from '../../stores/connectedUsersStore';
 
-export default function ScreenShare() {
+export default function ScreenShare({ messages }) {
   const navigate = useNavigate();
   const { connectedUsers } = connectedUsersStore();
   useEffect(() => {
@@ -22,6 +22,7 @@ export default function ScreenShare() {
           nickname={localStorage.getItem('nickname')}
           avatar={localStorage.getItem('avatar')}
           uid={localStorage.getItem('uid')}
+          messages={messages}
         />
         {connectedUsers.map((user) => (
           <SingleScreen
@@ -29,6 +30,7 @@ export default function ScreenShare() {
             nickname={user.nickname}
             avatar={user.avatar}
             uid={user.uid}
+            messages={messages}
           />
         ))}
       </ScreenWrapper>
diff --git a/src/components/room/SingleScreen.tsx b/src/components/room/SingleScreen.tsx
index 15fb8a0f..36b995cf 100644
--- a/src/components/room/SingleScreen.tsx
+++ b/src/components/room/SingleScreen.tsx
@@ -1,33 +1,38 @@
+import { useState, useEffect } from 'react';
 import styled from 'styled-components';
 import MyAvatar from '../../assets/avatar/MyAvatar';
 import controlModal from '../../stores/controlModal';
 
-export default function SingleScreen({
-  nickname,
-  avatar,
-  uid,
-}: {
-  nickname: string;
-  avatar: string;
-  uid: string;
-}) {
+export default function SingleScreen({ nickname, avatar, uid, messages }) {
   const { toggleModal, setNickname, setAvatar, setUid } = controlModal();
+  const [currentTime, setCurrentTime] = useState<Date>(new Date());
+
   const OpenModal = () => {
     setNickname(nickname);
     setAvatar(avatar);
     setUid(uid);
     toggleModal();
   };
+
+  useEffect(() => {
+    const timer = setInterval(() => {
+      setCurrentTime(new Date());
+    }, 250);
+    return () => clearInterval(timer);
+  }, []);
+  const newMessages = messages.filter(
+    (message) =>
+      message.uid === uid &&
+      new Date(message.createdAt).getTime() > currentTime.getTime() - 5000,
+  );
+
   return (
     <Container onClick={OpenModal}>
       <ChatContainer>
         <ChatInner>
-          <Chats>Lorem ipsum dolor sit amet,</Chats>
-          <Chats>Vestibulum sit amet tellus suscipit</Chats>
-          <Chats>
-            Fusce eget lacus eu magna finibus interdum vel vel felis.
-          </Chats>
-          <Chats>Last Chat</Chats>
+          {newMessages.map((message) => (
+            <Chats key={message.createdAt}>{message.message}</Chats>
+          ))}
         </ChatInner>
       </ChatContainer>
       <AvatarPosition>

From 1a6bb0c94c5fe440325f42da8b3139e899c3842a Mon Sep 17 00:00:00 2001
From: 071yoon <yeonggilol@gmail.com>
Date: Wed, 27 Jul 2022 15:48:35 +0900
Subject: [PATCH 3/4] FIRE-332 add videoSocket
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

videoSocket 부활 했지만, 잘 안씀
---
 src/adapters/video/videoSocket.ts |  3 ++-
 src/pages/Room.tsx                | 15 +++++++++++----
 2 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/src/adapters/video/videoSocket.ts b/src/adapters/video/videoSocket.ts
index 9d704de4..097fcb42 100644
--- a/src/adapters/video/videoSocket.ts
+++ b/src/adapters/video/videoSocket.ts
@@ -2,9 +2,10 @@ import { io } from 'socket.io-client';
 
 const videoSocket = io(process.env.REACT_APP_SOCKET_VIDEO_URL as string);
 
-function videoSocketInit() {
+function videoSocketInit(payload) {
   videoSocket.on('connect', () => {
     console.log('socket server connected.');
+    videoSocket.emit('joinRoom', payload);
   });
 }
 
diff --git a/src/pages/Room.tsx b/src/pages/Room.tsx
index b591c7a2..954ebc2d 100644
--- a/src/pages/Room.tsx
+++ b/src/pages/Room.tsx
@@ -1,6 +1,7 @@
 import styled from 'styled-components';
 import axios from 'axios';
 import { useEffect, useState, useCallback } from 'react';
+import { io } from 'socket.io-client';
 import { useParams } from 'react-router-dom';
 import Header from '../components/room/Header';
 import ScreenShare from '../components/room/ScreenShare';
@@ -17,7 +18,6 @@ import {
   onLeftRoom,
   onDisconnect,
 } from '../adapters/chat/socketio';
-import { videoSocket, videoSocketInit } from '../adapters/video/videoSocket';
 
 export default function Room() {
   const [userList, setUserList] = useState({});
@@ -27,9 +27,16 @@ export default function Room() {
   const { roomId } = useParams();
   const { enablePrevent, disablePrevent } = usePreventLeave();
   const { connectedUsers, appendUser, removeUser } = connectedUsersStore();
+  const myuid = localStorage.getItem('uid');
 
   useEffect(() => {
-    videoSocketInit();
+    const videoSocket = io(process.env.REACT_APP_SOCKET_VIDEO_URL as string);
+
+    videoSocket.on('connect', () => {
+      console.log('socket server connected.');
+      const payload = { room: roomId, uid: myuid };
+      videoSocket.emit('joinRoom', payload);
+    });
 
     videoSocket.on(`${roomId}-update-user-list`, ({ users }) => {
       users.map((user) => {
@@ -71,7 +78,7 @@ export default function Room() {
       removeUser(user.socketId);
     });
     socketInit();
-    emitJoinChatRoom(roomId, uid);
+    emitJoinChatRoom(roomId, myuid);
     onJoinedRoom(receiveJoin);
     onChatMessage(receiveMessage);
     onLeftRoom();
@@ -139,7 +146,7 @@ export default function Room() {
       <Component>
         <Header />
         <Contents>
-          <ScreenShare />
+          <ScreenShare messages={messages} />
           <Sidebar messages={messages} />
         </Contents>
       </Component>

From bd5a5d1c8351c1d87707e4c9e50457e3c4755f32 Mon Sep 17 00:00:00 2001
From: 071yoon <yeonggilol@gmail.com>
Date: Wed, 27 Jul 2022 15:49:27 +0900
Subject: [PATCH 4/4] FIRE-332 correct typo

typo newMessage -> newMessages
---
 src/components/room/LocalScreen.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/room/LocalScreen.tsx b/src/components/room/LocalScreen.tsx
index 60cbdf0d..770c7ee6 100644
--- a/src/components/room/LocalScreen.tsx
+++ b/src/components/room/LocalScreen.tsx
@@ -32,7 +32,7 @@ export default function LocalScreen({ nickname, avatar, uid, messages }) {
     return () => clearInterval(timer);
   }, []);
 
-  const newMessage = messages.filter(
+  const newMessages = messages.filter(
     (message) =>
       message.uid === uid &&
       new Date(message.createdAt).getTime() > currentTime.getTime() - 5000,
@@ -43,7 +43,7 @@ export default function LocalScreen({ nickname, avatar, uid, messages }) {
       <ControlBar>
         <ChatContainer>
           <ChatInner>
-            {newMessage.map((message) => (
+            {newMessages.map((message) => (
               <Chats key={message.createdAt}>{message.message}</Chats>
             ))}
             {/* <Chats>Lorem ipsum dolor sit amet,</Chats> */}