@byteplus/veplayer 2.11.2 → 2.12.0-rc.0

package/esm/veplayer.vod.development.css

@@ -659,6 +659,22 @@
 .xgplayer-pc.xgplayer-is-error .xgplayer-start {
   display: none;
 }
+.xgplayer-mobile.xgplayer-mobile-mini-window video,
+.xgplayer-mobile.xgplayer-mobile-mini-window xg-video {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 9999;
+  /* stylelint-disable-next-line declaration-no-important */
+  width: 100vw !important;
+  /* stylelint-disable-next-line declaration-no-important */
+  height: 100vh !important;
+}
+.xgplayer-mobile.xgplayer-mobile-mini-window .xgplayer-start {
+  position: fixed;
+  /* stylelint-disable-next-line declaration-no-important */
+  z-index: 10000 !important;
+}
 .xgplayer-mobile .xgplayer-progress .xgplayer-progress-played {
   background: #3469ff;
 }
@@ -701,15 +717,15 @@
   display: none;
 }
 .veplayer-logo {
-  display: none;
   position: absolute;
-  visibility: visible;
+  top: 20px;
+  right: 20px;
+  z-index: 10;
+  display: none;
   width: 70px;
   height: 20px;
-  right: 20px;
-  top: 20px;
+  visibility: visible;
   opacity: 1;
-  z-index: 10;
 }
 .veplayer-logo svg {
   width: 100%;

package/esm/veplayer.vod.development.js

@@ -14149,6 +14149,373 @@ class CustomMedia {
     replaceAttributes(this._el, this._videoAttributes);
   }
 }
