ranui 0.1.9 → 0.1.10-alpha.2

package/dist/{index-e2e5d725.js → index-ByBbFhvo.js}

@@ -4,8 +4,9 @@ var __publicField = (obj, key, value) => {
   __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
   return value;
 };
-import { c as createDocumentFragment, S as SyncHook, r as removeClassToElement, a as addClassToElement, d as timeFormat, e as range, b as generateThrottle } from "./index-7913ec46.js";
-import "./index-1b73beee.js";
+import { b as createDocumentFragment, S as SyncHook, r as removeClassToElement, a as addClassToElement, t as timeFormat, e as range, d as generateThrottle } from "./utils-74Icp-PI.js";
+import "./index-DsIUhdNt.js";
+import { H as HTMLElementSSR } from "./index-CSnBqUsQ.js";
 !function t(e) {
   var r, i;
   r = this, i = function() {
@@ -123,7 +124,7 @@ import "./index-1b73beee.js";
           var r4 = Object.prototype.toString.call(t3).slice(8, -1);
           return "Object" === r4 && t3.constructor && (r4 = t3.constructor.name), "Map" === r4 || "Set" === r4 ? Array.from(t3) : "Arguments" === r4 || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r4) ? g(t3, e3) : void 0;
         }
-      }(t2)) || e2 && t2 && "number" == typeof t2.length) {
+      }(t2)) || e2) {
         r3 && (t2 = r3);
         var i3 = 0;
         return function() {
@@ -801,27 +802,18 @@ import "./index-1b73beee.js";
       if (16 !== t2.byteLength)
         throw new RangeError("Invalid system id");
       var i3, n2, a2;
-      if (e2) {
-        i3 = 1, n2 = new Uint8Array(16 * e2.length);
-        for (var s2 = 0; s2 < e2.length; s2++) {
-          var o2 = e2[s2];
-          if (16 !== o2.byteLength)
-            throw new RangeError("Invalid key");
-          n2.set(o2, 16 * s2);
-        }
-      } else
-        i3 = 0, n2 = new Uint8Array();
+      i3 = 0, n2 = new Uint8Array();
       i3 > 0 ? (a2 = new Uint8Array(4), e2.length > 0 && new DataView(a2.buffer).setUint32(0, e2.length, false)) : a2 = new Uint8Array();
       var l2 = new Uint8Array(4);
       return r3 && r3.byteLength > 0 && new DataView(l2.buffer).setUint32(0, r3.byteLength, false), function(t3) {
         for (var e3 = arguments.length, r4 = new Array(e3 > 1 ? e3 - 1 : 0), i4 = 1; i4 < e3; i4++)
           r4[i4 - 1] = arguments[i4];
-        for (var n3 = r4.length, a3 = 8, s3 = n3; s3--; )
-          a3 += r4[s3].byteLength;
-        var o3 = new Uint8Array(a3);
-        for (o3[0] = a3 >> 24 & 255, o3[1] = a3 >> 16 & 255, o3[2] = a3 >> 8 & 255, o3[3] = 255 & a3, o3.set(t3, 4), s3 = 0, a3 = 8; s3 < n3; s3++)
-          o3.set(r4[s3], a3), a3 += r4[s3].byteLength;
-        return o3;
+        for (var n3 = r4.length, a3 = 8, s2 = n3; s2--; )
+          a3 += r4[s2].byteLength;
+        var o2 = new Uint8Array(a3);
+        for (o2[0] = a3 >> 24 & 255, o2[1] = a3 >> 16 & 255, o2[2] = a3 >> 8 & 255, o2[3] = 255 & a3, o2.set(t3, 4), s2 = 0, a3 = 8; s2 < n3; s2++)
+          o2.set(r4[s2], a3), a3 += r4[s2].byteLength;
+        return o2;
       }([112, 115, 115, 104], new Uint8Array([i3, 0, 0, 0]), t2, a2, n2, l2, r3 || new Uint8Array());
     }
     var Bt = {}, Gt = function() {
@@ -4431,7 +4423,7 @@ import "./index-1b73beee.js";
       return i3 ? Math.round(n2) : n2;
     }
     function Bi(t2, e2) {
-      return void 0 === e2 && (e2 = false), Ui(t2, 1e3, 1 / 9e4, e2);
+      return Ui(t2, 1e3, 1 / 9e4, e2);
     }
     Ni.types = void 0, Ni.HDLR_TYPES = void 0, Ni.STTS = void 0, Ni.STSC = void 0, Ni.STCO = void 0, Ni.STSZ = void 0, Ni.VMHD = void 0, Ni.SMHD = void 0, Ni.STSD = void 0, Ni.FTYP = void 0, Ni.DINF = void 0;
     var Gi = null, Ki = null, Hi = function() {
@@ -9312,18 +9304,18 @@ import "./index-1b73beee.js";
     return Xa.defaultConfig = void 0, Xa;
   }, "object" == typeof exports && "undefined" != typeof module ? module.exports = i() : "function" == typeof define && define.amd ? define(i) : (r = "undefined" != typeof globalThis ? globalThis : r || self).Hls = i();
 }(false);
