2 files changed, 39 insertions, 6 deletions

diff --git a/src/client/views/webcam/DashWebRTCVideo.scss b/src/client/views/webcam/DashWebRTCVideo.scss
new file mode 100644
index 000000000..30665e849
--- /dev/null
+++ b/src/client/views/webcam/DashWebRTCVideo.scss
@@ -0,0 +1,36 @@
+@import "../globalCssVariables";
+
+.webcam-cont {
+    // position: absolute;
+    background: whitesmoke;
+    color: grey;
+    border-radius: 15px;
+    box-shadow: $intermediate-color 0.2vw 0.2vw 0.4vw;
+    border: solid #BBBBBBBB 5px;
+    pointer-events: all;
+
+    .webcam-header {
+        height: 50px;
+        text-align: center;
+        text-transform: uppercase;
+        letter-spacing: 2px;
+        font-size: 16px;
+        width: 100%;
+    }
+
+    #localVideo {
+        margin: 10px;
+        position: relative;
+        width: 300px;
+        max-height: 300px;
+    }
+
+    #remoteVideo {
+        margin: 10px;
+        position: relative;
+        width: 300px;
+        max-height: 300px;
+
+    }
+
+}
\ No newline at end of file
diff --git a/src/client/views/webcam/DashWebRTCVideo.tsx b/src/client/views/webcam/DashWebRTCVideo.tsx
index 4c75b76c9..0b704db66 100644
--- a/src/client/views/webcam/DashWebRTCVideo.tsx
+++ b/src/client/views/webcam/DashWebRTCVideo.tsx
@@ -6,7 +6,7 @@ import { observable } from "mobx";
 import { DocumentDecorations, CloseCall } from "../DocumentDecorations";
 import { InkingControl } from "../InkingControl";
 import "../../views/nodes/WebBox.scss";
-import "./DashWebRTC.scss";
+import "./DashWebRTCVideo.scss";
 import adapter from 'webrtc-adapter';
 import { DocServer } from "../../DocServer";
 import { DocumentView } from "../nodes/DocumentView";
@@ -397,18 +397,15 @@ export class DashWebRTCVideo extends React.Component<CollectionFreeFormDocumentV
     render() {
         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) => {
                     this.localVideoEl = e!;
-                    //this.setLocalVideoObject(e!);
                 }}></video>
                 <video id="remoteVideo" autoPlay playsInline ref={(e) => {
                     this.peerVideoEl = e!;
-                    //this.setRemoteVideoObject(e!);
                 }}></video>
-                {/* <button id="startButton" ref={(e) => this.startButton = e!} onClick={this.startAction}>Start</button>
-                <button id="callButton" ref={(e) => this.callButton = e!} onClick={this.callAction}>Call</button>
-                <button id="hangupButton" ref={(e) => this.hangupButton = e!} onClick={this.hangupAction}>Hang Up</button> */}
+
             </div>;
 
         let frozen = !this.props.isSelected() || DocumentDecorations.Instance.Interacting;