✨ feat: 添加歌曲音质和特权标签显示选项

Author: imsyy

electron/main/ipc/ipc-file.ts

@@ -5,8 +5,8 @@ import { parseFile } from "music-metadata";
 import { getFileID, getFileMD5, metaDataLyricsArrayToLrc } from "../utils/helper";
 import { File, Picture, Id3v2Settings } from "node-taglib-sharp";
 import { ipcLog } from "../logger";
-import FastGlob from "fast-glob";
 import { download } from "electron-dl";
+import FastGlob from "fast-glob";
 
 /**
  * 文件相关 IPC
@@ -35,15 +35,6 @@ const initFileIpc = (): void => {
         const { common, format } = await parseFile(filePath);
         // 获取文件大小
         const { size } = await stat(filePath);
-        // 判断音质等级
-        let quality: string;
-        if ((format.sampleRate || 0) >= 96000 || (format.bitsPerSample || 0) > 16) {
-          quality = "Hi-Res";
-        } else if ((format.sampleRate || 0) >= 44100) {
-          quality = "HQ";
-        } else {
-          quality = "SQ";
-        }
         return {
           id: getFileID(filePath),
           name: common.title || basename(filePath),
@@ -53,7 +44,7 @@ const initFileIpc = (): void => {
           duration: (format?.duration ?? 0) * 1000,
           size: (size / (1024 * 1024)).toFixed(2),
           path: filePath,
-          quality,
+          quality: format.bitrate ?? 0,
         };
       });
       const metadataArray = await Promise.all(metadataPromises);

src/components/Card/SongCard.vue

@@ -43,29 +43,34 @@
             </n-ellipsis>
             <!-- 音质 -->
             <n-tag
-              v-if="song?.path && song?.quality"
+              v-if="song?.quality && settingStore.showSongQuality"
               :bordered="false"
-              :type="song.quality === 'Hi-Res' ? 'warning' : 'info'"
+              :type="qualityColor"
               class="quality"
               round
             >
               {{ song.quality }}
             </n-tag>
+            <!-- 原唱翻唱 -->
+            <template>
+              <n-tag v-if="song.originCoverType === 1" :bordered="false" type="primary" round>
+                原
+              </n-tag>
+              <n-tag v-if="song.originCoverType === 2" :bordered="false" type="info" round>
+                翻唱
+              </n-tag>
+            </template>
             <!-- 特权 -->
-            <n-tag v-if="song.originCoverType === 1" :bordered="false" type="primary" round>
-              原
-            </n-tag>
-            <n-tag v-if="song.originCoverType === 2" :bordered="false" type="info" round>
-              翻唱
-            </n-tag>
-            <n-tag v-if="song.free === 1" :bordered="false" type="error" round> VIP </n-tag>
-            <n-tag v-if="song.free === 4" :bordered="false" type="error" round> EP </n-tag>
-            <!-- 云盘 -->
-            <n-tag v-if="song?.pc" :bordered="false" class="cloud" type="info" round>
-              <template #icon>
-                <SvgIcon name="Cloud" />
-              </template>
-            </n-tag>
+            <template v-if="settingStore.showSongPrivilegeTag">
+              <n-tag v-if="song.free === 1" :bordered="false" type="error" round> VIP </n-tag>
+              <n-tag v-if="song.free === 4" :bordered="false" type="error" round> EP </n-tag>
+              <!-- 云盘 -->
+              <n-tag v-if="song?.pc" :bordered="false" class="cloud" type="info" round>
+                <template #icon>
+                  <SvgIcon name="Cloud" />
+                </template>
+              </n-tag>
+            </template>
             <!-- MV -->
             <n-tag
               v-if="song?.mv"
@@ -151,16 +156,16 @@
 </template>
 
 <script setup lang="ts">
-import type { SongType } from "@/types/main";
-import { useStatusStore, useMusicStore, useDataStore } from "@/stores";
+import { QualityType, type SongType } from "@/types/main";
+import { useStatusStore, useMusicStore, useDataStore, useSettingStore } from "@/stores";
 import { formatNumber } from "@/utils/helper";
 import { openJumpArtist } from "@/utils/modal";
 import { toLikeSong } from "@/utils/auth";
 import { isObject } from "lodash-es";
 import { formatTimestamp, msToTime } from "@/utils/time";
 import { usePlayer } from "@/utils/player";
-import blob from "@/utils/blob";
 import { isElectron } from "@/utils/env";
+import blob from "@/utils/blob";
 
 const props = defineProps<{
   // 歌曲
@@ -178,10 +183,19 @@ const player = usePlayer();
 const dataStore = useDataStore();
 const musicStore = useMusicStore();
 const statusStore = useStatusStore();
+const settingStore = useSettingStore();
 
 // 歌曲数据
 const song = toRef(props, "song");
 
+// 音质颜色
+const qualityColor = computed(() => {
+  if (song.value.quality === QualityType.HiRes) return "warning";
+  if (song.value.quality === QualityType.SQ) return "warning";
+  if (song.value.quality === QualityType.HQ) return "info";
+  return "primary";
+});
+
 // 加载本地歌曲封面
 const localCover = async (show: boolean) => {
   if (!isElectron || !show || !song.value.path) return;

src/components/Player/PlayerData.vue

@@ -39,6 +39,8 @@
         size="small"
         align="center"
       >
+        <!-- 音质 -->
+        <span class="meta-item">{{ statusStore.playUblock ? "未知音质" : statusStore.songQuality }}</span>
         <!-- 歌词模式 -->
         <span class="meta-item">{{ lyricMode }}</span>
         <!-- 是否在线 -->

src/components/Setting/GeneralSetting.vue

@@ -95,6 +95,27 @@
         </div>
         <n-switch class="set" v-model:value="settingStore.menuShowCover" :round="false" />
       </n-card>
+      <n-card class="set-item">
+        <div class="label">
+          <n-text class="name">显示歌曲音质</n-text>
+          <n-text class="tip" :depth="3">是否列表中显示歌曲音质</n-text>
+        </div>
+        <n-switch class="set" v-model:value="settingStore.showSongQuality" :round="false" />
+      </n-card>
+      <n-card class="set-item">
+        <div class="label">
+          <n-text class="name">显示特权标签</n-text>
+          <n-text class="tip" :depth="3">是否显示如 VIP、EP 等特权标签</n-text>
+        </div>
+        <n-switch class="set" v-model:value="settingStore.showSongPrivilegeTag" :round="false" />
+      </n-card>
+      <n-card class="set-item">
+        <div class="label">
+          <n-text class="name">显示原唱翻唱标签</n-text>
+          <n-text class="tip" :depth="3">是否显示歌曲原唱翻唱标签</n-text>
+        </div>
+        <n-switch class="set" v-model:value="settingStore.showSongOriginalTag" :round="false" />
+      </n-card>
       <n-card class="set-item">
         <div class="label">
           <n-text class="name">开启页面缓存</n-text>

src/stores/setting.ts

@@ -174,6 +174,12 @@ export interface SettingState {
   showDefaultLocalPath: boolean;
   /** 展示当前歌曲歌词状态信息 */
   showPlayMeta: boolean;
