feat: quality

synctv-org · Aug 31, 2024 · 8dce492 · 8dce492
1 parent 163e676
commit 8dce492
Show file tree

Hide file tree

Showing 5 changed files with 135 additions and 50 deletions.
diff --git a/src/components/Player.vue b/src/components/Player.vue
@@ -1,41 +1,10 @@
 <script setup lang="ts">
 import Artplayer from "artplayer";
-import artplayerPluginDashQuality from "artplayer-plugin-dash-quality";
-import artplayerPluginHlsQuality from "artplayer-plugin-hls-quality";
 import type { HlsConfig, FragmentLoaderConstructor, FragmentLoaderContext } from "hls.js";
 import type { Option } from "artplayer/types/option";
 import { onMounted, onBeforeUnmount, ref, watch } from "vue";
 import type { PropType, WatchStopHandle } from "vue";
-
-function newDashQualityPlugin(): (art: Artplayer) => {
-  name: "artplayerPluginDashQuality";
-} {
-  return artplayerPluginDashQuality({
-    control: true,
-    setting: true,
-    getResolution: (level) => (level.height ? level.height + "P" : "自动"),
-    title: "画质",
-    auto: "自动"
-  });
-}
-
-function newHlsQualityPlugin(): (art: Artplayer) => {
-  name: "artplayerPluginHlsQuality";
-} {
-  return artplayerPluginHlsQuality({
-    control: true,
-    setting: true,
-    getResolution: (level) => {
-      // console.log(level);
-      if (level.name) {
-        return level.name;
-      }
-      return level.height ? level.height + "P" : "自动";
-    },
-    title: "画质",
-    auto: "自动"
-  });
-}
+import { destroyOldCustomPlayLib } from "@/utils";
 
 const watchers: WatchStopHandle[] = [];
 
@@ -75,15 +44,12 @@ const playMpd = async (player: HTMLMediaElement, url: string, art: any) => {
     return;
   }
 
-  if (art.dash) art.dash.destroy();
-
-  if (!art.plugins.artplayerPluginDashQuality) art.plugins.add(newDashQualityPlugin());
+  destroyOldCustomPlayLib(art);
 
   const d = dashjs.MediaPlayer().create();
   d.initialize(player, url, false);
   art.dash = d;
   art.mpd = d;
-  art.on("destroy", d.destroy);
 };
 
 const playFlv = async (player: HTMLMediaElement, url: string, art: Artplayer) => {
@@ -94,7 +60,7 @@ const playFlv = async (player: HTMLMediaElement, url: string, art: Artplayer) =>
     return;
   }
 
-  if (art.flv) art.flv.destroy();
+  destroyOldCustomPlayLib(art);
 
   const Config: Record<string, any> = {};
 
@@ -104,7 +70,6 @@ const playFlv = async (player: HTMLMediaElement, url: string, art: Artplayer) =>
   flv.attachMediaElement(player);
   flv.load();
   art.flv = flv;
-  art.on("destroy", () => flv.destroy());
 };
 
 const playMse = async (player: HTMLMediaElement, url: string, art: Artplayer) => {
@@ -115,7 +80,7 @@ const playMse = async (player: HTMLMediaElement, url: string, art: Artplayer) =>
     return;
   }
 
-  if (art.flv) art.flv.destroy();
+  destroyOldCustomPlayLib(art);
 
   const Config: Record<string, any> = {};
 
@@ -126,7 +91,6 @@ const playMse = async (player: HTMLMediaElement, url: string, art: Artplayer) =>
   mes.attachMediaElement(player);
   mes.load();
   art.flv = mes;
-  art.on("destroy", () => mes.destroy());
 };
 
 const playMpegts = async (player: HTMLMediaElement, url: string, art: Artplayer) => {
@@ -137,7 +101,7 @@ const playMpegts = async (player: HTMLMediaElement, url: string, art: Artplayer)
     return;
   }
 
-  if (art.flv) art.flv.destroy();
+  destroyOldCustomPlayLib(art);
 
   const Config: Record<string, any> = {};
 
@@ -147,8 +111,7 @@ const playMpegts = async (player: HTMLMediaElement, url: string, art: Artplayer)
 
   ts.attachMediaElement(player);
   ts.load();
