From a14e2da6130ac3c0c55b03cbc8a5fa3723be45bc Mon Sep 17 00:00:00 2001
From: Geireann <60007097+geireann@users.noreply.github.com>
Date: Tue, 6 Apr 2021 20:31:25 -0400
Subject: updates

---
 src/client/util/CaptureManager.tsx | 75 ++++++++++++++++++++++++++++++++++++++
 1 file changed, 75 insertions(+)
 create mode 100644 src/client/util/CaptureManager.tsx

(limited to 'src/client/util/CaptureManager.tsx')

diff --git a/src/client/util/CaptureManager.tsx b/src/client/util/CaptureManager.tsx
new file mode 100644
index 000000000..f01fcd0d2
--- /dev/null
+++ b/src/client/util/CaptureManager.tsx
@@ -0,0 +1,75 @@
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { action, computed, observable, runInAction } from "mobx";
+import { observer } from "mobx-react";
+import * as React from "react";
+import { ColorState, SketchPicker } from "react-color";
+import { Doc } from "../../fields/Doc";
+import { BoolCast, StrCast, Cast } from "../../fields/Types";
+import { addStyleSheet, addStyleSheetRule, Utils } from "../../Utils";
+import { GoogleAuthenticationManager } from "../apis/GoogleAuthenticationManager";
+import { DocServer } from "../DocServer";
+import { Networking } from "../Network";
+import { MainViewModal } from "../views/MainViewModal";
+import { CurrentUserUtils } from "./CurrentUserUtils";
+import { GroupManager } from "./GroupManager";
+import "./CaptureManager.scss";
+import { undoBatch } from "./UndoManager";
+const higflyout = require("@hig/flyout");
+export const { anchorPoints } = higflyout;
+export const Flyout = higflyout.default;
+
+@observer
+export class CaptureManager extends React.Component<{}> {
+    public static Instance: CaptureManager;
+    static _settingsStyle = addStyleSheet();
+    @observable isOpen: boolean = false; // whether the CaptureManager is to be displayed or not.
+
+
+    constructor(props: {}) {
+        super(props);
+        CaptureManager.Instance = this;
+    }
+
+    public close = action(() => this.isOpen = false);
+    public open = action(() => this.isOpen = true);
+
+
+    @computed get colorsContent() {
+
+        return <div className="colors-content">
+
+        </div>;
+    }
+
+    @computed get formatsContent() {
+        return <div className="prefs-content">
+
+        </div>;
+    }
+
+
+
+
+
+    private get captureInterface() {
+        return <div className="settings-interface">
+            <div className="settings-panel">
+
+            </div>
+
+            <div className="close-button" onClick={this.close}>
+                <FontAwesomeIcon icon={"times"} color="black" size={"lg"} />
+            </div>
+        </div>;
+
+    }
+
+    render() {
+        return <MainViewModal
+            contents={this.captureInterface}
+            isDisplayed={this.isOpen}
+            interactive={true}
+            closeOnExternalClick={this.close}
+            dialogueBoxStyle={{ width: "500px", height: "300px", background: Cast(Doc.SharingDoc().userColor, "string", null) }} />;
+    }
+}
\ No newline at end of file
-- 
cgit v1.2.3-70-g09d2


From 6a73699a10edb842b2b5eba4ef05731772859f13 Mon Sep 17 00:00:00 2001
From: Geireann <60007097+geireann@users.noreply.github.com>
Date: Wed, 7 Apr 2021 14:45:14 -0400
Subject: bug fixes

---
 src/client/util/CaptureManager.scss                | 450 ++-------------------
 src/client/util/CaptureManager.tsx                 |  47 ++-
 src/client/views/LightboxView.tsx                  |   7 +-
 src/client/views/MainViewModal.tsx                 |   2 +-
 src/client/views/collections/CollectionMenu.tsx    |   2 +-
 src/client/views/nodes/ScreenshotBox.tsx           | 150 +++----
 .../views/presentationview/PresElementBox.tsx      |   2 +
 7 files changed, 160 insertions(+), 500 deletions(-)

(limited to 'src/client/util/CaptureManager.tsx')

diff --git a/src/client/util/CaptureManager.scss b/src/client/util/CaptureManager.scss
index 5ca54517c..8447bd2d5 100644
--- a/src/client/util/CaptureManager.scss
+++ b/src/client/util/CaptureManager.scss
@@ -1,8 +1,7 @@
 @import "../views/globalCssVariables";
 
