add preview player
This commit is contained in:
parent
234cb42875
commit
a426f22e1e
4 changed files with 288 additions and 99 deletions
|
|
@ -1197,6 +1197,7 @@ examples (config.SITENAME.jsonc) that are part of this pan.do/ra distribution.
|
|||
"preferences": "",
|
||||
"tv": ""
|
||||
},
|
||||
"previewView": "poster",
|
||||
"section": "items",
|
||||
"sequenceMode": "shape",
|
||||
"sequenceSort": [{"key": "director", "operator": "+"}],
|
||||
|
|
|
|||
|
|
@ -1,104 +1,9 @@
|
|||
'use strict';
|
||||
|
||||
pandora.ui.previewDialog = function() {
|
||||
|
||||
var $image,
|
||||
$list = pandora.$ui.list,
|
||||
item = Ox.last($list.options('selected')),
|
||||
posterRatio = pandora.user.ui.showSitePosters
|
||||
? pandora.site.posters.ratio
|
||||
: ($list.value(item, 'posterRatio') || pandora.site.posters.ratio),
|
||||
size = getSize(posterRatio),
|
||||
|
||||
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)
|
||||
$image.css({
|
||||
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();
|
||||
},
|
||||
pandora_showsiteposters: function() {
|
||||
that.update();
|
||||
if (pandora.user.ui.previewView == "poster") {
|
||||
return pandora.ui.previewPoster()
|
||||
} else if (pandora.user.ui.previewView == "player") {
|
||||
return pandora.ui.previewPlayer()
|
||||
}
|
||||
});
|
||||
|
||||
function getSize(posterRatio) {
|
||||
var windowWidth = window.innerWidth * 0.8,
|
||||
windowHeight = window.innerHeight * 0.8,
|
||||
windowRatio = windowWidth / windowHeight;
|
||||
return {
|
||||
width: Math.round(posterRatio > windowRatio ? windowWidth : windowHeight * posterRatio),
|
||||
height: Math.round(posterRatio < windowRatio ? windowHeight : windowWidth / posterRatio)
|
||||
};
|
||||
}
|
||||
|
||||
that.update = function() {
|
||||
pandora.requests.preview && pandora.api.cancel(pandora.requests.preview);
|
||||
pandora.requests.preview = pandora.api.find({
|
||||
keys: [
|
||||
'id', 'modified', 'posterRatio'
|
||||
].concat(pandora.site.itemTitleKeys),
|
||||
query: {
|
||||
conditions: [{
|
||||
key: 'id',
|
||||
operator: '==',
|
||||
value: Ox.last($list.options('selected'))
|
||||
}],
|
||||
operator: '&'
|
||||
}
|
||||
}, function(result) {
|
||||
var item = result.data.items[0],
|
||||
posterRatio = pandora.user.ui.showSitePosters
|
||||
? pandora.site.posters.ratio
|
||||
: item.posterRatio,
|
||||
size = getSize(posterRatio),
|
||||
title = pandora.getItemTitle(item, true);
|
||||
$image = $('<img>')
|
||||
.attr({src: pandora.getMediaURL('/' + item.id + '/' + (
|
||||
pandora.user.ui.showSitePosters ? 'siteposter' : 'poster'
|
||||
) + '128.jpg?' + item.modified)})
|
||||
.css({width: size.width + 'px', height: size.height + 'px'});
|
||||
$('<img>')
|
||||
.load(function() {
|
||||
$image.attr({src: $(this).attr('src')});
|
||||
})
|
||||
.attr({src: pandora.getMediaURL('/' + item.id + '/' + (
|
||||
pandora.user.ui.showSitePosters ? 'siteposter' : 'poster'
|
||||
) + '1024.jpg?' + item.modified)});
|
||||
that.options({
|
||||
content: $image,
|
||||
title: title,
|
||||
})
|
||||
.setSize(size.width, size.height);
|
||||
});
|
||||
return that;
|
||||
}
|
||||
|
||||
return that.update();
|
||||
|
||||
};
|
||||
|
||||
|
|
|
|||
178
static/js/previewPlayer.js
Normal file
178
static/js/previewPlayer.js
Normal file
|
|
@ -0,0 +1,178 @@
|
|||
'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}', [pandora.site.itemName.singular])
|
||||
},
|
||||
controlsTop: [
|
||||
Ox.Fullscreen.available ? 'fullscreen' : 'space16',
|
||||
'title',
|
||||
'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: options.paused,
|
||||
loop: false,
|
||||
playInToOut: false,
|
||||
position: options.position,
|
||||
poster: pandora.getMediaURL('/' + options.item + '/' + '96p' + (
|
||||
options.position !== void 0 ? options.position
|
||||
: options['in'] !== void 0 ? options['in']
|
||||
: video.posterFrame
|
||||
) +'.jpg'),
|
||||
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();
|
||||
},
|
||||
open: function() {
|
||||
$player.options({paused: true});
|
||||
var url = document.location.protocol + '//'
|
||||
+ document.location.hostname + '/'
|
||||
+ options.item + '/'
|
||||
+ Ox.formatDuration($player.options('position'));
|
||||
pandora.openURL(url);
|
||||
},
|
||||
playing: function(data) {
|
||||
pandora.UI.set(
|
||||
'videoPoints.' + item.id + '.position',
|
||||
data.position
|
||||
);
|
||||
}
|
||||
});
|
||||
that.options({content: $player});
|
||||
});
|
||||
that.options({
|
||||
content: Ox.LoadingScreen(),
|
||||
title: title,
|
||||
})
|
||||
.setSize(size.width, size.height);
|
||||
});
|
||||
return that;
|
||||
}
|
||||
|
||||
return that.update();
|
||||
|
||||
};
|
||||
105
static/js/previewPoster.js
Normal file
105
static/js/previewPoster.js
Normal file
|
|
@ -0,0 +1,105 @@
|
|||
'use strict';
|
||||
|
||||
pandora.ui.previewPoster = function() {
|
||||
|
||||
var $image,
|
||||
$list = pandora.$ui.list,
|
||||
item = Ox.last($list.options('selected')),
|
||||
posterRatio = pandora.user.ui.showSitePosters
|
||||
? pandora.site.posters.ratio
|
||||
: ($list.value(item, 'posterRatio') || pandora.site.posters.ratio),
|
||||
size = getSize(posterRatio),
|
||||
|
||||
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)
|
||||
$image.css({
|
||||
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();
|
||||
},
|
||||
pandora_showsiteposters: function() {
|
||||
that.update();
|
||||
}
|
||||
});
|
||||
|
||||
function getSize(posterRatio) {
|
||||
var windowWidth = window.innerWidth * 0.8,
|
||||
windowHeight = window.innerHeight * 0.8,
|
||||
windowRatio = windowWidth / windowHeight;
|
||||
return {
|
||||
width: Math.round(posterRatio > windowRatio ? windowWidth : windowHeight * posterRatio),
|
||||
height: Math.round(posterRatio < windowRatio ? windowHeight : windowWidth / posterRatio)
|
||||
};
|
||||
}
|
||||
|
||||
that.update = function() {
|
||||
pandora.requests.preview && pandora.api.cancel(pandora.requests.preview);
|
||||
pandora.requests.preview = pandora.api.find({
|
||||
keys: [
|
||||
'id', 'modified', 'posterRatio'
|
||||
].concat(pandora.site.itemTitleKeys),
|
||||
query: {
|
||||
conditions: [{
|
||||
key: 'id',
|
||||
operator: '==',
|
||||
value: Ox.last($list.options('selected'))
|
||||
}],
|
||||
operator: '&'
|
||||
}
|
||||
}, function(result) {
|
||||
var item = result.data.items[0],
|
||||
posterRatio = pandora.user.ui.showSitePosters
|
||||
? pandora.site.posters.ratio
|
||||
: item.posterRatio,
|
||||
size = getSize(posterRatio),
|
||||
title = pandora.getItemTitle(item, true);
|
||||
$image = $('<img>')
|
||||
.attr({src: pandora.getMediaURL('/' + item.id + '/' + (
|
||||
pandora.user.ui.showSitePosters ? 'siteposter' : 'poster'
|
||||
) + '128.jpg?' + item.modified)})
|
||||
.css({width: size.width + 'px', height: size.height + 'px'});
|
||||
$('<img>')
|
||||
.load(function() {
|
||||
$image.attr({src: $(this).attr('src')});
|
||||
})
|
||||
.attr({src: pandora.getMediaURL('/' + item.id + '/' + (
|
||||
pandora.user.ui.showSitePosters ? 'siteposter' : 'poster'
|
||||
) + '1024.jpg?' + item.modified)});
|
||||
that.options({
|
||||
content: $image,
|
||||
title: title,
|
||||
})
|
||||
.setSize(size.width, size.height);
|
||||
});
|
||||
return that;
|
||||
}
|
||||
|
||||
return that.update();
|
||||
|
||||
};
|
||||
|
||||
|
||||
Loading…
Add table
Add a link
Reference in a new issue