authoring/play mode and timeline overview

1 files changed, 33 insertions, 0 deletions

diff --git a/src/client/views/animationtimeline/TimelineOverview.tsx b/src/client/views/animationtimeline/TimelineOverview.tsx
new file mode 100644
index 000000000..0e10e655d
--- /dev/null
+++ b/src/client/views/animationtimeline/TimelineOverview.tsx
@@ -0,0 +1,33 @@
+import * as React from "react"; 
+import {observable} from "mobx"; 
+import {observer} from "mobx-react";
+import "./TimelineOverview.scss"; 
+
+
+
+interface TimelineOverviewProps{
+    totalLength: number; 
+    visibleLength:number; 
+    visibleStart:number;
+    changeCurrentBarX: (x:number) => any; 
+}
+
+
+export class TimelineOverview extends React.Component<TimelineOverviewProps>{
+
+
+    render(){
+        return(
+            <div key="timeline-overview-container" className="timeline-overview-container">
+                <div key="timeline-overview-visible" className="timeline-overview-visible" style={{left:`${this.props.visibleStart}px`, width:`${this.props.visibleLength}px`}}></div>
+                <div key="timeline-overview-scrubber-container" className="timeline-overview-scrubber-container">
+                    <div key="timeline-overview-scrubber-head" className="timeline-overview-scrubber-head"></div>
+                    <div key="timeline-overview-scrubber-tail" className="tiemline-overview-scrubber-tail"></div>
+                </div>
+            </div>
+        ); 
+    }
+
+}
+
+