-const index$2 = "";
 const PLAY_STATE_LIST = ["play", "playing", "timeupdate"];
 const throttle = generateThrottle();
 const SPEED = [
   { label: "2.0X", value: 2 },
   { label: "1.5X", value: 1.5 },
   { label: "1.0X", value: 1 },
+  { label: "0.8X", value: 0.8 },
   { label: "0.5X", value: 0.5 }
 ];
-class RanPlayer extends HTMLElement {
+class RanPlayer extends HTMLElementSSR() {
   /**
-   * @description: 初始化view和video的全局上下文
+   * @description: 初始化 view 和 video 的全局上下文
    * @return {*}
    */
   constructor() {
@@ -9425,6 +9417,7 @@ class RanPlayer extends HTMLElement {
         }
         this.ctx.url = url;
         this.createClaritySelect();
+        this.change("hlsManifestLoaded", { data });
       }
     });
     /**
@@ -9434,6 +9427,7 @@ class RanPlayer extends HTMLElement {
     __publicField(this, "updatePlayer", () => {
       var _a;
       const { Hls } = window;
+      this.innerHTML = "";
       if (!this.contains(this._player))
         this.appendChild(this._player);
       if (this._hls) {
@@ -9450,25 +9444,36 @@ class RanPlayer extends HTMLElement {
       this._video.setAttribute("controls", "false");
       this._video.controls = false;
       this._video.setAttribute("initial-time", "0.01");
-      if ((Hls == null ? void 0 : Hls.isSupported()) && this.src) {
-        this._hls = new Hls();
-        if (this._hls) {
-          this._hls.off(Hls.Events.MANIFEST_LOADED, this.manifestLoaded);
-          this._hls.on(Hls.Events.MANIFEST_LOADED, this.manifestLoaded);
-          this._hls.loadSource(this.src);
-          this._hls.attachMedia(this._video);
-        }
-        this._container.appendChild(this._video);
-        (_a = this._video.parentElement) == null ? void 0 : _a.setAttribute(
-          "class",
-          "ran-player-contain"
-        );
+      try {
+        if (this._video.canPlayType("application/vnd.apple.mpegurl") && this.src) {
+          this._video.src = this.src;
+        } else if ((Hls == null ? void 0 : Hls.isSupported()) && this.src) {
+          this._hls = new Hls();
+          if (this._hls) {
+            this._hls.off(Hls.Events.MANIFEST_LOADED, this.manifestLoaded);
+            this._hls.on(Hls.Events.MANIFEST_LOADED, this.manifestLoaded);
+            this._hls.off(Hls.Events.ERROR, this.hlsError);
+            this._hls.on(Hls.Events.ERROR, this.hlsError);
+            this._hls.loadSource(this.src);
+            this._hls.attachMedia(this._video);
+          }
+          this._container.appendChild(this._video);
+          (_a = this._video.parentElement) == null ? void 0 : _a.setAttribute("class", "ran-player-contain");
+        }
+        this.listenEvent();
+      } catch (error) {
+      }
+    });
+    __publicField(this, "hlsError", (event, data) => {
+      this.change("hlsError", { event, data });
+      if (this._video) {
+        this._video.src = this.src;
       }
-      this.listenEvent();
     });
     __publicField(this, "change", (name, value) => {
       const currentTime = this.getCurrentTime();
       const duration = this.getTotalTime();
+      this.debug && console.log(name, value);
       this.dispatchEvent(
         new CustomEvent("change", {
           detail: {
@@ -9483,14 +9488,8 @@ class RanPlayer extends HTMLElement {
     });
     __publicField(this, "onCanplay", (e) => {
       this.ctx.currentState = e.type;
-      removeClassToElement(
-        this._playerControllerBottomPlayBtn,
-        "ran-player-controller-bottom-left-btn-pause"
-      );
-      addClassToElement(
-        this._playerControllerBottomPlayBtn,
-        "ran-player-controller-bottom-left-btn-play"
-      );
+      removeClassToElement(this._playerControllerBottomPlayBtn, "ran-player-controller-bottom-left-btn-pause");
+      addClassToElement(this._playerControllerBottomPlayBtn, "ran-player-controller-bottom-left-btn-play");
       this.change("canplay", e);
       this.resize();
     });
@@ -9556,9 +9555,7 @@ class RanPlayer extends HTMLElement {
       this.ctx.duration = duration;
       this._playerControllerBottomTimeCurrent.innerText = "00:00";
       this._playerControllerBottomTimeDivide.innerText = "/";
-      this._playerControllerBottomTimeDuration.innerText = timeFormat(
-        this.ctx.duration
-      );
+      this._playerControllerBottomTimeDuration.innerText = timeFormat(this.ctx.duration);
       this.change("loadeddata", e);
     });
     __publicField(this, "onTimeupdate", (e) => {
@@ -9576,28 +9573,16 @@ class RanPlayer extends HTMLElement {
     __publicField(this, "onPlay", (e) => {
       this.ctx.currentState = e.type;
       this.requestAnimationFrame(this.updateCurrentProgress);
-      removeClassToElement(
-        this._playerControllerBottomPlayBtn,
-        "ran-player-controller-bottom-left-btn-play"
-      );
-      addClassToElement(
-        this._playerControllerBottomPlayBtn,
-        "ran-player-controller-bottom-left-btn-pause"
-      );
+      removeClassToElement(this._playerControllerBottomPlayBtn, "ran-player-controller-bottom-left-btn-play");
+      addClassToElement(this._playerControllerBottomPlayBtn, "ran-player-controller-bottom-left-btn-pause");
       this.showControllerBar();
       this.change("play", e);
     });
     __publicField(this, "onPlaying", (e) => {
       this.ctx.currentState = e.type;
       this._playerBtn.style.setProperty("display", "none");
-      removeClassToElement(
-        this._playerControllerBottomPlayBtn,
-        "ran-player-controller-bottom-left-btn-play"
-      );
-      addClassToElement(
-        this._playerControllerBottomPlayBtn,
-        "ran-player-controller-bottom-left-btn-pause"
-      );
+      removeClassToElement(this._playerControllerBottomPlayBtn, "ran-player-controller-bottom-left-btn-play");
+      addClassToElement(this._playerControllerBottomPlayBtn, "ran-player-controller-bottom-left-btn-pause");
       this.requestAnimationFrame(this.updateCurrentProgress);
       this.showControllerBar();
       this.change("playing", e);
@@ -9606,14 +9591,8 @@ class RanPlayer extends HTMLElement {
       this.ctx.currentState = e.type;
       this._playerBtn.style.setProperty("display", "block");
       this.change("pause", e);
-      removeClassToElement(
-        this._playerControllerBottomPlayBtn,
-        "ran-player-controller-bottom-left-btn-pause"
-      );
-      addClassToElement(
-        this._playerControllerBottomPlayBtn,
-        "ran-player-controller-bottom-left-btn-play"
-      );
+      removeClassToElement(this._playerControllerBottomPlayBtn, "ran-player-controller-bottom-left-btn-pause");
+      addClassToElement(this._playerControllerBottomPlayBtn, "ran-player-controller-bottom-left-btn-play");
       this.cancelAnimationFrame();
       this._playerController.style.setProperty("opacity", "1");
       if (this.controllerBarTimeId) {
@@ -9625,23 +9604,14 @@ class RanPlayer extends HTMLElement {
       if (!this._video)
         return;
       this._video.removeEventListener("canplay", this.onCanplay);
-      this._video.removeEventListener(
-        "canplaythrough",
-        this.onCanplaythrough
-      );
+      this._video.removeEventListener("canplaythrough", this.onCanplaythrough);
       this._video.removeEventListener("complete", this.onComplete);
-      this._video.removeEventListener(
-        "durationchange",
-        this.onDurationchange
-      );
+      this._video.removeEventListener("durationchange", this.onDurationchange);
       this._video.removeEventListener("emptied", this.onEmptied);
       this._video.removeEventListener("ended", this.onEnded);
       this._video.removeEventListener("error", this.onError);
       this._video.removeEventListener("loadeddata", this.onLoadeddata);
-      this._video.removeEventListener(
-        "loadedmetadata",
-        this.onLoadedmetadata
-      );
+      this._video.removeEventListener("loadedmetadata", this.onLoadedmetadata);
       this._video.removeEventListener("loadstart", this.onLoadstart);
       this._video.removeEventListener("pause", this.onPause);
       this._video.removeEventListener("play", this.onPlay);
@@ -9752,14 +9722,8 @@ class RanPlayer extends HTMLElement {
       const rect = this._progress.getBoundingClientRect();
       const offsetX = e.clientX - rect.left - 9;
       const percentage = range(offsetX / this._progress.offsetWidth);
-      this._progressWrapValue.style.setProperty(
-        "transform",
-        `scaleX(${percentage})`
-      );
-      this._progressDot.style.setProperty(
-        "transform",
-        `translateX(${percentage * this._progress.offsetWidth}px)`
-      );
+      this._progressWrapValue.style.setProperty("transform", `scaleX(${percentage})`);
+      this._progressDot.style.setProperty("transform", `translateX(${percentage * this._progress.offsetWidth}px)`);
       this.moveProgress.percentage = Math.floor(percentage * 100) / 100;
     });
     /**
@@ -9811,10 +9775,7 @@ class RanPlayer extends HTMLElement {
       const currentTime = this.getCurrentTime();
       this.ctx.currentTime = currentTime;
       const { duration } = this.ctx;
-      this._progressWrapValue.style.setProperty(
-        "transform",
-        `scaleX(${currentTime / duration})`
-      );
+      this._progressWrapValue.style.setProperty("transform", `scaleX(${currentTime / duration})`);
       this._progressDot.style.setProperty(
         "transform",
         `translateX(${currentTime / duration * this._progress.offsetWidth}px)`
@@ -9871,7 +9832,7 @@ class RanPlayer extends HTMLElement {
       }
     });
     /**
-     * @description: 点击player-btn，触发的事件
+     * @description: 点击 player-btn，触发的事件
      * @param {*} void
      * @return {*}
      */
