@volcengine/veplayer 1.15.1 → 1.15.2-rc.1

package/src/plugins/external/subtitle/nativeSubTitle.ts

@@ -0,0 +1,115 @@
+import EventEmitter from 'eventemitter3';
+import { VE_DEBUG } from '@/utils';
+
+export default class NativeSubTitle extends EventEmitter {
+  public _media: any;
+  public _list: any[];
+  public _languages: string;
+  public curIndex: number;
+  constructor(media) {
+    super();
+    this._media = media;
+    this._list = [];
+    this._languages = '';
+    this.curIndex = -1;
+    this._init();
+  }
+
+  _init() {
+    const _list = this._media.textTracks;
+    if (_list) {
+      _list.addEventListener('change', this._onChange);
+      _list.addEventListener('addtrack', this._onChange);
+    } else {
+      VE_DEBUG.warn('current browser not support native subtitle');
+    }
+  }
+
+  _onChange = e => {
+    const _list = this._media.textTracks;
+    if (!_list || _list.length === 0) {
+      return;
+    }
+    const retList = [];
+    const langs = [];
+    let curIndex = -1;
+    for (let i = 0; i < _list.length; i++) {
+      const item = _list[i];
+      if (item.kind === 'subtitles') {
+        retList.push({
+          id: item.id || item.language,
+          language: item.language,
+          text: item.label,
+          isDefault: item.mode === 'showing',
+        });
+        if (curIndex === -1 && item.mode === 'showing') {
+          curIndex = i;
+        }
+        langs.push(item.language);
+      }
+    }
+
+    // 语言列表发生变化
+    if (langs.join('|') !== this._languages) {
+      this._languages = langs.join('|');
+      this.emit('reset', {
+        list: retList,
+        isOpen: curIndex > -1,
+      });
+    } else if (curIndex === -1) {
+      this.emit('off');
+    } else if (this.curIndex !== curIndex) {
+      this.emit('change', retList[curIndex]);
+    }
+    this.curIndex = curIndex;
+  };
+
+  /**
+   * @description 切换字幕
+   * @param { null | {
+   *  id: any,
+   *  language: any
+   * }} data
+   * @return {Promise<{code: number}>}
+   */
+  switch(data) {
+    return new Promise((resolve, reject) => {
+      if (!data) {
+        return reject({
+          code: 1,
+          message: 'no subtitle data',
+        });
+      }
+      const _tracks = this._media.textTracks;
+      for (let i = 0; i < _tracks.length; i++) {
+        const item = _tracks[i];
+        if (item.language === data.language) {
+          item.mode = 'showing';
+          // this.curIndex = i
+        } else if (item.mode === 'showing') {
+          item.mode = 'disabled';
+        }
+      }
+      return resolve({
+        code: 0,
+      });
+    });
+  }
+
+  switchOff() {
+    const _tracks = this._media.textTracks;
+    for (let i = 0; i < _tracks.length; i++) {
+      _tracks[i].mode = 'disabled';
+    }
+    this.curIndex = -1;
+  }
+
+  destroy() {
+    const _list = this._media.textTracks;
+    _list.removeEventListener('change', this._onChange);
+    this._media = null;
+    this._list = [];
+    this._languages = '';
+    this.curIndex = -1;
+  }
+}

package/src/plugins/external/timeShiftPlugin.ts

