replace Flipbook with VideoPreview

2011-08-08 13:58:19 +00:00 · 2011-08-08 13:58:19 +00:00 · d21068979a
commit d21068979a
parent 944f549e95
5 changed files with 139 additions and 104 deletions
--- a/source/Ox.UI/js/Video/Ox.VideoPreview.js
+++ b/source/Ox.UI/js/Video/Ox.VideoPreview.js
@ -0,0 +1,112 @@
+// vim: et:ts=4:sw=4:sts=4:ft=javascript
+
+Ox.VideoPreview = function(options, self) {
+
+    self = self || {};
+    var that = Ox.Element({}, self)
+        .defaults({
+            duration: 0,
+            getFrame: null,
+            fps: 25,
+            frameHeight: 144,
+            frameWidth: 256,
+            timeline: '',
+        })
+        .options(options || {})
+        .addClass('OxVideoPreview');
+
+    self.loaded = [];
+    self.queue = [];
+
+    self.$frame = $('<img>')
+        .addClass('OxFrame')
+        .attr({src: self.options.getFrame()})
+        .css({
+            height: self.options.frameHeight + 'px',
+            width: self.options.frameWidth + 'px'
+        })
+        .appendTo(that.$element);
+
+    self.$timeline = $('<img>')
+        .addClass('OxTimeline')
+        .attr({src: self.options.timeline})
+        .css({width: self.options.frameWidth + 'px'})
+        .appendTo(that.$element);
+
+    self.$interface = Ox.Element({
+            tooltip: function(event) {
+                var position = getPosition(event.offsetX);
+                self.$frame.attr({src: self.options.getFrame(position)});
+                return Ox.formatDuration(position, 2);
+            }        
+        })
+        .addClass('OxInterface')
+        .bind({
+            click: click,
+            mouseenter: startLoading,
+            mouseleave: function() {
+                self.$frame.attr({src: self.options.getFrame()});
+                stopLoading();
+            }
+        })
+        .appendTo(that.$element);
+
+    function click(e) {
+        that.triggerEvent('click', {
+            position: getPosition(e.offsetX)
+        });
+    }
+
+    function getPosition(x) {
+        return Math.round(
+            self.options.duration * x / self.options.frameWidth * self.options.fps
+        ) / self.options.fps;
+    }
+
+    function startLoading() {
+        var last,
+            steps = [Math.round(self.options.frameWidth / 2)];
+        while ((last = steps[steps.length - 1]) > 1) {
+            steps.push(Math.round(last / 2));
+        }
+        steps.forEach(function(step) {
+            Ox.loop(0, self.options.frameWidth, step, function(x) {
+                var frame = self.options.getFrame(getPosition(x));
+                if (
+                    self.loaded.indexOf(frame) == -1
+                    && self.queue.indexOf(frame) == -1
+                ) {
+                    self.queue.push(frame);
+                }
+            });
+        });
+        loadFrame();
+        function loadFrame() {
+            $('<img>')
+                .load(function() {
+                    self.loaded.push(self.queue.shift());
+                    self.queue.length && loadFrame();
+                })
+                .attr({src: self.queue[0]});
+        }
+    }
+
+    function stopLoading() {
+        self.queue = [];
+    }
+
+    self.setOption = function(key, value) {
+        if (key == 'frameHeight') {
+            self.$frame.css({height: value + 'px'});            
+        } else if (key == 'frameWidth') {
+            Ox.print('PREVIEW WIDTH', value);
+            self.$frame.attr({src: self.options.getFrame()})
+                .css({width: value + 'px'});
+            self.$timeline.css({width: value + 'px'});
+            stopLoading();
+        }
+    }
+
+    return that;
+
+};