174 lines
6.8 KiB
JavaScript
174 lines
6.8 KiB
JavaScript
'use strict';
|
|
|
|
pandora.ui.previewPlayer = function() {
|
|
|
|
var $player,
|
|
$list = pandora.$ui.list,
|
|
item = Ox.last($list.options('selected')),
|
|
playerRatio = pandora.site.video.previewRatio,
|
|
size = getSize(playerRatio),
|
|
ui = pandora.user.ui,
|
|
options = {},
|
|
that = Ox.Dialog({
|
|
closeButton: true,
|
|
content: Ox.Element(),
|
|
fixedRatio: true,
|
|
focus: false,
|
|
height: size.height,
|
|
maximizeButton: true,
|
|
title: Ox._('Loading...'),
|
|
width: size.width
|
|
})
|
|
.bindEvent({
|
|
resize: function(data) {
|
|
// FIXME: why doesn't that.options('content') work here?
|
|
// (currently the only reason $image is in the outer scope)
|
|
$player && $player.options({
|
|
width: data.width,
|
|
height: data.height
|
|
});
|
|
},
|
|
pandora_find: function() {
|
|
that.close();
|
|
},
|
|
pandora_item: function() {
|
|
that.close();
|
|
},
|
|
pandora_page: function() {
|
|
that.close();
|
|
},
|
|
pandora_section: function() {
|
|
that.close();
|
|
},
|
|
close: function() {
|
|
$player.options({paused: true});
|
|
},
|
|
});
|
|
|
|
function getSize(playerRatio) {
|
|
var windowWidth = window.innerWidth * 0.8,
|
|
windowHeight = window.innerHeight * 0.8,
|
|
windowRatio = windowWidth / windowHeight;
|
|
return {
|
|
width: Math.round(playerRatio > windowRatio ? windowWidth : windowHeight * playerRatio),
|
|
height: Math.round(playerRatio < windowRatio ? windowHeight : windowWidth / playerRatio)
|
|
};
|
|
}
|
|
|
|
that.update = function() {
|
|
pandora.requests.preview && pandora.api.cancel(pandora.requests.preview);
|
|
pandora.requests.preview = pandora.api.find({
|
|
keys: [
|
|
'id', 'modified', 'playerRatio'
|
|
].concat(pandora.site.itemTitleKeys),
|
|
query: {
|
|
conditions: [{
|
|
key: 'id',
|
|
operator: '==',
|
|
value: Ox.last($list.options('selected'))
|
|
}],
|
|
operator: '&'
|
|
}
|
|
}, function(result) {
|
|
var item = result.data.items[0],
|
|
size = getSize(playerRatio),
|
|
title = pandora.getItemTitle(item, true);
|
|
pandora.api.get({id: item.id, keys: pandora.VIDEO_OPTIONS_KEYS}, function(result) {
|
|
options = Ox.extend(
|
|
{item: item.id},
|
|
ui.videoPoints[item.id] || {},
|
|
options
|
|
);
|
|
if (!options.position) {
|
|
options.position = options['in'] || 0;
|
|
}
|
|
result.data.item = item.id
|
|
let video = Ox.extend(result.data, pandora.getVideoOptions(result.data));
|
|
if (!video.subtitles) {
|
|
video.subtitles = pandora.getSubtitles(video);
|
|
}
|
|
$player = Ox.VideoPlayer({
|
|
censored: video.censored,
|
|
censoredIcon: pandora.site.cantPlay.icon,
|
|
censoredTooltip: pandora.site.cantPlay.text,
|
|
controlsBottom: [
|
|
'play',
|
|
'volume',
|
|
'scale',
|
|
'timeline',
|
|
'position',
|
|
'settings'
|
|
],
|
|
controlsTooltips: {
|
|
close: Ox._('Close'),
|
|
open: Ox._('Open {0}', [video.title])
|
|
},
|
|
controlsTop: [
|
|
Ox.Fullscreen.available ? 'fullscreen' : 'space16',
|
|
'space',
|
|
'open'
|
|
],
|
|
duration: video.duration,
|
|
enableFullscreen: Ox.Fullscreen.available,
|
|
enableKeyboard: true,
|
|
enableMouse: true,
|
|
enablePosition: true,
|
|
enableSubtitles: ui.videoSubtitles,
|
|
enableTimeline: true,
|
|
enableVolume: true,
|
|
height: size.height,
|
|
muted: ui.videoMuted,
|
|
paused: false,
|
|
loop: true,
|
|
playInToOut: false,
|
|
position: options.position,
|
|
resolution: ui.videoResolution,
|
|
scaleToFill: ui.videoScale == 'fill',
|
|
showIconOnLoad: true,
|
|
subtitles: video.subtitles,
|
|
subtitlesDefaultTrack: video.subtitlesDefaultTrack || Ox.getLanguageNameByCode(pandora.site.language),
|
|
subtitlesLayer: video.subtitlesLayer,
|
|
subtitlesOffset: ui.videoSubtitlesOffset,
|
|
subtitlesTrack: video.subtitlesTrack || Ox.getLanguageNameByCode(pandora.site.language),
|
|
timeline: pandora.getMediaURL('/' + options.item + '/' + 'timeline16p.png'),
|
|
timelineType: '',
|
|
timelineTypes: [],
|
|
title: video.title,
|
|
video: video.video,
|
|
volume: ui.videoVolume,
|
|
width: size.width
|
|
})
|
|
.bindEvent({
|
|
fullscreen: function(data) {
|
|
Ox.Fullscreen.toggle();
|
|
},
|
|
close: function() {
|
|
that.close();
|
|
},
|
|
open: function() {
|
|
pandora.UI.set({
|
|
item: options.item
|
|
});
|
|
},
|
|
position: function(data) {
|
|
pandora.UI.set(
|
|
'videoPoints.' + item.id + '.position',
|
|
data.position
|
|
);
|
|
},
|
|
});
|
|
that.options({content: $player});
|
|
|
|
});
|
|
that.options({
|
|
content: Ox.LoadingScreen().start(),
|
|
title: title,
|
|
})
|
|
.setSize(size.width, size.height);
|
|
});
|
|
return that;
|
|
}
|
|
|
|
return that.update();
|
|
|
|
};
|