@@ -0,0 +1,484 @@
+import { PluginEvents } from '@/constants/event';
+import { Events, Plugin, Sniffer, Util } from 'xgplayer';
+import { formatTime } from '../../utils/time';
+import { addUrlParam } from '@/utils';
+const { POSITIONS } = Plugin;
+
+const UpperLimit = 7 * 24 * 3600; // 最大时移时间7天
+const MinMoveTime = 6; // 最小时移6s
+
+export default class TimeShiftPlugin extends Plugin {
+  static get pluginName() {
+    return 'TimeShiftPlugin';
+  }
+
+  static get defaultConfig() {
+    return {
+      position: POSITIONS.CONTROLS_CENTER,
+      livingStartTime: Date.now() / 1000,
+      maxMoveTime: 0,
+      currentTime: Date.now() / 1000,
+      timeShiftUrl: '',
+      cardList: [],
+    };
+  }
+
+  public isMobile = Sniffer.device === 'mobile';
+
+  public playedBar: any = null;
+  public cachedBar: any = null;
+  public innerBar: any = null;
+  public progressBtn: any = null;
+  public progressPoint: any = null;
+  public backLiveBt: any = null;
+  public cardDomList: any[] = [];
+
+  public initTime = 0; // 启播时的客户端时间
+  public liveGap = 0; // 初始直播时间差距
+  public shiftTimeGap = 0; // 相对latestLiveGap的时移时间
+
+  public isProgressMoving = false;
+  public isPlayTimeShift = false;
+  private liveUrl = '';
+
+  get duration() {
+    const latestLiveGap =
+      this.liveGap + Math.floor(Date.now() / 1000 - this.initTime);
+
+    const { maxMoveTime } = this.config ?? {};
+    // 如何设置最大回看时间
+    if (maxMoveTime && latestLiveGap > maxMoveTime) {
+      return maxMoveTime;
+    }
+
+    return latestLiveGap > UpperLimit ? UpperLimit : latestLiveGap;
+  }
+
+  registerLanguageTexts() {
+    return {
+      BACKLIVE: {
+        jp: 'ライブに戻る',
+        en: 'Back to live',
+        zh: '返回直播',
+        'zh-hk': '返回直播',
+      },
+    };
+  }
+
+  updateLang() {
+    if (!this.backLiveBt) return;
+    this.backLiveBt.innerHTML = (this.langText as any).BACKLIVE;
+  }
+
+  afterCreate() {
+    this.liveUrl = this.player.config.url as string;
+
+    this.playedBar = this.find('.xgplayer-progress-played');
+    this.cachedBar = this.find('.xgplayer-progress-cache');
+    this.progressBtn = this.find('.xgplayer-progress-btn');
+    this.progressPoint = this.find('.xgplayer-shift-progress-point');
+    this.innerBar = this.find('.xgplayer-progress-inner');
+
+    this.createBackLiveBtDom();
+    this.clacTime();
+    this.initEvents();
+    this.bindDomEvents();
+
+    if (!this.isMobile) {
+      this.createTimeShiftCard();
+    }
+  }
+
+  clacTime() {
+    const { livingStartTime, currentTime } = this.config ?? {};
+    this.initTime = Math.floor(Date.now() / 1000);
+    this.liveGap = Math.floor(currentTime - livingStartTime);
+  }
+
+  initEvents() {
+    this.on(Events.TIME_UPDATE, this.handleTimeUpdate.bind(this));
+  }
+
+  bindDomEvents() {
+    this.handleMouseDown = this.handleMouseDown.bind(this);
+    this.handleMouseUp = this.handleMouseUp.bind(this);
+    this.handleMouseMove = this.handleMouseMove.bind(this);
+    this.handleMouseEnter = this.handleMouseEnter.bind(this);
+    this.handleMouseLeave = this.handleMouseLeave.bind(this);
+    this.tipsUpdate = this.tipsUpdate.bind(this);
+
+    if (this.isMobile) {
+      this.bind('touchstart', this.handleMouseDown);
+      const controls = this.player.controls;
+      if (controls) {
+        controls.root &&
+          controls.root.addEventListener('touchmove', Util.stopPropagation);
+        controls.center &&
+          controls.center.addEventListener('touchend', Util.stopPropagation);
+      }
+    } else {
+      this.bind('mousedown', this.handleMouseDown);
+      this.bind('mouseenter', this.handleMouseEnter);
+    }
+  }
+
+  handleTimeUpdate() {
+    if (this.isProgressMoving) {
+      return;
+    }
+    this.progressUpdate();
+  }
+
+  onBodyClick = (e: any) => {
+    e.preventDefault();
+    e.stopPropagation();
+    Util.event(e);
+  };
+
+  handleMouseDown(e: any) {
+    if (e.target === this.backLiveBt) {
+      return;
+    }
+
+    this.onBodyClick(e);
+
+    this.focus();
+    Util.addClass(this.progressBtn, 'active');
+    const pos = this.computeTime(e);
+    this.updateShiftTime(pos.percent);
+    this.isProgressMoving = true;
+
+    if (this.isMobile) {
+      this.bind('touchmove', this.handleMouseMove);
+      this.bind('touchend', this.handleMouseUp);
+    } else {
+      document.addEventListener('mousemove', this.handleMouseMove, false);
+      document.addEventListener('mouseup', this.handleMouseUp, false);
+    }
+  }
+
+  handleMouseMove(e: any) {
+    this.onBodyClick(e);
+
+    const pos = this.computeTime(e);
+    this.updateShiftTime(pos.percent);
+  }
+
+  handleMouseUp(e: any) {
+    this.onBodyClick(e);
+    this.isProgressMoving = false;
+    Util.removeClass(this.progressBtn, 'active');
+
+    this.changeTimeUrl();
+
+    if (this.isMobile) {
+      this.unbind('touchmove', this.handleMouseMove);
+      this.unbind('touchend', this.handleMouseUp);
+    } else {
+      document.removeEventListener('mousemove', this.handleMouseMove, false);
+      document.removeEventListener('mouseup', this.handleMouseUp, false);
+    }
+  }
+
+  handleMouseEnter(e: any) {
+    this.bind('mouseleave', this.handleMouseLeave);
+    this.bind('mousemove', this.tipsUpdate);
+
+    this.tipsUpdate(e);
+    this.focus();
+  }
+
+  handleMouseLeave() {
+    this.unbind('mouseleave', this.handleMouseLeave);
+    this.unbind('mousemove', this.tipsUpdate);
+    this.blur();
+  }
+
+  focus() {
+    this.player.controls.pauseAutoHide();
+    Util.addClass(this.root, 'active');
+  }
+
+  blur() {
+    this.player.controls.recoverAutoHide();
+    Util.removeClass(this.root, 'active');
+  }
+
+  computeTime(e: any) {
+    const { player } = this;
+    const { width, height, top, left } = this.root.getBoundingClientRect();
+    const _ePos = Util.getEventPos(e, player.zoom);
+    let rWidth, rLeft, clientX;
+    if (player.rotateDeg === 90) {
+      rWidth = height;
+      rLeft = top;
+      clientX = _ePos.clientY;
+    } else {
+      rWidth = width;
+      rLeft = left;
+      clientX = _ePos.clientX;
+    }
+    let offset = clientX - rLeft;
+    offset = offset > rWidth ? rWidth : offset < 0 ? 0 : offset;
+
+    let percent = offset / rWidth;
+    percent = percent < 0 ? 0 : percent > 1 ? 1 : percent;
+    return {
+      percent,
+      offset,
+      width: rWidth,
+      left: rLeft,
+      e,
+    };
+  }
+
+  tipsUpdate(e: any) {
+    const pos = this.computeTime(e);
+
+    const shiftTimeGap = Math.floor(this.duration * (1 - pos.percent));
+
+    this.progressPoint.style.left = `${pos.percent * 100}%`;
+
+    this.progressPoint.innerHTML = `-${formatTime(shiftTimeGap)}`;
+  }
+
+  updateShiftTime(percent: number) {
+    this.shiftTimeGap = Math.floor(this.duration * (1 - percent));
+    this.progressUpdate();
+  }
+
+  getCurrentProgress() {
+    return Math.floor(this.duration - this.shiftTimeGap);
+  }
+
+  progressUpdate() {
+    const progressNumber = this.getCurrentProgress();
+    const progressPercent = progressNumber / this.duration;
+    this.progressBtn.style.left = `${progressPercent * 100}%`;
+    this.playedBar.style.width = `${progressPercent * 100}%`;
+
+    this.cardProcessUpdate();
+  }
+
+  changeTimeShift(time) {
+    const progressPercent = this.calcCardProcess(time);
+    if (progressPercent < 0) return;
+    this.updateShiftTime(progressPercent);
+    this.changeTimeUrl();
+  }
+
+  changeTimeUrl() {
+    const { timeShiftUrl } = this.config;
+    let shiftUrl = '';
+
+    this.isPlayTimeShift = true;
+    this.toggleBackButton();
+    const shiftTimeGap =
+      this.shiftTimeGap < MinMoveTime ? MinMoveTime : this.shiftTimeGap;
+    if (!timeShiftUrl) {
+      shiftUrl = addUrlParam(this.liveUrl, {
+        timeshift: shiftTimeGap,
+      });
+    } else {
+      shiftUrl = timeShiftUrl.replace('{}', shiftTimeGap);
+    }
+
+    this.player.src = shiftUrl;
+    this.player.config.url = shiftUrl;
+    this.player.emit(PluginEvents.TIME_SHIFT_CHANGE, true);
+    this.player.emit(PluginEvents.PlAY_URL_CHANGE, {
+      shiftUrl,
+      from: PluginEvents.TIME_SHIFT_CHANGE,
+    });
+  }
+
+  createBackLiveBtDom() {
+    if (this.backLiveBt) {
+      return this.backLiveBt;
+    }
+
+    this.backLiveBt = Util.createDom(
+      'xg-back-live-bt',
+      (this.langText as any).BACKLIVE,
+      undefined,
+      'xgplayer-back-live-bt',
+    );
+
+    this.backLiveBt.addEventListener('click', (e: any) => {
+      this.onBodyClick(e);
+      this.backLive();
+    });
+
+    this.player.root?.appendChild(this.backLiveBt);
+  }
+
+  backLive() {
+    if (!this.liveUrl) {
+      return;
+    }
+
+    this.player.src = this.liveUrl;
+    this.player.config.url = this.liveUrl;
+    this.shiftTimeGap = 0;
+    this.isPlayTimeShift = false;
+    this.toggleBackButton();
+    this.player.emit(PluginEvents.TIME_SHIFT_CHANGE, false);
+    this.player.emit(PluginEvents.PlAY_URL_CHANGE, {
+      url: this.liveUrl,
+      from: PluginEvents.TIME_SHIFT_CHANGE,
+    });
+  }
+
+  toggleBackButton() {
+    if (!this.backLiveBt) return;
+    this.backLiveBt.style.display = this.isPlayTimeShift ? 'flex' : 'none';
+  }
+
+  updateCardList(cardList) {
+    this.config.cardList = [...cardList];
+    this.clearCardDom();
+    this.createTimeShiftCard();
+  }
+
+  clearCardDom() {
+    this.cardDomList.forEach(card => {
+      if (!card.dom) return;
+      if (this.innerBar.contains(card.dom)) {
+        this.innerBar.removeChild(card.dom);
+      }
+    });
+    this.cardDomList = [];
+  }
+
+  createTimeShiftCard() {
+    if (this.config.cardList?.length <= 0) return;
+    const cardList = this.config.cardList;
+    cardList.forEach(card => {
+      this.renderCard(card);
+    });
+  }
+
+  renderCard(card) {
+    if (!card.img) return;
+    const $card = Util.createDom(
+      'xg-card',
+      '',
+      undefined,
+      'xgplayer-shift-progress-card',
+    );
+    const $cardImg = Util.createDom(
+      'img',
+      '',
+      { src: card.img },
+      'xgplayer-shift-progress-card-img',
+    );
+
+    const $point = Util.createDom(
+      'div',
+      '',
+      undefined,
+      'xgplayer-shift-progress-card-point',
+    );
+    $card.appendChild($cardImg);
+    $card.appendChild($point);
+    this.cardDomList.push({
+      ...card,
+      dom: $card,
+    });
+  }
+
+  cardProcessUpdate() {
+    if (this.cardDomList.length === 0) return;
+    this.cardDomList.forEach(card => {
+      if (!card.dom) return;
+      const progressPercent = this.calcCardProcess(card.timestamp);
+      if (progressPercent > 1) {
+        return;
+      }
+      const isContains = this.innerBar.contains(card.dom);
+      if (progressPercent < 0) {
+        isContains && this.innerBar.removeChild(card.dom);
+        return;
+      }
+      if (!isContains) {
+        this.innerBar.appendChild(card.dom);
+      }
+      card.dom.style.left = `${progressPercent * 100}%`;
+    });
+  }
+
+  calcCardProcess(time) {
+    const { maxMoveTime, livingStartTime } = this.config ?? {};
+    let startingPointTime = livingStartTime;
+    const latestLiveGap =
+      this.liveGap + Math.floor(Date.now() / 1000 - this.initTime);
+    // 如过设置最大回看时间
+    if (maxMoveTime && latestLiveGap > maxMoveTime) {
+      startingPointTime = latestLiveGap - maxMoveTime;
+    }
+
+    if (time < startingPointTime) {
+      return -1;
+    }
+
+    return (time - startingPointTime) / this.duration;
+  }
+
+  // clickCardToTimeShift(time) {
+  //   if (!time) return;
+  //   const progressPercent = this.calcCardProcess(time);
+  //   this.updateShiftTime(progressPercent);
+  // }
+
+  destroy() {
+    this.off(Events.TIME_UPDATE, this.handleTimeUpdate.bind(this));
+
+    if (this.isMobile) {
+      this.unbind('touchstart', this.handleMouseDown);
+      const controls = this.player.controls;
+      if (controls) {
+        controls.root &&
+          (controls.root as HTMLElement).removeEventListener(
+            'touchmove',
+            Util.stopPropagation,
+          );
+        controls.center &&
+          controls.center.removeEventListener('touchend', Util.stopPropagation);
+      }
+    } else {
+      this.unbind('mousedown', this.handleMouseDown);
+      this.unbind('mouseenter', this.handleMouseEnter);
+    }
+
+    if (this.backLiveBt) {
+      this.player.root?.removeChild(this.backLiveBt);
+      this.backLiveBt = null;
+    }
+  }
+
+  render() {
+    if (this.config.disable) {
+      return '';
+    }
+    const controlsMode = this.player.controls
+      ? this.player.controls.config.mode
+      : '';
+    const className =
+      controlsMode === 'bottom' ? 'xgplayer-progress-bottom' : '';
+
+    return `
+      <xg-progress class="xgplayer-progress ${className} xgplayer-shift">
+        <xg-outer class="xgplayer-progress-outer">
+          <xg-inners class="progress-list">
+            <xg-inner class="xgplayer-progress-inner" style="flex: 1">
+              <xg-cache class="xgplayer-progress-cache" style="width: 100%;"></xg-cache>
+              <xg-played class="xgplayer-progress-played" style="width: 100%;"></xg-played>
+            </xg-inner>
+          </xg-inners>
+          <xg-progress-btn class="xgplayer-progress-btn"></xg-progress-btn>
+          <xg-point class="xgplayer-shift-progress-point">00:00</xg-point>
+        </xg-outer>
+      </xg-progress>
+    `;
+  }
+}

package/src/plugins/external/watermark/dynamicWatermark.less

@@ -0,0 +1,13 @@
+@keyframes _xg_animation_blink {
+  0% {
+    opacity: 0.1;
+  }
+
+  50% {
+    opacity: 1;
+  }
+
+  100% {
+    opacity: 0.1;
+  }
+}