@volcengine/veplayer 1.15.1 → 1.15.2-rc.1

package/src/plugins/common/extendPluginFactory.ts

@@ -0,0 +1,132 @@
+import { Events, Plugin, Sniffer } from 'xgplayer';
+import Default from '../../assets/icons/pc/danmu.svg';
+import debounce from 'lodash-es/debounce';
+import { PluginEvents } from '../../constants/event';
+import { EventPlugin } from '../../interface';
+
+const { POSITIONS } = Plugin;
+
+const extendPlugin = (options: EventPlugin): any => {
+  const isMobile = Sniffer.device === 'mobile';
+
+  const {
+    pluginName = `ExtendPlugin${Math.random().toString().slice(-5)}`,
+    type = isMobile ? 'inner' : 'normal',
+    position = POSITIONS.CONTROLS_LEFT,
+    icon = Default,
+    index = 1,
+    hideAtFullScreen = true,
+    tips = {
+      jp: 'custom',
+      en: 'custom',
+      zh: '自定义',
+      'zh-hk': '自定义',
+    },
+  } = options;
+
+  return class ExtendPlugin extends Plugin {
+    static get isExtendPlugin() {
+      return true;
+    }
+
+    static get type() {
+      return type;
+    }
+
+    static get textTips() {
+      return tips;
+    }
+
+    static get pluginName() {
+      return pluginName;
+    }
+
+    static get defaultConfig() {
+      return {
+        position: position,
+        index: index,
+      };
+    }
+
+    afterCreate() {
+      this.appendChild('.xgplayer-icon', (this.icons as any)[pluginName]);
+      this.initEvents();
+      if (hideAtFullScreen && this.player?.fullscreen) {
+        this.handleFullScreenChange();
+      }
+    }
+
+    registerIcons() {
+      return {
+        [pluginName]: {
+          icon: icon,
+          class: 'xgplayer-extendicon-svg',
+        },
+      };
+    }
+
+    updateIcons(icon) {
+      const parent = this.find('.xgplayer-icon');
+      if (!parent) return;
+      parent.innerHTML = icon;
+    }
+
+    registerLanguageTexts() {
+      return {
+        [pluginName]: tips,
+      };
+    }
+
+    initEvents() {
+      this.handleCallback = debounce(this.handleCallback.bind(this), 200);
+      const event = Sniffer.device === 'mobile' ? 'touchend' : 'click';
+      this.bind(event, this.handleCallback);
+      this.show();
+
+      if (hideAtFullScreen) {
+        this.player?.on(
+          Events.FULLSCREEN_CHANGE,
+          this.handleFullScreenChange.bind(this),
+        );
+      }
+    }
+
+    handleFullScreenChange() {
+      const player: any = this.player;
+      (this.player as any)?.changePluginsIcon(pluginName, !player?.fullscreen);
+    }
+
+    handleCallback(e: any) {
+      const { player } = this;
+      if (!player) return;
+      e.preventDefault();
+      e.stopPropagation();
+
+      player.emit(PluginEvents.PLAYER_EXTEND_BUTTON, pluginName);
+    }
+
+    destroy() {
+      this.unbind(['touchend', 'click'], this.handleCallback);
+      if (hideAtFullScreen) {
+        this.player?.off(
+          Events.FULLSCREEN_CHANGE,
+          this.handleFullScreenChange.bind(this),
+        );
+      }
+    }
+
+    render() {
+      return `
+      <xg-icon class="xgplayer-extend-icon">
+        <div class="xgplayer-icon">
+        </div>
+        <div class="xg-tips" lang-key="${pluginName}">${
+        (this.langText as any)[pluginName]
+      }</div>
+      </xg-icon>
+      `;
+    }
+  };
+};
+
+export default extendPlugin;

package/src/plugins/common/mobilePlayerPanel.ts

