feat: 显示当前播放的在线歌曲的音质

src/lang/en-us.json

@@ -650,6 +650,7 @@
   "sync__overwrite_label": "Overwrite",
   "sync__overwrite_tip": "Overwrite: ",
   "sync_status_disabled": "not connected",
+  "tag__low_quality": "LQ",
   "tag__high_quality": "HQ",
   "tag__lossless": "SQ",
   "tag__lossless_24bit": "24bit",

src/lang/zh-cn.json

@@ -650,6 +650,7 @@
   "sync__overwrite_label": "覆盖",
   "sync__overwrite_tip": "覆盖:",
   "sync_status_disabled": "未连接",
+  "tag__low_quality": "LQ",
   "tag__high_quality": "HQ",
   "tag__lossless": "SQ",
   "tag__lossless_24bit": "24bit",

src/lang/zh-tw.json

@@ -650,6 +650,7 @@
   "sync__overwrite_label": "覆寫",
   "sync__overwrite_tip": "覆寫:",
   "sync_status_disabled": "未連線",
+  "tag__low_quality": "LQ",
   "tag__high_quality": "HQ",
   "tag__lossless": "SQ",
   "tag__lossless_24bit": "24bit",

src/renderer/components/layout/PlayBar/FullWidthProgress.vue

@@ -9,7 +9,7 @@
     </div>
     <div :class="$style.infoContent">
       <div :class="$style.title" :aria-label="title + $t('copy_tip')" @click="handleCopy(title)">
-        {{ title }}
+        {{ title }} <quality />
       </div>
       <div :class="$style.status">{{ statusText }}</div>
     </div>
@@ -48,6 +48,8 @@ import { computed } from '@common/utils/vueTools'
 import { useRouter } from '@common/utils/vueRouter'
 import { clipboardWriteText } from '@common/utils/electron'
 import ControlBtns from './ControlBtns.vue'
+import Quality from './Quality.vue'
+
 // import PlayProgress from './PlayProgress'
 import usePlayProgress from '@renderer/utils/compositions/usePlayProgress'
 // import { lyric } from '@renderer/core/share/lyric'
