fix embed timeline
This commit is contained in:
parent
9ef6290a64
commit
a71773ab01
2 changed files with 51 additions and 16 deletions
|
@ -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)) {
|
||||||
|
|
|
@ -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)
|
||||||
|
|
Loading…
Reference in a new issue