Merge pull request #1589 from Camc314/migrate-to-ES6-33
Migration of alphanumericshortcuts, autobackdrops and youtubeplayer plugin to ES6 modules
This commit is contained in:
dkanada
GitHub
commit
fd8baaa8c8
6 changed files with 409 additions and 422 deletions
|
|
@ -224,6 +224,8 @@
|
|||
"src/plugins/bookPlayer/plugin.js",
|
||||
"src/plugins/bookPlayer/tableOfContents.js",
|
||||
"src/plugins/photoPlayer/plugin.js",
|
||||
"src/scripts/alphanumericshortcuts.js",
|
||||
"src/scripts/autoBackdrops.js",
|
||||
"src/scripts/settings/appSettings.js",
|
||||
"src/scripts/settings/userSettings.js",
|
||||
"src/scripts/settings/webSettings.js",
|
||||
|
|
@ -236,6 +238,7 @@
|
|||
"src/scripts/imagehelper.js",
|
||||
"src/scripts/inputManager.js",
|
||||
"src/plugins/backdropScreensaver/plugin.js",
|
||||
"src/plugins/youtubePlayer/plugin.js",
|
||||
"src/components/filterdialog/filterdialog.js",
|
||||
"src/components/fetchhelper.js",
|
||||
"src/scripts/editorsidebar.js",
|
||||
|
|
|
|||
|
|
@ -331,7 +331,7 @@ define(['playbackManager', 'userSettings', 'alphaPicker', 'alphaNumericShortcuts
|
|||
}
|
||||
|
||||
if (this.enableAlphaNumericShortcuts !== false) {
|
||||
this.alphaNumericShortcuts = new AlphaNumericShortcuts({
|
||||
this.alphaNumericShortcuts = new AlphaNumericShortcuts.default({
|
||||
itemsContainer: this.itemsContainer
|
||||
});
|
||||
}
|
||||
|
|
@ -561,7 +561,7 @@ define(['playbackManager', 'userSettings', 'alphaPicker', 'alphaNumericShortcuts
|
|||
|
||||
var alphaNumericShortcuts = this.alphaNumericShortcuts;
|
||||
if (alphaNumericShortcuts) {
|
||||
alphaNumericShortcuts.destroy();
|
||||
alphaNumericShortcuts.default.destroy();
|
||||
this.alphaNumericShortcuts = null;
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -803,7 +803,7 @@ define(['globalize', 'listView', 'layoutManager', 'userSettings', 'focusManager'
|
|||
bindAll(view.querySelectorAll('.btnShuffle'), 'click', shuffle);
|
||||
}
|
||||
|
||||
this.alphaNumericShortcuts = new AlphaNumericShortcuts({
|
||||
this.alphaNumericShortcuts = new AlphaNumericShortcuts.default({
|
||||
itemsContainer: self.itemsContainer
|
||||
});
|
||||
});
|
||||
|
|
@ -817,7 +817,7 @@ define(['globalize', 'listView', 'layoutManager', 'userSettings', 'focusManager'
|
|||
var alphaNumericShortcuts = self.alphaNumericShortcuts;
|
||||
|
||||
if (alphaNumericShortcuts) {
|
||||
alphaNumericShortcuts.destroy();
|
||||
alphaNumericShortcuts.default.destroy();
|
||||
self.alphaNumericShortcuts = null;
|
||||
}
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,199 +1,204 @@
|
|||
define(['require', 'events', 'browser', 'appRouter', 'loading'], function (require, events, browser, appRouter, loading) {
|
||||
'use strict';
|
||||
/* globals YT */
|
||||
import require from 'require';
|
||||
import events from 'events';
|
||||
import browser from 'browser';
|
||||
import appRouter from 'appRouter';
|
||||
import loading from 'loading';
|
||||
|
||||
function zoomIn(elem, iterations) {
|
||||
var keyframes = [
|
||||
{ transform: 'scale3d(.2, .2, .2) ', opacity: '.6', offset: 0 },
|
||||
{ transform: 'none', opacity: '1', offset: 1 }
|
||||
];
|
||||
/* globals YT */
|
||||
|
||||
var timing = { duration: 240, iterations: iterations };
|
||||
return elem.animate(keyframes, timing);
|
||||
}
|
||||
function zoomIn(elem, iterations) {
|
||||
const keyframes = [
|
||||
{ transform: 'scale3d(.2, .2, .2) ', opacity: '.6', offset: 0 },
|
||||
{ transform: 'none', opacity: '1', offset: 1 }
|
||||
];
|
||||
|
||||
function createMediaElement(instance, options) {
|
||||
const timing = { duration: 240, iterations: iterations };
|
||||
return elem.animate(keyframes, timing);
|
||||
}
|
||||
|
||||
return new Promise(function (resolve, reject) {
|
||||
function createMediaElement(instance, options) {
|
||||
|
||||
var dlg = document.querySelector('.youtubePlayerContainer');
|
||||
return new Promise(function (resolve, reject) {
|
||||
|
||||
if (!dlg) {
|
||||
const dlg = document.querySelector('.youtubePlayerContainer');
|
||||
|
||||
require(['css!./style'], function () {
|
||||
if (!dlg) {
|
||||
|
||||
loading.show();
|
||||
import('css!./style').then(() => {
|
||||
|
||||
var dlg = document.createElement('div');
|
||||
loading.show();
|
||||
|
||||
dlg.classList.add('youtubePlayerContainer');
|
||||
const dlg = document.createElement('div');
|
||||
|
||||
if (options.fullscreen) {
|
||||
dlg.classList.add('onTop');
|
||||
}
|
||||
dlg.classList.add('youtubePlayerContainer');
|
||||
|
||||
dlg.innerHTML = '<div id="player"></div>';
|
||||
var videoElement = dlg.querySelector('#player');
|
||||
|
||||
document.body.insertBefore(dlg, document.body.firstChild);
|
||||
instance.videoDialog = dlg;
|
||||
|
||||
if (options.fullscreen && dlg.animate && !browser.slow) {
|
||||
zoomIn(dlg, 1).onfinish = function () {
|
||||
resolve(videoElement);
|
||||
};
|
||||
} else {
|
||||
resolve(videoElement);
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
} else {
|
||||
resolve(dlg.querySelector('#player'));
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function onVideoResize() {
|
||||
var instance = this;
|
||||
var player = instance.currentYoutubePlayer;
|
||||
var dlg = instance.videoDialog;
|
||||
if (player && dlg) {
|
||||
player.setSize(dlg.offsetWidth, dlg.offsetHeight);
|
||||
}
|
||||
}
|
||||
|
||||
function clearTimeUpdateInterval(instance) {
|
||||
if (instance.timeUpdateInterval) {
|
||||
clearInterval(instance.timeUpdateInterval);
|
||||
}
|
||||
instance.timeUpdateInterval = null;
|
||||
}
|
||||
|
||||
function onEndedInternal(instance) {
|
||||
|
||||
clearTimeUpdateInterval(instance);
|
||||
var resizeListener = instance.resizeListener;
|
||||
if (resizeListener) {
|
||||
window.removeEventListener('resize', resizeListener);
|
||||
window.removeEventListener('orientationChange', resizeListener);
|
||||
instance.resizeListener = null;
|
||||
}
|
||||
|
||||
var stopInfo = {
|
||||
src: instance._currentSrc
|
||||
};
|
||||
|
||||
events.trigger(instance, 'stopped', [stopInfo]);
|
||||
|
||||
instance._currentSrc = null;
|
||||
if (instance.currentYoutubePlayer) {
|
||||
instance.currentYoutubePlayer.destroy();
|
||||
}
|
||||
instance.currentYoutubePlayer = null;
|
||||
}
|
||||
|
||||
// 4. The API will call this function when the video player is ready.
|
||||
function onPlayerReady(event) {
|
||||
event.target.playVideo();
|
||||
}
|
||||
|
||||
function onTimeUpdate(e) {
|
||||
|
||||
events.trigger(this, 'timeupdate');
|
||||
}
|
||||
|
||||
function onPlaying(instance, playOptions, resolve) {
|
||||
|
||||
if (!instance.started) {
|
||||
|
||||
instance.started = true;
|
||||
resolve();
|
||||
clearTimeUpdateInterval(instance);
|
||||
instance.timeUpdateInterval = setInterval(onTimeUpdate.bind(instance), 500);
|
||||
|
||||
if (playOptions.fullscreen) {
|
||||
|
||||
appRouter.showVideoOsd().then(function () {
|
||||
instance.videoDialog.classList.remove('onTop');
|
||||
});
|
||||
|
||||
} else {
|
||||
appRouter.setTransparency('backdrop');
|
||||
instance.videoDialog.classList.remove('onTop');
|
||||
}
|
||||
|
||||
require(['loading'], function (loading) {
|
||||
|
||||
loading.hide();
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function setCurrentSrc(instance, elem, options) {
|
||||
|
||||
return new Promise(function (resolve, reject) {
|
||||
|
||||
require(['queryString'], function (queryString) {
|
||||
|
||||
instance._currentSrc = options.url;
|
||||
var params = queryString.parse(options.url.split('?')[1]);
|
||||
// 3. This function creates an <iframe> (and YouTube player)
|
||||
// after the API code downloads.
|
||||
window.onYouTubeIframeAPIReady = function () {
|
||||
instance.currentYoutubePlayer = new YT.Player('player', {
|
||||
height: instance.videoDialog.offsetHeight,
|
||||
width: instance.videoDialog.offsetWidth,
|
||||
videoId: params.v,
|
||||
events: {
|
||||
'onReady': onPlayerReady,
|
||||
'onStateChange': function (event) {
|
||||
if (event.data === YT.PlayerState.PLAYING) {
|
||||
onPlaying(instance, options, resolve);
|
||||
} else if (event.data === YT.PlayerState.ENDED) {
|
||||
onEndedInternal(instance);
|
||||
} else if (event.data === YT.PlayerState.PAUSED) {
|
||||
events.trigger(instance, 'pause');
|
||||
}
|
||||
}
|
||||
},
|
||||
playerVars: {
|
||||
controls: 0,
|
||||
enablejsapi: 1,
|
||||
modestbranding: 1,
|
||||
rel: 0,
|
||||
showinfo: 0,
|
||||
fs: 0,
|
||||
playsinline: 1
|
||||
}
|
||||
});
|
||||
|
||||
var resizeListener = instance.resizeListener;
|
||||
if (resizeListener) {
|
||||
window.removeEventListener('resize', resizeListener);
|
||||
window.addEventListener('resize', resizeListener);
|
||||
} else {
|
||||
resizeListener = instance.resizeListener = onVideoResize.bind(instance);
|
||||
window.addEventListener('resize', resizeListener);
|
||||
}
|
||||
window.removeEventListener('orientationChange', resizeListener);
|
||||
window.addEventListener('orientationChange', resizeListener);
|
||||
};
|
||||
|
||||
if (!window.YT) {
|
||||
var tag = document.createElement('script');
|
||||
tag.src = 'https://www.youtube.com/iframe_api';
|
||||
var firstScriptTag = document.getElementsByTagName('script')[0];
|
||||
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
|
||||
} else {
|
||||
window.onYouTubeIframeAPIReady();
|
||||
if (options.fullscreen) {
|
||||
dlg.classList.add('onTop');
|
||||
}
|
||||
|
||||
dlg.innerHTML = '<div id="player"></div>';
|
||||
const videoElement = dlg.querySelector('#player');
|
||||
|
||||
document.body.insertBefore(dlg, document.body.firstChild);
|
||||
instance.videoDialog = dlg;
|
||||
|
||||
if (options.fullscreen && dlg.animate && !browser.slow) {
|
||||
zoomIn(dlg, 1).onfinish = function () {
|
||||
resolve(videoElement);
|
||||
};
|
||||
} else {
|
||||
resolve(videoElement);
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
});
|
||||
} else {
|
||||
resolve(dlg.querySelector('#player'));
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function onVideoResize() {
|
||||
const instance = this;
|
||||
const player = instance.currentYoutubePlayer;
|
||||
const dlg = instance.videoDialog;
|
||||
if (player && dlg) {
|
||||
player.setSize(dlg.offsetWidth, dlg.offsetHeight);
|
||||
}
|
||||
}
|
||||
|
||||
function clearTimeUpdateInterval(instance) {
|
||||
if (instance.timeUpdateInterval) {
|
||||
clearInterval(instance.timeUpdateInterval);
|
||||
}
|
||||
instance.timeUpdateInterval = null;
|
||||
}
|
||||
|
||||
function onEndedInternal(instance) {
|
||||
|
||||
clearTimeUpdateInterval(instance);
|
||||
const resizeListener = instance.resizeListener;
|
||||
if (resizeListener) {
|
||||
window.removeEventListener('resize', resizeListener);
|
||||
window.removeEventListener('orientationChange', resizeListener);
|
||||
instance.resizeListener = null;
|
||||
}
|
||||
|
||||
function YoutubePlayer() {
|
||||
const stopInfo = {
|
||||
src: instance._currentSrc
|
||||
};
|
||||
|
||||
events.trigger(instance, 'stopped', [stopInfo]);
|
||||
|
||||
instance._currentSrc = null;
|
||||
if (instance.currentYoutubePlayer) {
|
||||
instance.currentYoutubePlayer.destroy();
|
||||
}
|
||||
instance.currentYoutubePlayer = null;
|
||||
}
|
||||
|
||||
// 4. The API will call this function when the video player is ready.
|
||||
function onPlayerReady(event) {
|
||||
event.target.playVideo();
|
||||
}
|
||||
|
||||
function onTimeUpdate(e) {
|
||||
|
||||
events.trigger(this, 'timeupdate');
|
||||
}
|
||||
|
||||
function onPlaying(instance, playOptions, resolve) {
|
||||
|
||||
if (!instance.started) {
|
||||
|
||||
instance.started = true;
|
||||
resolve();
|
||||
clearTimeUpdateInterval(instance);
|
||||
instance.timeUpdateInterval = setInterval(onTimeUpdate.bind(instance), 500);
|
||||
|
||||
if (playOptions.fullscreen) {
|
||||
|
||||
appRouter.showVideoOsd().then(function () {
|
||||
instance.videoDialog.classList.remove('onTop');
|
||||
});
|
||||
|
||||
} else {
|
||||
appRouter.setTransparency('backdrop');
|
||||
instance.videoDialog.classList.remove('onTop');
|
||||
}
|
||||
|
||||
import('loading').then(({default: loading}) => {
|
||||
|
||||
loading.hide();
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function setCurrentSrc(instance, elem, options) {
|
||||
|
||||
return new Promise(function (resolve, reject) {
|
||||
|
||||
import('queryString').then(({default: queryString}) => {
|
||||
|
||||
instance._currentSrc = options.url;
|
||||
const params = queryString.parse(options.url.split('?')[1]);
|
||||
// 3. This function creates an <iframe> (and YouTube player)
|
||||
// after the API code downloads.
|
||||
window.onYouTubeIframeAPIReady = function () {
|
||||
instance.currentYoutubePlayer = new YT.Player('player', {
|
||||
height: instance.videoDialog.offsetHeight,
|
||||
width: instance.videoDialog.offsetWidth,
|
||||
videoId: params.v,
|
||||
events: {
|
||||
'onReady': onPlayerReady,
|
||||
'onStateChange': function (event) {
|
||||
if (event.data === YT.PlayerState.PLAYING) {
|
||||
onPlaying(instance, options, resolve);
|
||||
} else if (event.data === YT.PlayerState.ENDED) {
|
||||
onEndedInternal(instance);
|
||||
} else if (event.data === YT.PlayerState.PAUSED) {
|
||||
events.trigger(instance, 'pause');
|
||||
}
|
||||
}
|
||||
},
|
||||
playerVars: {
|
||||
controls: 0,
|
||||
enablejsapi: 1,
|
||||
modestbranding: 1,
|
||||
rel: 0,
|
||||
showinfo: 0,
|
||||
fs: 0,
|
||||
playsinline: 1
|
||||
}
|
||||
});
|
||||
|
||||
let resizeListener = instance.resizeListener;
|
||||
if (resizeListener) {
|
||||
window.removeEventListener('resize', resizeListener);
|
||||
window.addEventListener('resize', resizeListener);
|
||||
} else {
|
||||
resizeListener = instance.resizeListener = onVideoResize.bind(instance);
|
||||
window.addEventListener('resize', resizeListener);
|
||||
}
|
||||
window.removeEventListener('orientationChange', resizeListener);
|
||||
window.addEventListener('orientationChange', resizeListener);
|
||||
};
|
||||
|
||||
if (!window.YT) {
|
||||
const tag = document.createElement('script');
|
||||
tag.src = 'https://www.youtube.com/iframe_api';
|
||||
const firstScriptTag = document.getElementsByTagName('script')[0];
|
||||
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
|
||||
} else {
|
||||
window.onYouTubeIframeAPIReady();
|
||||
}
|
||||
});
|
||||
|
||||
});
|
||||
}
|
||||
|
||||
class YoutubePlayer {
|
||||
constructor() {
|
||||
|
||||
this.name = 'Youtube Player';
|
||||
this.type = 'mediaplayer';
|
||||
|
|
@ -202,21 +207,19 @@ define(['require', 'events', 'browser', 'appRouter', 'loading'], function (requi
|
|||
// Let any players created by plugins take priority
|
||||
this.priority = 1;
|
||||
}
|
||||
|
||||
YoutubePlayer.prototype.play = function (options) {
|
||||
play(options) {
|
||||
|
||||
this.started = false;
|
||||
var instance = this;
|
||||
const instance = this;
|
||||
|
||||
return createMediaElement(this, options).then(function (elem) {
|
||||
|
||||
return setCurrentSrc(instance, elem, options);
|
||||
});
|
||||
};
|
||||
}
|
||||
stop(destroyPlayer) {
|
||||
|
||||
YoutubePlayer.prototype.stop = function (destroyPlayer) {
|
||||
|
||||
var src = this._currentSrc;
|
||||
const src = this._currentSrc;
|
||||
|
||||
if (src) {
|
||||
|
||||
|
|
@ -231,63 +234,52 @@ define(['require', 'events', 'browser', 'appRouter', 'loading'], function (requi
|
|||
}
|
||||
|
||||
return Promise.resolve();
|
||||
};
|
||||
|
||||
YoutubePlayer.prototype.destroy = function () {
|
||||
}
|
||||
destroy() {
|
||||
|
||||
appRouter.setTransparency('none');
|
||||
|
||||
var dlg = this.videoDialog;
|
||||
const dlg = this.videoDialog;
|
||||
if (dlg) {
|
||||
|
||||
this.videoDialog = null;
|
||||
|
||||
dlg.parentNode.removeChild(dlg);
|
||||
}
|
||||
};
|
||||
|
||||
YoutubePlayer.prototype.canPlayMediaType = function (mediaType) {
|
||||
}
|
||||
canPlayMediaType(mediaType) {
|
||||
|
||||
mediaType = (mediaType || '').toLowerCase();
|
||||
|
||||
return mediaType === 'audio' || mediaType === 'video';
|
||||
};
|
||||
|
||||
YoutubePlayer.prototype.canPlayItem = function (item) {
|
||||
}
|
||||
canPlayItem(item) {
|
||||
|
||||
// Does not play server items
|
||||
return false;
|
||||
};
|
||||
|
||||
YoutubePlayer.prototype.canPlayUrl = function (url) {
|
||||
}
|
||||
canPlayUrl(url) {
|
||||
|
||||
return url.toLowerCase().indexOf('youtube.com') !== -1;
|
||||
};
|
||||
|
||||
YoutubePlayer.prototype.getDeviceProfile = function () {
|
||||
}
|
||||
getDeviceProfile() {
|
||||
|
||||
return Promise.resolve({});
|
||||
};
|
||||
|
||||
YoutubePlayer.prototype.currentSrc = function () {
|
||||
}
|
||||
currentSrc() {
|
||||
return this._currentSrc;
|
||||
};
|
||||
|
||||
YoutubePlayer.prototype.setSubtitleStreamIndex = function (index) {
|
||||
};
|
||||
|
||||
YoutubePlayer.prototype.canSetAudioStreamIndex = function () {
|
||||
}
|
||||
setSubtitleStreamIndex(index) {
|
||||
}
|
||||
canSetAudioStreamIndex() {
|
||||
return false;
|
||||
};
|
||||
|
||||
YoutubePlayer.prototype.setAudioStreamIndex = function (index) {
|
||||
|
||||
};
|
||||
|
||||
}
|
||||
setAudioStreamIndex(index) {
|
||||
}
|
||||
// Save this for when playback stops, because querying the time at that point might return 0
|
||||
YoutubePlayer.prototype.currentTime = function (val) {
|
||||
currentTime(val) {
|
||||
|
||||
var currentYoutubePlayer = this.currentYoutubePlayer;
|
||||
const currentYoutubePlayer = this.currentYoutubePlayer;
|
||||
|
||||
if (currentYoutubePlayer) {
|
||||
if (val != null) {
|
||||
|
|
@ -297,92 +289,84 @@ define(['require', 'events', 'browser', 'appRouter', 'loading'], function (requi
|
|||
|
||||
return currentYoutubePlayer.getCurrentTime() * 1000;
|
||||
}
|
||||
};
|
||||
}
|
||||
duration(val) {
|
||||
|
||||
YoutubePlayer.prototype.duration = function (val) {
|
||||
|
||||
var currentYoutubePlayer = this.currentYoutubePlayer;
|
||||
const currentYoutubePlayer = this.currentYoutubePlayer;
|
||||
|
||||
if (currentYoutubePlayer) {
|
||||
return currentYoutubePlayer.getDuration() * 1000;
|
||||
}
|
||||
return null;
|
||||
};
|
||||
}
|
||||
pause() {
|
||||
|
||||
YoutubePlayer.prototype.pause = function () {
|
||||
|
||||
var currentYoutubePlayer = this.currentYoutubePlayer;
|
||||
const currentYoutubePlayer = this.currentYoutubePlayer;
|
||||
|
||||
if (currentYoutubePlayer) {
|
||||
currentYoutubePlayer.pauseVideo();
|
||||
|
||||
var instance = this;
|
||||
const instance = this;
|
||||
|
||||
// This needs a delay before the youtube player will report the correct player state
|
||||
setTimeout(function () {
|
||||
events.trigger(instance, 'pause');
|
||||
}, 200);
|
||||
}
|
||||
};
|
||||
}
|
||||
unpause() {
|
||||
|
||||
YoutubePlayer.prototype.unpause = function () {
|
||||
|
||||
var currentYoutubePlayer = this.currentYoutubePlayer;
|
||||
const currentYoutubePlayer = this.currentYoutubePlayer;
|
||||
|
||||
if (currentYoutubePlayer) {
|
||||
currentYoutubePlayer.playVideo();
|
||||
|
||||
var instance = this;
|
||||
const instance = this;
|
||||
|
||||
// This needs a delay before the youtube player will report the correct player state
|
||||
setTimeout(function () {
|
||||
events.trigger(instance, 'unpause');
|
||||
}, 200);
|
||||
}
|
||||
};
|
||||
}
|
||||
paused() {
|
||||
|
||||
YoutubePlayer.prototype.paused = function () {
|
||||
|
||||
var currentYoutubePlayer = this.currentYoutubePlayer;
|
||||
const currentYoutubePlayer = this.currentYoutubePlayer;
|
||||
|
||||
if (currentYoutubePlayer) {
|
||||
return currentYoutubePlayer.getPlayerState() === 2;
|
||||
}
|
||||
|
||||
return false;
|
||||
};
|
||||
|
||||
YoutubePlayer.prototype.volume = function (val) {
|
||||
}
|
||||
volume(val) {
|
||||
if (val != null) {
|
||||
return this.setVolume(val);
|
||||
}
|
||||
|
||||
return this.getVolume();
|
||||
};
|
||||
}
|
||||
setVolume(val) {
|
||||
|
||||
YoutubePlayer.prototype.setVolume = function (val) {
|
||||
|
||||
var currentYoutubePlayer = this.currentYoutubePlayer;
|
||||
const currentYoutubePlayer = this.currentYoutubePlayer;
|
||||
|
||||
if (currentYoutubePlayer) {
|
||||
if (val != null) {
|
||||
currentYoutubePlayer.setVolume(val);
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
getVolume() {
|
||||
|
||||
YoutubePlayer.prototype.getVolume = function () {
|
||||
|
||||
var currentYoutubePlayer = this.currentYoutubePlayer;
|
||||
const currentYoutubePlayer = this.currentYoutubePlayer;
|
||||
|
||||
if (currentYoutubePlayer) {
|
||||
return currentYoutubePlayer.getVolume();
|
||||
}
|
||||
};
|
||||
}
|
||||
setMute(mute) {
|
||||
|
||||
YoutubePlayer.prototype.setMute = function (mute) {
|
||||
|
||||
var currentYoutubePlayer = this.currentYoutubePlayer;
|
||||
const currentYoutubePlayer = this.currentYoutubePlayer;
|
||||
|
||||
if (mute) {
|
||||
if (currentYoutubePlayer) {
|
||||
|
|
@ -394,16 +378,15 @@ define(['require', 'events', 'browser', 'appRouter', 'loading'], function (requi
|
|||
currentYoutubePlayer.unMute();
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
isMuted() {
|
||||
|
||||
YoutubePlayer.prototype.isMuted = function () {
|
||||
|
||||
var currentYoutubePlayer = this.currentYoutubePlayer;
|
||||
const currentYoutubePlayer = this.currentYoutubePlayer;
|
||||
|
||||
if (currentYoutubePlayer) {
|
||||
return currentYoutubePlayer.isMuted();
|
||||
}
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
return YoutubePlayer;
|
||||
});
|
||||
export default YoutubePlayer;
|
||||
|
|
|
|||
|
|
@ -1,110 +1,111 @@
|
|||
define(['dom', 'focusManager'], function (dom, focusManager) {
|
||||
'use strict';
|
||||
import dom from 'dom';
|
||||
import focusManager from 'focusManager';
|
||||
|
||||
var inputDisplayElement;
|
||||
var currentDisplayText = '';
|
||||
var currentDisplayTextContainer;
|
||||
let inputDisplayElement;
|
||||
let currentDisplayText = '';
|
||||
let currentDisplayTextContainer;
|
||||
|
||||
function onKeyDown(e) {
|
||||
function onKeyDown(e) {
|
||||
|
||||
if (e.ctrlKey) {
|
||||
return;
|
||||
}
|
||||
if (e.shiftKey) {
|
||||
return;
|
||||
}
|
||||
if (e.altKey) {
|
||||
return;
|
||||
}
|
||||
|
||||
var key = e.key;
|
||||
var chr = key ? alphanumeric(key) : null;
|
||||
|
||||
if (chr) {
|
||||
|
||||
chr = chr.toString().toUpperCase();
|
||||
|
||||
if (chr.length === 1) {
|
||||
currentDisplayTextContainer = this.options.itemsContainer;
|
||||
onAlphanumericKeyPress(e, chr);
|
||||
}
|
||||
}
|
||||
if (e.ctrlKey) {
|
||||
return;
|
||||
}
|
||||
if (e.shiftKey) {
|
||||
return;
|
||||
}
|
||||
if (e.altKey) {
|
||||
return;
|
||||
}
|
||||
|
||||
function alphanumeric(value) {
|
||||
var letterNumber = /^[0-9a-zA-Z]+$/;
|
||||
return value.match(letterNumber);
|
||||
}
|
||||
const key = e.key;
|
||||
let chr = key ? alphanumeric(key) : null;
|
||||
|
||||
function ensureInputDisplayElement() {
|
||||
if (!inputDisplayElement) {
|
||||
inputDisplayElement = document.createElement('div');
|
||||
inputDisplayElement.classList.add('alphanumeric-shortcut');
|
||||
inputDisplayElement.classList.add('hide');
|
||||
if (chr) {
|
||||
|
||||
document.body.appendChild(inputDisplayElement);
|
||||
chr = chr.toString().toUpperCase();
|
||||
|
||||
if (chr.length === 1) {
|
||||
currentDisplayTextContainer = this.options.itemsContainer;
|
||||
onAlphanumericKeyPress(e, chr);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
var alpanumericShortcutTimeout;
|
||||
function clearAlphaNumericShortcutTimeout() {
|
||||
if (alpanumericShortcutTimeout) {
|
||||
clearTimeout(alpanumericShortcutTimeout);
|
||||
alpanumericShortcutTimeout = null;
|
||||
}
|
||||
}
|
||||
function resetAlphaNumericShortcutTimeout() {
|
||||
clearAlphaNumericShortcutTimeout();
|
||||
alpanumericShortcutTimeout = setTimeout(onAlphanumericShortcutTimeout, 2000);
|
||||
}
|
||||
function alphanumeric(value) {
|
||||
const letterNumber = /^[0-9a-zA-Z]+$/;
|
||||
return value.match(letterNumber);
|
||||
}
|
||||
|
||||
function onAlphanumericKeyPress(e, chr) {
|
||||
if (currentDisplayText.length >= 3) {
|
||||
return;
|
||||
}
|
||||
ensureInputDisplayElement();
|
||||
currentDisplayText += chr;
|
||||
inputDisplayElement.innerHTML = currentDisplayText;
|
||||
inputDisplayElement.classList.remove('hide');
|
||||
resetAlphaNumericShortcutTimeout();
|
||||
}
|
||||
|
||||
function onAlphanumericShortcutTimeout() {
|
||||
var value = currentDisplayText;
|
||||
var container = currentDisplayTextContainer;
|
||||
|
||||
currentDisplayText = '';
|
||||
currentDisplayTextContainer = null;
|
||||
inputDisplayElement.innerHTML = '';
|
||||
function ensureInputDisplayElement() {
|
||||
if (!inputDisplayElement) {
|
||||
inputDisplayElement = document.createElement('div');
|
||||
inputDisplayElement.classList.add('alphanumeric-shortcut');
|
||||
inputDisplayElement.classList.add('hide');
|
||||
clearAlphaNumericShortcutTimeout();
|
||||
selectByShortcutValue(container, value);
|
||||
|
||||
document.body.appendChild(inputDisplayElement);
|
||||
}
|
||||
}
|
||||
|
||||
let alpanumericShortcutTimeout;
|
||||
function clearAlphaNumericShortcutTimeout() {
|
||||
if (alpanumericShortcutTimeout) {
|
||||
clearTimeout(alpanumericShortcutTimeout);
|
||||
alpanumericShortcutTimeout = null;
|
||||
}
|
||||
}
|
||||
function resetAlphaNumericShortcutTimeout() {
|
||||
clearAlphaNumericShortcutTimeout();
|
||||
alpanumericShortcutTimeout = setTimeout(onAlphanumericShortcutTimeout, 2000);
|
||||
}
|
||||
|
||||
function onAlphanumericKeyPress(e, chr) {
|
||||
if (currentDisplayText.length >= 3) {
|
||||
return;
|
||||
}
|
||||
ensureInputDisplayElement();
|
||||
currentDisplayText += chr;
|
||||
inputDisplayElement.innerHTML = currentDisplayText;
|
||||
inputDisplayElement.classList.remove('hide');
|
||||
resetAlphaNumericShortcutTimeout();
|
||||
}
|
||||
|
||||
function onAlphanumericShortcutTimeout() {
|
||||
const value = currentDisplayText;
|
||||
const container = currentDisplayTextContainer;
|
||||
|
||||
currentDisplayText = '';
|
||||
currentDisplayTextContainer = null;
|
||||
inputDisplayElement.innerHTML = '';
|
||||
inputDisplayElement.classList.add('hide');
|
||||
clearAlphaNumericShortcutTimeout();
|
||||
selectByShortcutValue(container, value);
|
||||
}
|
||||
|
||||
function selectByShortcutValue(container, value) {
|
||||
|
||||
value = value.toUpperCase();
|
||||
|
||||
let focusElem;
|
||||
if (value === '#') {
|
||||
|
||||
focusElem = container.querySelector('*[data-prefix]');
|
||||
}
|
||||
|
||||
function selectByShortcutValue(container, value) {
|
||||
|
||||
value = value.toUpperCase();
|
||||
|
||||
var focusElem;
|
||||
if (value === '#') {
|
||||
|
||||
focusElem = container.querySelector('*[data-prefix]');
|
||||
}
|
||||
|
||||
if (!focusElem) {
|
||||
focusElem = container.querySelector('*[data-prefix^=\'' + value + '\']');
|
||||
}
|
||||
|
||||
if (focusElem) {
|
||||
focusManager.focus(focusElem);
|
||||
}
|
||||
if (!focusElem) {
|
||||
focusElem = container.querySelector('*[data-prefix^=\'' + value + '\']');
|
||||
}
|
||||
|
||||
function AlphaNumericShortcuts(options) {
|
||||
if (focusElem) {
|
||||
focusManager.focus(focusElem);
|
||||
}
|
||||
}
|
||||
|
||||
class AlphaNumericShortcuts {
|
||||
constructor(options) {
|
||||
|
||||
this.options = options;
|
||||
|
||||
var keyDownHandler = onKeyDown.bind(this);
|
||||
const keyDownHandler = onKeyDown.bind(this);
|
||||
|
||||
dom.addEventListener(window, 'keydown', keyDownHandler, {
|
||||
passive: true
|
||||
|
|
@ -112,10 +113,9 @@ define(['dom', 'focusManager'], function (dom, focusManager) {
|
|||
|
||||
this.keyDownHandler = keyDownHandler;
|
||||
}
|
||||
destroy() {
|
||||
|
||||
AlphaNumericShortcuts.prototype.destroy = function () {
|
||||
|
||||
var keyDownHandler = this.keyDownHandler;
|
||||
const keyDownHandler = this.keyDownHandler;
|
||||
|
||||
if (keyDownHandler) {
|
||||
dom.removeEventListener(window, 'keydown', keyDownHandler, {
|
||||
|
|
@ -124,7 +124,7 @@ define(['dom', 'focusManager'], function (dom, focusManager) {
|
|||
this.keyDownHandler = null;
|
||||
}
|
||||
this.options = null;
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
return AlphaNumericShortcuts;
|
||||
});
|
||||
export default AlphaNumericShortcuts;
|
||||
|
|
|
|||
|
|
@ -1,77 +1,78 @@
|
|||
define(['backdrop', 'userSettings', 'libraryMenu'], function (backdrop, userSettings, libraryMenu) {
|
||||
'use strict';
|
||||
import backdrop from 'backdrop';
|
||||
import * as userSettings from 'userSettings';
|
||||
import libraryMenu from 'libraryMenu';
|
||||
|
||||
var cache = {};
|
||||
const cache = {};
|
||||
|
||||
function enabled() {
|
||||
return userSettings.enableBackdrops();
|
||||
function enabled() {
|
||||
return userSettings.enableBackdrops();
|
||||
}
|
||||
|
||||
function getBackdropItemIds(apiClient, userId, types, parentId) {
|
||||
const key = `backdrops2_${userId + (types || '') + (parentId || '')}`;
|
||||
let data = cache[key];
|
||||
|
||||
if (data) {
|
||||
console.debug(`Found backdrop id list in cache. Key: ${key}`);
|
||||
data = JSON.parse(data);
|
||||
return Promise.resolve(data);
|
||||
}
|
||||
|
||||
function getBackdropItemIds(apiClient, userId, types, parentId) {
|
||||
var key = `backdrops2_${userId + (types || '') + (parentId || '')}`;
|
||||
var data = cache[key];
|
||||
|
||||
if (data) {
|
||||
console.debug(`Found backdrop id list in cache. Key: ${key}`);
|
||||
data = JSON.parse(data);
|
||||
return Promise.resolve(data);
|
||||
}
|
||||
|
||||
var options = {
|
||||
SortBy: 'IsFavoriteOrLiked,Random',
|
||||
Limit: 20,
|
||||
Recursive: true,
|
||||
IncludeItemTypes: types,
|
||||
ImageTypes: 'Backdrop',
|
||||
ParentId: parentId,
|
||||
EnableTotalRecordCount: false
|
||||
};
|
||||
return apiClient.getItems(apiClient.getCurrentUserId(), options).then(function (result) {
|
||||
var images = result.Items.map(function (i) {
|
||||
return {
|
||||
Id: i.Id,
|
||||
tag: i.BackdropImageTags[0],
|
||||
ServerId: i.ServerId
|
||||
};
|
||||
});
|
||||
cache[key] = JSON.stringify(images);
|
||||
return images;
|
||||
const options = {
|
||||
SortBy: 'IsFavoriteOrLiked,Random',
|
||||
Limit: 20,
|
||||
Recursive: true,
|
||||
IncludeItemTypes: types,
|
||||
ImageTypes: 'Backdrop',
|
||||
ParentId: parentId,
|
||||
EnableTotalRecordCount: false
|
||||
};
|
||||
return apiClient.getItems(apiClient.getCurrentUserId(), options).then(function (result) {
|
||||
const images = result.Items.map(function (i) {
|
||||
return {
|
||||
Id: i.Id,
|
||||
tag: i.BackdropImageTags[0],
|
||||
ServerId: i.ServerId
|
||||
};
|
||||
});
|
||||
}
|
||||
cache[key] = JSON.stringify(images);
|
||||
return images;
|
||||
});
|
||||
}
|
||||
|
||||
function showBackdrop(type, parentId) {
|
||||
var apiClient = window.ApiClient;
|
||||
function showBackdrop(type, parentId) {
|
||||
const apiClient = window.ApiClient;
|
||||
|
||||
if (apiClient) {
|
||||
getBackdropItemIds(apiClient, apiClient.getCurrentUserId(), type, parentId).then(function (images) {
|
||||
if (images.length) {
|
||||
backdrop.setBackdrops(images.map(function (i) {
|
||||
i.BackdropImageTags = [i.tag];
|
||||
return i;
|
||||
}));
|
||||
} else {
|
||||
backdrop.clearBackdrop();
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
pageClassOn('pageshow', 'page', function () {
|
||||
var page = this;
|
||||
|
||||
if (!page.classList.contains('selfBackdropPage')) {
|
||||
if (page.classList.contains('backdropPage')) {
|
||||
if (enabled()) {
|
||||
var type = page.getAttribute('data-backdroptype');
|
||||
var parentId = page.classList.contains('globalBackdropPage') ? '' : libraryMenu.getTopParentId();
|
||||
showBackdrop(type, parentId);
|
||||
} else {
|
||||
page.classList.remove('backdropPage');
|
||||
backdrop.clearBackdrop();
|
||||
}
|
||||
if (apiClient) {
|
||||
getBackdropItemIds(apiClient, apiClient.getCurrentUserId(), type, parentId).then(function (images) {
|
||||
if (images.length) {
|
||||
backdrop.setBackdrops(images.map(function (i) {
|
||||
i.BackdropImageTags = [i.tag];
|
||||
return i;
|
||||
}));
|
||||
} else {
|
||||
backdrop.clearBackdrop();
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
pageClassOn('pageshow', 'page', function () {
|
||||
const page = this;
|
||||
|
||||
if (!page.classList.contains('selfBackdropPage')) {
|
||||
if (page.classList.contains('backdropPage')) {
|
||||
if (enabled()) {
|
||||
const type = page.getAttribute('data-backdroptype');
|
||||
const parentId = page.classList.contains('globalBackdropPage') ? '' : libraryMenu.getTopParentId();
|
||||
showBackdrop(type, parentId);
|
||||
} else {
|
||||
page.classList.remove('backdropPage');
|
||||
backdrop.clearBackdrop();
|
||||
}
|
||||
} else {
|
||||
backdrop.clearBackdrop();
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue