@volcengine/veplayer 1.15.1 → 1.15.2-rc.1

package/src/plugins/inner/mobile/PlaybackRatePlugin.ts

@@ -0,0 +1,199 @@
+import { Events, Plugin, Util } from 'xgplayer';
+import RateIconSVG from '../../../assets/icons/mobile/playbackrate.svg';
+import isObject from 'lodash-es/isObject';
+import { RATE_CHANGE } from 'xgplayer/es/events';
+import PlayerData from '@/core/playerData';
+
+const { POSITIONS } = Plugin;
+
+export default class PlaybackRateMobilePlugin extends Plugin {
+  static get pluginName() {
+    return 'PlaybackRateMobilePlugin';
+  }
+
+  static get textTips() {
+    return {
+      jp: '倍速',
+      en: 'PlaybackRate',
+      zh: '倍速',
+      'zh-hk': '倍速',
+    };
+  }
+
+  static get defaultConfig() {
+    return {
+      position: POSITIONS.CONTROLS_RIGHT,
+      index: 2.9,
+      list: [2, 1.5, 1.25, 1, 0.75, 0.5],
+      default: 1,
+    };
+  }
+
+  public playerData: PlayerData;
+  public state: any = {
+    currentRate: 1,
+    isSupport: true,
+  };
+
+  constructor(args: any) {
+    super(args);
+    this.playerData = args.player.config.playerData;
+  }
+
+  registerIcons() {
+    return {
+      playbackRate: {
+        icon: RateIconSVG,
+        class: 'xgplayer-rate-svg',
+      },
+    };
+  }
+
+  registerLanguageTexts() {
+    return {
+      rate: {
+        jp: '倍速',
+        en: 'PlaybackRate',
+        zh: '倍速',
+        'zh-hk': '倍速',
+      },
+      rateSelect: {
+        jp: '倍速選ぶ',
+        en: 'PlaybackRate',
+        zh: '倍速选择',
+        'zh-hk': '倍速選擇',
+      },
+    };
+  }
+
+  afterCreate() {
+    this.appendChild('.xgplayer-icon', (this.icons as any).playbackRate);
+    this.initEvents();
+    // 默认值取player的playbackRate
+    this.state.currentRate = this.player.playbackRate || 1;
+    this.changeIconText();
+  }
+
+  afterPlayerInit() {
+    // 播放器调用start初始化播放源之后的逻辑
+  }
+
+  initEvents() {
+    this.bind(['click'], this.renderList.bind(this));
+    this.on(Events.RATE_CHANGE, () => {
+      // 监听playbackRate的set设置，更新state.currentRate
+      if (this.state.currentRate === this.player.playbackRate) {
+        return;
+      }
+      this.state.currentRate = this.player.playbackRate;
+      // 如果展示了列表panel，则更新panel
+      if ((this.player as any)?.panel?.isShow) {
+        this.updatePanel();
+      }
+      this.changeIconText();
+    });
+  }
+
+  renderList() {
+    const children = this.renderItemList();
+    this.renderPanel(children);
+  }
+
+  renderItemList() {
+    const $content = Util.createDom(
+      'div',
+      '',
+      {},
+      'playbackRate-panel-content',
+    );
+
+    this.config.list.forEach((item: any) => {
+      const $item = this.renderItem(item);
+      $content.appendChild($item);
+    });
+
+    return $content;
+  }
+
+  renderItem(item: { textKey: string; value: number } | number) {
+    const itemObj: { textKey: string; value: number } = isObject(item)
+      ? item
+      : { textKey: item + 'X', value: item };
+    const $item = Util.createDom(
+      'div',
+      '',
+      {},
+      `panel-Item ${
+        this.state.currentRate === itemObj.value ? 'select-in' : ''
+      }`,
+    );
+
+    $item.innerHTML = this.i18n[itemObj.textKey] || itemObj.textKey;
+
+    $item.addEventListener('click', e => {
+      e.stopPropagation();
+      e.preventDefault();
+      const props = {
+        playbackRate: {
+          from: this.player.playbackRate,
+          to: itemObj.value,
+        },
+      };
+      this.emitUserAction(e, 'change_rate', { props });
+      this.state.currentRate = itemObj.value;
+      this.player.playbackRate = itemObj.value;
+      this.updatePanel();
+      this.changeIconText();
+    });
+
+    return $item;
+  }
+
+  renderPanel(children: any) {
+    (this.player as any)?.panel?.showPanel(
+      children,
+      (this.langText as any).rateSelect,
+      true,
+    );
+  }
+
+  updatePanel() {
+    const children = this.renderItemList();
+    (this.player as any)?.panel.updatePanel(children);
+  }
+
+  changeIconText() {
+    let scaleNum;
+    const rate: number = this.state.currentRate;
+    const rateText = rate % 1 === 0 ? rate.toFixed(1) : rate + '';
+    switch (rateText.length) {
+      case 1:
+      case 2:
+      case 3:
+        scaleNum = 0.7;
+        break;
+      case 4:
+        scaleNum = 0.5;
+        break;
+      default:
+        scaleNum = 0.7;
+    }
+    const iconTextDom = this.find('.icon-text');
+    iconTextDom.style.transform = `scale(${scaleNum})`;
+    iconTextDom.innerHTML = rateText;
+  }
+
+  destroy() {
+    this.unbind(['click'], this.renderList.bind(this));
+  }
+
+  render() {
+    return `
+    <xg-icon class="xgplayer-mobile-playBackRate">
+      <div class="xgplayer-icon">
+        <div class="icon-text"></div>
+      </div>
+    </xg-icon>
+    `;
+  }
+}

