0x2620/oxjs
2
0
Fork 1
Code Issues 172 Pull requests Releases Wiki Activity

fix and optimize video preview

Browse source
This commit is contained in:
rlx 2012-01-30 20:48:19 +00:00
parent 5237fcd29d
commit 4e615e722d
3 changed files with 29 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
source/Ox.UI/css/Ox.UI.css
View file

@ -776,7 +776,7 @@ div.OxInput > input.OxInput {
}
/*
--------------------------------------------------------------------------------
OxEditable
OxEditableElement
--------------------------------------------------------------------------------
*/

6
source/Ox.UI/js/Calendar/Ox.Calendar.js
View file

@ -419,10 +419,10 @@ Ox.Calendar = function(options, self) {
.css({bottom: 40 + (self.options.showZoombar * 16) + 'px'})
.bindEvent({
singleclick: function() {
// ...
// ... FIXME: implement
},
doubleclick: function() {
// ...
// ... FIXME: implement
}
})
.appendTo(that),
@ -437,7 +437,7 @@ Ox.Calendar = function(options, self) {
scrollBy(1);
},
doubleclick: function() {
scrollTo(1000000, true)
scrollTo(1000000, true);
}
})
.appendTo(that),

33
source/Ox.UI/js/Video/Ox.VideoPreview.js
View file

@ -44,10 +44,15 @@ Ox.VideoPreview = function(options, self) {
self.$interface = Ox.Element({
tooltip: function(event) {
//event.offsetX does not work in Firefox
// fixme: use layerX then
// e.offsetX does not work in Firefox
var position = getPosition(event.clientX - that.offset().left);
self.$frame.attr({src: getClosestFrame(position)});
Ox.print('closest frame:', self.$frame.attr('src'));
self.timeout && clearTimeout(self.timeout);
self.timeout = setTimeout(function() {
self.$frame.attr({src: self.options.getFrame(position)});
Ox.print('exact frame:', self.$frame.attr('src'));
}, 250);
return Ox.formatDuration(position, 2);
}
})
@ -69,6 +74,14 @@ Ox.VideoPreview = function(options, self) {
});
}
function getClosestFrame(position) {
return self.loaded.length == 0
? self.options.getFrame(self.options.position)
: self.loaded.sort(function(a, b) {
return Math.abs(a.position - position) - Math.abs(b.position - position);
})[0].frame;
}
function getFrameCSS() {
var css = {},
elementWidth = self.options.width,
@ -106,23 +119,25 @@ Ox.VideoPreview = function(options, self) {
}
steps.forEach(function(step) {
Ox.loop(0, self.options.width, step, function(x) {
var frame = self.options.getFrame(getPosition(x));
var position = getPosition(x),
frame = self.options.getFrame(position);
if (
self.loaded.indexOf(frame) == -1
&& self.queue.indexOf(frame) == -1
!Ox.getObject(self.loaded, 'frame', frame)
&& !Ox.getObject(self.queue, 'frame', frame)
) {
self.queue.push(frame);
self.queue.push({frame: frame, position: position});
}
});
});
loadFrame();
self.queue.length && loadFrame();
function loadFrame() {
var image = self.queue.shift();
$('<img>')
.load(function() {
self.loaded.push(self.queue.shift());
self.loaded.push(image);
self.queue.length && loadFrame();
})
.attr({src: self.queue[0]});
.attr({src: image.frame})
}
}