@@ -71,6 +73,7 @@ export default {
   name: 'CorePlayBar',
   components: {
     ControlBtns,
+    Quality,
     // PlayProgress,
   },
   setup() {

src/renderer/components/layout/PlayBar/MiddleWidthProgress.vue

@@ -6,7 +6,7 @@
     </div>
     <div :class="$style.infoContent">
       <div :class="$style.title" :aria-label="title + $t('copy_tip')" @click="handleCopy(title)">
-        {{ title }}
+        {{ title }} <quality />
       </div>
       <div :class="$style.status">{{ statusText }}</div>
     </div>
@@ -48,6 +48,7 @@ import { computed } from '@common/utils/vueTools'
 import { useRouter } from '@common/utils/vueRouter'
 import { clipboardWriteText } from '@common/utils/electron'
 import ControlBtns from './ControlBtns.vue'
+import Quality from './Quality.vue'
 // import PlayProgress from './PlayProgress'
 import usePlayProgress from '@renderer/utils/compositions/usePlayProgress'
 // import { lyric } from '@renderer/core/share/lyric'
@@ -71,6 +72,7 @@ export default {
   name: 'CorePlayBar',
   components: {
     ControlBtns,
+    Quality,
     // PlayProgress,
   },
   setup() {

src/renderer/components/layout/PlayBar/MiniWidthProgress.vue

@@ -6,7 +6,7 @@
     </div>
     <div :class="$style.infoContent">
       <div :class="$style.title" :aria-label="title + $t('copy_tip')" @click="handleCopy(title)">
-        {{ title }}
+        {{ title }} <quality />
       </div>
       <div :class="$style.status">{{ statusText }}</div>
     </div>
@@ -51,6 +51,7 @@ import { useRouter } from '@common/utils/vueRouter'
 import { clipboardWriteText } from '@common/utils/electron'
 import ControlBtns from './ControlBtns.vue'
 import PlayProgress from './PlayProgress.vue'
+import Quality from './Quality.vue'
 import usePlayProgress from '@renderer/utils/compositions/usePlayProgress'
 // import { lyric } from '@renderer/core/share/lyric'
 import {
@@ -74,6 +75,7 @@ export default {
   components: {
     ControlBtns,
     PlayProgress,
+    Quality,
   },
   setup() {
     const router = useRouter()
@@ -118,6 +120,8 @@ export default {
         : ''
     })
 
+    const quality = computed(() => playMusicInfo.quality)
+
     // onBeforeUnmount(() => {
     // window.eventHub.emit(eventPlayerNames.setTogglePlay)
     // })
@@ -140,6 +144,7 @@ export default {
       playPrev,
       handleToMusicLocation,
       isShowPlayerDetail,
+      quality,
     }
   },
 }

src/renderer/components/layout/PlayBar/Quality.vue

@@ -0,0 +1,18 @@
+<template>
+    <span v-if="playMusicInfo.quality === 'flac24bit'" class="no-select badge badge-theme-primary">{{ $t('tag__lossless_24bit') }}</span>
+    <span v-else-if="playMusicInfo.quality === 'ape' || playMusicInfo.quality === 'flac' || playMusicInfo.quality === 'wav'" class="no-select badge badge-theme-primary">{{ $t('tag__lossless') }}</span>
+    <span v-else-if="playMusicInfo.quality === '320k'" class="no-select badge badge-theme-secondary">{{ $t('tag__high_quality') }}</span>
+    <span v-else-if="playMusicInfo.quality === '128k'" class="no-select badge badge-theme-tertiary">{{ $t('tag__low_quality') }}</span>
+</template>
+
+<script>
+import { playMusicInfo } from '@renderer/store/player/state'
+
+export default {
+  setup() {
+    return {
+      playMusicInfo,
+    }
+  },
+}
+</script>

src/renderer/core/player/action.ts

@@ -5,6 +5,7 @@ import {
   clearPlayedList,
   clearTempPlayeList,
   setPlayMusicInfo,
+  setPlayMusicInfoQuality,
   addPlayedList,
   setMusicInfo,
   setAllStatus,
@@ -133,6 +134,7 @@ export const setMusicUrl = (musicInfo: LX.Music.MusicInfo | LX.Download.ListItem
   void getMusicPlayUrl(musicInfo, isRefresh).then((url) => {
     if (!url) return
     setResource(url)
+    setPlayMusicInfoQuality(musicInfo)
   }).catch((err: any) => {
     console.log(err)
     setAllStatus(err.message)

src/renderer/store/player/action.ts

@@ -13,15 +13,16 @@ import {
   playedList,
   tempPlayList,
 } from './state'
+import { appSetting } from '@renderer/store/setting'
 import { getListMusicsFromCache } from '@renderer/store/list/action'
 import { downloadList } from '@renderer/store/download/state'
 import { setProgress } from './playProgress'
 import { playNext } from '@renderer/core/player'
+import { getPlayQuality } from '@renderer/core/music/utils'
 import { LIST_IDS } from '@common/constants'
 import { toRaw } from '@common/utils/vueTools'
 import { arrPush, arrUnshift } from '@common/utils/common'
 
-
 type PlayerMusicInfoKeys = keyof typeof musicInfo
 
 const musicInfoKeys: PlayerMusicInfoKeys[] = Object.keys(musicInfo) as PlayerMusicInfoKeys[]
@@ -196,7 +197,19 @@ export const setPlayMusicInfo = (listId: string | null, musicInfo: LX.Download.L
     window.app_event.musicToggled()
   }
 }
-
+/**
+ * 设置当前播放歌曲的音质(如果是在线歌曲)
+ * @param musicInfo 歌曲信息
+ */
+export const setPlayMusicInfoQuality = (musicInfo: LX.Music.MusicInfo | LX.Download.ListItem) => {
+  if (!('progress' in musicInfo)) {
+    playMusicInfo.quality = musicInfo.source !== 'local'
+      ? getPlayQuality(appSetting['player.playQuality'], musicInfo)
+      : undefined
+  } else {
+    playMusicInfo.quality = undefined
+  }
+}
 /**
  * 将歌曲添加到已播放列表
  * @param playMusicInfo playMusicInfo对象

src/renderer/store/player/state.ts

@@ -53,10 +53,15 @@ export const playMusicInfo = shallowReactive<{
    * 是否属于 “稍后播放”
    */
   isTempPlay: boolean
+  /**
+   * 当前播放音质
+   */
+  quality?: LX.Quality
 }>({
   listId: null,
   musicInfo: null,
   isTempPlay: false,
+  quality: undefined,
 })
 export const playInfo = shallowReactive<LX.Player.PlayInfo>({
   playIndex: -1,

src/renderer/types/player.d.ts

@@ -14,6 +14,10 @@ declare namespace LX {
         * 是否属于 “稍后播放”
         */
       isTempPlay: boolean
+      /**
+        * 当前播放音质
+        */
+      quality?: LX.Quality
     }
 
     interface PlayInfo {