make video position stick when switching between player and timeline view (part 1)

build/js/ox.ui.js

@@ -10521,8 +10521,6 @@ requires
 
     };
 
-    /**
-    */
     Ox.LargeTimeline = function(options, self) {
 
         var self = self || {},
@@ -10917,8 +10915,7 @@ requires
         return that;
 
     };
-    /**
-    */
+
     Ox.VideoEditor = function(options, self) {
 
         var self = self || {},
@@ -10979,9 +10976,9 @@ requires
                     left: self.sizes.player[i].left + 'px',
                     top: self.sizes.player[i].top + 'px'
                 })
-                .appendTo(that);
-            if (type == 'in' || type == 'out') {
-                self.$player[i].bindEvent({
+                .bindEvent(type == 'play' ? {
+                    playing: playing
+                } : {
                     change: function() {
                         goToPoint(type);
                     },
@@ -10989,7 +10986,7 @@ requires
                         setPoint(type);
                     }
                 })
-            }
+                .appendTo(that);
         });
         self.$player[0].bindEvent({
             playing: changePlayer,
@@ -11253,6 +11250,10 @@ requires
             });
         }
 
+        function playing(event, data) {
+            self.options.position = data.position;
+        }
+
         function playInToOut() {
             self.$player[0].playInToOut();
         }
@@ -11356,6 +11357,8 @@ requires
             if (key == 'width' || key == 'height') {
                 //Ox.print('XXXX setSizes', key, value, self.options.width, self.options.height)
                 setSizes();
+            } else if (key == 'position') {
+                self.$player[0].position(value);
             }
         };
 
@@ -11363,8 +11366,6 @@ requires
 
     };
 
-    /**
-    */
     Ox.VideoEditorPlayer = function(options, self) {
 
         var self = self || {},
@@ -11948,7 +11949,19 @@ requires
                     width: self.options.width + 'px'
                 })
                 .bindEvent({
-                    resize: resizeElement
+                    resize: resizeElement,
+                    key_shift_a: function() {
+                        that.toggleAnnotations();
+                    },
+                    key_shift_c: function() {
+                        that.toggleControls();
+                    },
+                    key_shift_s: function() {
+                        that.toggleSize();
+                    },
+                    key_space: function() {
+                        that.togglePlay();
+                    }
                 });
 
         $.extend(self, {
@@ -11962,6 +11975,9 @@ requires
                 overflowX: 'hidden',
                 overflowY: 'hidden'
             })
+            .bind({
+                mousedown: that.gainFocus
+            })
             .bindEvent({
                 resize: resizeVideo
             });
@@ -12073,6 +12089,7 @@ requires
         self.$timeline = {
             large: new Ox.LargeTimeline({
                     duration: self.options.duration,
+                    position: self.options.position,
                     subtitles: self.options.subtitles,
                     videoId: self.options.videoId,
                     width: getTimelineWidth()
@@ -12085,6 +12102,7 @@ requires
                 }),
             small: new Ox.SmallTimeline({
                     duration: self.options.duration,
+                    position: self.options.position,
                     subtitles: self.options.subtitles,
                     videoId: self.options.videoId,
                     width: getTimelineWidth()
@@ -12205,11 +12223,12 @@ requires
         }
 
         function playing(event, data) {
+            self.options.position = data.position;
             self.$timeline.large.options({
-                position: data.position
+                position: self.options.position
             });
             self.$timeline.small.options({
-                position: data.position
+                position: self.options.position
             });
         }
 
@@ -12287,19 +12306,35 @@ requires
         self.onChange = function(key, value) {
             if (key == 'height') {
                 resizeVideo();
+            } else if (key == 'position') {
+                self.$video.position(value);
             } else if (key == 'width') {
                 resizeVideoAndControls();
             }
         }
 
         that.toggleAnnotations = function() {
-            
+            that.$element.toggle(1);
+            //that.toggleAnnotations(null, !self.options.showAnnotations);
         };
 
         that.toggleControls = function() {
-            
+            self.$panel.toggle(1);
+            //that.toggleControls(null, !self.options.showControls);
         };
 
+        that.toggleMute = function() {
+            self.$button.mute.trigger('click');
+        };
+
+        that.togglePlay = function() {
+            self.$button.play.trigger('click');
+        };
+
+        that.toggleSize = function() {
+            self.$button.size.trigger('click');
+        }
+
         return that;
 
     }