From 9ca357c2c3557c1b6129a9f66c95ffb4434405df Mon Sep 17 00:00:00 2001
From: Kasper Seweryn <github@wvffle.net>
Date: Mon, 23 Jan 2023 12:48:37 +0100
Subject: [PATCH] fix(front): reinitialize virtual queue list whenever queue
 gets empty

Part-of: <https://dev.funkwhale.audio/funkwhale/funkwhale/-/merge_requests/2337>
---
 front/src/components/Queue.vue                | 1 +
 front/src/composables/audio/usePlayOptions.ts | 4 ++--
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/front/src/components/Queue.vue b/front/src/components/Queue.vue
index 5bbc83439..0fa7379ec 100644
--- a/front/src/components/Queue.vue
+++ b/front/src/components/Queue.vue
@@ -427,6 +427,7 @@ const coverType = useStorage('queue:cover-type', CoverType.COVER_ART)
           </h2>
         </div>
         <virtual-list
+          v-if="queueItems.length !== 0"
           ref="list"
           :list="queueItems"
           :component="QueueItem"
diff --git a/front/src/composables/audio/usePlayOptions.ts b/front/src/composables/audio/usePlayOptions.ts
index f18443ba5..e8909c5d0 100644
--- a/front/src/composables/audio/usePlayOptions.ts
+++ b/front/src/composables/audio/usePlayOptions.ts
@@ -2,7 +2,7 @@ import type { Track, Artist, Album, Playlist, Library, Channel, Actor } from '~/
 import type { ContentFilter } from '~/store/moderation'
 
 import { useCurrentElement } from '@vueuse/core'
-import { computed, markRaw, ref } from 'vue'
+import { computed, markRaw, nextTick, ref } from 'vue'
 import { i18n } from '~/init/locale'
 import { useStore } from '~/store'
 
@@ -155,7 +155,7 @@ export default (props: PlayOptionsProps) => {
   }
 
   const replacePlay = async (index?: number) => {
-    clear()
+    await clear()
 
     jQuery(el.value).find('.ui.dropdown').dropdown('hide')