tuikit-atomicx-vue3 3.4.1 → 4.3.0

package/dist/components/LiveView/PlayerControl/PlayerControl.js

@@ -0,0 +1,172 @@
+import ee from "./AudioControl.js";
+import { defineComponent as te, ref as d, onMounted as oe, onBeforeUnmount as ne, createBlock as C, openBlock as _, Transition as se, withCtx as le, withDirectives as re, createElementVNode as s, normalizeClass as ae, unref as o, createVNode as f, vShow as ce } from "vue";
+import { useUIKit as ue, IconPause as ie, IconPlay as de, IconPictureInPicture as ve, IconFullScreen as me, TUIToast as fe, TOAST_TYPE as he } from "@tencentcloud/uikit-base-component-vue3";
+import { usePlayerControlState as pe } from "./PlayerControlState.js";
+import Ce from "./MultiResolution.js";
+import { isSafariBrowser as _e, isFirefoxBrowser as ye } from "./utils/deviceDetection.js";
+import { waitForVideoMounted as Pe } from "./utils/domHelpers.js";
+import { isMobile as a } from "../../../utils/env.js";
+import { _ as Ee } from "../../../_plugin-vue_export-helper-CHgC5LLL.js";
+const Te = { class: "control-buttons" }, Le = ["title"], we = { class: "right-controls" }, ge = { class: "control-btn audio-control-btn" }, Me = ["title"], Ie = ["title"], be = 3e3, Se = /* @__PURE__ */ te({
+  __name: "PlayerControl",
+  props: {
+    isLandscapeStyleMode: { type: Boolean }
+  },
+  setup(I) {
+    const {
+      isPlaying: h,
+      isFullscreen: y,
+      isPictureInPicture: P,
+      currentVolume: p,
+      pause: b,
+      resume: S,
+      requestPictureInPicture: x,
+      exitPictureInPicture: A,
+      requestFullscreen: F,
+      exitFullscreen: V,
+      setVolume: v,
+      cleanup: k
+    } = pe(), R = I, { t: l } = ue(), B = d(!1), n = d(), r = d(!1), c = d(null), z = () => a ? !(_e() || ye()) : !0, D = () => {
+      h.value ? b() : S();
+    }, O = async () => {
+      await Pe() && await v(p.value);
+    }, N = async () => {
+      let e = !1;
+      P.value ? e = await A() : e = await x(), e || fe({
+        type: he.ERROR,
+        message: l("The system does not support picture-in-picture mode")
+      });
+    }, U = () => {
+      console.log("handleFullscreen"), y.value ? V() : F();
+    }, X = async (e) => {
+      p.value = e, a && m(), await v(e);
+    }, m = () => {
+      u(), c.value = window.setTimeout(() => {
+        r.value = !1, c.value = null;
+      }, be);
+    }, u = () => {
+      c.value && (clearTimeout(c.value), c.value = null);
+    }, E = () => {
+      u(), r.value = !0;
+    }, T = () => {
+      m();
+    }, Y = () => {
+      if (!a && n.value) {
+        const { parentElement: e } = n.value;
+        e && (e.addEventListener("mouseover", E), e.addEventListener("mouseout", T));
+      }
+    }, q = () => {
+      if (!a && n.value) {
+        const { parentElement: e } = n.value;
+        e && (e.removeEventListener("mouseover", E), e.removeEventListener("mouseout", T));
+      }
+    }, i = d(null), H = (e, t) => Math.sqrt(Math.pow(t.clientX - e.x, 2) + Math.pow(t.clientY - e.y, 2)), K = (e) => {
+      var t;
+      return ((t = n.value) == null ? void 0 : t.contains(e)) || !1;
+    }, j = (e) => {
+      const t = document.getElementById("live-core-view-container");
+      return (t == null ? void 0 : t.contains(e)) || !1;
+    }, G = () => {
+      u(), m();
+    }, J = () => {
+      r.value = !r.value, r.value && m();
+    }, L = (e) => {
+      if (e.touches.length === 1) {
+        const t = e.touches[0];
+        i.value = {
+          x: t.clientX,
+          y: t.clientY
+        };
+      }
+    }, w = (e) => {
+      if (n.value && n.value.contains(e.target)) {
+        u();
+        return;
+      }
+    }, g = (e) => {
+      if (!i.value)
+        return;
+      const t = e.changedTouches[0];
+      if (H(i.value, t) > 20) {
+        i.value = null;
+        return;
+      }
+      const M = e.target;
+      K(M) ? G() : j(M) ? J() : r.value = !1, i.value = null;
+    }, Q = () => {
+      a && (document.addEventListener("touchstart", L, !0), document.addEventListener("touchmove", w, !0), document.addEventListener("touchend", g, !0));
+    }, W = () => {
+      a && (document.removeEventListener("touchstart", L, !0), document.removeEventListener("touchmove", w, !0), document.removeEventListener("touchend", g, !0));
+    }, Z = async (e) => {
+      B.value = e, e ? await v(0) : await v(p.value);
+    }, $ = () => {
+      W(), q(), u();
+    };
+    return oe(() => {
+      Q(), Y();
+    }), ne(() => {
+      $(), k();
+    }), (e, t) => (_(), C(se, { name: "player-control" }, {
+      default: le(() => [
+        re(s("div", {
+          ref_key: "playerControlRef",
+          ref: n,
+          class: ae([
+            "playback-controls",
+            o(a) ? "mobile-mode" : "pc-mode",
+            { "mobile-landscape-mode": R.isLandscapeStyleMode }
+          ])
+        }, [
+          s("div", Te, [
+            s("span", {
+              class: "control-btn play-pause-btn",
+              title: o(h) ? o(l)("Pause") : o(l)("Play"),
+              onClick: D
+            }, [
+              o(h) ? (_(), C(o(ie), {
+                key: 0,
+                size: "20"
+              })) : (_(), C(o(de), {
+                key: 1,
+                size: "20"
+              }))
+            ], 8, Le),
+            t[0] || (t[0] = s("div", { class: "center-controls" }, null, -1)),
+            s("div", we, [
+              f(Ce, { onResolutionChange: O }),
+              s("span", ge, [
+                f(ee, {
+                  class: "audio-control-icon",
+                  "icon-size": 20,
+                  "enable-volume-control": z(),
+                  onVolumeChange: X,
+                  onMutedChange: Z
+                }, null, 8, ["enable-volume-control"])
+              ]),
+              s("span", {
+                class: "control-btn",
+                title: o(P) ? o(l)("Exit Picture in Picture") : o(l)("Picture in Picture"),
+                onClick: N
+              }, [
+                f(o(ve), { size: "20" })
+              ], 8, Me),
+              s("span", {
+                class: "control-btn fullscreen-btn",
+                title: o(y) ? o(l)("Exit Fullscreen") : o(l)("Fullscreen"),
+                onClick: U
+              }, [
+                f(o(me), { size: "20" })
+              ], 8, Ie)
+            ])
+          ])
+        ], 2), [
+          [ce, r.value]
+        ])
+      ]),
+      _: 1
+    }));
+  }
+}), Ue = /* @__PURE__ */ Ee(Se, [["__scopeId", "data-v-22a5ed9e"]]);
+export {
+  Ue as default
+};

