From a32bd9d74c7545d9341d55ce54c7aa15e3412d2c Mon Sep 17 00:00:00 2001
From: advplyr <advplyr@protonmail.com>
Date: Mon, 22 Aug 2022 16:02:35 -0500
Subject: [PATCH] Update:Audio player menu to modal instead of dropdown

---
 components/app/AudioPlayer.vue | 18 ++++++++++++++----
 components/modals/Dialog.vue   | 12 +++++++-----
 2 files changed, 21 insertions(+), 9 deletions(-)

diff --git a/components/app/AudioPlayer.vue b/components/app/AudioPlayer.vue
index 61a94a19..20ae55ae 100644
--- a/components/app/AudioPlayer.vue
+++ b/components/app/AudioPlayer.vue
@@ -8,9 +8,7 @@
         <span class="material-icons text-3xl" :class="isCasting ? 'text-success' : ''" @click="castClick">cast</span>
       </div>
       <div class="top-4 right-4 absolute cursor-pointer">
-        <ui-dropdown-menu ref="dropdownMenu" :items="menuItems" @action="clickMenuAction">
-          <span class="material-icons text-3xl">more_vert</span>
-        </ui-dropdown-menu>
+        <span class="material-icons text-3xl" @click="showMoreMenuDialog = true">more_vert</span>
       </div>
       <p class="top-2 absolute left-0 right-0 mx-auto text-center uppercase tracking-widest text-opacity-75" style="font-size: 10px" :class="{ 'text-success': isLocalPlayMethod, 'text-accent': !isLocalPlayMethod }">{{ isDirectPlayMethod ? 'Direct' : isLocalPlayMethod ? 'Local' : 'Transcode' }}</p>
     </div>
@@ -95,6 +93,16 @@
     </div>
 
     <modals-chapters-modal v-model="showChapterModal" :current-chapter="currentChapter" :chapters="chapters" @select="selectChapter" />
+    <modals-dialog v-model="showMoreMenuDialog" :items="menuItems" @action="clickMenuAction">
+      <template v-slot:chapter_track="{ item }">
+        <li class="text-gray-50 select-none relative py-4 cursor-pointer hover:bg-black-400" role="option" @click="clickMenuAction('chapter_track')">
+          <div class="flex items-center px-3">
+            <span v-if="item.icon" class="material-icons-outlined text-xl mr-2 text-white text-opacity-80">{{ item.icon }}</span>
+            <span class="font-normal block truncate text-base text-white text-opacity-80">Use Chapter Track</span>
+          </div>
+        </li>
+      </template>
+    </modals-dialog>
   </div>
 </template>
 
@@ -142,7 +150,8 @@ export default {
       isLoading: false,
       touchTrackStart: false,
       dragPercent: 0,
-      syncStatus: 0
+      syncStatus: 0,
+      showMoreMenuDialog: false
     }
   },
   watch: {
@@ -612,6 +621,7 @@ export default {
       }
     },
     clickMenuAction(action) {
+      this.showMoreMenuDialog = false
       if (action === 'chapter_track') {
         this.useChapterTrack = !this.useChapterTrack
 
diff --git a/components/modals/Dialog.vue b/components/modals/Dialog.vue
index f1c37bf4..31041ff8 100644
--- a/components/modals/Dialog.vue
+++ b/components/modals/Dialog.vue
@@ -10,11 +10,13 @@
       <div ref="container" class="w-full overflow-x-hidden overflow-y-auto bg-primary rounded-lg border border-white border-opacity-20" style="max-height: 75%" @click.stop>
         <ul class="h-full w-full" role="listbox" aria-labelledby="listbox-label">
           <template v-for="item in items">
-            <li :key="item.value" class="text-gray-50 select-none relative py-4 cursor-pointer hover:bg-black-400" :class="selected === item.value ? 'bg-success bg-opacity-10' : ''" role="option" @click="clickedOption(item.value)">
-              <div class="relative flex items-center px-3">
-                <p class="font-normal block truncate text-base text-white text-opacity-80">{{ item.text }}</p>
-              </div>
-            </li>
+            <slot :name="item.value" :item="item" :selected="item.value === selected">
+              <li :key="item.value" class="text-gray-50 select-none relative py-4 cursor-pointer hover:bg-black-400" :class="selected === item.value ? 'bg-success bg-opacity-10' : ''" role="option" @click="clickedOption(item.value)">
+                <div class="relative flex items-center px-3">
+                  <p class="font-normal block truncate text-base text-white text-opacity-80">{{ item.text }}</p>
+                </div>
+              </li>
+            </slot>
           </template>
         </ul>
       </div>