use video preview on pad.ma info page

This commit is contained in:
j 2012-05-31 20:16:10 +02:00
parent 7936a2180e
commit 6d6644ef76
2 changed files with 54 additions and 4 deletions

View file

@ -41,6 +41,56 @@ pandora.ui.infoView = function(data) {
$left = Ox.Element() $left = Ox.Element()
.appendTo($info), .appendTo($info),
$preview = Ox.VideoPreview({
duration: data.duration,
getFrame: function(position) {
var resolutions = pandora.site.video.resolutions.filter(
function(resolution, i) {
return resolution >= data.height;
}),
resolution = resolutions.length
? Ox.min(resolutions)
: Ox.max(pandora.site.video.resolutions);
return '/' + data.id + '/' + resolution + 'p'
+ (Ox.isUndefined(position) ? '' : position) + '.jpg';
},
frameRatio: data.videoRatio,
height: iconHeight,
width: iconWidth
})
.css({
position: 'absolute',
left: margin + iconLeft + 'px',
top: margin + 'px',
width: iconWidth + 'px',
height: iconHeight + 'px',
borderRadius: borderRadius + 'px',
background: 'rgb(0,0,0)'
})
.bind({
mouseleave: function() {
$icon.show();
}
})
.bindEvent({
click: function(click) {
pandora.UI.set(
'videoPoints.' + data.id,
{'in': 0, out: 0, position: click.position}
);
if (ui.item && ['timeline', 'player', 'editor'].indexOf(ui.itemView) > -1) {
pandora.$ui[ui.itemView].options({
position: click.position
});
} else {
pandora.UI.set({
item: data.id,
itemView: ui.videoView
});
}
}
})
.appendTo($left),
$icon = Ox.Element({ $icon = Ox.Element({
element: '<img>', element: '<img>',
}) })
@ -58,11 +108,12 @@ pandora.ui.infoView = function(data) {
borderRadius: borderRadius + 'px', borderRadius: borderRadius + 'px',
cursor: 'pointer' cursor: 'pointer'
}) })
.bindEvent({ .bind({
singleclick: toggleIconSize mouseenter: function() {
$icon.hide();
}
}) })
.appendTo($left), .appendTo($left),
$reflection = $('<div>') $reflection = $('<div>')
.addClass('OxReflection') .addClass('OxReflection')
.css({ .css({

View file

@ -16,7 +16,6 @@ pandora.ui.videoPreview = function(data) {
Ox.isUndefined(position) ? '' : position Ox.isUndefined(position) ? '' : position
) + '.jpg'; ) + '.jpg';
}, },
frameCSS: data.frameCSS,
frameRatio: data.frameRatio, frameRatio: data.frameRatio,
height: data.height, height: data.height,
position: data.position, position: data.position,