Merge pull request #10 from SWM-FIRE/refactoring

Refactoring

.env

@@ -1,2 +1,3 @@
+SKIP_PREFLIGHT_CHECK=true
 REACT_APP_SERVER=http://172.16.101.93:8282/rooms
-REACT_APP_SOCKET_URL=http://172.16.101.93:8282/rooms
+REACT_APP_SOCKET_URL=http:/localhost:3333/chat

package.json

@@ -6,13 +6,13 @@
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^13.3.0",
     "@testing-library/user-event": "^13.5.0",
+    "@types/socket.io-client": "^3.0.0",
     "@types/uuid": "^8.3.4",
     "history": "5",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "6",
     "react-scripts": "5.0.1",
-    "socket.io": "^4.5.1",
     "socket.io-client": "^4.5.1",
     "styled-components": "^5.3.5",
     "typescript": "^4.7.4",

src/App.tsx

@@ -5,7 +5,7 @@ import Layout from './components/layout/Layout';
 import Login from './pages/Login';
 import Room from './pages/Room';
 
-function Router() {
+function App() {
   return (
     <BrowserRouter>
       <Routes>
@@ -23,4 +23,4 @@ function Router() {
   );
 }
 
-export default Router;
+export default App;

src/components/room/video/LocalVideo.tsx → src/components/rtc/components/LocalVideo.tsx

@@ -1,5 +1,5 @@
 import React, { forwardRef } from 'react';
-import { Video, VideoContainer } from './video';
+import { Video, VideoContainer } from './Video';
 
 export const LocalVideo = forwardRef<
   HTMLVideoElement,

src/components/room/rtc/PeerConnectionSession.ts → src/components/rtc/components/PeerConnectionSession.ts

@@ -1,38 +1,40 @@
 /* eslint-disable lines-between-class-members */
-import { Socket, io } from 'socket.io-client';
+import io from 'socket.io-client';
 
 const { RTCPeerConnection, RTCSessionDescription } = window;
 
 class PeerConnectionSession {
-  mOnConnected: any;
-  mOnDisconnected: any;
-  mRoom: any;
-  peerConnections: { [key: string]: any } = {};
-  senders: any = [];
-  listeners: { [key: string]: any } = {};
-  socket: Socket;
-
-  constructor(socket: Socket) {
+  mOnConnected;
+  mOnDisconnected;
+  mRoom;
+  peerConnections = {};
+  senders = [];
+  listeners = {};
+  socket;
+
+  constructor(socket) {
     this.socket = socket;
     this.onCallMade();
   }
 
-  addPeerConnection(id: any, stream: any, callback: any) {
+  addPeerConnection(id, stream, callback) {
     this.peerConnections[id] = new RTCPeerConnection({
       iceServers: [{ urls: 'stun:stun.l.google.com:19302' }],
     });
-
-    stream.getTracks().forEach((track: any) => {
+    stream.getTracks().forEach((track) => {
       this.senders.push(this.peerConnections[id].addTrack(track, stream));
     });
 
-    this.listeners[id] = (event: any) => {
+    this.listeners[id] = (event) => {
       let fn;
       if (this.peerConnections[id].connectionState === 'connected') {
+        console.log('mOnConnected', this.mOnConnected);
         fn = this.mOnConnected;
       } else if (this.peerConnections[id].connectionState === 'disconnected') {
+        console.log('mOnDisconnected', this.mOnDisconnected);
         fn = this.mOnDisconnected;
       } else {
+        console.log('mRoom', this.mRoom);
         fn = this.mRoom;
       }
       if (fn === null) {
@@ -48,7 +50,7 @@ class PeerConnectionSession {
     this.peerConnections[id].ontrack = function ({
       streams: [stream],
     }: {
-      streams: any;
+      streams;
     }) {
       console.log({ id, stream });
       callback(stream);
@@ -79,15 +81,15 @@ class PeerConnectionSession {
     }
   }
 
-  onConnected(callback: any) {
+  onConnected(callback) {
     this.mOnConnected = callback;
   }
 
-  onDisconnected(callback: any) {
+  onDisconnected(callback) {
     this.mOnDisconnected = callback;
   }
 
-  joinRoom(room: any) {
+  joinRoom(room) {
     this.mRoom = room;
     this.socket.emit('joinRoom', room);
   }
@@ -109,26 +111,26 @@ class PeerConnectionSession {
     });
   }
 
-  onAddUser(callback: any) {
+  onAddUser(callback) {
     this.socket.on(`${this.mRoom}-add-user`, async ({ user }) => {
       callback(user);
     });
   }
 
-  onRemoveUser(callback: any) {
+  onRemoveUser(callback) {
     this.socket.on(`${this.mRoom}-remove-user`, ({ socketId }) => {
       callback(socketId);
     });
   }
 
-  onUpdateUserList(callback: any) {
+  onUpdateUserList(callback) {
     this.socket.on(`${this.mRoom}-update-user-list`, ({ users, current }) => {
       callback(users, current);
     });
   }
 
-  onAnswerMade(callback: any) {
-    this.socket.on('answer-made', async (data: any) => {
+  onAnswerMade(callback) {
+    this.socket.on('answer-made', async (data) => {
       await this.peerConnections[data.socket].setRemoteDescription(
         new RTCSessionDescription(data.answer),
       );
@@ -146,7 +148,7 @@ class PeerConnectionSession {
 }
 
 export const createPeerConnectionContext = () => {
-  const socket = io(process.env.REACT_APP_SOCKET_URL as string);
-
+  const socket = io('http://172.16.101.93:8282/room');
+  console.log(socket);
   return new PeerConnectionSession(socket);
 };

src/components/rtc/components/RemoteVideo.tsx

@@ -0,0 +1,35 @@
+/* eslint-disable react/jsx-props-no-spreading */
+/* eslint-disable react/destructuring-assignment */
+import React, { useEffect, useState } from 'react';
+import { Video, VideoContainer } from './Video';
+
+export function RemoteVideo(props) {
+  type MediaProvider = MediaStream | MediaSource | Blob;
+  const [mediaStream, setMediaStream] = useState<MediaProvider>();
+
+  useEffect(() => {
+    console.log('props', props);
+    const interval = setInterval(() => {
+      const remote = document.getElementById(
+        props.id,
+      ) as HTMLVideoElement | null;
+      const stream = remote?.srcObject;
+
+      if (stream) {
+        setMediaStream(stream);
+        clearInterval(interval);
+        console.log(mediaStream);
+      }
+    }, 100);
+
+    return () => {
+      clearInterval(interval);
+    };
+  }, [props.id]);
+
+  return (
+    <VideoContainer>
+      <Video {...props} />
+    </VideoContainer>
+  );
+}

src/components/room/video/index.ts → src/components/rtc/components/index.ts

@@ -1,4 +1,2 @@
 export * from './LocalVideo';
 export * from './RemoteVideo';
-export * from './video';
-export * from './VideoControls';

src/components/hooks/index.ts → src/components/rtc/hooks/index.ts

@@ -1,3 +1,2 @@
-export * from './useCalculateVideoLayout';
 export * from './useCreateMediaStream';
 export * from './useStartPeerSession';

src/components/hooks/useCreateMediaStream.ts → src/components/rtc/hooks/useCreateMediaStream.ts

@@ -4,11 +4,11 @@ import { RefObject, useEffect, useState } from 'react';
 export const useCreateMediaStream = (
   localVideoRef: RefObject<HTMLVideoElement>,
 ) => {
-  const [userMediaStream, setUserMediaStream] = useState(null);
+  const [userMediaStream, setUserMediaStream] = useState<MediaStream>();
 
   useEffect(() => {
     const createMediaStream = async () => {
-      const stream: any = await navigator.mediaDevices.getUserMedia({
+      const stream: MediaStream = await navigator.mediaDevices.getUserMedia({
         video: {
           width: { min: 640, ideal: 1920 },
           height: { min: 400, ideal: 1080 },