From 8dc0f2c67cf83735e7c365dd71879da5e008364f Mon Sep 17 00:00:00 2001
From: advplyr <advplyr@protonmail.com>
Date: Sat, 6 Apr 2024 17:48:40 -0500
Subject: [PATCH] Fix:Duplicate keys error when the same library item is shown
 twice in continue series

---
 client/components/app/BookShelfRow.vue   |  2 +-
 client/components/widgets/ItemSlider.vue | 16 +++++++++++++++-
 2 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/client/components/app/BookShelfRow.vue b/client/components/app/BookShelfRow.vue
index 60632db7..5b2c4258 100644
--- a/client/components/app/BookShelfRow.vue
+++ b/client/components/app/BookShelfRow.vue
@@ -4,7 +4,7 @@
       <div class="w-full h-full pt-6">
         <div v-if="shelf.type === 'book' || shelf.type === 'podcast'" class="flex items-center">
           <template v-for="(entity, index) in shelf.entities">
-            <cards-lazy-book-card :key="entity.id" :ref="`shelf-book-${entity.id}`" :index="index" :width="bookCoverWidth" :height="bookCoverHeight" :book-cover-aspect-ratio="bookCoverAspectRatio" :book-mount="entity" :continue-listening-shelf="continueListeningShelf" class="relative mx-2" @hook:updated="updatedBookCard" @select="selectItem" @edit="editItem" />
+            <cards-lazy-book-card :key="`${entity.id}-${index}`" :ref="`shelf-book-${entity.id}`" :index="index" :width="bookCoverWidth" :height="bookCoverHeight" :book-cover-aspect-ratio="bookCoverAspectRatio" :book-mount="entity" :continue-listening-shelf="continueListeningShelf" class="relative mx-2" @hook:updated="updatedBookCard" @select="selectItem" @edit="editItem" />
           </template>
         </div>
         <div v-if="shelf.type === 'episode'" class="flex items-center">
diff --git a/client/components/widgets/ItemSlider.vue b/client/components/widgets/ItemSlider.vue
index 7ee1f390..da6eeba4 100644
--- a/client/components/widgets/ItemSlider.vue
+++ b/client/components/widgets/ItemSlider.vue
@@ -13,7 +13,21 @@
     <div ref="slider" class="w-full overflow-y-hidden overflow-x-auto no-scroll -mx-2" style="scroll-behavior: smooth" @scroll="scrolled">
       <div class="flex" :style="{ height: height + 'px' }">
         <template v-for="(item, index) in items">
-          <cards-lazy-book-card :key="item.id + '-' + shelfId" :ref="`slider-item-${item.id}`" :index="index" :book-mount="item" :height="cardHeight" :width="cardWidth" :book-cover-aspect-ratio="bookCoverAspectRatio" :bookshelf-view="bookshelfView" :continue-listening-shelf="continueListeningShelf" class="relative mx-2" @edit="editItem" @select="selectItem" @hook:updated="setScrollVars" />
+          <cards-lazy-book-card
+            :key="item.id + '-' + shelfId + '-' + index"
+            :ref="`slider-item-${item.id}`"
+            :index="index"
+            :book-mount="item"
+            :height="cardHeight"
+            :width="cardWidth"
+            :book-cover-aspect-ratio="bookCoverAspectRatio"
+            :bookshelf-view="bookshelfView"
+            :continue-listening-shelf="continueListeningShelf"
+            class="relative mx-2"
+            @edit="editItem"
+            @select="selectItem"
+            @hook:updated="setScrollVars"
+          />
         </template>
       </div>
     </div>