Merge branch 'master' of https://github.com/browngraphicslab/Dash-Web

3 files changed, 82 insertions, 38 deletions

diff --git a/src/client/views/webcam/DashWebRTCVideo.scss b/src/client/views/webcam/DashWebRTCVideo.scss
index 2f35eeca2..41307a808 100644
--- a/src/client/views/webcam/DashWebRTCVideo.scss
+++ b/src/client/views/webcam/DashWebRTCVideo.scss
@@ -4,7 +4,7 @@
     background: whitesmoke;
     color: grey;
     border-radius: 15px;
-    box-shadow: $intermediate-color 0.2vw 0.2vw 0.4vw;
+    box-shadow: #9c9396 0.2vw 0.2vw 0.4vw;
     border: solid #BBBBBBBB 5px;
     pointer-events: all;
     display: flex;
@@ -18,29 +18,66 @@
         letter-spacing: 2px;
         font-size: 16px;
         width: 100%;
+        margin-top: 20px;
+    }
+
+    .videoContainer {
+        position: relative;
+        width: calc(100% - 20px);
+        height: 100%;
+        /* border: 10px solid red; */
+        margin-left: 10px;
+    }
+
+    .buttonContainer {
+        display: flex;
+        width: calc(100% - 20px);
+        height: 50px;
+        justify-content: center;
+        text-align: center;
+        /* border: 1px solid black; */
+        margin-left: 10px;
+        margin-top: 0;
+        margin-bottom: 15px;
     }
 
     #roomName {
         outline: none;
         border-radius: inherit;
         border: 1px solid #BBBBBBBB;
+        margin: 10px;
+        padding: 10px;
     }
 
     .side {
         width: 25%;
         height: 20%;
         position: absolute;
-        top: 65%;
+        /* top: 65%; */
         z-index: 2;
-        right: 5%;
+        right: 0px;
+        bottom: 18px;
     }
 
     .main {
         position: absolute;
-        width: 95%;
-        height: 75%;
-        top: 20%;
+        width: 100%;
+        height: 100%;
+        /* top: 20%; */
+        align-self: center;
+    }
+
+    .videoButtons {
+        border-radius: 50%;
+        height: 30px;
+        width: 30px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        justify-self: center;
         align-self: center;
+        margin: 5px;
+        border: 1px solid black;
     }
 
 }
\ No newline at end of file
diff --git a/src/client/views/webcam/DashWebRTCVideo.tsx b/src/client/views/webcam/DashWebRTCVideo.tsx
index cbf75f708..9c339e986 100644
--- a/src/client/views/webcam/DashWebRTCVideo.tsx
+++ b/src/client/views/webcam/DashWebRTCVideo.tsx
@@ -8,7 +8,14 @@ import { InkingControl } from "../InkingControl";
 import "../../views/nodes/WebBox.scss";
 import "./DashWebRTCVideo.scss";
 import adapter from 'webrtc-adapter';
-import { initialize, hangup } from "./WebCamLogic";
+import { initialize, hangup, refreshVideos } from "./WebCamLogic";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { IconProp, library } from '@fortawesome/fontawesome-svg-core';
+import { faSync, faPhoneSlash } from "@fortawesome/free-solid-svg-icons";
+
+library.add(faSync);
+library.add(faPhoneSlash);
+
 
 /**
  * This models the component that will be rendered, that can be used as a doc that will reflect the video cams.
@@ -19,14 +26,6 @@ export class DashWebRTCVideo extends React.Component<CollectionFreeFormDocumentV
     private roomText: HTMLInputElement | undefined;
     @observable remoteVideoAdded: boolean = false;
 
-    componentDidMount() {
-        DocumentDecorations.Instance.addCloseCall(this.closeConnection);
-    }
-
-    closeConnection: CloseCall = () => {
-        hangup();
-    }
-
     @action
     changeUILook = () => {
         this.remoteVideoAdded = true;
@@ -47,34 +46,30 @@ export class DashWebRTCVideo extends React.Component<CollectionFreeFormDocumentV
 
     public static LayoutString(fieldKey: string) { return FieldView.LayoutString(DashWebRTCVideo, fieldKey); }
 
-    _ignore = 0;
-    onPreWheel = (e: React.WheelEvent) => {
-        this._ignore = e.timeStamp;
-    }
-    onPrePointer = (e: React.PointerEvent) => {
-        this._ignore = e.timeStamp;
-    }
-    onPostPointer = (e: React.PointerEvent) => {
-        if (this._ignore !== e.timeStamp) {
-            e.stopPropagation();
-        }
+    @action
+    onClickRefresh = () => {
+        refreshVideos();
     }
-    onPostWheel = (e: React.WheelEvent) => {
-        if (this._ignore !== e.timeStamp) {
-            e.stopPropagation();
-        }
+
+    onClickHangUp = () => {
+        hangup();
     }
 
     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-cont" style={{ width: "100%", height: "100%" }}>
                 <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" className={"RTCVideo" + (this.remoteVideoAdded ? " side" : " main")} autoPlay playsInline muted ref={(e) => {
-                }}></video>
-                <video id="remoteVideo" className="RTCVideo main" autoPlay playsInline ref={(e) => {
-                }}></video>
-
+                <div className="videoContainer">
+                    <video id="localVideo" className={"RTCVideo" + (this.remoteVideoAdded ? " side" : " main")} autoPlay playsInline muted ref={(e) => {
+                    }}></video>
+                    <video id="remoteVideo" className="RTCVideo main" autoPlay playsInline ref={(e) => {
+                    }}></video>
+                </div>
+                <div className="buttonContainer">
+                    <div className="videoButtons" style={{ background: "red" }} onClick={this.onClickHangUp}><FontAwesomeIcon icon={faPhoneSlash} color="white" /></div>
+                    <div className="videoButtons" style={{ background: "green" }} onClick={this.onClickRefresh}><FontAwesomeIcon icon={faSync} color="white" /></div>
+                </div>
             </div >;
 
         let frozen = !this.props.isSelected() || DocumentDecorations.Instance.Interacting;
@@ -86,7 +81,7 @@ export class DashWebRTCVideo extends React.Component<CollectionFreeFormDocumentV
                 <div className={classname}  >
                     {content}
                 </div>
-                {!frozen ? (null) : <div className="webBox-overlay" onWheel={this.onPreWheel} onPointerDown={this.onPrePointer} onPointerMove={this.onPrePointer} onPointerUp={this.onPrePointer} />}
+                {!frozen ? (null) : <div className="webBox-overlay" />}
             </>);
     }
 
diff --git a/src/client/views/webcam/WebCamLogic.js b/src/client/views/webcam/WebCamLogic.js
index 3dfb82465..f542fb983 100644
--- a/src/client/views/webcam/WebCamLogic.js
+++ b/src/client/views/webcam/WebCamLogic.js
@@ -277,4 +277,16 @@ function handleRemoteHangup() {
 function sendMessage(message) {
     console.log('Client sending message: ', message);
     socket.emit('message', message, room);
-};
\ No newline at end of file
+};
+
+export function refreshVideos() {
+    var localVideo = document.querySelector('#localVideo');
+    var remoteVideo = document.querySelector('#remoteVideo');
+    if (localVideo) {
+        localVideo.srcObject = localStream;
+    }
+    if (remoteVideo) {
+        remoteVideo.srcObject = remoteStream;
+    }
+
+}
\ No newline at end of file