add first version of Ox.VideoTimelinePanel, update Ox.VideoTimelinePlayer

source/Ox.UI/js/Video/Ox.VideoTimelinePanel.js

@@ -0,0 +1,183 @@
+// vim: et:ts=4:sw=4:sts=4:ft=javascript
+
+'use strict';
+
+/*@
+Ox.VideoTimelinePanel <f:Ox.Element> VideoTimelinePanel
+@*/
+
+Ox.VideoTimelinePanel = function(options, self) {
+
+    self = self || {};
+    var that = Ox.Element({}, self)
+            .defaults({
+                annotationsCalendarSize: 256,
+                annotationsFont: 'small',
+                annotationsMapSize: 256,
+                annotationsRange: 'all',
+                annotationsSize: 256,
+                annotationsSort: 'position',
+                censored: [],
+                clickLink: null,
+                cuts: [],
+                duration: 0,
+                height: 0,
+                layers: [],
+                loop: false, // fixme: used?
+                muted: false,
+                out: 0,
+                paused: false,
+                position: 0,
+                resolution: 0,
+                selected: '',
+                showAnnotations: false,
+                showAnnotationsCalendar: false,
+                showAnnotationsMap: false,
+                showLayers: {},
+                showUsers: false,
+                subtitles: [],
+                video: '',
+                volume: 1,
+                width: 0
+            })
+            .options(options || {})
+            .css({
+                height: self.options.height + 'px',
+                width: self.options.width + 'px'
+            })
+            .bindEvent({
+                resize: resizeElement,
+                key_0: toggleMuted,
+                key_equal: function() {
+                    self.$video.changeVolume(0.1);
+                },
+                key_minus: function() {
+                    self.$video.changeVolume(-0.1);
+                },
+                key_space: togglePaused
+            });
+
+    self.$player = Ox.VideoTimelinePlayer({
+            censored: self.options.censored,
+            cuts: self.options.cuts,
+            duration: self.options.durations,
+            muted: self.options.muted,
+            paused: true,
+            position: self.options.position,
+            resolution: self.options.resolution,
+            volume: self.options.volume        
+        })
+        .bindEvent({
+            muted: function(data) {
+                that.triggerEvent('muted', data);
+            },
+            paused: function(data) {
+                that.triggerEvent('paused', data);
+            },
+            playing: function(data) {
+                setPosition(data.position, true);
+            },
+            position: function(data) {
+                setPosition(data.position);
+            },
+            volume: function(data) {
+                that.triggerEvent('volume', data);
+            }
+        });
+
+    that.setElement(
+        Ox.SplitPanel({
+            elements: [
+                {
+                    element: self.$player
+                },
+                {
+                    collapsed: !self.options.showAnnotations,
+                    collapsible: true,
+                    element: self.$annotationPanel,
+                    resizable: true,
+                    resize: [192, 256, 320, 384],
+                    size: self.options.annotationsSize,
+                    tooltip: self.options.tooltips ? 'annotations' : false
+                }
+            ],
+            orientation: 'horizontal'
+        })
+    );
+
+    function getPlayerWidth() {
+        return self.options.width -
+            self.options.showAnnotations * self.options.annotationsSize - 1;
+    }
+
+    function resizeAnnotations(data) {
+        // called on annotations resize
+        self.options.annotationsSize = data.size;
+        self.$player.options({
+            width: getPlayerWidth()
+        });
+        self.$annotationPanel.options({width: data.size});
+    }
+
+    function resizeendAnnotations(data) {
+        that.triggerEvent('annotationssize', data.size);
+    }
+
+    function resizeElement(data) {
+        // called on browser toggle
+        self.options.height = data.size;
+        self.$player.options({
+            height: self.options.height
+        });
+    }
+
+    function selectAnnotation(data) {
+        self.options.selected = data.id;
+        if (self.options.selected) {
+            setPosition(data['in']);
+        }
+        self.$annotationPanel.options({selected: self.options.selected});
+        that.triggerEvent('select', {id: self.options.selected});
+    }
+
+    function setPosition(position, playing) {
+        var minute = parseInt(position / 60),
+            previousMinute = parseInt(self.options.position / 60);
+        self.options.position = position;
+        !playing && self.$player.options({position: self.options.position});
+        self.$annotationPanel.options({position: self.options.position});
+        if (!playing || minute != previousMinute) {
+            that.triggerEvent('position', {
+                position: !playing ? self.options.position : minute * 60
+            });
+        }
+    }
+
+    function toggleAnnotations(data) {
+        self.options.showAnnotations = !data.collapsed;
+        self.$player.options({
+            width: getPlayerWidth()
+        });
+        that.triggerEvent('toggleannotations', {
+            showAnnotations: self.options.showAnnotations
+        });
+    }
+
+    function toggleMuted() {
+        self.$player.toggleMuted();
+    }
+
+    function togglePaused() {
+        self.$player.togglePaused();
+        self.$player.options('paused') && that.triggerEvent('position', {
+            position: self.$player.options('position')
+        });
+    }
+
+    that.toggleAnnotations = function() {
+        that.$element.toggle(1);
+    };
+
+    return that;
+
+};

source/Ox.UI/js/Video/Ox.VideoTimelinePlayer.js

@@ -15,12 +15,14 @@ Ox.VideoTimelinePlayer = function(options, self) {
             height: 0,
             'in': 0,
             matches: [],
+            muted: false,
             out: 0,
             paused: false,
             position: 0,
             subtitles: [],
             timelineURL: '',
             videoRatio: 1,
+            volume: 1,
             width: 0
         })
         .options(options || {})