Add:Epub ereader settings for font scale, line spacing, theme and spread

client/components/modals/Modal.vue

@@ -2,11 +2,11 @@
   <div ref="wrapper" class="modal modal-bg w-full h-full fixed top-0 left-0 bg-primary items-center justify-center opacity-0 hidden" :class="`z-${zIndex} bg-opacity-${bgOpacity}`">
     <div class="absolute top-0 left-0 right-0 w-full h-36 bg-gradient-to-t from-transparent via-black-500 to-black-700 opacity-90 pointer-events-none" />
 
-    <div class="absolute top-3 right-3 landscape:top-2 landscape:right-2 md:portrait:top-5 md:portrait:right-5 lg:top-5 lg:right-5 h-8 w-8 landscape:h-8 landscape:w-8 md:portrait:h-12 md:portrait:w-12 lg:w-12 lg:h-12 flex items-center justify-center cursor-pointer text-white hover:text-gray-300" @click="clickClose">
+    <button class="absolute top-4 right-4 landscape:top-4 landscape:right-4 md:portrait:top-5 md:portrait:right-5 lg:top-5 lg:right-5 inline-flex text-gray-200 hover:text-white" aria-label="Close modal" @click="clickClose">
       <span class="material-icons text-2xl landscape:text-2xl md:portrait:text-4xl lg:text-4xl">close</span>
-    </div>
+    </button>
     <slot name="outer" />
-    <div ref="content" style="min-width: 380px; min-height: 200px; max-width: 100vw" class="relative text-white" :style="{ height: modalHeight, width: modalWidth, marginTop: contentMarginTop + 'px' }" @mousedown="mousedownModal" @mouseup="mouseupModal" v-click-outside="clickBg">
+    <div ref="content" style="min-width: 380px; min-height: 200px; max-width: 100vw" class="relative text-white" aria-modal="true" :style="{ height: modalHeight, width: modalWidth, marginTop: contentMarginTop + 'px' }" @mousedown="mousedownModal" @mouseup="mouseupModal" v-click-outside="clickBg">
       <slot />
       <div v-if="processing" class="absolute top-0 left-0 right-0 bottom-0 w-full h-full bg-black bg-opacity-60 rounded-lg flex items-center justify-center">
         <ui-loading-indicator />

client/components/readers/EpubReader.vue

@@ -1,15 +1,15 @@
 <template>
   <div id="epub-reader" class="h-full w-full">
     <div class="h-full flex items-center justify-center">
-      <div style="width: 100px; max-width: 100px" class="h-full hidden sm:flex items-center overflow-x-hidden justify-center">
+      <button type="button" aria-label="Previous page" class="w-24 max-w-24 h-full hidden sm:flex items-center overflow-x-hidden justify-center opacity-50 hover:opacity-100">
-        <span v-if="hasPrev" class="material-icons text-white text-opacity-50 hover:text-opacity-80 cursor-pointer text-6xl" @mousedown.prevent @click="prev">chevron_left</span>
+        <span v-if="hasPrev" class="material-icons text-6xl" @mousedown.prevent @click="prev">chevron_left</span>
-      </div>
+      </button>
       <div id="frame" class="w-full" style="height: 80%">
         <div id="viewer"></div>
       </div>
-      <div style="width: 100px; max-width: 100px" class="h-full hidden sm:flex items-center justify-center overflow-x-hidden">
+      <button type="button" aria-label="Next page" class="w-24 max-w-24 h-full hidden sm:flex items-center justify-center overflow-x-hidden opacity-50 hover:opacity-100">
-        <span v-if="hasNext" class="material-icons text-white text-opacity-50 hover:text-opacity-80 cursor-pointer text-6xl" @mousedown.prevent @click="next">chevron_right</span>
+        <span v-if="hasNext" class="material-icons text-6xl" @mousedown.prevent @click="next">chevron_right</span>
-      </div>
+      </button>
     </div>
   </div>
 </template>
