Astrian/msr-mod
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 2 Wiki Activity

fix(Playroom): correct script source path and add ChatBubbleQuoteFull icon for improved lyrics display

Browse Source
This commit is contained in:
Astrian Zheng 2025-05-26 19:49:36 +10:00
parent 588182e888
commit 5a200edd11
Signed by: Astrian
SSH Key Fingerprint: SHA256:rVnhx3DAKjujCwWE13aDl7uV6+9U1MvydLkNRXJrBiA
3 changed files with 33 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
index.html
View File

@ -8,6 +8,6 @@
</head> </head>
<body> <body>
<div id="app"></div> <div id="app"></div>
<script type="module" src="http://localhost:5173/src/main.ts" crossorigin></script> <script type="module" src="./src/main.ts" crossorigin></script>
</body> </body>
</html> </html>

13
src/assets/icons/chatbubblequotefull.vue Normal file
View File

@ -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="M21 3C21.5523 3 22 3.44772 22 4V18C22 18.5523 21.5523 19 21 19H6.455L2 22.5V4C2 3.44772 2.44772 3 3 3H21ZM10.5153 7.4116C8.72825 8.18684 7.5 9.75543 7.5 11.5052C7.5 12.5 7.77658 13.1137 8.29171 13.6605C8.61598 14.0048 9.12905 14.25 9.66558 14.25C10.6321 14.25 11.4156 13.4665 11.4156 12.5C11.4156 11.5795 10.7045 10.8389 9.80236 10.7553C9.64107 10.7403 9.47827 10.7431 9.32317 10.7645L9.32344 10.6729C9.32873 10.2322 9.4223 8.9333 10.9616 8.1004L10.5153 7.4116ZM15.5153 7.4116C13.7283 8.18684 12.5 9.75543 12.5 11.5052C12.5 12.5 12.7766 13.1137 13.2917 13.6605C13.616 14.0048 14.1291 14.25 14.6656 14.25C15.6321 14.25 16.4156 13.4665 16.4156 12.5C16.4156 11.5795 15.7045 10.8389 14.8024 10.7553C14.6411 10.7403 14.4783 10.7431 14.3232 10.7645L14.3234 10.6729C14.3287 10.2322 14.4223 8.9333 15.9616 8.1004L15.5153 7.4116Z">
</path>
</svg>
</template>

33
src/pages/Playroom.vue
View File

