feat(Playroom): add new icons for audio quality and Chromecast options in more options dialog

src/assets/icons/castempty.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+defineProps<{
+	size: number
+}>()
+</script>
+
+<template>
+	<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" :class="`w-${size} h-${size}`">
+		<path
+			d="M3 3H21C21.5523 3 22 3.44772 22 4V20C22 20.5523 21.5523 21 21 21H15C15 20.3199 14.9478 19.6519 14.8471 19H20V5H4V8.1529C3.34806 8.05223 2.68013 8 2 8V4C2 3.44772 2.44772 3 3 3ZM13 21H11C11 16.0294 6.97056 12 2 12V10C8.07513 10 13 14.9249 13 21ZM9 21H7C7 18.2386 4.76142 16 2 16V14C5.86599 14 9 17.134 9 21ZM5 21H2V18C3.65685 18 5 19.3431 5 21Z">
+		</path>
+	</svg>
+</template>

src/assets/icons/musicalnotesparkling.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+defineProps<{
+	size: number
+}>()
+</script>
+
+<template>
+	<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" :class="`w-${size} h-${size}`">
+		<path
+			d="M18.7134 8.12811L18.4668 8.69379C18.2864 9.10792 17.7136 9.10792 17.5331 8.69379L17.2866 8.12811C16.8471 7.11947 16.0555 6.31641 15.0677 5.87708L14.308 5.53922C13.8973 5.35653 13.8973 4.75881 14.308 4.57612L15.0252 4.25714C16.0384 3.80651 16.8442 2.97373 17.2761 1.93083L17.5293 1.31953C17.7058 0.893489 18.2942 0.893489 18.4706 1.31953L18.7238 1.93083C19.1558 2.97373 19.9616 3.80651 20.9748 4.25714L21.6919 4.57612C22.1027 4.75881 22.1027 5.35653 21.6919 5.53922L20.9323 5.87708C19.9445 6.31641 19.1529 7.11947 18.7134 8.12811ZM7 3H12V5H9V17C9 19.2091 7.20914 21 5 21C2.79086 21 1 19.2091 1 17C1 14.7909 2.79086 13 5 13C5.72857 13 6.41165 13.1948 7 13.5351V3ZM18 13.5351V11H20V17C20 19.2091 18.2091 21 16 21C13.7909 21 12 19.2091 12 17C12 14.7909 13.7909 13 16 13C16.7286 13 17.4117 13.1948 18 13.5351ZM5 19C6.10457 19 7 18.1046 7 17C7 15.8954 6.10457 15 5 15C3.89543 15 3 15.8954 3 17C3 18.1046 3.89543 19 5 19ZM16 19C17.1046 19 18 18.1046 18 17C18 15.8954 17.1046 15 16 15C14.8954 15 14 15.8954 14 17C14 18.1046 14.8954 19 16 19Z">
+		</path>
+	</svg>
+</template>

src/pages/Playroom.vue

@@ -27,6 +27,8 @@ import ShuffleIcon from '../assets/icons/shuffle.vue'
 import CycleTwoArrowsIcon from '../assets/icons/cycletwoarrows.vue'
 import CycleTwoArrowsWithNumOneIcon from '../assets/icons/cycletwoarrowswithnumone.vue'
 import SpeakerIcon from '../assets/icons/speaker.vue'
+import MuscialNoteSparklingIcon from '../assets/icons/musicalnotesparkling.vue'
+import CastEmptyIcon from '../assets/icons/castempty.vue'
 
 const playQueueStore = usePlayQueueStore()
 const preferences = usePreferences()
@@ -48,6 +50,7 @@ const playButton = useTemplateRef('playButton')
 const presentQueueListDialog = ref(false)
 const presentLyrics = ref(false)
 const showLyricsTooltip = ref(false)
+const showMoreOptions = ref(false)
 
 import PlayQueueItem from '../components/PlayQueueItem.vue'
 
@@ -521,15 +524,44 @@ watch(() => playQueueStore.currentIndex, () => {
 							</transition>
 						</div>
 						<button
-							class="text-white h-8 w-8 flex justify-center items-center rounded-full hover:bg-white/25 transition-all duration-200 hover:scale-110"
+							class="text-white h-8 w-8 flex justify-center items-center rounded-full hover:bg-white/25 transition-all"
-							ref="moreButton">
+							@click="showMoreOptions = !showMoreOptions">
 							<div class="w-6 h-6 relative">
-								<span class="text-black blur-sm absolute top-0 left-0">
+								<span class="text-black blur-sm absolute top-0 left-0 hover:scale-110 transition-all">
 									<EllipsisHorizontalIcon :size="6" />
 								</span>
-								<span class="text-white absolute top-0 left-0">
+								<span class="text-white absolute top-0 left-0 hover:scale-110 transition-all">
 									<EllipsisHorizontalIcon :size="6" />
 								</span>
+
+								<dialog :open="showMoreOptions" @click.self="showMoreOptions = false"
+									class="bottom-8 left-[-13.3rem] w-60 rounded-md overflow-hidden bg-black/60 backdrop-blur-3xl shadow-2xl border border-[#ffffff39]">
+									<ul class="my-2 flex flex-col gap-1">
+										<li>
+											<button
+												class="flex px-2 py-1 hover:bg-white/10 w-full text-left disabled:opacity-70 cursor-not-allowed"
+												disabled>
+												<MuscialNoteSparklingIcon :size="4" class="text-white mr-2" />
+												<div class="flex-col">
+													<div class="text-white text-sm">音频质量</div>
+													<div class="text-white/60 text-xs">改不了，海猫没给这个选项！</div>
+												</div>
+											</button>
+										</li>
+
+										<li>
+											<button
+												class="flex px-2 py-1 hover:bg-white/10 w-full text-left disabled:opacity-70 cursor-not-allowed"
+												disabled>
+												<CastEmptyIcon :size="4" class="text-white mr-2" />
+												<div class="flex-col">
+													<div class="text-white text-sm">Chromecast 投放</div>
+													<div class="text-white/60 text-xs">下个版本！</div>
+												</div>
+											</button>
+										</li>
+									</ul>
+								</dialog>
 							</div>
 						</button>
 					</div>