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

add button to bookplayer to rotate through dark, sepia and light themes

Browse source
This commit is contained in:
Lukas Lüftinger 2023-01-14 14:34:37 +01:00
parent 3c45a5e05b
commit 727f6e450b
2 changed files with 29 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

30
src/plugins/bookPlayer/plugin.js
View file

@ -23,9 +23,21 @@ export class BookPlayer {
this.type = PluginType.MediaPlayer; this.type = PluginType.MediaPlayer;
this.id = 'bookplayer'; this.id = 'bookplayer';
this.priority = 1; 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.onDialogClosed = this.onDialogClosed.bind(this);
this.openTableOfContents = this.openTableOfContents.bind(this); this.openTableOfContents = this.openTableOfContents.bind(this);
this.rotateTheme = this.rotateTheme.bind(this);
this.previous = this.previous.bind(this); this.previous = this.previous.bind(this);
this.next = this.next.bind(this); this.next = this.next.bind(this);
this.onWindowKeyUp = this.onWindowKeyUp.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('#btnBookplayerExit').addEventListener('click', this.onDialogClosed, { once: true });
elem.querySelector('#btnBookplayerToc').addEventListener('click', this.openTableOfContents); elem.querySelector('#btnBookplayerToc').addEventListener('click', this.openTableOfContents);
elem.querySelector('#btnBookplayerFullscreen').addEventListener('click', this.toggleFullscreen); elem.querySelector('#btnBookplayerFullscreen').addEventListener('click', this.toggleFullscreen);
elem.querySelector('#btnBookplayerRotateTheme').addEventListener('click', this.rotateTheme);
elem.querySelector('#btnBookplayerPrev')?.addEventListener('click', this.previous); elem.querySelector('#btnBookplayerPrev')?.addEventListener('click', this.previous);
elem.querySelector('#btnBookplayerNext')?.addEventListener('click', this.next); elem.querySelector('#btnBookplayerNext')?.addEventListener('click', this.next);
} }
@ -184,6 +197,7 @@ export class BookPlayer {
elem.querySelector('#btnBookplayerExit').removeEventListener('click', this.onDialogClosed); elem.querySelector('#btnBookplayerExit').removeEventListener('click', this.onDialogClosed);
elem.querySelector('#btnBookplayerToc').removeEventListener('click', this.openTableOfContents); elem.querySelector('#btnBookplayerToc').removeEventListener('click', this.openTableOfContents);
elem.querySelector('#btnBookplayerFullscreen').removeEventListener('click', this.toggleFullscreen); elem.querySelector('#btnBookplayerFullscreen').removeEventListener('click', this.toggleFullscreen);
elem.querySelector('#btnBookplayerRotateTheme').removeEventListener('click', this.rotateTheme);
elem.querySelector('#btnBookplayerPrev')?.removeEventListener('click', this.previous); elem.querySelector('#btnBookplayerPrev')?.removeEventListener('click', this.previous);
elem.querySelector('#btnBookplayerNext')?.removeEventListener('click', this.next); 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) { previous(e) {
e?.preventDefault(); e?.preventDefault();
if (this.rendition) { if (this.rendition) {
@ -296,11 +319,10 @@ export class BookPlayer {
this.currentSrc = downloadHref; this.currentSrc = downloadHref;
this.rendition = rendition; this.rendition = rendition;
rendition.themes.register('dark', { 'body': { 'color': '#fff' } }); for (const theme of Object.keys(this.themes)) {
rendition.themes.register(theme, this.themes[theme]);
if (userSettings.theme(undefined) === 'dark' || userSettings.theme(undefined) === null) {
rendition.themes.select('dark');
} }
rendition.themes.select(this.theme);
return rendition.display().then(() => { return rendition.display().then(() => {
const epubElem = document.querySelector('.epub-container'); const epubElem = document.querySelector('.epub-container');

3
src/plugins/bookPlayer/template.html
View file

@ -11,6 +11,9 @@
<button is="paper-icon-button-light" id="btnBookplayerExit" class="autoSize bookplayerButton hide-mouse-idle-tv" tabindex="-1"> <button is="paper-icon-button-light" id="btnBookplayerExit" class="autoSize bookplayerButton hide-mouse-idle-tv" tabindex="-1">
<span class="material-icons bookplayerButtonIcon close" aria-hidden="true"></span> <span class="material-icons bookplayerButtonIcon close" aria-hidden="true"></span>
</button> </button>
<button is="paper-icon-button-light" id="btnBookplayerRotateTheme" class="autoSize bookplayerButton hide-mouse-idle-tv" tabindex="-1">
<span class="material-icons bookplayerButtonIcon remove_red_eye" aria-hidden="true"></span>
</button>
<button is="paper-icon-button-light" id="btnBookplayerFullscreen" class="autoSize bookplayerButton hide-mouse-idle-tv" tabindex="-1"> <button is="paper-icon-button-light" id="btnBookplayerFullscreen" class="autoSize bookplayerButton hide-mouse-idle-tv" tabindex="-1">
<span class="material-icons bookplayerButtonIcon fullscreen" aria-hidden="true"></span> <span class="material-icons bookplayerButtonIcon fullscreen" aria-hidden="true"></span>
</button> </button>