package/src/plugins/inner/pc/definitionPlugin.ts

@@ -0,0 +1,203 @@
+import { Plugin, Util } from 'xgplayer';
+import OptionsIcon from 'xgplayer/es/plugins/common/optionsIcon';
+import type { Stream, IPluginConfig } from '@/interface';
+
+import { CONTROL_ICON_INDEX } from '@/constants/plugin';
+import throttle from 'lodash-es/throttle';
+import { MixinDefinitionBase } from '@/plugins/inner/common/definitionBasePlugin';
+
+export interface ISdkDefinitionPluginConfig extends IPluginConfig {
+  list?: Stream[];
+  defaultDefinition?: string;
+  hidePortrait?: boolean;
+  showToastOnManualClick?: true;
+  className?: string;
+  isShowIcon?: boolean;
+  isNeedAuto?: boolean;
+  allowedSize?: null;
+  alwaysShowDefinition?: boolean; // 是否一直显示list，即list长度为1时也显示
+}
+export default class DefinitionPlugin extends MixinDefinitionBase(OptionsIcon) {
+  public renderList: any[];
+  public config: ISdkDefinitionPluginConfig;
+  // 插件的名称，将作为插件实例的唯一key值
+  static get pluginName() {
+    return 'sdkDefinitionPlugin';
+  }
+
+  static get defaultConfig(): ISdkDefinitionPluginConfig {
+    return {
+      // 挂载在controls的右侧，如果不指定则默认挂载在播放器根节点上
+      position: Plugin.POSITIONS.CONTROLS_RIGHT,
+      index: CONTROL_ICON_INDEX.sdkDefinitionPlugin,
+      list: [],
+      defaultDefinition: '',
+      hidePortrait: false,
+      disable: false,
+      showToastOnManualClick: true,
+      className: 'xgplayer-definition xgplayer-definition-plugin-pc',
+      isShowIcon: true,
+      isNeedAuto: true,
+      allowedSize: null,
+      alwaysShowDefinition: false, // 是否一直显示list，即list长度为1时也显示
+    };
+  }
+
+  constructor(args: any) {
+    const _className = args.config.className;
+    super({
+      ...args,
+      config: {
+        ...args.config,
+        // 若用户主动设置className，追加xgplayer-definition-plugin-pc
+        ...(_className
+          ? {
+              className: `${_className} xgplayer-definition-plugin-pc`,
+            }
+          : {}),
+      },
+      clientType: 'PC',
+    });
+    this.onItemClick = throttle(this.onItemClick.bind(this), 1000, {
+      trailing: true,
+    });
+  }
+
+  registerLanguageTexts() {
+    return {
+      switching: {
+        jp: 'に切り替える',
+        en: 'Switching to',
+        zh: '正在切换至',
+        'zh-hk': '正在切換至',
+      },
+    };
+  }
+
+  afterCreate() {
+    super.afterCreate();
+  }
+
+  // 清晰度列表渲染
+  refreshDefinitionList() {
+    if (this.player.config?.alwaysShowDefinition) {
+      this.config.alwaysShowDefinition = true;
+    }
+    const { defaultDefinition, list } = this.getCurrentDefinitionInfo(
+      this.player,
+    );
+    this.config.defaultDefinition = defaultDefinition;
+    this.config.list = list.map((item, index) => ({
+      ...item,
+      itemIndex: index,
+    }));
+    if (this.config.list && this.config.list.length > 0) {
+      if (this.config.list.length < 2) {
+        if (this.config.alwaysShowDefinition) {
+          this.renderItemList();
+          this.show();
+        } else {
+          this.hide();
+        }
+      } else {
+        this.renderItemList();
+        this.show();
+      }
+    }
+  }
+  show() {
+    if (
+      !this.config.list ||
+      (this.config.list?.length < 2 && !this.config.alwaysShowDefinition)
+    ) {
+      return;
+    }
+
+    Util.addClass(this.root, 'show');
+  }
+
+  afterPlayerInit() {
+    // 播放器调用start初始化播放源之后的逻辑
+  }
+
+  renderItemList(curDefinition?: string) {
+    if (Array.isArray(curDefinition)) {
+      return;
+    }
+    const { list, defaultDefinition } = this.config;
+    let curIndex = 0;
+    const items = list.map((item: any, index: any) => {
+      const showItem = {
+        url: item.url,
+        definition: item.definition || '',
+        definitionTextKey: item.definitionTextKey,
+        showText: this.getShowText(this.i18n, item, item.definition),
+        isCurrent: false,
+        selected: false,
+        isDefinitionAuto: false,
+      };
+
+      const definitionMatch =
+        typeof curDefinition === 'string'
+          ? item.definition === curDefinition
+          : typeof curDefinition === 'undefined'
+          ? item.definition === defaultDefinition
+          : false;
+      if (!Util.isUndefined(item.definition) && definitionMatch) {
+        showItem.isCurrent = true;
+        showItem.selected = true;
+        curIndex = index;
+      }
+
+      // 自动挡展示当前实际清晰度
+      if (this.showRealDefinition(showItem)) {
+        const _def = this.renderList?.find(item =>
+          this.playerData.isDefinitionMatch(
+            item?.definition,
+            this._autoRealDefinition,
+          ),
+        );
+        const text = this.getShowText(this.i18n, _def, _def?.definition);
+        showItem.showText = text
+          ? `${showItem.showText}(${text})`
+          : showItem.showText;
+      }
+
+      showItem.isDefinitionAuto = this.playerData.isAutoDefinition(
+        item.definition,
+      );
+
+      return showItem;
+    });
+    // 记录最新的renderList
+    this.renderList = items;
+    super.renderItemList(items, curIndex);
+  }
+
+  onItemClick(e: any, data: any) {
+    if (data.to.definition !== this.playerData.current.definition) {
+      const from = this.playerData.getCurrentStreams()?.[0];
+      this.emitUserAction(e, 'change_definition', { from, to: data.to });
+      this.selectDef(data.to);
+    }
+  }
+
+  selectDef(to: { url: string; definition: string; [propName: string]: any }) {
+    this.selectDefinition(to);
+    // 平板点击后自动关闭列表
+    'ontouchstart' in window && this.optionsList.hide();
+  }
+
+  changeDefinition(definition: string) {
+    const to = this.renderList.find(item =>
+      this.playerData.isDefinitionMatch(item.definition, definition),
+    );
+    if (to) {
+      this.selectDef(to);
+    }
+  }
+
+  destroy() {
+    super.destroy();
+  }
+}

