@volcengine/veplayer 1.15.1 → 1.15.2-rc.1

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

@@ -0,0 +1,544 @@
+import { PluginEvents } from '@/constants/event';
+import Player, {
+  Events,
+  IXGI18nText,
+  Plugin,
+  STATE_CLASS,
+  Util,
+} from 'xgplayer';
+import ErrorSvg from '../../../assets/common/error.svg';
+import { VE_DEBUG } from '@/utils';
+import PlayerData from '@/core/playerData';
+import { VE_ERROR_TYPE_MAP, veErrorCodeMap } from '@/veError/error';
+import { VE_ERROR_EVENT, type IVeError } from '@/veError';
+import dayjs from 'dayjs';
+import type { POSITIONS } from '@/interface';
+import type VodLogger from '@byted/xgplayer-app-logger/es/logger';
+import { showToast } from '@/utils/toast';
+
+export interface ErrorPluginConfig {
+  // 是否展示 error 信息
+  showError?: boolean;
+  errorImg?: boolean;
+  errorTips?: boolean;
+  isNeedRefreshButton?: boolean;
+  isNeedCopyButton?: boolean;
+  isNeedDemoteBack?: boolean;
+  oriErrRetryCount?: number;
+  // 重试周期
+  oriErrRetryCycle?: number;
+  // 是否需要异步分析错误
+  needSyncAnalyzeError?: boolean;
+  // 分析错误超时时间
+  analyzeTimeout?: number;
+
+  // error事件发生后重试一轮
+  retryLoopNum?: number;
+  errorTipsText?: Record<string, string>;
+  [propName: string]: unknown;
+}
+
+export default class ErrorPlugin extends Plugin {
+  // 点播日志配置错误
+  private isVodLogConError: boolean;
+  private _errDetailList: (() => void | Record<string, any>)[] = [];
+  private errNoteMap: Record<number | string, IXGI18nText>;
+
+  // 插件的名称，将作为插件实例的唯一key值
+  static get pluginName() {
+    return 'sdkErrorPlugin';
+  }
+
+  static get defaultConfig(): ErrorPluginConfig {
+    return {
+      // 是否展示 error 信息
+      showError: true,
+      errorImg: true,
+      errorTips: true,
+      isNeedRefreshButton: true,
+      isNeedCopyButton: true,
+      isNeedDemoteBack: false,
+      allowDemoteToDifferentLine: true,
+
+      // error事件发生后重试一轮
+      retryLoopNum: 1,
+      errorTipsText: null,
+      // 挂载在controls的右侧，如果不指定则默认挂载在播放器根节点上
+      position: Plugin.POSITIONS.ROOT as POSITIONS,
+    };
+  }
+
+  public playerData: PlayerData;
+  public $errorDom: any;
+  public veError?: IVeError;
+
+  public player: Player & {
+    vodLogger: VodLogger;
+  };
+
+  readonly langText: {
+    clickButton: string;
+    errorTips: string;
+    errorCode: string;
+    did: string;
+    playTime: string;
+    copyError: string;
+    copySuccess: string;
+  };
+
+  public state = {
+    showError: false,
+    retryTimes: 0,
+    idx: 0,
+  };
+
+  constructor(args: any) {
+    super(args);
+    this.playerData = args.player.config.playerData;
+  }
+
+  afterCreate() {
+    this.initEvents();
+    const extendLangMap = Object.values(veErrorCodeMap).reduce((pre, cur) => {
+      const { code, textKey } = cur;
+      pre[code] = this.i18n[textKey];
+      return pre;
+    }, {});
+    this.errNoteMap = {
+      other: this.i18n['ERROR_TYPES']?.other?.msg ?? 'error',
+      1: this.i18n['MEDIA_ERR_ABORTED'],
+      2: this.i18n['MEDIA_ERR_NETWORK'],
+      3: this.i18n['MEDIA_ERR_DECODE'],
+      ...extendLangMap,
+    };
+  }
+
+  registerLanguageTexts() {
+    return {
+      clickButton: {
+        jp: 'リフレッシュ',
+        en: 'Refresh',
+        zh: '刷新',
+        'zh-hk': '刷新',
+      },
+      errorTips: {
+        jp: '再生中にエラーが発生しました。[更新]をクリックして試してください',
+        en: 'An error occurred while playing, click refresh to try',
+        zh: '播放发生错误，点击刷新试试吧',
+        'zh-hk': '播放發生錯誤，點擊刷新試試吧',
+      },
+      errorCode: {
+        jp: 'コード',
+        en: 'code',
+        zh: '错误码',
+        'zh-hk': '錯誤碼',
+      },
+      did: {
+        jp: 'デバイスID',
+        en: 'deviceID',
+        zh: '设备 ID',
+        'zh-hk': '設備 ID',
+      },
+      playTime: {
+        jp: '遊び時間',
+        en: 'playTime',
+        zh: '播放时间',
+        'zh-hk': '播放時間',
+      },
+      copyError: {
+        jp: 'コピーエラー',
+        en: 'Copy error',
+        zh: '复制错误信息',
+        'zh-hk': '複製錯誤訊息',
+      },
+      copySuccess: {
+        jp: 'コピー成功',
+        en: 'Copy success',
+        zh: '复制成功',
+        'zh-hk': '複製成功',
+      },
+    };
+  }
+
+  registerIcons() {
+    return {
+      errorImg: {
+        icon: ErrorSvg,
+        class: 'xgplayer-error-svg',
+      },
+    };
+  }
+
+  updateLang() {
+    if (!this.$errorDom) return;
+
+    const $errorTips = this.$errorDom.querySelector('.xgplayer-error-tips');
+    if ($errorTips) {
+      const tipsTxt =
+        this.config.errorTipsText?.[this.lang] ?? this.langText.errorTips;
+      $errorTips.innerHTML = tipsTxt;
+    }
+
+    const $errorButton = this.$errorDom.querySelector('.xgplayer-error-button');
+    if ($errorButton) {
+      $errorButton.innerHTML = this.langText.clickButton;
+    }
+  }
+  initEvents() {
+    // 监听veError的事件，该error数据已经被细分
+    this.player.on(VE_ERROR_EVENT, this.handleError);
+    if (this.player.config.isLive) {
+      this.player.on(Events.ENDED, this.handleEnd);
+      this.player.on(PluginEvents.REFRESH_CLICK, this.closeError);
+    }
+    this.on(Events.CANPLAY, this.closeError);
+    this.on(Events.PLAYING, this.closeError);
+  }
+
+  handleError = async (veError: IVeError) => {
+    this.isVodLogConError =
+      veError?.errorCode === veErrorCodeMap.VOD_LOG_NOT_CONFIGURED.code;
+    if (this.player) {
+      this.player.pause();
+    }
+    if (this.config.isNeedDemoteBack) {
+      // 切换备用地址
+      this.state.showError = false;
+      this.changeMainOrBackup();
+    } else {
+      this.state.showError = true;
+    }
+
+    this.renderError(veError);
+  };
+
+  handleEnd = () => {
+    if (this.player) {
+      this.player.pause();
+    }
+    if (this.config.isNeedDemoteBack) {
+      this.changeMainOrBackup();
+    }
+  };
+
+  getRetryListForCurrentDefinition() {
+    const stream = this.playerData.getCurrentStreams()[0];
+    return [stream?.url, ...(stream?.backUrlList ?? [])];
+  }
+
+  getRetryListForCurrentDefinitionAcrossAllLines() {
+    const allStreams = this.playerData.getStreamsMatchCurrentDefinition();
+    const res = [];
+    allStreams.forEach(item => {
+      res.push(item.url, ...(item.backUrlList ?? []));
+    });
+    return res;
+  }
+
+  changeMainOrBackup() {
+    this.player.addClass(STATE_CLASS.ENTER);
+    const retryList = this.config.allowDemoteToDifferentLine
+      ? this.getRetryListForCurrentDefinitionAcrossAllLines()
+      : this.getRetryListForCurrentDefinition();
+    VE_DEBUG.log('[errorPlugin] retryList', retryList);
+    const maxRetryNum = this.config.retryLoopNum * retryList.length;
+    VE_DEBUG.log('[errorPlugin] maxRetryNum', maxRetryNum);
+    VE_DEBUG.log(`[errorPlugin] retry times: ${this.state.retryTimes}`);
+
+    const idx =
+      (retryList.indexOf(this.player.config.url) + 1) % retryList.length;
+    this.state.idx = idx;
+    VE_DEBUG.log('[errorPlugin] next fallback url idx', idx);
+    const nextUrl = retryList[idx];
+    VE_DEBUG.log('[errorPlugin] next fallback url', nextUrl);
+
+    if (!nextUrl || this.state.retryTimes === maxRetryNum) {
+      this.player.removeClass(STATE_CLASS.ENTER);
+      if (this.state.retryTimes === maxRetryNum) {
+        this.player.emit(PluginEvents.PLAY_BACKUP_CHANGE_FINISH);
+        VE_DEBUG.log('[errorPlugin] all demote ended');
+        this.player.emit(PluginEvents.DEMOTE_ALL_DONE);
+      }
+      this.state.showError = true;
+      this.renderError();
+      this.resetTimes();
+      VE_DEBUG.log(
+        '[sdkErrorPlugin] fallback for current definition has ended',
+      );
+      return;
+    }
+
+    this.player.once('canplay', () => {
+      this.state.retryTimes = 0;
+    });
+
+    this.player.emit(PluginEvents.PLAY_BACKUP_CHANGE, {
+      currentUrl: this.player.config.url,
+      nextUrl: nextUrl,
+      retryTimes: this.state.retryTimes,
+    });
+
+    this.changeUrl(nextUrl);
+    this.state.retryTimes = this.state.retryTimes + 1;
+  }
+
+  changeUrl(url: string) {
+    this.player.config.url = url;
+    this.player.switchURL(url, false);
+
+    this.player.emit(PluginEvents.PlAY_URL_CHANGE, {
+      url,
+      from: PluginEvents.PLAY_BACKUP_CHANGE,
+    });
+  }
+
+  resetTimes() {
+    this.state.retryTimes = 0;
+    this.state.idx = 0;
+  }
+
+  renderError(error?: IVeError) {
+    if (!this.config.showError) {
+      return;
+    }
+    const $contianer: HTMLElement = this.root;
+    if (!$contianer) {
+      return;
+    }
+    $contianer.innerHTML = '';
+    $contianer.style.display = 'none';
+
+    // vod的log error会一直展示无法关闭，直到配置正确line_app_id
+    if (this.state.showError || this.isVodLogConError) {
+      this.player.emit(PluginEvents.SHOW_PLAY_ERROR);
+      $contianer.style.display = 'block';
+      $contianer.appendChild(this.getErrorDom(error));
+    }
+    // vod的log error 一直是暂停状态无法播放
+    if (this.isVodLogConError) {
+      this.player.blur();
+      this.player.pause();
+    }
+  }
+
+  addErrDetail(err) {
+    if (Array.isArray(err)) {
+      this._errDetailList = [...this._errDetailList, ...err];
+    } else {
+      this._errDetailList.push(err);
+    }
+  }
+
+  getErrorInfo(error: IVeError) {
+    const code = error.veErrorCode || error.errorCode;
+    const vodLogger = this.player?.vodLogger;
+    const liveLogger = this.player?.getPlugin('liveLogger');
+    const did = this.player.config.isLive
+      ? liveLogger?._userId
+      : vodLogger?.tracker?.getConfig()?.user?.user_unique_id;
+    const appId = this.player.config.isLive
+      ? liveLogger?.config?.appId
+      : vodLogger?.line_app_id;
+    const playTime = dayjs().format('YYYY-MM-DD HH:mm:ss');
+    return {
+      code,
+      appId,
+      did: did || 'unknown',
+      playTime,
+    };
+  }
+
+  getErrorInfoDom(error: IVeError) {
+    const { code, did, playTime } = this.getErrorInfo(error);
+    const infoWrapDom = Util.createDom(
+      'div',
+      '',
+      undefined,
+      'xgplayer-error-info-wrap',
+    );
+    const codeEl = `<p class="xgplayer-error-info-p">
+                <span class="xgplayer-error-info-title">${
+                  this.langText.errorCode || 'code'
+                }</span>
+                <span class="xgplayer-error-info-content">${code}</span>
+                </p>`;
+    infoWrapDom.appendChild(Util.createDomFromHtml(codeEl));
+    const didEl = `<p class="xgplayer-error-info-p">
+                <span class="xgplayer-error-info-title">${
+                  this.langText.did || 'deviceID'
+                }</span>
+                <span class="xgplayer-error-info-content">${did}</span>
+                </p>`;
+    infoWrapDom.appendChild(Util.createDomFromHtml(didEl));
+    const playTimeEl = `<p class="xgplayer-error-info-p">
+                <span class="xgplayer-error-info-title">${
+                  this.langText.playTime || 'playTime'
+                }</span>
+                <span class="xgplayer-error-info-content">${playTime}</span>
+                </p>`;
+    infoWrapDom.appendChild(Util.createDomFromHtml(playTimeEl));
+
+    return infoWrapDom;
+  }
+
+  handleCopyBtnClick(error: IVeError) {
+    const { did, playTime, appId } = this.getErrorInfo(error);
+    try {
+      const _error = JSON.stringify({
+        ...error,
+        playTime,
+        deviceID: did,
+        appId,
+      });
+      navigator.clipboard.writeText(_error).then(() => {
+        showToast(this.langText.copySuccess || 'copySuccess');
+      });
+    } catch (err) {
+      VE_DEBUG.error('copy error info err ', err);
+    }
+  }
+
+  getActionDom(error: IVeError) {
+    const errorType: string = error.errorType as unknown as string;
+    const actionWrapDom = Util.createDomFromHtml(
+      '<div class="xgplayer-error-action-wrap"></div>',
+    );
+
+    // token、serve、license错误无法通过重试恢复
+    const canRefresh = !(
+      errorType &&
+      [
+        VE_ERROR_TYPE_MAP[10],
+        VE_ERROR_TYPE_MAP[11],
+        VE_ERROR_TYPE_MAP[12],
+      ].includes(errorType)
+    );
+
+    if (this.config.isNeedRefreshButton && canRefresh) {
+      const refreshBtnDom = Util.createDom(
+        'div',
+        this.langText.clickButton || 'Refresh',
+        undefined,
+        'xgplayer-error-button refresh-button',
+      );
+
+      this.bind('.refresh-button', 'click', this.handleRefreshClick);
+      actionWrapDom.appendChild(refreshBtnDom);
+    }
+
+    if (this.config.isNeedCopyButton) {
+      const copyBtnDom = Util.createDom(
+        'div',
+        this.langText.copyError || 'CopyError',
+        undefined,
+        'xgplayer-error-button copy-button',
+      );
+
+      this.bind(
+        '.copy-button',
+        'click',
+        this.handleCopyBtnClick.bind(this, error),
+      );
+      actionWrapDom.appendChild(copyBtnDom);
+    }
+
+    return actionWrapDom;
+  }
+
+  getErrorDom(error: IVeError) {
+    const { errorCode, message, displayMessage } = error;
+    if (!this.$errorDom) {
+      this.$errorDom = Util.createDom(
+        'div',
+        '',
+        undefined,
+        'xgplayer-error-cover',
+      );
+      if (this.config.errorImg) {
+        const $errorImg = Util.createDom(
+          'div',
+          '',
+          undefined,
+          'xgplayer-error-img',
+        );
+        $errorImg.appendChild((this.icons as any).errorImg);
+        this.$errorDom.appendChild($errorImg);
+      }
+
+      if (this.config.errorTips) {
+        let tipsTxt = '';
+        if (this.config?.errorTipsText?.[this.lang]) {
+          tipsTxt = this.config.errorTipsText?.[this.lang];
+        } else if (error) {
+          // 优先使用displayMessage，其次使用error map字典，再次使用player的自带errorNote，再其次使用error的message，再使用error map的error，最后兜底error
+          tipsTxt =
+            displayMessage ||
+            this.errNoteMap[errorCode] ||
+            (this.player.errorNote && this.i18n[this.player.errorNote]) ||
+            message ||
+            this.errNoteMap.other ||
+            'error';
+        } else {
+          tipsTxt = this.langText.errorTips;
+        }
+        const $errorTips = Util.createDom(
+          'div',
+          tipsTxt,
+          undefined,
+          'xgplayer-error-tips',
+        );
+        this.$errorDom.appendChild($errorTips);
+      }
+      this.$errorDom.appendChild(this.getErrorInfoDom(error));
+
+      this.$errorDom.appendChild(this.getActionDom(error));
+
+      if (this._errDetailList?.length) {
+        this._errDetailList?.forEach(item => {
+          const isFunction = typeof item == 'function';
+          const errDetail = isFunction ? item() : item;
+          if (errDetail) {
+            const $errorDetail = Util.createDom(
+              'div',
+              `${errDetail.label}: ${errDetail.value}`,
+              undefined,
+              'xgplayer-error-detail-info',
+            );
+            this.$errorDom.appendChild($errorDetail);
+          }
+        });
+      }
+      this.emit('sdkerrorplugin_render', this.$errorDom);
+    }
+    return this.$errorDom;
+  }
+
+  handleRefreshClick = () => {
+    this.player?.emit(PluginEvents.PLAY_ERROR_BUTTON_CLICK);
+    this.player.removeClass(STATE_CLASS.PAUSED);
+    this.closeError();
+    this.player?.retry();
+  };
+
+  closeError = () => {
+    if (!this.state.showError) {
+      return;
+    }
+    this.state.showError = false;
+    this.renderError();
+  };
+
+  destroy() {
+    // 播放器销毁的时候一些逻辑
+    this.player.off(Events.ERROR, this.handleError);
+    if (this.player.config.isLive) {
+      this.player.off(Events.ENDED, this.handleEnd);
+    }
+  }
+
+  render() {
+    return this.config.showError
+      ? '<xgplayer-error class="xgplayer-error"></xgplayer-error>'
+      : '';
+  }
+}

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

