add embedTimeline

This commit is contained in:
rolux 2013-03-02 14:17:57 +05:30
parent 8067fd4629
commit 0f0f27652d

View file

@ -0,0 +1,185 @@
'use strict';
pandora.ui.embedTimeline = function() {
var that = Ox.Element(),
ui = pandora.user.ui,
defaults = {
annotationsFont: ui.annotationsFont,
annotationsRange: ui.annotationsRange,
annotationsSort: ui.annotationsSort,
paused: true,
showAnnotations: false,
showLayers: pandora.site.layers.map(function(layer) {
return layer.id;
}),
timeline: ui.videoTimeline
},
options = getOptions(),
video,
$panel, $player, $annotations;
pandora.api.get({id: ui.item, keys: [
'duration', 'layers', 'parts', 'rightslevel', 'videoRatio'
]}, function(result)) {
video = Ox.extend(result.data, pandora.getVideoOptions(result.data));
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 = Ox.VideoTimelinePlayer({
censored: video.censored,
censoredIcon: pandora.site.cantPlay.icon,
censoredTooltip: pandora.site.cantPlay.text,
duration: video.duration,
followPlayer: ui.followPlayer,
getFrameURL: function(position) {
return '/' + ui.item + '/' + ui.videoResolution + 'p' + position + '.jpg';
},
getLargeTimelineURL: function(type, i) {
return '/' + ui.item + '/timeline' + type + '64p' + i + '.jpg';
},
height: options.height,
muted: ui.videoMuted,
paused: options.paused,
position: options.position,
resolution: Ox.min(pandora.site.video.resolutions),
smallTimelineURL: '/' + ui.item + '/timeline16p.jpg',
subtitles: video.subtitles,
timeline: ui.timeline,
video: video.video,
videoRatio: video.videoRatio,
volume: ui.videoVolume,
width: options.width
})
.bindEvent({
playing: function(data) {
setPosition(data.position, true);
},
position: function(data) {
setPosition(data.position);
},
});
if (options.showAnnotations) {
video.annotations = video.annotations.filter(function(layer) {
return Ox.contains(options.showLayers, layer.id);
});
if (options.playInToOut) {
video.annotations.forEach(function(layer) {
var items = [];
layer.items.forEach(function(item) {
if ((
item['in'] >= options['in'] && item['in'] <= options.out
) || (
item.out >= options['in'] && item.out <= options.out
)) {
items.push(item);
}
});
layer.items = items;
});
}
$annotations = Ox.AnnotationPanel(Ox.extend({
font: options.annotationsFont,
layers: video.annotations,
position: options.position,
range: options.annotationsRange,
showLayers: ui.showLayers,
showUsers: true,
sort: options.annotationsSort,
width: window.innerWidth
}, options['in'] ? {
'in': options['in']
} : {}, options.out ? {
out: options.out
} : {}))
.bindEvent({
select: selectAnnotation
})
} else {
$annotations = Ox.Element();
}
$panel = Ox.SplitPanel({
elements: [
{element: $title, size: options.title ? 32 : 0},
{element: $player},
{element: $annotations, size: options.showAnnotations ? 256 : 0}
],
orientation: 'vertical'
});
that.setElement($panel);
Ox.$parent.postMessage('loaded');
}
function getOptions() {
var options = {};
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;
} else if (options['in'] && options['in'] == options.out) {
options.invertHighlight = false;
options.paused = true;
options.playInToOut = false;
}
return options;
}
function getTimelineHeight() {
return window.innerHeight
- (options.title ? 32 : 0)
- (options.showAnnotations ? 256 : 0);
}
function selectAnnotation(data) {
if (data.id) {
setPosition(Math.max(data['in'], options['in'] || 0));
$annotations.options({selected: ''});
}
}
function setPosition(position, playing) {
!playing && $player.options({position: position});
options.showAnnotations && $annotations.options({position: position});
}
that.resizePanel = function() {
var sizes = getSizes();
$player.options({width: window.innerWidth, height: getTimelineHeight()});
options.showAnnotations && $annotations.options({width: window.innerWidth});
return that;
};
return that;
};