Merge pull request #1302 from RaHoni/navigate_with_volume

Make it possible to turn the page with volume keys

android/app/capacitor.build.gradle

@@ -10,6 +10,7 @@ android {
 apply from: "../capacitor-cordova-android-plugins/cordova.variables.gradle"
 dependencies {
     implementation project(':byteowls-capacitor-filesharer')
+    implementation project(':capacitor-community-volume-buttons')
     implementation project(':capacitor-app')
     implementation project(':capacitor-browser')
     implementation project(':capacitor-clipboard')

android/app/src/main/assets/capacitor.plugins.json

@@ -3,6 +3,10 @@
 		"pkg": "@byteowls/capacitor-filesharer",
 		"classpath": "com.byteowls.capacitor.filesharer.FileSharerPlugin"
 	},
+	{
+		"pkg": "@capacitor-community/volume-buttons",
+		"classpath": "com.ryltsov.alex.plugins.volume.buttons.VolumeButtonsPlugin"
+	},
 	{
 		"pkg": "@capacitor/app",
 		"classpath": "com.capacitorjs.plugins.app.AppPlugin"

android/capacitor.settings.gradle

@@ -5,6 +5,9 @@ project(':capacitor-android').projectDir = new File('../node_modules/@capacitor/
 include ':byteowls-capacitor-filesharer'
 project(':byteowls-capacitor-filesharer').projectDir = new File('../node_modules/@byteowls/capacitor-filesharer/android')
 
+include ':capacitor-community-volume-buttons'
+project(':capacitor-community-volume-buttons').projectDir = new File('../node_modules/@capacitor-community/volume-buttons/android')
+
 include ':capacitor-app'
 project(':capacitor-app').projectDir = new File('../node_modules/@capacitor/app/android')
 

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,12 +88,18 @@
               </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>
               <ui-toggle-btns v-model="ereaderSettings.spread" :items="spreadItems" @input="settingsUpdated" />
             </div>
+            <div class="flex items-center">
+              <div class="w-32">
+                <p class="text-base">{{ $strings.LabelNavigateWithVolume }}:</p>
+              </div>
+              <ui-toggle-btns v-model="ereaderSettings.navigateWithVolume" :items="navigateWithVolumeItems" @input="settingsUpdated" />
+            </div>
           </div>
         </div>
       </div>
@@ -103,6 +109,7 @@
 
 <script>
 import { Capacitor } from '@capacitor/core'
+import { VolumeButtons } from '@capacitor-community/volume-buttons'
 
 export default {
   data() {
@@ -118,12 +125,14 @@ export default {
       showSettingsModal: false,
       comicHasMetadata: false,
       chapters: [],
+      isInittingWatchVolume: false,
       ereaderSettings: {
         theme: 'dark',
         fontScale: 100,
         lineSpacing: 115,
         spread: 'auto',
-        textStroke: 0
+        textStroke: 0,
+        navigateWithVolume: 'enabled'
       }
     }
   },
@@ -141,6 +150,12 @@ export default {
           this.$showHideStatusBar(true)
         }
       }
+    },
+    isPlayerOpen(newVal, oldVal) {
+      // Closed player
+      if (!newVal && oldVal) {
+        this.initWatchVolume()
+      }
     }
   },
   computed: {
@@ -180,6 +195,22 @@ export default {
         }
       ]
     },