@@ -0,0 +1,253 @@
+import { PluginEvents } from '@/constants/event';
+import { Events, Util } from 'xgplayer';
+import { cancelTips, PLAYER_MODE } from '@/constants/player';
+
+/**
+ * @hidden
+ * @brief 移动端交互面板配置
+ */
+interface IConfig {
+  mode?: number;
+  isAutoChange?: boolean;
+}
+
+/**
+ * @hidden
+ * @brief 移动端交互面板
+ */
+export default class MobilePlayerPanel {
+  public config: IConfig;
+  public parent: HTMLElement;
+  public root: any;
+  public mode: number;
+  public isAutoChange: number;
+  public player: any;
+  public children: HTMLElement | undefined;
+  public container: HTMLElement | undefined;
+  public title: HTMLElement | undefined;
+  // panel是否展示
+  public isShow: boolean;
+  public showCancelBtn: boolean;
+
+  constructor(args: any) {
+    const { config, root, player } = args;
+    this.config = config;
+    this.parent = root;
+    this.player = player;
+    let userMode = config?.mode ?? PLAYER_MODE.INNER;
+    if (!Object.values(PLAYER_MODE).includes(userMode)) {
+      userMode = PLAYER_MODE.INNER;
+    }
+    this.mode = userMode;
+    this.isAutoChange = config?.isAutoChange ?? false;
+    this.isShow = false;
+    this.showCancelBtn = config?.showCancelBtn ?? false;
+
+    this.initEvents();
+    this.renderPanel();
+  }
+
+  initEvents() {
+    if (!this.isAutoChange) return;
+    window.addEventListener(
+      'orientationchange',
+      this.handleOrientationChange.bind(this),
+    );
+    this.player?.on(
+      Events.FULLSCREEN_CHANGE,
+      this.handleOrientationChange.bind(this),
+    );
+  }
+
+  handleOrientationChange() {
+    const isHorizontal = [90, -90, '90', '-90'].includes(window.orientation);
+    if (this.player?.fullscreen && isHorizontal) {
+      this.changeMode(PLAYER_MODE.FULLSCREEN);
+    } else {
+      this.changeMode(this.config?.mode ?? PLAYER_MODE.INNER);
+    }
+  }
+
+  changeConfig(config: IConfig) {
+    this.config = config;
+  }
+
+  changeMode(mode: number) {
+    this.mode = mode;
+    this.player.emit(PluginEvents.PANEL_MODE_CHANGE, {
+      mode: mode,
+    });
+    this.destroy();
+    this.renderPanel();
+  }
+
+  renderPanel() {
+    const classNameMap = ['normal', 'inner', 'fullscreen'];
+
+    const className = `xg-mobile-panel panel-${classNameMap[this.mode]}`;
+
+    this.root = Util.createDom('div', '', {}, className);
+
+    if (this.parent) {
+      this.parent.appendChild(this.root);
+      this.hide();
+    }
+
+    this.bind('click', this.handleHide.bind(this));
+
+    switch (this.mode) {
+      case PLAYER_MODE.NORMAL: {
+        const inner = Util.createDom(
+          'div',
+          '',
+          {},
+          `xg-mobile-panel-content ${
+            this.showCancelBtn ? 'xg-mobile-panel-cancel-mode' : ''
+          }`,
+        );
+        this.root.appendChild(inner);
+        if (this.showCancelBtn) {
+          const lang = this.player.lang === 'zh-cn' ? 'zh' : this.player.lang;
+          const close = Util.createDom(
+            'div',
+            cancelTips[lang],
+            {},
+            'xg-mobile-panel-cancel',
+          );
+          this.root.appendChild(close);
+        }
+        this.container = inner;
+        inner.addEventListener('click', e => {
+          e.stopPropagation();
+          e.preventDefault();
+        });
+        break;
+      }
+      case PLAYER_MODE.INNER: {
+        this.container = this.root;
+        break;
+      }
+      case PLAYER_MODE.FULLSCREEN: {
+        const inner = Util.createDom('div', '', {}, 'xg-mobile-panel-content');
+        this.root.appendChild(inner);
+        this.container = inner;
+        inner.addEventListener('click', e => {
+          e.stopPropagation();
+          e.preventDefault();
+        });
+        break;
+      }
+    }
+  }
+
+  async showPanel(children: HTMLElement, title = '', isItemList = false) {
+    if (isItemList) {
+      Util.addClass(children, 'item-list-panel-content');
+    }
+
+    this.setTitle(title);
+
+    if (this.children) {
+      await this.hide();
+      setTimeout(() => {
+        this.children = children;
+        if (this.container) {
+          this.title && this.container.appendChild(this.title);
+          this.container.appendChild(children);
+        }
+        this.show();
+      });
+      return;
+    }
+
+    this.children = children;
+
+    if (this.container) {
+      this.title && this.container.appendChild(this.title);
+      this.container.appendChild(children);
+    }
+    this.show();
+  }
+
+  updatePanel(children: HTMLElement) {
+    if (
+      this.children &&
+      Util.hasClass(this.children, 'item-list-panel-content')
+    ) {
+      Util.addClass(children, 'item-list-panel-content');
+    }
+
+    this.children = children;
+
+    if (this.container) {
+      this.container.innerHTML = '';
+      this.title && this.container.appendChild(this.title);
+      this.container.appendChild(children);
+    }
+  }
+
+  setTitle(title) {
+    if (!title || this.mode === PLAYER_MODE.INNER) {
+      this.title = undefined;
+      return;
+    }
+
+    if (!this.title) {
+      this.title = this.renderTitle(title);
+      return;
+    }
+
+    this.title.innerHTML = title;
+  }
+
+  renderTitle(title) {
+    const $title = Util.createDom('div', title, {}, 'xg-mobile-panel-title');
+    return $title;
+  }
+
+  show() {
+    this.isShow = true;
+    Util.removeClass(this.root, 'hide');
+    Util.addClass(this.root, 'active');
+  }
+
+  hide() {
+    this.isShow = false;
+    Util.removeClass(this.root, 'active');
+    Util.addClass(this.root, 'hide');
+    if (this.container) {
+      this.container.innerHTML = '';
+    }
+  }
+
+  handleHide(e: any) {
+    e.stopPropagation();
+    e.preventDefault();
+    this.hide();
+  }
+
+  bind(event: string, eventHandle: any, isBubble = false) {
+    if (!this.root) {
+      return;
+    }
+    if (`on${event}` in this.root && typeof eventHandle === 'function') {
+      this.root.addEventListener(event, eventHandle, isBubble);
+    }
+  }
+
+  destroy() {
+    if (this.parent && this.root && this.parent.contains(this.root)) {
+      this.parent.removeChild(this.root);
+      this.root = null;
+    }
+
+    window.removeEventListener(
+      'orientationchange',
+      this.handleOrientationChange.bind(this),
+    );
+    this.player?.off(
+      Events.FULLSCREEN_CHANGE,
+      this.handleOrientationChange.bind(this),
+    );
+  }
+}

