make large timeline work in player view

build/js/ox.ui.js

@@ -12014,7 +12014,7 @@ requires
                     type: 'image'                
                 })
                 .bindEvent({
-                    click: toggleMute
+                    click: self.$video.toggleMute
                 }),
             size: new Ox.Button({
                     id: 'size',
@@ -12057,15 +12057,20 @@ requires
             large: new Ox.LargeTimeline({
                     duration: self.options.duration,
                     videoId: self.options.videoId,
-                    width: self.options.width - 40
+                    width: getTimelineWidth()
                 })
                 .css({
                     top: '4px'
+                })
+                .bindEvent({
+                    change: function(event, data) {
+                        self.$video.position(data.position);
+                    }
                 }),
             small: new Ox.SmallTimeline({
                     duration: self.options.duration,
                     videoId: self.options.videoId,
-                    width: self.options.width - 40
+                    width: getTimelineWidth()
                 })
                 .css({
                     top: '80px'
@@ -12090,7 +12095,7 @@ requires
                 orientation: 'vertical'
             })
             .bindEvent({
-                resize: resizeVideo
+                resize: resizePanel
             });
 
         self.$annotations = new Ox.Element()
@@ -12118,13 +12123,20 @@ requires
             });
 
         function getPlayerHeight() {
-            return self.options.height - 1 -
+            return self.options.height -
-                self.options.showControls * 104;
+                self.options.showControls * 104 - 1;
         }
 
         function getPlayerWidth() {
-            return self.options.width - 1 -
+            return self.options.width -
-                self.options.showAnnotations * self.options.annotationsSize;
+                self.options.showAnnotations *
+                self.options.annotationsSize - 1;
+        }
+
+        function getTimelineWidth() {
+            return self.options.width -
+                self.options.showAnnotations *
+                self.options.annotationsSize - 40
         }
 
         function getVideoCSS() {
@@ -12133,25 +12145,6 @@ requires
                 ratio = width / height,
                 videoRatio = self.options.videoWidth / self.options.videoHeight,
                 isWide = ratio < videoRatio;
-            self.$annotations && self.$annotations.html($('<div>').html(JSON.stringify(self.options.videoSize == 'fit' ? {
-                foo: width,
-                bar: height,
-                width: (isWide ? width : Math.round(height * videoRatio)) + 'px',
-                height: (isWide ? Math.round(width / videoRatio) : height) + 'px',
-                margin: 'auto'
-            } : {
-                foo: width,
-                bar: height,
-                width: (isWide ? Math.round(height * videoRatio) : width) + 'px',
-                height: (isWide ? height : Math.round(width / videoRatio)) + 'px',
-                margin: [
-                    isWide ? '0' : Math.floor((height - width / videoRatio) / 2) + 'px',
-                    isWide ? Math.ceil((width - height * videoRatio) / 2) + 'px' : '0',
-                    isWide ? '0' : Math.ceil((height - width / videoRatio) / 2) + 'px',
-                    isWide ? Math.floor((width - height * videoRatio) / 2) + 'px' : '0'
-                ].join(' ')
-            })).css({width: '150px'}));
-
             return self.options.videoSize == 'fit' ? {
                 position: 'absolute',
                 left: 0,
@@ -12181,8 +12174,10 @@ requires
             
         }
 
-        function playing() {
+        function playing(event, data) {
-            
+            self.$timeline.large.options({
+                position: data.position
+            });
         }
 
         function playInToOut() {
@@ -12191,23 +12186,41 @@ requires
 
         function resizeAnnotations(event, data) {
             self.options.annotationsSize = data;
-            resizeVideo();
+            resizeVideoAndControls();
         }
 
         function resizeendAnnotations(event, data) {
             self.options.annotationsSize = data;
-            resizeVideo();
             that.triggerEvent('change', {
                 annotationsSize: self.options.annotationsSize
             });
         }
 
+        function resizeControls() {
+            self.$timeline.large.options({
+                width: getTimelineWidth()
+            });
+            self.$timeline.small.options({
+                width: getTimelineWidth()
+            });
+        }
+
         function resizeElement(event, data) {
             // called on browser toggle
             self.options.height = data;
             resizeVideo();
         }
 
+        function resizePanel(event, data) {
+            // called on annotations toggle
+            resizeVideoAndControls();
+        }
+
+        function resizeVideoAndControls() {
+            resizeVideo();
+            resizeControls();
+        }
+
         function resizeVideo() {
             self.videoCSS = getVideoCSS();
             self.$video.css(self.videoCSS);
@@ -12227,18 +12240,9 @@ requires
             });
         }
 
-        function toggleMute() {
-            
-        }
-
-        function togglePlay() {
-            
-        }
-
         function toggleSize() {
             self.options.videoSize = self.options.videoSize == 'fit' ? 'fill' : 'fit';
-            self.videoCSS = getVideoCSS()
+            resizeVideo();
-            self.$video.css(self.videoCSS);
             that.triggerEvent('change', {
                 videoSize: self.options.videoSize
             });
@@ -12248,7 +12252,7 @@ requires
             if (key == 'height') {
                 resizeVideo();
             } else if (key == 'width') {
-                resizeVideo();
+                resizeVideoAndControls();
             }
         }