Feature: Option to keep screen on while reading

components/modals/FullscreenModal.vue

@@ -1,5 +1,5 @@
 <template>
-  <div ref="wrapper" class="modal modal-bg w-screen fixed bottom-0 left-0 flex items-center justify-center z-50" :class="halfScreen ? 'h-[50vh] min-h-[400px]' : 'h-screen'" @click.stop @touchstart.stop @touchend.stop>
+  <div ref="wrapper" class="modal modal-bg w-screen fixed bottom-0 left-0 flex items-center justify-center z-50" :class="modalSize" @click.stop @touchstart.stop @touchend.stop>
     <div ref="content" class="relative text-fg h-full w-full bg-bg">
       <slot />
     </div>
@@ -11,7 +11,8 @@ export default {
   props: {
     value: Boolean,
     processing: Boolean,
-    halfScreen: Boolean
+    halfScreen: Boolean,
+    twoThirdsScreen: Boolean
   },
   data() {
     return {
@@ -35,6 +36,11 @@ export default {
       },
       set(val) {
         this.$emit('input', val)
+},
+      modalSize() {
+        if (this.halfScreen) return 'h-[50vh] min-h-[400px]'
+        if (this.twoThirdsScreen) return 'h-[33vh] min-h-[400px]'
+        return h - screen
       }
     }
   },

components/readers/Reader.vue

@@ -54,7 +54,7 @@
     </modals-fullscreen-modal>
 
     <!-- ereader settings modal -->
-    <modals-fullscreen-modal v-model="showSettingsModal" :theme="ereaderTheme" half-screen>
+    <modals-fullscreen-modal v-model="showSettingsModal" :theme="ereaderTheme" twoThirdsScreen>
       <div style="box-shadow: 0px -8px 8px #11111155">
         <div class="flex items-end justify-between h-14 px-4 pb-2 mb-6">
           <h1 class="text-lg">{{ $strings.HeaderEreaderSettings }}</h1>
@@ -94,12 +94,19 @@
               </div>
               <ui-toggle-btns v-model="ereaderSettings.spread" :items="spreadItems" @input="settingsUpdated" />
             </div>
-            <div class="flex items-center">
+            <div class="flex items-center mb-6">
               <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 class="flex items-center mb-2">
+              <div class="w-32">
+                <p class="text-base">{{ $strings.LabelKeepScreenAwake }}:</p>
+              </div>
+              <ui-toggle-btns v-if="isKeepScreenAwakeSupported" v-model="ereaderSettings.keepScreenAwake" :items="keepScreenAwakeItems" @input="settingsUpdated" />
+              <p v-if="!isKeepScreenAwakeSupported" class="text-base">{{ $strings.LabelKeepScreenAwakeNotSupported }}</p>
+            </div>
           </div>
         </div>
       </div>
@@ -110,6 +117,7 @@
 <script>
 import { Capacitor } from '@capacitor/core'
 import { VolumeButtons } from '@capacitor-community/volume-buttons'
+import { KeepAwake } from '@capacitor-community/keep-awake'
 
 export default {
   data() {
@@ -126,13 +134,15 @@ export default {
       comicHasMetadata: false,
       chapters: [],
       isInittingWatchVolume: false,
+      isKeepScreenAwakeSupported: null,
       ereaderSettings: {
         theme: 'dark',
         fontScale: 100,
         lineSpacing: 115,
         spread: 'auto',
         textStroke: 0,
-        navigateWithVolume: 'enabled'
+        navigateWithVolume: 'enabled',
+        keepScreenAwake: 'disabled'
       }
     }
   },
@@ -209,6 +219,18 @@ export default {
         }
       ]
     },
+    keepScreenAwakeItems() {
+      return [
+        {
+          text: this.$strings.LabelKeepScreenAwakeEnabled,
+          value: 'enabled'
+        },
+        {
+          text: this.$strings.LabelKeepScreenAwakeDisabled,
+          value: 'disabled'
+        }
+      ]
+    },
     themeItems() {
       return [
         {
@@ -295,6 +317,7 @@ export default {
       localStorage.setItem('ereaderSettings', JSON.stringify(this.ereaderSettings))
 
       this.initWatchVolume()
+      this.initKeepScreenAwake()
     },
     goToChapter(href) {
       this.showTOCModal = false
@@ -440,11 +463,28 @@ export default {
 
       this.isInittingWatchVolume = false
     },
+    async initKeepScreenAwake() {
+      if (this.isKeepScreenAwakeSupported === null) {
+        const result = await KeepAwake.isSupported()
+        this.isKeepScreenAwakeSupported = result.isSupported
+      }
+      if (!this.isKeepScreenAwakeSupported) return
+      if (this.ereaderSettings.keepScreenAwake === 'enabled') {
+        await KeepAwake.keepAwake()
+      } else {
+        await this.disableKeepScreenAwake()
+      }
+    },
+    async disableKeepScreenAwake() {
+      if (!this.isKeepScreenAwakeSupported) return
+      await KeepAwake.allowSleep()
+    },
     registerListeners() {
       this.$eventBus.$on('close-ebook', this.closeEvt)
       document.body.addEventListener('touchstart', this.touchstart)
       document.body.addEventListener('touchend', this.touchend)
       this.initWatchVolume()
+      this.initKeepScreenAwake()
     },
     unregisterListeners() {
       this.$eventBus.$on('close-ebook', this.closeEvt)
@@ -453,6 +493,7 @@ export default {
       VolumeButtons.clearWatch().catch((error) => {
         console.error('Failed to clear volume watch', error)
       })
+      this.disableKeepScreenAwake()
     },
     volumePressed(e) {
       if (this.ereaderSettings.navigateWithVolume == 'enabled') {

package.json

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

strings/en-us.json

@@ -159,6 +159,10 @@
   "LabelInternalAppStorage": "Internal App Storage",
   "LabelJumpBackwardsTime": "Jump backwards time",
   "LabelJumpForwardsTime": "Jump forwards time",
+  "LabelKeepScreenAwake": "Keep screen on",
+  "LabelKeepScreenAwakeDisabled": "No",
+  "LabelKeepScreenAwakeEnabled": "Yes",
+  "LabelKeepScreenAwakeNotSupported": "Not supported by device",
   "LabelLanguage": "Language",
   "LabelLayout": "Layout",
   "LabelLayoutAuto": "Auto",