new changes

1 files changed, 42 insertions, 5 deletions

diff --git a/src/client/views/webcam/DashWebRTC.tsx b/src/client/views/webcam/DashWebRTC.tsx
index 451437429..c04a6d739 100644
--- a/src/client/views/webcam/DashWebRTC.tsx
+++ b/src/client/views/webcam/DashWebRTC.tsx
@@ -1,8 +1,12 @@
 import { observer } from "mobx-react";
 import React = require("react");
 import { CollectionFreeFormDocumentViewProps } from "../nodes/CollectionFreeFormDocumentView";
-import { FieldViewProps } from "../nodes/FieldView";
+import { FieldViewProps, FieldView } from "../nodes/FieldView";
 import { observable } from "mobx";
+import { DocumentDecorations } from "../DocumentDecorations";
+import { InkingControl } from "../InkingControl";
+import "../../views/nodes/WebBox.scss";
+
 
 
 const mediaStreamConstaints = {
@@ -11,7 +15,7 @@ const mediaStreamConstaints = {
 
 
 @observer
-export class DashWebRTC extends React.Component<{}> {
+export class DashWebRTC extends React.Component<CollectionFreeFormDocumentViewProps & FieldViewProps> {
 
     @observable private videoEl: HTMLVideoElement | undefined;
     @observable private localStream: MediaStream | undefined;
@@ -33,13 +37,46 @@ export class DashWebRTC extends React.Component<{}> {
     }
 
 
+    public static LayoutString() { return FieldView.LayoutString(DashWebRTC); }
+
+
+    _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();
+        }
+    }
+    onPostWheel = (e: React.WheelEvent) => {
+        if (this._ignore !== e.timeStamp) {
+            e.stopPropagation();
+        }
+    }
+
 
 
     render() {
-        return (
-            <div>
+        let content =
+            <div className="webcam-cont" style={{ width: "100%", height: "100%" }} onWheel={this.onPostWheel} onPointerDown={this.onPostPointer} onPointerMove={this.onPostPointer} onPointerUp={this.onPostPointer}>
                 <video autoPlay playsInline ref={(e) => this.videoEl = 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" : "");
+
+
+        return (
+            <>
+                <div className={classname}  >
+                    {content}
+                </div>
+                {!frozen ? (null) : <div className="webBox-overlay" onWheel={this.onPreWheel} onPointerDown={this.onPrePointer} onPointerMove={this.onPrePointer} onPointerUp={this.onPrePointer} />}
+            </>);
         );
     }