From 5ee47fa3533c769364c91561a0be5ee388f855d3 Mon Sep 17 00:00:00 2001 From: Bob Zeleznik Date: Fri, 12 Jul 2019 23:49:37 -0400 Subject: fixed resizing youtube videos. changed dockingview to not call setupGoldenLayout on dropping or closing a tab. --- src/client/views/collections/CollectionDockingView.tsx | 7 ++++++- src/client/views/nodes/VideoBox.tsx | 5 +++-- 2 files changed, 9 insertions(+), 3 deletions(-) (limited to 'src/client') diff --git a/src/client/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx index 34b8eb8e1..fe8288b28 100644 --- a/src/client/views/collections/CollectionDockingView.tsx +++ b/src/client/views/collections/CollectionDockingView.tsx @@ -298,7 +298,10 @@ export class CollectionDockingView extends React.Component { if (this._flush) { this._flush = false; - setTimeout(() => this.stateChanged(), 10); + setTimeout(() => { + CollectionDockingView.Instance._ignoreStateChange = JSON.stringify(CollectionDockingView.Instance._goldenLayout.toConfig()); + this.stateChanged() + }, 10); } } @action @@ -342,6 +345,7 @@ export class CollectionDockingView extends React.Component { + CollectionDockingView.Instance._ignoreStateChange = JSON.stringify(CollectionDockingView.Instance._goldenLayout.toConfig()); this.stateChanged(); } @@ -357,6 +361,7 @@ export class CollectionDockingView extends React.Component; const VideoDocument = makeInterface(positionSchema, pageSchema); @@ -103,8 +104,8 @@ export class VideoBox extends DocComponent(VideoD } }); this._reactionDisposer = reaction(() => this.props.Document.curPage, () => this.Seek(this.Document.curPage || 0), { fireImmediately: true }); - this._youtubeReactionDisposer = reaction(() => [this.props.isSelected(), InkingControl.Instance.selectedTool], () => { - let interactive = InkingControl.Instance.selectedTool === InkTool.None && this.props.isSelected(); + this._youtubeReactionDisposer = reaction(() => [this.props.isSelected(), DocumentDecorations.Instance.Interacting, InkingControl.Instance.selectedTool], () => { + let interactive = InkingControl.Instance.selectedTool === InkTool.None && this.props.isSelected() && !DocumentDecorations.Instance.Interacting; this._youtubePlayer.getIframe().style.pointerEvents = interactive ? "all" : "none"; }, { fireImmediately: true }) // let iframe = $(document.getElementById(`${videoid}-player`)!); -- cgit v1.2.3-70-g09d2 From c74de5f402b7582e89aa7401e34bfc1c86a6dde6 Mon Sep 17 00:00:00 2001 From: Bob Zeleznik Date: Sat, 13 Jul 2019 11:20:32 -0400 Subject: fixed dragging event removal problem --- src/client/views/nodes/DocumentView.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'src/client') diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx index ce1149d6a..fcb38487d 100644 --- a/src/client/views/nodes/DocumentView.tsx +++ b/src/client/views/nodes/DocumentView.tsx @@ -375,9 +375,9 @@ export class DocumentView extends DocComponent(Docu onPointerMove = (e: PointerEvent): void => { if (!e.cancelBubble && this.active) { if (!this.props.Document.excludeFromLibrary && (Math.abs(this._downX - e.clientX) > 3 || Math.abs(this._downY - e.clientY) > 3)) { - document.removeEventListener("pointermove", this.onPointerMove); - document.removeEventListener("pointerup", this.onPointerUp); if (!e.altKey && !this.topMost && e.buttons === 1 && !BoolCast(this.props.Document.lockedPosition)) { + document.removeEventListener("pointermove", this.onPointerMove); + document.removeEventListener("pointerup", this.onPointerUp); this.startDragging(this._downX, this._downY, e.ctrlKey || e.altKey ? "alias" : undefined, this._hitExpander); } } -- cgit v1.2.3-70-g09d2 From dafd50255e9a748d6d1032561d208b633e97f424 Mon Sep 17 00:00:00 2001 From: Bob Zeleznik Date: Sat, 13 Jul 2019 15:58:55 -0400 Subject: tweaked audio box rendering. played with recording audio. --- src/client/documents/Documents.ts | 2 +- src/client/views/nodes/AudioBox.scss | 4 +++- src/client/views/nodes/AudioBox.tsx | 8 +++---- src/client/views/nodes/ImageBox.tsx | 41 ++++++++++++++++++++++++++++++++++++ 4 files changed, 48 insertions(+), 7 deletions(-) (limited to 'src/client') diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts index 2a3827782..8c0220a44 100644 --- a/src/client/documents/Documents.ts +++ b/src/client/documents/Documents.ts @@ -135,7 +135,7 @@ export namespace Docs { }], [DocumentType.AUDIO, { layout: { view: AudioBox }, - options: { height: 150 } + options: { height: 32 } }], [DocumentType.PDF, { layout: { view: PDFBox, collectionView: [CollectionPDFView, data, anno] as CollectionViewType }, diff --git a/src/client/views/nodes/AudioBox.scss b/src/client/views/nodes/AudioBox.scss index 704cdc31c..972966204 100644 --- a/src/client/views/nodes/AudioBox.scss +++ b/src/client/views/nodes/AudioBox.scss @@ -1,4 +1,6 @@ .audiobox-cont{ - height: 100%; + top:0; + max-height: 32px; + position: absolute; width: 100%; } \ No newline at end of file diff --git a/src/client/views/nodes/AudioBox.tsx b/src/client/views/nodes/AudioBox.tsx index be12dced3..be6ae630f 100644 --- a/src/client/views/nodes/AudioBox.tsx +++ b/src/client/views/nodes/AudioBox.tsx @@ -16,12 +16,10 @@ export class AudioBox extends React.Component { let path = field.url.href; return ( -
-
); } } \ No newline at end of file diff --git a/src/client/views/nodes/ImageBox.tsx b/src/client/views/nodes/ImageBox.tsx index 77e44b807..73ae8955d 100644 --- a/src/client/views/nodes/ImageBox.tsx +++ b/src/client/views/nodes/ImageBox.tsx @@ -21,6 +21,7 @@ import { FieldView, FieldViewProps } from './FieldView'; import "./ImageBox.scss"; import React = require("react"); import { RouteStore } from '../../../server/RouteStore'; +import { Docs } from '../../documents/Documents'; var requestImageSize = require('../../util/request-image-size'); var path = require('path'); @@ -32,6 +33,15 @@ export const pageSchema = createSchema({ curPage: "number", }); +interface window { + MediaRecorder: MediaRecorder; +} + +declare class MediaRecorder { + // whatever MediaRecorder has + constructor(e: any); +} + type ImageDocument = makeInterface<[typeof pageSchema, typeof positionSchema]>; const ImageDocument = makeInterface(pageSchema, positionSchema); @@ -138,12 +148,43 @@ export class ImageBox extends DocComponent(ImageD } } + recordAudioAnnotation = () => { + let gumStream: any; + let recorder: any; + let self = this; + navigator.mediaDevices.getUserMedia({ + audio: true + }).then(function (stream) { + gumStream = stream; + recorder = new MediaRecorder(stream); + recorder.ondataavailable = function (e: any) { + var url = URL.createObjectURL(e.data); + // upload to server with known URL + let audioDoc = Docs.Create.AudioDocument(url, { title: "audio test", x: NumCast(self.props.Document.x), y: NumCast(self.props.Document.y), width: 200, height: 32 }); + audioDoc.embed = true; + let audioAnnos = Cast(self.extensionDoc.audioAnnotations, listSpec(Doc)); + if (audioAnnos === undefined) { + self.extensionDoc.audioAnnotations = new List([audioDoc]); + } else { + audioAnnos.push(audioDoc); + } + }; + recorder.start(); + setTimeout(() => { + recorder.stop(); + + gumStream.getAudioTracks()[0].stop(); + }, 1000); + }); + } + specificContextMenu = (e: React.MouseEvent): void => { let field = Cast(this.Document[this.props.fieldKey], ImageField); if (field) { let url = field.url.href; let subitems: ContextMenuProps[] = []; subitems.push({ description: "Copy path", event: () => Utils.CopyText(url), icon: "expand-arrows-alt" }); + subitems.push({ description: "Record 1sec audio", event: this.recordAudioAnnotation, icon: "expand-arrows-alt" }); subitems.push({ description: "Rotate", event: action(() => { let proto = Doc.GetProto(this.props.Document); -- cgit v1.2.3-70-g09d2