add showInToOut option to SmallVideoTimelineImage

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

@@ -18,6 +18,7 @@ Ox.SmallVideoTimelineImage = function(options, self) {
             mode: 'player',
             out: 0,
             results: [],
+            showInToOut: false,
             state: 'default',
             subtitles: [],
             type: '',
@@ -73,19 +74,27 @@ Ox.SmallVideoTimelineImage = function(options, self) {
             width: self.options.width + 'px'
         });
 
-    self.images = Ox.isString(self.options.imageURL) ?
+    if (self.options.showInToOut) {
-        1 : Math.ceil(self.options.duration / 3600);
+        self.pixelsPerSecond = (
-    self.imageWidth = Ox.isString(self.options.imageURL) ?
+            screen.width < 1024 ? 1024 : screen.width
-        1920 : Math.round(self.options.duration);
+        ) / self.options.duration;
-    self.height = self.options.mode == 'player' ? 16 : 24;
+    }
-    self.imageHeight = self.options.mode == 'player' ? 16 : 18;
+    self.images = Ox.isString(self.options.imageURL) ? 1
-    self.imageTop = self.options.mode == 'player' ? 0 : 3;
+        : Math.ceil(self.options.duration / 3600);
-    self.timelineTop = self.options.mode == 'player' ? 0 : 4;
+    self.imageWidth = Ox.isString(self.options.imageURL) ? 1920
+        : self.options.showInToOut ? (
+            self.pixelsPerSecond <= 1
+            ? Math.round(self.options.duration)
+            : Math.round(self.options.duration * 25)
+        )
+        : Math.round(self.options.duration);
+    self.height = self.options.mode == 'editor' ? 24 : 16;
+    self.imageHeight = self.options.mode == 'editor' ? 18 : 16;
+    self.imageTop = self.options.mode == 'editor' ? 3 : 0;
+    self.timelineTop = self.options.mode == 'editor' ? 4 : 0;
     self.themeData = Ox.Theme.getThemeData();
 
-    that.css({
+    that.css({height: self.height + 'px'});
-        height: self.height + 'px'
-    });
 
     if (Ox.isString(self.options.imageURL)) {
         self.$timeline = $('<img>')
@@ -99,6 +108,15 @@ Ox.SmallVideoTimelineImage = function(options, self) {
                 height: '16px'
             })
             .appendTo(that);
+    } else if (self.options.showInToOut) {
+        self.$timeline = getClipTimeline()
+            .css({
+                position: 'absolute',
+                top: self.timelineTop + 'px',
+                width: self.options.width + 'px',
+                height: '16px'
+            })
+            .appendTo(that);
     } else {
         Ox.loop(self.images, function(i) {
             $('<img>')
@@ -152,12 +170,50 @@ Ox.SmallVideoTimelineImage = function(options, self) {
         })
         .appendTo(that);
 
+    function getClipTimeline() {
+        var $canvas, context, image,
+            firstTile, lastTile, tileHeight, tileOffset, tileWidth;
+        if (self.pixelsPerSecond <= 1) {
+            firstTile = Math.floor(self.options['in'] / 3600);
+            lastTile = Math.floor(self.options.out / 3600);
+            tileHeight = 16;
+            tileOffset = -Math.round(self.options['in'] % 3600);
+            tileWidth = 3600;
+        } else {
+            firstTile = Math.floor(self.options['in'] / 60);
+            lastTile = Math.floor(self.options.out / 60);
+            tileHeight = 64;
+            tileOffset = -Math.round(self.options['in'] % 60);
+            tileWidth = 1500;
+        }
+        $canvas = $('<canvas>').attr({
+            width: self.imageWidth,
+            height: tileHeight
+        });
+        context = $canvas[0].getContext('2d');
+        Ox.loop(firstTile, lastTile + 1, function(tileIndex) {
+            var $image = $('<img>')
+                .one({
+                    load: function() {
+                        context.drawImage(
+                            $image[0],
+                            tileOffset + (tileIndex - firstTile) * tileWidth,
+                            0
+                        );
+                    }
+                })
+                .attr({
+                    src: self.options.imageURL(tileHeight, tileIndex)
+                });
+        });
+        return $canvas;
+    }
+
     function getImageURL(image, callback) {
         var width = image == 'results' || image == 'selection'
                 ? self.options.width : self.imageWidth,
             height = self.imageHeight,
-            canvas = $('<canvas>')
+            canvas = $('<canvas>').attr({
-                .attr({
                 width: width,
                 height: height
             })[0],
@@ -188,7 +244,11 @@ Ox.SmallVideoTimelineImage = function(options, self) {
                     });
                 });
             });
-        } else if (image == 'selection' && self.options.out > self.options['in']) {
+        } else if (
+            image == 'selection'
+            && self.options.out > self.options['in']
+            && !self.options.showInToOut
+        ) {
             var left = Math.round(
                     self.options['in'] / self.options.duration * width
                 ),
@@ -221,15 +281,35 @@ Ox.SmallVideoTimelineImage = function(options, self) {
                 });
             });
         } else if (image == 'subtitles') {
-            var bottom = self.options.mode == 'player' ? 14 : 15;
+            var bottom = self.options.mode == 'editor' ? 15 : 14,
-            self.options.subtitles.forEach(function(subtitle) {
+                offset = self.options.showInToOut ? (
+                    self.pixelsPerSecond <= 1
+                    ? -self.options['in']
+                    : -self.options['in'] * 25
+                ) : 0,
+                subtitles = self.options.showInToOut
+                    ? self.options.subtitles.filter(function(subtitle) {
+                        return (
+                            subtitle['in'] >= self.options['in']
+                            && subtitle['in'] <= self.options.out
+                        ) || (
+                            subtitle.out >= self.options['in']
+                            && subtitle.out <= self.options.out
+                        ) || (
+                            subtitle['in'] < self.options['in']
+                            && subtitle.out > self.options.out
+                        )
+                    })
+                    : self.options.subtitles;
+            subtitles.forEach(function(subtitle) {
                 var left = Math.round(
                         subtitle['in'] / self.options.duration * self.imageWidth
-                    ),
+                    ) + offset,
                     right = Math.round(
                         subtitle.out / self.options.duration * self.imageWidth
-                    ) + 1,
+                    ) + offset + 1,
                     top = bottom - subtitle.text.split('\n').length - 2;
+                Ox.print('XXX', subtitle['in'], subtitle.out, left, right);
                 Ox.loop(left, right, function(x) {
                     Ox.loop(top, bottom, function(y) {
                         var alpha = 128,