1
0
Fork 0
mirror of https://github.com/jellyfin/jellyfin-web synced 2025-03-30 19:56:21 +00:00

merge branch master into pdf-reader

This commit is contained in:
dkanada 2020-10-20 13:22:09 +09:00
commit 6b302ed20b
292 changed files with 7971 additions and 6918 deletions

View file

@ -1,5 +1,4 @@
/* eslint-disable indent */
import connectionManager from 'connectionManager';
class BackdropScreensaver {
constructor() {
@ -21,7 +20,7 @@ class BackdropScreensaver {
Limit: 200
};
const apiClient = connectionManager.currentApiClient();
const apiClient = window.connectionManager.currentApiClient();
apiClient.getItems(apiClient.getCurrentUserId(), query).then((result) => {
if (result.Items.length) {
import('slideshow').then(({default: Slideshow}) => {

View file

@ -1,4 +1,4 @@
import connectionManager from 'connectionManager';
import browser from 'browser';
import loading from 'loading';
import keyboardnavigation from 'keyboardnavigation';
import dialogHelper from 'dialogHelper';
@ -19,6 +19,8 @@ export class BookPlayer {
this.onDialogClosed = this.onDialogClosed.bind(this);
this.openTableOfContents = this.openTableOfContents.bind(this);
this.prevChapter = this.prevChapter.bind(this);
this.nextChapter = this.nextChapter.bind(this);
this.onWindowKeyUp = this.onWindowKeyUp.bind(this);
this.onTouchStart = this.onTouchStart.bind(this);
}
@ -123,21 +125,6 @@ export class BookPlayer {
}
}
onTouchStart(e) {
const rendition = this.rendition;
const book = rendition.book;
// epubjs stores pages off the screen or something for preloading
// get the modulus of the touch event to account for the increased width
if (!this.loaded || !e.touches || e.touches.length === 0) return;
const touch = e.touches[0].clientX % dom.getWindowSize().innerWidth;
if (touch < dom.getWindowSize().innerWidth / 2) {
book.package.metadata.direction === 'rtl' ? rendition.next() : rendition.prev();
} else {
book.package.metadata.direction === 'rtl' ? rendition.prev() : rendition.next();
}
}
onDialogClosed() {
this.stop();
}
@ -146,27 +133,33 @@ export class BookPlayer {
const elem = this.mediaElement;
elem.addEventListener('close', this.onDialogClosed, {once: true});
elem.querySelector('.btnBookplayerExit').addEventListener('click', this.onDialogClosed, {once: true});
elem.querySelector('.btnBookplayerToc').addEventListener('click', this.openTableOfContents);
elem.querySelector('#btnBookplayerExit').addEventListener('click', this.onDialogClosed, {once: true});
elem.querySelector('#btnBookplayerToc').addEventListener('click', this.openTableOfContents);
if (browser.mobile) {
elem.querySelector('#btnBookplayerPrev').addEventListener('click', this.prevChapter);
elem.querySelector('#btnBookplayerNext').addEventListener('click', this.nextChapter);
}
}
bindEvents() {
this.bindMediaElementEvents();
document.addEventListener('keyup', this.onWindowKeyUp);
document.addEventListener('touchstart', this.onTouchStart);
// FIXME: document keyup event is not triggered when epub is in focus
// FIXME: I don't really get why document keyup event is not triggered when epub is in focus
this.rendition.on('keyup', this.onWindowKeyUp);
this.rendition.on('touchstart', this.onTouchStart);
}
unbindMediaElementEvents() {
const elem = this.mediaElement;
elem.removeEventListener('close', this.onDialogClosed);
elem.querySelector('.btnBookplayerExit').removeEventListener('click', this.onDialogClosed);
elem.querySelector('.btnBookplayerToc').removeEventListener('click', this.openTableOfContents);
elem.querySelector('#btnBookplayerExit').removeEventListener('click', this.onDialogClosed);
elem.querySelector('#btnBookplayerToc').removeEventListener('click', this.openTableOfContents);
if (browser.mobile) {
elem.querySelector('#btnBookplayerPrev').removeEventListener('click', this.prevChapter);
elem.querySelector('#btnBookplayerNext').removeEventListener('click', this.nextChapter);
}
}
unbindEvents() {
@ -175,11 +168,9 @@ export class BookPlayer {
}
document.removeEventListener('keyup', this.onWindowKeyUp);
document.removeEventListener('touchstart', this.onTouchStart);
if (this.rendition) {
this.rendition.off('keyup', this.onWindowKeyUp);
this.rendition.off('touchstart', this.onTouchStart);
}
}
@ -189,6 +180,16 @@ export class BookPlayer {
}
}
prevChapter(e) {
this._rendition.prev();
e.preventDefault();
}
nextChapter(e) {
this._rendition.next();
e.preventDefault();
}
createMediaElement() {
let elem = this.mediaElement;
if (elem) {
@ -207,13 +208,22 @@ export class BookPlayer {
});
let html = '';
html += '<div class="topRightActionButtons">';
html += '<button is="paper-icon-button-light" class="autoSize bookplayerButton btnBookplayerExit hide-mouse-idle-tv" tabindex="-1"><i class="material-icons bookplayerButtonIcon close"></i></button>';
if (browser.mobile) {
html += '<div class="button-wrapper top-button"><button id="btnBookplayerPrev" is="paper-icon-button-light" class="autoSize bookplayerButton hide-mouse-idle-tv"><i class="material-icons bookplayerButtonIcon navigate_before"></i> Prev</button></div>';
}
html += '<div id="viewer">';
html += '<div class="topButtons">';
html += '<button is="paper-icon-button-light" id="btnBookplayerToc" class="autoSize bookplayerButton hide-mouse-idle-tv" tabindex="-1"><i class="material-icons bookplayerButtonIcon toc"></i></button>';
html += '<button is="paper-icon-button-light" id="btnBookplayerExit" class="autoSize bookplayerButton hide-mouse-idle-tv" tabindex="-1"><i class="material-icons bookplayerButtonIcon close"></i></button>';
html += '</div>';
html += '<div class="topLeftActionButtons">';
html += '<button is="paper-icon-button-light" class="autoSize bookplayerButton btnBookplayerToc hide-mouse-idle-tv" tabindex="-1"><i class="material-icons bookplayerButtonIcon toc"></i></button>';
html += '</div>';
if (browser.mobile) {
html += '<div class="button-wrapper bottom-button"><button id="btnBookplayerNext" is="paper-icon-button-light" class="autoSize bookplayerButton hide-mouse-idle-tv">Next <i class="material-icons bookplayerButtonIcon navigate_next"></i></button></div>';
}
elem.id = 'bookPlayer';
elem.innerHTML = html;
@ -224,6 +234,21 @@ export class BookPlayer {
return elem;
}
render(elem, book) {
if (browser.mobile) {
return book.renderTo(elem, {
width: '100%',
height: '100%',
flow: 'scrolled-doc'
});
} else {
return book.renderTo(elem, {
width: '100%',
height: '100%'
});
}
}
setCurrentSrc(elem, options) {
const item = options.items[0];
this.item = item;
@ -236,13 +261,13 @@ export class BookPlayer {
};
const serverId = item.ServerId;
const apiClient = connectionManager.getApiClient(serverId);
const apiClient = window.connectionManager.getApiClient(serverId);
return new Promise((resolve, reject) => {
import('epubjs').then(({default: epubjs}) => {
const downloadHref = apiClient.getItemDownloadUrl(item.Id);
const book = epubjs(downloadHref, {openAs: 'epub'});
const rendition = book.renderTo(elem, {width: '100%', height: '96%'});
const rendition = this.render('viewer', book);
this.currentSrc = downloadHref;
this.rendition = rendition;

View file

@ -7,18 +7,20 @@
background: #fff;
}
.topRightActionButtons {
right: 0.5vh;
.topButtons {
top: 0.5vh;
z-index: 1002;
position: absolute;
position: sticky;
}
.topLeftActionButtons {
left: 0.5vh;
top: 0.5vh;
z-index: 1002;
position: absolute;
#btnBookplayerToc {
float: left;
margin-left: 2vw;
}
#btnBookplayerExit {
float: right;
margin-right: 2vw;
}
.bookplayerButtonIcon {
@ -37,3 +39,31 @@
.bookplayerErrorMsg {
text-align: center;
}
#viewer {
align-items: flex-start;
}
#btnBookplayerPrev {
margin: 0.5vh 0.5vh;
color: black;
}
#btnBookplayerNext {
margin: 0.5vh 0.5vh;
color: black;
}
.button-wrapper {
text-align: center;
position: relative;
height: 0;
}
.top-button {
margin: 0.5vh 2em;
}
.bottom-button {
margin: 2em 0.5vh;
}

View file

@ -221,8 +221,8 @@ function getCachedValue(key) {
return null;
}
events.on(ConnectionManager, 'localusersignedin', clearCache);
events.on(ConnectionManager, 'localusersignedout', clearCache);
events.on(window.connectionManager, 'localusersignedin', clearCache);
events.on(window.connectionManager, 'localusersignedout', clearCache);
export default {
getServerAddress: getServerAddress

View file

@ -1,7 +1,6 @@
import appSettings from 'appSettings';
import * as userSettings from 'userSettings';
import playbackManager from 'playbackManager';
import connectionManager from 'connectionManager';
import globalize from 'globalize';
import events from 'events';
import castSenderApiLoader from 'castSenderApiLoader';
@ -325,11 +324,11 @@ class CastPlayer {
let apiClient;
if (message.options && message.options.ServerId) {
apiClient = connectionManager.getApiClient(message.options.ServerId);
apiClient = window.connectionManager.getApiClient(message.options.ServerId);
} else if (message.options && message.options.items && message.options.items.length) {
apiClient = connectionManager.getApiClient(message.options.items[0].ServerId);
apiClient = window.connectionManager.getApiClient(message.options.items[0].ServerId);
} else {
apiClient = connectionManager.currentApiClient();
apiClient = window.connectionManager.currentApiClient();
}
message = Object.assign(message, {
@ -673,7 +672,7 @@ class ChromecastPlayer {
playWithCommand(options, command) {
if (!options.items) {
const apiClient = connectionManager.getApiClient(options.serverId);
const apiClient = window.connectionManager.getApiClient(options.serverId);
const instance = this;
return apiClient.getItem(apiClient.getCurrentUserId(), options.ids[0]).then(function (item) {
@ -985,7 +984,7 @@ class ChromecastPlayer {
}
shuffle(item) {
const apiClient = connectionManager.getApiClient(item.ServerId);
const apiClient = window.connectionManager.getApiClient(item.ServerId);
const userId = apiClient.getCurrentUserId();
const instance = this;
@ -998,7 +997,7 @@ class ChromecastPlayer {
}
instantMix(item) {
const apiClient = connectionManager.getApiClient(item.ServerId);
const apiClient = window.connectionManager.getApiClient(item.ServerId);
const userId = apiClient.getCurrentUserId();
const instance = this;
@ -1036,7 +1035,7 @@ class ChromecastPlayer {
}
const instance = this;
const apiClient = connectionManager.getApiClient(options.serverId);
const apiClient = window.connectionManager.getApiClient(options.serverId);
return getItemsForPlayback(apiClient, {
Ids: options.ids.join(',')

View file

@ -1,4 +1,3 @@
import connectionManager from 'connectionManager';
import loading from 'loading';
import dialogHelper from 'dialogHelper';
import keyboardnavigation from 'keyboardnavigation';
@ -20,14 +19,14 @@ export class ComicsPlayer {
play(options) {
this.progress = 0;
let elem = this.createMediaElement();
const elem = this.createMediaElement();
return this.setCurrentSrc(elem, options);
}
stop() {
this.unbindEvents();
let elem = this.mediaElement;
const elem = this.mediaElement;
if (elem) {
dialogHelper.close(elem);
this.mediaElement = null;
@ -41,7 +40,7 @@ export class ComicsPlayer {
}
onWindowKeyUp(e) {
let key = keyboardnavigation.getKeyName(e);
const key = keyboardnavigation.getKeyName(e);
switch (key) {
case 'Escape':
this.stop();
@ -88,23 +87,23 @@ export class ComicsPlayer {
}
setCurrentSrc(elem, options) {
let item = options.items[0];
const item = options.items[0];
this.currentItem = item;
loading.show();
let serverId = item.ServerId;
let apiClient = connectionManager.getApiClient(serverId);
const serverId = item.ServerId;
const apiClient = window.connectionManager.getApiClient(serverId);
libarchive.Archive.init({
workerUrl: appRouter.baseUrl() + '/libraries/worker-bundle.js'
});
return new Promise((resolve, reject) => {
let downloadUrl = apiClient.getItemDownloadUrl(item.Id);
const downloadUrl = apiClient.getItemDownloadUrl(item.Id);
const archiveSource = new ArchiveSource(downloadUrl);
var instance = this;
const instance = this;
import('swiper').then(({default: Swiper}) => {
archiveSource.load().then(() => {
loading.hide();
@ -170,18 +169,18 @@ class ArchiveSource {
}
async load() {
let res = await fetch(this.url);
const res = await fetch(this.url);
if (!res.ok) {
return;
}
let blob = await res.blob();
const blob = await res.blob();
this.archive = await libarchive.Archive.open(blob);
this.raw = await this.archive.getFilesArray();
this.numberOfFiles = this.raw.length;
await this.archive.extractFiles();
let files = await this.archive.getFilesArray();
const files = await this.archive.getFilesArray();
files.sort((a, b) => {
if (a.file.name < b.file.name) {
return -1;
@ -190,9 +189,9 @@ class ArchiveSource {
}
});
for (let file of files) {
for (const file of files) {
/* eslint-disable-next-line compat/compat */
let url = URL.createObjectURL(file.file);
const url = URL.createObjectURL(file.file);
this.urls.push(url);
}
}

View file

@ -5,7 +5,6 @@ import loading from 'loading';
import dom from 'dom';
import playbackManager from 'playbackManager';
import appRouter from 'appRouter';
import connectionManager from 'connectionManager';
import {
bindEventsToHlsPlayer,
destroyHlsPlayer,
@ -115,7 +114,6 @@ function tryRemoveElement(elem) {
return new Promise(resolve => {
const duration = 240;
elem.style.animation = `htmlvideoplayer-zoomin ${duration}ms ease-in normal`;
hidePrePlaybackPage();
dom.addEventListener(elem, dom.whichAnimationEvent(), resolve, {
once: true
});
@ -325,7 +323,7 @@ function tryRemoveElement(elem) {
console.debug(`prefetching hls playlist: ${hlsPlaylistUrl}`);
return connectionManager.getApiClient(item.ServerId).ajax({
return window.connectionManager.getApiClient(item.ServerId).ajax({
type: 'GET',
url: hlsPlaylistUrl
@ -1033,7 +1031,7 @@ function tryRemoveElement(elem) {
*/
renderSsaAss(videoElement, track, item) {
const attachments = this._currentPlayOptions.mediaSource.MediaAttachments || [];
const apiClient = connectionManager.getApiClient(item);
const apiClient = window.connectionManager.getApiClient(item);
const htmlVideoPlayer = this;
const options = {
video: videoElement,
@ -1329,17 +1327,24 @@ function tryRemoveElement(elem) {
this.#videoDialog = dlg;
this.#mediaElement = videoElement;
if (options.fullscreen) {
hidePrePlaybackPage();
}
// don't animate on smart tv's, too slow
if (options.fullscreen && browser.supportsCssAnimation() && !browser.slow) {
return zoomIn(dlg).then(function () {
return videoElement;
});
} else {
hidePrePlaybackPage();
return videoElement;
}
});
} else {
if (options.fullscreen) {
hidePrePlaybackPage();
}
return Promise.resolve(dlg.querySelector('video'));
}
}
@ -1390,7 +1395,12 @@ function tryRemoveElement(elem) {
const list = [];
const video = document.createElement('video');
if (video.webkitSupportsPresentationMode && typeof video.webkitSetPresentationMode === 'function' || document.pictureInPictureEnabled) {
if (
// Check non-standard Safari PiP support
typeof video.webkitSupportsPresentationMode === 'function' && video.webkitSupportsPresentationMode('picture-in-picture') && typeof video.webkitSetPresentationMode === 'function'
// Check standard PiP support
|| document.pictureInPictureEnabled
) {
list.push('PictureInPicture');
} else if (window.Windows) {
if (Windows.UI.ViewManagement.ApplicationView.getForCurrentView().isViewModeSupported(Windows.UI.ViewManagement.ApplicationViewMode.compactOverlay)) {

View file

@ -17,7 +17,11 @@
order: -1;
}
video::-webkit-media-controls {
/* Controls are enabled for devices that don't support autoplay. They will be hidden when playback starts.
In Tizen 2.3 (and probably other old web engines), subtitles are located under '-webkit-media-controls' tree.
Therefore, we hide controls only if they are enabled.
*/
video[controls]::-webkit-media-controls {
display: none !important;
}

View file

@ -1,4 +1,3 @@
import connectionManager from 'connectionManager';
export default class PhotoPlayer {
constructor() {
@ -11,11 +10,11 @@ export default class PhotoPlayer {
play(options) {
return new Promise(function (resolve, reject) {
import('slideshow').then(({default: slideshow}) => {
var index = options.startIndex || 0;
const index = options.startIndex || 0;
var apiClient = connectionManager.currentApiClient();
const apiClient = window.connectionManager.currentApiClient();
apiClient.getCurrentUser().then(function(result) {
var newSlideShow = new slideshow({
const newSlideShow = new slideshow({
showTitle: false,
cover: false,
items: options.items,

View file

@ -1,4 +1,3 @@
import connectionManager from 'connectionManager';
import globalize from 'globalize';
function showErrorMessage() {
@ -25,7 +24,7 @@ class PlayAccessValidation {
return Promise.resolve();
}
return connectionManager.getApiClient(serverId).getCurrentUser().then(function (user) {
return window.connectionManager.getApiClient(serverId).getCurrentUser().then(function (user) {
if (user.Policy.EnableMediaPlayback) {
return Promise.resolve();
}

View file

@ -1,7 +1,6 @@
import playbackManager from 'playbackManager';
import events from 'events';
import serverNotifications from 'serverNotifications';
import connectionManager from 'connectionManager';
function getActivePlayerId() {
const info = playbackManager.getPlayerInfo();
@ -54,10 +53,10 @@ function getCurrentApiClient(instance) {
const currentServerId = instance.currentServerId;
if (currentServerId) {
return connectionManager.getApiClient(currentServerId);
return window.connectionManager.getApiClient(currentServerId);
}
return connectionManager.currentApiClient();
return window.connectionManager.currentApiClient();
}
function sendCommandByName(instance, name, options) {