more efficient composition of block timeline, more efficient resizing of small timeline

demos/video/js/video.js

@@ -128,6 +128,7 @@ Ox.load('UI', {
                         resize: function(foo, size) {
                             $videos[0].options({width: size - 32});
                             $smallTimeline.options({width: size - 16});
+                            $playerTimeline.options({width: size - 16});
                         }
                     }),
                 size: 392,

source/Ox.UI/js/Video/Ox.BlockVideoTimeline.js

@@ -43,9 +43,24 @@ Ox.BlockVideoTimeline = function(options, self) {
 
     setCSS();
 
-    Ox.loop(self.lines, function(i) {
+    self.$image = Ox.SmallVideoTimelineImage({
-        addLine(i);
+            duration: self.options.duration,
-    });
+            editing: self.options.editing,
+            getTimelineURL: self.options.getTimelineURL,
+            'in': self.options['in'],
+            out: self.options.out,
+            results: self.options.results,
+            subtitles: self.options.subtitles,
+            width: Math.ceil(self.options.duration),
+            type: self.options.type
+        })
+        .bindEvent('load', function() {
+            // wait until the timeline image (the one image that is async)
+            // has loaded, so we can clone the element
+            Ox.loop(self.lines, function(i) {
+                addLine(i);
+            });
+        })
 
     self.$positionMarker = $('<img>')
         .attr({
@@ -90,17 +105,7 @@ Ox.BlockVideoTimeline = function(options, self) {
                 overflow: 'hidden'
             })
             .appendTo(that.$element);
-        self.$images[i] = Ox.SmallVideoTimelineImage({
+        self.$images[i] = self.$image.clone()
-                duration: self.options.duration,
-                editing: self.options.editing,
-                getTimelineURL: self.options.getTimelineURL,
-                'in': self.options['in'],
-                out: self.options.out,
-                results: self.options.results,
-                subtitles: self.options.subtitles,
-                width: Math.ceil(self.options.duration),
-                type: self.options.type
-            })
             .css({
                 position: 'absolute',
                 marginLeft: (-i * self.options.width) + 'px'

source/Ox.UI/js/Video/Ox.SmallVideoTimeline.js

@@ -35,23 +35,7 @@ Ox.SmallVideoTimeline = function(options, self) {
         height: self.height + 'px'
     });
 
-    self.$image = Ox.SmallVideoTimelineImage({
+    self.$image = getTimelineImage().appendTo(that);
-            duration: self.options.duration,
-            editing: self.options.editing,
-            getTimelineURL: self.options.getTimelineURL,
-            'in': self.options['in'],
-            out: self.options.out,
-            results: self.options.results,
-            subtitles: self.options.subtitles,
-            width: self.imageWidth,
-            type: self.options.type
-        })
-        .css({
-            position: 'absolute',
-            left: self.imageLeft + 'px',
-            width: self.options.width + 'px'
-        })
-        .appendTo(that);
 
     self.$interface = Ox.Element()
         .addClass('OxInterface')
@@ -167,6 +151,25 @@ Ox.SmallVideoTimeline = function(options, self) {
         return subtitle;
     }
 
+    function getTimelineImage() {
+        return Ox.SmallVideoTimelineImage({
+            duration: self.options.duration,
+            editing: self.options.editing,
+            getTimelineURL: self.options.getTimelineURL,
+            'in': self.options['in'],
+            out: self.options.out,
+            results: self.options.results,
+            subtitles: self.options.subtitles,
+            width: self.imageWidth,
+            type: self.options.type
+        })
+        .css({
+            position: 'absolute',
+            left: self.imageLeft + 'px',
+            width: self.imageWidth + 'px'
+        });
+    }
+
     function mousedown(e) {
         if ($(e.target).is('.OxInterface')) {
             self.options.position = getPosition(e);
@@ -228,13 +231,14 @@ Ox.SmallVideoTimeline = function(options, self) {
     }
 
     function setWidth() {
+        self.imageWidth = self.options.width -
+            (self.options.type == 'player' ? 16 : 8);
         that.css({
             width: self.options.width + 'px'
         });
-        self.$image.css({
+        self.$image.options({
-            width: self.imageWidth + 'px'
+            width: self.imageWidth
-        });
+        }).css({
-        self.$image.children().css({
             width: self.imageWidth + 'px'
         });
         self.$interface.css({

source/Ox.UI/js/Video/Ox.SmallVideoTimelineImage.js

@@ -44,6 +44,7 @@ Ox.SmallVideoTimelineImage = function(options, self) {
         self.$timeline.attr({
             src: imageURL
         });
+        that.triggerEvent('load');
     });
 
     self.$subtitles = $('<img>')
@@ -83,7 +84,8 @@ Ox.SmallVideoTimelineImage = function(options, self) {
         .appendTo(that.$element);
 
     function getImageURL(image, callback) {
-        var width = Math.ceil(self.options.duration),
+        var width = image == 'results' || image == 'selection' ?
+                self.options.width : Math.ceil(self.options.duration),
             height = self.imageHeight,
             canvas = $('<canvas>')
                 .attr({
@@ -97,11 +99,18 @@ Ox.SmallVideoTimelineImage = function(options, self) {
             var top = 0,
                 bottom = height;
             self.options.results.forEach(function(result) {
-                var left = Math.round(result['in']),
+                var left = Math.round(
-                    right = Math.round(result.out) + 1;
+                        result['in'] * self.options.width / self.options.duration
+                    ),
+                    right = Math.round(
+                        result.out * self.options.width / self.options.duration
+                    ) + 1;
                 Ox.loop(left, right, function(x) {
                     Ox.loop(top, bottom, function(y) {
-                        var color = (y == top || y == bottom - 1) ? [255, 255, 0, 255] : [255, 255, 0, 64],
+                        var color = self.options.type == 'player' ?
+                                [255, 255, 0, 128] :
+                                (y == top || y == bottom - 1) ?
+                                [255, 255, 0, 255] : [255, 255, 0, 64],
                             index = x * 4 + y * 4 * width;
                         data[index] = color[0];
                         data[index + 1] = color[1];
@@ -111,14 +120,20 @@ Ox.SmallVideoTimelineImage = function(options, self) {
                 });
             });
         } else if (image == 'selection') {
-            var left = Math.round(self.options['in']),
+            var left = Math.round(
-                right = Math.round(self.options.out) + 1,
+                    self.options['in'] * self.options.width / self.options.duration
+                ),
+                right = Math.round(
+                    self.options.out * self.options.width / self.options.duration
+                ) + 1,
                 top = 0,
                 bottom = height,
                 rgb = self.options.editing ? [128, 255, 255] : [255, 255, 255];
             Ox.loop(left, right, function(x) {
                 Ox.loop(top, bottom, function(y) {
-                    var color = [rgb[0], rgb[1], rgb[2], (y == top || y == bottom - 1) ? 255 : 64],
+                    var color = self.options.type == 'player' ?
+                            [rgb[0], rgb[1], rgb[2], 128] :
+                            [rgb[0], rgb[1], rgb[2], (y == top || y == bottom - 1) ? 255 : 64],
                         index = x * 4 + y * 4 * width;
                     data[index] = color[0];
                     data[index + 1] = color[1];
@@ -134,7 +149,8 @@ Ox.SmallVideoTimelineImage = function(options, self) {
                     top = bottom - subtitle.text.split('\n').length - 2;
                 Ox.loop(left, right, function(x) {
                     Ox.loop(top, bottom, function(y) {
-                        var color = (y == top || y == bottom - 1) ? [0, 0, 0] : [255, 255, 255],
+                        var color = (y == top || y == bottom - 1) ?
+                                [0, 0, 0] : [255, 255, 255],
                             index = x * 4 + y * 4 * width;
                         data[index] = color[0];
                         data[index + 1] = color[1];
@@ -175,10 +191,24 @@ Ox.SmallVideoTimelineImage = function(options, self) {
             self.$results.attr({
                 src: getImageURL('results')
             });
+        } else if (key == 'selection') {
+            self.$selection.attr({
+                src: getImageURL('selection')
+            });
         } else if (key == 'subtitles') {
             self.$subtitles.attr({
                 src: getImageURL('subtitles')
             });
+        } else if (key == 'width') {
+            that.css({width: value + 'px'});
+            self.$results
+                .attr({src: getImageURL('results')})
+                .css({width: value + 'px'});
+            self.$selection
+                .attr({src: getImageURL('selection')})
+                .css({width: value + 'px'});
+            self.$subtitles.css({width: value + 'px'});
+            self.$timeline.css({width: value + 'px'});
         }
     }