update embed panel

This commit is contained in:
rolux 2013-02-20 15:37:58 +05:30
parent 7791cc248d
commit 0de3bb8527
2 changed files with 112 additions and 69 deletions

View file

@ -1,7 +1,7 @@
pandora.ui.embedPanel = function() {
var that = Ox.Element(),
data, options,
options, video,
ui = pandora.user.ui,
$outerPanel, $innerPanel,
$title, $player, $controls, $timeline, $annotations,
@ -15,11 +15,13 @@ pandora.ui.embedPanel = function() {
'duration', 'layers', 'parts', 'posterFrame',
'rightslevel', 'size', 'title', 'videoRatio'
]}, function(result) {
data = result.data, innerHeight;
Ox.extend(data, pandora.getVideoOptions(data));
video = result.data, innerHeight;
Ox.extend(video, pandora.getVideoOptions(video));
if (options.matchRatio || options.showAnnotations) {
options.height = Math.min(
Math.round(window.innerWidth / data.videoRatio),
Math.round(window.innerWidth / video.videoRatio),
window.innerHeight
- (options.title ? 32 : 0)
- (options.showTimeline ? 80 : 0)
@ -33,6 +35,7 @@ pandora.ui.embedPanel = function() {
innerHeight = options.height
+ (options.title ? 32 : 0)
+ (options.showTimeline ? 80 : 0);
if (options.title) {
$title = Ox.Element()
.css({position: 'absolute'})
@ -47,24 +50,85 @@ pandora.ui.embedPanel = function() {
} else {
$title = Ox.Element();
}
$player = pandora.ui.embedPlayer(options, data)
$player = Ox.VideoPlayer(Ox.extend({
censored: video.censored,
censoredIcon: pandora.site.cantPlay.icon,
censoredTooltip: pandora.site.cantPlay.text,
controlsBottom: ['play', 'volume'].concat(
options.matchRatio ? [] : ['scale']
).concat(
Ox.Fullscreen.available ? ['fullscreen'] : []
).concat(
['timeline', 'position', 'settings']
),
controlsTooltips: {
close: 'Close',
open: 'Watch on ' + pandora.site.site.name
},
controlsTop: (options.showCloseButton ? ['close'] : []).concat(
['title', 'open']
),
duration: video.duration,
enableFullscreen: Ox.Fullscreen.available,
enableKeyboard: true,
enableMouse: true,
enablePosition: true,
enableSubtitles: true,
enableTimeline: true,
enableVolume: true,
height: options.height,
invertHighlight: options.invertHighlight,
muted: pandora.user.ui.videoMuted,
paused: options.paused,
playInToOut: options.playInToOut,
position: options.position,
poster: '/' + options.item + '/' + '96p' + (
options.position !== void 0 ? options.position
: options['in'] !== void 0 ? options['in']
: video.posterFrame
) +'.jpg',
resolution: pandora.user.ui.videoResolution,
scaleToFill: pandora.user.ui.videoScale == 'fill',
subtitles: video.subtitles,
timeline: options.playInToOut ? function(size, i) {
return '/' + options.item
+ '/timelineantialias'
+ size + 'p' + i + '.jpg'
} : '/' + options.item + '/' + 'timeline16p.png',
title: video.title,
video: video.video,
volume: pandora.user.ui.videoVolume,
width: options.width
}, options['in'] ? {
'in': options['in']
} : {}, options.out ? {
out: options.out
} : {}))
.bindEvent({
playing: function(data) {
setPosition(data.position, true);
},
position: function(data) {
setPosition(data.position);
},
subtitles: function(data) {
$timeline.options({
subtitles: data.subtitles ? video.subtitles : []
});
}
});
$controls = Ox.Element();
if (options.showTimeline) {
$timeline = Ox.LargeVideoTimeline({
duration: data.duration,
duration: video.duration,
getImageURL: function(type, i) {
return '/' + ui.item + '/timeline' + type + '64p' + i + '.jpg';
},
position: options.position,
subtitles: data.subtitles || [],
subtitles: ui.videoSubtitles ? video.subtitles : [],
type: ui.videoTimeline,
width: window.innerWidth - 16
})
@ -78,7 +142,28 @@ pandora.ui.embedPanel = function() {
})
.appendTo($controls);
}
$annotations = Ox.Element().html('ANNOTATIONS');
if (options.showAnnotations) {
$annotations = Ox.AnnotationPanel(Ox.extend({
font: options.annotationsFont,
layers: video.annotations,
position: options.position,
range: options.annotationsRange,
showLayers: options.showLayers,
showUsers: true,
sort: options.annotationsSort
}, options['in'] ? {
'in': options['in']
} : {}, options.out ? {
out: options.out
} : {}))
.bindEvent({
select: selectAnnotation
})
} else {
$annotations = Ox.Element();
}
$innerPanel = Ox.SplitPanel({
elements: [
{element: $title, size: options.title ? 32 : 0},
@ -87,6 +172,7 @@ pandora.ui.embedPanel = function() {
],
orientation: 'vertical'
});
$outerPanel = Ox.SplitPanel({
elements: [
{element: $innerPanel, size: innerHeight},
@ -94,7 +180,9 @@ pandora.ui.embedPanel = function() {
],
orientation: 'vertical'
});
that.setElement($outerPanel);
});
} else {
@ -143,7 +231,6 @@ pandora.ui.embedPanel = function() {
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});
@ -152,9 +239,17 @@ pandora.ui.embedPanel = function() {
function getOptions() {
var options = {},
defaults = {
annotationsFont: ui.annotationsFont,
annotationsRange: ui.annotationsRange,
annotationsSort: ui.annotationsSort,
invertHighlight: true,
matchRatio: false,
paused: true,
playInToOut: true,
showAnnotations: false,
showCloseButton: false,
showLayers: ui.showLayers,
showTimeline: false,
width: window.innerWidth
};
ui.hash.query.forEach(function(condition) {
@ -177,6 +272,14 @@ pandora.ui.embedPanel = function() {
return options;
}
function selectAnnotation(data) {
if (data.id) {
setPosition(data['in']);
//setPoint('in', data['in']);
//setPoint('out', data.out);
}
}
function setPosition(position, playing) {
!playing && $player.options({position: position});
options.showTimeline && $timeline.options({position: position});

View file

@ -1,60 +0,0 @@
pandora.ui.embedPlayer = function(options, data) {
var that = Ox.VideoPlayer(Ox.extend({
censored: data.censored,
censoredIcon: pandora.site.cantPlay.icon,
censoredTooltip: pandora.site.cantPlay.text,
controlsBottom: ['play', 'volume'].concat(
options.matchRatio ? [] : ['scale']
).concat(
Ox.Fullscreen.available ? ['fullscreen'] : []
).concat(
['timeline', 'position', 'settings']
),
controlsTooltips: {
close: 'Close',
open: 'Watch on ' + pandora.site.site.name
},
controlsTop: (options.showCloseButton ? ['close'] : []).concat(
['title', 'open']
),
duration: data.duration,
enableFullscreen: Ox.Fullscreen.available,
enableKeyboard: true,
enableMouse: true,
enablePosition: true,
enableSubtitles: true,
enableTimeline: true,
enableVolume: true,
height: options.height,
invertHighlight: options.invertHighlight,
muted: pandora.user.ui.videoMuted,
paused: options.paused,
playInToOut: options.playInToOut,
position: options.position,
poster: '/' + options.item + '/' + '96p' + (
options.position !== void 0 ? options.position
: options['in'] !== void 0 ? options['in']
: data.posterFrame
) +'.jpg',
resolution: pandora.user.ui.videoResolution,
scaleToFill: pandora.user.ui.videoScale == 'fill',
subtitles: data.subtitles,
timeline: options.playInToOut ? function(size, i) {
return '/' + options.item
+ '/timelineantialias'
+ size + 'p' + i + '.jpg'
} : '/' + options.item + '/' + 'timeline16p.png',
title: data.title,
video: data.video,
volume: pandora.user.ui.videoVolume,
width: options.width
}, options['in'] ? {
'in': options['in']
} : {}, options.out ? {
out: options.out
} : {}));
return that;
};