forked from 0x2620/pandora
refactor embed
This commit is contained in:
rolux
parent
bb470c37a1
commit
9a56f6ecc4
5 changed files with 430 additions and 364 deletions
45
static/js/pandora/embedError.js
Normal file
45
static/js/pandora/embedError.js
Normal file
|
|
@ -0,0 +1,45 @@
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
pandora.ui.embedError = function(notImplemented) {
|
||||||
|
|
||||||
|
var that = Ox.Element()
|
||||||
|
.addClass('OxScreen')
|
||||||
|
.css({
|
||||||
|
position: 'absolute',
|
||||||
|
left: 0,
|
||||||
|
top: 0,
|
||||||
|
right: 0,
|
||||||
|
bottom: 0,
|
||||||
|
});
|
||||||
|
|
||||||
|
$('<div>')
|
||||||
|
.css({
|
||||||
|
position: 'absolute',
|
||||||
|
left: 0,
|
||||||
|
top: 0,
|
||||||
|
right: 0,
|
||||||
|
bottom: 0,
|
||||||
|
width: '96px',
|
||||||
|
height: '48px',
|
||||||
|
paddingTop: '16px',
|
||||||
|
margin: 'auto'
|
||||||
|
})
|
||||||
|
.append(
|
||||||
|
$('<img>')
|
||||||
|
.css({width: '96px'})
|
||||||
|
.attr({src: '/static/png/logo.png'})
|
||||||
|
)
|
||||||
|
.append(
|
||||||
|
$('<div>')
|
||||||
|
.css({marginTop: '4px', fontSize: '9px', textAlign: 'center'})
|
||||||
|
.html(
|
||||||
|
notImplemented
|
||||||
|
? 'This view is<br>not implemented.'
|
||||||
|
: 'This view cannot<br>be embedded.'
|
||||||
|
)
|
||||||
|
)
|
||||||
|
.appendTo(that);
|
||||||
|
|
||||||
|
return that;
|
||||||
|
|
||||||
|
};
|
||||||
13
static/js/pandora/embedList.js
Normal file
13
static/js/pandora/embedList.js
Normal file
|
|
@ -0,0 +1,13 @@
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
pandora.ui.embedList = function() {
|
||||||
|
|
||||||
|
var that = Ox.Element();
|
||||||
|
|
||||||
|
that.resizePanel = function() {
|
||||||
|
return that;
|
||||||
|
};
|
||||||
|
|
||||||
|
return that;
|
||||||
|
|
||||||
|
};
|
||||||
14
static/js/pandora/embedNavigation.js
Normal file
14
static/js/pandora/embedNavigation.js
Normal file
|
|
@ -0,0 +1,14 @@
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
pandora.ui.embedNavigation = function(type) {
|
||||||
|
|
||||||
|
var that = pandora.ui.navigationView(type, 16/9);
|
||||||
|
|
||||||
|
that.resizePanel = function() {
|
||||||
|
pandora.$ui.map.resizeMap();
|
||||||
|
return that;
|
||||||
|
};
|
||||||
|
|
||||||
|
return that;
|
||||||
|
|
||||||
|
};
|
||||||
|
|
@ -1,367 +1,36 @@
|
||||||
'use strict';
|
'use strict';
|
||||||
|
|
||||||
|
// FIXME: rename to embed
|
||||||
|
|
||||||
pandora.ui.embedPanel = function() {
|
pandora.ui.embedPanel = function() {
|
||||||
|
|
||||||
var that = Ox.Element(),
|
var that,
|
||||||
options, video,
|
|
||||||
ui = pandora.user.ui,
|
ui = pandora.user.ui,
|
||||||
$outerPanel, $innerPanel,
|
view = !ui.item ? ui.listView : ui.itemView;
|
||||||
$title, $player, $controls, $timeline, $annotations,
|
|
||||||
$errorBox, $errorLogo, $errorText;
|
|
||||||
|
|
||||||
if (pandora.user.ui.item) {
|
if (ui.section != 'texts' && !ui.page) {
|
||||||
|
if (!ui.item) {
|
||||||
options = getOptions();
|
if (Ox.contains(['grid', 'clip'], view)) {
|
||||||
|
that = pandora.ui.embedError(true);
|
||||||
pandora.api.get({id: ui.item, keys: [
|
} else if (Ox.contains(['map', 'calendar'], view)) {
|
||||||
'duration', 'layers', 'parts', 'posterFrame',
|
that = pandora.ui.embedNavigation(view);
|
||||||
'rightslevel', 'size', 'title', 'videoRatio'
|
|
||||||
]}, function(result) {
|
|
||||||
|
|
||||||
video = Ox.extend(result.data, pandora.getVideoOptions(result.data));
|
|
||||||
|
|
||||||
var isFrame = options['in'] !== void 0 && (
|
|
||||||
options['in'] == options.out
|
|
||||||
|| options['in'] == video.duration
|
|
||||||
),
|
|
||||||
sizes = getSizes();
|
|
||||||
|
|
||||||
options.height = sizes.videoHeight;
|
|
||||||
|
|
||||||
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.VideoPlayer(Ox.extend({
|
|
||||||
censored: video.censored,
|
|
||||||
censoredIcon: pandora.site.cantPlay.icon,
|
|
||||||
censoredTooltip: pandora.site.cantPlay.text,
|
|
||||||
controlsBottom: (
|
|
||||||
isFrame ? [] : ['play', 'volume']
|
|
||||||
).concat(
|
|
||||||
['scale']
|
|
||||||
).concat(
|
|
||||||
Ox.Fullscreen.available && options.showCloseButton ? ['fullscreen'] : []
|
|
||||||
).concat(
|
|
||||||
['timeline', 'position', 'settings']
|
|
||||||
),
|
|
||||||
controlsTooltips: {
|
|
||||||
close: 'Close',
|
|
||||||
open: 'Watch on ' + pandora.site.site.name
|
|
||||||
},
|
|
||||||
controlsTop: [
|
|
||||||
options.showCloseButton ? 'close'
|
|
||||||
: Ox.Fullscreen.available ? 'fullscreen'
|
|
||||||
: 'space16'
|
|
||||||
].concat(
|
|
||||||
['title', 'open']
|
|
||||||
),
|
|
||||||
duration: video.duration,
|
|
||||||
enableFullscreen: Ox.Fullscreen.available,
|
|
||||||
enableKeyboard: !isFrame,
|
|
||||||
enableMouse: !isFrame,
|
|
||||||
enablePosition: !isFrame,
|
|
||||||
enableSubtitles: true,
|
|
||||||
enableTimeline: !isFrame,
|
|
||||||
enableVolume: !isFrame,
|
|
||||||
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',
|
|
||||||
timelineType: options.showTimeline
|
|
||||||
? options.timeline : '',
|
|
||||||
timelineTypes: options.showTimeline
|
|
||||||
? pandora.site.timelines : [],
|
|
||||||
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({
|
|
||||||
fullscreen: function(data) {
|
|
||||||
Ox.Fullscreen.toggle();
|
|
||||||
},
|
|
||||||
open: function() {
|
|
||||||
$player.options({paused: true});
|
|
||||||
var url = document.location.protocol + '//'
|
|
||||||
+ document.location.hostname + '/'
|
|
||||||
+ options.item + '/'
|
|
||||||
+ Ox.formatDuration($player.options('position'));
|
|
||||||
window.open(url, '_blank');
|
|
||||||
},
|
|
||||||
playing: function(data) {
|
|
||||||
setPosition(data.position, true);
|
|
||||||
},
|
|
||||||
position: function(data) {
|
|
||||||
setPosition(data.position);
|
|
||||||
},
|
|
||||||
subtitles: function(data) {
|
|
||||||
options.showTimeline && $timeline.options({
|
|
||||||
subtitles: data.subtitles ? video.subtitles : []
|
|
||||||
});
|
|
||||||
},
|
|
||||||
timeline: function(data) {
|
|
||||||
options.showTimeline && $timeline.options({
|
|
||||||
type: data.timeline
|
|
||||||
});
|
|
||||||
}
|
|
||||||
})
|
|
||||||
.bindEvent(function(data, event) {
|
|
||||||
if (Ox.contains(['close', 'paused'], event)) {
|
|
||||||
Ox.$parent.postMessage(event, data);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
$controls = Ox.Element();
|
|
||||||
|
|
||||||
if (options.showTimeline) {
|
|
||||||
$timeline = Ox.LargeVideoTimeline(Ox.extend({
|
|
||||||
disabled: isFrame,
|
|
||||||
duration: video.duration,
|
|
||||||
getImageURL: function(type, i) {
|
|
||||||
return '/' + ui.item + '/timeline' + type + '64p' + i + '.jpg';
|
|
||||||
},
|
|
||||||
position: options.position,
|
|
||||||
showInToOut: options.playInToOut && options['in'] < options.out,
|
|
||||||
subtitles: ui.videoSubtitles ? video.subtitles : [],
|
|
||||||
type: options.timeline,
|
|
||||||
width: window.innerWidth - 16
|
|
||||||
}, options['in'] ? {
|
|
||||||
'in': options['in']
|
|
||||||
} : {}, options.out ? {
|
|
||||||
out: options.out
|
|
||||||
} : {}))
|
|
||||||
.css({
|
|
||||||
top: '4px',
|
|
||||||
left: '4px'
|
|
||||||
})
|
|
||||||
.bindEvent({
|
|
||||||
mousedown: that.gainFocus,
|
|
||||||
position: changeTimeline
|
|
||||||
})
|
|
||||||
.appendTo($controls);
|
|
||||||
}
|
|
||||||
|
|
||||||
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();
|
|
||||||
}
|
|
||||||
|
|
||||||
$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: sizes.innerHeight},
|
|
||||||
{element: $annotations}
|
|
||||||
],
|
|
||||||
orientation: 'vertical'
|
|
||||||
});
|
|
||||||
|
|
||||||
that.setElement($outerPanel);
|
|
||||||
|
|
||||||
});
|
|
||||||
|
|
||||||
} else {
|
|
||||||
|
|
||||||
that.addClass('OxScreen')
|
|
||||||
.css({
|
|
||||||
position: 'absolute',
|
|
||||||
left: 0,
|
|
||||||
top: 0,
|
|
||||||
right: 0,
|
|
||||||
bottom: 0,
|
|
||||||
});
|
|
||||||
|
|
||||||
$errorBox = $('<div>')
|
|
||||||
.css({
|
|
||||||
position: 'absolute',
|
|
||||||
left: 0,
|
|
||||||
top: 0,
|
|
||||||
right: 0,
|
|
||||||
bottom: 0,
|
|
||||||
width: '96px',
|
|
||||||
height: '96px',
|
|
||||||
padding: '16px',
|
|
||||||
margin: 'auto'
|
|
||||||
})
|
|
||||||
.appendTo(that);
|
|
||||||
|
|
||||||
$errorLogo = $('<img>')
|
|
||||||
.css({width: '96px', opacity: 0})
|
|
||||||
.one({
|
|
||||||
load: function() {
|
|
||||||
$errorLogo.animate({opacity: 1}, 250);
|
|
||||||
}
|
|
||||||
})
|
|
||||||
.attr({src: '/static/png/logo.png'})
|
|
||||||
.appendTo($errorBox);
|
|
||||||
|
|
||||||
$errorText = $('<div>')
|
|
||||||
.css({marginTop: '4px', fontSize: '9px', textAlign: 'center'})
|
|
||||||
.html('This view cannot<br>be embedded.')
|
|
||||||
.appendTo($errorBox);
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
function changeTimeline(data) {
|
|
||||||
var position = options.playInToOut
|
|
||||||
? Ox.limit(data.position, options['in'], options.out)
|
|
||||||
: data.position;
|
|
||||||
$player.options({position: position});
|
|
||||||
position != data.position && $timeline.options({position: position});
|
|
||||||
options.showAnnotations && $annotations.options({position: position});
|
|
||||||
}
|
|
||||||
|
|
||||||
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: pandora.site.layers.map(function(layer) {
|
|
||||||
return layer.id;
|
|
||||||
}),
|
|
||||||
showTimeline: false,
|
|
||||||
timeline: ui.videoTimeline,
|
|
||||||
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;
|
|
||||||
} else if (options['in'] && options['in'] == options.out) {
|
|
||||||
options.invertHighlight = false;
|
|
||||||
options.paused = true;
|
|
||||||
options.playInToOut = false;
|
|
||||||
}
|
|
||||||
return options;
|
|
||||||
}
|
|
||||||
|
|
||||||
function getSizes() {
|
|
||||||
var innerHeight,
|
|
||||||
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 {
|
} else {
|
||||||
videoHeight = window.innerHeight
|
if (view == 'info') {
|
||||||
- (options.title ? 32 : 0)
|
that = pandora.ui.embedError(true);
|
||||||
- (options.showTimeline ? 80 : 0);
|
} else if (Ox.contains(['player', 'editor'], view)) {
|
||||||
}
|
that = pandora.ui.embedPlayer();
|
||||||
innerHeight = videoHeight
|
} else if (view == 'timeline') {
|
||||||
+ (options.title ? 32 : 0)
|
that = pandora.ui.embedError(true);
|
||||||
+ (options.showTimeline ? 80 : 0);
|
} else if (view == 'clips') {
|
||||||
return {innerHeight: innerHeight, videoHeight: videoHeight};
|
that = pandora.ui.embedError(true);
|
||||||
}
|
} else if (Ox.contains(['map', 'calendar'], view)) {
|
||||||
|
that = pandora.ui.embedNavigation(view);
|
||||||
function selectAnnotation(data) {
|
|
||||||
if (data.id) {
|
|
||||||
setPosition(Math.max(data['in'], options['in'] || 0));
|
|
||||||
$annotations.options({selected: ''});
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
function setPosition(position, playing) {
|
if (!that) {
|
||||||
!playing && $player.options({position: position});
|
that = pandora.ui.embedError();
|
||||||
options.showTimeline && $timeline.options({position: position});
|
|
||||||
options.showAnnotations && $annotations.options({position: position});
|
|
||||||
}
|
}
|
||||||
|
|
||||||
that.display = function() {
|
that.display = function() {
|
||||||
|
|
@ -376,14 +45,7 @@ pandora.ui.embedPanel = function() {
|
||||||
|
|
||||||
that.reloadPanel = function() {
|
that.reloadPanel = function() {
|
||||||
that.setElement(pandora.$ui.embedPanel = pandora.ui.embedPanel());
|
that.setElement(pandora.$ui.embedPanel = pandora.ui.embedPanel());
|
||||||
};
|
return that;
|
||||||
|
|
||||||
that.resizePanel = function() {
|
|
||||||
var sizes = getSizes();
|
|
||||||
$player.options({width: window.innerWidth, height: sizes.videoHeight});
|
|
||||||
$outerPanel.size(0, sizes.innerHeight);
|
|
||||||
options.showTimeline && $timeline.options({width: window.innerWidth - 16});
|
|
||||||
options.showAnnotations && $annotations.options({width: window.innerWidth});
|
|
||||||
};
|
};
|
||||||
|
|
||||||
that.bindEvent({
|
that.bindEvent({
|
||||||
|
|
@ -393,8 +55,6 @@ pandora.ui.embedPanel = function() {
|
||||||
pandora_hash: that.reloadPanel
|
pandora_hash: that.reloadPanel
|
||||||
});
|
});
|
||||||
|
|
||||||
Ox.$parent.postMessage('loaded');
|
|
||||||
|
|
||||||
return that;
|
return that;
|
||||||
|
|
||||||
};
|
};
|
||||||
|
|
|
||||||
334
static/js/pandora/embedPlayer.js
Normal file
334
static/js/pandora/embedPlayer.js
Normal file
|
|
@ -0,0 +1,334 @@
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
pandora.ui.embedPlayer = function() {
|
||||||
|
|
||||||
|
var that = Ox.Element(),
|
||||||
|
ui = pandora.user.ui,
|
||||||
|
defaults = {
|
||||||
|
annotationsFont: ui.annotationsFont,
|
||||||
|
annotationsRange: ui.annotationsRange,
|
||||||
|
annotationsSort: ui.annotationsSort,
|
||||||
|
invertHighlight: true,
|
||||||
|
matchRatio: false,
|
||||||
|
paused: true,
|
||||||
|
playInToOut: true,
|
||||||
|
showAnnotations: false,
|
||||||
|
showCloseButton: false,
|
||||||
|
showLayers: pandora.site.layers.map(function(layer) {
|
||||||
|
return layer.id;
|
||||||
|
}),
|
||||||
|
showTimeline: false,
|
||||||
|
timeline: ui.videoTimeline,
|
||||||
|
width: window.innerWidth
|
||||||
|
},
|
||||||
|
options = getOptions(),
|
||||||
|
video,
|
||||||
|
$innerPanel, $outerPanel,
|
||||||
|
$title, $player, $controls, $timeline, $annotations;
|
||||||
|
|
||||||
|
pandora.api.get({id: ui.item, keys: [
|
||||||
|
'duration', 'layers', 'parts', 'posterFrame',
|
||||||
|
'rightslevel', 'size', 'title', 'videoRatio'
|
||||||
|
]}, function(result) {
|
||||||
|
|
||||||
|
video = Ox.extend(result.data, pandora.getVideoOptions(result.data));
|
||||||
|
|
||||||
|
var isFrame = options['in'] !== void 0 && (
|
||||||
|
options['in'] == options.out
|
||||||
|
|| options['in'] == video.duration
|
||||||
|
),
|
||||||
|
sizes = getSizes();
|
||||||
|
|
||||||
|
options.height = sizes.videoHeight;
|
||||||
|
|
||||||
|
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.VideoPlayer(Ox.extend({
|
||||||
|
censored: video.censored,
|
||||||
|
censoredIcon: pandora.site.cantPlay.icon,
|
||||||
|
censoredTooltip: pandora.site.cantPlay.text,
|
||||||
|
controlsBottom: (
|
||||||
|
isFrame ? [] : ['play', 'volume']
|
||||||
|
).concat(
|
||||||
|
['scale']
|
||||||
|
).concat(
|
||||||
|
Ox.Fullscreen.available && options.showCloseButton ? ['fullscreen'] : []
|
||||||
|
).concat(
|
||||||
|
['timeline', 'position', 'settings']
|
||||||
|
),
|
||||||
|
controlsTooltips: {
|
||||||
|
close: 'Close',
|
||||||
|
open: 'Watch on ' + pandora.site.site.name
|
||||||
|
},
|
||||||
|
controlsTop: [
|
||||||
|
options.showCloseButton ? 'close'
|
||||||
|
: Ox.Fullscreen.available ? 'fullscreen'
|
||||||
|
: 'space16'
|
||||||
|
].concat(
|
||||||
|
['title', 'open']
|
||||||
|
),
|
||||||
|
duration: video.duration,
|
||||||
|
enableFullscreen: Ox.Fullscreen.available,
|
||||||
|
enableKeyboard: !isFrame,
|
||||||
|
enableMouse: !isFrame,
|
||||||
|
enablePosition: !isFrame,
|
||||||
|
enableSubtitles: true,
|
||||||
|
enableTimeline: !isFrame,
|
||||||
|
enableVolume: !isFrame,
|
||||||
|
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',
|
||||||
|
timelineType: options.showTimeline
|
||||||
|
? options.timeline : '',
|
||||||
|
timelineTypes: options.showTimeline
|
||||||
|
? pandora.site.timelines : [],
|
||||||
|
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({
|
||||||
|
fullscreen: function(data) {
|
||||||
|
Ox.Fullscreen.toggle();
|
||||||
|
},
|
||||||
|
open: function() {
|
||||||
|
$player.options({paused: true});
|
||||||
|
var url = document.location.protocol + '//'
|
||||||
|
+ document.location.hostname + '/'
|
||||||
|
+ options.item + '/'
|
||||||
|
+ Ox.formatDuration($player.options('position'));
|
||||||
|
window.open(url, '_blank');
|
||||||
|
},
|
||||||
|
playing: function(data) {
|
||||||
|
setPosition(data.position, true);
|
||||||
|
},
|
||||||
|
position: function(data) {
|
||||||
|
setPosition(data.position);
|
||||||
|
},
|
||||||
|
subtitles: function(data) {
|
||||||
|
options.showTimeline && $timeline.options({
|
||||||
|
subtitles: data.subtitles ? video.subtitles : []
|
||||||
|
});
|
||||||
|
},
|
||||||
|
timeline: function(data) {
|
||||||
|
options.showTimeline && $timeline.options({
|
||||||
|
type: data.timeline
|
||||||
|
});
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.bindEvent(function(data, event) {
|
||||||
|
if (Ox.contains(['close', 'paused'], event)) {
|
||||||
|
Ox.$parent.postMessage(event, data);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
$controls = Ox.Element();
|
||||||
|
|
||||||
|
if (options.showTimeline) {
|
||||||
|
$timeline = Ox.LargeVideoTimeline(Ox.extend({
|
||||||
|
disabled: isFrame,
|
||||||
|
duration: video.duration,
|
||||||
|
getImageURL: function(type, i) {
|
||||||
|
return '/' + ui.item + '/timeline' + type + '64p' + i + '.jpg';
|
||||||
|
},
|
||||||
|
position: options.position,
|
||||||
|
showInToOut: options.playInToOut && options['in'] < options.out,
|
||||||
|
subtitles: ui.videoSubtitles ? video.subtitles : [],
|
||||||
|
type: options.timeline,
|
||||||
|
width: window.innerWidth - 16
|
||||||
|
}, options['in'] ? {
|
||||||
|
'in': options['in']
|
||||||
|
} : {}, options.out ? {
|
||||||
|
out: options.out
|
||||||
|
} : {}))
|
||||||
|
.css({
|
||||||
|
top: '4px',
|
||||||
|
left: '4px'
|
||||||
|
})
|
||||||
|
.bindEvent({
|
||||||
|
mousedown: that.gainFocus,
|
||||||
|
position: changeTimeline
|
||||||
|
})
|
||||||
|
.appendTo($controls);
|
||||||
|
}
|
||||||
|
|
||||||
|
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();
|
||||||
|
}
|
||||||
|
|
||||||
|
$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: sizes.innerHeight},
|
||||||
|
{element: $annotations}
|
||||||
|
],
|
||||||
|
orientation: 'vertical'
|
||||||
|
});
|
||||||
|
|
||||||
|
that.setElement($outerPanel);
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
function changeTimeline(data) {
|
||||||
|
var position = options.playInToOut
|
||||||
|
? Ox.limit(data.position, options['in'], options.out)
|
||||||
|
: data.position;
|
||||||
|
$player.options({position: position});
|
||||||
|
position != data.position && $timeline.options({position: position});
|
||||||
|
options.showAnnotations && $annotations.options({position: position});
|
||||||
|
}
|
||||||
|
|
||||||
|
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 getSizes() {
|
||||||
|
var innerHeight,
|
||||||
|
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);
|
||||||
|
return {innerHeight: innerHeight, videoHeight: videoHeight};
|
||||||
|
}
|
||||||
|
|
||||||
|
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.showTimeline && $timeline.options({position: position});
|
||||||
|
options.showAnnotations && $annotations.options({position: position});
|
||||||
|
}
|
||||||
|
|
||||||
|
that.resizePanel = function() {
|
||||||
|
var sizes = getSizes();
|
||||||
|
$player.options({width: window.innerWidth, height: sizes.videoHeight});
|
||||||
|
$outerPanel.size(0, sizes.innerHeight);
|
||||||
|
options.showTimeline && $timeline.options({width: window.innerWidth - 16});
|
||||||
|
options.showAnnotations && $annotations.options({width: window.innerWidth});
|
||||||
|
return that;
|
||||||
|
};
|
||||||
|
|
||||||
|
Ox.$parent.postMessage('loaded');
|
||||||
|
|
||||||
|
return that;
|
||||||
|
|
||||||
|
};
|
||||||
Loading…
Reference in a new issue