Camera video stream changes

package.json

@@ -1,6 +1,6 @@
 {
   "name": "lexogrine_hud",
-  "version": "2.3.0",
+  "version": "2.4.0",
   "homepage": "./",
   "private": true,
   "dependencies": {
@@ -10,7 +10,7 @@
     "@types/react": "16.9.9",
     "@types/react-dom": "16.9.2",
     "@types/simple-peer": "^9.11.3",
-    "csgogsi-socket": "^2.3.6",
+    "csgogsi-socket": "^2.4.0",
     "query-string": "^6.12.1",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",

public/hud.json

@@ -1,6 +1,6 @@
 {
     "name":"Lexogrine HUD",
-    "version":"2.0.1",
+    "version":"2.4.0",
     "author":"Lexogrine",
     "legacy": false,
     "radar": true,

src/App.tsx

@@ -6,6 +6,7 @@ import ActionManager, { ConfigManager } from './api/actionManager';
 
 import { CSGO, PlayerExtension, GSISocket } from "csgogsi-socket";
 import { Match } from './api/interfaces';
+import { initiateConnection } from './HUD/Camera/mediaStream';
 
 export const { GSI, socket } = GSISocket(isDev ? `localhost:${port}` : '/', "update");
 
@@ -95,6 +96,7 @@ class App extends React.Component<any, { match: Match | null, game: CSGO | null,
 
 		socket.on("readyToRegister", () => {
 			socket.emit("register", name, isDev);
+			initiateConnection();
 		});
 		socket.on(`hud_config`, (data: any) => {
 			configs.save(data);

src/HUD/Camera/Camera.tsx

@@ -0,0 +1,78 @@
+import React, { useEffect, useState } from "react";
+import { mediaStreams } from "./mediaStream";
+import { v4 as uuidv4 } from 'uuid';
+type Props = {
+    steamid: string,
+    visible: boolean;
+}
+
+const CameraView = ({ steamid, visible }: Props) => {
+    const [uuid] = useState(uuidv4());
+    const [ forceHide, setForceHide ] = useState(false);
+
+    useEffect(() => {
+
+    }, [])
+
+    useEffect(() => {
+        const mountStream = (stream: MediaStream) => {
+            console.log("mounting video");
+            const remoteVideo = document.getElementById(`remote-video-${steamid}-${uuid}`) as HTMLVideoElement;
+            if(!remoteVideo || !stream){
+                console.log("no video element")
+            }
+            if (!remoteVideo || !stream) return;
+
+            remoteVideo.srcObject = stream;
+
+            remoteVideo.play();
+        }
+
+        const mountExistingStream = () => {
+            const currentStream = mediaStreams.players.find(player => player.steamid === steamid);
+            if(!currentStream || !currentStream.peerConnection || !currentStream.peerConnection._remoteStreams) return;
+
+            const stream = currentStream.peerConnection._remoteStreams[0];
+
+            if(!stream) return;
+
+            mountStream(stream);
+        }
+
+        const onStreamCreate = (stream: MediaStream) => {
+            mountStream(stream);
+        }
+
+
+
+        const onStreamDestroy = () => {
+            const remoteVideo = document.getElementById(`remote-video-${steamid}-${uuid}`) as HTMLVideoElement;
+
+            if (!remoteVideo) return;
+
+            remoteVideo.srcObject = null;
+        }
+
+        const onBlockedUpdate = (steamids: string[]) => {
+            setForceHide(steamids.includes(steamid));
+        }
+
+        mediaStreams.onStreamCreate(onStreamCreate, steamid);
+        mediaStreams.onStreamDestroy(onStreamDestroy, steamid);
+        mediaStreams.onBlockedUpdate(onBlockedUpdate);
+
+        mountExistingStream();
+
+        return () => {
+            mediaStreams.removeListener(onStreamCreate);
+            mediaStreams.removeListener(onStreamDestroy);
+            mediaStreams.removeListener(onBlockedUpdate);
+        }
+    }, [steamid]);
+
+    return <React.Fragment>
+        <video className="video-call-preview" autoPlay muted id={`remote-video-${steamid}-${uuid}`} style={{ opacity: visible && !forceHide ? 1 : 0.001 }}></video>
+    </React.Fragment>
+}
+
+export default CameraView;

src/HUD/Camera/Container.tsx

@@ -1,36 +1,22 @@
 import React, { useEffect, useState } from "react";
-import PlayerCamera from ".";
+import PlayerCamera from "./Camera";
 import api from "../../api/api";
-import { socket } from "../../App";
 import "./index.scss";
 
 
 
 const CameraContainer = ({ observedSteamid }: { observedSteamid: string | null }) => {
-    const [sock, setSocket] = useState<SocketIOClient.Socket | null>(null);
-    const [room, setRoom] = useState('');
     const [ players, setPlayers ] = useState<string[]>([]);
 
     useEffect(() => {
-        const sock = socket as SocketIOClient.Socket;
         api.camera.get().then(response => {
-            setTimeout(() => {
-                sock.emit("registerAsHUD", response.uuid);
-            }, 1000);
             setPlayers(response.availablePlayers.map(player => player.steamid));
-            setRoom(response.uuid);
         });
-
-        setSocket(sock);
     }, []);
 
-    if (!sock || !room || !players.length) {
-        return null;
-    }
-
     return <div id="cameras-container">
         {
-            players.map(steamid => (<PlayerCamera key={steamid} roomId={room} steamid={steamid} socket={sock} visible={observedSteamid === steamid} />))
+            players.map(steamid => (<PlayerCamera key={steamid} steamid={steamid} visible={observedSteamid === steamid} />))
         }
     </div>
 }