+  /** 显示歌曲音质 */
+  showSongQuality: boolean;
+  /** 显示歌曲特权标签 */
+  showSongPrivilegeTag: boolean;
+  /** 显示原唱翻唱标签 */
+  showSongOriginalTag: boolean;
 }
 
 export const useSettingStore = defineStore("setting", {
@@ -258,6 +264,9 @@ export const useSettingStore = defineStore("setting", {
     useRealIP: false,
     realIP: "",
     showPlayMeta: false,
+    showSongQuality: true,
+    showSongPrivilegeTag: true,
+    showSongOriginalTag: true,
   }),
   getters: {
     /**

src/stores/status.ts

@@ -1,5 +1,5 @@
 import { defineStore } from "pinia";
-import type { SortType } from "@/types/main";
+import  { QualityType,type SortType } from "@/types/main";
 import type { PlayModeType, RGB, ColorScheme } from "@/types/main";
 
 interface StatusState {
@@ -48,6 +48,8 @@ interface StatusState {
   pureLyricMode: boolean;
   /** 是否使用 TTML 歌词 */
   usingTTMLLyric: boolean;
+  /** 当前歌曲音质 */
+  songQuality: QualityType | undefined;
   /** 当前播放索引 */
   playIndex: number;
   /** 歌词播放索引 */
@@ -115,6 +117,7 @@ export const useStatusStore = defineStore("status", {
     songCoverTheme: {},
     pureLyricMode: false,
     usingTTMLLyric: false,
+    songQuality: undefined,
     spectrumsData: [],
     playIndex: -1,
     lyricIndex: -1,

src/types/main.d.ts src/types/main.tssrc/types/main.d.ts renamed to src/types/main.ts

@@ -20,6 +20,20 @@ export type CoverSize = {
   xl: string;
 };
 
+/** 音质 */
+export enum QualityType {
+  /** Hi-Res */
+  HiRes = "Hi-Res", // hr
+  /** 无损 */
+  SQ = "SQ", // sq / flac
+  /** 高质量 */
+  HQ = "HQ", // h: 320kbps
+  /** 中质量 */
+  MQ = "MQ", // m: 192kbps
+  /** 低质量 */
+  LQ = "LQ", // l: 128kbps
+}
+
 export type UserType = {
   id: number;
   name: string;
@@ -48,7 +62,7 @@ export type SongType = {
   path?: string;
   pc?: boolean;
   size?: number;
-  quality?: "Hi-Res" | "HQ" | "SQ";
+  quality?: QualityType;
   createTime?: number;
   updateTime?: number;
   playCount?: number;
@@ -68,15 +82,13 @@ export type CoverType = {
   count?: number;
   tags?: string[];
   userId?: number | null;
-  count?: number;
   privacy?: number;
   playCount?: number;
   liked?: boolean;
   likedCount?: number;
   commentCount?: number;
   shareCount?: number;
   subCount?: number;
-  playCount?: number;
   createTime?: number;
   updateTime?: number;
   loading?: boolean;
@@ -241,14 +253,14 @@ export type UpdateLogType = {
 };
 
 // 文件信息
-interface FileInfoType {
+export interface FileInfoType {
   url: string;
   sha512: string;
   size: number;
 }
 
 // 更新信息
-interface UpdateInfoType {
+export interface UpdateInfoType {
   tag: string;
   version: string;
   files: FileInfoType[];

src/utils/format.ts

@@ -1,6 +1,7 @@
-import type { SongType, CoverType, ArtistType, CommentType, MetaData, CatType } from "@/types/main";
+import { SongType, CoverType, ArtistType, CommentType, MetaData, CatType } from "@/types/main";
 import { msToTime } from "./time";
 import { flatMap, isArray, uniqBy } from "lodash-es";
+import { handleSongQuality } from "./helper";
 
 type CoverDataType = {
   cover: string;
@@ -67,7 +68,9 @@ export const formatSongsList = (data: any[]): SongType[] => {
       size: Number(item.size || 0),
       path: item.path,
       pc: !!item.pc,
-      quality: item?.quality,
+      quality: item?.path
+        ? handleSongQuality(item.quality, "local")
+        : handleSongQuality(item, "online"),
       playCount: Number(item.playCount || item.listenerCount || 0),
       createTime: Number(item.createTime || item.publishTime) || undefined,
       updateTime: Number(item.lastProgramCreateTime || item.scheduledPublishTime) || undefined,

src/utils/helper.ts

@@ -1,4 +1,4 @@
-import type { SongType, UpdateLogType } from "@/types/main";
+import { QualityType, SongType, UpdateLogType } from "@/types/main";
 import { NTooltip, SelectOption } from "naive-ui";
 import { h, VNode } from "vue";
 import { useClipboard } from "@vueuse/core";
@@ -419,3 +419,44 @@ export const runIdle = (task: () => void) => {
     }, 0);
   }
 };
+
+/**
+ * 处理歌曲音质
+ * @param song 歌曲数据
+ * @param type 歌曲类型
+ * @returns 歌曲音质
+ */
+export const handleSongQuality = (
+  song: AnyObject | number,
+  type: "local" | "online" = "local",
+): QualityType | undefined => {
+  if (type === "local" && typeof song === "number") {
+    if (song >= 960000) return QualityType.HiRes;
+    if (song >= 441000) return QualityType.SQ;
+    if (song >= 320000) return QualityType.HQ;
+    if (song >= 160000) return QualityType.MQ;
+    return QualityType.LQ;
+  }
+  // 含有 level 特殊处理
+  if( typeof song === "object" && "level" in song){
+    if(song.level === "hires") return QualityType.HiRes;
+    if(song.level === "lossless") return QualityType.SQ;
+    if(song.level === "exhigh") return QualityType.HQ;
+    if(song.level === "higher") return QualityType.MQ;
+    if(song.level === "standard") return QualityType.LQ;
+    return undefined;
+  }
+  const order = [
+    { key: "hr", type: QualityType.HiRes },
+    { key: "sq", type: QualityType.SQ },
+    { key: "h", type: QualityType.HQ },
+    { key: "m", type: QualityType.MQ },
+    { key: "l", type: QualityType.LQ },
+  ];
+  for (const itemKey of order) {
+    if (song[itemKey.key] && Number(song[itemKey.key].br) > 0) {
+      return itemKey.type;
+    }
+  }
+  return undefined;
+};