don't use canvas for the timeline image

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

@@ -53,14 +53,11 @@ Ox.BlockVideoTimeline = function(options, self) {
             timeline: self.options.timeline,
             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({

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

@@ -24,8 +24,11 @@ Ox.SmallVideoTimelineImage = function(options, self) {
     // fixme: timeline doesn't have to go through canvas at all,
     // just use one or more images
 
+    self.images = Ox.isString(self.options.timeline) ?
+        1 : Math.ceil(self.options.duration / 3600);
+    self.imageWidth = Ox.isString(self.options.timeline) ?
+        1920 : Math.round(self.options.duration);
     self.height = self.options.type == 'player' ? 16 : 24;
-    self.imageWidth = Ox.isString(self.options.timeline) ? 1920 : Math.round(self.options.duration);
     self.imageHeight = self.options.type == 'player' ? 16 : 18;
     self.imageTop = self.options.type == 'player' ? 0 : 3;
 
@@ -33,24 +36,34 @@ Ox.SmallVideoTimelineImage = function(options, self) {
         height: self.height + 'px'
     });
 
+    if (Ox.isString(self.options.timeline)) {
         self.$timeline = $('<img>')
             .attr({
-            src: Ox.UI.PATH + 'png/transparent.png'
+                src: self.options.timeline
             })
             .css({
                 position: 'absolute',
+                top: self.imageTop + 'px',
                 width: self.options.width + 'px',
                 height: self.imageHeight + 'px',
-            top: self.imageTop + 'px'
             })
             .appendTo(that.$element);
-
+    } else {
-    getImageURL('timeline', function(imageURL) {
+        Ox.loop(self.images, function(i) {
-        self.$timeline.attr({
+            $('<img>')
-            src: imageURL
+                .attr({
-        });
+                    src: self.options.timeline(i)
-        that.triggerEvent('load');
+                })
+                .css({
+                    position: 'absolute',
+                    left: (i * 3600) + 'px',
+                    top: self.imageTop + 'px',
+                    width: (i == self.images - 1 ? self.imageWidth % 3600 : 3600) + 'px',
+                    height: self.imageHeight + 'px',
+                })
+                .appendTo(that.$element);
         });
+    }
 
     self.$subtitles = $('<img>')
         .attr({
@@ -58,9 +71,9 @@ Ox.SmallVideoTimelineImage = function(options, self) {
         })
         .css({
             position: 'absolute',
+            top: self.imageTop + 'px',
             width: self.options.width + 'px',
-            height: self.imageHeight + 'px',
+            height: self.imageHeight + 'px'
-            top: self.imageTop + 'px'
         })
         .appendTo(that.$element);
 
@@ -70,9 +83,9 @@ Ox.SmallVideoTimelineImage = function(options, self) {
         })
         .css({
             position: 'absolute',
+            top: self.imageTop + 'px',
             width: self.options.width + 'px',
-            height: self.imageHeight + 'px',
+            height: self.imageHeight + 'px'
-            top: self.imageTop + 'px'
         })
         .appendTo(that.$element);
 
@@ -82,9 +95,9 @@ Ox.SmallVideoTimelineImage = function(options, self) {
         })
         .css({
             position: 'absolute',
+            top: self.imageTop + 'px',
             width: self.options.width + 'px',
-            height: self.imageHeight + 'px',
+            height: self.imageHeight + 'px'
-            top: self.imageTop + 'px'
         })
         .appendTo(that.$element);
 
@@ -168,40 +181,10 @@ Ox.SmallVideoTimelineImage = function(options, self) {
                     });
                 });
             });
-        } else if (image == 'timeline') {
-            var $image, counter, images,
-                top = self.options.type == 'player' ? 0 : 1;
-            if (Ox.isString(self.options.timeline)) {
-                $image = $('<img>')
-                    .attr({
-                        src: self.options.timeline
-                    })
-                    .load(function() {
-                        context.drawImage($image[0], 0, top)
-                        callback(canvas.toDataURL());
-                    });
-            } else {
-                counter = 0;
-                images = Math.ceil(self.options.duration / 3600);
-                Ox.loop(images, function(i) {
-                    var $image = $('<img>')
-                        .attr({
-                            src: self.options.timeline(i)
-                        })
-                        .load(function() {
-                            context.drawImage($image[0], i * 3600, top);
-                            if (++counter == images) {
-                                callback(canvas.toDataURL());
         }
-                        });
-                });
-            }
-        }
-        if (image != 'timeline') {
         context.putImageData(imageData, 0, 0);
         return canvas.toDataURL();
     }
-    }
 
     function getPosition() {