feat(player): 完善播放器

front/package.json

@@ -12,6 +12,7 @@
     "axios": "^0.27.2",
     "naive-ui": "^2.28.2",
     "pinia": "^2.0.14",
+    "vconsole": "^3.14.6",
     "vue": "^3.2.25",
     "vue-router": "4"
   },

front/src/App.vue

@@ -2,7 +2,7 @@
   setup
   lang="ts"
 >
-import { NConfigProvider, NMessageProvider, zhCN } from "naive-ui";
+import { NConfigProvider, NMessageProvider, NNotificationProvider, zhCN } from "naive-ui";
 import { onMounted, ref } from "vue";
 import { usePlayerStore } from "./stores";
 
@@ -18,14 +18,19 @@ onMounted(() => {
 <template>
   <NConfigProvider :locale="zhCN">
     <NMessageProvider>
-      <vue-progress-bar></vue-progress-bar>
-      <router-view />
-      <audio
-        ref="audioPlayerRef"
-        class="hidden"
-        :src="playerStore.currentSong?.songUrl"
-        controls
-      ></audio>
+      <NNotificationProvider
+        :max="3"
+        placement="bottom-left"
+      >
+        <vue-progress-bar></vue-progress-bar>
+        <router-view />
+        <audio
+          ref="audioPlayerRef"
+          class="hidden"
+          :src="playerStore.currentSong?.songUrl"
+          controls
+        ></audio>
+      </NNotificationProvider>
     </NMessageProvider>
   </NConfigProvider>
 </template>

front/src/interfaces.ts

@@ -72,3 +72,9 @@ export interface IWebsocketNewSong {
   albumName: string;
   albumPicUrl: string;
 }
+
+export interface IWebsocketDanmuCommand {
+  commandName: string;
+  senderName: string;
+  arg1: string;
+}

front/src/stores/index.ts

@@ -1,4 +1,5 @@
-import { IPlaySong, IWebsocketMessage, IWebsocketNewSong } from "@/interfaces";
+import { IPlaySong, IWebsocketDanmuCommand, IWebsocketMessage, IWebsocketNewSong } from "@/interfaces";
+import { last } from "lodash";
 import { defineStore } from "pinia";
 
 export const useCommonStore = defineStore("common", {});
@@ -11,6 +12,7 @@ export const usePlayerStore = defineStore("player", {
       isPause: false,
       currentTime: 0,
       musicList: [] as IPlaySong[],
+      onDanmuCommand: null as null | ((command: IWebsocketDanmuCommand) => void),
     };
   },
   getters: {
@@ -20,13 +22,18 @@ export const usePlayerStore = defineStore("player", {
   },
   actions: {
     connectWebsocket() {
-      this.ws = new WebSocket("ws://localhost:18000/ws/connect");
+      this.ws = new WebSocket(`ws://${import.meta.env.DEV ? "localhost:18000" : window.location.host}/ws/connect`);
       this.ws.onmessage = (event) => {
         console.log(event);
         if (event.data) {
-          const data = JSON.parse(event.data) as IWebsocketMessage<IWebsocketNewSong>;
+          const data = JSON.parse(event.data) as IWebsocketMessage<any>;
           if (data.type === "new_song") {
-            const song = data.data;
+            const song = data.data as IWebsocketNewSong;
+            const lastSong = last(this.musicList);
+            if (lastSong && lastSong.id == parseInt(song.id)) {
+              return;
+            }
+
             this.musicList.push({
               id: parseInt(song.id),
               name: song.name,
@@ -35,8 +42,10 @@ export const usePlayerStore = defineStore("player", {
               duration: song.duration,
               lyric: song.lrc,
               artists: [{ id: 0, name: song.singerName }],
-              songUrl: `http://localhost:18000/music/${song.fileName}`,
+              songUrl: `${import.meta.env.DEV ? "http://localhost:18000" : ""}/music/${song.fileName}`,
             });
+          } else if (data.type == "danmu_command") {
+            this.onDanmuCommand?.(data.data);
           }
         }
       };

front/src/views/Index.vue

@@ -7,6 +7,7 @@ import { NButton, NForm, NFormItem, NInput, NInputNumber, NThing, useMessage } f
 import { ConfigService, LiveService } from "@/services";
 import { usePlayerStore } from "@/stores";
 import ConfigLayout from "@/components/ConfigLayout.vue";
+import VConsole from "vconsole";
 
 const playerStore = usePlayerStore();
 const message = useMessage();
@@ -50,11 +51,18 @@ async function stopLive() {
   await LiveService.stopLive();
   state.liveState = false;
 }
+
+function onDebug() {
+  new VConsole();
+}
 </script>
 
 <template>
   <config-layout>
-    <div class="p-5">
+    <div
+      class="p-5"
+      id="index-page"
+    >
       <n-form>
         <n-thing title="直播间设置">
           <n-form-item label="直播间ID">
@@ -81,6 +89,13 @@ async function stopLive() {
               class="!ml-2"
               >保存配置</n-button
             >
+            <n-button
+              type="info"
+              secondary
+              @click="onDebug"
+              class="!ml-2"
+              >Debug</n-button
+            >
           </div>
         </n-thing>
       </n-form>

front/src/views/Player.vue

@@ -8,19 +8,29 @@ import SongLyric from "./components/SongLyric.vue";
 import { onMounted, ref, watch, getCurrentInstance } from "vue";
 import _ from "lodash";
 import { useRouter } from "vue-router";
-import { NCard } from "naive-ui";
+import { NCard, useNotification } from "naive-ui";
 
 const instance = getCurrentInstance();
 
 const playerStore = usePlayerStore();
 const router = useRouter();
+const notification = useNotification();
 
 /**
  * 初始化音频
  */
 function initAudio() {
   if (playerStore.playerRef && instance) {
     const progress = instance.appContext.config.globalProperties.$Progress;
+    let isFinish = true;
+
+    playerStore.playerRef.oncanplay = () => {
+      console.log("music oncanplay");
+      if (isFinish) {
+        playerStore.playerRef?.play();
+        isFinish = false;
+      }
+    };
 
     // 监听播放进度
     playerStore.playerRef.ontimeupdate = (el) => {
@@ -38,15 +48,28 @@ function initAudio() {
       // 结束时如果没有新歌曲了 则重新播放当前音乐
       if (playerStore.musicList.length > 1) {
         playerStore.musicList.shift();
+      } else {
+        playerStore.playerRef?.play();
       }
 
-      playerStore.playerRef?.play();
+      isFinish = true;
     };
   }
 }
 
 onMounted(() => {
   initAudio();
+
+  playerStore.onDanmuCommand = (event) => {
+    if (event.commandName == "点歌") {
+      notification.success({
+        closable: false,
+        duration: 5000,
+        title: "收到点歌",
+        content: `由 [${event.senderName}] 所点的 [${event.arg1}]，请等待下载`,
+      });
+    }
+  };
 });
 </script>
 
@@ -58,8 +81,7 @@ onMounted(() => {
     <div class="flex justify-center">
       <div
         class="mr-32 flex items-center"
-        @click="() => playerStore.playerRef?.play()"
-        @dblclick="() => router.push('/')"
+        @click="() => router.push('/')"
       >
         <rotate-cover :img="playerStore.currentSong.coverImg" />
       </div>
@@ -68,10 +90,11 @@ onMounted(() => {
         :lyric="playerStore.currentSong.lyric || ''"
       />
     </div>
-    <div class="mt-10 flex h-56 justify-center">
+    <div class="mt-5 flex h-56 justify-center">
       <n-card
         title="播放列表"
         class="!w-96 !overflow-hidden"
+        @dblclick="() => playerStore.playerRef?.play()"
       >
         <div
           v-for="(song, index) in playerStore.musicList"
@@ -89,4 +112,7 @@ onMounted(() => {
       </n-card>
     </div>
   </div>
+  <div v-else>
+    <button @click="() => router.push('/')">去配置中心</button>
+  </div>
 </template>

front/src/views/components/SongLyric.vue

@@ -11,10 +11,9 @@
     </div>
     <div class="mt-4 flex">
       <div class="mr-2 flex text-[13px] text-gray-600">
-        专辑：<span
-          class="w-24 cursor-pointer overflow-hidden overflow-ellipsis whitespace-nowrap text-blue-400"
-          >{{ song.album }}</span
-        >
+        专辑：<span class="w-24 cursor-pointer overflow-hidden overflow-ellipsis whitespace-nowrap text-blue-400">{{
+          song.album
+        }}</span>
       </div>
       <div class="mr-1 flex text-[13px] text-gray-600">
         歌手：<span
@@ -54,7 +53,10 @@
   </div>
 </template>
 
-<script lang="ts" setup>
+<script
+  lang="ts"
+  setup
+>
 import { ref, watch, computed } from "vue";
 import { formatLyric } from "@//utils";
 import { usePlayerStore } from "@/stores";
@@ -82,9 +84,7 @@ const formatedLyrics = computed(() => {
     const lyricList = formatLyric(props.lyric);
     const transLyricList = formatLyric(props.transLyric);
     return lyricList.map((item) => {
-      const findResult = transLyricList.find(
-        (transItem) => item.time === transItem.time
-      );
+      const findResult = transLyricList.find((transItem) => item.time === transItem.time);
       if (findResult) {
         return {
           ...item,
@@ -100,9 +100,7 @@ const formatedLyrics = computed(() => {
 const lyricClass = (text: string, index: number) => {
   return {
     "text-[18px] text-gray-900 font-bold":
-      currentLyricIndex.value === index - 1 &&
-      !text.includes("作词") &&
-      !text.includes("作曲"),
+      currentLyricIndex.value === index - 1 && !text.includes("作词") && !text.includes("作曲"),
   };
 };
 
@@ -112,16 +110,10 @@ watch(
     if (newTime !== oldTime) {
       /** 获取比当前播放时间大的第一个元素 */
       for (let i = 0; i < formatedLyrics.value.length; i++) {
-        if (
-          Math.floor(formatedLyrics.value[i].time) ===
-          Math.floor(playerStore.currentTime)
-        ) {
+        if (Math.floor(formatedLyrics.value[i].time) === Math.floor(playerStore.currentTime)) {
           currentLyricIndex.value = i - 1;
           break;
-        } else if (
-          Math.floor(formatedLyrics.value[i].time) >
-          Math.floor(playerStore.currentTime)
-        ) {
+        } else if (Math.floor(formatedLyrics.value[i].time) > Math.floor(playerStore.currentTime)) {
           currentLyricIndex.value = i - 2;
           break;
         }
@@ -139,6 +131,11 @@ watch(
             top: height - 160 + 20,
             behavior: "smooth",
           });
+        } else {
+          scrollBarRef.value?.scrollTo({
+            top: 0,
+            behavior: "smooth",
+          });
         }
       }
     }

front/yarn.lock

@@ -15,6 +15,13 @@
   resolved "https://registry.npmmirror.com/@babel/parser/-/parser-7.17.10.tgz#873b16db82a8909e0fbd7f115772f4b739f6ce78"
   integrity sha512-n2Q6i+fnJqzOaq2VkdXxy2TCPCWQZHiCo0XqmrCvDWcZQKRyZzYi4Z0yxlBuN0w+r2ZHmre+Q087DSrw3pbJDQ==
 
+"@babel/runtime@^7.17.2":
+  version "7.17.9"
+  resolved "https://registry.npmmirror.com/@babel/runtime/-/runtime-7.17.9.tgz#d19fbf802d01a8cb6cf053a64e472d42c434ba72"
+  integrity sha512-lSiBBvodq29uShpWGNbgFdKYNiFDo5/HIYsaCEY9ff4sb10x9jizo2+pRrSyF4jKZCXqgzuqBOQKbUm90gQwJg==
+  dependencies:
+    regenerator-runtime "^0.13.4"
+
 "@css-render/plugin-bem@^0.15.9":
   version "0.15.9"
   resolved "https://registry.npmmirror.com/@css-render/plugin-bem/-/plugin-bem-0.15.9.tgz#204ccdb65fdfd293b8cbcf587c8f31633f41f513"
@@ -369,7 +376,12 @@ combined-stream@^1.0.8:
   dependencies:
     delayed-stream "~1.0.0"
 
-core-js@^3.6.5:
+copy-text-to-clipboard@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.npmmirror.com/copy-text-to-clipboard/-/copy-text-to-clipboard-3.0.1.tgz#8cbf8f90e0a47f12e4a24743736265d157bce69c"
+  integrity sha512-rvVsHrpFcL4F2P8ihsoLdFHmd404+CMg71S756oRSeQgqk51U3kicGdnvfkrxva0xXH92SjGS62B0XIJsbh+9Q==
+
+core-js@^3.11.0, core-js@^3.6.5:
   version "3.22.4"
   resolved "https://registry.npmmirror.com/core-js/-/core-js-3.22.4.tgz#f4b3f108d45736935aa028444a69397e40d8c531"
   integrity sha512-1uLykR+iOfYja+6Jn/57743gc9n73EWiOnSJJ4ba3B4fOEYDBv25MagmEZBxTp5cWq4b/KPx/l77zgsp28ju4w==
@@ -781,6 +793,11 @@ minimist@^1.1.1:
   resolved "https://registry.npmmirror.com/minimist/-/minimist-1.2.6.tgz#8637a5b759ea0d6e98702cfb3a9283323c93af44"
   integrity sha512-Jsjnk4bw3YJqYzbdyBiNsPWHPfO++UGG749Cxs6peCu5Xg4nrena6OVxOYxrQTqww0Jmwt+Ref8rggumkTLz9Q==
 
+mutation-observer@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.npmmirror.com/mutation-observer/-/mutation-observer-1.0.3.tgz#42e9222b101bca82e5ba9d5a7acf4a14c0f263d0"
+  integrity sha512-M/O/4rF2h776hV7qGMZUH3utZLO/jK7p8rnNgGkjKUw8zCGjRQPxB8z6+5l8+VjRUQ3dNYu4vjqXYLr+U8ZVNA==
+
 naive-ui@^2.28.2:
   version "2.28.2"
   resolved "https://registry.npmmirror.com/naive-ui/-/naive-ui-2.28.2.tgz#266995e5f1e2c126b3de3152da1c3ed55009b207"
@@ -938,6 +955,11 @@ readdirp@~3.6.0:
   dependencies:
     picomatch "^2.2.1"
 
+regenerator-runtime@^0.13.4:
+  version "0.13.9"
+  resolved "https://registry.npmmirror.com/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz#8925742a98ffd90814988d7566ad30ca3b263b52"
+  integrity sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA==
+
 resolve@^1.22.0:
   version "1.22.0"
   resolved "https://registry.npmmirror.com/resolve/-/resolve-1.22.0.tgz#5e0b8c67c15df57a89bdbabe603a002f21731198"
@@ -1049,6 +1071,16 @@ util-deprecate@^1.0.2:
   resolved "https://registry.npmmirror.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"
   integrity sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==
 
+vconsole@^3.14.6:
+  version "3.14.6"
+  resolved "https://registry.npmmirror.com/vconsole/-/vconsole-3.14.6.tgz#74cbbf9c14e66d26325958cee8a9e8c4086a5115"
+  integrity sha512-8Ffk2SfNe6EzKqZ0aNnNjpAVBVT7zgJo81lYEJdKySYLVYBeSawdSkWi9fSjDg3WsQhgS1vNPmRqJDTuwdVbnQ==
+  dependencies:
+    "@babel/runtime" "^7.17.2"
+    copy-text-to-clipboard "^3.0.1"
+    core-js "^3.11.0"
+    mutation-observer "^1.0.3"
+
 vdirs@^0.1.4, vdirs@^0.1.8:
   version "0.1.8"
   resolved "https://registry.npmmirror.com/vdirs/-/vdirs-0.1.8.tgz#a103bc43baca738f8dea912a7e9737154a19dbc2"