@@ -0,0 +1,137 @@
+import XgplayerLiverLogger from '@byted/xgplayer-live-logger';
+import Tea from '@datarangers/sdk-javascript';
+import { Plugin } from 'xgplayer';
+import pkgJson from '../../../../package.json';
+import { VE_DEBUG } from '@/utils';
+
+const deps = pkgJson.dependencies || {};
+
+interface Config {
+  appid?: string;
+  appName?: string;
+  channel?: 'cn';
+  channelDomain?: string;
+  userId?: string;
+  deviceId?: string;
+}
+
+const CN_APPID = import.meta.env.__LIVE_LOG_TEA_ID__;
+const CHANNEL = import.meta.env.__LIVE_LOG_CHANNEL__;
+
+const DEVICE_ID_KEY = 'veplayer_live_device_id';
+const USER_ID_Key = 'veplayer_live_user_id';
+
+/**
+ * 随机生成几位随机数
+ */
+const genRandomID = (length: number) =>
+  Math.floor((Math.random() * 9 + 1) * Math.pow(10, length - 1)).toString();
+
+/**
+ * 生成device_id
+ */
+const getDeviceID = () => {
+  let deviceId = localStorage.getItem(DEVICE_ID_KEY);
+  if (deviceId) {
+    return deviceId;
+  }
+  deviceId = genRandomID(11);
+  localStorage.setItem(DEVICE_ID_KEY, deviceId);
+  return deviceId;
+};
+
+/**
+ * 生成user_id
+ */
+const getUserId = () => {
+  let userId = localStorage.getItem(USER_ID_Key);
+  if (userId) {
+    return userId;
+  }
+  userId = genRandomID(12);
+  localStorage.setItem(USER_ID_Key, userId);
+  return userId;
+};
+
+export default class LiveLogger extends Plugin {
+  public _userId?: string;
+  private _deviceId?: string;
+  static get pluginName() {
+    return 'liveLogger';
+  }
+
+  static get defaultConfig() {
+    return {
+      appId: '',
+      enable: true,
+    };
+  }
+
+  private _liveLogger;
+
+  afterCreate() {
+    if (!this.config.enable) {
+      return;
+    }
+    if (!this.config.appId) {
+      VE_DEBUG.warn('not found appid, logger is closed');
+      return;
+    }
+
+    this._userId = this.config?.userId || getUserId();
+    this._deviceId = this.config?.deviceId || getDeviceID();
+    this.openLog(this.config);
+    this.player.plugins?.sdkerrorplugin?.addErrDetail(() => {
+      if (this._liveLogger) {
+        return {
+          label: 'userId',
+          value: this._liveLogger?.logger?.options?.user_id,
+        };
+      }
+    });
+  }
+
+  private _createTea(config: Config) {
+    Tea.init({
+      app_id: CN_APPID,
+      channel: CHANNEL,
+    });
+    Tea.start();
+    Tea.config({
+      user_unique_id: this._userId,
+      device_id: this._deviceId,
+    });
+  }
+
+  startLog(config) {
+    this._createTea(config);
+    this._liveLogger = new XgplayerLiverLogger({
+      Tea: Tea,
+      player: this.player,
+      aid: config.appId,
+      project_key: config.appId,
+      app_name: config.appId,
+      user_id: this._userId,
+      device_id: this._deviceId,
+      ext: {
+        veplayer_version: __VERSION__,
+        flv_version: deps['xgplayer-flv'],
+        hls_version: deps['xgplayer-hls'],
+        rts_version: deps['@byted/xgplayer-rts'],
+      },
+    });
+  }
+
+  closeLog() {
+    this._liveLogger.destroy();
+    this._liveLogger = null;
+  }
+
+  openLog(config?: Config) {
+    !this._liveLogger &&
+      this.startLog({
+        ...this.config,
+        ...config,
+      });
+  }
+}