fix: 🐛 Fixed display of playlists with duplicate tracks

EricLambrecht · Sep 7, 2018 · 4caee70 · 4caee70
1 parent 4a6c15b
commit 4caee70
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 2 deletions.
diff --git a/src/components/EditorPlaylist.vue b/src/components/EditorPlaylist.vue
@@ -12,7 +12,7 @@
       <editor-playlist-item
         :item="item"
         :position="index+1"
-        :key="item.track.id"
+        :key="item._uniqueId"
         :class="{
           'drag-hover': draggedTo === index,
           'drag-origin': index === draggedFromOriginally
@@ -103,6 +103,9 @@ export default {
         this.temporaryPlaylistItems.splice(from, 1)[0],
       );
     },
+    createUniqueId() {
+      return Math.random().toString(36).substr(2, 9);
+    },
   },
 };
 </script>

diff --git a/src/store/editor/getters.js b/src/store/editor/getters.js
@@ -17,7 +17,9 @@ export default {
     return state.playlist.images[0].url;
   },
   playlistName: (state, getters) => getters.playlist.name || 'Choose playlist',
-  playlistItems: (state, getters) => getters.playlist.tracks.items,
+  playlistItems: (state, getters) => getters.playlist.tracks.items.map(
+    (item, i) => ({ ...item, _uniqueId: `${i}-${item.track.id}` }),
+  ),
   playlistTrackCount: (state, getters) => getters.playlist.tracks.total,
   playlistLengthMs: (state, getters) => getters.playlist.tracks.items.reduce(
     (total, item) => total + item.track.duration_ms,