+var Web2NativeMessageEvent = /* @__PURE__ */ ((Web2NativeMessageEvent2) => {
+  Web2NativeMessageEvent2[Web2NativeMessageEvent2["INIT_FINISH"] = 10001] = "INIT_FINISH";
+  Web2NativeMessageEvent2[Web2NativeMessageEvent2["CREATE_PLAYER"] = 11e3] = "CREATE_PLAYER";
+  Web2NativeMessageEvent2[Web2NativeMessageEvent2["DESTROY_PLAYER"] = 11001] = "DESTROY_PLAYER";
+  Web2NativeMessageEvent2[Web2NativeMessageEvent2["OPEN_FULLSCREEN"] = 11002] = "OPEN_FULLSCREEN";
+  Web2NativeMessageEvent2[Web2NativeMessageEvent2["EXIT_FULLSCREEN"] = 11003] = "EXIT_FULLSCREEN";
+  Web2NativeMessageEvent2[Web2NativeMessageEvent2["LIVE_ROOM_STATE_CHANGE"] = 11004] = "LIVE_ROOM_STATE_CHANGE";
+  Web2NativeMessageEvent2[Web2NativeMessageEvent2["PLAYER_STATE_CHANGE"] = 11005] = "PLAYER_STATE_CHANGE";
+  Web2NativeMessageEvent2[Web2NativeMessageEvent2["MEDIA_LOAD_FINISH"] = 11006] = "MEDIA_LOAD_FINISH";
+  Web2NativeMessageEvent2[Web2NativeMessageEvent2["OPEN_MINI_WINDOW"] = 11007] = "OPEN_MINI_WINDOW";
+  Web2NativeMessageEvent2[Web2NativeMessageEvent2["CLOSE_MINI_WINDOW"] = 11008] = "CLOSE_MINI_WINDOW";
+  Web2NativeMessageEvent2[Web2NativeMessageEvent2["OPEN_WAKE_LOCK"] = 11009] = "OPEN_WAKE_LOCK";
+  Web2NativeMessageEvent2[Web2NativeMessageEvent2["EXIT_WAKE_LOCK"] = 110010] = "EXIT_WAKE_LOCK";
+  Web2NativeMessageEvent2[Web2NativeMessageEvent2["PUSH_WEB_DATA_INFO"] = 110011] = "PUSH_WEB_DATA_INFO";
+  return Web2NativeMessageEvent2;
+})(Web2NativeMessageEvent || {});
+var Native2WebMessageEvent = /* @__PURE__ */ ((Native2WebMessageEvent2) => {
+  Native2WebMessageEvent2[Native2WebMessageEvent2["ENTER_MINI_WINDOW"] = 21e3] = "ENTER_MINI_WINDOW";
+  Native2WebMessageEvent2[Native2WebMessageEvent2["EXIT_MINI_WINDOW"] = 21001] = "EXIT_MINI_WINDOW";
+  Native2WebMessageEvent2[Native2WebMessageEvent2["PAUSE"] = 21002] = "PAUSE";
+  Native2WebMessageEvent2[Native2WebMessageEvent2["START_PLAY"] = 21003] = "START_PLAY";
+  Native2WebMessageEvent2[Native2WebMessageEvent2["PLAY"] = 21004] = "PLAY";
+  Native2WebMessageEvent2[Native2WebMessageEvent2["WEBVIEW_CONFIG"] = 21005] = "WEBVIEW_CONFIG";
+  Native2WebMessageEvent2[Native2WebMessageEvent2["GET_WEB_DATA_INFO"] = 21006] = "GET_WEB_DATA_INFO";
+  Native2WebMessageEvent2[Native2WebMessageEvent2["ENTER_FULLSCREEN"] = 21007] = "ENTER_FULLSCREEN";
+  Native2WebMessageEvent2[Native2WebMessageEvent2["EXIT_FULLSCREEN"] = 21008] = "EXIT_FULLSCREEN";
+  return Native2WebMessageEvent2;
+})(Native2WebMessageEvent || {});
+class ByteLiveJsBridge {
+  constructor(data) {
+    __publicField(this, "_emitter", new EventEmitter());
+    __publicField(this, "isInIOS", false);
+    __publicField(this, "jsBridgeName", "ByteLiveJsBridge");
+    __publicField(this, "jsBridge", null);
+    __publicField(this, "data", {
+      room: {},
+      player: {}
+    });
+    // eslint-disable-next-line @typescript-eslint/member-ordering
+    __publicField(this, "nativeConfig", {});
+    if (data == null ? void 0 : data.name) {
+      this.jsBridgeName = data.name;
+    }
+    this.init();
+  }
+  init() {
+    this.initVariables();
+    if (!this.jsBridge) {
+      this.mountGlobal();
+    }
+    this.callToNative(Web2NativeMessageEvent.INIT_FINISH, {});
+  }
+  getJsBridge() {
+    const jsBridge = Reflect.get(window, this.jsBridgeName);
+    if (jsBridge) {
+      this.jsBridge = jsBridge;
+    }
+    return this.jsBridge;
+  }
+  setJsBridge(jsBridge) {
+    Reflect.set(window, this.jsBridgeName, jsBridge);
+    Reflect.set(window, "VeCloudJsBridge", jsBridge);
+    console.log("设置到 window 上");
+    this.jsBridge = jsBridge;
+  }
+  initVariables() {
+    this.isInIOS = Boolean(sniffer.os.isIos);
+  }
+  mountGlobal() {
+    const JsBridge = this.getJsBridge();
+    console.log("从 window 上获取到的 jsBridge", JsBridge);
+    if (JsBridge) {
+      JsBridge.nativeCallBack = (data) => {
+        console.log("收到native发来消息", data);
+        this.handelEventCallBack(data);
+      };
+      this.jsBridge = JsBridge;
+    } else {
+      const JsBridge2 = {
+        nativeCallBack: (data) => {
+          console.log("收到native发来消息", data);
+          this.handelEventCallBack(data);
+        }
+        // invokeNative: (data: IMessage) => {
+        //   console.log('发送给native', data);
+        // },
+      };
+      this.setJsBridge(JsBridge2);
+    }
+    this.bindWebDataInfo();
+    this.bindGetNativeConfig();
+  }
+  on(action, func) {
+    this._emitter.on(action, func);
+  }
+  handelEventCallBack(data) {
+    const { eventKey, info } = data ?? {};
+    if (!eventKey || !Native2WebMessageEvent[eventKey]) {
+      console.log("Native2Web未匹配到对应事件", eventKey);
+      return;
+    }
+    this._emitter.emit(Native2WebMessageEvent[eventKey], info);
+  }
+  invokeNative(data) {
+    var _a, _b, _c;
+    console.log("发送给native", data);
+    if (this.isInIOS) {
+      (_c = (_b = (_a = window == null ? void 0 : window.webkit) == null ? void 0 : _a.messageHandlers) == null ? void 0 : _b.invokeNative) == null ? void 0 : _c.postMessage(data);
+    }
+    const JsBridge = this.jsBridge || Reflect.get(window, this.jsBridgeName);
+    console.log(
+      "JsBridge",
+      this.jsBridge,
+      Reflect.get(window, this.jsBridgeName)
+    );
+    if (JsBridge.invokeNative) {
+      JsBridge.invokeNative(JSON.stringify(data));
+    } else {
+      console.log("未找到对应invokeNative方法");
+    }
+  }
+  bindWebDataInfo() {
+    this.on("GET_WEB_DATA_INFO", () => {
+      this.callToNative(Web2NativeMessageEvent.PUSH_WEB_DATA_INFO, {
+        ...this.data
+      });
+    });
+  }
+  bindGetNativeConfig() {
+    this.on("WEBVIEW_CONFIG", (data) => {
+      this.nativeConfig = {
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        ...this.nativeConfig,
+        ...data
+      };
+    });
+  }
+  callToNative(eventKey, info) {
+    if (!eventKey || !Web2NativeMessageEvent[eventKey]) {
+      console.log("Web2Native未匹配到对应事件", eventKey);
+      return;
+    }
+    this.invokeNative({ eventKey, info });
+  }
+  callToNativeCreatePlayer(data) {
+    this.data.room = {
+      ...this.data.room,
+      isPortrait: data.isPortrait
+    };
+    this.callToNative(Web2NativeMessageEvent.CREATE_PLAYER, data);
+  }
+  callToNativeDestroyPlayer() {
+    this.callToNative(Web2NativeMessageEvent.DESTROY_PLAYER, {});
+  }
+  callToNativeOpenFullScreen() {
+    this.data.player = {
+      ...this.data.player,
+      fullscreen: true
+    };
+    this.callToNative(Web2NativeMessageEvent.OPEN_FULLSCREEN, {});
+  }
+  callToNativeExitFullScreen() {
+    this.data.player = {
+      ...this.data.player,
+      fullscreen: false
+    };
+    this.callToNative(Web2NativeMessageEvent.EXIT_FULLSCREEN, {});
+  }
+  callToNativeLiveRoomStateChange(data) {
+    this.data.room = {
+      ...this.data.room,
+      status: data.status
+    };
+    this.callToNative(Web2NativeMessageEvent.LIVE_ROOM_STATE_CHANGE, data);
+  }
+  callToNativePlayerStateChange(data) {
+    this.data.player = {
+      ...this.data.player,
+      created: data.created,
+      paused: data.paused
+    };
+    this.callToNative(Web2NativeMessageEvent.PLAYER_STATE_CHANGE, data);
+  }
+  callToNativeMediaLoadFinish(data) {
+    this.data.player = {
+      ...this.data.player,
+      videoWidth: data.videoWidth,
+      videoHeight: data.videoHeight
+    };
+    this.callToNative(Web2NativeMessageEvent.MEDIA_LOAD_FINISH, data);
+  }
+  callToNativeOpenMiniWindow() {
+    this.data.player = {
+      ...this.data.player,
+      mini: true
+    };
+    this.callToNative(Web2NativeMessageEvent.OPEN_MINI_WINDOW, {});
+  }
+  callToNativeCloseMiniWindow() {
+    this.data.player = {
+      ...this.data.player,
+      mini: false
+    };
+    console.log("通知Native关闭小窗", /* @__PURE__ */ new Date());
+    this.callToNative(Web2NativeMessageEvent.CLOSE_MINI_WINDOW, {});
+  }
+  callToNativeOpenWakeLock() {
+    this.callToNative(Web2NativeMessageEvent.OPEN_WAKE_LOCK, {});
+  }
+  callToNativeExitWakeLock() {
+    this.callToNative(Web2NativeMessageEvent.EXIT_WAKE_LOCK, {});
+  }
+}
+let InnerJsBridge;
+const getJsbInstance = () => {
+  if (InnerJsBridge)
+    return InnerJsBridge;
+  InnerJsBridge = new ByteLiveJsBridge();
+  return InnerJsBridge;
+};
+var InnerJsBridge$1 = getJsbInstance();
+const bindPlayerEventsCallJSB = (player) => {
+  const isPortrait = true;
+  const isLive = true;
+  if (!InnerJsBridge$1) {
+    return;
+  }
+  if (!sniffer.os.isPc) {
+    bindMiniWindowEvents(player);
+  }
+  InnerJsBridge$1.callToNativeCreatePlayer({
+    isLive,
+    isPortrait
+  });
+  InnerJsBridge$1.callToNativePlayerStateChange({
+    created: true,
+    paused: false
+  });
+  player.on(Events.PLAY, () => {
+    InnerJsBridge$1 == null ? void 0 : InnerJsBridge$1.callToNativePlayerStateChange({
+      created: true,
+      paused: false
+    });
+  });
+  player.on(Events.PAUSE, () => {
+    InnerJsBridge$1 == null ? void 0 : InnerJsBridge$1.callToNativePlayerStateChange({
+      created: true,
+      paused: true
+    });
+  });
+  player.on(Events.ERROR, () => {
+    existMiniWindow();
+  });
+  player.on(Events.LOADED_DATA, () => {
+    getVideoSizeWithRetry(player, isPortrait).then(
+      ({ videoWidth, videoHeight }) => {
+        InnerJsBridge$1 == null ? void 0 : InnerJsBridge$1.callToNativeMediaLoadFinish({
+          isPortrait: videoHeight > videoWidth,
+          videoWidth,
+          videoHeight
+        });
+      }
+    );
+  });
+};
+const destroyPlayerEventsCallJSB = () => {
+  if (InnerJsBridge$1) {
+    InnerJsBridge$1.callToNativeDestroyPlayer();
+    InnerJsBridge$1.callToNativePlayerStateChange({
+      created: false,
+      paused: true
+    });
+  }
+  existMiniWindow();
+};
+const bindMiniWindowEvents = (player) => {
+  if (!InnerJsBridge$1) {
+    return;
+  }
+  const handleMiniWindowChange = (state) => {
+    if (!player || !player.root) {
+      return;
+    }
+    if (state) {
+      player.addClass("xgplayer-mobile-mini-window");
+    } else {
+      player.removeClass("xgplayer-mobile-mini-window");
+    }
+  };
+  InnerJsBridge$1.on("WEBVIEW_CONFIG", (data) => {
+    console.log("WEBVIEW_CONFIG", data);
+    if (data == null ? void 0 : data.keepPlayWhenPageHide) {
+      player.unRegisterPlugin("PageChangePlugin");
+    }
+  });
+  InnerJsBridge$1.on("ENTER_MINI_WINDOW", () => {
+    handleMiniWindowChange(true);
+  });
+  InnerJsBridge$1.on("EXIT_MINI_WINDOW", () => {
+    console.log("切回小窗播放器处于暂停: ", player.paused, /* @__PURE__ */ new Date());
+    if (player.paused) {
+      player.play();
+    }
+    handleMiniWindowChange(false);
+  });
+  InnerJsBridge$1.on("PAUSE", () => {
+    if (!player) {
+      return;
+    }
+    player.pause();
+  });
+  InnerJsBridge$1.on("START_PLAY", () => {
+    handleMiniWindowChange(false);
+    if (!player) {
+      return;
+    }
+    player.play();
+  });
+  InnerJsBridge$1.on("PLAY", () => {
+    if (!player) {
+      return;
+    }
+    player.play();
+  });
+  InnerJsBridge$1.on("ENTER_FULLSCREEN", () => {
+    var _a;
+    if (!(player == null ? void 0 : player.fullscreen)) {
+      (_a = player.getPlugin("fullscreen")) == null ? void 0 : _a.toggleFullScreen();
+    }
+  });
+  InnerJsBridge$1.on("EXIT_FULLSCREEN", () => {
+    var _a;
+    if (player == null ? void 0 : player.fullscreen) {
+      (_a = player.getPlugin("fullscreen")) == null ? void 0 : _a.toggleFullScreen();
+    }
+  });
+};
+const existMiniWindow = () => {
+  InnerJsBridge$1 && (InnerJsBridge$1 == null ? void 0 : InnerJsBridge$1.callToNativeCloseMiniWindow());
+};
+const getVideoSizeWithRetry = (player, isPortrait) => {
+  const retryGetVideoSize = (retryCount = 0) => {
+    return new Promise((resolve) => {
+      let { videoWidth, videoHeight } = player.video;
+      if (videoWidth > 0 && videoHeight > 0) {
+        resolve({ videoWidth, videoHeight });
+        return;
+      }
+      if (retryCount < 15) {
+        setTimeout(() => {
+          retryGetVideoSize(retryCount + 1).then(resolve);
+        }, 500);
+        return;
+      }
+      if (isPortrait) {
+        videoWidth = 1080;
+        videoHeight = 1920;
+      } else {
+        videoWidth = 1920;
+        videoHeight = 1080;
+      }
+      resolve({ videoWidth, videoHeight });
+    });
+  };
+  return retryGetVideoSize();
+};
 const { POSITIONS: XGPosition } = Plugin;
 const POSITIONS = {
   ...XGPosition,
@@ -14263,6 +14630,7 @@ class VePlayerBase {
     this.emit(Events.PLAYER_CREATE_FINISH, this._player);
     this._errorCallback = (err) => this._handleFallback(err);
     this._player.on(ERROR, this._errorCallback);
+    bindPlayerEventsCallJSB(this._player);
   }
   /** {zh}
    * @brief 获取视频的就绪状态，其状态枚举值、枚举名称和说明如下：
@@ -14428,7 +14796,7 @@ class VePlayerBase {
    * @brief Retrieve the player SDK version number.
    */
   get playerVersion() {
-    return "2.11.2";
+    return "2.12.0-rc.0";
   }
   /** {zh}
    * @brief 获取当前播放视频的清晰度唯一标识（definition）。
@@ -14933,6 +15301,7 @@ class VePlayerBase {
    */
   destroy() {
     var _a;
+    destroyPlayerEventsCallJSB();
     this._player.off(ERROR, this._errorCallback);
     this._player.destroy();
     (_a = this._customMedia) == null ? void 0 : _a.destroy();