112 lines
3.2 KiB
JavaScript
112 lines
3.2 KiB
JavaScript
|
// 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) {
|
||
|
|
var position = getPosition(event.offsetX);
|
||
|
|
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', {
|
||
|
|
position: getPosition(e.offsetX)
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
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') {
|
||
|
|
Ox.print('PREVIEW WIDTH', value);
|
||
|
|
self.$frame.attr({src: self.options.getFrame()})
|
||
|
|
.css({width: value + 'px'});
|
||
|
|
self.$timeline.css({width: value + 'px'});
|
||
|
|
stopLoading();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
return that;
|
||
|
|
|
||
|
|
};
|