From 699976dcd856f5fc1073bbdac3337553e0226359 Mon Sep 17 00:00:00 2001
From: Lars Kiesow <lkiesow@uos.de>
Date: Mon, 16 Jan 2023 23:54:23 +0100
Subject: [PATCH] Make Player Menu Items Look Alike

Instead of handling some items of the player menu as special cases,
adding icons and colors, this patch allows menu items to have icons in
general, allowing for the removal of the special cases.

This also makes it easy to actually use a homogeneous style for all of
the player menu items, letting them all have an icon and aligning them
visually.
---
 components/app/AudioPlayer.vue | 22 +++-------------------
 components/modals/Dialog.vue   |  1 +
 2 files changed, 4 insertions(+), 19 deletions(-)

diff --git a/components/app/AudioPlayer.vue b/components/app/AudioPlayer.vue
index b9adc80e..c2972b8d 100644
--- a/components/app/AudioPlayer.vue
+++ b/components/app/AudioPlayer.vue
@@ -99,24 +99,7 @@
     </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(item.value)">
-          <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">{{ item.text }}</span>
-          </div>
-        </li>
-      </template>
-      <template v-slot:lock="{ item }">
-        <li class="text-gray-50 select-none relative py-4 cursor-pointer hover:bg-black-400" role="option" @click="clickMenuAction(item.value)">
-          <div class="flex items-center px-3">
-            <span v-if="item.icon" class="material-icons-outlined text-xl mr-2 text-opacity-80" :class="{ 'text-red-500': lockUi, 'text-white': !lockUi }">{{ item.icon }}</span>
-            <span class="font-normal block truncate text-base text-white text-opacity-80">{{ item.text }}</span>
-          </div>
-        </li>
-      </template>
-    </modals-dialog>
+    <modals-dialog v-model="showMoreMenuDialog" :items="menuItems" @action="clickMenuAction" />
   </div>
 </template>
 
@@ -190,7 +173,8 @@ export default {
       if (this.$platform !== 'ios' && !this.isPodcast && this.mediaId) {
         items.push({
           text: 'History',
-          value: 'history'
+          value: 'history',
+          icon: 'history'
         })
       }
 
diff --git a/components/modals/Dialog.vue b/components/modals/Dialog.vue
index 31041ff8..4eba3e28 100644
--- a/components/modals/Dialog.vue
+++ b/components/modals/Dialog.vue
@@ -13,6 +13,7 @@
             <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">
+                  <span v-if="item.icon" class="material-icons-outlined text-xl mr-2 text-opacity-80" :class="{ 'text-red-500': lockUi, 'text-white': !lockUi }">{{ item.icon }}</span>
                   <p class="font-normal block truncate text-base text-white text-opacity-80">{{ item.text }}</p>
                 </div>
               </li>