replace Flipbook with VideoPreview

This commit is contained in:
rlx 2011-08-08 13:58:19 +00:00
parent 944f549e95
commit d21068979a
5 changed files with 139 additions and 104 deletions

View file

@ -47,8 +47,8 @@ Ox.load('UI', {debug: true}, function() {
openpreview: function(event) {
var data = Ox.getObjectById($list.options('items'), event.ids[0]),
ratio = data.width / data.height,
windowWidth = window.innerWidth * 0.8
windowHeight = window.innerHeight * 0.8
windowWidth = window.innerWidth * 0.8,
windowHeight = window.innerHeight * 0.8,
windowRatio = windowWidth / windowHeight,
width = Math.round(ratio > windowRatio ? windowWidth : windowHeight * ratio),
height = Math.round(ratio < windowRatio ? windowHeight : windowWidth / ratio);

View file

@ -2033,6 +2033,30 @@ Video
color: rgb(255, 255, 255);
}
.OxVideoPreview {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
}
.OxVideoPreview > .OxFrame {
position: absolute;
}
.OxVideoPreview > .OxTimeline {
position: absolute;
bottom: 0;
height: 16px;
}
.OxVideoPreview > .OxInterface {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
cursor: pointer;
}
/*
================================================================================
Miscellaneous

View file

@ -203,7 +203,7 @@ Ox.Element = function(options, self) {
}
function mousemove(e) {
Ox.print('mousemove!!')
//Ox.print('mousemove!!')
that.$tooltip.options({
title: self.options.tooltip(e)
}).show(e);

View file

@ -1,101 +0,0 @@
// vim: et:ts=4:sw=4:sts=4:ft=javascript
// fixme: rename!
Ox.Flipbook = function(options, self) {
self = self || {};
var frame = $('<img>').css({
'position': 'absolute',
'width': '100%',
'height': 'auto'
})
.hide(),
icon = $('<img>').css({
'position': 'absolute',
'width': '100%',
'height': 'auto'
}),
frames = {},
timestamp = $('<div>').css({
'position': 'absolute',
'text-align': 'center',
'width': '100%'
})
.hide(),
that = Ox.Element({}, self)
.defaults({
frames: {},
duration: 0,
icon: ''
})
.options(options || {})
.append(icon)
.append(frame)
.append(timestamp)
.mouseover(function() {
frame.show();
timestamp.show();
icon.hide();
})
.mousemove(function(event) {
var position = getPosition(event),
image = getFrame(position),
frameHeight = image?image.height:that.height();
frame.attr('src', image.src);
timestamp.html(Ox.formatDuration(position, 'short'));
var height = (that.height() - frameHeight)/2;
frame.css({'top': height + 'px'});
timestamp.css({'top': (frameHeight + height) + 'px'});
})
.mouseout(function() {
frame.hide();
timestamp.hide();
icon.show();
})
.mousedown(function(event) {
that.triggerEvent('click', {
'position': getPosition(event)
});
});
function getPosition(event) {
var position = Math.floor(event.clientX - that.offset().left);
position = (position / that.width()) * self.options.duration;
return position;
}
function getFrame(position) {
var frame;
Ox.forEach(frames, function(img, i) {
if (!frame || i <= position) {
frame = img;
}
});
return frame;
}
function cacheFrames() {
Ox.forEach(self.options.frames, function(src, i) {
frames[i] = new Image();
frames[i].onload = function() {
frameHeight = frames[i].height / frames[i].width * that.width();
};
frames[i].src = src;
});
}
self.setOption = function(key, value) {
if (key == 'frames') {
cacheFrames();
} else if (key == 'icon') {
icon.attr('src', value);
}
};
if(options.icon) {
icon.attr('src', options.icon);
}
cacheFrames();
return that;
};

View file

@ -0,0 +1,112 @@
// 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;
};