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": "",
|
"preferences": "",
|
||||||
"tv": ""
|
"tv": ""
|
||||||
},
|
},
|
||||||
|
"previewView": "poster",
|
||||||
"section": "items",
|
"section": "items",
|
||||||
"sequenceMode": "shape",
|
"sequenceMode": "shape",
|
||||||
"sequenceSort": [{"key": "director", "operator": "+"}],
|
"sequenceSort": [{"key": "director", "operator": "+"}],
|
||||||
|
|
|
||||||
|
|
@ -1,104 +1,9 @@
|
||||||
'use strict';
|
'use strict';
|
||||||
|
|
||||||
pandora.ui.previewDialog = function() {
|
pandora.ui.previewDialog = function() {
|
||||||
|
if (pandora.user.ui.previewView == "poster") {
|
||||||
var $image,
|
return pandora.ui.previewPoster()
|
||||||
$list = pandora.$ui.list,
|
} else if (pandora.user.ui.previewView == "player") {
|
||||||
item = Ox.last($list.options('selected')),
|
return pandora.ui.previewPlayer()
|
||||||
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();
|
|
||||||
|
|
||||||
};
|
|
||||||
|
|
||||||
|
|
|
||||||
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