fix(webui): double pages could show duplicate pages

komga-webui/src/components/readers/PagedReader.vue

@@ -75,12 +75,12 @@
 </template>
 
 <script lang="ts">
-import { isPageLandscape } from '@/functions/page'
 import Vue from 'vue'
 import {ReadingDirection} from '@/types/enum-books'
 import {PagedReaderLayout, ScaleType} from '@/types/enum-reader'
 import {shortcutsLTR, shortcutsRTL, shortcutsVertical} from '@/functions/shortcuts/paged-reader'
 import {PageDtoWithUrl} from '@/types/komga-books'
+import {buildSpreads} from "@/functions/book-spreads";
 
 export default Vue.extend({
   name: 'PagedReader',
@@ -122,8 +122,8 @@ export default Vue.extend({
   },
   watch: {
     pages: {
-      handler () {
+      handler (val) {
-        this.spreads = this.buildSpreads()
+        this.spreads = buildSpreads(val, this.pageLayout)
       },
       immediate: true,
     },
@@ -134,9 +134,9 @@ export default Vue.extend({
       this.carouselPage = this.toSpreadIndex(val)
     },
     pageLayout: {
-      handler () {
+      handler (val) {
         const current = this.page
-        this.spreads = this.buildSpreads()
+        this.spreads = buildSpreads(this.pages, val)
         this.carouselPage = this.toSpreadIndex(current)
       },
       immediate: true,
@@ -196,43 +196,6 @@ export default Vue.extend({
     keyPressed (e: KeyboardEvent) {
       this.shortcuts[e.key]?.execute(this)
     },
-    buildSpreads (): PageDtoWithUrl[][] {
-      if (this.pages.length === 0) return []
-      if (this.isDoublePages) {
-        const spreads = []
-        let pages: PageDtoWithUrl[]
-        if (this.pageLayout === PagedReaderLayout.DOUBLE_PAGES) {
-          spreads.push([this.pages[0]])
-          pages = this.$_.drop(this.$_.dropRight(this.pages))
-        } else {
-          pages = this.$_.cloneDeep(this.pages)
-        }
-        while (pages.length > 0) {
-          const p = pages.shift() as PageDtoWithUrl
-          if (isPageLandscape(p)) {
-            spreads.push([p])
-          } else {
-            if (pages.length > 0) {
-              const p2 = pages.shift() as PageDtoWithUrl
-              if (isPageLandscape(p2)) {
-                spreads.push([p])
-                spreads.push([p2])
-              } else {
-                spreads.push([p, p2])
-              }
-            } else {
-              spreads.push([p])
-            }
-          }
-        }
-        if (this.pageLayout === PagedReaderLayout.DOUBLE_PAGES) {
-          spreads.push([this.pages[this.pages.length - 1]])
-        }
-        return spreads
-      } else {
-        return this.pages.map(p => [p])
-      }
-    },
     imgClass (spread: PageDtoWithUrl[]): string {
       const double = spread.length > 1
       switch (this.scale) {

komga-webui/src/functions/book-spreads.ts

@@ -0,0 +1,43 @@
+import {PageDtoWithUrl} from "@/types/komga-books"
+import {PagedReaderLayout} from "@/types/enum-reader"
+import {isPageLandscape} from "@/functions/page"
+import {cloneDeep, drop, dropRight} from 'lodash'
+
+
+export function buildSpreads(pages: PageDtoWithUrl[], pageLayout: PagedReaderLayout): PageDtoWithUrl[][] {
+  if (pages.length === 0) return []
+  if (pageLayout !== PagedReaderLayout.SINGLE_PAGE) {
+    const spreads = []
+    let pagesClone: PageDtoWithUrl[]
+    let lastPage = undefined
+    if (pageLayout === PagedReaderLayout.DOUBLE_PAGES) {
+      spreads.push([pages[0]])
+      pagesClone = drop(pages)
+      if (pagesClone.length > 0) lastPage = dropRight(pagesClone)
+    } else {
+      pagesClone = cloneDeep(pages)
+    }
+    while (pagesClone.length > 0) {
+      const p = pagesClone.shift() as PageDtoWithUrl
+      if (isPageLandscape(p)) {
+        spreads.push([p])
+      } else {
+        if (pagesClone.length > 0) {
+          const p2 = pagesClone.shift() as PageDtoWithUrl
+          if (isPageLandscape(p2)) {
+            spreads.push([p])
+            spreads.push([p2])
+          } else {
+            spreads.push([p, p2])
+          }
+        } else {
+          spreads.push([p])
+        }
+      }
+    }
+    if (lastPage) spreads.push(lastPage)
+    return spreads
+  } else {
+    return pages.map(p => [p])
+  }
+}

komga-webui/tests/unit/.eslintrc.js

@@ -1,5 +1,5 @@
 module.exports = {
   env: {
-    jest: true
+    jest: true,
-  }
+  },
 }

komga-webui/tests/unit/functions/book-spreads.spec.ts

@@ -0,0 +1,81 @@
+import {buildSpreads} from "@/functions/book-spreads";
+import {PagedReaderLayout} from "@/types/enum-reader";
+import {PageDtoWithUrl} from "@/types/komga-books";
+
+describe("Single Page", () => {
+  const pageLayout = PagedReaderLayout.SINGLE_PAGE
+
+  test("given no pages then it should return no spreads", () => {
+    const pages = [] as PageDtoWithUrl[]
+
+    const spreads = buildSpreads(pages, pageLayout)
+
+    expect(spreads.length).toEqual(0)
+  })
+
+  test("given single page then it should return single spread with single page", () => {
+    const pages = [
+      {
+        number: 1,
+      } as PageDtoWithUrl,
+    ] as PageDtoWithUrl[]
+
+    const spreads = buildSpreads(pages, pageLayout)
+
+    expect(spreads.length).toEqual(1)
+    expect(spreads[0].length).toEqual(1)
+    expect(spreads[0][0].number).toEqual(1)
+  })
+})
+
+describe("Double Pages", () => {
+  const pageLayout = PagedReaderLayout.DOUBLE_PAGES
+
+  test("given no pages then it should return no spreads", () => {
+    const pages = [] as PageDtoWithUrl[]
+
+    const spreads = buildSpreads(pages, pageLayout)
+
+    expect(spreads.length).toEqual(0)
+  })
+
+  test("given single page then it should return single spread with single page", () => {
+    const pages = [
+      {
+        number: 1,
+      } as PageDtoWithUrl,
+    ] as PageDtoWithUrl[]
+
+    const spreads = buildSpreads(pages, pageLayout)
+
+    expect(spreads.length).toEqual(1)
+    expect(spreads[0].length).toEqual(1)
+    expect(spreads[0][0].number).toEqual(1)
+  })
+})
+
+describe("Double Pages No Cover", () => {
+  const pageLayout = PagedReaderLayout.DOUBLE_NO_COVER
+
+  test("given no pages then it should return no spreads", () => {
+    const pages = [] as PageDtoWithUrl[]
+
+    const spreads = buildSpreads(pages, pageLayout)
+
+    expect(spreads.length).toEqual(0)
+  })
+
+  test("given single page then it should return single spread with single page", () => {
+    const pages = [
+      {
+        number: 1,
+      } as PageDtoWithUrl,
+    ] as PageDtoWithUrl[]
+
+    const spreads = buildSpreads(pages, pageLayout)
+
+    expect(spreads.length).toEqual(1)
+    expect(spreads[0].length).toEqual(1)
+    expect(spreads[0][0].number).toEqual(1)
+  })
+})