-.settings-interface {
+.capture-interface {
     //background-color: whitesmoke !important;
-    color: grey;
     width: 450px;
 
     button {
@@ -21,14 +20,35 @@
     }
 }
 
-.settings-title {
-    font-size: 25px;
-    font-weight: bold;
-    padding-right: 10px;
+.capture-t1 {
+    display: flex;
+    justify-content: left;
+    align-items: center;
+    font-size: 20px;
+    font-family: 'Roboto';
+    font-weight: 600;
     color: black;
+
+    .recordButtonOutline {
+        border-radius: 100%;
+        width: 25px;
+        height: 25px;
+        margin-right: 10px;
+        border: solid 1px #a94442;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+    
+    .recordButtonInner {
+        border-radius: 100%;
+        width: 70%;
+        height: 70%;
+        background: #a94442;
+    }
 }
 
-.settings-username {
+.capture-t2 {
     font-size: 12px;
     padding-right: 15px;
     color: black;
@@ -39,13 +59,13 @@
     // left: 243;
 }
 
-.settings-section {
+.capture-block {
     display: flex;
     border-bottom: 1px solid grey;
     padding-bottom: 8px;
     padding-top: 6px;
 
-    .settings-section-title {
+    .capture-block-title {
         font-size: 16;
         font-weight: bold;
         text-align: left;
@@ -59,407 +79,21 @@
     }
 }
 
-
-.password-content {
-    display: flex;
-    flex-direction: column;
-
-    .password-content-inputs {
-        width: 100;
-        // margin-bottom: 10px;
-        font-size: 10px;
-
-        .password-inputs {
-            border: 1px solid rgb(160, 160, 160);
-            margin-bottom: 8px;
-            width: 130;
-            color: black;
-            border-radius: 5px;
-            padding:7px;
-            
-        }
-    }
-
-    .password-content-buttons {
-        //margin-left: 84px;
-        //width: 100;
-        padding: 7px;
-
-        .password-submit {
-            //margin-left: 85px;
-            margin-top: 5px;
-        }
-
-        .password-forgot {
-            //margin-left: 65px;
-            //margin-top: -20px;
-            font-size: 12px;
-            white-space: nowrap;
-        }
-    }
-}
-
-.accounts-content {
+.close-button {
+    position: absolute;
+    top: 10;
+    right: 10;
+    background:transparent;
+    border-radius:100%;
+    width: 25px;
+    height: 25px;
     display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: 0.2s;
 }
 
-.modes-content {
-    display: flex;
-    margin-left: 10px;
-    font-size: 12px;
-
-    .modes-select {
-        // width: 170px;
-        width: 80%;
-        height: 35px;
-        margin-right: 10px;
-        color: black;
-        border-radius: 5px;
-
-        &:hover {
-            cursor: pointer;
-        }
-    }
-
-    .modes-playground,
-    .default-acl {
-        display: flex;
-        margin-left: 10px;
-        margin-top: 10px;
-        font-size: 10px;
-
-        .playground-check,
-        .acl-check {
-            margin-right: 5px;
-
-            &:hover {
-                cursor: pointer;
-            }
-        }
-
-        .playground-text {
-            color: black;
-            margin-right: 10px;
-            margin-top: 2;
-        }
-
-        .acl-text {
-            color: black;
-            margin-top: 2;
-            text-align: left;
-        }
-
-    }
-}
-
-.colorFlyout {
-    margin-top: 2px;
-    //margin-right: 18px;
-
-    &:hover {
-        cursor: pointer;
-    }
-
-    .colorFlyout-button {
-        width: 20px;
-        height: 20px;
-        border: 0.5px solid black;
-        border-radius: 5px;
-        padding-top: 3px;
-    }
-}
-
-.prefs-content{
-    text-align: left;
-}
-
-.appearances-content {
-    display: flex;
-    margin-top: 4px;
-    color: black;
-    font-size: 10px;
-
-    .preferences-color {
-        display: flex;
-        margin-top: 2px;
-
-        .preferences-color-text {
-            margin-top: 3px;
-            margin-right: 4;
-            flex: 1 1 auto;
-            text-align: left;
-        }
-
-        .colorFlyout {
-            align-self: flex-end;
-        }
-    }
-
-    .preferences-font {
-        //height: 23px;
-        margin-top: 2px;
-
-        .preferences-font-text {
-            color: black;
-            margin-top: 4;
-            margin-right: 4;
-            margin-bottom: 2px;
-            text-align: left;
-        }
-
-        .preferences-font-controls {
-            display: flex;
-            justify-content: space-between;
-        }
-
-        .font-select {
-            height: 35px;
-            color: black;
-            font-size: 9;
-            margin-right: 6;
-            border-radius: 5px;
-            width: 65%;
-
-            &:hover {
-                cursor: pointer;
-            }
-        }
-
-        .size-select {
-            height: 35px;
-            color: black;
-            font-size: 9;
-            border-radius: 5px;
-            width: 30%;
-
-            &:hover {
-                cursor: pointer;
-            }
-        }
-    }
-
-    .preferences-check {
-        color: black;
-        margin-right: 4;
-        margin-bottom: -3;
-        margin-left: 5;
-        margin-top: -1px;
-        display: inline-block;
-        padding-left: 5px;
-        text-align: left;
-    }
+.close-button:hover {
+    background: rgba(0,0,0,0.1);
 }
 
-.settings-interface {
-    display: flex;
-    flex-direction: column;
-
-    button {
-        width: auto;
-        align-self: center;
-        background: #252b33;
-        margin-right: 15px;
-
-        //margin-top: 4px;
-
-        &:hover {
-            background: $main-accent;
-        }
-    }
-
-    // .delete-button {
-    //     background: rgb(227, 86, 86);
-    // }
-
-    .close-button {
-        position: absolute;
-        right: 1em;
-        top: 1em;
-        cursor: pointer;
-    }
-
-    // .logout-button {
-    //     right: 355;
-    //     position: absolute;
-    // }
-
-    .settings-content {
-        background: #e4e4e4;
-        //border-radius: 6px;
-        padding: 10px;
-        //width: 560px;
-        flex: 1 1 auto;
-    }
-
-    .settings-top {
-        display: flex;
-        margin-bottom: 10px;
-    }
-
-
-    .error-text {
-        color: #C40233;
-        width: 300;
-        margin-left: -20;
-        font-size: 10;
-        margin-bottom: 4;
-        margin-top: -3;
-    }
-
-    .success-text {
-        width: 300;
-        margin-left: -20;
-        font-size: 10;
-        margin-bottom: 4;
-        margin-top: -3;
-        color: #009F6B;
-    }
-
-    .focus-span {
-        text-decoration: underline;
-    }
-
-    h1 {
-        color: #121721;
-        text-transform: uppercase;
-        letter-spacing: 2px;
-        font-size: 19;
-        margin-top: 0;
-        font-weight: bold;
-    }
-
-    .container {
-        display: block;
-        position: relative;
-        margin-top: 10px;
-        margin-bottom: 10px;
-        font-size: 22px;
-        -webkit-user-select: none;
-        -moz-user-select: none;
-        -ms-user-select: none;
-        user-select: none;
-        width: 700px;
-        min-width: 700px;
-        max-width: 700px;
-        text-align: left;
-        font-style: normal;
-        font-size: 15;
-        font-weight: normal;
-        padding: 0;
-
-        .padding {
-            padding: 0 0 0 20px;
-            color: black;
-        }
-
-    }
-}
-
-.settings-interface {
-    flex-direction: row;
-    position: relative;
-    min-height: 250px;
-    width: 100%;
-
-    .settings-content {
-        background-color: #fdfdfd;
-    }
-}
-
-.settings-panel {
-    position: relative;
-    min-width: 150px;
-    background-color: #e4e4e4;
-
-    .settings-user {
-        position: absolute;
-        bottom: 10px;
-        text-align: center;
-        left: 0;
-        right: 0;
-
-        .settings-username {
-            padding-right: 0px;
-        }
-
-        .logout-button {
-            margin-right: 2px;
-        }
-    }
-}
-
-.settings-tabs {
-    // font-size: 16px;
-    font-weight: 600;
-    color: black;
-
-    .tab-control {
-        padding: 10px;
-        border-bottom: 1px solid #9f9e9e;
-        cursor: pointer;
-
-        &.active {
-            background-color: #fdfdfd;
-        }
-    }
-}
-
-.settings-section-context {
-    width: 100%;
-}
-
-.tab-section {
-    display: none;
-    height: 200px;
-
-    &.active {
-        display: block;
-    }
-}
-
-.tab-content {
-    display: flex;
-    margin: 20px 0;
-
-    .tab-column {
-        flex: 0 0 50%;
-
-        .tab-column-title {
-            color: black;
-            font-size: 16px;
-            font-weight: bold;
-            margin-bottom: 16px;
-       }
-
-       .tab-column-title, .tab-column-content {
-           padding-left: 16px;
-       }
-
-    }
-
-}
-
-.tab-column button {
-    font-size: 9px;
-}
-
-@media only screen and (max-device-width: 480px) {
-    .settings-interface {
-        width: 80vw;
-        height: 400px;
-    }
-
-    .settings-interface .settings-body .settings-content input {
-        font-size: 30;
-    }
-
-    .settings-interface button {
-        width: 100%;
-        font-size: 30px;
-        background: #315a96;
-    }
-
-    .settings-interface .settings-heading {
-        font-size: 25;
-    }
-}
diff --git a/src/client/util/CaptureManager.tsx b/src/client/util/CaptureManager.tsx
index f01fcd0d2..cea0c182f 100644
--- a/src/client/util/CaptureManager.tsx
+++ b/src/client/util/CaptureManager.tsx
@@ -2,16 +2,10 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { action, computed, observable, runInAction } from "mobx";
 import { observer } from "mobx-react";
 import * as React from "react";
-import { ColorState, SketchPicker } from "react-color";
 import { Doc } from "../../fields/Doc";
 import { BoolCast, StrCast, Cast } from "../../fields/Types";
 import { addStyleSheet, addStyleSheetRule, Utils } from "../../Utils";
-import { GoogleAuthenticationManager } from "../apis/GoogleAuthenticationManager";
-import { DocServer } from "../DocServer";
-import { Networking } from "../Network";
 import { MainViewModal } from "../views/MainViewModal";
-import { CurrentUserUtils } from "./CurrentUserUtils";
-import { GroupManager } from "./GroupManager";
 import "./CaptureManager.scss";
 import { undoBatch } from "./UndoManager";
 const higflyout = require("@hig/flyout");
@@ -22,6 +16,7 @@ export const Flyout = higflyout.default;
 export class CaptureManager extends React.Component<{}> {
     public static Instance: CaptureManager;
     static _settingsStyle = addStyleSheet();
+    @observable _document: any;
     @observable isOpen: boolean = false; // whether the CaptureManager is to be displayed or not.
 
 
@@ -31,18 +26,27 @@ export class CaptureManager extends React.Component<{}> {
     }
 
     public close = action(() => this.isOpen = false);
-    public open = action(() => this.isOpen = true);
+    public open = action((doc: Doc) => {
+        this.isOpen = true;
+        this._document = doc;
+    });
 
 
-    @computed get colorsContent() {
-
-        return <div className="colors-content">
+    @computed get visibilityContent() {
 
+        return <div className="capture-block">
+            <div className="capture-block-title">Visibility
+                <div className="visibility-radio">
+                    <input type="radio" value="private" name="visibility" /> Private
+                    <input type="radio" value="public" name="visibility" /> Public
+                </div>
+            </div>
         </div>;
     }
 
-    @computed get formatsContent() {
-        return <div className="prefs-content">
+    @computed get linksContent() {
+        return <div className="capture-block">
+            <div className="capture-block-title">Links</div>
 
         </div>;
     }
@@ -52,11 +56,19 @@ export class CaptureManager extends React.Component<{}> {
 
 
     private get captureInterface() {
-        return <div className="settings-interface">
-            <div className="settings-panel">
-
+        return <div className="capture-interface">
+            <div className="capture-t1">
+                <div className="recordButtonOutline" style={{}}>
+                    <div className="recordButtonInner" style={{}}>
+                    </div>
+                </div>
+                Conversation Capture
             </div>
+            <div className="capture-t2">
 
+            </div>
+            {this.visibilityContent}
+            {this.linksContent}
             <div className="close-button" onClick={this.close}>
                 <FontAwesomeIcon icon={"times"} color="black" size={"lg"} />
             </div>
@@ -70,6 +82,9 @@ export class CaptureManager extends React.Component<{}> {
             isDisplayed={this.isOpen}
             interactive={true}
             closeOnExternalClick={this.close}
-            dialogueBoxStyle={{ width: "500px", height: "300px", background: Cast(Doc.SharingDoc().userColor, "string", null) }} />;
+            dialogueBoxStyle={{ width: "500px", height: "300px", border: "none", background: Cast(Doc.SharingDoc().userColor, "string", null) }}
+            overlayStyle={{ background: "black" }}
+            overlayDisplayedOpacity={0.6}
+        />
     }
 }
\ No newline at end of file
diff --git a/src/client/views/LightboxView.tsx b/src/client/views/LightboxView.tsx
index 2fd9cb854..efd3d733f 100644
--- a/src/client/views/LightboxView.tsx
+++ b/src/client/views/LightboxView.tsx
@@ -188,10 +188,13 @@ export class LightboxView extends React.Component<LightboxViewProps> {
             LightboxView._future?.push(...DocListCast(tours[0][fieldKey]).reverse());
         } else {
             const coll = LightboxView._docTarget;
-            if (coll) {
+            const doc = LightboxView.LightboxDoc;
+            if (coll && doc) {
                 console.log('test');
+                console.log('target: ' + coll.title);
+                console.log('doc: ' + doc.title);
                 const fieldKey = Doc.LayoutFieldKey(coll);
-                LightboxView.SetLightboxDoc(coll, undefined);
+                LightboxView.SetLightboxDoc(doc);
                 // LightboxView.SetLightboxDoc(coll, undefined, [...DocListCast(coll[fieldKey]), ...DocListCast(coll[fieldKey + "-annotations"])]);
                 TabDocView.PinDoc(coll, { hidePresBox: true });
             }
diff --git a/src/client/views/MainViewModal.tsx b/src/client/views/MainViewModal.tsx
index 7f91c0079..55dee005d 100644
--- a/src/client/views/MainViewModal.tsx
+++ b/src/client/views/MainViewModal.tsx
@@ -34,7 +34,7 @@ export class MainViewModal extends React.Component<MainViewOverlayProps> {
                 <div className="overlay"
                     onClick={this.props?.closeOnExternalClick}
                     style={{
-                        backgroundColor: "gainsboro",
+                        backgroundColor: "black",
                         ...(p.overlayStyle || {}),
                         opacity: p.isDisplayed ? overlayOpacity : 0
                     }}
diff --git a/src/client/views/collections/CollectionMenu.tsx b/src/client/views/collections/CollectionMenu.tsx
index 3321a8d8f..3299ea3a9 100644
--- a/src/client/views/collections/CollectionMenu.tsx
+++ b/src/client/views/collections/CollectionMenu.tsx
@@ -402,9 +402,9 @@ export class CollectionViewBaseChrome extends React.Component<CollectionMenuProp
         const doc = Docs.Create.ScreenshotDocument("", { _fitWidth: true, _width: 400, _height: 200, title: "screen snapshot", system: true, cloneFieldFilter: new List<string>(["system"]) });
         doc.x = 0;
         doc.y = 0;
+        doc.startRec = true;
         Doc.AddDocToList((Doc.UserDoc().myOverlayDocs as Doc), undefined, doc);
         CollectionDockingView.AddSplit(doc, "right");
-        // doc.startRec = true;
     }
 
     @computed
diff --git a/src/client/views/nodes/ScreenshotBox.tsx b/src/client/views/nodes/ScreenshotBox.tsx
index 4c24dc5e1..cecc593f0 100644
--- a/src/client/views/nodes/ScreenshotBox.tsx
+++ b/src/client/views/nodes/ScreenshotBox.tsx
@@ -1,6 +1,6 @@
 import React = require("react");
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { action, computed, IReactionDisposer, observable, ObservableMap, reaction, runInAction } from "mobx";
+import { action, computed, IReactionDisposer, observable, ObservableMap, reaction, runInAction, trace } from "mobx";
 import { observer } from "mobx-react";
 import { DateField } from "../../../fields/DateField";
 import { Doc, WidthSym } from "../../../fields/Doc";
@@ -36,7 +36,7 @@ const ScreenshotDocument = makeInterface(documentSchema);
 @observer
 export class ScreenshotBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps & FieldViewProps, ScreenshotDocument>(ScreenshotDocument) {
     public static LayoutString(fieldKey: string) { return FieldView.LayoutString(ScreenshotBox, fieldKey); }
-    private _videoRef = React.createRef<HTMLVideoElement>();
+    private _videoRef: HTMLVideoElement | undefined | null;
     private _audioRec: any;
     private _videoRec: any;
     @observable _screenCapture = false;
@@ -56,7 +56,7 @@ export class ScreenshotBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatabl
     }
 
     videoLoad = () => {
-        const aspect = this._videoRef.current!.videoWidth / this._videoRef.current!.videoHeight;
+        const aspect = this._videoRef!.videoWidth / this._videoRef!.videoHeight;
         const nativeWidth = Doc.NativeWidth(this.layoutDoc);
         const nativeHeight = Doc.NativeHeight(this.layoutDoc);
         if (!nativeWidth || !nativeHeight) {
@@ -69,9 +69,6 @@ export class ScreenshotBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatabl
     componentDidMount() {
         this.dataDoc.nativeWidth = this.dataDoc.nativeHeight = 0;
         this.props.setContentView?.(this); // this tells the DocumentView that this ScreenshotBox is the "content" of the document.  this allows the DocumentView to indirectly call getAnchor() on the AudioBox when making a link.
-        this._disposers.rec = reaction(() => this.rootDoc.startRec == true,
-            this.toggleRecording
-        );
     }
     componentWillUnmount() {
         const ind = DocUtils.ActiveRecordings.indexOf(this);
@@ -85,10 +82,22 @@ export class ScreenshotBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatabl
     }
 
     @computed get content() {
+        trace();
+        console.log('content');
         const interactive = CurrentUserUtils.SelectedTool !== InkTool.None || !this.props.isSelected() ? "" : "-interactive";
-        return <video className={"videoBox-content" + interactive} key="video" ref={this._videoRef}
-            autoPlay={this._screenCapture}
-            style={{ width: this._screenCapture ? "100%" : undefined, height: this._screenCapture ? "100%" : undefined }}
+        return <video className={"videoBox-content" + interactive} key="video"
+            ref={r => {
+                console.log('ref: ', r);
+                this._videoRef = r;
+                setTimeout(() => {
+                    if (this.rootDoc.startRec && this._videoRef) { // TODO glr: use mediaState
+                        this.toggleRecording();
+                        this.rootDoc.startRec = undefined;
+                    }
+                }, 1000);
+            }}
+            autoPlay={true}
+            style={{ width: "100%", height: "100%" }}
             onCanPlay={this.videoLoad}
             controls={true}
             onClick={e => e.preventDefault()}>
@@ -99,14 +108,11 @@ export class ScreenshotBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatabl
 
     toggleRecording = action(async () => {
         console.log("toggleRecording");
-        console.log("2:" + this._videoRef.current!.srcObject);
-        if (this._screenCapture) {
-            CaptureManager.Instance.open(this.rootDoc);
-        } else {
-            console.log("opening");
-        }
+        console.log("2:" + this._videoRef!.srcObject);
+
         this._screenCapture = !this._screenCapture;
         if (this._screenCapture) {
+            console.log("opening");
             this._audioRec = new MediaRecorder(await navigator.mediaDevices.getUserMedia({ audio: true }));
             const aud_chunks: any = [];
             this._audioRec.ondataavailable = (e: any) => aud_chunks.push(e.data);
@@ -116,12 +122,13 @@ export class ScreenshotBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatabl
                     this.dataDoc[this.props.fieldKey + "-audio"] = new AudioField(Utils.prepend(result.accessPaths.agnostic.client));
                 }
             };
-            this._videoRef.current!.srcObject = await (navigator.mediaDevices as any).getDisplayMedia({ video: true });
-            this._videoRec = new MediaRecorder(this._videoRef.current!.srcObject);
+            this._videoRef!.srcObject = await (navigator.mediaDevices as any).getDisplayMedia({ video: true });
+            this._videoRec = new MediaRecorder(this._videoRef!.srcObject);
             const vid_chunks: any = [];
             this._videoRec.onstart = () => this.dataDoc[this.props.fieldKey + "-recordingStart"] = new DateField(new Date());
             this._videoRec.ondataavailable = (e: any) => vid_chunks.push(e.data);
             this._videoRec.onstop = async (e: any) => {
+                console.log("onStop: video end");
                 const file = new File(vid_chunks, `${this.rootDoc[Id]}.mkv`, { type: vid_chunks[0].type, lastModified: Date.now() });
                 const [{ result }] = await Networking.UploadFilesToServer(file);
                 this.dataDoc[this.fieldKey + "-duration"] = (new Date().getTime() - this.recordingStart!) / 1000;
@@ -143,6 +150,9 @@ export class ScreenshotBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatabl
             this.dataDoc.mediaState = "paused";
             const ind = DocUtils.ActiveRecordings.indexOf(this);
             ind !== -1 && (DocUtils.ActiveRecordings.splice(ind, 1));
+
+            CaptureManager.Instance.open(this.rootDoc);
+            console.log("closing");
         }
     });
 
@@ -163,62 +173,58 @@ export class ScreenshotBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatabl
     formattedPanelHeight = () => Math.max(0, this.props.PanelHeight() - this.videoPanelHeight());
     render() {
         TraceMobx();
-        return this.rootDoc.startRec ?
-            <div className="mini-viewer">
-
+        console.log('rendering');
+        return <div className="videoBox" onContextMenu={this.specificContextMenu} style={{ width: "100%", height: "100%" }} >
+            <div className="videoBox-viewer" >
+                <div style={{ position: "relative", height: this.videoPanelHeight() }}>
+                    <CollectionFreeFormView {...OmitKeys(this.props, ["NativeWidth", "NativeHeight"]).omit}
+                        PanelHeight={this.videoPanelHeight}
+                        PanelWidth={this.props.PanelWidth}
+                        focus={this.props.focus}
+                        isSelected={this.props.isSelected}
+                        isAnnotationOverlay={true}
+                        select={emptyFunction}
+                        isContentActive={returnFalse}
+                        scaling={returnOne}
+                        whenChildContentsActiveChanged={emptyFunction}
+                        removeDocument={returnFalse}
+                        moveDocument={returnFalse}
+                        addDocument={returnFalse}
+                        CollectionView={undefined}
+                        ScreenToLocalTransform={this.props.ScreenToLocalTransform}
+                        renderDepth={this.props.renderDepth + 1}
+                        ContainingCollectionDoc={this.props.ContainingCollectionDoc}>
+                        {this.contentFunc}
+                    </CollectionFreeFormView></div>
+                <div style={{ position: "relative", height: this.formattedPanelHeight() }}>
+                    <FormattedTextBox {...OmitKeys(this.props, ["NativeWidth", "NativeHeight"]).omit}
+                        Document={this.dataDoc[this.fieldKey + "-dictation"]}
+                        fieldKey={"text"}
+                        PanelHeight={this.formattedPanelHeight}
+                        PanelWidth={this.props.PanelWidth}
+                        focus={this.props.focus}
+                        isSelected={this.props.isSelected}
+                        isAnnotationOverlay={true}
+                        select={emptyFunction}
+                        isContentActive={returnFalse}
+                        scaling={returnOne}
+                        xMargin={25}
+                        yMargin={10}
+                        whenChildContentsActiveChanged={emptyFunction}
+                        removeDocument={returnFalse}
+                        moveDocument={returnFalse}
+                        addDocument={returnFalse}
+                        CollectionView={undefined}
+                        ScreenToLocalTransform={this.props.ScreenToLocalTransform}
+                        renderDepth={this.props.renderDepth + 1}
+                        ContainingCollectionDoc={this.props.ContainingCollectionDoc}>
+                    </FormattedTextBox></div>
             </div>
-            :
-            <div className="videoBox" onContextMenu={this.specificContextMenu} style={{ width: "100%", height: "100%" }} >
-                <div className="videoBox-viewer" >
-                    <div style={{ position: "relative", height: this.videoPanelHeight() }}>
-                        <CollectionFreeFormView {...OmitKeys(this.props, ["NativeWidth", "NativeHeight"]).omit}
-                            PanelHeight={this.videoPanelHeight}
-                            PanelWidth={this.props.PanelWidth}
-                            focus={this.props.focus}
-                            isSelected={this.props.isSelected}
-                            isAnnotationOverlay={true}
-                            select={emptyFunction}
-                            isContentActive={returnFalse}
-                            scaling={returnOne}
-                            whenChildContentsActiveChanged={emptyFunction}
-                            removeDocument={returnFalse}
-                            moveDocument={returnFalse}
-                            addDocument={returnFalse}
-                            CollectionView={undefined}
-                            ScreenToLocalTransform={this.props.ScreenToLocalTransform}
-                            renderDepth={this.props.renderDepth + 1}
-                            ContainingCollectionDoc={this.props.ContainingCollectionDoc}>
-                            {this.contentFunc}
-                        </CollectionFreeFormView></div>
-                    <div style={{ position: "relative", height: this.formattedPanelHeight() }}>
-                        <FormattedTextBox {...OmitKeys(this.props, ["NativeWidth", "NativeHeight"]).omit}
-                            Document={this.dataDoc[this.fieldKey + "-dictation"]}
-                            fieldKey={"text"}
-                            PanelHeight={this.formattedPanelHeight}
-                            PanelWidth={this.props.PanelWidth}
-                            focus={this.props.focus}
-                            isSelected={this.props.isSelected}
-                            isAnnotationOverlay={true}
-                            select={emptyFunction}
-                            isContentActive={returnFalse}
-                            scaling={returnOne}
-                            xMargin={25}
-                            yMargin={10}
-                            whenChildContentsActiveChanged={emptyFunction}
-                            removeDocument={returnFalse}
-                            moveDocument={returnFalse}
-                            addDocument={returnFalse}
-                            CollectionView={undefined}
-                            ScreenToLocalTransform={this.props.ScreenToLocalTransform}
-                            renderDepth={this.props.renderDepth + 1}
-                            ContainingCollectionDoc={this.props.ContainingCollectionDoc}>
-                        </FormattedTextBox></div>
+            {!this.props.isSelected() ? (null) : <div className="screenshotBox-uiButtons">
+                <div className="screenshotBox-recorder" key="snap" onPointerDown={this.toggleRecording} >
+                    <FontAwesomeIcon icon="file" size="lg" />
                 </div>
-                {!this.props.isSelected() ? (null) : <div className="screenshotBox-uiButtons">
-                    <div className="screenshotBox-recorder" key="snap" onPointerDown={this.toggleRecording} >
-                        <FontAwesomeIcon icon="file" size="lg" />
-                    </div>
-                </div>}
-            </div >;
+            </div>}
+        </div >;
     }
 }
\ No newline at end of file
diff --git a/src/client/views/presentationview/PresElementBox.tsx b/src/client/views/presentationview/PresElementBox.tsx
index a1fc77a92..f15d51764 100644
--- a/src/client/views/presentationview/PresElementBox.tsx
+++ b/src/client/views/presentationview/PresElementBox.tsx
@@ -57,6 +57,7 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps, PresDoc
     @computed get targetDoc() { return Cast(this.rootDoc.presentationTargetDoc, Doc, null) || this.rootDoc; }
 
     componentDidMount() {
+        this.layoutDoc.hideLinkButton = true;
         this._heightDisposer = reaction(() => [this.rootDoc.presExpandInlineButton, this.collapsedHeight],
             params => this.layoutDoc._height = NumCast(params[1]) + (Number(params[0]) ? 100 : 0), { fireImmediately: true });
     }
@@ -114,6 +115,7 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps, PresDoc
                     searchFilterDocs={this.props.searchFilterDocs}
                     ContainingCollectionView={undefined}
                     ContainingCollectionDoc={undefined}
+                    hideLinkButton={true}
                 />
                 <div className="presItem-embeddedMask" />
             </div>;
-- 
cgit v1.2.3-70-g09d2


From d0b90a0a7849cdc06f4332df9ad6eae5342520ca Mon Sep 17 00:00:00 2001
From: Geireann <60007097+geireann@users.noreply.github.com>
Date: Thu, 8 Apr 2021 04:07:42 -0400
Subject: changes

---
 src/client/util/CaptureManager.scss                | 84 ++++++++++++++++++++--
 src/client/util/CaptureManager.tsx                 | 66 ++++++++++++++---
 src/client/views/collections/CollectionMenu.tsx    |  3 +-
 .../collections/CollectionStackedTimeline.tsx      |  8 +--
 src/client/views/nodes/DocumentView.tsx            |  2 +-
 src/client/views/nodes/VideoBox.tsx                |  3 +-
 6 files changed, 146 insertions(+), 20 deletions(-)

(limited to 'src/client/util/CaptureManager.tsx')

diff --git a/src/client/util/CaptureManager.scss b/src/client/util/CaptureManager.scss
index 8447bd2d5..71539ee1e 100644
--- a/src/client/util/CaptureManager.scss
+++ b/src/client/util/CaptureManager.scss
@@ -60,8 +60,7 @@
 }
 
 .capture-block {
-    display: flex;
-    border-bottom: 1px solid grey;
+    display: block;
     padding-bottom: 8px;
     padding-top: 6px;
 
@@ -72,10 +71,87 @@
         color: black;
         width: 80;
         margin-right: 50px;
+        margin-bottom: 5px;
+    }
+
+    .capture-block-list {
+        height: 135px;
+        width: calc(100% + 15px);
+        overflow: scroll;
+    }
+
+    .capture-block-radio {
+        font-size: 12;
+        display: block;
+        font-weight: normal;
+
+        .radio-container {
+            display: flex;
+            justify-content: left;
+            align-items: center;
+            font-size: 13px;
+            font-family: 'Roboto';
+        }
     }
 
-    &:last-child {
-        border-bottom: none;
+    .list-item {
+        display: flex;
+        height: 25px;
+        font-family: 'Roboto';
+        font-size: 13px;
+
+        .number {
+            width: 20px;
+            height: 20px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            background-color: #BDDBE8;
+            border-radius: 100%;
+            font-weight: 800;
+            margin-right: 5px;
+        }
+    }
+
+    .buttons {
+        display: flex;
+        position: absolute;
+        bottom: 0;
+        right: 15;
+        justify-content: flex-end;
+        align-items: center;
+        height: 60px;
+
+        .save {
+            cursor: pointer;
+            width: 80px;
+            height: 40px;
+            font-size: 14px;
+            display: flex;
+            font-weight: bold;
+            justify-content: center;
+            align-items: center;
+            background: #337ab7;
+            color: whitesmoke;
+            border-radius: 5px;
+            text-transform: uppercase;
+        }
+
+        .cancel {
+            cursor: pointer;
+            width: 80px;
+            height: 40px;
+            font-size: 14px;
+            display: flex;
+            font-weight: 100;
+            justify-content: center;
+            align-items: center;
+            background: #ccc;
+            color: black;
+            border-radius: 5px;
+            text-transform: uppercase;
+            margin-left: 10px;
+        }
     }
 }
 
diff --git a/src/client/util/CaptureManager.tsx b/src/client/util/CaptureManager.tsx
index cea0c182f..c38337c91 100644
--- a/src/client/util/CaptureManager.tsx
+++ b/src/client/util/CaptureManager.tsx
@@ -2,11 +2,14 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { action, computed, observable, runInAction } from "mobx";
 import { observer } from "mobx-react";
 import * as React from "react";
-import { Doc } from "../../fields/Doc";
+import { convertToObject } from "typescript";
+import { Doc, DocListCast } from "../../fields/Doc";
 import { BoolCast, StrCast, Cast } from "../../fields/Types";
 import { addStyleSheet, addStyleSheetRule, Utils } from "../../Utils";
+import { LightboxView } from "../views/LightboxView";
 import { MainViewModal } from "../views/MainViewModal";
 import "./CaptureManager.scss";
+import { SelectionManager } from "./SelectionManager";
 import { undoBatch } from "./UndoManager";
 const higflyout = require("@hig/flyout");
 export const { anchorPoints } = higflyout;
@@ -35,23 +38,69 @@ export class CaptureManager extends React.Component<{}> {
     @computed get visibilityContent() {
 
         return <div className="capture-block">
-            <div className="capture-block-title">Visibility
-                <div className="visibility-radio">
-                    <input type="radio" value="private" name="visibility" /> Private
-                    <input type="radio" value="public" name="visibility" /> Public
+            <div className="capture-block-title">Visibility</div>
+            <div className="capture-block-radio">
+                <div className="radio-container">
+                    <input type="radio" value="private" name="visibility" style={{ margin: 0, marginRight: 5 }} /> Private
+                </div>
+                <div className="radio-container">
+                    <input type="radio" value="public" name="visibility" style={{ margin: 0, marginRight: 5 }} /> Public
                 </div>
             </div>
         </div>;
     }
 
     @computed get linksContent() {
+        const doc = this._document;
+        const order: JSX.Element[] = [];
+        if (doc) {
+            console.log('title', doc.title);
+            console.log('links', doc.links);
+            const linkDocs = DocListCast(doc.links);
+            const firstDocs = linkDocs.filter(linkDoc => Doc.AreProtosEqual(linkDoc.anchor1 as Doc, doc) || Doc.AreProtosEqual((linkDoc.anchor1 as Doc).annotationOn as Doc, doc)); // link docs where 'doc' is anchor1
+            const secondDocs = linkDocs.filter(linkDoc => Doc.AreProtosEqual(linkDoc.anchor2 as Doc, doc) || Doc.AreProtosEqual((linkDoc.anchor2 as Doc).annotationOn as Doc, doc)); // link docs where 'doc' is anchor2
+            linkDocs.forEach((l, i) => {
+                if (l) {
+                    console.log(i, (l.anchor1 as Doc).title);
+                    console.log(i, (l.anchor2 as Doc).title);
+                    order.push(
+                        <div className="list-item">
+                            <div className="number">{i}</div>
+                            {(l.anchor1 as Doc).title}
+                        </div>
+                    );
+                }
+            });
+        }
+
         return <div className="capture-block">
             <div className="capture-block-title">Links</div>
-
+            <div className="capture-block-list">
+                {order}
+            </div>
         </div>;
     }
 
-
+    @computed get closeButtons() {
+        return <div className="capture-block">
+            <div className="buttons">
+                <div className="save" onClick={() => {
+                    LightboxView.SetLightboxDoc(this._document);
+                    this.close();
+                }}>
+                    Save
+                </div>
+                <div className="cancel" onClick={() => {
+                    const selected = SelectionManager.Views().slice();
+                    SelectionManager.DeselectAll();
+                    selected.map(dv => dv.props.removeDocument?.(dv.props.Document));
+                    this.close();
+                }}>
+                    Cancel
+                </div>
+            </div>
+        </div>
+    }
 
 
 
@@ -72,6 +121,7 @@ export class CaptureManager extends React.Component<{}> {
             <div className="close-button" onClick={this.close}>
                 <FontAwesomeIcon icon={"times"} color="black" size={"lg"} />
             </div>
+            {this.closeButtons}
         </div>;
 
     }
@@ -82,7 +132,7 @@ export class CaptureManager extends React.Component<{}> {
             isDisplayed={this.isOpen}
             interactive={true}
             closeOnExternalClick={this.close}
-            dialogueBoxStyle={{ width: "500px", height: "300px", border: "none", background: Cast(Doc.SharingDoc().userColor, "string", null) }}
+            dialogueBoxStyle={{ width: "500px", height: "350px", border: "none", background: "whitesmoke" }}
             overlayStyle={{ background: "black" }}
             overlayDisplayedOpacity={0.6}
         />
diff --git a/src/client/views/collections/CollectionMenu.tsx b/src/client/views/collections/CollectionMenu.tsx
index 3299ea3a9..6816b4739 100644
--- a/src/client/views/collections/CollectionMenu.tsx
+++ b/src/client/views/collections/CollectionMenu.tsx
@@ -403,7 +403,6 @@ export class CollectionViewBaseChrome extends React.Component<CollectionMenuProp
         doc.x = 0;
         doc.y = 0;
         doc.startRec = true;
-        Doc.AddDocToList((Doc.UserDoc().myOverlayDocs as Doc), undefined, doc);
         CollectionDockingView.AddSplit(doc, "right");
     }
 
@@ -548,8 +547,8 @@ export class CollectionViewBaseChrome extends React.Component<CollectionMenuProp
                         <div className="collectionMenu-divider" key="divider1"></div>
                         {this.aliasButton}
                         {/* {this.pinButton} */}
-                        {/* {this.pinWithViewButton} */}
                         {this.toggleOverlayButton}
+                        {this.pinWithViewButton}
                         <div className="collectionMenu-divider" key="divider2"></div>
                         {this.subChrome}
                         <div className="collectionMenu-divider" key="divider3"></div>
diff --git a/src/client/views/collections/CollectionStackedTimeline.tsx b/src/client/views/collections/CollectionStackedTimeline.tsx
index 6a1242f20..4f9f297a2 100644
--- a/src/client/views/collections/CollectionStackedTimeline.tsx
+++ b/src/client/views/collections/CollectionStackedTimeline.tsx
@@ -234,15 +234,15 @@ export class CollectionStackedTimeline extends CollectionSubView<PanZoomDocument
         return level;
     }
 
-    dictationHeight = () => this.props.PanelHeight() / 3;
-    timelineContentHeight = () => this.props.PanelHeight() * 2 / 3;
+    dictationHeight = () => "50%";
+    timelineContentHeight = () => this.props.PanelHeight() / 2;
     dictationScreenToLocalTransform = () => this.props.ScreenToLocalTransform().translate(0, -this.timelineContentHeight());
     @computed get renderDictation() {
         const dictation = Cast(this.dataDoc[this.props.dictationKey], Doc, null);
-        return !dictation ? (null) : <div style={{ position: "absolute", height: this.dictationHeight(), top: this.timelineContentHeight(), background: "tan" }}>
+        return !dictation ? (null) : <div style={{ position: "absolute", height: this.dictationHeight(), top: "50%", background: "tan" }}>
             <DocumentView {...OmitKeys(this.props, ["NativeWidth", "NativeHeight", "setContentView"]).omit}
                 Document={dictation}
-                PanelHeight={this.dictationHeight}
+                PanelHeight={() => "100%"}
                 isAnnotationOverlay={true}
                 isDocumentActive={returnFalse}
                 select={emptyFunction}
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index 26cf52f17..153603c3c 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -1105,7 +1105,7 @@ export class DocumentView extends React.Component<DocumentViewProps> {
                         position: this.props.Document.isInkMask ? "absolute" : undefined,
                         transform: `translate(${this.centeringX}px, ${this.centeringY}px)`,
                         width: xshift() ?? `${100 * (this.props.PanelWidth() - this.Xshift * 2) / this.props.PanelWidth()}%`,
-                        height: yshift() ?? (this.fitWidth ? `${this.panelHeight}px` :
+                        height: this.props.Document.type === DocumentType.VID ? "100%" : yshift() ?? (this.fitWidth ? `${this.panelHeight}px` :
                             `${100 * this.effectiveNativeHeight / this.effectiveNativeWidth * this.props.PanelWidth() / this.props.PanelHeight()}%`),
                     }}>
                     <DocumentViewInternal {...this.props}
diff --git a/src/client/views/nodes/VideoBox.tsx b/src/client/views/nodes/VideoBox.tsx
index fb58ddefc..ab072a97f 100644
--- a/src/client/views/nodes/VideoBox.tsx
+++ b/src/client/views/nodes/VideoBox.tsx
@@ -417,12 +417,13 @@ export class VideoBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
 
     onTimelineHdlDown = action((e: React.PointerEvent) => {
         this._clicking = true;
+        console.log('timeline click');
         setupMoveUpEvents(this, e,
             action((e: PointerEvent) => {
                 this._clicking = false;
                 if (this.isContentActive()) {
                     const local = this.props.ScreenToLocalTransform().scale(this.props.scaling?.() || 1).transformPoint(e.clientX, e.clientY);
-                    this.layoutDoc._timelineHeightPercent = Math.max(0, Math.min(100, local[1] / this.props.PanelHeight() * 100));
+                    this.layoutDoc._timelineHeightPercent = 50;
                 }
                 return false;
             }), emptyFunction,
-- 
cgit v1.2.3-70-g09d2

