@byteplus/veplayer-plugin 2.3.0 → 2.3.1-rc.1

package/esm/veplayer.plugin.time.shift.development.css

@@ -1,63 +0,0 @@
-.xgplayer-shift .xgplayer-shift-progress-point {
-  position: absolute;
-  top: -30px;
-  display: none;
-  width: 60px;
-  padding: 6px 0;
-  color: #fff;
-  font-size: 12px;
-  line-height: 18px;
-  text-align: center;
-  background: rgba(0, 0, 0, 0.6);
-  border-radius: 2px;
-  transform: translateX(-50%);
-}
-.xgplayer-shift.active .xgplayer-shift-progress-point {
-  display: block;
-}
-.xgplayer-shift.xgplayer-progress .xgplayer-progress-outer {
-  transition: unset;
-}
-.xgplayer-shift.xgplayer-progress .xgplayer-progress-btn {
-  width: 16px;
-  height: 16px;
-  background: #346aff41;
-  box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.096);
-}
-.xgplayer-shift.xgplayer-progress .xgplayer-progress-played {
-  background: #3469ff;
-}
-.xgplayer-back-live-bt {
-  position: absolute;
-  bottom: 60px;
-  left: 20px;
-  display: none;
-  align-items: center;
-  justify-content: center;
-  width: 96px;
-  height: 32px;
-  color: #fff;
-  font-size: 13px;
-  background: rgba(0, 0, 0, 0.4);
-  border: 1px solid rgba(255, 255, 255, 0.8);
-  border-radius: 16px;
-  cursor: pointer;
-}
-.xgplayer-back-live-bt:hover {
-  background: rgba(0, 0, 0, 0.6);
-}
-.xgplayer-inactive .xgplayer-back-live-bt {
-  display: none;
-}
-.xgplayer-mobile .xgplayer-shift {
-  margin: 0 8px;
-}
-.xgplayer-mobile .xgplayer-shift .xgplayer-shift-progress-point {
-  display: none;
-}
-.xgplayer-mobile .xgplayer-back-live-bt {
-  bottom: 40px;
-  width: 86px;
-  height: 25px;
-  font-size: 12px;
-}

package/esm/veplayer.plugin.time.shift.development.js

