replace Flipbook with VideoPreview

demos/dialog/js/dialog.js

@@ -47,8 +47,8 @@ Ox.load('UI', {debug: true}, function() {
         openpreview: function(event) {
             var data = Ox.getObjectById($list.options('items'), event.ids[0]),
                 ratio = data.width / data.height,
-                windowWidth = window.innerWidth * 0.8
+                windowWidth = window.innerWidth * 0.8,
-                windowHeight = window.innerHeight * 0.8
+                windowHeight = window.innerHeight * 0.8,
                 windowRatio = windowWidth / windowHeight,
                 width = Math.round(ratio > windowRatio ? windowWidth : windowHeight * ratio),
                 height = Math.round(ratio < windowRatio ? windowHeight : windowWidth / ratio);

source/Ox.UI/css/Ox.UI.css

@@ -2033,6 +2033,30 @@ Video
     color: rgb(255, 255, 255);
 }
 
+.OxVideoPreview {
+    position: absolute;
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+}
+.OxVideoPreview > .OxFrame {
+    position: absolute;
+}
+.OxVideoPreview > .OxTimeline {
+    position: absolute;
+    bottom: 0;
+    height: 16px;
+}
+.OxVideoPreview > .OxInterface {
+    position: absolute;
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    cursor: pointer;
+}
+
 /*
 ================================================================================
 Miscellaneous

source/Ox.UI/js/Core/Ox.Element.js

@@ -203,7 +203,7 @@ Ox.Element = function(options, self) {
         }
 
         function mousemove(e) {
-            Ox.print('mousemove!!')
+            //Ox.print('mousemove!!')
             that.$tooltip.options({
                 title: self.options.tooltip(e)
             }).show(e);

source/Ox.UI/js/Video/Ox.Flipbook.js

@@ -1,101 +0,0 @@
-// vim: et:ts=4:sw=4:sts=4:ft=javascript
-// fixme: rename!
-
-Ox.Flipbook = function(options, self) {
-
-    self = self || {};
-    var frame = $('<img>').css({
-                            'position': 'absolute',
-                            'width': '100%',
-                            'height': 'auto'
-                           })
-                          .hide(),
-        icon = $('<img>').css({
-                            'position': 'absolute',
-                            'width': '100%',
-                            'height': 'auto'
-                         }),
-        frames = {},
-        timestamp = $('<div>').css({
-                                'position': 'absolute',
-                                'text-align': 'center',
-                                'width': '100%'
-                            })
-                            .hide(),
-        that = Ox.Element({}, self)
-            .defaults({
-                frames: {},
-                duration: 0,
-                icon: ''
-            })
-            .options(options || {})
-            .append(icon)
-            .append(frame)
-            .append(timestamp)
-            .mouseover(function() {
-                frame.show();
-                timestamp.show();
-                icon.hide();
-            })
-            .mousemove(function(event) {
-                var position = getPosition(event),
-                    image = getFrame(position),
-                    frameHeight = image?image.height:that.height();
-                frame.attr('src', image.src);
-                timestamp.html(Ox.formatDuration(position, 'short'));
-                
-                var height = (that.height() - frameHeight)/2;
-                frame.css({'top': height + 'px'});
-                timestamp.css({'top': (frameHeight + height) + 'px'});
-            })
-            .mouseout(function() {
-                frame.hide();
-                timestamp.hide();
-                icon.show();
-            })
-            .mousedown(function(event) {
-                that.triggerEvent('click', {
-                    'position': getPosition(event)
-                });
-            });
-    
-    function getPosition(event) {
-        var position = Math.floor(event.clientX - that.offset().left);
-        position = (position / that.width()) * self.options.duration;
-        return position;
-    }
-
-    function getFrame(position) {
-        var frame;
-        Ox.forEach(frames, function(img, i) {
-            if (!frame || i <= position) {
-                frame = img;
-            }
-        });
-        return frame;
-    }
-
-    function cacheFrames() {
-        Ox.forEach(self.options.frames, function(src, i) {
-            frames[i] = new Image();
-            frames[i].onload = function() {
-                frameHeight = frames[i].height / frames[i].width * that.width();
-            };
-            frames[i].src = src;
-        });
-    }
-    
-    self.setOption = function(key, value) {
-        if (key == 'frames') {
-            cacheFrames();
-        } else if (key == 'icon') {
-            icon.attr('src', value);
-        }
-    };
-
-    if(options.icon) {
-       icon.attr('src', options.icon);
-    }
-    cacheFrames();
-    return that;
-};

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;
+
+};