@byteplus/veplayer 2.11.1 → 2.12.0-rc.0

package/umd/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/umd/veplayer.vod.development.js

@@ -14153,6 +14153,373 @@ var __publicField = (obj, key, value) => {
       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,
@@ -14267,6 +14634,7 @@ var __publicField = (obj, key, value) => {
       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 获取视频的就绪状态，其状态枚举值、枚举名称和说明如下：
@@ -14432,7 +14800,7 @@ var __publicField = (obj, key, value) => {
      * @brief Retrieve the player SDK version number.
      */
     get playerVersion() {
-      return "2.11.1";
+      return "2.12.0-rc.0";
     }
     /** {zh}
      * @brief 获取当前播放视频的清晰度唯一标识（definition）。
@@ -14937,6 +15305,7 @@ var __publicField = (obj, key, value) => {
      */
     destroy() {
       var _a;
+      destroyPlayerEventsCallJSB();
       this._player.off(ERROR, this._errorCallback);
       this._player.destroy();
       (_a = this._customMedia) == null ? void 0 : _a.destroy();