package/src/plugins/inner/pc/multilinePlugin.ts

@@ -0,0 +1,93 @@
+import { Plugin, Util } from 'xgplayer';
+import OptionsIcon from 'xgplayer/es/plugins/common/optionsIcon';
+import { PluginEvents, SDKEvents } from '../../../constants/event';
+import { CONTROL_ICON_INDEX } from '@/constants/plugin';
+import PlayerData from '@/core/playerData';
+
+export default class MultilinePlugin extends OptionsIcon {
+  // 播放器值
+  public playerData: PlayerData;
+
+  // 插件的名称，将作为插件实例的唯一key值
+  static get pluginName() {
+    return 'sdkMultilinePlugin';
+  }
+
+  static get defaultConfig() {
+    return {
+      // 挂载在controls的右侧，如果不指定则默认挂载在播放器根节点上
+      position: Plugin.POSITIONS.CONTROLS_RIGHT,
+      index: CONTROL_ICON_INDEX.sdkMultilinePlugin,
+      list: [],
+      defaultLine: 0,
+      className: 'xgplayer-multiline',
+      hidePortrait: false,
+      isShowIcon: true,
+    };
+  }
+
+  beforeCreate(args: any) {
+    const playerData = args.player.config.playerData;
+    const list = playerData.getLineList();
+    const {
+      current: { lineId },
+    } = playerData;
+    if (Array.isArray(list) && list.length > 0) {
+      args.config.list = list.map(item => {
+        item.text = args.player.i18n[item.lineTextKey] || item.lineTextKey;
+        return item;
+      });
+    }
+    args.config.defaultLine = lineId;
+  }
+
+  constructor(args: any) {
+    super(args);
+    this.playerData = this.playerConfig.playerData;
+  }
+
+  afterCreate() {
+    super.afterCreate();
+    if (this.config.list.length < 2) {
+      this.hide();
+    } else {
+      this.renderItemList();
+    }
+  }
+
+  afterPlayerInit() {
+    // 播放器调用start初始化播放源之后的逻辑
+  }
+
+  renderItemList() {
+    const { list, defaultLine } = this.config;
+    let curIndex = 0;
+    const items = list.map((item: any, index: any) => {
+      const showItem = {
+        lineId: item.lineId || '',
+        showText: this.i18n[item.lineTextKey] || item.lineTextKey,
+        isCurrent: false,
+        selected: false,
+      };
+      if (
+        !Util.isUndefined(item.lineId) &&
+        item.lineId?.toString() === defaultLine?.toString()
+      ) {
+        showItem.isCurrent = true;
+        showItem.selected = true;
+        curIndex = index;
+      }
+      return showItem;
+    });
+    super.renderItemList(items, curIndex);
+  }
+
+  onItemClick(e: any, data: any) {
+    this.player.emit(PluginEvents.LINE_CHANGE, {
+      from: this.playerData.current.lineId,
+      to: data.to.lineId,
+    });
+    this.playerData.current.lineId = data.to.lineId;
+    this.player.emit(SDKEvents.PLAYER_REBUILD);
+  }
+}

