diff options
| author | andrewdkim <adkim414@gmail.com> | 2019-07-19 11:21:47 -0400 |
|---|---|---|
| committer | andrewdkim <adkim414@gmail.com> | 2019-07-19 11:21:47 -0400 |
| commit | e453e7010def252b6cc10ad49d64708767c5589b (patch) | |
| tree | 4353a4be5495acd61d813066d001e2b12da7d207 /src/client/views/collections/CollectionVideoView.tsx | |
| parent | 9cad9abcf164c7d81b8debf4aa2639d83edd227b (diff) | |
| parent | 8854d3277541a67aef4187b5d3592bea5a7fcfa2 (diff) | |
merge from master
Diffstat (limited to 'src/client/views/collections/CollectionVideoView.tsx')
| -rw-r--r-- | src/client/views/collections/CollectionVideoView.tsx | 74 |
1 files changed, 11 insertions, 63 deletions
diff --git a/src/client/views/collections/CollectionVideoView.tsx b/src/client/views/collections/CollectionVideoView.tsx index 7853544d5..d7d5773ba 100644 --- a/src/client/views/collections/CollectionVideoView.tsx +++ b/src/client/views/collections/CollectionVideoView.tsx @@ -1,33 +1,25 @@ -import { action, observable, trace } from "mobx"; -import * as htmlToImage from "html-to-image"; +import { action } from "mobx"; import { observer } from "mobx-react"; -import { ContextMenu } from "../ContextMenu"; -import { CollectionViewType, CollectionBaseView, CollectionRenderProps } from "./CollectionBaseView"; -import React = require("react"); -import "./CollectionVideoView.scss"; -import { CollectionFreeFormView } from "./collectionFreeForm/CollectionFreeFormView"; +import { NumCast } from "../../../new_fields/Types"; import { FieldView, FieldViewProps } from "../nodes/FieldView"; -import { emptyFunction, Utils } from "../../../Utils"; -import { Id } from "../../../new_fields/FieldSymbols"; import { VideoBox } from "../nodes/VideoBox"; -import { NumCast, Cast, StrCast } from "../../../new_fields/Types"; -import { VideoField } from "../../../new_fields/URLField"; -import { SearchBox } from "../SearchBox"; -import { DocServer } from "../../DocServer"; -import { Docs, DocUtils } from "../../documents/Documents"; +import { CollectionBaseView, CollectionRenderProps, CollectionViewType } from "./CollectionBaseView"; +import { CollectionFreeFormView } from "./collectionFreeForm/CollectionFreeFormView"; +import "./CollectionVideoView.scss"; +import React = require("react"); @observer export class CollectionVideoView extends React.Component<FieldViewProps> { private _videoBox?: VideoBox; - public static LayoutString(fieldKey: string = "data") { - return FieldView.LayoutString(CollectionVideoView, fieldKey); + public static LayoutString(fieldKey: string = "data", fieldExt: string = "annotations") { + return FieldView.LayoutString(CollectionVideoView, fieldKey, fieldExt); } private get uIButtons() { let scaling = Math.min(1.8, this.props.ScreenToLocalTransform().Scale); let curTime = NumCast(this.props.Document.curPage); - return ([ + return (VideoBox._showControls ? [] : [ <div className="collectionVideoView-time" key="time" onPointerDown={this.onResetDown} style={{ transform: `scale(${scaling}, ${scaling})` }}> <span>{"" + Math.round(curTime)}</span> <span style={{ fontSize: 8 }}>{" " + Math.round((curTime - Math.trunc(curTime)) * 100)}</span> @@ -43,7 +35,7 @@ export class CollectionVideoView extends React.Component<FieldViewProps> { @action onPlayDown = () => { - if (this._videoBox && this._videoBox.player) { + if (this._videoBox) { if (this._videoBox.Playing) { this._videoBox.Pause(); } else { @@ -68,49 +60,6 @@ export class CollectionVideoView extends React.Component<FieldViewProps> { this.props.Document.curPage = 0; } } - - onContextMenu = (e: React.MouseEvent): void => { - if (!e.isPropagationStopped() && this.props.Document[Id] !== "mainDoc") { // need to test this because GoldenLayout causes a parallel hierarchy in the React DOM for its children and the main document view7 - } - - let field = Cast(this.props.Document[this.props.fieldKey], VideoField); - if (field) { - let url = field.url.href; - ContextMenu.Instance.addItem({ - description: "Copy path", event: () => { Utils.CopyText(url); }, icon: "expand-arrows-alt" - }); - } - let width = NumCast(this.props.Document.width); - let height = NumCast(this.props.Document.height); - ContextMenu.Instance.addItem({ - description: "Take Snapshot", event: async () => { - var canvas = document.createElement('canvas'); - canvas.width = 640; - canvas.height = 640 * NumCast(this.props.Document.nativeHeight) / NumCast(this.props.Document.nativeWidth); - var ctx = canvas.getContext('2d');//draw image to canvas. scale to target dimensions - ctx && ctx.drawImage(this._videoBox!.player!, 0, 0, canvas.width, canvas.height); - - //convert to desired file format - var dataUrl = canvas.toDataURL('image/png'); // can also use 'image/png' - // if you want to preview the captured image, - - let filename = encodeURIComponent("snapshot" + this.props.Document.title + "_" + this.props.Document.curPage).replace(/\./g, ""); - SearchBox.convertDataUri(dataUrl, filename).then((returnedFilename) => { - if (returnedFilename) { - let url = DocServer.prepend(returnedFilename); - let imageSummary = Docs.ImageDocument(url, { - x: NumCast(this.props.Document.x) + width, y: NumCast(this.props.Document.y), - width: 150, height: height / width * 150, title: "--snapshot" + NumCast(this.props.Document.curPage) + " image-" - }); - this.props.addDocument && this.props.addDocument(imageSummary, false); - DocUtils.MakeLink(imageSummary, this.props.Document); - } - }); - }, - icon: "expand-arrows-alt" - }); - } - setVideoBox = (videoBox: VideoBox) => { this._videoBox = videoBox; }; private subView = (_type: CollectionViewType, renderProps: CollectionRenderProps) => { @@ -122,9 +71,8 @@ export class CollectionVideoView extends React.Component<FieldViewProps> { } render() { - trace(); return ( - <CollectionBaseView {...this.props} className="collectionVideoView-cont" onContextMenu={this.onContextMenu}> + <CollectionBaseView {...this.props} className="collectionVideoView-cont" > {this.subView} </CollectionBaseView>); } |
