Epub ereader volume navigate setting fixes and disable when player is open

components/readers/Reader.vue

@@ -56,7 +56,7 @@
     <!-- ereader settings modal -->
     <modals-fullscreen-modal v-model="showSettingsModal" :theme="ereaderTheme" half-screen>
       <div style="box-shadow: 0px -8px 8px #11111155">
-        <div class="flex items-end justify-between h-20 px-4 pb-2 mb-6">
+        <div class="flex items-end justify-between h-14 px-4 pb-2 mb-6">
           <h1 class="text-lg">{{ $strings.HeaderEreaderSettings }}</h1>
           <button class="flex" @click="showSettingsModal = false">
             <span class="material-icons">close</span>
@@ -88,7 +88,7 @@
               </div>
               <ui-range-input v-model="ereaderSettings.textStroke" :min="0" :max="300" :step="5" input-width="180px" @input="settingsUpdated" />
             </div>
-            <div class="flex items-center">
+            <div class="flex items-center mb-6">
               <div class="w-32">
                 <p class="text-base">{{ $strings.LabelLayout }}:</p>
               </div>
@@ -109,8 +109,7 @@
 
 <script>
 import { Capacitor } from '@capacitor/core'
-import { VolumeButtons } from '@capacitor-community/volume-buttons';
-
+import { VolumeButtons } from '@capacitor-community/volume-buttons'
 
 export default {
   data() {
@@ -126,6 +125,7 @@ export default {
       showSettingsModal: false,
       comicHasMetadata: false,
       chapters: [],
+      isInittingWatchVolume: false,
       ereaderSettings: {
         theme: 'dark',
         fontScale: 100,
@@ -150,6 +150,12 @@ export default {
           this.$showHideStatusBar(true)
         }
       }
+    },
+    isPlayerOpen(newVal, oldVal) {
+      // Closed player
+      if (!newVal && oldVal) {
+        this.initWatchVolume()
+      }
     }
   },
   computed: {
@@ -289,6 +295,8 @@ export default {
     settingsUpdated() {
       this.$refs.readerComponent?.updateSettings?.(this.ereaderSettings)
       localStorage.setItem('ereaderSettings', JSON.stringify(this.ereaderSettings))
+
+      this.initWatchVolume()
     },
     goToChapter(href) {
       this.showTOCModal = false
@@ -413,37 +421,46 @@ export default {
         console.error('Failed to load ereader settings', error)
       }
     },
+    async initWatchVolume() {
+      if (this.isInittingWatchVolume || !this.isEpub) return
+      this.isInittingWatchVolume = true
+      const isWatching = await VolumeButtons.isWatching()
+
+      if (this.ereaderSettings.navigateWithVolume !== 'none' && !this.isPlayerOpen) {
+        if (!isWatching.value) {
+          const options = {
+            disableSystemVolumeHandler: true,
+            suppressVolumeIndicator: true
+          }
+          await VolumeButtons.watchVolume(options, this.volumePressed)
+        }
+      } else if (isWatching.value) {
+        await VolumeButtons.clearWatch()
+      }
+
+      this.isInittingWatchVolume = false
+    },
     registerListeners() {
       this.$eventBus.$on('close-ebook', this.closeEvt)
       document.body.addEventListener('touchstart', this.touchstart)
       document.body.addEventListener('touchend', this.touchend)
-
-      if (!this.isMobi && this.ereaderSettings.navigateWithVolume != 'none'){
-        const options = {
-          disableSystemVolumeHandler: true,
-          suppressVolumeIndicator: true
-        }
-        VolumeButtons.watchVolume(options, this.volumePressed);
-      }
-
+      this.initWatchVolume()
     },
     unregisterListeners() {
       this.$eventBus.$on('close-ebook', this.closeEvt)
       document.body.removeEventListener('touchstart', this.touchstart)
       document.body.removeEventListener('touchend', this.touchend)
-      if (VolumeButtons.isWatching()) {
-        VolumeButtons.clearWatch();
-      }
+      VolumeButtons.clearWatch()
     },
     volumePressed(e) {
-      if (this.ereaderSettings.navigateWithVolume == 'enabled'){
-        if (e.direction == "up") {
+      if (this.ereaderSettings.navigateWithVolume == 'enabled') {
+        if (e.direction == 'up') {
           this.prev()
         } else {
           this.next()
         }
       } else if (this.ereaderSettings.navigateWithVolume == 'mirrored') {
-        if (e.direction == "down") {
+        if (e.direction == 'down') {
           this.prev()
         } else {
           this.next()