@@ -9925,24 +9886,14 @@ class RanPlayer extends HTMLElement {
       const rect = this._progress.getBoundingClientRect();
       const offsetX = e.clientX - rect.left;
       if (this._playerTipText.innerText) {
-        this._playerTip.style.setProperty(
-          "transform",
-          `translate(calc(${offsetX}px - 50%),-20px)`
-        );
+        this._playerTip.style.setProperty("transform", `translate(calc(${offsetX}px - 50%),-20px)`);
       } else {
-        this._playerTip.style.setProperty(
-          "transform",
-          `translateX(calc(${offsetX}px - 50%))`
-        );
+        this._playerTip.style.setProperty("transform", `translateX(calc(${offsetX}px - 50%))`);
       }
-      this._playerTipTime.innerText = timeFormat(
-        offsetX / this._progress.clientWidth * this.ctx.duration
-      );
+      this._playerTipTime.innerText = timeFormat(offsetX / this._progress.clientWidth * this.ctx.duration);
     });
     __publicField(this, "progressMouseLeave", (e) => {
-      if (e.target.classList.contains(
-        "ran-player-controller-progress-wrap-dot"
-      )) {
+      if (e.target.classList.contains("ran-player-controller-progress-wrap-dot")) {
         return;
       }
       this._playerTip.style.setProperty("opacity", "0");
@@ -9952,29 +9903,18 @@ class RanPlayer extends HTMLElement {
       this._playerTip.style.setProperty("opacity", "1");
       const offsetX = e.clientX - rect.left;
       if (this._playerTipText.innerText) {
-        this._playerTip.style.setProperty(
-          "transform",
-          `translate(calc(${offsetX}px - 50%),-20px)`
-        );
+        this._playerTip.style.setProperty("transform", `translate(calc(${offsetX}px - 50%),-20px)`);
       } else {
-        this._playerTip.style.setProperty(
-          "transform",
-          `translateX(calc(${offsetX}px - 50%))`
-        );
+        this._playerTip.style.setProperty("transform", `translateX(calc(${offsetX}px - 50%))`);
       }
-      this._playerTipTime.innerText = timeFormat(
-        offsetX / this._progress.clientWidth * this.ctx.duration
-      );
+      this._playerTipTime.innerText = timeFormat(offsetX / this._progress.clientWidth * this.ctx.duration);
     });
     __publicField(this, "changePlayerVolume", () => {
       if (!this._video)
         return;
       const { volume } = this.ctx;
       if (volume > 0) {
-        addClassToElement(
-          this._playControllerBottomSpeedIcon,
-          "ran-player-controller-bottom-right-volume-icon-mute"
-        );
+        addClassToElement(this._playControllerBottomSpeedIcon, "ran-player-controller-bottom-right-volume-icon-mute");
         removeClassToElement(
           this._playControllerBottomSpeedIcon,
           "ran-player-controller-bottom-right-volume-icon-volume"
@@ -9983,18 +9923,9 @@ class RanPlayer extends HTMLElement {
         this.setVolume(0);
         this.change("volume", 0);
       } else {
-        addClassToElement(
-          this._playControllerBottomSpeedIcon,
-          "ran-player-controller-bottom-right-volume-icon-volume"
-        );
-        removeClassToElement(
-          this._playControllerBottomSpeedIcon,
-          "ran-player-controller-bottom-right-volume-icon-mute"
-        );
-        this._playControllerBottomVolumeProgress.setAttribute(
-          "percent",
-          `${this._volume || 0.5}`
-        );
+        addClassToElement(this._playControllerBottomSpeedIcon, "ran-player-controller-bottom-right-volume-icon-volume");
+        removeClassToElement(this._playControllerBottomSpeedIcon, "ran-player-controller-bottom-right-volume-icon-mute");
+        this._playControllerBottomVolumeProgress.setAttribute("percent", `${this._volume || 0.5}`);
         this.setVolume(0.5);
         this.change("volume", this._volume || 0.5);
       }
@@ -10005,15 +9936,9 @@ class RanPlayer extends HTMLElement {
         this._video.style.setProperty("width", `${width}px`);
         this._video.style.setProperty("height", `${height}px`);
         if (document.body.clientWidth < 500) {
-          this._playControllerBottomVolume.style.setProperty(
-            "display",
-            "none"
-          );
+          this._playControllerBottomVolume.style.setProperty("display", "none");
         } else {
-          this._playControllerBottomVolume.style.setProperty(
-            "display",
-            "flex"
-          );
+          this._playControllerBottomVolume.style.setProperty("display", "flex");
         }
       }
       this.updateCurrentProgress();
@@ -10087,6 +10012,7 @@ class RanPlayer extends HTMLElement {
         this._video.pause();
       }
     });
+    this.innerHTML = "";
     this._player = document.createElement("div");
     this._container = document.createElement("div");
     this._slot = document.createElement("slot");
@@ -10099,82 +10025,34 @@ class RanPlayer extends HTMLElement {
     this._playerControllerBottomRight = document.createElement("div");
     this._playerControllerBottomLeft = document.createElement("div");
     this._player.setAttribute("class", "ran-player");
-    this._player.setAttribute(
-      "id",
-      "ran-player" + `${performance.now()}`.replace(".", "")
-    );
+    this._player.setAttribute("id", "ran-player" + `${performance.now()}`.replace(".", ""));
     this._playerBtn.setAttribute("class", "ran-player-play-btn");
     this._progress.setAttribute("class", "ran-player-controller-progress");
-    this._progressWrap.setAttribute(
-      "class",
-      "ran-player-controller-progress-wrap"
-    );
-    this._progressWrapValue.setAttribute(
-      "class",
-      "ran-player-controller-progress-wrap-value"
-    );
-    this._progressDot.setAttribute(
-      "class",
-      "ran-player-controller-progress-dot"
-    );
-    this._playerControllerBottom.setAttribute(
-      "class",
-      "ran-player-controller-bottom"
-    );
-    this._playerControllerBottomRight.setAttribute(
-      "class",
-      "ran-player-controller-bottom-right"
-    );
-    this._playerControllerBottomLeft.setAttribute(
-      "class",
-      "ran-player-controller-bottom-left"
-    );
+    this._progressWrap.setAttribute("class", "ran-player-controller-progress-wrap");
+    this._progressWrapValue.setAttribute("class", "ran-player-controller-progress-wrap-value");
+    this._progressDot.setAttribute("class", "ran-player-controller-progress-dot");
+    this._playerControllerBottom.setAttribute("class", "ran-player-controller-bottom");
+    this._playerControllerBottomRight.setAttribute("class", "ran-player-controller-bottom-right");
+    this._playerControllerBottomLeft.setAttribute("class", "ran-player-controller-bottom-left");
     this._playerControllerBottomPlayBtn = document.createElement("div");
-    this._playerControllerBottomPlayBtn.setAttribute(
-      "class",
-      "ran-player-controller-bottom-left-btn"
-    );
+    this._playerControllerBottomPlayBtn.setAttribute("class", "ran-player-controller-bottom-left-btn");
     this._playerControllerBottomTimeCurrent = document.createElement("div");
-    this._playerControllerBottomTimeCurrent.setAttribute(
-      "class",
-      "ran-player-controller-bottom-left-time-current"
-    );
+    this._playerControllerBottomTimeCurrent.setAttribute("class", "ran-player-controller-bottom-left-time-current");
     this._playerControllerBottomTimeDivide = document.createElement("div");
-    this._playerControllerBottomTimeDivide.setAttribute(
-      "class",
-      "ran-player-controller-bottom-left-time-divide"
-    );
+    this._playerControllerBottomTimeDivide.setAttribute("class", "ran-player-controller-bottom-left-time-divide");
     this._playerControllerBottomTimeDuration = document.createElement("div");
-    this._playerControllerBottomTimeDuration.setAttribute(
-      "class",
-      "ran-player-controller-bottom-left-time-duration"
-    );
+    this._playerControllerBottomTimeDuration.setAttribute("class", "ran-player-controller-bottom-left-time-duration");
     this._playControllerBottomSpeed = document.createElement("div");
-    this._playControllerBottomSpeed.setAttribute(
-      "class",
-      "ran-player-controller-bottom-right-speed"
-    );
+    this._playControllerBottomSpeed.setAttribute("class", "ran-player-controller-bottom-right-speed");
     this._playControllerBottomSpeedPopover = document.createElement("r-select");
     this._playControllerBottomSpeedPopover.setAttribute("value", "1");
-    this._playControllerBottomSpeedPopover.setAttribute(
-      "action",
-      "hover,click"
-    );
+    this._playControllerBottomSpeedPopover.setAttribute("action", "hover,click");
     this._playControllerBottomSpeedPopover.setAttribute("type", "text");
     this._playControllerBottomSpeedPopover.setAttribute("placement", "top");
     const id = this._player.getAttribute("id");
-    id && this._playControllerBottomSpeedPopover.setAttribute(
-      "getPopupContainerId",
-      id
-    );
-    this._playControllerBottomSpeedPopover.setAttribute(
-      "dropdownclass",
-      "video-speed-dropdown"
-    );
-    this._playControllerBottomSpeedPopover.addEventListener(
-      "change",
-      this.changeSpeed
-    );
+    id && this._playControllerBottomSpeedPopover.setAttribute("getPopupContainerId", id);
+    this._playControllerBottomSpeedPopover.setAttribute("dropdownclass", "video-speed-dropdown");
+    this._playControllerBottomSpeedPopover.addEventListener("change", this.changeSpeed);
     const Fragment = document.createDocumentFragment();
     SPEED.forEach((item) => {
       const { label, value } = item;
@@ -10184,14 +10062,9 @@ class RanPlayer extends HTMLElement {
       Fragment.appendChild(option);
     });
     this._playControllerBottomSpeedPopover.appendChild(Fragment);
-    this._playControllerBottomSpeed.appendChild(
-      this._playControllerBottomSpeedPopover
-    );
+    this._playControllerBottomSpeed.appendChild(this._playControllerBottomSpeedPopover);
     this._playControllerBottomVolume = document.createElement("div");
-    this._playControllerBottomVolume.setAttribute(
-      "class",
-      "ran-player-controller-bottom-right-volume"
-    );
+    this._playControllerBottomVolume.setAttribute("class", "ran-player-controller-bottom-right-volume");
     this._playControllerBottomVolumeProgress = document.createElement("r-progress");
     this._playControllerBottomVolumeProgress.setAttribute(
       "class",
@@ -10205,56 +10078,28 @@ class RanPlayer extends HTMLElement {
       "ran-player-controller-bottom-right-volume-icon ran-player-controller-bottom-right-volume-icon-volume"
     );
     this._playControllerBottomClarity = document.createElement("div");
-    this._playControllerBottomClarity.setAttribute(
-      "class",
-      "ran-player-controller-bottom-right-clarity"
-    );
+    this._playControllerBottomClarity.setAttribute("class", "ran-player-controller-bottom-right-clarity");
     this._playControllerBottomRightFullScreen = document.createElement("div");
-    this._playControllerBottomRightFullScreen.setAttribute(
-      "class",
-      "ran-player-controller-bottom-right-full"
-    );
+    this._playControllerBottomRightFullScreen.setAttribute("class", "ran-player-controller-bottom-right-full");
     this._playerController = document.createElement("div");
     this._playerController.setAttribute("class", "ran-player-controller");
     this._playerTip = document.createElement("div");
     this._playerTip.setAttribute("class", "ran-player-controller-tip");
     this._playerTipTime = document.createElement("div");
-    this._playerTipTime.setAttribute(
-      "class",
-      "ran-player-controller-tip-time"
-    );
+    this._playerTipTime.setAttribute("class", "ran-player-controller-tip-time");
     this._playerTipText = document.createElement("div");
-    this._playerTipText.setAttribute(
-      "class",
-      "ran-player-controller-tip-text"
-    );
-    this._playerTip.appendChild(
-      createDocumentFragment([this._playerTipTime, this._playerTipText])
-    );
+    this._playerTipText.setAttribute("class", "ran-player-controller-tip-text");
+    this._playerTip.appendChild(createDocumentFragment([this._playerTipTime, this._playerTipText]));
     this._playerController.appendChild(
-      createDocumentFragment([
-        this._playerTip,
-        this._progress,
-        this._playerControllerBottom
-      ])
+      createDocumentFragment([this._playerTip, this._progress, this._playerControllerBottom])
     );
     this._player.appendChild(
-      createDocumentFragment([
-        this._container,
-        this._slot,
-        this._playerBtn,
-        this._playerController
-      ])
+      createDocumentFragment([this._container, this._slot, this._playerBtn, this._playerController])
     );
     this._progressWrap.appendChild(this._progressWrapValue);
-    this._progress.appendChild(
-      createDocumentFragment([this._progressWrap, this._progressDot])
-    );
+    this._progress.appendChild(createDocumentFragment([this._progressWrap, this._progressDot]));
     this._playerControllerBottom.appendChild(
-      createDocumentFragment([
-        this._playerControllerBottomLeft,
-        this._playerControllerBottomRight
-      ])
+      createDocumentFragment([this._playerControllerBottomLeft, this._playerControllerBottomRight])
     );
     this._playerControllerBottomLeft.appendChild(
       createDocumentFragment([
@@ -10265,10 +10110,7 @@ class RanPlayer extends HTMLElement {
       ])
     );
     this._playControllerBottomVolume.appendChild(
-      createDocumentFragment([
-        this._playControllerBottomSpeedIcon,
-        this._playControllerBottomVolumeProgress
-      ])
+      createDocumentFragment([this._playControllerBottomSpeedIcon, this._playControllerBottomVolumeProgress])
     );
     this._playerControllerBottomRight.appendChild(
       createDocumentFragment([
@@ -10308,7 +10150,7 @@ class RanPlayer extends HTMLElement {
     };
   }
   static get observedAttributes() {
-    return ["src", "volume", "currentTime", "playbackRate"];
+    return ["src", "volume", "currentTime", "playbackRate", "debug"];
   }
   get src() {
     return this.getAttribute("src") || "";
@@ -10316,6 +10158,12 @@ class RanPlayer extends HTMLElement {
   set src(value) {
     this.setAttribute("src", value || "");
   }
+  get debug() {
+    return this.getAttribute("debug") || "";
+  }
+  set debug(value) {
+    this.setAttribute("debug", value || "");
+  }
   get volume() {
     return this.getAttribute("volume") || "";
   }
@@ -10335,87 +10183,39 @@ class RanPlayer extends HTMLElement {
     this.setAttribute("playbackRate", value || "");
   }
   connectedCallback() {
-    this._container.addEventListener(
-      "click",
-      this.dispatchClickPlayerContainerAction
-    );
-    this._playerBtn.addEventListener(
-      "click",
-      this.dispatchClickPlayerBtnAction
-    );
+    this._container.addEventListener("click", this.dispatchClickPlayerContainerAction);
+    this._playerBtn.addEventListener("click", this.dispatchClickPlayerBtnAction);
     this.addEventListener("keydown", this.SpaceKeyDown);
-    this._progressDot.addEventListener(
-      "mousedown",
-      this.progressDotMouseDown
-    );
-    this._playerControllerBottomPlayBtn.addEventListener(
-      "click",
-      this.dispatchClickPlayerBtnAction
-    );
+    this._progressDot.addEventListener("mousedown", this.progressDotMouseDown);
+    this._playerControllerBottomPlayBtn.addEventListener("click", this.dispatchClickPlayerBtnAction);
     this._progress.addEventListener("click", this.progressClick);
     this._progress.addEventListener("mouseenter", this.progressMouseEnter);
     this._progress.addEventListener("mousemove", this.progressMouseMove);
     this._progress.addEventListener("mouseleave", this.progressMouseLeave);
     this._player.addEventListener("mousemove", this.progressDotMouseMove);
     this._player.addEventListener("mouseup", this.progressDotMouseUp);
-    this._playControllerBottomVolumeProgress.addEventListener(
-      "change",
-      this.changeVolumeProgress
-    );
-    this._playControllerBottomRightFullScreen.addEventListener(
-      "click",
-      this.openFullScreen
-    );
-    this._playControllerBottomSpeedIcon.addEventListener(
-      "click",
-      this.changePlayerVolume
-    );
+    this._playControllerBottomVolumeProgress.addEventListener("change", this.changeVolumeProgress);
+    this._playControllerBottomRightFullScreen.addEventListener("click", this.openFullScreen);
+    this._playControllerBottomSpeedIcon.addEventListener("click", this.changePlayerVolume);
     document.addEventListener("fullscreenchange", this.fullScreenChange);
     window.addEventListener("resize", this.resize);
     this.updatePlayer();
   }
   disconnectCallback() {
-    this._container.removeEventListener(
-      "click",
-      this.dispatchClickPlayerContainerAction
-    );
-    this._playerBtn.removeEventListener(
-      "click",
-      this.dispatchClickPlayerBtnAction
-    );
-    this._playerControllerBottomPlayBtn.removeEventListener(
-      "click",
-      this.dispatchClickPlayerBtnAction
-    );
+    this._container.removeEventListener("click", this.dispatchClickPlayerContainerAction);
+    this._playerBtn.removeEventListener("click", this.dispatchClickPlayerBtnAction);
+    this._playerControllerBottomPlayBtn.removeEventListener("click", this.dispatchClickPlayerBtnAction);
     this.cancelAnimationFrame();
     this.removeEventListener("keydown", this.SpaceKeyDown);
     this._progress.removeEventListener("click", this.progressClick);
-    this._progress.removeEventListener(
-      "mouseenter",
-      this.progressMouseEnter
-    );
+    this._progress.removeEventListener("mouseenter", this.progressMouseEnter);
     this._progress.removeEventListener("mousemove", this.progressMouseMove);
-    this._progress.removeEventListener(
-      "mouseleave",
-      this.progressMouseLeave
-    );
-    this._progressDot.removeEventListener(
-      "mousedown",
-      this.progressDotMouseDown
-    );
-    this._player.removeEventListener(
-      "mousemove",
-      this.progressDotMouseMove
-    );
+    this._progress.removeEventListener("mouseleave", this.progressMouseLeave);
+    this._progressDot.removeEventListener("mousedown", this.progressDotMouseDown);
+    this._player.removeEventListener("mousemove", this.progressDotMouseMove);
     this._player.removeEventListener("mouseup", this.progressDotMouseUp);
-    this._playControllerBottomVolumeProgress.removeEventListener(
-      "change",
-      this.changeVolumeProgress
-    );
-    this._playControllerBottomRightFullScreen.removeEventListener(
-      "click",
-      this.openFullScreen
-    );
+    this._playControllerBottomVolumeProgress.removeEventListener("change", this.changeVolumeProgress);
+    this._playControllerBottomRightFullScreen.removeEventListener("click", this.openFullScreen);
     window.removeEventListener("resize", this.resize);
     document.removeEventListener("fullscreenchange", this.fullScreenChange);
   }