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') 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
+ @computed get visibilityContent() { + return
+
Visibility +
+ Private + Public +
+
; } - @computed get formatsContent() { - return
+ @computed get linksContent() { + return
+
Links
; } @@ -52,11 +56,19 @@ export class CaptureManager extends React.Component<{}> { private get captureInterface() { - return
-
- + return
+
+
+
+
+
+ Conversation Capture
+
+
+ {this.visibilityContent} + {this.linksContent}
@@ -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 { 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 {
(["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(ScreenshotDocument) { public static LayoutString(fieldKey: string) { return FieldView.LayoutString(ScreenshotBox, fieldKey); } - private _videoRef = React.createRef(); + private _videoRef: HTMLVideoElement | undefined | null; private _audioRec: any; private _videoRec: any; @observable _screenCapture = false; @@ -56,7 +56,7 @@ export class ScreenshotBox extends ViewBoxAnnotatableComponent { - 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 this.rootDoc.startRec == true, - this.toggleRecording - ); } componentWillUnmount() { const ind = DocUtils.ActiveRecordings.indexOf(this); @@ -85,10 +82,22 @@ export class ScreenshotBox extends ViewBoxAnnotatableComponent { + 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 { 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 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 Math.max(0, this.props.PanelHeight() - this.videoPanelHeight()); render() { TraceMobx(); - return this.rootDoc.startRec ? -
- + console.log('rendering'); + return
+
+
+ + {this.contentFunc} +
+
+ +
- : -
-
-
- - {this.contentFunc} -
-
- -
+ {!this.props.isSelected() ? (null) :
+
+
- {!this.props.isSelected() ? (null) :
-
- -
-
} -
; +
} +
; } } \ 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 [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
; -- cgit v1.2.3-70-g09d2