replace Flipbook with VideoPreview
This commit is contained in:
rlx
parent
944f549e95
commit
d21068979a
5 changed files with 139 additions and 104 deletions
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
};
|
||||
112
source/Ox.UI/js/Video/Ox.VideoPreview.js
Normal file
112
source/Ox.UI/js/Video/Ox.VideoPreview.js
Normal 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;
|
||||
|
||||
};
|
||||
Loading…
Reference in a new issue