package/src/sdkPlugin/abr.ts

@@ -0,0 +1,67 @@
+import SdkPlugin from '@/sdkPlugin/sdkPlugin';
+
+class Abr extends SdkPlugin {
+  static get pluginName() {
+    return 'Abr';
+  }
+
+  constructor(args) {
+    super(args);
+  }
+
+  static get defaultConfig() {
+    return {
+      autoDefiText: '', //自动切换清晰度对应显示文案
+      isOpenAutoDefi: false, //是否开启功能,默认为false
+      interval: 1000, //调用算法频率
+      hurryThreshold: 0.25,
+      lowThreshold: 0.4,
+      highThreshold: 0.7,
+      noStallCheckTime: 5, //多久后算消费视频，单位秒
+      isOpenHint: false, //是否开启消费视频阶段降码率提示文案，默认false
+      method: 31,
+    };
+  }
+
+  async beforePlayerCreate() {
+    return await this.prepareAbrModule();
+  }
+
+  private async prepareAbrModule() {
+    return this.sdk.playerData?.adapter?.prepareAbrModule(
+      this.playerData,
+      this.sdk.sdkUmdLoader,
+    );
+  }
+
+  adaptAbrOptions() {
+    const autoBitrateOpts = this.playerData.configs?.autoBitrateOpts;
+    // 只要用户有设置autoBitrateOpts参数即返回ABR完整参数
+    if (autoBitrateOpts) {
+      const defaultDefinition = this.playerData.defaultDefinition;
+
+      // 西瓜ABR消费配置
+      return {
+        ...Abr.defaultConfig,
+        ...autoBitrateOpts,
+        autoDefiText: autoBitrateOpts.autoDefinitionText || '',
+        isOpenAutoDefi: this.playerData.isOpenABR(),
+        isPlayAutoDefi: this.playerData.isPlayAutoDefinition(defaultDefinition),
+      };
+    }
+  }
+
+  applyAbrConfig(finalOptions) {
+    const autoBitrateOpts = this.adaptAbrOptions();
+    if (!autoBitrateOpts) {
+      return;
+    }
+    // 追加ABR配置
+    this.sdk.playerData?.adapter?.applyAbrPluginConfig(
+      finalOptions,
+      autoBitrateOpts,
+    );
+  }
+}
+
+export default Abr;

