More ui work done

2 files changed, 47 insertions, 16 deletions

diff --git a/src/client/views/webcam/DashWebRTCVideo.scss b/src/client/views/webcam/DashWebRTCVideo.scss
index 30665e849..ccb0a626b 100644
--- a/src/client/views/webcam/DashWebRTCVideo.scss
+++ b/src/client/views/webcam/DashWebRTCVideo.scss
@@ -8,6 +8,9 @@
     box-shadow: $intermediate-color 0.2vw 0.2vw 0.4vw;
     border: solid #BBBBBBBB 5px;
     pointer-events: all;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
 
     .webcam-header {
         height: 50px;
@@ -18,19 +21,45 @@
         width: 100%;
     }
 
-    #localVideo {
-        margin: 10px;
-        position: relative;
-        width: 300px;
-        max-height: 300px;
+    #roomName {
+        outline: none;
+        border-radius: inherit;
+        border: 1px solid #BBBBBBBB;
     }
 
-    #remoteVideo {
-        margin: 10px;
-        position: relative;
-        width: 300px;
-        max-height: 300px;
+    // #localVideo {
+    //     width: 25%;
+    //     height: 20%;
+    //     position: absolute;
+    //     top: 65%;
+    //     z-index: 2;
+    //     right: 5%;
+    // }
 
+    .side {
+        width: 25%;
+        height: 20%;
+        position: absolute;
+        top: 65%;
+        z-index: 2;
+        right: 5%;
     }
 
+    .main {
+        position: absolute;
+        width: 95%;
+        height: 75%;
+        top: 20%;
+        align-self: center;
+    }
+
+    // #remoteVideo {
+    //     position: absolute;
+    //     width: 95%;
+    //     height: 75%;
+    //     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 0b704db66..290ca7a48 100644
--- a/src/client/views/webcam/DashWebRTCVideo.tsx
+++ b/src/client/views/webcam/DashWebRTCVideo.tsx
@@ -2,7 +2,7 @@ import { observer } from "mobx-react";
 import React = require("react");
 import { CollectionFreeFormDocumentViewProps } from "../nodes/CollectionFreeFormDocumentView";
 import { FieldViewProps, FieldView } from "../nodes/FieldView";
-import { observable } from "mobx";
+import { observable, action } from "mobx";
 import { DocumentDecorations, CloseCall } from "../DocumentDecorations";
 import { InkingControl } from "../InkingControl";
 import "../../views/nodes/WebBox.scss";
@@ -38,6 +38,7 @@ export class DashWebRTCVideo extends React.Component<CollectionFreeFormDocumentV
     private isChannelReady = false;
     private isInitiator = false;
     private isStarted = false;
+    @observable remoteVideoAdded: boolean = false;
     localStream: MediaStream | undefined;
     private pc: any;
     remoteStream: MediaStream | undefined;
@@ -309,11 +310,12 @@ export class DashWebRTCVideo extends React.Component<CollectionFreeFormDocumentV
             xhr.send();
         }
     }
-
+    @action
     private handleRemoteStreamAdded = (event: MediaStreamEvent) => {
         console.log('Remote stream added.');
         this.remoteStream = event.stream!;
         this.peerVideoEl!.srcObject = this.remoteStream;
+        this.remoteVideoAdded = true;
     }
 
     private handleRemoteStreamRemoved = (event: MediaStreamEvent) => {
@@ -398,15 +400,15 @@ 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 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>
 
-            </div>;
+            </div >;
 
         let frozen = !this.props.isSelected() || DocumentDecorations.Instance.Interacting;
         let classname = "webBox-cont" + (this.props.isSelected() && !InkingControl.Instance.selectedTool && !DocumentDecorations.Instance.Interacting ? "-interactive" : "");