Timeline visibility

3 files changed, 36 insertions, 17 deletions

diff --git a/src/client/views/animationtimeline/Timeline.tsx b/src/client/views/animationtimeline/Timeline.tsx
index 10034263c..be1ae1773 100644
--- a/src/client/views/animationtimeline/Timeline.tsx
+++ b/src/client/views/animationtimeline/Timeline.tsx
@@ -4,15 +4,18 @@ import { CollectionSubView } from "../collections/CollectionSubView";
 import { Document, listSpec } from "../../../new_fields/Schema";
 import { observer } from "mobx-react";
 import { Track } from "./Track";
-import { observable, reaction, action, IReactionDisposer, computed, runInAction } from "mobx";
+import { observable, reaction, action, IReactionDisposer, computed, runInAction, observe } from "mobx";
 import { Cast, NumCast, StrCast, BoolCast } 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, faArrowUp, faArrowDown, faClock, faPauseCircle } from "@fortawesome/free-solid-svg-icons";
+import { faPlayCircle, faBackward, faForward, faGripLines, faArrowUp, faArrowDown, faClock, faPauseCircle, faEyeSlash } from "@fortawesome/free-solid-svg-icons";
 import { ContextMenuProps } from "../ContextMenuItem";
 import { ContextMenu } from "../ContextMenu";
 import { TimelineOverview } from "./TimelineOverview";