package/src/plugins/external/LiveInfoPanel.ts

@@ -0,0 +1,340 @@
+import { Plugin, Util } from 'xgplayer';
+import util from 'xgplayer/es/utils/util';
+
+type InfoItem = {
+  key: string;
+  label: string;
+  labelTextKey?: string;
+  value?: any;
+  render?: (key: any) => string;
+  type?: string;
+  dom?: Element;
+};
+/**
+ * 直播信息面板
+ */
+export default class LiveInfoPanel extends Plugin {
+  private _pollTimer;
+  private _infoItems = [];
+
+  static get pluginName() {
+    return 'LiveInfoPanel';
+  }
+
+  static get defaultConfig() {
+    return {
+      visible: true,
+      showH265Info: false,
+    };
+  }
+
+  get streamType() {
+    return this.playerConfig.playerData.getCurrentStreamType();
+  }
+
+  afterCreate() {
+    if (!['flv', 'hls'].includes(this.streamType)) {
+      this.close();
+      return;
+    }
+
+    this.player.on('error', () => this._handleError());
+    this.player.on('loadeddata', () => this._handleLoadedData());
+  }
+
+  registerLanguageTexts() {
+    return {
+      DECODEFPS: {
+        en: 'decodeFps',
+        zh: '解码效率',
+      },
+      DECODECOST: {
+        en: 'decodeCost',
+        zh: '解码消耗',
+      },
+      FORMAT: {
+        en: 'format',
+        zh: '格式',
+      },
+      FPS: {
+        en: 'fps',
+        zh: '帧率',
+      },
+      BITRATE: {
+        en: 'birate',
+        zh: '码率',
+      },
+      GOP: {
+        en: 'GOP',
+        zh: 'GOP',
+      },
+      RESOLUTION: {
+        en: 'resolution',
+        zh: '分辨率',
+      },
+      ENCODETYPE: {
+        en: 'encodeType',
+        zh: '编码方式',
+      },
+      BUFFEREND: {
+        en: 'bufferEnd',
+        zh: 'buffer水位',
+      },
+      CURRENTTIME: {
+        en: 'currentTime',
+        zh: '播放进度',
+      },
+    };
+  }
+
+  _getDefaultInfo(data): Record<string, InfoItem> {
+    const softDecodeData = {
+      h265Title: {
+        key: 'h265Title',
+        label: 'H265解码',
+        type: 'title',
+      },
+      decodeEfficiency: {
+        key: 'decodeEfficiency',
+        label: '解码效率',
+        labelTextKey: 'DECODEFPS',
+        value: data.decodeFps,
+        render: value => value + 'frames/s',
+      },
+      decodeCost: {
+        key: 'decodeCost',
+        label: '解码消耗',
+        labelTextKey: 'DECODECOST',
+        value: data.decodeFps,
+        render: value => (value ? (1000 / value).toFixed() + 'ms' : ''),
+      },
+    };
+    return {
+      format: {
+        key: 'format',
+        label: '格式',
+        labelTextKey: 'FORMAT',
+        value: data.format,
+      },
+      framerate: {
+        key: 'framerate',
+        label: '帧率',
+        labelTextKey: 'FPS',
+        value: data.fps,
+        render: value => `${value} fps`,
+      },
+      bitrate: {
+        key: 'bitrate',
+        label: '码率',
+        labelTextKey: 'BITRATE',
+        value: data.bitrate,
+        render: value => `${value / 1000} kbps`,
+      },
+      gop: {
+        key: 'gop',
+        label: 'GOP',
+        labelTextKey: 'GOP',
+        value: data.gop,
+        render: value => `${value} frames`,
+      },
+      resolution: {
+        key: 'resolution',
+        label: '视频分辨率',
+        labelTextKey: 'RESOLUTION',
+        value: { width: data.width, height: data.height },
+        render: value => `${value.width} * ${value.height}`,
+      },
+      encodeType: {
+        key: 'encodeType',
+        label: '编码方式',
+        labelTextKey: 'ENCODETYPE',
+        value: data.encodeType,
+      },
+      bufferEnd: {
+        key: 'bufferEnd',
+        label: 'buffer水位',
+        labelTextKey: 'BUFFEREND',
+        value: data.bufferEnd,
+      },
+      currentTime: {
+        key: 'currentTime',
+        label: '播放进度',
+        labelTextKey: 'CURRENTTIME',
+        value: data.currentTime,
+        render: value => (value ? value.toFixed(6) + 's' : ''),
+      },
+      ...(data.isOpenSoftDecoding && this.config.showH265Info
+        ? softDecodeData
+        : {}),
+    };
+  }
+
+  _init() {
+    const originData = this._initDom(this._getInfoListData());
+    // TODO 去掉Proxy
+    this._infoItems = new Proxy(originData, {
+      set: (target, propKey, value) => {
+        this._updateDom(target[propKey].dom, value);
+        return Reflect.set(target, propKey, value);
+      },
+    });
+    this._tick();
+  }
+
+  _getStats() {
+    if (this.streamType === 'flv') {
+      return this.player.plugins.flv?.getStats();
+    } else if (this.streamType === 'hls') {
+      return this.player.plugins.hls?.getStats();
+    }
+    return {};
+  }
+
+  _getInfoListData() {
+    const stats = this._getStats() || {};
+    return this._getDefaultInfo(
+      Object.assign(stats, {
+        format: `${this.streamType}_live`,
+        isOpenSoftDecoding: this.playerConfig.mediaType == 'live-video',
+      }),
+    );
+  }
+
+  _initDom(infoItems) {
+    const container = this.find('.veplayer-livepanel-container');
+    container.innerHTML = '';
+
+    Object.values(infoItems).forEach((element: any) => {
+      const rowDom = Util.createDom(
+        'veplayer-livepanel-div',
+        '',
+        undefined,
+        'veplayer-livepanel-container-row',
+      );
+      if (element.type === 'title') {
+        this._updateTitle(rowDom, element);
+      } else {
+        this._updateDom(rowDom, element);
+      }
+      container.appendChild(rowDom);
+      element.dom = rowDom;
+    });
+
+    return infoItems;
+  }
+
+  _updateTitle(rowDom: Element, item: InfoItem) {
+    rowDom.innerHTML = '';
+    const labelSpan = Util.createDom(
+      'veplayer-livepanel-span',
+      item.label,
+      undefined,
+      'veplayer-livepanel-container-row-title',
+    );
+    rowDom.appendChild(labelSpan);
+  }
+
+  _updateDom(rowdom: Element, newItem: InfoItem) {
+    rowdom.innerHTML = '';
+    const labelSpan = Util.createDom(
+      'veplayer-livepanel-span',
+      this._renderLabel(newItem),
+      undefined,
+      'veplayer-livepanel-container-row-label',
+    );
+    rowdom.appendChild(labelSpan);
+    if (newItem.type !== 'title') {
+      const valueSpan = Util.createDom(
+        'veplayer-livepanel-span',
+        this._renderValue(newItem),
+      );
+      rowdom.appendChild(valueSpan);
+    }
+  }
+
+  _renderLabel(item: InfoItem) {
+    return item.labelTextKey && this.langText[item.labelTextKey];
+  }
+
+  _renderValue(item: InfoItem) {
+    if (item.render) {
+      return item.render(item.value);
+    }
+    return item.value;
+  }
+
+  _handleDataChange() {
+    const newInfoItems = this._getInfoListData();
+    Object.values(this._infoItems).forEach((item: InfoItem) => {
+      // 判断新获取的数据下展示需要变化
+      if (
+        item.type !== 'title' &&
+        this._renderValue(item) !== this._renderValue(newInfoItems[item.key])
+      ) {
+        this._infoItems[item.key] = {
+          ...item,
+          ...newInfoItems[item.key],
+        };
+      }
+    });
+  }
+
+  _tick() {
+    this._pollTimer = setTimeout(() => {
+      clearTimeout(this._pollTimer);
+      this._poll();
+      this._tick();
+    }, 500);
+  }
+
+  _poll() {
+    this._handleDataChange();
+  }
+
+  destroy() {
+    clearTimeout(this._pollTimer);
+  }
+
+  _handleError() {
+    this._close();
+  }
+
+  _handleLoadedData() {
+    if (this.config.visible) {
+      this._open();
+    }
+  }
+
+  _open() {
+    const container = this.find('.veplayer-livepanel-container');
+    Util.removeClass(container as any, 'veplayer-livepanel-hidden');
+    this._init();
+  }
+
+  _close() {
+    const container = this.find('.veplayer-livepanel-container');
+    util.addClass(container as any, 'veplayer-livepanel-hidden');
+    clearTimeout(this._pollTimer);
+  }
+
+  // API
+  open() {
+    this._open();
+    this.config.visible = true;
+  }
+
+  close() {
+    this._close();
+    this.config.visible = false;
+  }
+
+  render() {
+    return `
+    <xg-livepanel class="xgplayer-livepanel">
+        <xg-livepanel-container class="veplayer-livepanel-container ${
+          !this.config.visible && 'veplayer-livepanel-hidden'
+        }">
+    </xg-livepanel-container></xg-livepanel>
+    `;
+  }
+}

package/src/plugins/external/ad/adsPlugin.ts

@@ -0,0 +1 @@
+export { default } from '@byted/xgplayer-ve-ads';