@@ -1,339 +0,0 @@
-var __defProp = Object.defineProperty;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField = (obj, key, value) => {
-  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-  return value;
-};
-const formatTime = function(time) {
-  let hour = Math.floor(time / 3600);
-  const remainTime = time % 3600;
-  let minute = Math.floor(remainTime / 60);
-  let second = Math.round(remainTime % 60);
-  minute = minute.toString().padStart(2, "0");
-  second = second.toString().padStart(2, "0");
-  if (hour > 0) {
-    hour = hour.toString().padStart(2, "0");
-    return `${hour}:${minute}:${second}`;
-  }
-  return `${minute}:${second}`;
-};
-const addUrlParam = (originUrl, params) => {
-  if (!params) {
-    return originUrl;
-  }
-  const withoutProtocol = originUrl.startsWith("//");
-  if (withoutProtocol) {
-    originUrl = location.protocol + originUrl;
-  }
-  try {
-    const url = new URL(originUrl);
-    Object.entries(params).forEach(([key, value]) => {
-      url == null ? void 0 : url.searchParams.set(key, value);
-    });
-    return `${withoutProtocol ? "" : url.protocol}//${url.host}${url.pathname}${url.search}`;
-  } catch (error) {
-    console.warn("URL 格式有误，请检查", error);
-    return originUrl;
-  }
-};
-var timeShift = "";
-const live = window["VePlayer"].live;
-const Plugin = window["VePlayer"].Plugin;
-const Sniffer = window["VePlayer"].Sniffer;
-const XGUtil = window["VePlayer"].util;
-const { POSITIONS } = Plugin;
-const { Events } = live;
-const MAX_SHIFT = 7 * 24 * 3600;
-const MIN_SHIFT = 6;
-class TimeShift extends Plugin {
-  constructor() {
-    super(...arguments);
-    __publicField(this, "_isMobile", Sniffer.device === "mobile");
-    __publicField(this, "_playedBar", null);
-    __publicField(this, "_progressBtn", null);
-    __publicField(this, "_tooltip", null);
-    __publicField(this, "_backToLiveBtn", null);
-    __publicField(this, "_localInitTime", 0);
-    // 初始化时的客户端时间
-    __publicField(this, "_timeShiftInitRange", 0);
-    // 初始化时直播时移范围
-    __publicField(this, "_timeShiftOffset", 0);
-    // 当前时移时间
-    __publicField(this, "_isProgressMoving", false);
-    __publicField(this, "_liveUrl", "");
-    __publicField(this, "_stopPropagation", (e) => {
-      XGUtil.stopPropagation(e);
-      XGUtil.event(e);
-    });
-  }
-  static get pluginName() {
-    return "timeShift";
-  }
-  static get defaultConfig() {
-    return {
-      position: POSITIONS.CONTROLS_CENTER,
-      //  直播开始时间
-      liveStartTime: Date.now() / 1e3,
-      maxShiftOffset: 0,
-      // 当前时间
-      currentTime: Date.now() / 1e3
-    };
-  }
-  // 直播可时移范围
-  get _timeShiftLimit() {
-    const latestTimeShiftRange = this._timeShiftInitRange + Math.floor(Date.now() / 1e3 - this._localInitTime);
-    const { maxShiftOffset } = this.config ?? {};
-    if (latestTimeShiftRange > MAX_SHIFT) {
-      return MAX_SHIFT;
-    }
-    if (maxShiftOffset && latestTimeShiftRange > maxShiftOffset) {
-      return maxShiftOffset;
-    }
-    return latestTimeShiftRange;
-  }
-  registerLanguageTexts() {
-    return {
-      backToLive: {
-        jp: "ライブに戻る",
-        en: "Back to live",
-        zh: "返回直播",
-        "zh-hk": "返回直播"
-      }
-    };
-  }
-  updateLang() {
-    if (!this._backToLiveBtn)
-      return;
-    this._backToLiveBtn.innerHTML = this.langText.backToLive;
-  }
-  afterCreate() {
-    this._liveUrl = this.player.config.url;
-    this._playedBar = this.find(".xgplayer-progress-played");
-    this._progressBtn = this.find(".xgplayer-progress-btn");
-    this._tooltip = this.find(".xgplayer-shift-progress-point");
-    const { liveStartTime, currentTime } = this.config ?? {};
-    this._localInitTime = Math.floor(Date.now() / 1e3);
-    this._timeShiftInitRange = Math.floor(currentTime - liveStartTime);
-    this._createBackLiveBtDom();
-    this._initEvents();
-    this._bindDomEvents();
-  }
-  backToLive() {
-    if (!this._liveUrl) {
-      return;
-    }
-    this._switchUrl(this._liveUrl);
-    this._timeShiftOffset = 0;
-    this._toggleBackButton(false);
-    this.player.emit(Events.TIME_SHIFT_CHANGE, false);
-  }
-  destroy() {
-    var _a, _b, _c;
-    this.off(Events.TIME_UPDATE, this._handleTimeUpdate.bind(this));
-    if (this._isMobile) {
-      this.unbind("touchstart", this._handleMouseDown);
-      const controls = this.player.controls;
-      if (controls) {
-        (_a = controls.root) == null ? void 0 : _a.removerEventListener(
-          "touchmove",
-          XGUtil.stopPropagation
-        );
-        (_b = controls.center) == null ? void 0 : _b.removerEventListener(
-          "touchend",
-          XGUtil.stopPropagation
-        );
-      }
-    } else {
-      this.unbind("mousedown", this._handleMouseDown);
-      this.unbind("mouseenter", this._handleMouseEnter);
-    }
-    if (this._backToLiveBtn) {
-      (_c = this.player.root) == null ? void 0 : _c.removeChild(this._backToLiveBtn);
-      this._backToLiveBtn = null;
-    }
-  }
-  render() {
-    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-back-live-bt class="xgplayer-back-live-bt"></xg-back-live-bt>
-        <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>
-    `;
-  }
-  _initEvents() {
-    this.on(Events.TIME_UPDATE, this._handleTimeUpdate.bind(this));
-  }
-  _bindDomEvents() {
-    var _a, _b;
-    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) {
-        (_a = controls.root) == null ? void 0 : _a.addEventListener("touchmove", XGUtil.stopPropagation);
-        (_b = controls.center) == null ? void 0 : _b.addEventListener("touchend", XGUtil.stopPropagation);
-      }
-    } else {
-      this.bind("mousedown", this._handleMouseDown);
-      this.bind("mouseenter", this._handleMouseEnter);
-    }
-  }
-  _handleTimeUpdate() {
-    if (this._isProgressMoving) {
-      return;
-    }
-    this._progressUpdate();
-  }
-  _handleMouseDown(e) {
-    if (e.target === this._backToLiveBtn) {
-      return;
-    }
-    this._stopPropagation(e);
-    this._focus();
-    this._progressBtn && XGUtil.addClass(this._progressBtn, "active");
-    this._timeShiftOffset = this._getProgressOffset(e).progressOffset;
-    this._progressUpdate();
-    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) {
-    this._stopPropagation(e);
-    this._timeShiftOffset = this._getProgressOffset(e).progressOffset;
-    this._progressUpdate();
-  }
-  _handleMouseUp(e) {
-    this._stopPropagation(e);
-    this._isProgressMoving = false;
-    this._progressBtn && XGUtil.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) {
-    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();
-    XGUtil.addClass(this.root, "active");
-  }
-  _blur() {
-    this.player.controls.recoverAutoHide();
-    XGUtil.removeClass(this.root, "active");
-  }
-  _getProgressPercent(e) {
-    const { player } = this;
-    const { width, height, top, left } = this.root.getBoundingClientRect();
-    const _ePos = XGUtil.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;
-  }
-  _getProgressOffset(e) {
-    const percent = this._getProgressPercent(e);
-    return {
-      progressOffset: Math.floor(this._timeShiftLimit * (1 - percent)),
-      percent
-    };
-  }
-  _tipsUpdate(e) {
-    const { progressOffset, percent } = this._getProgressOffset(e);
-    if (!this._tooltip) {
-      return;
-    }
-    this._tooltip.style.left = `${percent * 100}%`;
-    this._tooltip.innerHTML = `-${formatTime(progressOffset)}`;
-  }
-  _progressUpdate() {
-    if (!this._progressBtn || !this._playedBar) {
-      return;
-    }
-    const progressPercent = Math.floor(this._timeShiftLimit - this._timeShiftOffset) / this._timeShiftLimit;
-    this._progressBtn.style.left = `${progressPercent * 100}%`;
-    this._playedBar.style.width = `${progressPercent * 100}%`;
-  }
-  _switchUrl(url) {
-    this.player.src = url;
-    this.player.config.url = url;
-  }
-  _changeTimeUrl() {
-    let shiftUrl = "";
-    this._toggleBackButton(true);
-    const _timeShiftOffset = this._timeShiftOffset < MIN_SHIFT ? MIN_SHIFT : this._timeShiftOffset;
-    shiftUrl = addUrlParam(this._liveUrl, {
-      timeshift: _timeShiftOffset
-    });
-    this._switchUrl(shiftUrl);
-    this.player.emit(Events.TIME_SHIFT_CHANGE, true);
-  }
-  _createBackLiveBtDom() {
-    var _a, _b;
-    if (this._backToLiveBtn) {
-      return;
-    }
-    this._backToLiveBtn = XGUtil.createDom(
-      "xg-back-live-bt",
-      this.langText.backToLive,
-      void 0,
-      "xgplayer-back-live-bt"
-    );
-    (_a = this._backToLiveBtn) == null ? void 0 : _a.addEventListener("click", () => {
-      this.backToLive();
-    });
-    (_b = this.player.root) == null ? void 0 : _b.appendChild(this._backToLiveBtn);
-  }
-  _toggleBackButton(isPlayTimeShift) {
-    if (!this._backToLiveBtn)
-      return;
-    this._backToLiveBtn.style.display = isPlayTimeShift ? "flex" : "none";
-  }
-}
-export {
-  TimeShift as default
-};

package/esm/veplayer.plugin.time.shift.production.css

@@ -1 +0,0 @@
-.xgplayer-shift .xgplayer-shift-progress-point{position:absolute;top:-30px;display:none;width:60px;padding:6px 0;color:#fff;font-size:12px;line-height:18px;text-align:center;background:rgba(0,0,0,.6);border-radius:2px;transform:translate(-50%)}.xgplayer-shift.active .xgplayer-shift-progress-point{display:block}.xgplayer-shift.xgplayer-progress .xgplayer-progress-outer{transition:unset}.xgplayer-shift.xgplayer-progress .xgplayer-progress-btn{width:16px;height:16px;background:#346aff41;box-shadow:0 0 1px rgba(0,0,0,.094)}.xgplayer-shift.xgplayer-progress .xgplayer-progress-played{background:#3469ff}.xgplayer-back-live-bt{position:absolute;bottom:60px;left:20px;display:none;align-items:center;justify-content:center;width:96px;height:32px;color:#fff;font-size:13px;background:rgba(0,0,0,.4);border:1px solid rgba(255,255,255,.8);border-radius:16px;cursor:pointer}.xgplayer-back-live-bt:hover{background:rgba(0,0,0,.6)}.xgplayer-inactive .xgplayer-back-live-bt{display:none}.xgplayer-mobile .xgplayer-shift{margin:0 8px}.xgplayer-mobile .xgplayer-shift .xgplayer-shift-progress-point{display:none}.xgplayer-mobile .xgplayer-back-live-bt{bottom:40px;width:86px;height:25px;font-size:12px}