Add flow option. Add snap option UI only.

client/components/readers/EpubReader.vue

@@ -42,11 +42,14 @@ export default {
       rendition: null,
       chapters: [],
       ereaderSettings: {
+        flow: 'paginated', // rendition.snappaginated | scrolled
+        spread: 'auto', // none | auto
+        snap: false, // false | true -- note this is opposite to intuition (upstream problem)
+
         theme: 'dark',
         font: 'serif',
         fontScale: 100,
         lineSpacing: 115,
-        spread: 'auto',
         textStroke: 0
       }
     }
@@ -127,6 +130,11 @@ export default {
   },
   methods: {
     updateSettings(settings) {
+      var resnapping = false
+      if (this.ereaderSettings.snap != settings.snap) {
+        resnapping = true
+      }
+
       this.ereaderSettings = settings
 
       if (!this.rendition) return
@@ -136,7 +144,11 @@ export default {
       const fontScale = settings.fontScale || 100
       this.rendition.themes.fontSize(`${fontScale}%`)
       this.rendition.themes.font(settings.font)
-      this.rendition.spread(settings.spread || 'auto')
+      this.rendition.flow(this.ereaderSettings.flow)
+      this.rendition.spread(this.ereaderSettings.spread)
+      if (resnapping) {
+        // TODO: Appears not to be part of upstream API?
+      }
     },
     prev() {
       if (!this.rendition?.manager) return
@@ -324,10 +336,10 @@ export default {
         width: this.readerWidth,
         height: this.readerHeight * 0.8,
         allowScriptedContent: this.allowScriptedContent,
-        spread: 'auto',
-        snap: true,
         manager: 'continuous',
-        flow: 'paginated'
+        spread: this.ereaderSettings.spread,
+        snap: this.ereaderSettings.snap,
+        flow: this.ereaderSettings.flow
       })
 
       // load saved progress

client/components/readers/Reader.vue

@@ -110,6 +110,18 @@
           </div>
           <ui-toggle-btns v-model="ereaderSettings.spread" :items="spreadItems" @input="settingsUpdated" />
         </div>
+        <div class="flex items-center">
+          <div class="w-40">
+            <p class="text-lg">{{ $strings.LabelFlow }}:</p>
+          </div>
+          <ui-toggle-btns v-model="ereaderSettings.flow" :items="flowItems" @input="settingsUpdated" />
+        </div>
+        <div class="flex items-center">
+          <div class="w-40">
+            <p class="text-lg">{{ $strings.LabelSnap }}:</p>
+          </div>
+          <ui-toggle-btns v-model="ereaderSettings.snap" :items="snapItems" @input="settingsUpdated" />
+        </div>
       </div>
     </modals-modal>
   </div>
@@ -137,7 +149,9 @@ export default {
         fontScale: 100,
         lineSpacing: 115,
         fontBoldness: 100,
-        spread: 'auto',
+        flow: 'paginated', // paginated | scrolled
+        spread: 'auto', // none | auto
+        snap: true, // false | true
         textStroke: 0
       }
     }
@@ -174,6 +188,30 @@ export default {
         }
       ]
     },
+    flowItems() {
+      return [
+        {
+          text: this.$strings.LabelFlowPaginated,
+          value: 'paginated'
+        },
+        {
+          text: this.$strings.LabelFlowScrolled,
+          value: 'scrolled'
+        }
+      ]
+    },
+    snapItems() {
+      return [
+        {
+          text: this.$strings.LabelSnapTrue,
+          value: false //  -- note this is opposite to intuition (upstream problem)
+        },
+        {
+          text: this.$strings.LabelSnapFalse,
+          value: true //  -- note this is opposite to intuition (upstream problem)
+        }
+      ]
+    },
     themeItems() {
       return {
         theme: [
@@ -321,10 +359,14 @@ export default {
       }
     },
     next() {
-      if (this.$refs.readerComponent?.next) this.$refs.readerComponent.next()
+      if (this.$refs.readerComponent?.next && !this.isEpub) {
+        this.$refs.readerComponent.next()
+      }
     },
     prev() {
-      if (this.$refs.readerComponent?.prev) this.$refs.readerComponent.prev()
+      if (this.$refs.readerComponent?.prev && !this.isEpub) {
+        this.$refs.readerComponent.prev()
+      }
     },
     handleGesture() {
       // Touch must be less than 1s. Must be > 60px drag and X distance > Y distance

client/strings/en-us.json

@@ -354,6 +354,9 @@
   "LabelFilterByUser": "Filter by User",
   "LabelFindEpisodes": "Find Episodes",
   "LabelFinished": "Finished",
+  "LabelFlow": "Flow",
+  "LabelFlowPaginated": "Paginated",
+  "LabelFlowScrolled": "Scrolled",
   "LabelFolder": "Folder",
   "LabelFolders": "Folders",
   "LabelFontBold": "Bold",
@@ -598,6 +601,9 @@
   "LabelSlug": "Slug",
   "LabelSortAscending": "Ascending",
   "LabelSortDescending": "Descending",
+  "LabelSnap": "Snap",
+  "LabelSnapTrue": "True",
+  "LabelSnapFalse": "False",
   "LabelStart": "Start",
   "LabelStartTime": "Start Time",
   "LabelStarted": "Started",