package/dist/components/LiveView/PlayerControl/PlayerControlState.js

@@ -0,0 +1,263 @@
+import { ref as m, computed as q, watch as ae } from "vue";
+import { TUIVideoQuality as E, TRTCCloud as D } from "@tencentcloud/tuiroom-engine-js";
+import { useRoomEngine as le } from "../../../hooks/useRoomEngine.js";
+import { useLiveSeatState as oe } from "../../../states/LiveSeatState/index.js";
+import { getDeviceType as se, getCurrentOrientation as V, shouldRotateToLandscapeForFullscreen as ie, hadLandscapeRotationToUndo as re } from "./utils/deviceDetection.js";
+import { EventListenerManager as ce, DOMElementGetter as r } from "./utils/domHelpers.js";
+import { OrientationManager as R, StyleManager as F, FullscreenMode as I, FullscreenManager as _ } from "./utils/fullscreenManager.js";
+import { useLiveListState as ue } from "../../../states/LiveListState/LiveListState.js";
+var de = /* @__PURE__ */ ((o) => (o.CONTAIN = "contain", o.COVER = "cover", o.FILL = "fill", o))(de || {}), ve = ((o) => (o[o.R360P = E.kVideoQuality_360p] = "R360P", o[o.R540P = E.kVideoQuality_540p] = "R540P", o[o.R720P = E.kVideoQuality_720p] = "R720P", o[o.R1080P = E.kVideoQuality_1080p] = "R1080P", o))(ve || {});
+const s = m(!0), N = m(
+  "contain"
+  /* CONTAIN */
+), d = m(!1), L = m(!1), P = m(!1), g = m(1), z = m([]), p = m(), pe = "[LiveCoreView]ResolutionInitialized", h = le();
+function Pe() {
+  const { currentLive: o } = ue(), { canvas: f } = oe(), l = new ce(), k = `player-control-${Date.now()}`, v = q(
+    () => f.value ? f.value.width > f.value.height : !1
+  ), S = q(
+    () => f.value ? f.value.width < f.value.height : !1
+  ), c = se(), u = async (e, t, n) => {
+    try {
+      return await e();
+    } catch (a) {
+      return console.error(`${t} operation failed:`, a), n;
+    }
+  }, x = () => {
+    const e = r.getVideoElement();
+    if (e) {
+      const t = e.volume;
+      Math.abs(g.value - t) > 0.01 && (console.log(`Syncing volume state: ${g.value} -> ${t}`), g.value = t);
+    }
+  }, y = () => {
+    const e = r.getVideoElement();
+    if (e) {
+      const t = !e.paused && !e.ended;
+      s.value !== t && (console.log(`Syncing playing state: ${s.value} -> ${t}`), s.value = t);
+    }
+  }, b = async () => u(async () => {
+    const e = r.getVideoElement();
+    if (!e)
+      throw new Error("Video element not found");
+    return r.hasTcPlayerElement() ? await e.play() : D.subCloudMap.forEach((n) => {
+      const a = n == null ? void 0 : n._trtc;
+      a == null || a.callExperimentalAPI("resumeRemotePlayer", { userId: "*" });
+    }), s.value = !0, console.log("Video playback resumed"), !0;
+  }, "Resume playback", !1), Q = async () => u(async () => {
+    const e = r.getVideoElement();
+    if (!e)
+      throw new Error("Video element not found");
+    return r.hasTcPlayerElement() ? await e.pause() : D.subCloudMap.forEach((n) => {
+      const a = n == null ? void 0 : n._trtc;
+      a == null || a.callExperimentalAPI("pauseRemotePlayer", { userId: "*" });
+    }), s.value = !1, console.log("Video playback paused"), !0;
+  }, "Pause playback", !1), U = (e) => {
+    if (!d.value || !v.value)
+      return;
+    const t = r.getAllElements();
+    if (!t.view) {
+      console.warn("live-core-view element not found for orientation change handling");
+      return;
+    }
+    console.log("Handling orientation change:", {
+      newOrientation: e,
+      deviceType: c,
+      isLandscapeStream: v.value,
+      isFullscreen: d.value
+    }), F.smartApplyLandscapeStyles(t.view, e);
+  }, G = async () => u(async () => {
+    const e = r.getAllElements(), t = r.validateElements(e);
+    if (!t.isValid)
+      throw new Error(`Missing required DOM elements: ${t.missingElements.join(", ")}`);
+    const n = V(), a = ie(c, v.value);
+    console.log("Request fullscreen:", {
+      deviceType: c,
+      currentOrientation: n,
+      streamType: v.value ? "landscape stream" : S.value ? "portrait stream" : "unknown",
+      shouldRotate: a,
+      reason: a ? "Mobile device in portrait with landscape stream" : n === "landscape" ? "Already in landscape orientation" : v.value ? "Desktop device or other reason" : "Not a landscape stream"
+    });
+    const i = await _.requestFullscreen(
+      e.container,
+      e.view,
+      c,
+      S.value,
+      a
+    );
+    return i.success ? (d.value = !0, console.log(`Fullscreen request successful (${i.mode})`)) : console.error("Fullscreen request failed:", i.error), L.value = i.shouldRotateToLandscape, i;
+  }, "Request fullscreen", { success: !1, mode: I.CSS_SIMULATED, shouldRotateToLandscape: !1 }), M = async () => u(async () => {
+    const e = r.getAllElements();
+    if (!e.view)
+      throw new Error("live-core-view element not found");
+    const t = V(), n = re(c, v.value);
+    console.log("Exit fullscreen:", {
+      deviceType: c,
+      currentOrientation: t,
+      streamType: v.value ? "landscape stream" : S.value ? "portrait stream" : "unknown",
+      hadLandscapeRotation: n,
+      reason: n ? "Mobile device with landscape stream in landscape mode" : t === "portrait" ? "Already in portrait orientation" : v.value ? "Desktop device or other reason" : "Not a landscape stream"
+    });
+    const a = await _.exitFullscreen(
+      e.view,
+      c,
+      n
+    );
+    return a.mode === I.CSS_SIMULATED && (d.value = !1), a.success ? console.log(`Fullscreen exit successful (${a.mode})`) : console.error("Fullscreen exit failed:", a.error), L.value = !1, a;
+  }, "Exit fullscreen", { success: !1, mode: I.CSS_SIMULATED, shouldRotateToLandscape: !1 }), H = async () => u(async () => {
+    const e = r.getVideoElement();
+    if (!e)
+      throw new Error("Video element not found");
+    if (!e.requestPictureInPicture)
+      throw new Error("Picture-in-picture not supported in current environment");
+    return O(), await e.requestPictureInPicture(), console.log("Picture-in-picture request successful"), !0;
+  }, "Request picture-in-picture", !1), T = async () => u(async () => {
+    if (!document.exitPictureInPicture)
+      throw new Error("Exit picture-in-picture not supported in current environment");
+    return await document.exitPictureInPicture(), console.log("Picture-in-picture exit successful"), !0;
+  }, "Exit picture-in-picture", !1), C = async (e) => u(async () => {
+    if (!h.instance)
+      throw new Error("Room engine instance not available");
+    return await h.instance.callExperimentalAPI(
+      JSON.stringify({
+        api: "switchPlaybackQuality",
+        params: {
+          quality: e,
+          autoSwitch: !1
+        }
+      })
+    ), s.value || (s.value = !0), p.value = e, console.log(`Resolution switched to: ${e}`), !0;
+  }, "Switch resolution", !1), A = async (e) => u(async () => {
+    if (!h.instance)
+      throw new Error("Room engine instance not available");
+    const t = await h.instance.callExperimentalAPI(
+      JSON.stringify({
+        api: "queryPlaybackQualityList",
+        params: {
+          roomId: e
+        }
+      })
+    );
+    return console.log(`Retrieved resolution list for room ${e}:`, t), t || [];
+  }, "Get resolution list", []), J = async (e, t = !0) => {
+    try {
+      const n = `${pe}_${e}`, a = localStorage.getItem(n) === "true", i = await A(e);
+      if (z.value = i, i.length === 0) {
+        console.warn("No resolutions available for room:", e);
+        return;
+      }
+      (!p.value || !i.includes(p.value)) && (p.value = i[0]);
+      const w = t && !a && p.value !== void 0;
+      w && (await C(p.value), localStorage.setItem(n, "true")), console.log(`Resolution initialized for room ${e}:`, {
+        availableResolutions: i,
+        currentResolution: p.value,
+        applied: w,
+        hasInitialized: a
+      });
+    } catch (n) {
+      console.error("Failed to initialize resolution:", n);
+    }
+  }, j = async (e) => u(async () => {
+    var t;
+    if (e < 0 || e > 1)
+      throw new Error("Volume value must be between 0-1");
+    return await ((t = h.instance) == null ? void 0 : t.setAudioPlayoutVolume({ volume: e * 100 })), g.value = e, console.log(`Video volume set to: ${e}`), !0;
+  }, "Set volume", !1), K = async (e) => u(async () => (N.value = e, console.log(`Fill mode changed to: ${e}`), !0), "Change fill mode", !1), $ = () => {
+    try {
+      const e = r.getAllElements();
+      if (!e.view) {
+        console.warn("live-core-view element not found for fullscreen exit cleanup");
+        return;
+      }
+      console.log("Executing fullscreen exit style cleanup:", {
+        deviceType: c,
+        hasLandscapeStream: v.value,
+        currentOrientation: V()
+      }), F.removeFullscreenStyles(e.view), F.removeLandscapeStyles(e.view), c !== "desktop" && R.unlockOrientation().catch((t) => {
+        console.warn("Failed to unlock orientation during cleanup:", t);
+      }), L.value = !1, console.log("Fullscreen exit style cleanup completed");
+    } catch (e) {
+      console.error("Fullscreen exit style cleanup failed:", e);
+    }
+  }, X = () => {
+    const e = () => {
+      const n = !!document.fullscreenElement, a = d.value;
+      console.log("Fullscreen state change:", {
+        fullscreenElement: document.fullscreenElement,
+        isCurrentlyFullscreen: n,
+        previousValue: a,
+        deviceType: c,
+        changeType: n ? "entered" : "exited"
+      }), d.value = n, a && !n && (console.log("Detected passive fullscreen exit, executing style cleanup"), $());
+    };
+    l.addListener("fullscreenchange", document, "fullscreenchange", e), l.addListener("webkitfullscreenchange", document, "webkitfullscreenchange", e), l.addListener("mozfullscreenchange", document, "mozfullscreenchange", e), l.addListener("MSFullscreenChange", document, "MSFullscreenChange", e);
+    const t = () => {
+      document.visibilityState === "visible" && d.value && (document.fullscreenElement || (console.log("Detected fullscreen state inconsistency via visibilitychange, executing cleanup"), d.value = !1, $()));
+    };
+    l.addListener("visibilitychange", document, "visibilitychange", t);
+  }, O = () => {
+    const e = r.getVideoElement();
+    if (!e)
+      return;
+    const t = () => {
+      console.log("Entered picture-in-picture mode"), P.value = !0;
+    }, n = () => {
+      console.log("Left picture-in-picture mode"), P.value = !1, setTimeout(b, 300);
+    }, a = () => {
+      console.log("Video play event detected"), s.value = !0;
+    }, i = () => {
+      console.log("Video pause event detected"), s.value = !1;
+    }, w = () => {
+      console.log("Video ended event detected"), s.value = !1;
+    }, B = () => {
+      console.log("Video load start event detected"), s.value = !e.paused;
+    }, W = () => {
+      console.log("Video can play event detected"), s.value = !e.paused;
+    }, Y = () => {
+      console.log("Video seeking event detected"), y();
+    }, ee = () => {
+      console.log("Video seeked event detected"), y();
+    }, te = () => {
+      Math.random() < 0.1 && y();
+    }, ne = () => {
+      console.log("Video volume change event detected"), y(), x();
+    };
+    l.addListener("enterpictureinpicture", e, "enterpictureinpicture", t), l.addListener("leavepictureinpicture", e, "leavepictureinpicture", n), l.addListener("play", e, "play", a), l.addListener("pause", e, "pause", i), l.addListener("ended", e, "ended", w), l.addListener("loadstart", e, "loadstart", B), l.addListener("canplay", e, "canplay", W), l.addListener("seeking", e, "seeking", Y), l.addListener("seeked", e, "seeked", ee), l.addListener("timeupdate", e, "timeupdate", te), l.addListener("volumechange", e, "volumechange", ne);
+  }, Z = () => {
+    console.log("Cleaning up player control state..."), R.removeOrientationListener(k), l.removeAllListeners(), console.log(`Cleaned up ${l.getListenerCount()} event listeners`);
+  };
+  return X(), O(), R.addOrientationListener(k, U), y(), x(), ae(() => {
+    var e;
+    return (e = o.value) == null ? void 0 : e.liveId;
+  }, (e) => {
+    e || (M(), T(), s.value = !0, d.value = !1, P.value = !1, g.value = 1);
+  }), {
+    // State
+    isPlaying: s,
+    currentFillMode: N,
+    isFullscreen: d,
+    isLandscapeStyleMode: L,
+    isPictureInPicture: P,
+    currentVolume: g,
+    // Resolution state
+    resolutionList: z,
+    currentResolution: p,
+    // Methods
+    resume: b,
+    pause: Q,
+    requestFullscreen: G,
+    exitFullscreen: M,
+    requestPictureInPicture: H,
+    exitPictureInPicture: T,
+    switchResolution: C,
+    getResolutionList: A,
+    initializeResolution: J,
+    setVolume: j,
+    changeFillMode: K,
+    // Cleanup
+    cleanup: Z
+  };
+}
+export {
+  de as FillMode,
+  ve as Resolution,
+  Pe as usePlayerControlState
+};