+    navigateWithVolumeItems() {
+      return [
+        {
+          text: this.$strings.LabelNavigateWithVolumeEnabled,
+          value: 'enabled'
+        },
+        {
+          text: this.$strings.LabelNavigateWithVolumeMirrored,
+          value: 'mirrored'
+        },
+        {
+          text: this.$strings.LabelNavigateWithVolumeDisabled,
+          value: 'none'
+        }
+      ]
+    },
     themeItems() {
       return [
         {
@@ -264,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
@@ -388,15 +421,51 @@ 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)
+      this.initWatchVolume()
     },
     unregisterListeners() {
       this.$eventBus.$on('close-ebook', this.closeEvt)
       document.body.removeEventListener('touchstart', this.touchstart)
       document.body.removeEventListener('touchend', this.touchend)
+      VolumeButtons.clearWatch()
+    },
+    volumePressed(e) {
+      if (this.ereaderSettings.navigateWithVolume == 'enabled') {
+        if (e.direction == 'up') {
+          this.prev()
+        } else {
+          this.next()
+        }
+      } else if (this.ereaderSettings.navigateWithVolume == 'mirrored') {
+        if (e.direction == 'down') {
+          this.prev()
+        } else {
+          this.next()
+        }
+      }
     }
   },
   beforeDestroy() {

ios/App/Podfile

@@ -12,6 +12,7 @@ def capacitor_pods
   pod 'Capacitor', :path => '../../node_modules/@capacitor/ios'
   pod 'CapacitorCordova', :path => '../../node_modules/@capacitor/ios'
   pod 'ByteowlsCapacitorFilesharer', :path => '../../node_modules/@byteowls/capacitor-filesharer'
+  pod 'CapacitorCommunityVolumeButtons', :path => '../../node_modules/@capacitor-community/volume-buttons'
   pod 'CapacitorApp', :path => '../../node_modules/@capacitor/app'
   pod 'CapacitorBrowser', :path => '../../node_modules/@capacitor/browser'
   pod 'CapacitorClipboard', :path => '../../node_modules/@capacitor/clipboard'

package-lock.json

@@ -9,6 +9,7 @@
       "version": "0.9.76-beta",
       "dependencies": {
         "@byteowls/capacitor-filesharer": "^5.0.0",
+        "@capacitor-community/volume-buttons": "^1.0.2",
         "@capacitor/android": "^5.0.0",
         "@capacitor/app": "^5.0.6",
         "@capacitor/browser": "^5.1.0",
@@ -1979,6 +1980,18 @@
         "@capacitor/core": ">=5"
       }
     },
+    "node_modules/@capacitor-community/volume-buttons": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@capacitor-community/volume-buttons/-/volume-buttons-1.0.2.tgz",
+      "integrity": "sha512-weEwVCgMEdkYF9uWOeZmA3kXltXSbiGlLPTmygF6NMcL1VUg1vBsiCIaikeI5XRne5V4q8UeEda83EfW7eb46g==",
+      "engines": {
+        "node": ">=16.0.0",
+        "npm": ">=8.0.0"
+      },
+      "peerDependencies": {
+        "@capacitor/core": "^5.0.0"
+      }
+    },
     "node_modules/@capacitor/android": {
       "version": "5.6.0",
       "resolved": "https://registry.npmjs.org/@capacitor/android/-/android-5.6.0.tgz",

package.json

@@ -14,6 +14,7 @@
   },
   "dependencies": {
     "@byteowls/capacitor-filesharer": "^5.0.0",
+    "@capacitor-community/volume-buttons": "^1.0.2",
     "@capacitor/android": "^5.0.0",
     "@capacitor/app": "^5.0.6",
     "@capacitor/browser": "^5.1.0",

strings/de.json

@@ -165,6 +165,10 @@
   "LabelMoreInfo": "Mehr Infos",
   "LabelNarrator": "Erzähler",
   "LabelNarrators": "Erzähler",
+  "LabelNavigateWithVolume": "Mit Lautstärke blättern",
+  "LabelNavigateWithVolumeDisabled": "Aus",
+  "LabelNavigateWithVolumeEnabled": "An",
+  "LabelNavigateWithVolumeMirrored": "Umgekehrt",
   "LabelNever": "Nie",
   "LabelNewestAuthors": "Neueste Autoren",
   "LabelNewestEpisodes": "Neueste Episoden",

strings/en-us.json

@@ -176,6 +176,10 @@
   "LabelName": "Name",
   "LabelNarrator": "Narrator",
   "LabelNarrators": "Narrators",
+  "LabelNavigateWithVolume": "Navigate with volume keys",
+  "LabelNavigateWithVolumeDisabled": "Off",
+  "LabelNavigateWithVolumeEnabled": "On",
+  "LabelNavigateWithVolumeMirrored": "Mirrored",
   "LabelNever": "Never",
   "LabelNewestAuthors": "Newest Authors",
   "LabelNewestEpisodes": "Newest Episodes",