Ui Update and stream track stoppage added

4 files changed, 93 insertions, 78 deletions

diff --git a/src/client/views/webcam/DashWebRTCVideo.scss b/src/client/views/webcam/DashWebRTCVideo.scss
index 262528d8e..052832db5 100644
--- a/src/client/views/webcam/DashWebRTCVideo.scss
+++ b/src/client/views/webcam/DashWebRTCVideo.scss
@@ -27,14 +27,14 @@
         border: 1px solid #BBBBBBBB;
     }
 
-    #localVideo {
-        width: 50%;
-        height: 50%;
-        position: relative;
-        // top: 65%;
-        // z-index: 2;
-        // right: 5%;
-    }
+    // #localVideo {
+    //     width: 50%;
+    //     height: 50%;
+    //     position: relative;
+    //     // top: 65%;
+    //     // z-index: 2;
+    //     // right: 5%;
+    // }
 
     .side {
         width: 25%;
@@ -53,12 +53,12 @@
         align-self: center;
     }
 
-    #remoteVideo {
-        position: relative;
-        width: 50%;
-        height: 50%;
-        // top: 20%;
-        // align-self: center;
-    }
+    // #remoteVideo {
+    //     position: relative;
+    //     width: 50%;
+    //     height: 50%;
+    //     // top: 20%;
+    //     // align-self: center;
+    // }
 
 }
\ No newline at end of file
diff --git a/src/client/views/webcam/DashWebRTCVideo.tsx b/src/client/views/webcam/DashWebRTCVideo.tsx
index 191f5750d..f93d4a662 100644
--- a/src/client/views/webcam/DashWebRTCVideo.tsx
+++ b/src/client/views/webcam/DashWebRTCVideo.tsx
@@ -12,7 +12,7 @@ import { DocServer } from "../../DocServer";
 import { DocumentView } from "../nodes/DocumentView";
 import { Utils } from "../../../Utils";
 import { MessageStore } from "../../../server/Message";
