fix(webreader): incorrect double pages display

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

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

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

@@ -52,6 +52,62 @@ describe("Double Pages", () => {
     expect(spreads[0].length).toEqual(1)
     expect(spreads[0][0].number).toEqual(1)
   })
+
+  test("given even pages then it should return correct spreads", () => {
+    const pages = [
+      {number: 1} as PageDtoWithUrl,
+      {number: 2} as PageDtoWithUrl,
+      {number: 3} as PageDtoWithUrl,
+      {number: 4} as PageDtoWithUrl,
+      {number: 5} as PageDtoWithUrl,
+      {number: 6} as PageDtoWithUrl,
+    ] as PageDtoWithUrl[]
+
+    const spreads = buildSpreads(pages, pageLayout)
+
+    expect(spreads.length).toEqual(4)
+
+    expect(spreads[0].length).toEqual(1)
+    expect(spreads[0][0].number).toEqual(1)
+
+    expect(spreads[1].length).toEqual(2)
+    expect(spreads[1][0].number).toEqual(2)
+    expect(spreads[1][1].number).toEqual(3)
+
+    expect(spreads[2].length).toEqual(2)
+    expect(spreads[2][0].number).toEqual(4)
+    expect(spreads[2][1].number).toEqual(5)
+
+    expect(spreads[3].length).toEqual(1)
+    expect(spreads[3][0].number).toEqual(6)
+  })
+
+  test("given odd pages then it should return correct spreads", () => {
+    const pages = [
+      {number: 1} as PageDtoWithUrl,
+      {number: 2} as PageDtoWithUrl,
+      {number: 3} as PageDtoWithUrl,
+      {number: 4} as PageDtoWithUrl,
+      {number: 5} as PageDtoWithUrl,
+    ] as PageDtoWithUrl[]
+
+    const spreads = buildSpreads(pages, pageLayout)
+
+    expect(spreads.length).toEqual(4)
+
+    expect(spreads[0].length).toEqual(1)
+    expect(spreads[0][0].number).toEqual(1)
+
+    expect(spreads[1].length).toEqual(2)
+    expect(spreads[1][0].number).toEqual(2)
+    expect(spreads[1][1].number).toEqual(3)
+
+    expect(spreads[2].length).toEqual(1)
+    expect(spreads[2][0].number).toEqual(4)
+
+    expect(spreads[3].length).toEqual(1)
+    expect(spreads[3][0].number).toEqual(5)
+  })
 })
 
 describe("Double Pages No Cover", () => {