Fix:Window resize build bookshelf

Dockerfile

@@ -11,8 +11,9 @@ RUN apk update && apk add --no-cache --update ffmpeg
 ENV NODE_ENV=production
 COPY --from=build /client/dist /client/dist
 COPY index.js index.js
+COPY package-lock.json package-lock.json
 COPY package.json package.json
 COPY server server
-RUN npm install --production
+RUN npm ci --production
 EXPOSE 80
 CMD ["npm", "start"]

client/components/app/LazyBookshelf.vue

@@ -62,7 +62,9 @@ export default {
       currentSFQueryString: null,
       pendingReset: false,
       keywordFilter: null,
-      currScrollTop: 0
+      currScrollTop: 0,
+      resizeTimeout: null,
+      mountWindowWidth: 0
     }
   },
   watch: {
@@ -322,6 +324,21 @@ export default {
         this.cardsHelpers.mountEntityCard(i)
       })
     },
+    rebuild() {
+      this.initSizeData()
+
+      var lastBookIndex = Math.min(this.totalEntities, this.shelvesPerPage * this.entitiesPerShelf)
+      this.entityIndexesMounted = []
+      for (let i = 0; i < lastBookIndex; i++) {
+        this.entityIndexesMounted.push(i)
+      }
+      var bookshelfEl = document.getElementById('bookshelf')
+      if (bookshelfEl) {
+        bookshelfEl.scrollTop = 0
+      }
+
+      this.$nextTick(this.remountEntities)
+    },
     buildSearchParams() {
       if (this.page === 'search' || this.page === 'series' || this.page === 'collections' || this.page === 'series-books') {
         return ''
@@ -358,19 +375,7 @@ export default {
       if (wasUpdated) {
         this.resetEntities()
       } else if (settings.bookshelfCoverSize !== this.currentBookWidth) {
-        this.initSizeData()
-
-        var lastBookIndex = Math.min(this.totalEntities, this.shelvesPerPage * this.entitiesPerShelf)
-        this.entityIndexesMounted = []
-        for (let i = 0; i < lastBookIndex; i++) {
-          this.entityIndexesMounted.push(i)
-        }
-        var bookshelfEl = document.getElementById('bookshelf')
-        if (bookshelfEl) {
-          bookshelfEl.scrollTop = 0
-        }
-
-        this.$nextTick(this.remountEntities)
+        this.rebuild()
       }
     },
     scroll(e) {
@@ -428,6 +433,8 @@ export default {
       var entitiesPerShelfBefore = this.entitiesPerShelf
 
       var { clientHeight, clientWidth } = bookshelf
+      console.log('Init bookshelf width', clientWidth, 'window width', window.innerWidth)
+      this.mountWindowWidth = window.innerWidth
       this.bookshelfHeight = clientHeight
       this.bookshelfWidth = clientWidth
       this.entitiesPerShelf = Math.floor((this.bookshelfWidth - 64) / this.totalEntityCardWidth)
@@ -449,12 +456,23 @@ export default {
       var lastBookIndex = Math.min(this.totalEntities, this.shelvesPerPage * this.entitiesPerShelf)
       this.mountEntites(0, lastBookIndex)
     },
+    windowResize() {
+      clearTimeout(this.resizeTimeout)
+      this.resizeTimeout = setTimeout(() => {
+        this.rebuild()
+      }, 200)
+    },
     initListeners() {
-      var bookshelf = document.getElementById('bookshelf')
-      if (bookshelf) {
-        this.init(bookshelf)
-        bookshelf.addEventListener('scroll', this.scroll)
-      }
+      window.addEventListener('resize', this.windowResize)
+
+      this.$nextTick(() => {
+        var bookshelf = document.getElementById('bookshelf')
+        if (bookshelf) {
+          this.init(bookshelf)
+          bookshelf.addEventListener('scroll', this.scroll)
+        }
+      })
+
       this.$eventBus.$on('bookshelf-clear-selection', this.clearSelectedEntities)
       this.$eventBus.$on('bookshelf-select-all', this.selectAllEntities)
       this.$eventBus.$on('bookshelf-keyword-filter', this.updateKeywordFilter)
@@ -472,6 +490,7 @@ export default {
       }
     },
     removeListeners() {
+      window.removeEventListener('resize', this.windowResize)
       var bookshelf = document.getElementById('bookshelf')
       if (bookshelf) {
         bookshelf.removeEventListener('scroll', this.scroll)
@@ -506,6 +525,12 @@ export default {
   mounted() {
     this.initListeners()
   },
+  updated() {
+    if (window.innerWidth > 0 && window.innerWidth !== this.mountWindowWidth) {
+      console.log('Updated window width', window.innerWidth, 'from', this.mountWindowWidth)
+      this.rebuild()
+    }
+  },
   beforeDestroy() {
     this.destroyEntityComponents()
     this.removeListeners()

client/store/audiobooks.js

@@ -26,7 +26,7 @@ export const getters = {
     if (process.env.NODE_ENV !== 'production') { // Testing
       return `http://localhost:3333/api/books/${bookItem.id}/cover?token=${userToken}&ts=${bookLastUpdate}`
     }
-    return `/api/books/${bookItem.id}/cover?token=${userToken}`
+    return `/api/books/${bookItem.id}/cover?token=${userToken}&ts=${bookLastUpdate}`
   }
 }