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

// 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) {
                //event.offsetX does not work in Firefox
                // fixme: use layerX then
                var position = getPosition(event.clientX - that.offset().left);
                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', {
            //e.offsetX does not work in Firefox
            position: getPosition(e.clientX - that.offset().left)
        });
    }

    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') {
            self.$frame.attr({src: self.options.getFrame()})
                .css({width: value + 'px'});
            self.$timeline.css({width: value + 'px'});
            stopLoading();
        }
    }

    return that;

};