package/dist/components/{LiveCoreView → LiveView}/PlayerControl/utils/domHelpers.d.ts

@@ -73,3 +73,9 @@ export declare class EventListenerManager {
      */
     getListenerCount(): number;
 }
+/**
+ * Wait for video element to be mounted in DOM
+ * @param timeout Maximum wait time in milliseconds
+ * @returns Promise that resolves with video element or null if timeout
+ */
+export declare const waitForVideoMounted: (timeout?: number) => Promise<HTMLVideoElement | null>;

package/dist/components/LiveView/PlayerControl/utils/domHelpers.js

@@ -0,0 +1,131 @@
+var L = Object.defineProperty;
+var m = (i, e, t) => e in i ? L(i, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : i[e] = t;
+var d = (i, e, t) => m(i, typeof e != "symbol" ? e + "" : e, t);
+const c = {
+  LIVE_CORE_VIEW_CONTAINER: ".live-core-view-container",
+  LIVE_CORE_VIEW: ".live-core-view",
+  VIDEO_ELEMENT: "#atomicx-live-stream-content video",
+  TCPLAYER_ELEMENT: ".tcplayer"
+};
+class s {
+  /**
+   * Get live-core-view-container element
+   */
+  static getLiveCoreViewContainer() {
+    return document.querySelector(c.LIVE_CORE_VIEW_CONTAINER);
+  }
+  /**
+   * Get live-core-view element
+   */
+  static getLiveCoreView() {
+    return document.querySelector(c.LIVE_CORE_VIEW);
+  }
+  /**
+   * Get video element
+   */
+  static getVideoElement() {
+    return document.querySelector(c.VIDEO_ELEMENT);
+  }
+  /**
+   * Get all required DOM elements
+   */
+  static getAllElements() {
+    return {
+      container: s.getLiveCoreViewContainer(),
+      view: s.getLiveCoreView(),
+      video: s.getVideoElement()
+    };
+  }
+  /**
+   * Check if tcplayer element exists in live-core-view-container
+   */
+  static hasTcPlayerElement() {
+    const e = s.getLiveCoreViewContainer();
+    return e ? e.querySelector(c.TCPLAYER_ELEMENT) !== null : !1;
+  }
+  /**
+   * Get tcplayer element from live-core-view-container
+   */
+  static getTcPlayerElement() {
+    const e = s.getLiveCoreViewContainer();
+    return e ? e.querySelector(c.TCPLAYER_ELEMENT) : null;
+  }
+  /**
+   * Validate if elements exist
+   */
+  static validateElements(e) {
+    const t = [];
+    return e.container === null && t.push("live-core-view-container"), e.view === null && t.push("live-core-view"), e.video === null && t.push("video"), {
+      isValid: t.length === 0,
+      missingElements: t
+    };
+  }
+}
+class C {
+  constructor() {
+    d(this, "listeners", /* @__PURE__ */ new Map());
+  }
+  /**
+   * Add event listener
+   */
+  addListener(e, t, r, o) {
+    this.removeListener(e), t.addEventListener(r, o), this.listeners.set(e, { element: t, event: r, handler: o });
+  }
+  /**
+   * Remove specified event listener
+   */
+  removeListener(e) {
+    const t = this.listeners.get(e);
+    t && (t.element.removeEventListener(t.event, t.handler), this.listeners.delete(e));
+  }
+  /**
+   * Remove all event listeners
+   */
+  removeAllListeners() {
+    for (const [e] of this.listeners)
+      this.removeListener(e);
+  }
+  /**
+   * Get current listener count
+   */
+  getListenerCount() {
+    return this.listeners.size;
+  }
+}
+const g = (i = 3e3) => new Promise((e) => {
+  const t = document.querySelector("#atomicx-live-stream-content");
+  if (!t) {
+    e(null);
+    return;
+  }
+  let r = null;
+  const o = new MutationObserver((v) => {
+    for (const l of v)
+      l.type === "childList" && l.addedNodes.forEach((a) => {
+        if (a.nodeName === "VIDEO") {
+          const n = a, u = n.onvolumechange;
+          n.onvolumechange = null;
+          const E = () => {
+            r && clearTimeout(r), o.disconnect(), n.removeEventListener("loadeddata", E), setTimeout(() => {
+              n.onvolumechange = u;
+            }, 100), e(n);
+          };
+          n.readyState >= 2 ? (r && clearTimeout(r), o.disconnect(), setTimeout(() => {
+            n.onvolumechange = u;
+          }, 100), e(n)) : n.addEventListener("loadeddata", E, { once: !0 });
+        }
+      });
+  });
+  o.observe(t, {
+    childList: !0,
+    subtree: !0
+  }), r = window.setTimeout(() => {
+    o.disconnect(), e(null);
+  }, i);
+});
+export {
+  s as DOMElementGetter,
+  c as DOM_SELECTORS,
+  C as EventListenerManager,
+  g as waitForVideoMounted
+};

package/dist/components/{LiveCoreView/i18n/zh-CN → LiveView/i18n/en-US}/index.d.ts

@@ -7,8 +7,8 @@ export declare const resource: {
     'Exit Picture in Picture': string;
     Fullscreen: string;
     'Exit Fullscreen': string;
-    Mute: string;
-    Unmute: string;
+    'Open Speaker': string;
+    'Close Speaker': string;
     'The system does not support picture-in-picture mode': string;
     'co-Hosting': string;
     'In battle': string;
@@ -16,4 +16,5 @@ export declare const resource: {
     '540P': string;
     '720P': string;
     '1080P': string;
+    Connecting: string;
 };

package/dist/components/{LiveCoreView → LiveView}/i18n/en-US/index.js

@@ -7,15 +7,16 @@ const e = {
   "Exit Picture in Picture": "Exit Picture in Picture",
   Fullscreen: "Fullscreen",
   "Exit Fullscreen": "Exit Fullscreen",
-  Mute: "Mute",
-  Unmute: "Unmute",
+  "Open Speaker": "Open Speaker",
+  "Close Speaker": "Close Speaker",
   "The system does not support picture-in-picture mode": "The system does not support picture-in-picture mode",
   "co-Hosting": "co-Hosting",
   "In battle": "In battle",
   "360P": "360P",
   "540P": "540P",
   "720P": "720P",
-  "1080P": "1080P"
+  "1080P": "1080P",
+  Connecting: "Connecting"
 };
 export {
   e as resource

package/dist/components/{LiveCoreView/i18n/en-US → LiveView/i18n/zh-CN}/index.d.ts

@@ -7,8 +7,8 @@ export declare const resource: {
     'Exit Picture in Picture': string;
     Fullscreen: string;
     'Exit Fullscreen': string;
-    Mute: string;
-    Unmute: string;
+    'Open Speaker': string;
+    'Close Speaker': string;
     'The system does not support picture-in-picture mode': string;
     'co-Hosting': string;
     'In battle': string;
@@ -16,4 +16,5 @@ export declare const resource: {
     '540P': string;
     '720P': string;
     '1080P': string;
+    Connecting: string;
 };

package/dist/components/{LiveCoreView → LiveView}/i18n/zh-CN/index.js

@@ -7,15 +7,16 @@ const e = {
   "Exit Picture in Picture": "退出画中画",
   Fullscreen: "全屏",
   "Exit Fullscreen": "退出全屏",
-  Mute: "静音",
-  Unmute: "取消静音",
+  "Open Speaker": "取消静音",
+  "Close Speaker": "静音",
   "The system does not support picture-in-picture mode": "系统不支持画中画模式",
   "co-Hosting": "连线中",
   "In battle": "PK中",
   "360P": "低清",
   "540P": "标清",
   "720P": "高清",
-  "1080P": "超清"
+  "1080P": "超清",
+  Connecting: "连线中"
 };
 export {
   e as resource