@besovideo/webrtc-player 0.8.80 → 0.8.82

package/dist/main.es.css

@@ -901,6 +901,34 @@
   right: 16px;
   top: 14px;
 }
+.bvplayer-blaybackbar .optionsContent {
+  position: absolute;
+  right: 85px;
+  bottom: 30px;
+  padding: 10px 5px;
+  border-radius: 5px;
+  height: 130px;
+  background-color: white;
+  color: black;
+  display: none;
+}
+.bvplayer-blaybackbar .options-item select {
+  vertical-align: text-bottom;
+}
+.bvplayer-blaybackbar .options-item {
+  text-align: center;
+  padding: 2px 12px;
+  -webkit-user-select: none;
+  user-select: none;
+}
+.bvplayer-blaybackbar .options-item[data-selected=true] {
+  background-color: #cfcfcf;
+}
+.bvplayer-blaybackbar .options-item:hover {
+  cursor: pointer;
+  background-color: #dfdfdf;
+  border-radius: 3px;
+}
 .bvplayer-blaybackbar .svg-sound {
   color: white;
   cursor: pointer;

package/dist/main.es.js

@@ -111,7 +111,7 @@ var __async = (__this, __arguments, generator) => {
 var define_processenv_default;
 var init_define_processenv = __esm({
   "<define:processenv>"() {
-    define_processenv_default = { NODE_ENV: "production", SH_LIB_NAME: "@besovideo/webrtc-player", SH_LIB_VERSION: "0.8.80", PROJECT_NAMESPACE: "bvplayer" };
+    define_processenv_default = { NODE_ENV: "production", SH_LIB_NAME: "@besovideo/webrtc-player", SH_LIB_VERSION: "0.8.82", PROJECT_NAMESPACE: "bvplayer" };
   }
 });
 
@@ -5053,7 +5053,7 @@ var getDeviceBvrtc = (param, token, signal) => __async(void 0, null, function* (
     signal
   );
   logger_default.api("\u8BBE\u5907\u97F3\u89C6\u9891\u6D41 bvrtc\u65B9\u5F0F\u6253\u5F00dialog: ", { params, resData });
-  if (resData == null ? void 0 : resData.code) {
+  if ((resData == null ? void 0 : resData.code) == 9) {
     throw new TokenFailError("token fail");
   }
   if (!resData || resData.code !== 0 || !((_a = resData.data) == null ? void 0 : _a.dialogid))
@@ -14901,7 +14901,8 @@ var en_default = {
   "tiao-zhuan": "Jump",
   "fa-song": "Send",
   "xian-shi": "Show",
-  "token-fail": "Token Fail"
+  "token-fail": "Token Fail",
+  "bei-su": "Speed"
 };
 
 // src/locales/zh.json
@@ -14951,7 +14952,8 @@ var zh_default = {
   "tiao-zhuan": "\u8DF3\u8F6C",
   "xian-shi": "\u663E\u793A",
   "fa-song": "\u53D1\u9001",
-  "token-fail": "\u8BA4\u8BC1\u5931\u6548"
+  "token-fail": "\u8BA4\u8BC1\u5931\u6548",
+  "bei-su": "\u500D\u901F"
 };
 
 // src/locales/i18n.ts
@@ -16573,6 +16575,7 @@ var PuPlayer = (props) => {
           player.mask.text = t("lost-connection");
           player.close();
           onDisConnected && onDisConnected();
+          useRecntMgr == null ? void 0 : useRecntMgr.reconnect();
         },
         onConnected: (_pc) => {
           onConnected && onConnected();
@@ -16651,8 +16654,6 @@ var PuPlayer = (props) => {
         var _a2, _b2;
         muted2 = arguments.length == 0 ? currentMuted : muted2;
         console.log("open with muted: ", muted2);
-        if (!useRecntMgr)
-          useRecntMgr = reconnectMgr;
         player.clearEventListener("close");
         logger_default.debug(
           "PuPlayer open",
@@ -16696,7 +16697,7 @@ var PuPlayer = (props) => {
             player.mask.visible = true;
             player.mask.text = e.toString();
             onConnectedFailed && onConnectedFailed();
-            useRecntMgr == null ? void 0 : useRecntMgr.reconnect();
+            reconnectMgr == null ? void 0 : reconnectMgr.reconnect();
             return;
           }
           try {
@@ -16900,10 +16901,12 @@ var PuPlayer = (props) => {
             player.mask.text = e2.toString();
             hplayer == null ? void 0 : hplayer.close();
             onConnectedFailed && onConnectedFailed();
-            useRecntMgr == null ? void 0 : useRecntMgr.reconnect();
+            reconnectMgr == null ? void 0 : reconnectMgr.reconnect();
             throw e2;
           }
         }
+        if (!useRecntMgr)
+          useRecntMgr = reconnectMgr;
       });
     },
     play: () => __async(void 0, null, function* () {
@@ -17128,7 +17131,35 @@ var PlaybackBar = class extends Plugin {
     this.svgFullscreen = core_default.dom.createByJsx(/* @__PURE__ */ jsx_default.h("svg", { onclick: () => {
       this.dispatch("fullscreen");
     }, style: "margin-left: 30px; cursor: pointer", xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 24 24" }, /* @__PURE__ */ jsx_default.h("path", { fill: "white", d: "M4 4h6v2H6v4H4zm10 0h6v6h-2V6h-4zM6 14v4h4v2H4v-6zm14 0v6h-6v-2h4v-4z" })));
-    this.svgOptions = core_default.dom.createByJsx(/* @__PURE__ */ jsx_default.h("svg", { style: "margin-left: 30px", xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 24 24" }, /* @__PURE__ */ jsx_default.h("path", { fill: "white", d: "M10 12a2 2 0 1 0 4 0a2 2 0 0 0-4 0m0-6a2 2 0 1 0 4 0a2 2 0 0 0-4 0m0 12a2 2 0 1 0 4 0a2 2 0 0 0-4 0" })));
+    this.optionsValues = ["2.0", "1.5", "1.25", "1.0", "0.75", "0.50"];
+    this.currenSpeed = 1;
+    this.optionsContent = core_default.dom.createByJsx(
+      /* @__PURE__ */ jsx_default.h("div", { className: "optionsContent", onclick: (e) => {
+        e.stopPropagation();
+      } }, this.optionsValues.map((item) => {
+        return /* @__PURE__ */ jsx_default.h(jsx_default.Fragment, null, /* @__PURE__ */ jsx_default.h("div", { className: "options-item", "data-selected": this.currenSpeed == Number(item) ? "true" : void 0, onclick: (e) => {
+          var _a;
+          const divEle = e.target;
+          (_a = divEle.parentNode) == null ? void 0 : _a.childNodes.forEach((div2) => {
+            if (div2.dataset["selected"]) {
+              delete div2.dataset["selected"];
+            }
+          });
+          divEle.dataset["selected"] = true;
+          if (this.currenSpeed = Number(item)) {
+            this.currenSpeed = Number(item);
+            this.onOptionChange(this.currenSpeed);
+          }
+        } }, " ", item, "x"));
+      }))
+    );
+    this.globalClickTemp = () => {
+    };
+    this.svgOptions = core_default.dom.createByJsx(/* @__PURE__ */ jsx_default.h("svg", { style: "margin-left: 30px; cursor: pointer", xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 24 24" }, /* @__PURE__ */ jsx_default.h("path", { fill: "white", d: "M10 12a2 2 0 1 0 4 0a2 2 0 0 0-4 0m0-6a2 2 0 1 0 4 0a2 2 0 0 0-4 0m0 12a2 2 0 1 0 4 0a2 2 0 0 0-4 0" })));
+    this.playSpeed = core_default.dom.createByJsx(/* @__PURE__ */ jsx_default.h(jsx_default.Fragment, null, /* @__PURE__ */ jsx_default.h("span", { onclick: (e) => {
+      this.toggleOptionsContent();
+      e.stopPropagation();
+    }, style: "vertical-align: bottom;margin-top: 10px;line-height: 30px; margin-right: 10px; margin-left: 30px; cursor: pointer; user-select: none; font-size: 12px" }, t("bei-su"))));
     this.svgDownload = core_default.dom.createByJsx(/* @__PURE__ */ jsx_default.h("span", { onclick: () => {
       this.dispatch("download");
     }, style: "transition: opacity 0.5s; display: inline-block; height: 24px; width: 24px; padding-left: 4px; position: absolute; top: 50%; background-color: black;border-radius: 8px; right: 0px; padding-top: 2px; cursor: pointer;" }, /* @__PURE__ */ jsx_default.h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 1024 1024" }, /* @__PURE__ */ jsx_default.h("path", { fill: "white", d: "M160 832h704a32 32 0 1 1 0 64H160a32 32 0 1 1 0-64m384-253.696l236.288-236.352l45.248 45.248L508.8 704L192 387.2l45.248-45.248L480 584.704V128h64z" }))));
@@ -17246,6 +17277,27 @@ var PlaybackBar = class extends Plugin {
     }
     this.dispatch("changeVolume", { volume: this.volumeCurrent });
   }
+  onOptionChange(speed) {
+    this.dispatch("playSpeedChange", { speed });
+  }
+  globalClick() {
+    window.removeEventListener("click", this.globalClickTemp);
+    this.toggleOptionsContent(true);
+  }
+  toggleOptionsContent(isHide) {
+    const ele = this.optionsContent;
+    if (isHide) {
+      ele.style.display = "none";
+    } else {
+      if (ele.style.display == "block") {
+        ele.style.display = "none";
+      } else {
+        ele.style.display = "block";
+        this.globalClickTemp = this.globalClick.bind(this);
+        window.addEventListener("click", this.globalClickTemp);
+      }
+    }
+  }
   isPlaying() {
     var _a;
     return !!((_a = this.svgPause) == null ? void 0 : _a.parentNode);
@@ -17306,7 +17358,7 @@ var PlaybackBar = class extends Plugin {
     const rightPanel = this.controls.rightControls ? this.controls.rightControls : (() => {
       this.controls.rightControls = core_default.dom.createByJsx(/* @__PURE__ */ jsx_default.h("span", { class: "right-options" }));
       core_default.dom.append(this.svgSound, this.svgSound100);
-      core_default.dom.append(this.controls.rightControls, this.svgSound, this.svgFullscreen, this.svgOptions);
+      core_default.dom.append(this.controls.rightControls, this.svgSound, this.playSpeed, this.svgFullscreen, this.svgOptions, this.optionsContent);
       return this.controls.rightControls;
     })();
     const barContent = this.controls.barContent ? this.controls.barContent : this.controls.barContent = core_default.dom.createByJsx(
@@ -17459,6 +17511,9 @@ var MarkerHandle = class extends Plugin {
   }
   init(_container, layoutInfo) {
     if (this.createParams.displayMode == "playback") {
+      if (_container) {
+        this.playArea = _container;
+      }
       return _container;
     }
     if (layoutInfo) {
@@ -17840,6 +17895,11 @@ var PlayBack = (props) => {
               videoEle.currentTime = params == null ? void 0 : params.targetSeconds;
             }
           };
+          barHandle.addEventListener("playSpeedChange", (params) => {
+            if (params) {
+              videoEle.playbackRate = params.speed;
+            }
+          });
           handle2.close = () => {
             videoEle.src = "";
             markerHandle.destroy();
@@ -17911,6 +17971,18 @@ var PlayBack = (props) => {
             hplayer.setVolume(data.volume / 100);
           }
         });
+        barHandle.addEventListener("playSpeedChange", (params) => __async(this, null, function* () {
+          if (params && playbackInfo.data) {
+            const isPlaying = barHandle.isPlaying();
+            const data = yield hplayer == null ? void 0 : hplayer.getPlayerStatistic();
+            const ptsVideo = Number(data.data.mediaStatisticInfo.videoStatistic.lastvideopts) / 1e6;
+            yield playbackController.seek({ scale: params.speed, range: [Number(ptsVideo.toFixed(4)), playbackInfo.data.range[1]] });
+            yield hplayer == null ? void 0 : hplayer.playbackStart(params.speed);
+            if (!isPlaying) {
+              yield hplayer == null ? void 0 : hplayer.playbackStop();
+            }
+          }
+        }));
         if (playbackInfo.data) {
           barHandle.updata({
             total: playbackInfo.data.range[1],

package/dist/types/plugins/palybackBar.d.ts

@@ -11,6 +11,9 @@ interface IPlaybackBarEventMap extends IPluginEventMap {
         volume: number;
     };
     download: {};
+    playSpeedChange: {
+        speed: number;
+    };
 }
 declare class PlaybackBar extends Plugin<HTMLDivElement, IPlaybackBarEventMap> {
     private content;
@@ -44,9 +47,17 @@ declare class PlaybackBar extends Plugin<HTMLDivElement, IPlaybackBarEventMap> {
     private svgSound100;
     private svgSound;
     private svgFullscreen;
+    private optionsValues;
+    private currenSpeed;
+    private optionsContent;
+    private onOptionChange;
+    private globalClick;
+    private globalClickTemp;
+    private toggleOptionsContent;
     private svgOptions;
+    private playSpeed;
     private svgDownload;
-    private isPlaying;
+    isPlaying(): boolean;
     private controls;
     private display;
     getPlaySlice(): [number, number];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@besovideo/webrtc-player",
-  "version": "0.8.80",
+  "version": "0.8.82",
   "description": "@besovideo/webrtc-player desc",
   "type": "module",
   "types": "./dist/types/main.d.ts",