@@ -39,7 +39,13 @@ export default {
       /** @type {ePub.Book} */
       book: null,
       /** @type {ePub.Rendition} */
-      rendition: null
+      rendition: null,
+      ereaderSettings: {
+        theme: 'dark',
+        fontScale: 100,
+        lineSpacing: 115,
+        spread: 'auto'
+      }
     }
   },
   watch: {
@@ -92,9 +98,40 @@ export default {
         return `/api/items/${this.libraryItemId}/ebook/${this.fileId}`
       }
       return `/api/items/${this.libraryItemId}/ebook`
+    },
+    themeRules() {
+      const isDark = this.ereaderSettings.theme === 'dark'
+      const fontColor = isDark ? '#fff' : '#000'
+      const backgroundColor = isDark ? 'rgb(35 35 35)' : 'rgb(255, 255, 255)'
+
+      const lineSpacing = this.ereaderSettings.lineSpacing / 100
+
+      const fontScale = this.ereaderSettings.fontScale / 100
+
+      return {
+        '*': {
+          color: `${fontColor}!important`,
+          'background-color': `${backgroundColor}!important`,
+          'line-height': lineSpacing * fontScale + 'rem!important'
+        },
+        a: {
+          color: `${fontColor}!important`
+        }
+      }
     }
   },
   methods: {
+    updateSettings(settings) {
+      this.ereaderSettings = settings
+
+      if (!this.rendition) return
+
+      this.applyTheme()
+
+      const fontScale = settings.fontScale || 100
+      this.rendition.themes.fontSize(`${fontScale}%`)
+      this.rendition.spread(settings.spread || 'auto')
+    },
     prev() {
       return this.rendition?.prev()
     },
@@ -242,14 +279,16 @@ export default {
       /** @type {ePub.Rendition} */
       reader.rendition = reader.book.renderTo('viewer', {
         width: this.readerWidth,
-        height: this.readerHeight * 0.8
+        height: this.readerHeight * 0.8,
+        spread: 'auto'
       })
 
       // load saved progress
       reader.rendition.display(this.savedEbookLocation || reader.book.locations.start)
 
-      // load style
+      reader.rendition.on('rendered', () => {
-      reader.rendition.themes.default({ '*': { color: '#fff!important', 'background-color': 'rgb(35 35 35)!important' }, a: { color: '#fff!important' } })
+        this.applyTheme()
+      })
 
       reader.book.ready.then(() => {
         // set up event listeners
@@ -288,6 +327,12 @@ export default {
       this.windowWidth = window.innerWidth
       this.windowHeight = window.innerHeight
       this.rendition?.resize(this.readerWidth, this.readerHeight * 0.8)
+    },
+    applyTheme() {
+      if (!this.rendition) return
+      this.rendition.getContents().forEach((c) => {
+        c.addStylesheetRules(this.themeRules)
+      })
     }
   },
   mounted() {

client/components/readers/Reader.vue

@@ -1,7 +1,12 @@
 <template>
-  <div v-if="show" id="reader" class="absolute top-0 left-0 w-full z-60 bg-primary text-white" :class="{ 'reader-player-open': !!streamLibraryItem }">
+  <div v-if="show" id="reader" :data-theme="ereaderSettings.theme" class="group absolute top-0 left-0 w-full z-60 data-[theme=dark]:bg-primary data-[theme=dark]:text-white data-[theme=light]:bg-white data-[theme=light]:text-black" :class="{ 'reader-player-open': !!streamLibraryItem }">
-    <div class="absolute top-4 left-4 z-20">
+    <div class="absolute top-4 left-4 z-20 flex items-center">
-      <span v-if="hasToC && !tocOpen" ref="tocButton" class="material-icons cursor-pointer text-2xl" @click="toggleToC">menu</span>
+      <button v-if="isEpub" @click="toggleToC" type="button" aria-label="Table of contents menu" class="inline-flex opacity-80 hover:opacity-100">
+        <span class="material-icons text-2xl">menu</span>
+      </button>
+      <button v-if="hasSettings" @click="openSettings" type="button" aria-label="Ereader settings" class="mx-4 inline-flex opacity-80 hover:opacity-100">
+        <span class="material-icons text-1.5xl">settings</span>
+      </button>
     </div>
 
     <div class="absolute top-4 left-1/2 transform -translate-x-1/2">
@@ -13,24 +18,31 @@
     </div>
 
     <div class="absolute top-4 right-4 z-20">
-      <span v-if="hasSettings" class="material-icons cursor-pointer text-2xl" @click="openSettings">settings</span>
+      <button @click="close" type="button" aria-label="Close ereader" class="inline-flex opacity-80 hover:opacity-100">
-      <span class="material-icons cursor-pointer text-2xl" @click="close">close</span>
+        <span class="material-icons text-2xl">close</span>
+      </button>
     </div>
 
-    <component v-if="componentName" ref="readerComponent" :is="componentName" :library-item="selectedLibraryItem" :player-open="!!streamLibraryItem" :keep-progress="keepProgress" :file-id="ebookFileId" />
+    <component v-if="componentName" ref="readerComponent" :is="componentName" :library-item="selectedLibraryItem" :player-open="!!streamLibraryItem" :keep-progress="keepProgress" :file-id="ebookFileId" @hook:mounted="readerMounted" />
 
     <!-- TOC side nav -->
     <div v-if="tocOpen" class="w-full h-full fixed inset-0 bg-black/20 z-20" @click.stop.prevent="toggleToC"></div>
-    <div v-if="hasToC" class="w-96 h-full max-h-full absolute top-0 left-0 bg-bg shadow-xl transition-transform z-30" :class="tocOpen ? 'translate-x-0' : '-translate-x-96'" @click.stop.prevent="toggleToC">
+    <div v-if="isEpub" class="w-96 h-full max-h-full absolute top-0 left-0 shadow-xl transition-transform z-30 group-data-[theme=dark]:bg-primary group-data-[theme=dark]:text-white group-data-[theme=light]:bg-white group-data-[theme=light]:text-black" :class="tocOpen ? 'translate-x-0' : '-translate-x-96'" @click.stop.prevent="toggleToC">
       <div class="p-4 h-full">
-        <p class="text-lg font-semibold mb-2">Table of Contents</p>
+        <div class="flex items-center mb-2">
+          <button @click.stop.prevent="toggleToC" type="button" aria-label="Close table of contents" class="inline-flex opacity-80 hover:opacity-100">
+            <span class="material-icons text-2xl">arrow_back</span>
+          </button>
+
+          <p class="text-lg font-semibold ml-2">Table of Contents</p>
+        </div>
         <div class="tocContent">
           <ul>
             <li v-for="chapter in chapters" :key="chapter.id" class="py-1">
-              <a :href="chapter.href" class="text-white/70 hover:text-white" @click.prevent="$refs.readerComponent.goToChapter(chapter.href)">{{ chapter.label }}</a>
+              <a :href="chapter.href" class="opacity-80 hover:opacity-100" @click.prevent="$refs.readerComponent.goToChapter(chapter.href)">{{ chapter.label }}</a>
               <ul v-if="chapter.subitems.length">
                 <li v-for="subchapter in chapter.subitems" :key="subchapter.id" class="py-1 pl-4">
-                  <a :href="subchapter.href" class="text-white/70 hover:text-white" @click.prevent="$refs.readerComponent.goToChapter(subchapter.href)">{{ subchapter.label }}</a>
+                  <a :href="subchapter.href" class="opacity-80 hover:opacity-100" @click.prevent="$refs.readerComponent.goToChapter(subchapter.href)">{{ subchapter.label }}</a>
                 </li>
               </ul>
             </li>
@@ -38,6 +50,40 @@
         </div>
       </div>
     </div>
+
+    <modals-modal v-model="showSettings" name="ereader-settings-modal" :width="500" :height="'unset'" :processing="false">
+      <template #outer>
+        <div class="absolute top-0 left-0 p-5 w-3/4 overflow-hidden">
+          <p class="text-xl md:text-3xl text-white truncate">Ereader Settings</p>
+        </div>
+      </template>
+      <div class="p-2 md:p-8 w-full text-base py-2 rounded-lg bg-bg shadow-lg border border-black-300 relative overflow-x-hidden overflow-y-auto" style="max-height: 80vh">
+        <div class="flex items-center mb-4">
+          <div class="w-40">
+            <p class="text-lg">Theme:</p>
+          </div>
+          <ui-toggle-btns v-model="ereaderSettings.theme" :items="themeItems" @input="settingsUpdated" />
+        </div>
+        <div class="flex items-center mb-4">
+          <div class="w-40">
+            <p class="text-lg">Font scale:</p>
+          </div>
+          <ui-range-input v-model="ereaderSettings.fontScale" :min="5" :max="300" :step="5" @input="settingsUpdated" />
+        </div>
+        <div class="flex items-center mb-4">
+          <div class="w-40">
+            <p class="text-lg">Line spacing:</p>
+          </div>
+          <ui-range-input v-model="ereaderSettings.lineSpacing" :min="100" :max="300" :step="5" @input="settingsUpdated" />
+        </div>
+        <div class="flex items-center">
+          <div class="w-40">
+            <p class="text-lg">Spread:</p>
+          </div>
+          <ui-toggle-btns v-model="ereaderSettings.spread" :items="spreadItems" @input="settingsUpdated" />
+        </div>
+      </div>
+    </modals-modal>
   </div>
 </template>
 
@@ -46,7 +92,34 @@ export default {
   data() {
     return {
       chapters: [],
-      tocOpen: false
+      tocOpen: false,
+      showSettings: false,
+      ereaderSettings: {
+        theme: 'dark',
+        fontScale: 100,
+        lineSpacing: 115,
+        spread: 'auto'
+      },
+      themeItems: [
+        {
+          text: 'Dark',
+          value: 'dark'
+        },
+        {
+          text: 'Light',
+          value: 'light'
+        }
+      ],
+      spreadItems: [
+        {
+          text: 'Single page',
+          value: 'none'
+        },
+        {
+          text: 'Split page',
+          value: 'auto'
+        }
+      ]
     }
   },
   watch: {
@@ -75,11 +148,8 @@ export default {
     streamLibraryItem() {
       return this.$store.state.streamLibraryItem
     },
-    hasToC() {
-      return this.isEpub
-    },
     hasSettings() {
-      return false
+      return this.isEpub
     },
     abTitle() {
       return this.mediaMetadata.title
@@ -144,14 +214,28 @@ export default {
     },
     ebookFileId() {
       return this.$store.state.ereaderFileId
+    },
+    isDarkTheme() {
+      return this.ereaderSettings.theme === 'dark'
     }
   },
   methods: {
+    readerMounted() {
+      if (this.isEpub) {
+        this.loadEreaderSettings()
+      }
+    },
+    settingsUpdated() {
+      this.$refs.readerComponent?.updateSettings?.(this.ereaderSettings)
+      localStorage.setItem('ereaderSettings', JSON.stringify(this.ereaderSettings))
+    },
     toggleToC() {
       this.tocOpen = !this.tocOpen
       this.chapters = this.$refs.readerComponent.chapters
     },
-    openSettings() {},
+    openSettings() {
+      this.showSettings = true
+    },
     hotkey(action) {
       if (!this.$refs.readerComponent) return
 
@@ -175,6 +259,17 @@ export default {
     unregisterListeners() {
       this.$eventBus.$off('reader-hotkey', this.hotkey)
     },
+    loadEreaderSettings() {
+      try {
+        const settings = localStorage.getItem('ereaderSettings')
+        if (settings) {
+          this.ereaderSettings = JSON.parse(settings)
+          this.settingsUpdated()
+        }
+      } catch (error) {
+        console.error('Failed to load ereader settings', error)
+      }
+    },
     init() {
       this.registerListeners()
     },

client/components/ui/Btn.vue

@@ -73,7 +73,7 @@ export default {
 }
 </script>
 
-<style>
+<style scoped>
 .btn::before {
   content: '';
   position: absolute;

client/components/ui/RangeInput.vue

@@ -0,0 +1,86 @@
+<template>
+  <div class="inline-flex">
+    <input v-model="input" type="range" :min="min" :max="max" :step="step" />
+
+    <p class="text-sm ml-2">{{ input }}%</p>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    value: [String, Number],
+    min: Number,
+    max: Number,
+    step: Number
+  },
+  data() {
+    return {}
+  },
+  computed: {
+    input: {
+      get() {
+        return this.value
+      },
+      set(val) {
+        this.$emit('input', val)
+      }
+    }
+  },
+  methods: {},
+  mounted() {}
+}
+</script>
+
+<style scoped>
+input[type='range'] {
+  -webkit-appearance: none;
+  appearance: none;
+  background: transparent;
+  cursor: pointer;
+}
+input[type='range']:focus {
+  outline: none;
+}
+
+/* chromium */
+input[type='range']::-webkit-slider-runnable-track {
+  background-color: rgb(0 0 0 / 0.25);
+  border-radius: 9999px;
+  height: 0.75rem;
+}
+input[type='range']::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  margin-top: -0.25rem;
+  border-radius: 9999px;
+  background-color: rgb(255 255 255 / 0.7);
+  height: 1.25rem;
+  width: 1.25rem;
+}
+input[type='range']:focus::-webkit-slider-thumb {
+  border: 1px solid #6b6b6b;
+  outline: 3px solid #6b6b6b;
+  outline-offset: 0.125rem;
+}
+
+/* firefox */
+input[type='range']::-moz-range-track {
+  background-color: rgb(0 0 0 / 0.25);
+  border-radius: 9999px;
+  height: 0.75rem;
+}
+input[type='range']::-moz-range-thumb {
+  border: none;
+  border-radius: 9999px;
+  margin-top: -0.25rem;
+  background-color: rgb(255 255 255 / 0.7);
+  height: 1.25rem;
+  width: 1.25rem;
+}
+input[type='range']:focus::-moz-range-thumb {
+  border: 1px solid #6b6b6b;
+  outline: 3px solid #6b6b6b;
+  outline-offset: 0.125rem;
+}
+</style>

client/components/ui/ToggleBtns.vue

@@ -0,0 +1,85 @@
+<template>
+  <div class="inline-flex toggle-btn-wrapper shadow-md">
+    <button v-for="item in items" :key="item.value" type="button" class="toggle-btn outline-none relative border border-gray-600 px-4 py-1" :class="{ selected: item.value === value }" @click.stop="clickBtn(item.value)">
+      {{ item.text }}
+    </button>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    value: String,
+    /**
+     * [{ "text", "", "value": "" }]
+     */
+    items: {
+      type: Array,
+      default: Object
+    }
+  },
+  data() {
+    return {}
+  },
+  computed: {},
+  methods: {
+    clickBtn(value) {
+      this.$emit('input', value)
+    }
+  },
+  mounted() {}
+}
+</script>
+
+<style scoped>
+.toggle-btn-wrapper .toggle-btn:first-child {
+  border-top-left-radius: 0.375rem /* 6px */;
+  border-bottom-left-radius: 0.375rem /* 6px */;
+}
+.toggle-btn-wrapper .toggle-btn:last-child {
+  border-top-right-radius: 0.375rem /* 6px */;
+  border-bottom-right-radius: 0.375rem /* 6px */;
+}
+.toggle-btn-wrapper .toggle-btn:first-child::before {
+  border-top-left-radius: 0.375rem /* 6px */;
+  border-bottom-left-radius: 0.375rem /* 6px */;
+}
+.toggle-btn-wrapper .toggle-btn:last-child::before {
+  border-top-right-radius: 0.375rem /* 6px */;
+  border-bottom-right-radius: 0.375rem /* 6px */;
+}
+
+.toggle-btn-wrapper .toggle-btn:not(:first-child) {
+  margin-left: -1px;
+}
+
+.toggle-btn::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(255, 255, 255, 0);
+  transition: all 0.1s ease-in-out;
+}
+.toggle-btn:hover:not(:disabled)::before {
+  background-color: rgba(255, 255, 255, 0.1);
+}
+.toggle-btn:hover:not(:disabled) {
+  color: white;
+}
+
+.toggle-btn {
+  color: rgba(255, 255, 255, 0.75);
+}
+.toggle-btn.selected {
+  color: white;
+}
+.toggle-btn.selected::before {
+  background-color: rgba(255, 255, 255, 0.1);
+}
+button.toggle-btn:disabled::before {
+  background-color: rgba(0, 0, 0, 0.2);
+}
+</style>