tuikit-atomicx-vue3 3.4.2 → 4.3.1

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

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

package/dist/components/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

@@ -1,54 +1,54 @@
-var E = Object.defineProperty;
-var c = (i, e, t) => e in i ? E(i, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : i[e] = t;
-var l = (i, e, t) => c(i, typeof e != "symbol" ? e + "" : e, t);
-const n = {
+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 r {
+class s {
   /**
    * Get live-core-view-container element
    */
   static getLiveCoreViewContainer() {
-    return document.querySelector(n.LIVE_CORE_VIEW_CONTAINER);
+    return document.querySelector(c.LIVE_CORE_VIEW_CONTAINER);
   }
   /**
    * Get live-core-view element
    */
   static getLiveCoreView() {
-    return document.querySelector(n.LIVE_CORE_VIEW);
+    return document.querySelector(c.LIVE_CORE_VIEW);
   }
   /**
    * Get video element
    */
   static getVideoElement() {
-    return document.querySelector(n.VIDEO_ELEMENT);
+    return document.querySelector(c.VIDEO_ELEMENT);
   }
   /**
    * Get all required DOM elements
    */
   static getAllElements() {
     return {
-      container: r.getLiveCoreViewContainer(),
-      view: r.getLiveCoreView(),
-      video: r.getVideoElement()
+      container: s.getLiveCoreViewContainer(),
+      view: s.getLiveCoreView(),
+      video: s.getVideoElement()
     };
   }
   /**
    * Check if tcplayer element exists in live-core-view-container
    */
   static hasTcPlayerElement() {
-    const e = r.getLiveCoreViewContainer();
-    return e ? e.querySelector(n.TCPLAYER_ELEMENT) !== null : !1;
+    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 = r.getLiveCoreViewContainer();
-    return e ? e.querySelector(n.TCPLAYER_ELEMENT) : null;
+    const e = s.getLiveCoreViewContainer();
+    return e ? e.querySelector(c.TCPLAYER_ELEMENT) : null;
   }
   /**
    * Validate if elements exist
@@ -61,15 +61,15 @@ class r {
     };
   }
 }
-class v {
+class C {
   constructor() {
-    l(this, "listeners", /* @__PURE__ */ new Map());
+    d(this, "listeners", /* @__PURE__ */ new Map());
   }
   /**
    * Add event listener
    */
-  addListener(e, t, s, o) {
-    this.removeListener(e), t.addEventListener(s, o), this.listeners.set(e, { element: t, event: s, handler: o });
+  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
@@ -92,8 +92,40 @@ class v {
     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 {
-  r as DOMElementGetter,
-  n as DOM_SELECTORS,
-  v as EventListenerManager
+  s as DOMElementGetter,
+  c as DOM_SELECTORS,
+  C as EventListenerManager,
+  g as waitForVideoMounted
 };

package/dist/components/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;

package/dist/components/LiveView/i18n/en-US/index.js

@@ -7,8 +7,8 @@ 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",

package/dist/components/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;

package/dist/components/LiveView/i18n/zh-CN/index.js

@@ -7,8 +7,8 @@ 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中",