-  art.flv = ts;
-  art.on("destroy", () => ts.destroy());
+  art.ts = ts;
 };
 
 const playM2ts = async (player: HTMLMediaElement, url: string, art: Artplayer) => {
@@ -159,7 +122,7 @@ const playM2ts = async (player: HTMLMediaElement, url: string, art: Artplayer) =
     return;
   }
 
-  if (art.flv) art.flv.destroy();
+  destroyOldCustomPlayLib(art);
 
   const Config: Record<string, any> = {};
 
@@ -170,7 +133,6 @@ const playM2ts = async (player: HTMLMediaElement, url: string, art: Artplayer) =
   m2ts.attachMediaElement(player);
   m2ts.load();
   art.flv = m2ts;
-  art.on("destroy", () => m2ts.destroy());
 };
 
 const playM3u8 = async (player: HTMLMediaElement, url: string, art: Artplayer) => {
@@ -185,9 +147,7 @@ const playM3u8 = async (player: HTMLMediaElement, url: string, art: Artplayer) =
     return;
   }
 
-  if (art.hls) art.hls.destroy();
-
-  if (!art.plugins.artplayerPluginHlsQuality) art.plugins.add(newHlsQualityPlugin());
+  destroyOldCustomPlayLib(art);
 
   class fLoader extends (Hls.DefaultConfig.loader as FragmentLoaderConstructor) {
     constructor(config: HlsConfig) {
@@ -239,7 +199,6 @@ const playM3u8 = async (player: HTMLMediaElement, url: string, art: Artplayer) =
   hls.loadSource(url);
   hls.attachMedia(player);
   art.hls = hls;
-  art.on("destroy", () => hls.destroy());
 };
 
 const newPlayerOption = (html: HTMLDivElement): Option => {
@@ -310,6 +269,9 @@ const mountPlayer = () => {
   }
   father.value!.appendChild(newDiv);
   art = new Artplayer(newPlayerOption(newDiv));
+  art.on("destroy", () => {
+    destroyOldCustomPlayLib(art);
+  });
   Emits("get-instance", art);
   addKeyEvnet(art);
 };

diff --git a/src/plugins/quality.ts b/src/plugins/quality.ts
@@ -0,0 +1,107 @@
+const image = `<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg t="1666857514489" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2580" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24"><path d="M870.4 176 153.6 176C104.128 176 64 216.128 64 265.6l0 492.736c0 49.472 40.128 89.6 89.6 89.6L870.4 847.936c49.472 0 89.6-40.128 89.6-89.6L960 265.6C960 216.128 919.872 176 870.4 176zM870.4 668.8 825.6 668.8c0 0-29.696-65.792-89.6-89.6s-134.4 89.6-134.4 89.6S535.04 596.992 467.2 444.8C399.36 292.608 153.6 624 153.6 624l0-358.4L870.4 265.6 870.4 668.8zM668.8 489.6c37.056 0 67.2-30.144 67.2-67.264 0-37.056-30.144-67.2-67.2-67.2C631.68 355.2 601.6 385.344 601.6 422.4 601.6 459.52 631.68 489.6 668.8 489.6z" p-id="2581" fill="#ffffff"></path>
+</svg>`;
+
+export default function artplayerPluginQuality() {
+  return (art: any) => {
+    function update() {
+      const hls = art.hls;
+      const dash = art.dash;
+      const auto = "自动";
+      const title = "画质";
+
+      let levels;
+      let defaultLevel: any;
+      let defaultHtml;
+      let currentLevel;
+      let getResolution: any;
+      let selector: any;
+      let onSelect: any;
+      if (dash) {
+        levels = dash.getBitrateInfoListFor("video");
+        currentLevel = dash.getQualityFor("video");
+        defaultLevel = levels[currentLevel];
+        getResolution = (level: any) => (level.height ? level.height + "P" : "自动");
+        const settings = dash.getSettings();
+        defaultHtml = settings?.streaming?.abr?.autoSwitchBitrate?.video
+          ? auto
+          : getResolution(defaultLevel);
+        const cfg = {
+          streaming: {
+            abr: {
+              autoSwitchBitrate: {
+                video: false
+              }
+            }
+          }
+        };
+        selector = levels.map((item: any, index: any) => {
+          return {
+            html: getResolution(item),
+            level: index,
+            default: defaultLevel === item
+          };
+        });
+        onSelect = (item: any) => {
+          dash.updateSettings(cfg);
+          dash.setQualityFor("video", item.level, true);
+          return item.html;
+        };
+      } else if (hls) {
+        levels = hls.levels;
+        currentLevel = hls.currentLevel;
+        defaultLevel = levels[currentLevel];
+        getResolution = (level: any) => {
+          if (level.name) {
+            return level.name;
+          }
+          return level.height ? level.height + "P" : "自动";
+        };
+        defaultHtml = defaultLevel ? getResolution(defaultLevel) : auto;
+        selector = levels.map((item: any, index: any) => {
+          return {
+            html: getResolution(item),
+            level: item.level || index,
+            default: defaultLevel === item
+          };
+        });
+        onSelect = (item: any) => {
+          hls.currentLevel = item.level;
+          art.loading.show = true;
+          return item.html;
+        };
+      } else {
+        if (art.controls["quality"]) art.controls.remove("quality");
+        if (art.setting.find("quality")) art.setting.remove("quality");
+        return;
+      }
+
+      art.controls.update({
+        name: "quality",
+        position: "right",
+        html: defaultHtml,
+        style: { padding: "0 10px" },
+        selector,
+        onSelect
+      });
+
+      art.setting.update({
+        name: "quality",
+        tooltip: defaultHtml,
+        html: title,
+        icon: image,
+        width: 200,
+        selector,
+        onSelect
+      });
+    }
+
+    art.on("ready", update);
+    art.on("restart", update);
+
+    return {
+      name: "artplayerPluginQuality"
+    };
+  };
+}
diff --git a/src/plugins/source.ts b/src/plugins/source.ts
@@ -1,4 +1,5 @@
 import type Artplayer from "artplayer";
+import { destroyOldCustomPlayLib } from "@/utils";
 
 interface artplayPluginSource {
   html: string;
@@ -18,6 +19,9 @@ export function artplayPluginSource(option: artplayPluginSource[]) {
           art.plugins["syncPlugin"].setAndNoPublishStatus(status);
           art.emit("restart", item.url);
         });
+        if (art.controls["quality"]) art.controls.remove("quality");
+        if (art.setting.find("quality")) art.setting.remove("quality");
+        destroyOldCustomPlayLib(art);
         art.option.type = item.type;
         art.url = item.url;
         return "源";

diff --git a/src/utils/index.ts b/src/utils/index.ts
@@ -76,3 +76,12 @@ export const formatTime = (date: Date) => {
   const seconds = `0${date.getSeconds()}`.slice(-2);
   return `${hours}:${minutes}:${seconds}`;
 };
+
+export const destroyOldCustomPlayLib = (art: any) => {
+  for (const key of ["dash", "m3u8", "hls", "ts", "mpd", "torrent"]) {
+    if (art[key]) {
+      art[key].destroy();
+      art[key] = undefined;
+    }
+  }
+};
diff --git a/src/views/Cinema.vue b/src/views/Cinema.vue
@@ -28,6 +28,7 @@ import type { Subtitles } from "@/types/Movie";
 import { RoomMemberPermission } from "@/types/Room";
 import artplayerPluginAss from "@/plugins/artplayer-plugin-ass";
 import { newSyncPlugin } from "@/plugins/sync";
+import artplayerPluginQuality from "@/plugins/quality";
 import { artplayPluginSource } from "@/plugins/source";
 
 const Player = defineAsyncComponent(() => import("@/components/Player.vue"));
@@ -156,7 +157,9 @@ const playerOption = computed<options>(() => {
         }
       }),
       // WARN: room.currentStatus 变了会导致重载
-      newSyncPlugin(sendElement, room.currentStatus, () => room.currentExpireId)
+      newSyncPlugin(sendElement, room.currentStatus, () => room.currentExpireId),
+      // 画质
+      artplayerPluginQuality()
     ]
   };