@volcengine/veplayer 1.15.1 → 1.15.2-rc.1

package/src/plugins/inner/common/definitionBasePlugin.ts

@@ -0,0 +1,353 @@
+import { Events, Sniffer } from 'xgplayer';
+import MyProxy from '@/utils/proxy';
+import { IntervalTimer } from '@/utils';
+import { PluginEvents } from '@/constants/event';
+import PlayerData from '@/core/playerData';
+
+const AUTO_DEF_DETECT_INTERNAL = 1000;
+
+const MixinDefinitionBase = Base =>
+  class extends Base {
+    _autoRealDefinition; // 自动挡实际播放档位
+    _playTimer = null;
+    playerData: PlayerData;
+    toastInfo: any;
+    playListSubscribeId: number;
+    definitionSubscribeId: number;
+    clientType: 'PC' | 'MOBILE';
+    constructor(args) {
+      super(args);
+      this.clientType = args.clientType;
+      this.playerData = args.player.config.playerData;
+      this.toastInfo = {};
+      this.dataMonitoring();
+    }
+
+    afterCreate() {
+      super.afterCreate();
+      this._autoRealDefinition = undefined;
+      this.refreshDefinitionList?.();
+      if (
+        this.playerData.isOpenABR() ||
+        this.playerData.getStreamType()?.toLowerCase() === 'dash'
+      ) {
+        // abr或者dash播放依赖resourceReady事件更新playList
+        this.on('resourceReady', this.handleResourceReady);
+      }
+      if (this.playerData.isOpenABR()) {
+        this.on('ABR_AUTO_DESC_CHANGE', this.handleABRDescChange);
+        if (
+          this.playerData?.adapter?.useNativeAbr?.() ||
+          this.player.plugins.dashplugin ||
+          this.player.plugins.mp4encryptplayer
+        ) {
+          // native abr 通过轮询的方式获取abr自动挡的真实清晰度
+          // mp4 或者 dash 的abr,ABR_AUTO_DESC_CHANGE 事件可能会因为所处的清晰度没有变化过，会不触发。
+          this.autoDefDetectTimer = new IntervalTimer();
+          this.autoDefDetectTimer.repeat(
+            this.getAutoDefRealLevel,
+            AUTO_DEF_DETECT_INTERNAL,
+          );
+        }
+      }
+      this.on(PluginEvents.PLAY_NEXT_START, () => {
+        // 切换播放视频时暂停current、playList变更监听
+        if (this.definitionSubscribeId) {
+          MyProxy.unsubscribeProperty(
+            this.playerData.current,
+            'definition',
+            this.definitionSubscribeId,
+          );
+        }
+        if (this.playListSubscribeId) {
+          MyProxy.unsubscribeProperty(
+            this.playerData,
+            'playList',
+            this.playListSubscribeId,
+          );
+        }
+      });
+      this.on(PluginEvents.PLAY_NEXT_END, () => {
+        // 播放视频切换完成重新监听current、playList变更
+        this.dataMonitoring?.();
+        // refresh清晰度列表
+        this.refreshDefinitionList?.();
+      });
+    }
+
+    // 各清晰度展示文案
+    getShowText(i18n = {}, definitionItem, definition: string) {
+      if (!definitionItem) {
+        return;
+      }
+      // 开启ABR&自动挡展示配置文案
+      if (
+        this.playerData.isOpenABR() &&
+        this.playerData.isAutoDefinition(definitionItem.definition)
+      ) {
+        return (
+          this.playerData.configs?.autoBitrateOpts?.autoDefinitionText ||
+          i18n[definitionItem.definitionTextKey] ||
+          definitionItem.definition
+        );
+      }
+
+      return (
+        i18n[definitionItem.definitionTextKey] ||
+        definitionItem.definition ||
+        definitionItem.definitionTextKey ||
+        definition ||
+        'HD'
+      );
+    }
+
+    getCurrentDefinitionInfo(player) {
+      const config = {
+        list: [],
+        defaultDefinition: '',
+      };
+      const playerData = player.config.playerData;
+      const {
+        current: { lineId, definition },
+      } = playerData;
+      const list = playerData.getDefinitionListByLineId(lineId);
+      if (Array.isArray(list) && list.length > 0) {
+        config.list = list.map(item => {
+          if (!item.text) {
+            item.text = this.getShowText(player.i18n, item, item.definition);
+          }
+          return item;
+        });
+      }
+
+      config.defaultDefinition = definition;
+      return config;
+    }
+
+    // 清晰度切换toast提示
+    showToast(definitionItem, definition) {
+      const toast = this.player?.getPlugin('sdkToastPlugin');
+
+      if (!toast) return;
+      const txt = this.getShowText(this.i18n, definitionItem, definition);
+
+      // toast clear
+      if (this.toastInfo) {
+        clearTimeout(this.toastInfo.timer);
+        toast?.remove?.(this.toastInfo.id);
+        this.player.off(Events.AFTER_DEFINITION_CHANGE, this.toastInfo.remove);
+        this.player.off(Events.ERROR, this.toastInfo.remove);
+      }
+
+      this.toastInfo = {
+        id: toast.add(`${(this.langText as any).switching} ${txt}...`, 0, true),
+        showTime: Date.now(),
+        delayClose: false,
+      };
+      this.toastInfo.timer = setTimeout(() => {
+        toast.remove(this.toastInfo.id);
+        clearTimeout(this.toastInfo.timer);
+      }, 2000);
+
+      this.toastInfo.remove = () => {
+        if (!this.toastInfo.id) return;
+        const now = Date.now();
+        if (now - this.toastInfo.showTime > 2000) {
+          toast.remove(this.toastInfo.id);
+        } else {
+          this.toastInfo.delayClose = true;
+        }
+      };
+      this.player.once(Events.AFTER_DEFINITION_CHANGE, this.toastInfo.remove);
+      this.player.once(Events.ERROR, this.toastInfo.remove);
+    }
+
+    selectDefinition(to: {
+      url: string;
+      definition: string;
+      [propName: string]: any;
+    }) {
+      const definitionTextKey = this.renderList?.find?.(item =>
+        this.playerData.isDefinitionMatch(item.definition, to.definition),
+      )?.definitionTextKey;
+      if (this.config.showToastOnManualClick) {
+        this.showToast(
+          {
+            ...to,
+            definitionTextKey,
+          },
+          to.definition,
+        );
+      }
+      this.playerData.current.definition = to.definition;
+      if (!this.playerData.isAutoDefinition(to.definition)) {
+        this._autoRealDefinition = undefined;
+      }
+    }
+
+    showRealDefinition(item) {
+      return (
+        item.selected &&
+        this.playerData.isAutoDefinition(item.definition) &&
+        this.playerData.showRealDefinition() &&
+        this._autoRealDefinition &&
+        !this.playerData.isAutoDefinition(this._autoRealDefinition)
+      );
+    }
+    // 更新自动挡实际档位文案，如自动 (360p);
+    handleABRDescChange = (...args) => {
+      this._autoRealDefinition = args[1] || undefined;
+      this.refreshDefinitionList();
+    };
+
+    handleResourceReady = (list = []) => {
+      const { list: originPlayList } = this.getCurrentDefinitionInfo(
+        this.player,
+      );
+      const newPlayList = originPlayList.filter(item => {
+        const targetDef =
+          item &&
+          list.find(sub =>
+            this.playerData.isDefinitionMatch(sub.definition, item.definition),
+          );
+        // dash 播放时会改写url为指定的序号，不然changeDefinition时传的url无法切换
+        if (
+          targetDef &&
+          this.playerData.getStreamType()?.toLowerCase() === 'dash'
+        ) {
+          item.url = targetDef.url;
+        }
+        return targetDef;
+      });
+
+      const curDefinition =
+        list.find(item => item?.selected) || this.playerData.current;
+      const targetDefinition = newPlayList.find(item =>
+        this.playerData.isDefinitionMatch(
+          item.definition,
+          curDefinition?.definition,
+        ),
+      );
+
+      // 重置playList
+      this.playerData.playList = newPlayList;
+
+      // 清晰度变化重置清晰度
+      if (
+        targetDefinition?.definition &&
+        this.playerData.current?.definition !== targetDefinition.definition
+      ) {
+        this.playerData.current.definition = targetDefinition?.definition;
+      }
+
+      this.refreshDefinitionList?.();
+    };
+
+    // PC、Mobile current、playList改动监听抽取为公共模块
+    dataMonitoring() {
+      if (!this.playerData) return;
+      // 清晰度变更，切换url
+      this.definitionSubscribeId = MyProxy.subscribeProperty(
+        this.playerData.current,
+        'definition',
+        (pre: any, cur: any) => {
+          if (pre && cur && pre !== cur && this.player) {
+            const { list } = this.getCurrentDefinitionInfo(this.player);
+            const targetDef = list.find((item: any) => item.definition === cur);
+            if (targetDef && targetDef.url) {
+              this.player.changeDefinition({
+                kid: targetDef.playAuthId,
+                ...targetDef,
+                secretKey: targetDef.secretKey,
+                definition: cur,
+                url: targetDef.url,
+              });
+
+              if (this.clientType === 'MOBILE') {
+                this.updatePanel();
+              }
+
+              this.player.emit(PluginEvents.INNER_DEFINITION_CHANGE, {
+                from: pre,
+                to: cur,
+                url: targetDef.url,
+              });
+
+              this.player.emit(PluginEvents.PlAY_URL_CHANGE, {
+                url: targetDef.url,
+                from: PluginEvents.INNER_DEFINITION_CHANGE,
+              });
+
+              if (this.clientType === 'PC') {
+                this.renderItemList(cur);
+              }
+
+              if (this.player.config.isLive) {
+                this._playTimer = setTimeout(() => {
+                  if (this.player.ended) {
+                    this.player.replay();
+                  } else if (this.player.paused) {
+                    this.player.play();
+                  }
+                }, 1000);
+              }
+            }
+          }
+        },
+      );
+
+      // 监听playList更新，注意只能监听到直接赋值
+      this.playListSubscribeId = MyProxy.subscribeProperty(
+        this.playerData,
+        'playList',
+        () => {
+          this.refreshDefinitionList();
+        },
+      );
+    }
+
+    getAutoDefRealLevel = () => {
+      if (
+        this.playerData.isAutoDefinition(this.playerData.current?.definition)
+      ) {
+        const { videoWidth, videoHeight } = this.player.media;
+        if (videoWidth && videoHeight) {
+          const { list = [] } = this.getCurrentDefinitionInfo(this.player);
+          const targetDef = list.find(def => {
+            const width = def.vwidth || def.width;
+            const height = def.vheight || def.height;
+            return (
+              width && height && width === videoWidth && height === videoHeight
+            );
+          });
+          if (targetDef?.definition) {
+            if (this._autoRealDefinition !== targetDef.definition) {
+              this._autoRealDefinition = targetDef.definition;
+              this.refreshDefinitionList();
+              if (Sniffer.device === 'mobile') {
+                // mobile 需要更新下panel
+                this?.updatePanel();
+              }
+            }
+          }
+        }
+      }
+    };
+
+    onItemClick(...args) {
+      super.onItemClick(...args);
+    }
+    destroy() {
+      clearTimeout(this.toastInfo.timer);
+      clearTimeout(this._playTimer);
+      if (this.autoDefDetectTimer) {
+        this.autoDefDetectTimer.clear();
+        this.autoDefDetectTimer = null;
+        this.getAutoDefRealLevel = null;
+      }
+      this.off('resourceReady', this.handleResourceReady);
+      this.off('ABR_AUTO_DESC_CHANGE', this.handleABRDescChange);
+    }
+  };
+
+export { MixinDefinitionBase };