From b8acb83f30c92a6445d5c4cfb0cfd0235a3104bd Mon Sep 17 00:00:00 2001 From: Can Date: Mon, 9 May 2022 22:38:40 +0800 Subject: [PATCH] =?UTF-8?q?feat(player):=20=E5=AE=8C=E5=96=84=E6=92=AD?= =?UTF-8?q?=E6=94=BE=E5=99=A8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- front/package.json | 1 + front/src/App.vue | 23 +- front/src/interfaces.ts | 6 + front/src/stores/index.ts | 19 +- front/src/views/Index.vue | 17 +- front/src/views/Player.vue | 36 +- front/src/views/components/SongLyric.vue | 35 +- front/yarn.lock | 34 +- go.mod | 16 +- go.sum | 589 ----------------------- main.go | 8 +- src/routers/routers.go | 9 +- src/services/video_service.go | 421 ++++++++-------- src/utils/flv_file_pump.go | 241 +++++----- 14 files changed, 475 insertions(+), 980 deletions(-) diff --git a/front/package.json b/front/package.json index 4b57914..b111299 100644 --- a/front/package.json +++ b/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" }, diff --git a/front/src/App.vue b/front/src/App.vue index 22d7925..5257d59 100644 --- a/front/src/App.vue +++ b/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(() => { diff --git a/front/src/interfaces.ts b/front/src/interfaces.ts index 79e7fce..47fb84e 100644 --- a/front/src/interfaces.ts +++ b/front/src/interfaces.ts @@ -72,3 +72,9 @@ export interface IWebsocketNewSong { albumName: string; albumPicUrl: string; } + +export interface IWebsocketDanmuCommand { + commandName: string; + senderName: string; + arg1: string; +} diff --git a/front/src/stores/index.ts b/front/src/stores/index.ts index eb2510a..a8d8502 100644 --- a/front/src/stores/index.ts +++ b/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; + const data = JSON.parse(event.data) as IWebsocketMessage; 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); } } }; diff --git a/front/src/views/Index.vue b/front/src/views/Index.vue index 88326c4..65d072e 100644 --- a/front/src/views/Index.vue +++ b/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(); +} diff --git a/front/src/views/components/SongLyric.vue b/front/src/views/components/SongLyric.vue index 83f037c..2aa9add 100644 --- a/front/src/views/components/SongLyric.vue +++ b/front/src/views/components/SongLyric.vue @@ -11,10 +11,9 @@
- 专辑：{{ song.album }} + 专辑：{{ + song.album + }}
歌手： -