update embed panel and player

This commit is contained in:
rolux 2013-02-20 14:28:15 +05:30
parent ef4a0f344a
commit 7791cc248d
2 changed files with 141 additions and 41 deletions

View file

@ -1,25 +1,105 @@
pandora.ui.embedPanel = function() { pandora.ui.embedPanel = function() {
var that, $errorBox, $errorLogo, $errorText; var that = Ox.Element(),
data, options,
ui = pandora.user.ui,
$outerPanel, $innerPanel,
$title, $player, $controls, $timeline, $annotations,
$errorBox, $errorLogo, $errorText;
if (pandora.user.ui.item) { if (pandora.user.ui.item) {
that = Ox.Element(); options = getOptions();
pandora.api.get({id: pandora.user.ui.item, keys: [ pandora.api.get({id: ui.item, keys: [
'duration', 'layers', 'parts', 'posterFrame', 'duration', 'layers', 'parts', 'posterFrame',
'rightslevel', 'size', 'title', 'videoRatio' 'rightslevel', 'size', 'title', 'videoRatio'
]}, function(result) { ]}, function(result) {
Ox.extend(result.data, pandora.getVideoOptions(result.data)); data = result.data, innerHeight;
that.setElement( Ox.extend(data, pandora.getVideoOptions(data));
pandora.$ui.embedPlayer = pandora.ui.embedPlayer(result.data) if (options.matchRatio || options.showAnnotations) {
options.height = Math.min(
Math.round(window.innerWidth / data.videoRatio),
window.innerHeight
- (options.title ? 32 : 0)
- (options.showTimeline ? 80 : 0)
- (options.showAnnotations ? 128 : 0)
); );
} else {
options.height = window.innerHeight
- (options.title ? 32 : 0)
- (options.showTimeline ? 80 : 0);
}
innerHeight = options.height
+ (options.title ? 32 : 0)
+ (options.showTimeline ? 80 : 0);
if (options.title) {
$title = Ox.Element()
.css({position: 'absolute'})
.append(
$('<div>')
.css({
marginTop: !options.title.match(/\\n/) ? '8px' : '2px',
textAlign: 'center'
})
.html(options.title.replace(/\\n/g, '<br>'))
);
} else {
$title = Ox.Element();
}
$player = pandora.ui.embedPlayer(options, data)
.bindEvent({
playing: function(data) {
setPosition(data.position, true);
},
position: function(data) {
setPosition(data.position);
}
});
$controls = Ox.Element();
if (options.showTimeline) {
$timeline = Ox.LargeVideoTimeline({
duration: data.duration,
getImageURL: function(type, i) {
return '/' + ui.item + '/timeline' + type + '64p' + i + '.jpg';
},
position: options.position,
subtitles: data.subtitles || [],
type: ui.videoTimeline,
width: window.innerWidth - 16
})
.css({
top: '4px',
left: '4px'
})
.bindEvent({
mousedown: that.gainFocus,
position: changeTimeline
})
.appendTo($controls);
}
$annotations = Ox.Element().html('ANNOTATIONS');
$innerPanel = Ox.SplitPanel({
elements: [
{element: $title, size: options.title ? 32 : 0},
{element: $player},
{element: $controls, size: options.showTimeline ? 80 : 0}
],
orientation: 'vertical'
});
$outerPanel = Ox.SplitPanel({
elements: [
{element: $innerPanel, size: innerHeight},
{element: $annotations}
],
orientation: 'vertical'
});
that.setElement($outerPanel);
}); });
} else { } else {
that = Ox.Element() that.addClass('OxScreen')
.addClass('OxScreen')
.css({ .css({
position: 'absolute', position: 'absolute',
left: 0, left: 0,
@ -59,6 +139,50 @@ pandora.ui.embedPanel = function() {
} }
function changeTimeline(data) {
var position = options.playInToOut
? Ox.limit(data.position, options['in'], options.out)
: data.position;
Ox.print('PPP', position);
$player.options({position: position});
position != data.position && $timeline.options({position: position});
options.showAnnotations && $annotations.options({position: position});
}
function getOptions() {
var options = {},
defaults = {
invertHighlight: true,
paused: true,
playInToOut: true,
width: window.innerWidth
};
ui.hash.query.forEach(function(condition) {
if (condition.key != 'embed') {
options[condition.key] = condition.value;
}
});
options = Ox.extend(
{item: ui.item},
ui.videoPoints[ui.item] || {},
defaults,
options
);
if (!options.position) {
options.position = options['in'] || 0;
}
if (!options['in'] && !options.out) {
options.playInToOut = false;
}
return options;
}
function setPosition(position, playing) {
!playing && $player.options({position: position});
options.showTimeline && $timeline.options({position: position});
options.showAnnotations && $annotations.options({position: position});
}
that.display = function() { that.display = function() {
// fixme: move animation into Ox.App // fixme: move animation into Ox.App
var animate = $('.OxScreen').length == 0; var animate = $('.OxScreen').length == 0;

View file

@ -1,11 +1,12 @@
pandora.ui.embedPlayer = function(data) { pandora.ui.embedPlayer = function(options, data) {
var options = getOptions(), var that = Ox.VideoPlayer(Ox.extend({
that = Ox.VideoPlayer(Ox.extend({
censored: data.censored, censored: data.censored,
censoredIcon: pandora.site.cantPlay.icon, censoredIcon: pandora.site.cantPlay.icon,
censoredTooltip: pandora.site.cantPlay.text, censoredTooltip: pandora.site.cantPlay.text,
controlsBottom: ['play', 'volume', 'scale'].concat( controlsBottom: ['play', 'volume'].concat(
options.matchRatio ? [] : ['scale']
).concat(
Ox.Fullscreen.available ? ['fullscreen'] : [] Ox.Fullscreen.available ? ['fullscreen'] : []
).concat( ).concat(
['timeline', 'position', 'settings'] ['timeline', 'position', 'settings']
@ -27,6 +28,7 @@ pandora.ui.embedPlayer = function(data) {
enableVolume: true, enableVolume: true,
height: options.height, height: options.height,
invertHighlight: options.invertHighlight, invertHighlight: options.invertHighlight,
muted: pandora.user.ui.videoMuted,
paused: options.paused, paused: options.paused,
playInToOut: options.playInToOut, playInToOut: options.playInToOut,
position: options.position, position: options.position,
@ -36,6 +38,7 @@ pandora.ui.embedPlayer = function(data) {
: data.posterFrame : data.posterFrame
) +'.jpg', ) +'.jpg',
resolution: pandora.user.ui.videoResolution, resolution: pandora.user.ui.videoResolution,
scaleToFill: pandora.user.ui.videoScale == 'fill',
subtitles: data.subtitles, subtitles: data.subtitles,
timeline: options.playInToOut ? function(size, i) { timeline: options.playInToOut ? function(size, i) {
return '/' + options.item return '/' + options.item
@ -44,6 +47,7 @@ pandora.ui.embedPlayer = function(data) {
} : '/' + options.item + '/' + 'timeline16p.png', } : '/' + options.item + '/' + 'timeline16p.png',
title: data.title, title: data.title,
video: data.video, video: data.video,
volume: pandora.user.ui.videoVolume,
width: options.width width: options.width
}, options['in'] ? { }, options['in'] ? {
'in': options['in'] 'in': options['in']
@ -51,34 +55,6 @@ pandora.ui.embedPlayer = function(data) {
out: options.out out: options.out
} : {})); } : {}));
function getOptions() {
var ui = pandora.user.ui,
defaults = {
height: window.innerHeight,
invertHighlight: true,
paused: true,
playInToOut: true,
width: window.innerWidth
},
options,
query = {};
ui.hash.query.forEach(function(condition) {
if (condition.key != 'embed') {
query[condition.key] = condition.value;
}
})
options = Ox.extend({
item: ui.item
}, ui.videoPoints[ui.item] || {}, defaults, query);
if (!options.position) {
options.position = options['in'] || 0;
}
if (!options['in'] && !options.out) {
options.playInToOut = false;
}
return options;
}
return that; return that;
}; };