Fix: auto destory watcher

synctv-org · Oct 8, 2023 · 7b6a7e7 · 7b6a7e7
1 parent 9ae99e2
commit 7b6a7e7
Show file tree

Hide file tree

Showing 2 changed files with 130 additions and 148 deletions.
diff --git a/src/components/Player.vue b/src/components/Player.vue
@@ -3,12 +3,18 @@ import { roomStore } from "@/stores/room";
 import Artplayer from "artplayer";
 import type { Option } from "artplayer/types/option";
 import { onMounted, onBeforeUnmount, ref, watch, computed } from "vue";
-import type { PropType } from "vue";
+import type { PropType, WatchStopHandle } from "vue";
 import artplayerPluginDanmuku from "artplayer-plugin-danmuku";
 import mpegts from "mpegts.js";
 import Hls from "hls.js";
 const room = roomStore();
 
+const watchers: WatchStopHandle[] = [];
+
+onBeforeUnmount(() => {
+  watchers.forEach((watcher) => watcher());
+});
+
 const artplayer = ref<HTMLDivElement>();
 
 let art: Artplayer;
@@ -29,42 +35,14 @@ const Props = defineProps({
 
 const Emits = defineEmits(["get-instance"]);
 
-// 监听当前正在播放影片变化
-// watch(
-//   () => room.currentMovie,
-//   () => {
-//     const jsonData = room.currentMovie;
-
-//     setTimeout(() => {
-//       if (jsonData.url === "") {
-//         art.switchUrl("https://live.lazy.ink/hd.mp4");
-//        devLog("视频为空！");
-//       } else {
-//         devLog("变了！", jsonData.url);
-
-//         art.option.type = "";
-
-//         if (jsonData.live) {
-//           art.option.type = "flv";
-
-//           jsonData.url = `${window.location.origin}/api/live/${jsonData.url}.flv`;
-//         }
-
-//         art.switchUrl(jsonData.url).catch((err) => {
-//           ElMessage.error("视频加载失败！");
-//           console.error("视频加载失败：", err);
-//         });
-//       }
-//     }, 233);
-//   }
-// );
-
 // 监听弹幕变化
-watch(
-  () => room.danmuku,
-  () => {
-    art.plugins.artplayerPluginDanmuku.emit(room.danmuku);
-  }
+watchers.push(
+  watch(
+    () => room.danmuku,
+    () => {
+      art.plugins.artplayerPluginDanmuku.emit(room.danmuku);
+    }
+  )
 );
 
 const playFlv = (player: HTMLMediaElement, url: string, art: any) => {
@@ -237,26 +215,28 @@ onMounted(() => {
     );
   };
 
-  watch(
-    () => Props.options,
-    (old, current) => {
-      if (needDestroy(old, current)) {
-        console.log("destroy");
-        art.destroy();
-        const newDiv = document.createElement("div");
-        newDiv.setAttribute("class", "artplayer-app");
-        newDiv.setAttribute("ref", "artplayer");
-        while (father.value!.firstChild) {
-          father.value!.removeChild(father.value!.firstChild);
+  watchers.push(
+    watch(
+      () => Props.options,
+      (old, current) => {
+        if (needDestroy(old, current)) {
+          console.log("destroy");
+          art.destroy();
+          const newDiv = document.createElement("div");
+          newDiv.setAttribute("class", "artplayer-app");
+          newDiv.setAttribute("ref", "artplayer");
+          while (father.value!.firstChild) {
+            father.value!.removeChild(father.value!.firstChild);
+          }
+          father.value!.appendChild(newDiv);
+          artplayer.value = newDiv;
+          art = new Artplayer(playerOption.value);
+          Emits("get-instance", art);
+        } else {
+          //
         }
-        father.value!.appendChild(newDiv);
-        artplayer.value = newDiv;
-        art = new Artplayer(playerOption.value);
-        Emits("get-instance", art);
-      } else {
-        //
       }
-    }
+    )
   );
 });
 

diff --git a/src/views/Cinema.vue b/src/views/Cinema.vue
@@ -502,102 +502,104 @@ const setStatus = (seek: number, rate: number) => {
 };
 
 // 监听ws信息变化
-watch(
-  () => data.value,
-  () => {
-    if (data.value === "") return devLog("返回了空", data.value);
-
-    const jsonData: WsMessage = JSON.parse(data.value);
-    devLog(`-----Ws Message Start-----`);
-    devLog(jsonData);
-    devLog(`-----Ws Message End-----`);
-    switch (jsonData.type) {
-      // 聊天消息
-      case WsMessageType.MESSAGE: {
-        msgList.value.push(`${jsonData.sender}：${jsonData.message}`);
-        // jsonData.message.split("：")[0] !== "PLAYER" &&
-        room.danmuku = {
-          text: jsonData.message, // 弹幕文本
-          //time: Date.now(), // 发送时间，单位秒
-          color: "#fff", // 弹幕局部颜色
-          border: false // 是否显示描边
-          //mode: 0, // 弹幕模式: 0表示滚动, 1静止
-        };
-
-        // 自动滚动到最底部
-        if (chatArea.value) chatArea.value.scrollTop = chatArea.value.scrollHeight;
-
-        if (msgList.value.length > 40)
-          return (msgList.value = [
-            "<p><b>SYSTEM：</b>已达到最大聊天记录长度，系统已自动清空...</p>"
-          ]);
-
-        break;
-      }
-
-      // 播放
-      case WsMessageType.PLAY: {
-        setAllStatus({
-          playing: true,
-          seek: jsonData.seek,
-          rate: jsonData.rate
-        });
-        break;
-      }
-
-      // 暂停
-      case WsMessageType.PAUSE: {
-        setAllStatus({
-          playing: false,
-          seek: jsonData.seek,
-          rate: jsonData.rate
-        });
-        break;
-      }
-
-      // 视频进度发生变化
-      case WsMessageType.SEEK: {
-        setStatus(jsonData.seek, jsonData.rate);
-        break;
-      }
-
-      case WsMessageType.RATE: {
-        setStatus(jsonData.seek, jsonData.rate);
-        break;
-      }
-
-      // 设置正在播放的影片
-      case WsMessageType.CURRENT_MOVIE: {
-        room.currentMovie = jsonData.current.movie;
-        setAllStatus(jsonData.current.status);
-        break;
-      }
-
-      // 播放列表更新
-      case WsMessageType.PLAY_LIST_UPDATE: {
-        getMovies();
-        // jsonData.movies
-        //   ? (movieList.value = room.movies = jsonData.movies)
-        //   : movieList.value.splice(0, 1);
-        break;
-      }
-
-      // ん？
-      case WsMessageType.PEOPLE_NUM: {
-        room.peopleNum < jsonData.peopleNum
-          ? msgList.value.push(
-              `<p><b>SYSTEM：</b>欢迎新成员加入，当前共有 ${jsonData.peopleNum} 人在观看</p>`
-            )
-          : room.peopleNum > jsonData.peopleNum
-          ? msgList.value.push(
-              `<p><b>SYSTEM：</b>有人离开了房间，当前还剩 ${jsonData.peopleNum} 人在观看</p>`
-            )
-          : "";
-        room.peopleNum = jsonData.peopleNum;
-        break;
+watchers.push(
+  watch(
+    () => data.value,
+    () => {
+      if (data.value === "") return devLog("返回了空", data.value);
+
+      const jsonData: WsMessage = JSON.parse(data.value);
+      devLog(`-----Ws Message Start-----`);
+      devLog(jsonData);
+      devLog(`-----Ws Message End-----`);
+      switch (jsonData.type) {
+        // 聊天消息
+        case WsMessageType.MESSAGE: {
+          msgList.value.push(`${jsonData.sender}：${jsonData.message}`);
+          // jsonData.message.split("：")[0] !== "PLAYER" &&
+          room.danmuku = {
+            text: jsonData.message, // 弹幕文本
+            //time: Date.now(), // 发送时间，单位秒
+            color: "#fff", // 弹幕局部颜色
+            border: false // 是否显示描边
+            //mode: 0, // 弹幕模式: 0表示滚动, 1静止
+          };
+
+          // 自动滚动到最底部
+          if (chatArea.value) chatArea.value.scrollTop = chatArea.value.scrollHeight;
+
+          if (msgList.value.length > 40)
+            return (msgList.value = [
+              "<p><b>SYSTEM：</b>已达到最大聊天记录长度，系统已自动清空...</p>"
+            ]);
+
+          break;
+        }
+
+        // 播放
+        case WsMessageType.PLAY: {
+          setAllStatus({
+            playing: true,
+            seek: jsonData.seek,
+            rate: jsonData.rate
+          });
+          break;
+        }
+
+        // 暂停
+        case WsMessageType.PAUSE: {
+          setAllStatus({
+            playing: false,
+            seek: jsonData.seek,
+            rate: jsonData.rate
+          });
+          break;
+        }
+
+        // 视频进度发生变化
+        case WsMessageType.SEEK: {
+          setStatus(jsonData.seek, jsonData.rate);
+          break;
+        }
+
+        case WsMessageType.RATE: {
+          setStatus(jsonData.seek, jsonData.rate);
+          break;
+        }
+
+        // 设置正在播放的影片
+        case WsMessageType.CURRENT_MOVIE: {
+          room.currentMovie = jsonData.current.movie;
+          setAllStatus(jsonData.current.status);
+          break;
+        }
+
+        // 播放列表更新
+        case WsMessageType.PLAY_LIST_UPDATE: {
+          getMovies();
+          // jsonData.movies
+          //   ? (movieList.value = room.movies = jsonData.movies)
+          //   : movieList.value.splice(0, 1);
+          break;
+        }
+
+        // ん？
+        case WsMessageType.PEOPLE_NUM: {
+          room.peopleNum < jsonData.peopleNum
+            ? msgList.value.push(
+                `<p><b>SYSTEM：</b>欢迎新成员加入，当前共有 ${jsonData.peopleNum} 人在观看</p>`
+              )
+            : room.peopleNum > jsonData.peopleNum
+            ? msgList.value.push(
+                `<p><b>SYSTEM：</b>有人离开了房间，当前还剩 ${jsonData.peopleNum} 人在观看</p>`
+              )
+            : "";
+          room.peopleNum = jsonData.peopleNum;
+          break;
+        }
       }
     }
-  }
+  )
 );
 
 // 发送消息（临时