Merge pull request #342 from browngraphicslab/webcam_mohammad

some extra ui and hang-up functionality

1 files changed, 26 insertions, 31 deletions

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" />}
             </>);
     }