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

@@ -94,6 +94,12 @@
               </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,8 @@
 
 <script>
 import { Capacitor } from '@capacitor/core'
+import { VolumeButtons } from '@capacitor-community/volume-buttons';
+
 
 export default {
   data() {
@@ -123,7 +131,8 @@ export default {
         fontScale: 100,
         lineSpacing: 115,
         spread: 'auto',
-        textStroke: 0
+        textStroke: 0,
+        navigateWithVolume: 'enabled'
       }
     }
   },
@@ -180,6 +189,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 [
         {
@@ -392,11 +417,38 @@ export default {
       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);
+      }
+
     },
     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();
+      }
+    },
+    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

@@ -176,6 +176,10 @@
   "LabelName": "Name",
   "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",