jellyfin/jellyfin-web
1
0
Fork 0
mirror of https://github.com/jellyfin/jellyfin-web.git synced 2026-09-03 03:50:02 +03:00
Code Issues Packages Projects Releases Wiki Activity

improve font size selection in epub files

Browse Source
This commit is contained in:
dkanada
2026-07-21 10:41:18 +09:00
parent 11dfed9df3
commit 7baed9bcdc
1 changed files with 31 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/plugins/bookPlayer/plugin.js
+31 -23
View File
@@ -23,9 +23,9 @@ import html from './template.html';
import './style.scss';
const THEMES = {
'dark': { 'body': { 'color': '#d8dadc', 'background': '#000', 'font-size': 'medium' } },
'sepia': { 'body': { 'color': '#d8a262', 'background': '#000', 'font-size': 'medium' } },
'light': { 'body': { 'color': '#000', 'background': '#fff', 'font-size': 'medium' } }
'dark': { 'body': { 'color': '#d8dadc', 'background': '#000' } },
'sepia': { 'body': { 'color': '#d8a262', 'background': '#000' } },
'light': { 'body': { 'color': '#000', 'background': '#fff' } }
};
const THEME_ORDER = ['dark', 'sepia', 'light'];
const FONT_SIZES = ['x-small', 'small', 'medium', 'large', 'x-large'];
@@ -42,10 +42,10 @@ export class BookPlayer {
} else {
this.theme = 'light';
}
this.fontSize = 'medium';
this.onDialogClosed = this.onDialogClosed.bind(this);
this.openTableOfContents = this.openTableOfContents.bind(this);
this.rotateTheme = this.rotateTheme.bind(this);
this.setTheme = this.setTheme.bind(this);
this.increaseFontSize = this.increaseFontSize.bind(this);
this.decreaseFontSize = this.decreaseFontSize.bind(this);
this.previous = this.previous.bind(this);
@@ -216,6 +216,25 @@ export class BookPlayer {
}
}
setTheme(theme, fontSize) {
if (!this.loaded) return;
this.theme = theme;
this.fontSize = fontSize;
// TODO add styles to other elements when we can reliably determine when to apply them
const active = THEMES[theme];
// force this style on all text only when the user has opted to change the default
// many epub files will apply font size to individual elements and thus ignore a value on document body
if (fontSize !== undefined) {
active['a, p, div, li, span'] = { 'font-size': `${fontSize} !important` };
}
this.rendition.themes.register('default', active);
this.rendition.themes.update('default');
}
toggleFullscreen() {
const player = document.querySelector('#bookPlayerContainer');
@@ -234,28 +253,19 @@ export class BookPlayer {
}
rotateTheme() {
if (this.loaded) {
const newTheme = THEME_ORDER[(THEME_ORDER.indexOf(this.theme) + 1) % THEME_ORDER.length];
this.rendition.themes.register('default', THEMES[newTheme]);
this.rendition.themes.update('default');
this.theme = newTheme;
}
this.setTheme(THEME_ORDER[(THEME_ORDER.indexOf(this.theme) + 1) % THEME_ORDER.length], this.fontSize);
}
increaseFontSize() {
if (this.loaded && this.fontSize !== FONT_SIZES[FONT_SIZES.length - 1]) {
const newFontSize = FONT_SIZES[(FONT_SIZES.indexOf(this.fontSize) + 1)];
this.rendition.themes.fontSize(newFontSize);
this.fontSize = newFontSize;
}
if (this.fontSize === FONT_SIZES[FONT_SIZES.length - 1]) return;
this.setTheme(this.theme, FONT_SIZES[(FONT_SIZES.indexOf(this.fontSize ?? 'medium') + 1)]);
}
decreaseFontSize() {
if (this.loaded && this.fontSize !== FONT_SIZES[0]) {
const newFontSize = FONT_SIZES[(FONT_SIZES.indexOf(this.fontSize) - 1)];
this.rendition.themes.fontSize(newFontSize);
this.fontSize = newFontSize;
}
if (this.fontSize === FONT_SIZES[0]) return;
this.setTheme(this.theme, FONT_SIZES[(FONT_SIZES.indexOf(this.fontSize ?? 'medium') - 1)]);
}
previous(e) {
@@ -343,9 +353,6 @@ export class BookPlayer {
this.currentSrc = downloadHref;
this.rendition = rendition;
rendition.themes.register('default', THEMES[this.theme]);
rendition.themes.select('default');
return rendition.display().then(() => {
const epubElem = document.querySelector('.epub-container');
epubElem.style.opacity = '0';
@@ -368,6 +375,7 @@ export class BookPlayer {
Events.trigger(this, 'pause');
});
this.setTheme(this.theme, this.fontSize);
loading.hide();
return resolve();
});