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

Ox.SmallVideoTimelineImage = function(options, self) {

    self = self || {};
    var that = Ox.Element({}, self)
        .defaults({
            duration: 1920,
            editing: false,
            getTimelineURL: null,
            'in': 0,
            out: 0,
            results: [],
            subtitles: [],
            width: 256,
            type: 'player'
        })
        .options(options || {})
        .css({
            position: 'absolute',
            width: self.options.width + 'px'
        });

    // fixme: unless we do a block timeline,
    // we can always use a single 1920 png

    self.height = self.options.type == 'player' ? 16 : 24;
    self.imageHeight = self.options.type == 'player' ? 16 : 18;
    self.imageTop = self.options.type == 'player' ? 0 : 3;

    that.css({
        height: self.height + 'px'
    });

    self.$timeline = $('<img>')
        .attr({
            src: Ox.UI.PATH + 'png/transparent.png'
        })
        .css({
            position: 'absolute',
            width: self.options.width + 'px',
            height: self.imageHeight + 'px',
            top: self.imageTop + 'px'
        })
        .appendTo(that.$element);

    getImageURL('timeline', function(imageURL) {
        self.$timeline.attr({
            src: imageURL
        });
        that.triggerEvent('load');
    });

    self.$subtitles = $('<img>')
        .attr({
            src: getImageURL('subtitles')
        })
        .css({
            position: 'absolute',
            width: self.options.width + 'px',
            height: self.imageHeight + 'px',
            top: self.imageTop + 'px'
        })
        .appendTo(that.$element);

    self.$results = $('<img>')
        .attr({
            src: getImageURL('results')
        })
        .css({
            position: 'absolute',
            width: self.options.width + 'px',
            height: self.imageHeight + 'px',
            top: self.imageTop + 'px'
        })
        .appendTo(that.$element);

    self.$selection = $('<img>')
        .attr({
            src: getImageURL('selection')
        })
        .css({
            position: 'absolute',
            width: self.options.width + 'px',
            height: self.imageHeight + 'px',
            top: self.imageTop + 'px'
        })
        .appendTo(that.$element);

    function getImageURL(image, callback) {
        Ox.print(image == 'results' || image == 'selection' ?
                self.options.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({
                    width: width,
                    height: height
                })[0],
            context = canvas.getContext('2d'),
            imageData = context.createImageData(width, height),
            data = imageData.data;
        if (image == 'results') {
            var top = 0,
                bottom = height;
            self.options.results.forEach(function(result) {
                var left = Math.round(
                        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 = 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];
                        data[index + 2] = color[2];
                        data[index + 3] = color[3];
                    });
                });
            });
        } else if (image == 'selection' && self.options.out > self.options['in']) {
            var left = Math.round(
                    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 = 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];
                    data[index + 2] = color[2];
                    data[index + 3] = color[3];
                });
            });
        } else if (image == 'subtitles') {
            var bottom = self.options.type == 'player' ? 14 : 15;
            self.options.subtitles.forEach(function(subtitle) {
                var left = Math.round(subtitle['in']),
                    right = Math.round(subtitle.out) + 1,
                    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],
                            index = x * 4 + y * 4 * width;
                        data[index] = color[0];
                        data[index + 1] = color[1];
                        data[index + 2] = color[2];
                        data[index + 3] = 128;
                    });
                });
            });
        } 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.getTimelineURL(0)
                    })
                    .load(function() {
                        context.drawImage($image[0])
                        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.getTimelineURL(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();
        }
    }

    self.setOption = function(key, value) {
        if (key == 'in' || key == 'out') {
            self.$selection.attr({
                src: getImageURL('selection')
            });
        } else if (key == 'results') {
            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'});
        }
    }

    return that;

}