From 7f5cee959475b4e42af3b4ea39dcf92f450fa564 Mon Sep 17 00:00:00 2001 From: bobzel Date: Wed, 24 Mar 2021 04:00:15 -0400 Subject: renamed audioState to mediaState and cleaned up screenshotBox a little. --- src/client/views/nodes/ScreenshotBox.tsx | 130 +++++++------------------------ 1 file changed, 26 insertions(+), 104 deletions(-) (limited to 'src/client/views/nodes/ScreenshotBox.tsx') diff --git a/src/client/views/nodes/ScreenshotBox.tsx b/src/client/views/nodes/ScreenshotBox.tsx index 8e1a43fd1..bed6566a6 100644 --- a/src/client/views/nodes/ScreenshotBox.tsx +++ b/src/client/views/nodes/ScreenshotBox.tsx @@ -1,38 +1,36 @@ import React = require("react"); import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; -import { action, computed, IReactionDisposer, observable, runInAction } from "mobx"; +import { action, computed, IReactionDisposer, observable } from "mobx"; import { observer } from "mobx-react"; -import * as rp from 'request-promise'; +import { DateField } from "../../../fields/DateField"; import { Doc, WidthSym } from "../../../fields/Doc"; import { documentSchema } from "../../../fields/documentSchemas"; +import { Id } from "../../../fields/FieldSymbols"; import { InkTool } from "../../../fields/InkField"; -import { listSpec, makeInterface } from "../../../fields/Schema"; +import { makeInterface } from "../../../fields/Schema"; +import { ComputedField } from "../../../fields/ScriptField"; import { Cast, NumCast } from "../../../fields/Types"; -import { VideoField, AudioField } from "../../../fields/URLField"; -import { emptyFunction, returnFalse, returnOne, returnZero, Utils, OmitKeys } from "../../../Utils"; -import { Docs, DocUtils } from "../../documents/Documents"; +import { AudioField, VideoField } from "../../../fields/URLField"; +import { emptyFunction, OmitKeys, returnFalse, returnOne, Utils } from "../../../Utils"; +import { DocUtils } from "../../documents/Documents"; +import { DocumentType } from "../../documents/DocumentTypes"; +import { Networking } from "../../Network"; +import { CurrentUserUtils } from "../../util/CurrentUserUtils"; +import { DocumentManager } from "../../util/DocumentManager"; import { CollectionFreeFormView } from "../collections/collectionFreeForm/CollectionFreeFormView"; +import { CollectionStackedTimeline } from "../collections/CollectionStackedTimeline"; import { ContextMenu } from "../ContextMenu"; import { ContextMenuProps } from "../ContextMenuItem"; -import { ViewBoxBaseComponent, ViewBoxAnnotatableComponent } from "../DocComponent"; +import { ViewBoxAnnotatableComponent } from "../DocComponent"; +import { DocumentView } from "./DocumentView"; import { FieldView, FieldViewProps } from './FieldView'; import "./ScreenshotBox.scss"; -import { CurrentUserUtils } from "../../util/CurrentUserUtils"; -import { Networking } from "../../Network"; -import { DocumentType } from "../../documents/DocumentTypes"; import { VideoBox } from "./VideoBox"; -import { Id } from "../../../fields/FieldSymbols"; -import { CollectionStackedTimeline } from "../collections/CollectionStackedTimeline"; -import { DateField } from "../../../fields/DateField"; -import { ComputedField } from "../../../fields/ScriptField"; -import { DocumentManager } from "../../util/DocumentManager"; -import { DocumentView } from "./DocumentView"; const path = require('path'); declare class MediaRecorder { constructor(e: any, options?: any); // whatever MediaRecorder has } - type ScreenshotDocument = makeInterface<[typeof documentSchema]>; const ScreenshotDocument = makeInterface(documentSchema); @@ -40,12 +38,15 @@ const ScreenshotDocument = makeInterface(documentSchema); export class ScreenshotBox extends ViewBoxAnnotatableComponent(ScreenshotDocument) { private _reactionDisposer?: IReactionDisposer; private _videoRef: HTMLVideoElement | null = null; + private _vchunks: any; + private _achunks: any; + private _vrecorder: any; + private _arecorder: any; + private _dictation: Doc | undefined; + private _dictationView: DocumentView | undefined; public static LayoutString(fieldKey: string) { return FieldView.LayoutString(ScreenshotBox, fieldKey); } @computed get recordingStart() { return Cast(this.dataDoc[this.props.fieldKey + "-recordingStart"], DateField)?.date.getTime(); } - public get player(): HTMLVideoElement | null { - return this._videoRef; - } getAnchor = () => { const startTime = Cast(this.layoutDoc._currentTimecode, "number", null) || (this._vrecorder ? (Date.now() - (this.recordingStart || 0)) / 1000 : undefined); @@ -55,7 +56,7 @@ export class ScreenshotBox extends ViewBoxAnnotatableComponent { - const aspect = this.player!.videoWidth / this.player!.videoHeight; + const aspect = this._videoRef!.videoWidth / this._videoRef!.videoHeight; const nativeWidth = Doc.NativeWidth(this.layoutDoc); const nativeHeight = Doc.NativeHeight(this.layoutDoc); if (!nativeWidth || !nativeHeight) { @@ -65,49 +66,6 @@ export class ScreenshotBox extends ViewBoxAnnotatableComponent { - setTimeout(() => { - if (returnedFilename) { - const imageSummary = Docs.Create.ImageDocument(Utils.prepend(returnedFilename), { - x: NumCast(this.layoutDoc.x) + width, y: NumCast(this.layoutDoc.y), - _width: 150, _height: height / width * 150, title: "--screenshot--" - }); - if (!this.props.addDocument || this.props.addDocument === returnFalse) { - const spt = this.props.ScreenToLocalTransform().inverse().transformPoint(0, 0); - imageSummary.x = spt[0]; - imageSummary.y = spt[1]; - Cast(Cast(Doc.UserDoc().myOverlayDocs, Doc, null)?.data, listSpec(Doc), []).push(imageSummary); - } else { - this.props.addDocument?.(imageSummary); - } - } - }, 500); - }); - } - } - - componentDidMount() { - } - componentWillUnmount() { this._reactionDisposer?.(); const ind = DocUtils.ActiveRecordings.indexOf(this); @@ -115,33 +73,13 @@ export class ScreenshotBox extends ViewBoxAnnotatableComponent { - this._videoRef = vref; - } - - public static async convertDataUri(imageUri: string, returnedFilename: string) { - try { - const posting = Utils.prepend("/uploadURI"); - const returnedUri = await rp.post(posting, { - body: { - uri: imageUri, - name: returnedFilename - }, - json: true, - }); - return returnedUri; + setVideoRef = (vref: HTMLVideoElement | null) => this._videoRef = vref; - } catch (e) { - console.log("ScreenShotBox:" + e); - } - } @observable _screenCapture = false; specificContextMenu = (e: React.MouseEvent): void => { const field = Cast(this.dataDoc[this.fieldKey], VideoField); if (field) { - const url = field.url.href; const subitems: ContextMenuProps[] = []; - subitems.push({ description: "Take Snapshot", event: () => this.Snapshot(), icon: "expand-arrows-alt" }); subitems.push({ description: "Screen Capture", event: this.toggleRecording, icon: "expand-arrows-alt" }); ContextMenu.Instance.addItem({ description: "Options...", subitems: subitems, icon: "video" }); } @@ -160,13 +98,6 @@ export class ScreenshotBox extends ViewBoxAnnotatableComponent; } - _vchunks: any; - _achunks: any; - _vrecorder: any; - _arecorder: any; - _dictation: Doc | undefined; - _dictationView: DocumentView | undefined; - toggleRecording = action(async () => { this._screenCapture = !this._screenCapture; if (this._screenCapture) { @@ -199,12 +130,12 @@ export class ScreenshotBox extends ViewBoxAnnotatableComponent this._dictationView = DocumentManager.Instance.getDocumentView(this._dictation!)); this._arecorder.start(); this._vrecorder.start(); - this.dataDoc.audioState = "recording"; + this.dataDoc.mediaState = "recording"; DocUtils.ActiveRecordings.push(this); } else { this._arecorder.stop(); this._vrecorder.stop(); - this.dataDoc.audioState = "paused"; + this.dataDoc.mediaState = "paused"; const ind = DocUtils.ActiveRecordings.indexOf(this); ind !== -1 && (DocUtils.ActiveRecordings.splice(ind, 1)); } @@ -217,7 +148,7 @@ export class ScreenshotBox extends ViewBoxAnnotatableComponent -
- -
); } - onSnapshot = (e: React.PointerEvent) => { - this.Snapshot(); - e.stopPropagation(); - e.preventDefault(); - } - contentFunc = () => [this.content]; render() { return (