Refector: player plugin and sync plugin

synctv-org · Dec 19, 2023 · a58b014 · a58b014
1 parent dbd16d2
commit a58b014
Show file tree

Hide file tree

Showing 4 changed files with 227 additions and 195 deletions.
diff --git a/src/components/Player.vue b/src/components/Player.vue
@@ -1,9 +1,8 @@
 <script setup lang="ts">
 import Artplayer from "artplayer";
 import type { Option } from "artplayer/types/option";
-import { onMounted, onBeforeUnmount, ref, watch, computed } from "vue";
+import { onMounted, onBeforeUnmount, ref, watch } from "vue";
 import type { PropType, WatchStopHandle } from "vue";
-import { newSubtitle } from "@/plugins/subtitle";
 
 const watchers: WatchStopHandle[] = [];
 
@@ -16,17 +15,16 @@ onBeforeUnmount(() => {
 
 Artplayer.DBCLICK_FULLSCREEN = false;
 Artplayer.SEEK_STEP = 5;
-Artplayer.PLAYBACK_RATE = [0.5, 0.75, 1, 1.25, 1.5, 1.75, 2, 3, 4, 5];
+Artplayer.PLAYBACK_RATE = [0.5, 0.75, 1, 1.25, 1.5, 1.75, 2, 3, 4, 5].reverse();
 
 let art: Artplayer;
 
 export interface options {
   url: string;
   isLive: boolean;
   type?: string;
-  headers: { [key: string]: string };
+  headers: Record<string, string>;
   plugins: ((art: Artplayer) => unknown)[];
-  subtitles?: { [key: string]: { type: string; url: string } };
 }
 
 const Props = defineProps({
@@ -45,7 +43,7 @@ const playMpd = (player: HTMLMediaElement, url: string, art: any) => {
       const d = dash.newDash();
       d.initialize(player, url, false);
       art.dash = d;
-      art.on("destroy", () => d.destroy());
+      art.on("destroy", d.destroy);
     } else {
       art.notice.show = "Unsupported playback format: mpd";
     }
@@ -181,6 +179,10 @@ const newPlayerOption = (html: HTMLDivElement): Option => {
     airplay: false, // 隔空播放
     type: Props.options.type,
     plugins: Props.options.plugins,
+    subtitle: {
+      encoding: "utf-8",
+      escape: true
+    },
     customType: {
       flv: playFlv,
       m3u8: playM3u8,
@@ -189,24 +191,20 @@ const newPlayerOption = (html: HTMLDivElement): Option => {
       ts: playMpegts,
       m2ts: playM2ts,
       m2t: playM2ts,
-      mts: playM2ts
+      mts: playM2ts,
+      mpegts: playMpegts
     }
   };
-  if (Props.options.subtitles) {
-    opts.subtitle = {
-      type: Props.options.subtitles[Object.keys(Props.options.subtitles)[0]].type,
-      encoding: "utf-8",
-      escape: true
-    };
-    opts.plugins!.push(newSubtitle(Props.options.subtitles));
-  }
   return opts;
 };
 
 const father = ref<HTMLDivElement>();
 
 const mountPlayer = () => {
-  if (art) art.destroy();
+  if (art) {
+    console.log("player destroy");
+    art.destroy();
+  }
   const newDiv = document.createElement("div");
   newDiv.setAttribute("class", "artplayer-app");
   while (father.value!.firstChild) {
@@ -228,9 +226,9 @@ const addKeyEvnet = (art: Artplayer) => {
       art.seek = art.currentTime + Artplayer.SEEK_STEP;
     }
   };
-  art.once("ready", () => {
+  art.on("ready", () => {
     window.addEventListener("keydown", event);
-    art.once("destroy", () => {
+    art.on("destroy", () => {
       window.removeEventListener("keydown", event);
     });
     art.on("blur", () => {
@@ -249,7 +247,6 @@ onMounted(() => {
     watch(
       () => Props.options,
       () => {
-        console.log("destroy");
         mountPlayer();
       }
     )

diff --git a/src/plugins/subtitle.ts b/src/plugins/subtitle.ts
@@ -25,9 +25,10 @@ const newSubtitleControl = (
     url: "",
     type: ""
   };
+  const subtitleHTML = newSubtitleHtml("字幕");
   return {
     name: "subtitle",
-    html: newSubtitleHtml("字幕"),
+    html: subtitleHTML,
     position: "right",
     selector: Object.keys(subtitles).map((key) => {
       return {
@@ -44,7 +45,7 @@ const newSubtitleControl = (
         this.subtitle.switch(selector.url, { type: selector.type });
         this.subtitle.show = true;
       }
-      return newSubtitleHtml("字幕").outerHTML;
+      return subtitleHTML.outerHTML;
     }
   };
 };
@@ -60,14 +61,12 @@ export const newSubtitle = (
 ): ((art: Artplayer) => unknown) => {
   return (art: Artplayer) => {
     if (!subtitles) return;
-    art.once("ready", () => {
-      if (art.controls["subtitle"]) {
-        art.controls.remove("subtitle");
-      }
-      art.controls.add(newSubtitleControl(subtitles));
-      return {
-        name: "subtitles"
-      };
-    });
+    if (art.controls.subtitle) {
+      art.controls.remove("subtitle");
+    }
+    art.controls.add(newSubtitleControl(subtitles));
+    return {
+      name: "subtitles"
+    };
   };
 };