@ -16,6 +16,7 @@ import PlayIcon from '../assets/icons/play.vue'
import PauseIcon from '../assets/icons/pause.vue' import PauseIcon from '../assets/icons/pause.vue'
import LoadingIndicator from '../assets/icons/loadingindicator.vue' import LoadingIndicator from '../assets/icons/loadingindicator.vue'
import ChatBubbleQuoteIcon from '../assets/icons/chatbubblequote.vue' import ChatBubbleQuoteIcon from '../assets/icons/chatbubblequote.vue'
import ChatBubbleQuoteFullIcon from '../assets/icons/chatbubblequotefull.vue'
import StarEmptyIcon from '../assets/icons/starempty.vue' import StarEmptyIcon from '../assets/icons/starempty.vue'
import MusicListIcon from '../assets/icons/musiclist.vue' import MusicListIcon from '../assets/icons/musiclist.vue'
import EllipsisHorizontalIcon from '../assets/icons/ellipsishorizontal.vue' import EllipsisHorizontalIcon from '../assets/icons/ellipsishorizontal.vue'
@ -389,9 +390,10 @@ watch(() => playQueueStore.currentIndex, () => {
<div class="font-medium flex-1 text-left relative"> <div class="font-medium flex-1 text-left relative">
<span <span
class="text-black blur-lg absolute top-0">{{ timeFormatter(Math.floor(playQueueStore.currentTime)) }}</span> class="text-black blur-lg absolute top-0">{{ timeFormatter(Math.floor(playQueueStore.currentTime)) }}</span>
<span class="text-white/90">{{ timeFormatter(Math.floor(playQueueStore.currentTime)) }}</span> <span
class="text-white/90 absolute top-0">{{ timeFormatter(Math.floor(playQueueStore.currentTime)) }}</span>
</div> </div>
<div class="text-xs text-center relative"> <div class="text-xs text-center relative flex-1">
<span class="text-black blur-lg absolute top-0">{{ formatDetector() }}</span> <span class="text-black blur-lg absolute top-0">{{ formatDetector() }}</span>
<span class="text-white">{{ formatDetector() }}</span> <span class="text-white">{{ formatDetector() }}</span>
</div> </div>
@ -418,7 +420,7 @@ watch(() => playQueueStore.currentIndex, () => {
<span class="text-black blur-md absolute top-0 left-0"> <span class="text-black blur-md absolute top-0 left-0">
<SpeakerIcon :size="6" /> <SpeakerIcon :size="6" />
</span> </span>
<span class="text-white"> <span class="text-white absolute top-0 left-0">
<SpeakerIcon :size="6" /> <SpeakerIcon :size="6" />
</span> </span>
</div> </div>
@ -430,7 +432,7 @@ watch(() => playQueueStore.currentIndex, () => {
<span class="text-black blur-md absolute top-0 left-0"> <span class="text-black blur-md absolute top-0 left-0">
<MusicListIcon :size="6" /> <MusicListIcon :size="6" />
</span> </span>
<span class="text-white"> <span class="text-white absolute top-0 left-0">
<MusicListIcon :size="6" /> <MusicListIcon :size="6" />
</span> </span>
</div> </div>
@ -445,7 +447,7 @@ watch(() => playQueueStore.currentIndex, () => {
<span class="text-black/80 blur-lg absolute top-0 left-0"> <span class="text-black/80 blur-lg absolute top-0 left-0">
<RewindIcon :size="8" /> <RewindIcon :size="8" />
</span> </span>
<span class="text-white"> <span class="text-white absolute top-0 left-0">
<RewindIcon :size="8" /> <RewindIcon :size="8" />
</span> </span>
</div> </div>
@ -460,7 +462,7 @@ watch(() => playQueueStore.currentIndex, () => {
<span class="text-black/80 blur-lg absolute top-0 left-0"> <span class="text-black/80 blur-lg absolute top-0 left-0">
<LoadingIndicator :size="6" /> <LoadingIndicator :size="6" />
</span> </span>
<span class="text-white"> <span class="text-white absolute top-0 left-0">
<LoadingIndicator :size="6" /> <LoadingIndicator :size="6" />
</span> </span>
</div> </div>
@ -468,7 +470,7 @@ watch(() => playQueueStore.currentIndex, () => {
<span class="text-black blur-md absolute top-0 left-0"> <span class="text-black blur-md absolute top-0 left-0">
<PauseIcon :size="8" /> <PauseIcon :size="8" />
</span> </span>
<span class="text-white"> <span class="text-white absolute top-0 left-0">
<PauseIcon :size="8" /> <PauseIcon :size="8" />
</span> </span>
</div> </div>
@ -478,7 +480,7 @@ watch(() => playQueueStore.currentIndex, () => {
<span class="text-black/80 blur-lg absolute top-0 left-0"> <span class="text-black/80 blur-lg absolute top-0 left-0">
<PlayIcon :size="8" /> <PlayIcon :size="8" />
</span> </span>
<span class="text-white"> <span class="text-white absolute top-0 left-0">
<PlayIcon :size="8" /> <PlayIcon :size="8" />
</span> </span>
</div> </div>
@ -492,7 +494,7 @@ watch(() => playQueueStore.currentIndex, () => {
<span class="text-black/80 blur-lg absolute top-0 left-0"> <span class="text-black/80 blur-lg absolute top-0 left-0">
<ForwardIcon :size="8" /> <ForwardIcon :size="8" />
</span> </span>
<span class="text-white"> <span class="text-white absolute top-0 left-0">
<ForwardIcon :size="8" /> <ForwardIcon :size="8" />
</span> </span>
</div> </div>
@ -505,12 +507,15 @@ watch(() => playQueueStore.currentIndex, () => {
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 duration-200 hover:scale-110"
ref="lyricsButton" @click="preferences.presentLyrics = !preferences.presentLyrics"> ref="lyricsButton" @click="preferences.presentLyrics = !preferences.presentLyrics">
<div class="w-6 h-6 relative"> <div class="w-6 h-6 relative">
<span class="text-black blur-md absolute top-0 left-0"> <span class="text-white absolute top-0 left-0 z-10">
<ChatBubbleQuoteIcon :size="6" /> <ChatBubbleQuoteFullIcon :size="6" v-if="preferences.presentLyrics" />
<ChatBubbleQuoteIcon :size="6" v-else />
</span> </span>
<span class="text-white"> <span class="text-black/40 blur-md absolute top-0 left-0 z-0">
<ChatBubbleQuoteIcon :size="6" /> <ChatBubbleQuoteFullIcon :size="6" v-if="preferences.presentLyrics" />
<ChatBubbleQuoteIcon :size="6" v-else />
</span> </span>
</div> </div>
</button> </button>
<button <button
@ -520,7 +525,7 @@ watch(() => playQueueStore.currentIndex, () => {
<span class="text-black blur-sm absolute top-0 left-0"> <span class="text-black blur-sm absolute top-0 left-0">
<EllipsisHorizontalIcon :size="6" /> <EllipsisHorizontalIcon :size="6" />
</span> </span>
<span class="text-white"> <span class="text-white absolute top-0 left-0">
<EllipsisHorizontalIcon :size="6" /> <EllipsisHorizontalIcon :size="6" />
</span> </span>
</div> </div>