Feat: auto check seek

synctv-org · Oct 8, 2023 · 9dda2be · 9dda2be
1 parent 08000eb
commit 9dda2be
Show file tree

Hide file tree

Showing 3 changed files with 79 additions and 26 deletions.
diff --git a/src/plugins/sync.ts b/src/plugins/sync.ts
@@ -1,11 +1,8 @@
-import { ref, watch } from "vue";
-import type { WatchStopHandle, Ref } from "vue";
 import { roomStore } from "@/stores/room";
 import { devLog, debounces } from "@/utils/utils";
-import Notify from "@/utils/notify";
 import { useDebounceFn } from "@vueuse/core";
 import { WsMessageType } from "@/types/Room";
-import { ElNotification, ElMessage } from "element-plus";
+import { ElNotification } from "element-plus";
 const room = roomStore();
 
 interface callback {
@@ -33,7 +30,7 @@ export const sync = (cbk: callback): resould => {
     if (!player || player.option.isLive) return;
     cbk["set-player-status"](
       JSON.stringify({
-        Type: WsMessageType.SEEK,
+        Type: WsMessageType.ChangeSeek,
         Seek: currentTime,
         Rate: player.playbackRate
       })
@@ -50,7 +47,7 @@ export const sync = (cbk: callback): resould => {
     if (!player || player.option.isLive) return;
     cbk["set-player-status"](
       JSON.stringify({
-        Type: WsMessageType.PLAY,
+        Type: WsMessageType.Play,
         Seek: player.currentTime,
         Rate: player.playbackRate
       })
@@ -80,7 +77,7 @@ export const sync = (cbk: callback): resould => {
     if (!player || player.option.isLive) return;
     cbk["set-player-status"](
       JSON.stringify({
-        Type: WsMessageType.PAUSE,
+        Type: WsMessageType.Pause,
         Seek: player.currentTime,
         Rate: player.playbackRate
       })
@@ -102,7 +99,7 @@ export const sync = (cbk: callback): resould => {
     if (!player || player.option.isLive) return;
     cbk["set-player-status"](
       JSON.stringify({
-        Type: WsMessageType.RATE,
+        Type: WsMessageType.ChangeRate,
         Seek: player.currentTime,
         Rate: player.playbackRate
       })
@@ -122,6 +119,8 @@ export const sync = (cbk: callback): resould => {
   const plugin = (art: Artplayer) => {
     player = art;
     if (!art.option.isLive) {
+      const intervals: number[] = [];
+
       art.once("ready", () => {
         console.log(room.currentMovieStatus.seek);
         setAndNoPublishSeek(room.currentMovieStatus.seek);
@@ -131,6 +130,17 @@ export const sync = (cbk: callback): resould => {
         console.log("rate同步成功:", art.playbackRate);
         room.currentMovieStatus.playing ? setAndNoPublishPlay() : setAndNoPublishPause();
         cbk["ws-send"]("PLAYER：视频已就绪");
+
+        intervals.push(
+          setInterval(() => {
+            cbk["set-player-status"](
+              JSON.stringify({
+                Type: WsMessageType.CheckSeek,
+                Seek: art.currentTime
+              })
+            );
+          }, 5000)
+        );
       });
 
       art.on("play", publishPlayDebounce);
@@ -146,6 +156,9 @@ export const sync = (cbk: callback): resould => {
 
       art.on("destroy", () => {
         player = undefined;
+        intervals.forEach((interval) => {
+          clearInterval(interval);
+        });
         art.off("play", publishPlayDebounce);
         art.off("pause", publishPauseDebounce);
         art.off("seek", publishSeek);

diff --git a/src/types/Room.ts b/src/types/Room.ts
@@ -8,7 +8,7 @@ export interface RoomList {
   createAt: number;
 }
 
-export interface RoomInfo { }
+export interface RoomInfo {}
 
 export interface WsMessage {
   type: number;
@@ -30,12 +30,16 @@ export interface WsMessage {
 }
 
 export enum WsMessageType {
-  MESSAGE = 2,
-  PLAY = 3,
-  PAUSE = 4,
-  RATE = 8,
-  SEEK = 9,
-  CURRENT_MOVIE = 10,
-  PLAY_LIST_UPDATE = 11,
-  PEOPLE_NUM = 12
+  Error = 1,
+  ChatMessage,
+  Play,
+  Pause,
+  CheckSeek,
+  TooFast,
+  TooSlow,
+  ChangeRate,
+  ChangeSeek,
+  ChangeCurrent,
+  ChangeMovieList,
+  ChangePeopleNum
 }
diff --git a/src/views/Cinema.vue b/src/views/Cinema.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed, onBeforeUnmount, onMounted, ref, watch } from "vue";
 import type { WatchStopHandle, Ref } from "vue";
-import { useWebSocket, useWindowSize, watchOnce } from "@vueuse/core";
+import { useWebSocket, useWindowSize, useDebounceFn } from "@vueuse/core";
 import Player from "@/components/Player.vue";
 import ArtPlayer from "artplayer";
 import { roomStore } from "@/stores/room";
@@ -509,8 +509,18 @@ watchers.push(
       devLog(jsonData);
       devLog(`-----Ws Message End-----`);
       switch (jsonData.type) {
+        case WsMessageType.Error: {
+          console.error(jsonData.message);
+          ElNotification({
+            title: "错误",
+            message: jsonData.message,
+            type: "error"
+          });
+          break;
+        }
+
         // 聊天消息
-        case WsMessageType.MESSAGE: {
+        case WsMessageType.ChatMessage: {
           msgList.value.push(`${jsonData.sender}：${jsonData.message}`);
           // jsonData.message.split("：")[0] !== "PLAYER" &&
           room.danmuku = {
@@ -533,36 +543,62 @@ watchers.push(
         }
 
         // 播放
-        case WsMessageType.PLAY: {
+        case WsMessageType.Play: {
           syncPlugin.setAndNoPublishSeek(jsonData.seek);
           syncPlugin.setAndNoPublishRate(jsonData.rate);
           syncPlugin.setAndNoPublishPlay();
           break;
         }
 
         // 暂停
-        case WsMessageType.PAUSE: {
+        case WsMessageType.Pause: {
           syncPlugin.setAndNoPublishPause();
           syncPlugin.setAndNoPublishSeek(jsonData.seek);
           syncPlugin.setAndNoPublishRate(jsonData.rate);
           break;
         }
 
         // 视频进度发生变化
-        case WsMessageType.SEEK: {
+        case WsMessageType.ChangeSeek: {
+          syncPlugin.setAndNoPublishSeek(jsonData.seek);
+          syncPlugin.setAndNoPublishRate(jsonData.rate);
+          break;
+        }
+
+        case WsMessageType.TooFast: {
+          ElNotification({
+            title: "播放速度过快",
+            type: "warning"
+          });
+          // TODO: 询问是否重新同步
           syncPlugin.setAndNoPublishSeek(jsonData.seek);
           syncPlugin.setAndNoPublishRate(jsonData.rate);
           break;
         }
 
-        case WsMessageType.RATE: {
+        case WsMessageType.TooSlow: {
+          ElNotification({
+            title: "播放速度落后",
+            type: "warning"
+          });
+          // TODO: 询问是否重新同步
+          syncPlugin.setAndNoPublishSeek(jsonData.seek);
+          syncPlugin.setAndNoPublishRate(jsonData.rate);
+          break;
+        }
+
+        case WsMessageType.CheckSeek: {
+          break;
+        }
+
+        case WsMessageType.ChangeRate: {
           syncPlugin.setAndNoPublishSeek(jsonData.seek);
           syncPlugin.setAndNoPublishRate(jsonData.rate);
           break;
         }
 
         // 设置正在播放的影片
-        case WsMessageType.CURRENT_MOVIE: {
+        case WsMessageType.ChangeCurrent: {
           room.currentMovie = jsonData.current.movie;
           room.currentMovieStatus = jsonData.current.status;
           syncPlugin.setAndNoPublishSeek(jsonData.current.status.seek);
@@ -571,13 +607,13 @@ watchers.push(
         }
 
         // 播放列表更新
-        case WsMessageType.PLAY_LIST_UPDATE: {
+        case WsMessageType.ChangeMovieList: {
           getMovies();
           break;
         }
 
         // ん？
-        case WsMessageType.PEOPLE_NUM: {
+        case WsMessageType.ChangePeopleNum: {
           room.peopleNum < jsonData.peopleNum
             ? msgList.value.push(
                 `<p><b>SYSTEM：</b>欢迎新成员加入，当前共有 ${jsonData.peopleNum} 人在观看</p>`