Fix: Refactor sync

synctv-org · Oct 7, 2023 · 4fa7859 · 4fa7859
1 parent a151250
commit 4fa7859
Show file tree

Hide file tree

Showing 3 changed files with 284 additions and 323 deletions.
diff --git a/src/components/Player.vue b/src/components/Player.vue
@@ -2,7 +2,7 @@
 import { roomStore } from "@/stores/room";
 import Artplayer from "artplayer";
 import type { Option } from "artplayer/types/option";
-import { onMounted, onBeforeUnmount, ref, watch } from "vue";
+import { onMounted, onBeforeUnmount, ref, watch, computed } from "vue";
 import type { PropType } from "vue";
 import artplayerPluginDanmuku from "artplayer-plugin-danmuku";
 import mpegts from "mpegts.js";
@@ -15,13 +15,15 @@ let art: Artplayer;
 
 interface options {
   url: string;
+  isLive: boolean;
+  type: string;
 }
 
 const Props = defineProps({
   options: {
     type: Object as PropType<options>,
     required: true
-  }
+  },
 });
 
 const Emits = defineEmits(["get-instance"]);
@@ -69,7 +71,7 @@ const playFlv = (player: HTMLMediaElement, url: string, art: any) => {
     let flv: mpegts.Player
     if (url.startsWith(window.location.origin) && localStorage.token) {
       flv = mpegts.createPlayer(
-        { type: "flv", url },
+        { type: "flv", url, isLive: art.option.isLive },
         {
           headers: {
             Authorization: localStorage.token
@@ -78,7 +80,7 @@ const playFlv = (player: HTMLMediaElement, url: string, art: any) => {
       );
     } else {
       flv = mpegts.createPlayer(
-        { type: "flv", url }
+        { type: "flv", url, isLive: art.option.isLive }
       );
     }
 
@@ -157,11 +159,11 @@ const playM3u8 = (player: HTMLMediaElement, url: string, art: any) => {
   }
 };
 
-onMounted(() => {
-  const option: Option = {
+const playerOption = computed<Option>(() => {
+  return {
+    muted: true,
     container: artplayer.value!,
     volume: 0, // 音量
-    autoplay: false, // 自动播放
     autoSize: false, // 隐藏黑边
     autoMini: false,
     theme: "#00a1d6",
@@ -201,20 +203,57 @@ onMounted(() => {
       m2t: playM2ts,
       mts: playM2ts,
     }
-  };
+  }
+})
 
-  art = new Artplayer(option);
+console.log(Props.options)
+
+const father = ref<HTMLDivElement>();
+
+onMounted(() => {
+  art = new Artplayer(playerOption.value);
 
   Emits("get-instance", art);
+  const needDestroy = (art: Artplayer, newOption: Option) => {
+    return art && (art.option.isLive !== newOption.isLive) || (art.option.type !== newOption.type)
+  }
+
+  watch(
+    () => Props.options,
+    () => {
+      if (needDestroy(art, playerOption.value)) {
+        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);
+      }
+    }
+  );
 });
 
 onBeforeUnmount(() => {
-  // art.destroy();
+  if (art.option.isLive) {
+    console.log("live play destroy")
+  } else {
+    console.log("player destroy")
+  }
+  art.destroy();
 });
 </script>
 
 <template>
-  <div class="artplayer-app" ref="artplayer"></div>
+  <div ref="father">
+    <div class="artplayer-app" ref="artplayer"></div>
+  </div>
 </template>
 
 <style></style>
+
diff --git a/src/plugins/sync.ts b/src/plugins/sync.ts
@@ -1,9 +1,10 @@
 import { ref, watch } from "vue";
+import type { WatchStopHandle } from "vue";
 import { roomStore } from "@/stores/room";
-import { devLog } from "@/utils/utils";
+import { devLog, getFileExtension } from "@/utils/utils";
 import { useDebounceFn } from "@vueuse/core";
 import { WsMessageType } from "@/types/Room";
-import { ElNotification } from "element-plus";
+import type { BaseMovieInfo, MovieInfo, EditMovieInfo, MovieStatus } from "@/types/Movie";
 const room = roomStore();
 
 interface callback {
@@ -18,149 +19,144 @@ const debounceTime = 250;
 
 export const sync = (cbk: callback) => {
   return (art: Artplayer) => {
-    const publishSeek = useDebounceFn((currentTime: number) => {
-      if (!room.currentMovie.live)
+    if (!art.option.isLive) {
+      const publishSeek = useDebounceFn((currentTime: number) => {
         cbk["set-player-status"](
           JSON.stringify({
             Type: WsMessageType.SEEK,
             Seek: currentTime,
             Rate: art.playbackRate
           })
         );
-      devLog("视频空降，:", art.currentTime);
-    }, debounceTime);
-
-    const setAndNoPublishSeek = (seek: number) => {
-      art.off("seek", publishSeek);
-      art.seek = seek;
-      art.once("seek", () => {
-        art.on("seek", publishSeek);
-      });
-    };
+        devLog("视频空降，:", art.currentTime);
+      }, debounceTime);
+
+      const setAndNoPublishSeek = (seek: number) => {
+        art.currentTime = seek;
+      };
+
+      const publishPlayOrPause = useDebounceFn(() => {
+        // devLog("视频播放,seek:", art.currentTime);
+        if (art.playing) {
+          cbk["set-player-status"](
+            JSON.stringify({
+              Type: WsMessageType.PLAY,
+              Seek: art.currentTime,
+              Rate: art.playbackRate
+            })
+          );
+        } else {
+          cbk["set-player-status"](
+            JSON.stringify({
+              Type: WsMessageType.PAUSE,
+              Seek: art.currentTime,
+              Rate: art.playbackRate
+            })
+          );
+        }
+      }, debounceTime);
+
+      const setAndNoPublishPlayOrPause = (playing: boolean) => {
+        devLog("视频播放(no publish),seek:", art.currentTime);
+        if (playing) {
+          art.off("play", publishPlayOrPause);
+          art.once("play", () => {
+            art.on("play", publishPlayOrPause);
+          });
+          art.play();
+        } else {
+          art.off("pause", publishPlayOrPause);
+          art.once("pause", () => {
+            art.on("pause", publishPlayOrPause);
+          });
+          art.pause();
+        }
+      };
 
-    const publishPlayOrPause = useDebounceFn(() => {
-      // devLog("视频播放,seek:", art.currentTime);
-      if (room.currentMovie.live) return;
-      if (art.playing) {
-        cbk["set-player-status"](
-          JSON.stringify({
-            Type: WsMessageType.PLAY,
-            Seek: art.currentTime,
-            Rate: art.playbackRate
-          })
-        );
-      } else {
+      const publishRate = () => {
         cbk["set-player-status"](
           JSON.stringify({
-            Type: WsMessageType.PAUSE,
+            Type: WsMessageType.RATE,
             Seek: art.currentTime,
             Rate: art.playbackRate
           })
         );
-      }
-    }, debounceTime);
+        devLog("视频倍速,seek:", art.currentTime);
+      };
 
-    const setAndNoPublishPlayOrPause = (playing: boolean) => {
-      devLog("视频播放(no publish),seek:", art.currentTime);
-      if (playing) {
-        art.off("play", publishPlayOrPause);
-        art.play();
-        art.once("play", () => {
-          art.on("play", publishPlayOrPause);
-        });
-      } else {
-        art.off("pause", publishPlayOrPause);
-        art.pause();
-        art.once("pause", () => {
-          art.on("pause", publishPlayOrPause);
+      const setAndNoPublishRate = (rate: number) => {
+        art.off("video:ratechange", publishRate);
+        art.once("video:ratechange", () => {
+          art.on("video:ratechange", publishRate);
         });
-      }
-    };
+        art.playbackRate = rate;
+      };
+      art.once("ready", () => {
+        setAndNoPublishSeek(room.currentMovieStatus.seek);
+        console.log("seek同步成功:", art.currentTime);
 
-    const publishRate = () => {
-      if (!room.currentMovie.live)
-        cbk["set-player-status"](
-          JSON.stringify({
-            Type: WsMessageType.RATE,
-            Seek: art.currentTime,
-            Rate: art.playbackRate
-          })
-        );
-      devLog("视频倍速,seek:", art.currentTime);
-    };
+        setAndNoPublishPlayOrPause(room.currentMovieStatus.playing);
+        cbk["ws-send"]("PLAYER：视频已就绪");
 
-    const setAndNoPublishRate = (rate: number) => {
-      art.off("video:ratechange", publishRate);
-      art.playbackRate = rate;
-      art.once("video:ratechange", () => {
-        art.on("video:ratechange", publishRate);
-      });
-    };
-
-    watch(
-      () => room.currentMovieStatus.playing,
-      () => {
-        if (!art.option.isLive) {
-          if (room.currentMovieStatus.playing === art.playing) return;
-          setAndNoPublishPlayOrPause(room.currentMovieStatus.playing);
-        }
-      }
-    );
-
-    watch(
-      () => room.currentMovieStatus.seek,
-      () => {
-        devLog("seek变了：", room.currentMovieStatus.seek);
-        if (!room.currentMovie.live) setAndNoPublishSeek(room.currentMovieStatus.seek);
-      }
-    );
-
-    watch(
-      () => room.currentMovieStatus.rate,
-      () => {
-        devLog("rate变了：", room.currentMovieStatus.rate);
-
-        if (!room.currentMovie.live) {
-          room.currentMovieStatus.rate === art.playbackRate
-            ? void 0
-            : setAndNoPublishRate(room.currentMovieStatus.rate);
-        }
-      }
-    );
-
-    devLog("art.seek:", art.currentTime);
-    devLog("room.seek:", room.currentMovieStatus.seek);
-
-    art.once("ready", () => {
-      // 必须设置静音，否则无法自动播放
-      art.muted = true;
-      ElNotification({
-        title: "温馨提示",
-        message: "由于浏览器限制，播放器已静音，请手动开启声音",
-        type: "info"
-      });
+        art.on("play", publishPlayOrPause);
 
-      if (!room.currentMovie.live) {
-        setAndNoPublishSeek(room.currentMovieStatus.seek);
-        console.log("seek同步成功:", art.currentTime);
-      }
+        // 视频暂停
+        art.on("pause", publishPlayOrPause);
+
+        // 空降
 
-      // room.currentMovieStatus.playing
-      //   ? setAndNoPublishPlayOrPause(true)
-      //   : setAndNoPublishPlayOrPause(false);
-      cbk["ws-send"]("PLAYER：视频已就绪");
+        art.on("seek", publishSeek);
 
-      art.on("play", publishPlayOrPause);
+        // 倍速
+        art.on("video:ratechange", publishRate);
 
-      // 视频暂停
-      art.on("pause", publishPlayOrPause);
+        const watchers: WatchStopHandle[] = [];
 
-      // 空降
+        watchers.push(
+          watch(
+            () => room.currentMovieStatus.playing,
+            () => {
+              if (room.currentMovieStatus.playing === art.playing) return;
+              setAndNoPublishPlayOrPause(room.currentMovieStatus.playing);
+            }
+          )
+        );
+
+        watchers.push(
+          watch(
+            () => room.currentMovieStatus.seek,
+            () => {
+              devLog("seek变了：", room.currentMovieStatus.seek);
+              setAndNoPublishSeek(room.currentMovieStatus.seek);
+            }
+          )
+        );
 
-      art.on("seek", publishSeek);
+        watchers.push(
+          watch(
+            () => room.currentMovieStatus.rate,
+            () => {
+              devLog("rate变了：", room.currentMovieStatus.rate);
+              room.currentMovieStatus.rate === art.playbackRate
+                ? void 0
+                : setAndNoPublishRate(room.currentMovieStatus.rate);
+            }
+          )
+        );
 
-      // 倍速
-      art.on("video:ratechange", publishRate);
-    });
+        art.on("destroy", () => {
+          art.off("play", publishPlayOrPause);
+          art.off("pause", publishPlayOrPause);
+          art.off("seek", publishSeek);
+          art.off("video:ratechange", publishRate);
+          watchers.forEach((watcher) => watcher());
+        });
+      });
+    } else {
+      art.once("ready", () => {
+        art.play();
+        cbk["ws-send"]("PLAYER：视频已就绪");
+      });
+    }
   };
 };