From 98bd031db9c6f6ce1eb9688b19e898c67baca724 Mon Sep 17 00:00:00 2001 From: bob Date: Mon, 15 Jul 2019 18:17:45 -0400 Subject: better but not working. --- src/client/views/nodes/VideoBox.tsx | 104 ++++++++++++++++++++---------------- 1 file changed, 58 insertions(+), 46 deletions(-) (limited to 'src') diff --git a/src/client/views/nodes/VideoBox.tsx b/src/client/views/nodes/VideoBox.tsx index 66844cdd6..552d3f188 100644 --- a/src/client/views/nodes/VideoBox.tsx +++ b/src/client/views/nodes/VideoBox.tsx @@ -1,5 +1,5 @@ import React = require("react"); -import { action, IReactionDisposer, observable, reaction, trace, computed } from "mobx"; +import { action, IReactionDisposer, observable, reaction, trace, computed, runInAction } from "mobx"; import { observer } from "mobx-react"; import { makeInterface } from "../../../new_fields/Schema"; import { Cast, FieldValue, NumCast } from "../../../new_fields/Types"; @@ -44,29 +44,25 @@ export class VideoBox extends DocComponent(VideoD } } - @action public Play = () => { + @action public Play = (update: boolean = true) => { this.Playing = true; - this.player && this.player.play(); - this._youtubePlayer && this._youtubePlayer.playVideo(); + update && this.player && this.player.play(); + update && this._youtubePlayer && this._youtubePlayer.playVideo(); !this._playTimer && (this._playTimer = setInterval(this.updateTimecode, 500)); - this._youtubeSeekTo = false; this.updateTimecode(); } @action public Seek(time: number) { - if (this._youtubePlayer && !this.Playing) { - this._youtubeSeekTo = true; - this._youtubePlayer.seekTo(time); - } + this._youtubePlayer && !this.Playing && this._youtubePlayer.seekTo(time); } - @action public Pause = () => { + @action public Pause = (update: boolean = true) => { this.Playing = false; - this.player && this.player.pause(); - this._youtubePlayer && this._youtubePlayer.pauseVideo(); + update && this.player && this.player.pause(); + update && this._youtubePlayer && this._youtubePlayer.pauseVideo(); this._playTimer && clearInterval(this._playTimer); this._playTimer = undefined; - this._youtubeSeekTo = false; + this.updateTimecode(); } @action public FullScreen() { @@ -77,15 +73,19 @@ export class VideoBox extends DocComponent(VideoD @action updateTimecode = () => { + let ctime = this._youtubePlayer.getCurrentTime(); + let otime = this.lastyoutube ? (this.lastyoutube as any).getCurrentTime() : -1; + console.log("Setting " + ctime + " " + otime); this.player && (this.props.Document.curPage = this.player.currentTime); this._youtubePlayer && (this.props.Document.curPage = this._youtubePlayer.getCurrentTime()); } + static _staticCounter: number = 0; + counter: number = -1; + _startupTime: number = -1; componentDidMount() { if (this.props.setVideoBox) this.props.setVideoBox(this); - let field = Cast(this.Document[this.props.fieldKey], VideoField); - let videoid = field && field.url.href.indexOf("youtube") !== -1 ? ((arr: string[]) => arr[arr.length - 1])(field.url.href.split("/")) : ""; - if (videoid) { + if (this.youtubeVideoId) { let youtubeaspect = 400 / 315; var nativeWidth = FieldValue(this.Document.nativeWidth, 0); var nativeHeight = FieldValue(this.Document.nativeHeight, 0); @@ -94,47 +94,28 @@ export class VideoBox extends DocComponent(VideoD this.Document.nativeHeight = this.Document.nativeWidth / youtubeaspect; this.Document.height = FieldValue(this.Document.width, 0) / youtubeaspect; } - this._youtubePlayer = new YT.Player(`${videoid}-player`, { - height: `${NumCast(this.props.Document.height)}`, - width: `${NumCast(this.props.Document.width)}`, - videoId: videoid.toString(), - playerVars: { 'controls': VideoBox._showControls ? 1 : 0 }, - events: { - 'onStateChange': this.onYoutubePlayerStateChange, - 'onReady': this.onYoutubePlayerReady, - } - }); this._reactionDisposer = reaction(() => this.props.Document.curPage, () => this.Seek(this.Document.curPage || 0), { fireImmediately: true }); 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`)!); - // iframe.on("load", function () { - // iframe.contents().find("head") - // .append($("")); - // }) } } - @action - onYoutubePlayerStateChange = (event: any) => { - console.log("event.data = " + event.data); - this.Playing = event.data == YT.PlayerState.PLAYING; - if (this._youtubeSeekTo && this.Playing) { - this._youtubePlayer.pauseVideo(); - this._youtubeSeekTo = false; - } else this.Playing && !this._playTimer && (this._playTimer = setInterval(this.updateTimecode, 500)); - event.data === YT.PlayerState.PAUSED && this._playTimer && clearInterval(this._playTimer); - } - _youtubeSeekTo = false; @action onYoutubePlayerReady = (event: any) => { - this.Playing = false; this._youtubePlayer && (this._youtubePlayer.getIframe().style.pointerEvents = "none"); if (this.Document.curPage) { - this.Seek(this.Document.curPage); - this._youtubeSeekTo = true; + this.Playing = false; + if (this._startupTime !== -1) { + this.Seek(this.Document.curPage); + } + else { + let cpage = this.Document.curPage; + this.Pause(); + this._startupTime = cpage; + this._youtubePlayer.seekTo(cpage); + } } } @@ -183,12 +164,43 @@ export class VideoBox extends DocComponent(VideoD ; } + times = 0; + lastyoutube = undefined; + @action load = () => { + let x = ++this.times; + console.log("LOADED " + x + " times = " + this.times); + let onYoutubePlayerStateChange = (event: any) => runInAction(() => { + console.log("STATE + " + event.data + " times = " + this.times + " " + x); + //if (this.times !== x) return; + if (event.data === YT.PlayerState.UNSTARTED || event.data === YT.PlayerState.BUFFERING) + return; + if (this._startupTime !== -1) { + this._startupTime = -1; + if (event.data === YT.PlayerState.PLAYING) this.Pause(); + } + if (event.data == YT.PlayerState.PLAYING && !this.Playing) this.Play(false); + if (event.data == YT.PlayerState.PAUSED && this.Playing) this.Pause(false); + }); + let cpage = NumCast(this.Document.curPage); + this._startupTime = cpage; + this.lastyoutube = this._youtubePlayer; + this._youtubePlayer = new YT.Player(`${this.youtubeVideoId + this.counter}-player`, { + events: { + 'onReady': this.onYoutubePlayerReady, + 'onStateChange': onYoutubePlayerStateChange + } + }); + } + @computed get youtubeContent() { + this.counter = VideoBox._staticCounter++; let style = "videoBox-content-YouTube" + (this._fullScreen ? "-fullScreen" : ""); - return
; + return ; } render() { diff --git a/src/new_fields/Doc.ts b/src/new_fields/Doc.ts index c5f9e7adf..0d9fa540f 100644 --- a/src/new_fields/Doc.ts +++ b/src/new_fields/Doc.ts @@ -312,16 +312,20 @@ export namespace Doc { } export function UpdateDocumentExtensionForField(doc: Doc, fieldKey: string) { - if (doc[fieldKey + "_ext"] === undefined) { + let extensionDoc = doc[fieldKey + "_ext"]; + if (extensionDoc === undefined) { setTimeout(() => { let docExtensionForField = new Doc(doc[Id] + fieldKey, true); docExtensionForField.title = "Extension of " + doc.title + "'s field:" + fieldKey; + docExtensionForField.extendsDoc = doc; let proto: Doc | undefined = doc; while (proto && !Doc.IsPrototype(proto)) { proto = proto.proto; } (proto ? proto : doc)[fieldKey + "_ext"] = docExtensionForField; }, 0); + } else if (extensionDoc instanceof Doc && extensionDoc.extendsDoc === undefined) { + setTimeout(() => (extensionDoc as Doc).extendsDoc = doc, 0); } } export function MakeAlias(doc: Doc) { -- cgit v1.2.3-70-g09d2 From 533c48010ca668a944962bd61cd65115fc5a6fa6 Mon Sep 17 00:00:00 2001 From: Sam Wilkins Date: Tue, 16 Jul 2019 12:04:21 -0400 Subject: linter and error fixes --- src/client/documents/Documents.ts | 2 +- src/client/views/InkingControl.tsx | 4 ++-- src/client/views/Main.tsx | 2 +- src/client/views/collections/CollectionDockingView.tsx | 4 ++-- src/client/views/collections/CollectionTreeView.tsx | 2 +- src/client/views/nodes/ImageBox.tsx | 2 +- src/client/views/nodes/VideoBox.tsx | 4 ++-- src/client/views/nodes/WebBox.tsx | 2 +- src/client/views/search/SearchBox.tsx | 2 +- 9 files changed, 12 insertions(+), 12 deletions(-) (limited to 'src') diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts index ada9f3610..177810444 100644 --- a/src/client/documents/Documents.ts +++ b/src/client/documents/Documents.ts @@ -98,7 +98,7 @@ export namespace Docs { type LayoutSource = { LayoutString: () => string }; type CollectionLayoutSource = { LayoutString: (fieldStr: string, fieldExt?: string) => string }; - type CollectionViewType = [CollectionLayoutSource, string, string?] + type CollectionViewType = [CollectionLayoutSource, string, string?]; type PrototypeTemplate = { layout: { view: LayoutSource, diff --git a/src/client/views/InkingControl.tsx b/src/client/views/InkingControl.tsx index c7f7bdb66..1910e409b 100644 --- a/src/client/views/InkingControl.tsx +++ b/src/client/views/InkingControl.tsx @@ -1,5 +1,5 @@ import { observable, action, computed, runInAction } from "mobx"; -import { ColorResult } from 'react-color'; +import { ColorState } from 'react-color'; import React = require("react"); import { observer } from "mobx-react"; import "./InkingControl.scss"; @@ -41,7 +41,7 @@ export class InkingControl extends React.Component { } @undoBatch - switchColor = action((color: ColorResult): void => { + switchColor = action((color: ColorState): void => { this._selectedColor = color.hex + (color.rgb.a !== undefined ? this.decimalToHexString(Math.round(color.rgb.a * 255)) : "ff"); if (InkingControl.Instance.selectedTool === InkTool.None) { if (MainOverlayTextBox.Instance.SetColor(color.hex)) return; diff --git a/src/client/views/Main.tsx b/src/client/views/Main.tsx index 80399e24b..86578af3e 100644 --- a/src/client/views/Main.tsx +++ b/src/client/views/Main.tsx @@ -26,7 +26,7 @@ let swapDocs = async () => { } CurrentUserUtils.UserDocument.linkManagerDoc = undefined; } -} +}; (async () => { const info = await CurrentUserUtils.loadCurrentUser(); diff --git a/src/client/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx index 1069ebbdb..a193ff677 100644 --- a/src/client/views/collections/CollectionDockingView.tsx +++ b/src/client/views/collections/CollectionDockingView.tsx @@ -301,7 +301,7 @@ export class CollectionDockingView extends React.Component { CollectionDockingView.Instance._ignoreStateChange = JSON.stringify(CollectionDockingView.Instance._goldenLayout.toConfig()); - this.stateChanged() + this.stateChanged(); }, 10); } } @@ -606,7 +606,7 @@ export class DockedFrameRenderer extends React.Component { addDocTab={this.addDocTab} ContainingCollectionView={undefined} zoomToScale={emptyFunction} - getScale={returnOne} /> + getScale={returnOne} />; } @computed get content() { diff --git a/src/client/views/collections/CollectionTreeView.tsx b/src/client/views/collections/CollectionTreeView.tsx index 0196fecff..c212cc97c 100644 --- a/src/client/views/collections/CollectionTreeView.tsx +++ b/src/client/views/collections/CollectionTreeView.tsx @@ -153,7 +153,7 @@ class TreeView extends React.Component { let docList = Cast(this.resolvedDataDoc[this.fieldKey], listSpec(Doc)); let doc = Cast(this.resolvedDataDoc[this.fieldKey], Doc); let isDoc = doc instanceof Doc || docList; - let c + let c; return
this._collapsed = !this._collapsed)} style={{ color: StrCast(this.props.document.color, "black"), opacity: 0.4 }}> {}
; diff --git a/src/client/views/nodes/ImageBox.tsx b/src/client/views/nodes/ImageBox.tsx index 73ae8955d..1df955f1f 100644 --- a/src/client/views/nodes/ImageBox.tsx +++ b/src/client/views/nodes/ImageBox.tsx @@ -33,7 +33,7 @@ export const pageSchema = createSchema({ curPage: "number", }); -interface window { +interface Window { MediaRecorder: MediaRecorder; } diff --git a/src/client/views/nodes/VideoBox.tsx b/src/client/views/nodes/VideoBox.tsx index 66844cdd6..e90efb31c 100644 --- a/src/client/views/nodes/VideoBox.tsx +++ b/src/client/views/nodes/VideoBox.tsx @@ -108,7 +108,7 @@ export class VideoBox extends DocComponent(VideoD 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 }) + }, { fireImmediately: true }); // let iframe = $(document.getElementById(`${videoid}-player`)!); // iframe.on("load", function () { // iframe.contents().find("head") @@ -120,7 +120,7 @@ export class VideoBox extends DocComponent(VideoD @action onYoutubePlayerStateChange = (event: any) => { console.log("event.data = " + event.data); - this.Playing = event.data == YT.PlayerState.PLAYING; + this.Playing = event.data === YT.PlayerState.PLAYING; if (this._youtubeSeekTo && this.Playing) { this._youtubePlayer.pauseVideo(); this._youtubeSeekTo = false; diff --git a/src/client/views/nodes/WebBox.tsx b/src/client/views/nodes/WebBox.tsx index 96b972a1c..f0a9ec6d8 100644 --- a/src/client/views/nodes/WebBox.tsx +++ b/src/client/views/nodes/WebBox.tsx @@ -19,7 +19,7 @@ export function onYouTubeIframeAPIReady() { }); } // must cast as any to set property on window -const _global = (window /* browser */ || global /* node */) as any +const _global = (window /* browser */ || global /* node */) as any; _global.onYouTubeIframeAPIReady = onYouTubeIframeAPIReady; function onPlayerReady(event: any) { diff --git a/src/client/views/search/SearchBox.tsx b/src/client/views/search/SearchBox.tsx index 3830a6d16..ec778b346 100644 --- a/src/client/views/search/SearchBox.tsx +++ b/src/client/views/search/SearchBox.tsx @@ -282,7 +282,7 @@ export class SearchBox extends React.Component { @computed get resFull() { - console.log(this._numTotalResults) + console.log(this._numTotalResults); return this._numTotalResults <= 8; } -- cgit v1.2.3-70-g09d2 From 78faa73f1d4a315a3d76613bdcbb894e2428ee10 Mon Sep 17 00:00:00 2001 From: yipstanley Date: Tue, 16 Jul 2019 12:06:31 -0400 Subject: rich text bar link dragging fixed --- src/client/util/TooltipTextMenu.tsx | 1 + 1 file changed, 1 insertion(+) (limited to 'src') diff --git a/src/client/util/TooltipTextMenu.tsx b/src/client/util/TooltipTextMenu.tsx index 9ba339285..ba3543b72 100644 --- a/src/client/util/TooltipTextMenu.tsx +++ b/src/client/util/TooltipTextMenu.tsx @@ -238,6 +238,7 @@ export class TooltipTextMenu { this.linkDrag.onpointerdown = (e: PointerEvent) => { let dragData = new DragManager.LinkDragData(this.editorProps.Document); dragData.dontClearTextBox = true; + e.stopPropagation(); DragManager.StartLinkDrag(this.linkDrag!, dragData, e.clientX, e.clientY, { handlers: { -- cgit v1.2.3-70-g09d2 From b10e8e0c22bdc27e39c365cae1a1592bc714b547 Mon Sep 17 00:00:00 2001 From: Sam Wilkins Date: Tue, 16 Jul 2019 12:23:10 -0400 Subject: linter --- src/client/views/nodes/VideoBox.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) (limited to 'src') diff --git a/src/client/views/nodes/VideoBox.tsx b/src/client/views/nodes/VideoBox.tsx index 3ade3396e..972e6875d 100644 --- a/src/client/views/nodes/VideoBox.tsx +++ b/src/client/views/nodes/VideoBox.tsx @@ -157,8 +157,8 @@ export class VideoBox extends DocComponent(VideoD let iframe = e.target; let onYoutubePlayerStateChange = (event: any) => runInAction(() => { console.log("Event " + event.data); - if (event.data == YT.PlayerState.PLAYING && !this.Playing) this.Play(false); - if (event.data == YT.PlayerState.PAUSED && this.Playing) this.Pause(false); + if (event.data === YT.PlayerState.PLAYING && !this.Playing) this.Play(false); + if (event.data === YT.PlayerState.PAUSED && this.Playing) this.Pause(false); }); let onYoutubePlayerReady = (event: any) => { console.log("READY!"); @@ -169,7 +169,7 @@ export class VideoBox extends DocComponent(VideoD let interactive = InkingControl.Instance.selectedTool === InkTool.None && this.props.isSelected() && !DocumentDecorations.Instance.Interacting; iframe.style.pointerEvents = interactive ? "all" : "none"; }, { fireImmediately: true }); - } + }; this._youtubePlayer = new YT.Player(`${this.youtubeVideoId + this._youtubeIframeId}-player`, { events: { 'onReady': onYoutubePlayerReady, -- cgit v1.2.3-70-g09d2