fix embed timeline

This commit is contained in:
j 2013-11-04 14:09:43 +00:00
parent 9ef6290a64
commit a71773ab01
2 changed files with 51 additions and 16 deletions

View file

@ -23,7 +23,7 @@ pandora.ui.embedPanel = function() {
} else if (Ox.contains(['player', 'editor'], view)) { } else if (Ox.contains(['player', 'editor'], view)) {
that = pandora.ui.embedPlayer(); that = pandora.ui.embedPlayer();
} else if (view == 'timeline') { } else if (view == 'timeline') {
that = pandora.ui.embedError(true); that = pandora.ui.embedTimeline();
} else if (view == 'clips') { } else if (view == 'clips') {
that = pandora.ui.embedError(true); that = pandora.ui.embedError(true);
} else if (Ox.contains(['map', 'calendar'], view)) { } else if (Ox.contains(['map', 'calendar'], view)) {

View file

@ -16,13 +16,17 @@ pandora.ui.embedTimeline = function() {
timeline: ui.videoTimeline timeline: ui.videoTimeline
}, },
options = getOptions(), options = getOptions(),
removed = false,
video, video,
$panel, $player, $annotations; $title, $panel, $player, $annotations;
pandora.api.get({id: ui.item, keys: [ pandora.api.get({id: ui.item, keys: [
'duration', 'layers', 'parts', 'rightslevel', 'videoRatio' 'duration', 'durations', 'layers', 'parts', 'posterFrame',
]}), function(result) { 'rightslevel', 'size', 'title', 'videoRatio'
]}, function(result) {
if (removed) {
return;
}
video = Ox.extend(result.data, pandora.getVideoOptions(result.data)); video = Ox.extend(result.data, pandora.getVideoOptions(result.data));
if (options.title) { if (options.title) {
@ -39,7 +43,7 @@ pandora.ui.embedTimeline = function() {
} else { } else {
$title = Ox.Element(); $title = Ox.Element();
} }
var sizes = getSizes();
$player = Ox.VideoTimelinePlayer({ $player = Ox.VideoTimelinePlayer({
censored: video.censored, censored: video.censored,
censoredIcon: pandora.site.cantPlay.icon, censoredIcon: pandora.site.cantPlay.icon,
@ -52,18 +56,19 @@ pandora.ui.embedTimeline = function() {
getLargeTimelineURL: function(type, i) { getLargeTimelineURL: function(type, i) {
return '/' + ui.item + '/timeline' + type + '64p' + i + '.jpg'; return '/' + ui.item + '/timeline' + type + '64p' + i + '.jpg';
}, },
height: options.height, height: sizes.innerHeight,
muted: ui.videoMuted, muted: ui.videoMuted,
paused: options.paused, paused: options.paused,
position: options.position, position: options.position,
resolution: Ox.min(pandora.site.video.resolutions), resolution: Ox.min(pandora.site.video.resolutions),
smallTimelineURL: '/' + ui.item + '/timeline16p.jpg', smallTimelineURL: '/' + ui.item + '/timeline16p.jpg',
subtitles: video.subtitles, subtitles: video.subtitles,
timeline: ui.timeline, timeline: ui.videoTimeline,
timelines: pandora.site.timelines,
video: video.video, video: video.video,
videoRatio: video.videoRatio, videoRatio: video.videoRatio,
volume: ui.videoVolume, volume: ui.videoVolume,
width: options.width width: sizes.innerWidth
}) })
.bindEvent({ .bindEvent({
playing: function(data) { playing: function(data) {
@ -127,15 +132,15 @@ pandora.ui.embedTimeline = function() {
Ox.$parent.postMessage('loaded'); Ox.$parent.postMessage('loaded');
} });
function getOptions() { function getOptions() {
var options = {}; var options = {};
ui.hash.query.forEach(function(condition) { if (ui._hash.query) {
if (condition.key != 'embed') { ui._hash.query.forEach(function(condition) {
options[condition.key] = condition.value; options[condition.key] = condition.value;
} });
}); }
options = Ox.extend( options = Ox.extend(
{item: ui.item}, {item: ui.item},
ui.videoPoints[ui.item] || {}, ui.videoPoints[ui.item] || {},
@ -155,6 +160,36 @@ pandora.ui.embedTimeline = function() {
return options; return options;
} }
function getSizes() {
var innerHeight,
innerWidth,
maxVideoHeight = window.innerHeight
- (options.title ? 32 : 0)
- (options.showTimeline ? 80 : 0)
- (options.showAnnotations ? 128 : 0),
videoHeight;
if (options.matchRatio || options.showAnnotations) {
videoHeight = Math.round(window.innerWidth / video.videoRatio);
options.matchRatio = videoHeight <= maxVideoHeight;
if (!options.matchRatio) {
videoHeight = maxVideoHeight;
}
} else {
videoHeight = window.innerHeight
- (options.title ? 32 : 0)
- (options.showTimeline ? 80 : 0);
}
innerHeight = videoHeight
+ (options.title ? 32 : 0)
+ (options.showTimeline ? 80 : 0);
innerWidth = window.innerWidth;
return {
innerHeight: innerHeight,
innerWidth: innerWidth,
videoHeight: videoHeight
};
}
function getTimelineHeight() { function getTimelineHeight() {
return window.innerHeight return window.innerHeight
- (options.title ? 32 : 0) - (options.title ? 32 : 0)