package/src/sdkPlugin/adaptRange.ts

@@ -0,0 +1,49 @@
+import SdkPlugin from '@/sdkPlugin/sdkPlugin';
+import { LicenseFeature } from '@/license';
+
+class AdaptRange extends SdkPlugin {
+  static get pluginName() {
+    return 'AdaptRange';
+  }
+
+  constructor(args) {
+    super(args);
+  }
+
+  adaptRangeOptions() {
+    const _range = this.playerData.configs?.adaptRange ?? undefined;
+    // adaptRange配置开启，且当前StreamType&环境支持adaptRange
+    if (
+      !_range?.enable ||
+      !this.playerData.adapter?.canAdaptRangeEnable?.() ||
+      !this.playerData.configs?.licensSupportModuleList.includes[
+        LicenseFeature.ADAPT_RANGE
+      ]
+    ) {
+      return;
+    }
+
+    const _opts = this.playerData.adapter.adaptRangeDefaultOptions();
+
+    return {
+      ...(_opts ?? {}),
+      ..._range,
+      minTargetCacheDur: _range.minCacheDuration ?? _opts?.minTargetCacheDur,
+      maxTargetCacheDur: _range.maxCacheDuration ?? _opts?.maxTargetCacheDur,
+      rangeMinDuration: _range.minRangeDuration ?? _opts?.rangeMinDuration,
+      rangeMaxDuration: _range.maxRangeDuration ?? _opts?.rangeMaxDuration,
+    };
+  }
+
+  applyRangeConfig(finalOptions) {
+    const adaptRangeOptions = this.adaptRangeOptions();
+    if (adaptRangeOptions && finalOptions) {
+      this.playerData.adapter.applyAdaptRangePluginConfig(
+        finalOptions,
+        adaptRangeOptions,
+      );
+    }
+  }
+}
+
+export default AdaptRange;