From 500126248d1bca1b32410e357a910d43a92f9e7a Mon Sep 17 00:00:00 2001 From: andrewdkim Date: Fri, 19 Jul 2019 17:16:07 -0400 Subject: video integration pt2 and bug fixes --- src/client/views/nodes/Timeline.scss | 17 ++++++++ src/client/views/nodes/Timeline.tsx | 80 ++++++++++++++++++++++++++---------- src/client/views/nodes/Track.tsx | 8 ++-- 3 files changed, 80 insertions(+), 25 deletions(-) (limited to 'src') diff --git a/src/client/views/nodes/Timeline.scss b/src/client/views/nodes/Timeline.scss index c1317b16c..6a95cd61b 100644 --- a/src/client/views/nodes/Timeline.scss +++ b/src/client/views/nodes/Timeline.scss @@ -151,4 +151,21 @@ width: 50px; left: calc(50% - 25px); } +} + + + +.overview{ + position: absolute; + height: 50px; + width: 200px; + background-color: black; + .container{ + position: absolute; + float: left 0px; + top: 25%; + height: 75%; + width: 100%; + background-color: grey; + } } \ No newline at end of file diff --git a/src/client/views/nodes/Timeline.tsx b/src/client/views/nodes/Timeline.tsx index 1b69e971c..a996b5bff 100644 --- a/src/client/views/nodes/Timeline.tsx +++ b/src/client/views/nodes/Timeline.tsx @@ -5,14 +5,17 @@ import { Document, listSpec} from "../../../new_fields/Schema"; import { observer } from "mobx-react"; import { Track } from "./Track"; import { observable, reaction, action, IReactionDisposer, observe, IObservableArray, computed, toJS, Reaction, IObservableObject, trace, autorun, runInAction } from "mobx"; -import { Cast, NumCast, FieldValue } from "../../../new_fields/Types"; +import { Cast, NumCast, FieldValue, StrCast } from "../../../new_fields/Types"; import { List } from "../../../new_fields/List"; import { Doc, DocListCast } from "../../../new_fields/Doc"; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { faPlayCircle, faBackward, faForward, faGripLines } from "@fortawesome/free-solid-svg-icons"; +import { faPlayCircle, faBackward, faForward, faGripLines, faArrowUp, faArrowDown, faClock } from "@fortawesome/free-solid-svg-icons"; import { ContextMenuProps } from "../ContextMenuItem"; import { ContextMenu } from "../ContextMenu"; import { DocumentManager } from "../../util/DocumentManager"; +import { VideoBox } from "./VideoBox"; +import { VideoField } from "../../../new_fields/URLField"; +import { CollectionVideoView } from "../collections/CollectionVideoView"; export interface FlyoutProps { @@ -48,21 +51,32 @@ export class Timeline extends CollectionSubView(Document) { @observable private _currentBarX: number = 0; @observable private _windSpeed: number = 1; - @observable private _isPlaying: boolean = false; - @observable private _isFrozen: boolean = false; + @observable private _isPlaying: boolean = false; //scrubber playing + @observable private _isFrozen: boolean = false; //timeline freeze @observable private _boxLength: number = 0; @observable private _containerHeight: number = this.DEFAULT_CONTAINER_HEIGHT; @observable private _time = 100000; //DEFAULT @observable private _ticks: number[] = []; @observable private flyoutInfo:FlyoutProps = {x: 0, y: 0, display: "none", regiondata: new Doc(), regions: new List()}; -@observable private _resizing = ""; @computed - private get children(){ + private get children():List{ + let extendedDocument = ["image", "video", "pdf"].includes(StrCast(this.props.Document.type)); + if (extendedDocument) { + if (this.props.Document.data_ext) { + return Cast((Cast(this.props.Document.data_ext, Doc) as Doc).annotations, listSpec(Doc)) as List; + } else { + return new List(); + } + } return Cast(this.props.Document[this.props.fieldKey], listSpec(Doc)) as List; } componentDidMount() { + if (StrCast(this.props.Document.type) === "video") { + let dv = DocumentManager.Instance.getDocumentView(this.props.Document); + console.log(toJS(dv)); + } runInAction(() => { reaction(() => { return this._time; @@ -80,6 +94,7 @@ export class Timeline extends CollectionSubView(Document) { } componentDidUpdate() { + } @action @@ -205,8 +220,6 @@ export class Timeline extends CollectionSubView(Document) { @action onTimelineDown = (e: React.PointerEvent) => { e.preventDefault(); - this._resizing = e.currentTarget.id; - console.log(this._resizing); if (e.nativeEvent.which === 1 && !this._isFrozen){ document.addEventListener("pointermove", this.onTimelineMove); document.addEventListener("pointerup", () => { document.removeEventListener("pointermove", this.onTimelineMove);}); @@ -251,6 +264,7 @@ export class Timeline extends CollectionSubView(Document) { } + private _freezeText ="Freeze Timeline"; timelineContextMenu = (e: React.MouseEvent): void => { let subitems: ContextMenuProps[] = []; @@ -262,22 +276,26 @@ export class Timeline extends CollectionSubView(Document) { timelineContainer.style.top = "0px"; timelineContainer.style.transition = "none"; } - - }), icon: "pinterest" }); + }), icon: faArrowUp }); subitems.push({ - description: "Pin to Bottom", event: action(() => { + description: "Pin to Bottom", event: action(() => { + console.log(this.props.Document.y); + if (!this._isFrozen){ timelineContainer.style.transform = `translate(0px, ${e.pageY - this._containerHeight}px)`; } - }), icon: "pinterest" - }); + }), icon: faArrowDown}); subitems.push({ - description: "Freeze Timeline", event: action(() => { - this._isFrozen = true; - }), icon: "thumbtack" - - }); - ContextMenu.Instance.addItem({ description: "Timeline Funcs...", subitems: subitems }); + description: this._freezeText, event: action(() => { + if (this._isFrozen){ + this._isFrozen = false; + this._freezeText = "Freeze Timeline"; + } else { + this._isFrozen = true; + this._freezeText = "Unfreeze Timeline"; + } + }), icon: "thumbtack" }); + ContextMenu.Instance.addItem({ description: "Timeline Funcs...", subitems: subitems, icon: faClock}); } @@ -294,11 +312,12 @@ export class Timeline extends CollectionSubView(Document) {
- + {/* */}
+
@@ -333,8 +352,27 @@ interface TimelineFlyoutProps { } -class TimelineOverview extends React.Component{ +interface TimelineOverviewProps { + currentBarX : number; +} + +class TimelineOverview extends React.Component{ + + componentWillMount(){ + + } + render() { + return ( +
+
+
+
+
+
+
+ ); + } } class TimelineFlyout extends React.Component{ diff --git a/src/client/views/nodes/Track.tsx b/src/client/views/nodes/Track.tsx index d48abc10f..4ed2ded85 100644 --- a/src/client/views/nodes/Track.tsx +++ b/src/client/views/nodes/Track.tsx @@ -115,9 +115,9 @@ export class Track extends React.Component { let rightkf: (Doc | undefined) = this.calcMinRight(region!); //right keyframe, if it exists let currentkf: (Doc | undefined) = this.calcCurrent(region!); //if the scrubber is on top of the keyframe - console.log(currentkf); - console.log(leftkf); - console.log(rightkf); + //console.log(currentkf); + // console.log(leftkf); + // console.log(rightkf); if (currentkf){ this.applyKeys(currentkf.key as Doc); } else { @@ -187,7 +187,7 @@ export class Track extends React.Component { let compTime = this.props.currentBarX; if (ref){ compTime = NumCast(ref.time); - console.log(compTime); + //console.log(compTime); } if (NumCast(kf.time) < compTime && NumCast(kf.time) > NumCast(time)) { leftKf = kf; -- cgit v1.2.3-70-g09d2