-import { initialize } from "./WebCamLogic";
+import { initialize, hangup } from "./WebCamLogic";
 
 const mediaStreamConstraints = {
     video: true,
@@ -29,12 +29,12 @@ const offerOptions = {
 export class DashWebRTCVideo extends React.Component<CollectionFreeFormDocumentViewProps & FieldViewProps> {
     @observable private localVideoEl: HTMLVideoElement | undefined;
     @observable private peerVideoEl: HTMLVideoElement | undefined;
-    // private roomText: HTMLInputElement | undefined;
+    private roomText: HTMLInputElement | undefined;
     // private roomOfCam: string = "";
     // private isChannelReady = false;
     // private isInitiator = false;
     // private isStarted = false;
-    // @observable remoteVideoAdded: boolean = false;
+    @observable remoteVideoAdded: boolean = false;
     // localStream: MediaStream | undefined;
     // private pc: any;
     // remoteStream: MediaStream | undefined;
@@ -56,17 +56,22 @@ export class DashWebRTCVideo extends React.Component<CollectionFreeFormDocumentV
     // };
 
     componentDidMount() {
-        // DocumentDecorations.Instance.addCloseCall(this.closeConnection);
-        setTimeout(() => initialize(), 10000);
+        DocumentDecorations.Instance.addCloseCall(this.closeConnection);
+        // setTimeout(() => initialize(), 10000);
         // let self = this;
         // window.onbeforeunload = function () {
         //     self.sendMessage('bye');
         // };
     }
 
-    // closeConnection: CloseCall = () => {
-    //     this.hangup();
-    // }
+    closeConnection: CloseCall = () => {
+        hangup();
+    }
+
+    @action
+    changeUILook = () => {
+        this.remoteVideoAdded = true;
+    }
 
     // componentWillUnmount() {
     // }
@@ -335,18 +340,17 @@ export class DashWebRTCVideo extends React.Component<CollectionFreeFormDocumentV
 
 
 
-    // /**
-    //   * Function that submits the title entered by user on enter press.
-    //   */
-    // private onEnterKeyDown = (e: React.KeyboardEvent) => {
-    //     if (e.keyCode === 13) {
-    //         let submittedTitle = this.roomText!.value;
-    //         this.roomText!.value = "";
-    //         this.roomText!.blur();
-    //         this.roomOfCam = submittedTitle;
-    //         this.init(submittedTitle);
-    //     }
-    // }
+    /**
+      * Function that submits the title entered by user on enter press.
+      */
+    private onEnterKeyDown = (e: React.KeyboardEvent) => {
+        if (e.keyCode === 13) {
+            let submittedTitle = this.roomText!.value;
+            this.roomText!.value = "";
+            this.roomText!.blur();
+            initialize(submittedTitle, this.changeUILook);
+        }
+    }
 
 
     public static LayoutString(fieldKey: string) { return FieldView.LayoutString(DashWebRTCVideo, fieldKey); }
@@ -373,11 +377,11 @@ export class DashWebRTCVideo extends React.Component<CollectionFreeFormDocumentV
         let content =
             <div className="webcam-cont" style={{ width: "100%", height: "100%" }} onWheel={this.onPostWheel} onPointerDown={this.onPostPointer} onPointerMove={this.onPostPointer} onPointerUp={this.onPostPointer}>
                 <div className="webcam-header">DashWebRTC</div>
-                {/* <input id="roomName" type="text" placeholder="Enter room name" ref={(e) => this.roomText = e!} onKeyDown={this.onEnterKeyDown} /> */}
-                <video id="localVideo" autoPlay playsInline ref={(e) => {
+                <input id="roomName" type="text" placeholder="Enter room name" ref={(e) => this.roomText = e!} onKeyDown={this.onEnterKeyDown} />
+                <video id="localVideo" className={"RTCVideo" + (this.remoteVideoAdded ? " side" : " main")} autoPlay playsInline ref={(e) => {
                     this.localVideoEl = e!;
                 }}></video>
-                <video id="remoteVideo" autoPlay playsInline ref={(e) => {
+                <video id="remoteVideo" className="RTCVideo main" autoPlay playsInline ref={(e) => {
                     this.peerVideoEl = e!;
                 }}></video>
 
diff --git a/src/client/views/webcam/WebCamLogic.js b/src/client/views/webcam/WebCamLogic.js
index d4798f72f..ffdcc4241 100644
--- a/src/client/views/webcam/WebCamLogic.js
+++ b/src/client/views/webcam/WebCamLogic.js
@@ -1,15 +1,17 @@
 'use strict';
 import io from "socket.io-client";
 
-export function initialize() {
-
-    var isChannelReady = false;
-    var isInitiator = false;
-    var isStarted = false;
-    var localStream;
-    var pc;
-    var remoteStream;
-    var turnReady;
+var socket;
+var isChannelReady = false;
+var isInitiator = false;
+var isStarted = false;
+var localStream;
+var pc;
+var remoteStream;
+var turnReady;
+var room;
+
+export function initialize(roomName, handlerUI) {
 
     var pcConfig = {
         'iceServers': [{
@@ -25,11 +27,11 @@ export function initialize() {
 
     /////////////////////////////////////////////
 
-    var room = 'foo';
+    room = roomName;
     // Could prompt for room name:
     // room = prompt('Enter room name:');
 
-    var socket = io.connect(`${window.location.protocol}//${window.location.hostname}:${4321}`);
+    socket = io.connect(`${window.location.protocol}//${window.location.hostname}:${4321}`);
 
     if (room !== '') {
         socket.emit('create or join', room);
@@ -62,10 +64,6 @@ export function initialize() {
 
     ////////////////////////////////////////////////
 
-    const sendMessage = (message) => {
-        console.log('Client sending message: ', message);
-        socket.emit('message', message);
-    };
 
     // This client receives a message
     socket.on('message', function (message) {
@@ -96,6 +94,7 @@ export function initialize() {
     var localVideo = document.querySelector('#localVideo');
     var remoteVideo = document.querySelector('#remoteVideo');
 
+
     console.log("Local Video: ", localVideo);
     console.log("Remote Video: ", remoteVideo);
 
@@ -241,28 +240,40 @@ export function initialize() {
         console.log('Remote stream added.');
         remoteStream = event.stream;
         remoteVideo.srcObject = remoteStream;
+        handlerUI();
+
     };
 
     const handleRemoteStreamRemoved = (event) => {
         console.log('Remote stream removed. Event: ', event);
     }
-
-    const hangup = () => {
-        console.log('Hanging up.');
-        stop();
-        sendMessage('bye');
-    }
-
-    const handleRemoteHangup = () => {
-        console.log('Session terminated.');
-        stop();
-        isInitiator = false;
+}
+
+export function hangup() {
+    console.log('Hanging up.');
+    stop();
+    sendMessage('bye');
+    if (localStream) {
+        localStream.getTracks().forEach(track => track.stop());
     }
-
-    const stop = () => {
-        isStarted = false;
-        pc.close();
-        pc = null;
+}
+
+function stop() {
+    isStarted = false;
+    pc.close();
+    pc = null;
+}
+
+function handleRemoteHangup() {
+    console.log('Session terminated.');
+    stop();
+    isInitiator = false;
+    if (localStream) {
+        localStream.getTracks().forEach(track => track.stop());
     }
+}
 
-}
\ No newline at end of file
+function sendMessage(message) {
+    console.log('Client sending message: ', message);
+    socket.emit('message', message);
+};
\ No newline at end of file
diff --git a/src/server/Websocket/Websocket.ts b/src/server/Websocket/Websocket.ts
index 96694bf72..30e7d6129 100644
--- a/src/server/Websocket/Websocket.ts
+++ b/src/server/Websocket/Websocket.ts
@@ -47,25 +47,25 @@ export namespace WebSocket {
             }
 
             socket.on('message', function (message) {
-                log('Client said: ', message);
+                console.log('Client said: ', message);
                 // for a real app, would be room-only (not broadcast)
                 socket.broadcast.emit('message', message);
             });
 
             socket.on('create or join', function (room) {
-                log('Received request to create or join room ' + room);
+                console.log('Received request to create or join room ' + room);
 
                 var clientsInRoom = socket.adapter.rooms[room];
                 var numClients = clientsInRoom ? Object.keys(clientsInRoom.sockets).length : 0;
-                log('Room ' + room + ' now has ' + numClients + ' client(s)');
+                console.log('Room ' + room + ' now has ' + numClients + ' client(s)');
 
                 if (numClients === 0) {
                     socket.join(room);
-                    log('Client ID ' + socket.id + ' created room ' + room);
+                    console.log('Client ID ' + socket.id + ' created room ' + room);
                     socket.emit('created', room, socket.id);
 
                 } else if (numClients === 1) {
-                    log('Client ID ' + socket.id + ' joined room ' + room);
+                    console.log('Client ID ' + socket.id + ' joined room ' + room);
                     socket.in(room).emit('join', room);
                     socket.join(room);
                     socket.emit('joined', room, socket.id);
@@ -107,9 +107,9 @@ export namespace WebSocket {
             Utils.AddServerHandler(socket, MessageStore.DeleteFields, ids => DeleteFields(socket, ids));
             Utils.AddServerHandlerCallback(socket, MessageStore.GetRefField, GetRefField);
             Utils.AddServerHandlerCallback(socket, MessageStore.GetRefFields, GetRefFields);
-            Utils.AddServerHandler(socket, MessageStore.NotifyRoommates, message => HandleRoommateNotification(socket, message));
-            Utils.AddServerHandler(socket, MessageStore.HangUpCall, message => HandleHangUp(socket, message));
-            Utils.AddRoomHandler(socket, "create or join", HandleCreateOrJoin);
+            //Utils.AddServerHandler(socket, MessageStore.NotifyRoommates, message => HandleRoommateNotification(socket, message));
+            //Utils.AddServerHandler(socket, MessageStore.HangUpCall, message => HandleHangUp(socket, message));
+            //Utils.AddRoomHandler(socket, "create or join", HandleCreateOrJoin);
 
             disconnect = () => {
                 socket.broadcast.emit("connection_terminated", Date.now());