playmode / authoring mode

3 files changed, 57 insertions, 133 deletions

diff --git a/src/client/views/animationtimeline/Timeline.scss b/src/client/views/animationtimeline/Timeline.scss
index 47f448adb..e5d898502 100644
--- a/src/client/views/animationtimeline/Timeline.scss
+++ b/src/client/views/animationtimeline/Timeline.scss
@@ -6,72 +6,24 @@
     height: 30px; 
     width: 100px; 
 }
-.flyout-container{
-    background-color: transparent; 
-    position:absolute; 
-            
-    z-index:9999; 
-    height: 150px; 
-    width: 150px; 
 
-    .flyout{
-        background-color: transparent; 
-        transform: rotate(180deg); 
-        left:0px; 
-        top:0px; 
-        width: 100%; 
-        height: 100%; 
-    }
-    .input-container{
-        position: absolute; 
-        right:0px; 
-        top: 30px; 
-        width: 70px; 
-        input{
-            width: 100%; 
-        }
+.timeline-toolbox{
+     position:absolute; 
+    display:flex;
+    align-items: flex-start; 
+    flex-direction: row;  
+    top: 10px;
+    div{
+        margin-left:10px; 
     }
-    .text-container{
-        position:absolute; 
-        top:30px; 
-        left:0px; 
-        color:white
-    }
-}
-
-.placement-highlight{
-    background-color:blue; 
-    transform: translate(0px, 0px); 
-    transition: width 1000ms ease-in-out; 
-    transition: height 1000ms ease-in-out;
-    position: absolute; 
 }
-
 .timeline-container{
     width:100%;
     height:300px; 
     position:absolute;
     background-color: $light-color-secondary;
     box-shadow: 0px 10px 20px; 
-    //transition: transform 1000ms ease-in-out; 
-    
-    .toolbox{
-        position:absolute; 
-        width: 100%;   
-        top: 10px; 
-        left: 20px; 
-        div{
-            float:left; 
-            margin-left: 10px; 
-            position:relative; 
-            .overview{
-                width: 200px; 
-                height: 100%; 
-                background-color: black; 
-                position:absolute; 
-            }
-        }
-    }
+
     .info-container{ 
         margin-top: 50px; 
         right:20px; 
diff --git a/src/client/views/animationtimeline/Timeline.tsx b/src/client/views/animationtimeline/Timeline.tsx
index 052e6e925..c8f11db5b 100644
--- a/src/client/views/animationtimeline/Timeline.tsx
+++ b/src/client/views/animationtimeline/Timeline.tsx
@@ -5,7 +5,7 @@ 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, StrCast } from "../../../new_fields/Types";
+import { Cast, NumCast, FieldValue, 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';
@@ -82,51 +82,48 @@ export class Timeline extends CollectionSubView(Document) {
         return Cast(this.props.Document[this.props.fieldKey], listSpec(Doc)) as List<Doc>;
     }
 
-    @computed
-    private get inks(){
-        if (this.props.Document.data_ext){        
-            let data_ext = Cast(this.props.Document.data_ext, Doc) as Doc; 
-            let ink = Cast(data_ext.ink, InkField) as InkField; 
-            if (ink){
-                return ink.inkData; 
-            }
-        }
+    componentWillMount() {
+        this.props.Document.isAnimating ? this.props.Document.isAnimating = true : this.props.Document.isAnimating = false; 
     }
 
-  
     componentDidMount() {
         if (StrCast(this.props.Document.type) === "video") {
             console.log("ran");
             console.log(this.props.Document.duration);
             if (this.props.Document.duration) {
                 this._time = Math.round(NumCast(this.props.Document.duration)) * 1000;
-
                 reaction(() => {
                     return NumCast(this.props.Document.curPage);
                 }, curPage => {
                     this.changeCurrentBarX(curPage * this._tickIncrement / this._tickSpacing);
                 });
-
             }
 
         }
         runInAction(() => {
-
             reaction(() => {
-                return this._time;
-            }, () => {
-                this._ticks = [];
-                for (let i = 0; i < this._time;) {
-                    this._ticks.push(i);
-                    i += this._tickIncrement;
-                }
-                let trackbox = this._trackbox.current!;
-                this._boxLength = this._tickIncrement / 1000 * this._tickSpacing * this._ticks.length;
-                trackbox.style.width = `${this._boxLength}`;
-                this._scrubberbox.current!.style.width = `${this._boxLength}`;
-            }, { fireImmediately: true });
+                return this.props.Document.isAnimating; 
+            }, async isAnimating => {
+               if (isAnimating){
+                   this._ticks = [];
+                    for (let i = 0; i < this._time;) {
+                        this._ticks.push(i);
+                        i += this._tickIncrement;
+                    }
+                    observe(this._trackbox, change => {if (change.type === "update"){
+                        if (this.props.Document.isAnimating){
+                             let trackbox = this._trackbox.current!;
+                            this._boxLength = this._tickIncrement / 1000 * this._tickSpacing * this._ticks.length;
+                            trackbox.style.width = `${this._boxLength}`;
+                            this._scrubberbox.current!.style.width = `${this._boxLength}`;
+                        }
+                    }}); 
+               }
+                    
+            });
         });
     }
+   
 
     @action
     changeCurrentBarX = (x: number) => {
@@ -346,73 +343,47 @@ export class Timeline extends CollectionSubView(Document) {
     }
 
     render() {
-        return (
-            <div style={{ left: "0px", top: "0px", position: "absolute", width: "100%", transform: "translate(0px, 0px)" }} ref={this._timelineWrapper}>
-                <button className="minimize" onClick={this.minimize}>Minimize</button>
-                <div className="timeline-container" style={{ height: `${this._containerHeight}px`, left: "0px", top: "30px" }} ref={this._timelineContainer} onPointerDown={this.onTimelineDown} onContextMenu={this.timelineContextMenu}>
-                    <div className="toolbox">
-                        <div onClick={this.windBackward}> <FontAwesomeIcon icon={faBackward} size="2x" /> </div>
-                        <div onClick={this.onPlay}> <FontAwesomeIcon icon={this._playButton} size="2x" /> </div>
-                        <div onClick={this.windForward}> <FontAwesomeIcon icon={faForward} size="2x" /> </div>
+        let timeline:JSX.Element[] = []; 
+        BoolCast(this.props.Document.isAnimating) ? timeline = [
+            <div key="timeline_wrapper" style={{ 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_toolbox" className="timeline-toolbox">
+                        <div key ="timeline_windBack" onClick={this.windBackward}> <FontAwesomeIcon icon={faBackward} size="2x" /> </div>
+                        <div key ="timeline_play" onClick={this.onPlay}> <FontAwesomeIcon icon={this._playButton} size="2x" /> </div>
+                        <div key = "timeline_windForward" onClick={this.windForward}> <FontAwesomeIcon icon={faForward} size="2x" /> </div>
                     </div>
-                    <div className="info-container" ref={this._infoContainer}>
-                        <div className="scrubberbox" ref={this._scrubberbox} onClick={this.onScrubberClick}>
+                    <div key ="timeline_info"className="info-container" ref={this._infoContainer}>
+                        <div key="timeline_scrubberbox" className="scrubberbox" ref={this._scrubberbox} onClick={this.onScrubberClick}>
                             {this._ticks.map(element => {
                                 return <div className="tick" style={{ transform: `translate(${element / 1000 * this._tickSpacing}px)`, position: "absolute", pointerEvents: "none" }}> <p>{this.toTime(element)}</p></div>;
                             })}
                         </div>
-                        <div className="scrubber" ref={this._scrubber} onPointerDown={this.onScrubberDown} style={{ transform: `translate(${this._currentBarX}px)` }}>
-                            <div className="scrubberhead"></div>
+                        <div key="timeline_scrubber" className="scrubber" ref={this._scrubber} onPointerDown={this.onScrubberDown} style={{ transform: `translate(${this._currentBarX}px)` }}>
+                            <div key="timeline_scrubberhead" className="scrubberhead"></div>
                         </div>
-                        <div className="trackbox" ref={this._trackbox} onPointerDown={this.onPanDown}>
+                        <div key="timeline_trackbox" className="trackbox" ref={this._trackbox} onPointerDown={this.onPanDown}>
                             {DocListCast(this.children).map(doc => <Track node={doc} currentBarX={this._currentBarX} changeCurrentBarX={this.changeCurrentBarX} setFlyout={this.getFlyout} transform={this.props.ScreenToLocalTransform()} collection = {this.props.Document}/>)}
                         </div>
                     </div>
-                    <div className="title-container" ref={this._titleContainer}>
+                    <div key="timeline_title"className="title-container" ref={this._titleContainer}>
                         {DocListCast(this.children).map(doc => <div className="datapane"><p>{doc.title}</p></div>)}
                     </div>
-                    <div onPointerDown={this.onResizeDown}>
+                    <div key="timeline_resize" onPointerDown={this.onResizeDown}>
                         <FontAwesomeIcon className="resize" icon={faGripLines} />
                     </div>
                 </div>
             </div>
-        );
-    }
-
-}
-
-
-interface TimelineOverviewProps {
-    currentBarX: number;
-}
-
-class TimelineOverview extends React.Component<TimelineOverviewProps>{
-
-    componentWillMount() {
-
-    }
-
-    render() {
-        return (
-            <div className="overview">
-                <div className="container">
-                    <div className="scrubber">
-                        <div className="scrubberhead"></div>
-                    </div>
-                </div>
-            </div>
-        );
-    }
-}
-
+         ] : timeline = [
+            <div key="timeline_toolbox" className="timeline-toolbox">
+                <div key="timeline_windBack" onClick={this.windBackward}> <FontAwesomeIcon icon={faBackward} size="2x" /> </div>
+                <div key =" timeline_play" onClick={this.onPlay}> <FontAwesomeIcon icon={this._playButton} size="2x" /> </div>
+                <div key="timeline_windForward" onClick={this.windForward}> <FontAwesomeIcon icon={faForward} size="2x" /> </div>
+            </div>];
 
-class TimelineZoom extends React.Component {
-    componentDidMount() {
-    }
-    render() {
         return (
             <div>
-
+                {timeline}
             </div>
         );
     }
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index a7b4f33db..95970cb81 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -107,7 +107,7 @@ const schema = createSchema({
     nativeHeight: "number",
     backgroundColor: "string",
     opacity: "number",
-    hidden: "boolean"
+    hidden: "boolean", 
 });
 
 export const positionSchema = createSchema({
@@ -565,6 +565,7 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
         cm.addItem({ description: "Pin to Presentation", event: () => PresentationView.Instance.PinDoc(this.props.Document), icon: "map-pin" });
         cm.addItem({ description: BoolCast(this.props.Document.lockedPosition) ? "Unlock Position" : "Lock Position", event: this.toggleLockPosition, icon: BoolCast(this.props.Document.lockedPosition) ? "unlock" : "lock" });
         cm.addItem({ description: "Transcribe Speech", event: this.listen, icon: "microphone" });
+        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 makes: ContextMenuProps[] = [];
         makes.push({ description: this.props.Document.isBackground ? "Remove Background" : "Make Background", event: this.makeBackground, icon: BoolCast(this.props.Document.lockedPosition) ? "unlock" : "lock" });
         makes.push({ description: this.props.Document.isButton ? "Remove Button" : "Make Button", event: this.makeBtnClicked, icon: "concierge-bell" });