+import { playcustomapp } from "googleapis/build/src/apis/playcustomapp";
+import { FieldView, FieldViewProps } from "../nodes/FieldView";
+
 
 
 export interface FlyoutProps {
@@ -25,7 +28,7 @@ export interface FlyoutProps {
 
 
 @observer
-export class Timeline extends CollectionSubView(Document) {
+export class Timeline extends React.Component<FieldViewProps> {
 
     private readonly DEFAULT_CONTAINER_HEIGHT: number = 300;
     private readonly DEFAULT_TICK_SPACING: number = 50;
@@ -56,6 +59,7 @@ export class Timeline extends CollectionSubView(Document) {
     @observable private _time = 100000; //DEFAULT
     @observable private _ticks: number[] = [];
     @observable private _playButton = faPlayCircle; 
+    @observable private _timelineVisible = false; 
 
     @computed
     private get children(): List<Doc> {
@@ -74,6 +78,7 @@ export class Timeline extends CollectionSubView(Document) {
 
     componentWillMount() {
         this.props.Document.isAnimating ? this.props.Document.isAnimating = true : this.props.Document.isAnimating = false; 
+        document.addEventListener("contextmenu", (e) => {this.timelineContextMenu(e);});
         console.log(this._currentBarX); 
     }
 
@@ -86,7 +91,12 @@ export class Timeline extends CollectionSubView(Document) {
                 reaction(() => {
                     return NumCast(this.props.Document.curPage);
                 }, curPage => {
-                    this.changeCurrentBarX(curPage * this._tickIncrement / this._tickSpacing);
+                    if (!this._isPlaying) {
+                        this.changeCurrentBarX(curPage * this._tickIncrement / this._tickSpacing);
+                        this.props.Document.curPage = this._currentBarX; 
+                        this.play(); 
+                    }
+                   
                 });
             }
         }
@@ -123,6 +133,10 @@ export class Timeline extends CollectionSubView(Document) {
     onPlay = (e: React.MouseEvent) => {
         e.preventDefault(); 
         e.stopPropagation(); 
+        this.play(); 
+    }
+
+    play = () => {
         if (this._isPlaying) {
             this._isPlaying = false;
             this._playButton = faPlayCircle; 
@@ -143,6 +157,8 @@ export class Timeline extends CollectionSubView(Document) {
         }
     }
 
+
+
     @action
     windForward = (e: React.MouseEvent) => {
         e.preventDefault(); 
@@ -326,7 +342,7 @@ export class Timeline extends CollectionSubView(Document) {
         }
     }
 
-    timelineContextMenu = (e: React.MouseEvent): void => {
+    timelineContextMenu = (e:MouseEvent): void => {
         let subitems: ContextMenuProps[] = [];
         let timelineContainer = this._timelineWrapper.current!;
         subitems.push({
@@ -340,13 +356,17 @@ export class Timeline extends CollectionSubView(Document) {
         });
         subitems.push({
             description: this._isFrozen ? "Unfreeze Timeline" : "Freeze Timeline", event: action(() => {
-                if (this._isFrozen) {
-                    this._isFrozen = false;
-                } else {
-                    this._isFrozen = true;
-                }
+                this._isFrozen = !this._isFrozen; 
             }), icon: "thumbtack"
         });
+        subitems.push({
+            description: this._timelineVisible ? "Hide Timeline" : "Show Timeline", event: action(() => {
+                this._timelineVisible = !this._timelineVisible; 
+            }), icon: this._timelineVisible ? faEyeSlash : "eye"
+        }); 
+        subitems.push({ description: BoolCast(this.props.Document.isAnimating) ? "Enter Play Mode" : "Enter Authoring Mode", event: () => {
+            BoolCast(this.props.Document.isAnimating) ? this.props.Document.isAnimating = false : this.props.Document.isAnimating = true;}
+            , icon:BoolCast(this.props.Document.isAnimating) ? "play" : "edit"}); 
         ContextMenu.Instance.addItem({ description: "Timeline Funcs...", subitems: subitems, icon: faClock });
     }
 
@@ -364,10 +384,10 @@ export class Timeline extends CollectionSubView(Document) {
     }
     render() {
         return (
-            <div>
-                <div key="timeline_wrapper" style={{visibility: BoolCast(this.props.Document.isAnimating) ? "visible" :"hidden", left: "0px", top: "0px", position: "absolute", width: "100%", transform: "translate(0px, 0px)"}} ref={this._timelineWrapper}>
+            <div style={{visibility: this._timelineVisible ? "visible" : "hidden"}}>
+                <div key="timeline_wrapper" style={{visibility: BoolCast(this.props.Document.isAnimating && this._timelineVisible) ? "visible" :"hidden", left: "0px", top: "0px", position: "absolute", width: "100%", transform: "translate(0px, 0px)"}} ref={this._timelineWrapper}>
                     <button key="timeline_minimize" className="minimize" onClick={this.minimize}>Minimize</button>
-                    <div key="timeline_container" className="timeline-container" style={{ height: `${this._containerHeight}px`, left: "0px", top: "30px" }} ref={this._timelineContainer} onPointerDown={this.onTimelineDown} onContextMenu={this.timelineContextMenu}>
+                    <div key="timeline_container" className="timeline-container" style={{ height: `${this._containerHeight}px`, left: "0px", top: "30px" }} ref={this._timelineContainer} onPointerDown={this.onTimelineDown}>
                         {this.timelineToolBox(0.5)}
                         <div key ="timeline_info"className="info-container" ref={this._infoContainer}>
                             <div key="timeline_scrubberbox" className="scrubberbox" ref={this._scrubberbox} onClick={this.onScrubberClick}>
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
index d01e5cadc..d10150f30 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
@@ -742,7 +742,7 @@ export class CollectionFreeFormView extends CollectionSubView(PanZoomDocument) {
         }
         let docviews = docs.filter(doc => doc instanceof Doc).reduce((prev, doc) => {
             var page = NumCast(doc.page, -1);
-            if ((Math.abs(Math.round(page) - Math.round(curPage)) < 3) || page === -1) {
+          //  if ((Math.abs(Math.round(page) - Math.round(curPage)) < 3) || page === -1) {
                 let minim = BoolCast(doc.isMinimized);
                 if (minim === undefined || !minim) {
                     const pos = script ? this.getCalculatedPositions(script, { doc, index: prev.length, collection: this.Document, docs, state }) :
@@ -755,7 +755,7 @@ export class CollectionFreeFormView extends CollectionSubView(PanZoomDocument) {
                         bounds: (pos.x !== undefined && pos.y !== undefined) ? { x: pos.x, y: pos.y, z: pos.z, width: NumCast(pos.width), height: NumCast(pos.height) } : undefined
                     });
                 }
-            }
+           // }
             return prev;
         }, elements);
 
@@ -902,7 +902,7 @@ export class CollectionFreeFormView extends CollectionSubView(PanZoomDocument) {
                         <CollectionFreeFormRemoteCursors {...this.props} key="remoteCursors" />
                     </CollectionFreeFormViewPannableContents>
                 </MarqueeView>
-                <Timeline {...this.props} />
+                <Timeline {...this.props}/>
                 {this.overlayChildViews()}
                 <CollectionFreeFormOverlayView  {...this.props} {...this.getDocumentViewProps(this.props.Document)} />
             </div>
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index 28af39fb3..8d33c4570 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -570,7 +570,6 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
         subitems.push({ description: "Open Right Alias", event: () => this.props.addDocTab && this.props.addDocTab(Doc.MakeAlias(this.props.Document), this.dataDoc, "onRight"), icon: "caret-square-right" });
         subitems.push({ description: "Open Fields", event: this.fieldsClicked, icon: "layer-group" });
         cm.addItem({ description: "Open...", subitems: subitems, icon: "external-link-alt" });
-        cm.addItem({ description: BoolCast(this.props.Document.isAnimating) ? "Enter Play Mode" : "Enter Authoring Mode", event: () => {BoolCast(this.props.Document.isAnimating) ? this.props.Document.isAnimating = false : this.props.Document.isAnimating = true;}, icon:BoolCast(this.props.Document.isAnimating) ? "play" : "edit"}); 
         let existingMake = ContextMenu.Instance.findByDescription("Make...");
         let makes: ContextMenuProps[] = existingMake && "subitems" in existingMake ? existingMake.subitems : [];
         makes.push({ description: this.props.Document.isBackground ? "Remove Background" : "Make Background", event: this.makeBackground, icon: BoolCast(this.props.Document.lockedPosition) ? "unlock" : "lock" });