update VideoPanelPlayer

source/Ox.UI/js/Video/Ox.VideoEditor.js

@@ -225,7 +225,9 @@ Ox.VideoEditor = function(options, self) {
             left: self.sizes.timeline[0].left + 'px',
             top: self.sizes.timeline[0].top + 'px'
         })
-        .bindEvent('position', changeTimelineLarge)
+        .bindEvent({
+            position: changeTimelineLarge
+        })
         .appendTo(self.$editor);
 
     self.$timeline[1] = Ox.BlockVideoTimeline({
@@ -246,7 +248,9 @@ Ox.VideoEditor = function(options, self) {
             left: self.sizes.timeline[1].left + 'px',
             top: self.sizes.timeline[1].top + 'px',
         })
-        .bindEvent('position', changeTimelineSmall)
+        .bindEvent({
+            position: changeTimelineSmall
+        })
         .appendTo(self.$editor);
 
     self.$annotations = Ox.Element()
@@ -266,14 +270,14 @@ Ox.VideoEditor = function(options, self) {
                     data.layer = layer.id; 
                     data['in'] = self.options['in'];
                     data.out = self.options.out;
-                    that.triggerEvent('addAnnotation', data);
+                    that.triggerEvent('addannotation', data);
                 },
                 remove: function(event, data) {
                     data = {
                         ids: [data],
                         layer: layer.id
                     };
-                    that.triggerEvent('removeAnnotations', data);
+                    that.triggerEvent('removeannotations', data);
                 },
                 select: function(event, data) {
                     self.options.layers.forEach(function(l, j) { // fixme: l? j?
@@ -877,7 +881,7 @@ Ox.VideoEditor = function(options, self) {
     function updateAnnotation(event, data) {
         data['in'] = self.options['in'];
         data.out = self.options.out;
-        that.triggerEvent('updateAnnotation', data);
+        that.triggerEvent('updateannotation', data);
     }
 
     function select(type) {
@@ -970,8 +974,8 @@ Ox.VideoEditor = function(options, self) {
     function toggleAnnotations(event, data) {
         self.options.showAnnotations = !data.collapsed;
         setSizes();
-        that.triggerEvent('toggleAnnotations', {
+        that.triggerEvent('toggleannotations', {
-            visible: self.options.showAnnotations
+            showAnnotations: self.options.showAnnotations
         });
     }
 

source/Ox.UI/js/Video/Ox.VideoPanelPlayer.js

@@ -24,13 +24,14 @@ Ox.VideoPanelPlayer = function(options, self) {
                 points: [0, 0],
                 position: 0,
                 poster: '',
+                scaleToFill: false,
                 showAnnotations: true,
                 showControls: true,
                 subtitles: [],
+                video: '',
                 videoHeight: 0,
-                videoSize: 'fit',
                 videoWidth: 0,
-                videoURL: '',
+                volume: 1,
                 width: 0
             })
             .options(options || {})
@@ -54,36 +55,42 @@ Ox.VideoPanelPlayer = function(options, self) {
                 }
             });
 
-    $.extend(self, {
+    self.fullscreen = false;
-        fullscreen: false,
-        videoCSS: getVideoCSS()
-    });
     //alert(JSON.stringify([self.playerHeight, self.playerWidth, self.videoCSS]))
 
     self.$player = Ox.Element()
         .css({
             overflowX: 'hidden',
             overflowY: 'hidden'
-        })
-        .bind({
-            mousedown: that.gainFocus
-        })
-        .bindEvent({
-            resize: resizeVideo
         });
 
-    self.$video = Ox.VideoElement({
+    self.$video = Ox.VideoPlayer({
-            height: self.videoCSS.height,
+            controlsTop: ['fullscreen', 'scale', 'title', 'find'],
+            controlsBottom: ['play', 'volume', 'timeline', 'position', 'resolution'],
+            enableFind: true,
+            enableKeyboard: true,
+            height: getPlayerHeight(),
+            muted: self.options.muted,
             paused: true,
-            points: self.options.points,
             position: self.options.position,
-            url: self.options.videoURL,
+            scaleToFill: self.options.scaleToFill,
-            width: self.videoCSS.width
+            subtitles: self.options.subtitles,
+            timeline: self.options.timeline,
+            video: self.options.video,
+            volume: self.options.volume,
+            width: getPlayerWidth()
         })
-        .css(self.videoCSS)
         .bindEvent({
-            paused: paused,
+            position: setPosition,
-            playing: playing
+            muted: function(data) {
+                that.triggerEvent('muted', data);
+            },
+            scale: function(data) {
+                that.triggerEvent('scale', data);
+            },
+            volume: function(data) {
+                that.triggerEvent('volume', data);
+            }
         })
         .appendTo(self.$player);
 
@@ -92,122 +99,20 @@ Ox.VideoPanelPlayer = function(options, self) {
             toggle: toggleControls
         });
 
-    self.$buttons = Ox.Element()
+    self.$timeline = Ox.LargeVideoTimeline({
-        .css({
+            duration: self.options.duration,
-            float: 'left',
+            getImageURL: self.options.getTimelineImageURL,
-            width: '16px',
+            position: self.options.position,
-            margin: '4px'
+            subtitles: self.options.subtitles,
+            videoId: self.options.videoId,
+            width: getTimelineWidth()
+        })
+        .css({left: '4px', top: '4px'})
+        .bindEvent({
+            position: changeTimeline
         })
         .appendTo(self.$controls);
 
-    self.$button = {
-        play: Ox.Button({
-                id: 'play',
-                title: [
-                    {id: 'play', title: 'play'},
-                    {id: 'pause', title: 'pause'}
-                ],
-                tooltip: ['Play', 'Pause'],
-                type: 'image'                
-            })
-            .bindEvent({
-                click: self.$video.togglePlay
-            }),
-        mute: Ox.Button({
-                id: 'mute',
-                title: [
-                    {id: 'mute', title: 'mute'},
-                    {id: 'unmute', title: 'unmute'}
-                ],
-                tooltip: ['Mute', 'Unmute'],
-                type: 'image'                
-            })
-            .bindEvent({
-                click: self.$video.toggleMute
-            }),
-        size: Ox.Button({
-                id: 'size',
-                title: self.options.videoSize == 'fit' ? [
-                    {id: 'fill', title: 'fill'},
-                    {id: 'fit', title: 'fit'}
-                ] : [
-                    {id: 'fit', title: 'fit'},
-                    {id: 'fill', title: 'fill'}
-                ],
-                tooltip: self.options.videoSize == 'fit' ? [
-                    'Fill Screen', 'Fit to Screen'
-                ] : [
-                    'Fit to Screen', 'Fill Screen'
-                ],
-                type: 'image'
-            })
-            .bindEvent({
-                click: toggleSize
-            }),
-        fullscreen: Ox.Button({
-                id: 'size',
-                title: [
-                    {id: 'grow', title: 'grow'},
-                    {id: 'shrink', title: 'shrink'}
-                ],
-                tooltip: [
-                    'Enter Fullscreen', 'Exit Fullscreen'
-                ],
-                type: 'image'
-            })
-            .bindEvent({
-                click: toggleFullscreen
-            })
-    }
-    var i = 0;
-    Ox.forEach(self.$button, function($button) {
-        $button.css({
-            position: 'absolute',
-            left: '8px',
-            top: (8 + i++ * 24) + 'px'
-        })
-        .appendTo(self.$buttons);
-    });
-
-    self.$timelines = Ox.Element()
-        .css({
-            float: 'left',
-            margin: '4px'
-        })
-        .appendTo(self.$controls);
-
-    self.$timeline = {
-        large: Ox.LargeTimeline({
-                duration: self.options.duration,
-                position: self.options.position,
-                subtitles: self.options.subtitles,
-                videoId: self.options.videoId,
-                width: getTimelineWidth()
-            })
-            .css({
-                top: '4px'
-            })
-            .bindEvent({
-                change: changeLargeTimeline
-            }),
-        small: Ox.SmallTimeline({
-                duration: self.options.duration,
-                position: self.options.position,
-                subtitles: self.options.subtitles,
-                videoId: self.options.videoId,
-                width: getTimelineWidth()
-            })
-            .css({
-                top: '76px'
-            })
-            .bindEvent({
-                change: changeSmallTimeline
-            })
-    };
-    Ox.forEach(self.$timeline, function($timeline) {
-        $timeline.appendTo(self.$timelines);
-    });
-
     self.$panel = Ox.SplitPanel({
             elements: [
                 {
@@ -217,7 +122,7 @@ Ox.VideoPanelPlayer = function(options, self) {
                     collapsed: !self.options.showControls,
                     collapsible: true,
                     element: self.$controls,
-                    size: 104
+                    size: 80
                 }
             ],
             orientation: 'vertical'
@@ -250,78 +155,26 @@ Ox.VideoPanelPlayer = function(options, self) {
             orientation: 'horizontal'
         });
 
-    function changeLargeTimeline(event, data) {
+    function changeTimeline(data) {
         self.options.position = data.position;
-        self.$video.position(self.options.position);
+        self.$video.options({position: self.options.position});
-        self.$timeline.small.options({
-            position: self.options.position
-        });            
-    }
-
-    function changeSmallTimeline(event, data) {
-        self.options.position = data.position;
-        self.$video.position(self.options.position);
-        self.$timeline.large.options({
-            position: self.options.position
-        });            
     }
 
     function getPlayerHeight() {
         return self.options.height -
-            self.options.showControls * 104 - 1;
+            self.options.showControls * 80 - 1;
     }
 
     function getPlayerWidth() {
         return self.options.width -
-            (self.options.showAnnotations && !self.fullscreen) *
+            (self.options.showAnnotations && !self.fullscreen)
-            self.options.annotationsSize - 1;
+            * self.options.annotationsSize - 1;
     }
 
     function getTimelineWidth() {
         return self.options.width -
             (self.options.showAnnotations && !self.fullscreen) *
-            self.options.annotationsSize - 40
+            self.options.annotationsSize - 16 - 1;
-    }
-
-    function getVideoCSS() {
-        var width = getPlayerWidth(),
-            height = getPlayerHeight(),
-            ratio = width / height,
-            videoRatio = self.options.videoWidth / self.options.videoHeight,
-            isWide = ratio < videoRatio;
-        return self.options.videoSize == 'fit' ? {
-            position: 'absolute',
-            left: 0,
-            right: 0,
-            top: 0,
-            bottom: 0,
-            width: (isWide ? width : Math.round(height * videoRatio)) + 'px',
-            height: (isWide ? Math.round(width / videoRatio) : height) + 'px',
-            margin: 'auto'
-        } : {
-            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(' ')
-        };
-    }
-
-    function paused() {
-        
-    }
-
-    function playing(event, data) {
-        self.options.position = data.position;
-        self.$timeline.large.options({
-            position: self.options.position
-        });
-        self.$timeline.small.options({
-            position: self.options.position
-        });
     }
 
     function resizeAnnotations(event, data) {
@@ -329,79 +182,73 @@ Ox.VideoPanelPlayer = function(options, self) {
         resizeVideoAndControls();
     }
 
-    function resizeendAnnotations(event, data) {
+    function resizeendAnnotations(data) {
         self.options.annotationsSize = data;
-        that.triggerEvent('change', {
+        that.triggerEvent('resizeannotations', {
             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();
+        self.$video.options({
+            height: getPlayerHeight()
+        });
     }
 
     function resizePanel(event, data) {
         // called on annotations toggle
-        resizeVideoAndControls();
+        self.$video.options({
+            width: getPlayerWidth()
+        });
+        self.$timeline.options({
+            width: getTimelineWidth()
+        });
     }
 
-    function resizeVideoAndControls() {
+    function setPosition(event, data) {
-        resizeVideo();
+        self.options.position = data.position;
-        resizeControls();
+        //self.$video.position(self.options.position);
+        self.$timeline.options({
+            position: self.options.position
+        });            
     }
 
-    function resizeVideo() {
-        self.videoCSS = getVideoCSS();
-        self.$video.css(self.videoCSS);
-    };
-
     function toggleAnnotations(event, data) {
         self.options.showAnnotations = !data.collapsed;
-        that.triggerEvent('change', {
+        self.$video.options({
+            height: getPlayerHeight()
+        });
+        that.triggerEvent('toggleannotations', {
             showAnnotations: self.options.showAnnotations
         });
     }
 
     function toggleControls(event, data) {
         self.options.showControls = !data.collapsed;
-        that.triggerEvent('change', {
+        self.$video.options({
-            showControls: self.options.showControls
+            height: getPlayerHeight()
         });
-    }
+        that.triggerEvent('togglecontrols', {
-
+            showControls: self.options.showControls
-    function toggleFullscreen() {
-        self.fullscreen = !self.fullscreen;
-        self.options.showAnnotations && that.$element.toggle(1);
-        self.fullscreen && self.options.showControls && self.$panel.toggle(1);
-        that.triggerEvent((self.fullscreen ? 'enter' : 'exit') + 'fullscreen', {});
-    }
-
-    function toggleSize() {
-        self.options.videoSize = self.options.videoSize == 'fit' ? 'fill' : 'fit';
-        resizeVideo();
-        that.triggerEvent('change', {
-            videoSize: self.options.videoSize
         });
     }
 
     self.setOption = function(key, value) {
         if (key == 'height') {
-            resizeVideo();
+            self.$video.options({
+                height: getPlayerHeight()
+            });
         } else if (key == 'position') {
             self.$video.position(value);
         } else if (key == 'width') {
-            resizeVideoAndControls();
+            self.$video.options({
+                width: getPlayerWidth()
+            });
+            self.$timeline.opitions({
+                width: getTimelineWidth()
+            });
         }
     }
 
@@ -415,18 +262,6 @@ Ox.VideoPanelPlayer = function(options, self) {
         //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;
 
 }

source/Ox.UI/js/Video/Ox.VideoPlayer.js

@@ -1698,6 +1698,9 @@ Ox.VideoPlayer = function(options, self) {
             src: getVolumeImageURL()
         });
         self.$volumeValue.html(self.options.muted ? 0 : Math.round(self.options.volume * 100));
+        that.triggerEvent('volume', {
+            volume: self.options.volume
+        });
     }
 
     function showControls() {
@@ -1924,6 +1927,9 @@ Ox.VideoPlayer = function(options, self) {
         self.$volumeValue && self.$volumeValue.html(
             self.options.muted ? 0 : Math.round(self.options.volume * 100)
         );
+        that.triggerEvent('muted', {
+            muted: self.options.muted
+        });
     }
 
     function togglePaused(from) {
@@ -1980,6 +1986,9 @@ Ox.VideoPlayer = function(options, self) {
                 marker.animate(self.posterMarkerCSS[position], 250);
             });
         }
+        that.triggerEvent('scale', {
+            scale: self.options.scaleToFill ? 'fill' : 'fit'
+        });
     }
 
     function toggleSize() {
@@ -1997,6 +2006,7 @@ Ox.VideoPlayer = function(options, self) {
         if (key == 'fullscreen') {
             toggleFullscreen();
         } else if (key == 'height' || key == 'width') {
+            Ox.print('!!!!!!!!!!!!!', key, value)
             setSizes();
         } else if (key == 'in' || key == 'out') {
             self.options.paused && setMarkers();