@volcengine/veplayer-plugin 2.4.0-rc.4 → 2.4.0-rc.5

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

@@ -0,0 +1,63 @@
+.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

@@ -0,0 +1,339 @@
+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

@@ -0,0 +1 @@
+.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}