From 3c45a5e05b1d68950f463ebb050b555b78e358fe Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Lukas=20L=C3=BCftinger?= Date: Sat, 14 Jan 2023 15:26:44 +0100 Subject: [PATCH 1/9] lower epubjs version to 0.3.93 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 685445a010..d876adea3b 100644 --- a/package.json +++ b/package.json @@ -83,7 +83,7 @@ "core-js": "3.29.0", "date-fns": "2.29.3", "dompurify": "3.0.1", - "epubjs": "0.4.2", + "epubjs": "0.3.93", "escape-html": "1.0.3", "fast-text-encoding": "1.0.6", "flv.js": "1.6.2", From 727f6e450b8ccc82b1e6bfaf17e64dc060676545 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Lukas=20L=C3=BCftinger?= Date: Sat, 14 Jan 2023 14:34:37 +0100 Subject: [PATCH 2/9] add button to bookplayer to rotate through dark, sepia and light themes --- src/plugins/bookPlayer/plugin.js | 30 ++++++++++++++++++++++++---- src/plugins/bookPlayer/template.html | 3 +++ 2 files changed, 29 insertions(+), 4 deletions(-) diff --git a/src/plugins/bookPlayer/plugin.js b/src/plugins/bookPlayer/plugin.js index df5e213b72..8e0a987c1c 100644 --- a/src/plugins/bookPlayer/plugin.js +++ b/src/plugins/bookPlayer/plugin.js @@ -23,9 +23,21 @@ export class BookPlayer { this.type = PluginType.MediaPlayer; this.id = 'bookplayer'; this.priority = 1; + if (userSettings.theme(undefined) === 'dark' || userSettings.theme(undefined) === null) { + this.theme = 'dark'; + } else { + this.theme = 'light'; + } + this.themes = { + 'dark': { 'body': { 'color': '#d8dadc', 'background': '#000' } }, + 'sepia': { 'body': { 'color': '#d8a262', 'background': '#000' } }, + 'light': { 'body': { 'color': '#000', 'background': '#fff' } } + } + this.themeOrder = ['dark', 'sepia', 'light']; this.onDialogClosed = this.onDialogClosed.bind(this); this.openTableOfContents = this.openTableOfContents.bind(this); + this.rotateTheme = this.rotateTheme.bind(this); this.previous = this.previous.bind(this); this.next = this.next.bind(this); this.onWindowKeyUp = this.onWindowKeyUp.bind(this); @@ -164,6 +176,7 @@ export class BookPlayer { elem.querySelector('#btnBookplayerExit').addEventListener('click', this.onDialogClosed, { once: true }); elem.querySelector('#btnBookplayerToc').addEventListener('click', this.openTableOfContents); elem.querySelector('#btnBookplayerFullscreen').addEventListener('click', this.toggleFullscreen); + elem.querySelector('#btnBookplayerRotateTheme').addEventListener('click', this.rotateTheme); elem.querySelector('#btnBookplayerPrev')?.addEventListener('click', this.previous); elem.querySelector('#btnBookplayerNext')?.addEventListener('click', this.next); } @@ -184,6 +197,7 @@ export class BookPlayer { elem.querySelector('#btnBookplayerExit').removeEventListener('click', this.onDialogClosed); elem.querySelector('#btnBookplayerToc').removeEventListener('click', this.openTableOfContents); elem.querySelector('#btnBookplayerFullscreen').removeEventListener('click', this.toggleFullscreen); + elem.querySelector('#btnBookplayerRotateTheme').removeEventListener('click', this.rotateTheme); elem.querySelector('#btnBookplayerPrev')?.removeEventListener('click', this.previous); elem.querySelector('#btnBookplayerNext')?.removeEventListener('click', this.next); } @@ -214,6 +228,15 @@ export class BookPlayer { } } + rotateTheme() { + if (this.loaded) { + const newTheme = this.themeOrder[(this.themeOrder.indexOf(this.theme) + 1) % this.themeOrder.length]; + this.rendition.themes.select(newTheme); + this.theme = newTheme; + console.dir(this.rendition); + } + } + previous(e) { e?.preventDefault(); if (this.rendition) { @@ -296,11 +319,10 @@ export class BookPlayer { this.currentSrc = downloadHref; this.rendition = rendition; - rendition.themes.register('dark', { 'body': { 'color': '#fff' } }); - - if (userSettings.theme(undefined) === 'dark' || userSettings.theme(undefined) === null) { - rendition.themes.select('dark'); + for (const theme of Object.keys(this.themes)) { + rendition.themes.register(theme, this.themes[theme]); } + rendition.themes.select(this.theme); return rendition.display().then(() => { const epubElem = document.querySelector('.epub-container'); diff --git a/src/plugins/bookPlayer/template.html b/src/plugins/bookPlayer/template.html index bf71834f02..1bc0e3053f 100644 --- a/src/plugins/bookPlayer/template.html +++ b/src/plugins/bookPlayer/template.html @@ -11,6 +11,9 @@ + From 581f5c7bb97f03972a76ab95ba930040b300bc39 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Lukas=20L=C3=BCftinger?= Date: Sat, 14 Jan 2023 15:02:13 +0100 Subject: [PATCH 3/9] add buttons to increase and decrease font sizes in book-player --- src/plugins/bookPlayer/plugin.js | 35 +++++++++++++++++++++++++--- src/plugins/bookPlayer/template.html | 6 +++++ 2 files changed, 38 insertions(+), 3 deletions(-) diff --git a/src/plugins/bookPlayer/plugin.js b/src/plugins/bookPlayer/plugin.js index 8e0a987c1c..211c2cdea9 100644 --- a/src/plugins/bookPlayer/plugin.js +++ b/src/plugins/bookPlayer/plugin.js @@ -29,15 +29,20 @@ export class BookPlayer { this.theme = 'light'; } this.themes = { - 'dark': { 'body': { 'color': '#d8dadc', 'background': '#000' } }, - 'sepia': { 'body': { 'color': '#d8a262', 'background': '#000' } }, - 'light': { 'body': { 'color': '#000', 'background': '#fff' } } + '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' } } } this.themeOrder = ['dark', 'sepia', 'light']; + this.fontSize = 'medium'; + this.fontSizeOrder = ['x-small', 'small', 'medium', 'large', 'x-large']; + this.onDialogClosed = this.onDialogClosed.bind(this); this.openTableOfContents = this.openTableOfContents.bind(this); this.rotateTheme = this.rotateTheme.bind(this); + this.increaseFontSize = this.increaseFontSize.bind(this); + this.decreaseFontSize = this.decreaseFontSize.bind(this); this.previous = this.previous.bind(this); this.next = this.next.bind(this); this.onWindowKeyUp = this.onWindowKeyUp.bind(this); @@ -177,6 +182,8 @@ export class BookPlayer { elem.querySelector('#btnBookplayerToc').addEventListener('click', this.openTableOfContents); elem.querySelector('#btnBookplayerFullscreen').addEventListener('click', this.toggleFullscreen); elem.querySelector('#btnBookplayerRotateTheme').addEventListener('click', this.rotateTheme); + elem.querySelector('#btnBookplayerIncreaseFontSize').addEventListener('click', this.increaseFontSize); + elem.querySelector('#btnBookplayerDecreaseFontSize').addEventListener('click', this.decreaseFontSize); elem.querySelector('#btnBookplayerPrev')?.addEventListener('click', this.previous); elem.querySelector('#btnBookplayerNext')?.addEventListener('click', this.next); } @@ -198,6 +205,8 @@ export class BookPlayer { elem.querySelector('#btnBookplayerToc').removeEventListener('click', this.openTableOfContents); elem.querySelector('#btnBookplayerFullscreen').removeEventListener('click', this.toggleFullscreen); elem.querySelector('#btnBookplayerRotateTheme').removeEventListener('click', this.rotateTheme); + elem.querySelector('#btnBookplayerIncreaseFontSize').removeEventListener('click', this.increaseFontSize); + elem.querySelector('#btnBookplayerDecreaseFontSize').removeEventListener('click', this.decreaseFontSize); elem.querySelector('#btnBookplayerPrev')?.removeEventListener('click', this.previous); elem.querySelector('#btnBookplayerNext')?.removeEventListener('click', this.next); } @@ -237,6 +246,26 @@ export class BookPlayer { } } + increaseFontSize() { + if (this.loaded) { + if (this.fontSize !== this.fontSizeOrder[this.fontSizeOrder.length - 1]) { + const newFontSize = this.fontSizeOrder[(this.fontSizeOrder.indexOf(this.fontSize) + 1)]; + this.rendition.themes.fontSize(newFontSize); + this.fontSize = newFontSize; + } + } + } + + decreaseFontSize() { + if (this.loaded) { + if (this.fontSize !== this.fontSizeOrder[0]) { + const newFontSize = this.fontSizeOrder[(this.fontSizeOrder.indexOf(this.fontSize) - 1)]; + this.rendition.themes.fontSize(newFontSize); + this.fontSize = newFontSize; + } + } + } + previous(e) { e?.preventDefault(); if (this.rendition) { diff --git a/src/plugins/bookPlayer/template.html b/src/plugins/bookPlayer/template.html index 1bc0e3053f..55fd02c8a1 100644 --- a/src/plugins/bookPlayer/template.html +++ b/src/plugins/bookPlayer/template.html @@ -14,6 +14,12 @@ + + From b5735c83928f3fc7cb89226398eeb756dd1eb685 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Lukas=20L=C3=BCftinger?= Date: Sat, 14 Jan 2023 16:07:49 +0100 Subject: [PATCH 4/9] include package-lock.json --- package-lock.json | 118 +++++++++++++++++++++++++++++++++------------- 1 file changed, 85 insertions(+), 33 deletions(-) diff --git a/package-lock.json b/package-lock.json index 631774f6f3..38370c79c9 100644 --- a/package-lock.json +++ b/package-lock.json @@ -24,7 +24,7 @@ "core-js": "3.29.0", "date-fns": "2.29.3", "dompurify": "3.0.1", - "epubjs": "0.4.2", + "epubjs": "0.3.93", "escape-html": "1.0.3", "fast-text-encoding": "1.0.6", "flv.js": "1.6.2", @@ -3013,6 +3013,15 @@ "@types/react": "*" } }, + "node_modules/@types/localforage": { + "version": "0.0.34", + "resolved": "https://registry.npmjs.org/@types/localforage/-/localforage-0.0.34.tgz", + "integrity": "sha512-tJxahnjm9dEI1X+hQSC5f2BSd/coZaqbIl1m3TCl0q9SVuC52XcXfV0XmoCU1+PmjyucuVITwoTnN8OlTbEXXA==", + "deprecated": "This is a stub types definition for localforage (https://github.com/localForage/localForage). localforage provides its own type definitions, so you don't need @types/localforage installed!", + "dependencies": { + "localforage": "*" + } + }, "node_modules/@types/lodash": { "version": "4.14.178", "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.178.tgz", @@ -3666,6 +3675,14 @@ } } }, + "node_modules/@xmldom/xmldom": { + "version": "0.7.9", + "resolved": "https://registry.npmjs.org/@xmldom/xmldom/-/xmldom-0.7.9.tgz", + "integrity": "sha512-yceMpm/xd4W2a85iqZyO09gTnHvXF6pyiWjD2jcOJs7hRoZtNNOO1eJlhHj1ixA+xip2hOyGn+LgcvLCMo5zXA==", + "engines": { + "node": ">=10.0.0" + } + }, "node_modules/@xtuc/ieee754": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/@xtuc/ieee754/-/ieee754-1.2.0.tgz", @@ -6181,17 +6198,19 @@ } }, "node_modules/epubjs": { - "version": "0.4.2", - "resolved": "https://registry.npmjs.org/epubjs/-/epubjs-0.4.2.tgz", - "integrity": "sha512-ex+ntja2AmPeq++qgjYfwrEzrO8UUBbTch1RJcRftShUmn8no6qi4Cax75FH0QopLA+6L8HM6iR94M0/I8V3GQ==", + "version": "0.3.93", + "resolved": "https://registry.npmjs.org/epubjs/-/epubjs-0.3.93.tgz", + "integrity": "sha512-c06pNSdBxcXv3dZSbXAVLE1/pmleRhOT6mXNZo6INKmvuKpYB65MwU/lO7830czCtjIiK9i+KR+3S+p0wtljrw==", "dependencies": { + "@types/localforage": "0.0.34", + "@xmldom/xmldom": "^0.7.5", + "core-js": "^3.18.3", "event-emitter": "^0.3.5", - "jszip": "^3.1.5", - "lodash": "^4.17.5", - "marks-pane": "^1.0.7", - "path-webpack": "0.0.3", - "stream-browserify": "^2.0.1", - "xmldom": "^0.1.27" + "jszip": "^3.7.1", + "localforage": "^1.10.0", + "lodash": "^4.17.21", + "marks-pane": "^1.0.9", + "path-webpack": "0.0.3" } }, "node_modules/error-ex": { @@ -9919,6 +9938,14 @@ "resolved": "https://registry.npmjs.org/libarchive.js/-/libarchive.js-1.3.0.tgz", "integrity": "sha512-EkQfRXt9DhWwj6BnEA2TNpOf4jTnzSTUPGgE+iFxcdNqjktY8GitbDeHnx8qZA0/IukNyyBUR3oQKRdYkO+HFg==" }, + "node_modules/lie": { + "version": "3.1.1", + "resolved": "https://registry.npmjs.org/lie/-/lie-3.1.1.tgz", + "integrity": "sha512-RiNhHysUjhrDQntfYSfY4MU24coXXdEOgw9WGcKHNeEwffDYbF//u87M1EWaMGzuFoSbqW0C9C6lEEhDOAswfw==", + "dependencies": { + "immediate": "~3.0.5" + } + }, "node_modules/lilconfig": { "version": "2.0.4", "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-2.0.4.tgz", @@ -9957,6 +9984,14 @@ "node": ">=8.9.0" } }, + "node_modules/localforage": { + "version": "1.10.0", + "resolved": "https://registry.npmjs.org/localforage/-/localforage-1.10.0.tgz", + "integrity": "sha512-14/H1aX7hzBBmmh7sGPd+AOMkkIrHM3Z1PAyGgZigA1H1p5O5ANnMyWzvpAETtG68/dC4pC0ncy3+PPGzXZHPg==", + "dependencies": { + "lie": "3.1.1" + } + }, "node_modules/locate-path": { "version": "5.0.0", "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz", @@ -19214,15 +19249,6 @@ "integrity": "sha1-R0tQhlrzpJqcRlfwWs0UVFj3fYI=", "dev": true }, - "node_modules/xmldom": { - "version": "0.1.31", - "resolved": "https://registry.npmjs.org/xmldom/-/xmldom-0.1.31.tgz", - "integrity": "sha512-yS2uJflVQs6n+CyjHoaBmVSqIDevTAWrzMmjG1Gc7h1qQ7uVozNhEPJAwZXWyGQ/Gafo3fCwrcaokezLPupVyQ==", - "deprecated": "Deprecated due to CVE-2021-21366 resolved in 0.5.0", - "engines": { - "node": ">=0.1" - } - }, "node_modules/xtend": { "version": "4.0.2", "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz", @@ -21251,6 +21277,14 @@ "@types/react": "*" } }, + "@types/localforage": { + "version": "0.0.34", + "resolved": "https://registry.npmjs.org/@types/localforage/-/localforage-0.0.34.tgz", + "integrity": "sha512-tJxahnjm9dEI1X+hQSC5f2BSd/coZaqbIl1m3TCl0q9SVuC52XcXfV0XmoCU1+PmjyucuVITwoTnN8OlTbEXXA==", + "requires": { + "localforage": "*" + } + }, "@types/lodash": { "version": "4.14.178", "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.178.tgz", @@ -21769,6 +21803,11 @@ "dev": true, "requires": {} }, + "@xmldom/xmldom": { + "version": "0.7.9", + "resolved": "https://registry.npmjs.org/@xmldom/xmldom/-/xmldom-0.7.9.tgz", + "integrity": "sha512-yceMpm/xd4W2a85iqZyO09gTnHvXF6pyiWjD2jcOJs7hRoZtNNOO1eJlhHj1ixA+xip2hOyGn+LgcvLCMo5zXA==" + }, "@xtuc/ieee754": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/@xtuc/ieee754/-/ieee754-1.2.0.tgz", @@ -23644,17 +23683,19 @@ "dev": true }, "epubjs": { - "version": "0.4.2", - "resolved": "https://registry.npmjs.org/epubjs/-/epubjs-0.4.2.tgz", - "integrity": "sha512-ex+ntja2AmPeq++qgjYfwrEzrO8UUBbTch1RJcRftShUmn8no6qi4Cax75FH0QopLA+6L8HM6iR94M0/I8V3GQ==", + "version": "0.3.93", + "resolved": "https://registry.npmjs.org/epubjs/-/epubjs-0.3.93.tgz", + "integrity": "sha512-c06pNSdBxcXv3dZSbXAVLE1/pmleRhOT6mXNZo6INKmvuKpYB65MwU/lO7830czCtjIiK9i+KR+3S+p0wtljrw==", "requires": { + "@types/localforage": "0.0.34", + "@xmldom/xmldom": "^0.7.5", + "core-js": "^3.18.3", "event-emitter": "^0.3.5", - "jszip": "^3.1.5", - "lodash": "^4.17.5", - "marks-pane": "^1.0.7", - "path-webpack": "0.0.3", - "stream-browserify": "^2.0.1", - "xmldom": "^0.1.27" + "jszip": "^3.7.1", + "localforage": "^1.10.0", + "lodash": "^4.17.21", + "marks-pane": "^1.0.9", + "path-webpack": "0.0.3" } }, "error-ex": { @@ -26453,6 +26494,14 @@ "resolved": "https://registry.npmjs.org/libarchive.js/-/libarchive.js-1.3.0.tgz", "integrity": "sha512-EkQfRXt9DhWwj6BnEA2TNpOf4jTnzSTUPGgE+iFxcdNqjktY8GitbDeHnx8qZA0/IukNyyBUR3oQKRdYkO+HFg==" }, + "lie": { + "version": "3.1.1", + "resolved": "https://registry.npmjs.org/lie/-/lie-3.1.1.tgz", + "integrity": "sha512-RiNhHysUjhrDQntfYSfY4MU24coXXdEOgw9WGcKHNeEwffDYbF//u87M1EWaMGzuFoSbqW0C9C6lEEhDOAswfw==", + "requires": { + "immediate": "~3.0.5" + } + }, "lilconfig": { "version": "2.0.4", "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-2.0.4.tgz", @@ -26482,6 +26531,14 @@ "json5": "^2.1.2" } }, + "localforage": { + "version": "1.10.0", + "resolved": "https://registry.npmjs.org/localforage/-/localforage-1.10.0.tgz", + "integrity": "sha512-14/H1aX7hzBBmmh7sGPd+AOMkkIrHM3Z1PAyGgZigA1H1p5O5ANnMyWzvpAETtG68/dC4pC0ncy3+PPGzXZHPg==", + "requires": { + "lie": "3.1.1" + } + }, "locate-path": { "version": "5.0.0", "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz", @@ -33479,11 +33536,6 @@ "integrity": "sha1-R0tQhlrzpJqcRlfwWs0UVFj3fYI=", "dev": true }, - "xmldom": { - "version": "0.1.31", - "resolved": "https://registry.npmjs.org/xmldom/-/xmldom-0.1.31.tgz", - "integrity": "sha512-yS2uJflVQs6n+CyjHoaBmVSqIDevTAWrzMmjG1Gc7h1qQ7uVozNhEPJAwZXWyGQ/Gafo3fCwrcaokezLPupVyQ==" - }, "xtend": { "version": "4.0.2", "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz", From d75dbc1b3b7d080ac5712309af3a62dd7a8ac8b5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Lukas=20L=C3=BCftinger?= Date: Sat, 14 Jan 2023 17:28:13 +0100 Subject: [PATCH 5/9] fix linting issues --- src/plugins/bookPlayer/plugin.js | 23 +++++++++-------------- 1 file changed, 9 insertions(+), 14 deletions(-) diff --git a/src/plugins/bookPlayer/plugin.js b/src/plugins/bookPlayer/plugin.js index 211c2cdea9..7e06a482a8 100644 --- a/src/plugins/bookPlayer/plugin.js +++ b/src/plugins/bookPlayer/plugin.js @@ -32,7 +32,7 @@ export class BookPlayer { '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' } } - } + }; this.themeOrder = ['dark', 'sepia', 'light']; this.fontSize = 'medium'; @@ -242,27 +242,22 @@ export class BookPlayer { const newTheme = this.themeOrder[(this.themeOrder.indexOf(this.theme) + 1) % this.themeOrder.length]; this.rendition.themes.select(newTheme); this.theme = newTheme; - console.dir(this.rendition); } } increaseFontSize() { - if (this.loaded) { - if (this.fontSize !== this.fontSizeOrder[this.fontSizeOrder.length - 1]) { - const newFontSize = this.fontSizeOrder[(this.fontSizeOrder.indexOf(this.fontSize) + 1)]; - this.rendition.themes.fontSize(newFontSize); - this.fontSize = newFontSize; - } + if (this.loaded && this.fontSize !== this.fontSizeOrder[this.fontSizeOrder.length - 1]) { + const newFontSize = this.fontSizeOrder[(this.fontSizeOrder.indexOf(this.fontSize) + 1)]; + this.rendition.themes.fontSize(newFontSize); + this.fontSize = newFontSize; } } decreaseFontSize() { - if (this.loaded) { - if (this.fontSize !== this.fontSizeOrder[0]) { - const newFontSize = this.fontSizeOrder[(this.fontSizeOrder.indexOf(this.fontSize) - 1)]; - this.rendition.themes.fontSize(newFontSize); - this.fontSize = newFontSize; - } + if (this.loaded && this.fontSize !== this.fontSizeOrder[0]) { + const newFontSize = this.fontSizeOrder[(this.fontSizeOrder.indexOf(this.fontSize) - 1)]; + this.rendition.themes.fontSize(newFontSize); + this.fontSize = newFontSize; } } From 2eb15411baf43b435b5d435bbcff39c594a201e0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Lukas=20L=C3=BCftinger?= Date: Wed, 8 Mar 2023 16:43:52 +0100 Subject: [PATCH 6/9] fix epub theme selection --- src/plugins/bookPlayer/plugin.js | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/src/plugins/bookPlayer/plugin.js b/src/plugins/bookPlayer/plugin.js index 7e06a482a8..ee3fddd6e2 100644 --- a/src/plugins/bookPlayer/plugin.js +++ b/src/plugins/bookPlayer/plugin.js @@ -240,7 +240,8 @@ export class BookPlayer { rotateTheme() { if (this.loaded) { const newTheme = this.themeOrder[(this.themeOrder.indexOf(this.theme) + 1) % this.themeOrder.length]; - this.rendition.themes.select(newTheme); + this.rendition.themes.register('default', this.themes[newTheme]); + this.rendition.themes.update('default'); this.theme = newTheme; } } @@ -343,10 +344,8 @@ export class BookPlayer { this.currentSrc = downloadHref; this.rendition = rendition; - for (const theme of Object.keys(this.themes)) { - rendition.themes.register(theme, this.themes[theme]); - } - rendition.themes.select(this.theme); + rendition.themes.register('default', this.themes[this.theme]) + rendition.themes.select('default'); return rendition.display().then(() => { const epubElem = document.querySelector('.epub-container'); From e6171364ca1d86ef73403133715d3be5f425b317 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Lukas=20L=C3=BCftinger?= Date: Wed, 8 Mar 2023 16:47:16 +0100 Subject: [PATCH 7/9] fix linting --- src/plugins/bookPlayer/plugin.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/plugins/bookPlayer/plugin.js b/src/plugins/bookPlayer/plugin.js index ee3fddd6e2..9aab558529 100644 --- a/src/plugins/bookPlayer/plugin.js +++ b/src/plugins/bookPlayer/plugin.js @@ -344,7 +344,7 @@ export class BookPlayer { this.currentSrc = downloadHref; this.rendition = rendition; - rendition.themes.register('default', this.themes[this.theme]) + rendition.themes.register('default', this.themes[this.theme]); rendition.themes.select('default'); return rendition.display().then(() => { From e9613a7131dac26a64ba2cdf661c8cd5a9e7e70f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Lukas=20L=C3=BCftinger?= Date: Fri, 10 Mar 2023 00:36:13 +0100 Subject: [PATCH 8/9] make data variables used in bookPlayer theming const --- src/plugins/bookPlayer/plugin.js | 31 +++++++++++++++---------------- 1 file changed, 15 insertions(+), 16 deletions(-) diff --git a/src/plugins/bookPlayer/plugin.js b/src/plugins/bookPlayer/plugin.js index 9aab558529..1d3d411615 100644 --- a/src/plugins/bookPlayer/plugin.js +++ b/src/plugins/bookPlayer/plugin.js @@ -17,6 +17,14 @@ import '../../elements/emby-button/paper-icon-button-light'; 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' } } +}; +const THEME_ORDER = ['dark', 'sepia', 'light']; +const FONT_SIZES = ['x-small', 'small', 'medium', 'large', 'x-large']; + export class BookPlayer { constructor() { this.name = 'Book Player'; @@ -28,16 +36,7 @@ export class BookPlayer { } else { this.theme = 'light'; } - this.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' } } - }; - this.themeOrder = ['dark', 'sepia', 'light']; - this.fontSize = 'medium'; - this.fontSizeOrder = ['x-small', 'small', 'medium', 'large', 'x-large']; - this.onDialogClosed = this.onDialogClosed.bind(this); this.openTableOfContents = this.openTableOfContents.bind(this); this.rotateTheme = this.rotateTheme.bind(this); @@ -239,24 +238,24 @@ export class BookPlayer { rotateTheme() { if (this.loaded) { - const newTheme = this.themeOrder[(this.themeOrder.indexOf(this.theme) + 1) % this.themeOrder.length]; - this.rendition.themes.register('default', this.themes[newTheme]); + 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; } } increaseFontSize() { - if (this.loaded && this.fontSize !== this.fontSizeOrder[this.fontSizeOrder.length - 1]) { - const newFontSize = this.fontSizeOrder[(this.fontSizeOrder.indexOf(this.fontSize) + 1)]; + 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; } } decreaseFontSize() { - if (this.loaded && this.fontSize !== this.fontSizeOrder[0]) { - const newFontSize = this.fontSizeOrder[(this.fontSizeOrder.indexOf(this.fontSize) - 1)]; + 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; } @@ -344,7 +343,7 @@ export class BookPlayer { this.currentSrc = downloadHref; this.rendition = rendition; - rendition.themes.register('default', this.themes[this.theme]); + rendition.themes.register('default', THEMES[this.theme]); rendition.themes.select('default'); return rendition.display().then(() => { From 2fc010fe6ec339b7ff1806071c599818b89e7340 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Lukas=20L=C3=BCftinger?= Date: Tue, 14 Mar 2023 23:38:47 +0100 Subject: [PATCH 9/9] correctly use userSettings.theme() in bookPlayer --- src/plugins/bookPlayer/plugin.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/plugins/bookPlayer/plugin.js b/src/plugins/bookPlayer/plugin.js index 1d3d411615..8924d06951 100644 --- a/src/plugins/bookPlayer/plugin.js +++ b/src/plugins/bookPlayer/plugin.js @@ -31,7 +31,7 @@ export class BookPlayer { this.type = PluginType.MediaPlayer; this.id = 'bookplayer'; this.priority = 1; - if (userSettings.theme(undefined) === 'dark' || userSettings.theme(undefined) === null) { + if (!userSettings.theme() || userSettings.theme() === 'dark') { this.theme = 'dark'; } else { this.theme = 'light';