tuikit-atomicx-vue3 3.4.2 → 3.5.0-beta.8

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

@@ -1,123 +1,103 @@
-import { ref as m, computed as _, watch as ae } from "vue";
-import { TUIVideoQuality as E, TRTCCloud as V } 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 { ref as o, computed as N, watch as B } from "vue";
+import { TUIVideoQuality as L } from "@tencentcloud/tuiroom-engine-js";
+import { useRoomEngine as K } from "../../../hooks/useRoomEngine.js";
+import { useLiveSeatState as W } from "../../../states/LiveSeatState/index.js";
+import { hadLandscapeRotationToUndo as Z, getDeviceType as ee, shouldRotateToLandscapeForFullscreen as te } from "./utils/deviceDetection.js";
+import { EventListenerManager as ne, DOMElementGetter as d } from "./utils/domHelpers.js";
+import { OrientationManager as P, StyleManager as S, FullscreenMode as M, FullscreenManager as b } from "./utils/fullscreenManager.js";
+import { useLiveListState as ae } from "../../../states/LiveListState/LiveListState.js";
+var re = /* @__PURE__ */ ((a) => (a.CONTAIN = "contain", a.COVER = "cover", a.FILL = "fill", a))(re || {}), se = ((a) => (a[a.R360P = L.kVideoQuality_360p] = "R360P", a[a.R540P = L.kVideoQuality_540p] = "R540P", a[a.R720P = L.kVideoQuality_720p] = "R720P", a[a.R1080P = L.kVideoQuality_1080p] = "R1080P", a))(se || {});
+const l = {
+  // Default volume level when component initializes (100% volume)
+  DEFAULT_VOLUME: 100,
+  // Minimum allowed volume level (silent)
+  MIN_VOLUME: 0,
+  // Maximum allowed volume level (full volume)
+  MAX_VOLUME: 100,
+  // Volume level when muted (silent)
+  MUTE_VOLUME: 0
+}, ie = {
+  // Delay in milliseconds before resuming playback after leaving picture-in-picture
+  // Allows browser to handle state transitions naturally
+  PIP_RESUME_DELAY: 300
+}, x = {
+  // Index of the first element in an array
+  FIRST_INDEX: 0
+}, v = o(!0), V = o(
   "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 = _(
+), i = o(!1), E = o(!1), w = o(!1), m = o(l.DEFAULT_VOLUME), F = o(!1);
+let I = l.DEFAULT_VOLUME;
+const h = o([]), p = o(), u = K();
+function pe() {
+  const { currentLive: a } = ae(), { canvas: f } = W(), c = new ne(), O = `player-control-${Date.now()}`, g = N(
     () => f.value ? f.value.width > f.value.height : !1
-  ), S = _(
+  ), C = N(
     () => f.value ? f.value.width < f.value.height : !1
-  ), c = re(), u = async (e, n, a) => {
+  ), y = ee(), r = async (e, t, n) => {
     try {
       return await e();
-    } catch (t) {
-      return console.error(`${n} operation failed:`, t), a;
+    } catch (s) {
+      return console.error(`${t} operation failed:`, s), n;
     }
-  }, b = () => {
-    const e = i.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);
-    }
-  }, y = () => {
-    const e = i.getVideoElement();
-    if (e) {
-      const n = !e.paused && !e.ended;
-      r.value !== n && (console.log(`Syncing playing state: ${r.value} -> ${n}`), r.value = n);
-    }
-  }, M = async () => u(async () => {
-    const e = i.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;
-  }, "Resume playback", !1), Q = async () => u(async () => {
-    const e = i.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;
-  }, "Pause playback", !1), U = (e) => {
-    if (!d.value || !p.value)
+  }, R = async () => r(async () => {
+    var e;
+    return await ((e = u.instance) == null ? void 0 : e.callExperimentalAPI(JSON.stringify({
+      api: "resume",
+      params: {}
+    }))), v.value = !0, !0;
+  }, "Resume playback", !1), D = async () => r(async () => {
+    var e;
+    return await ((e = u.instance) == null ? void 0 : e.callExperimentalAPI(JSON.stringify({
+      api: "pause",
+      params: {}
+    }))), v.value = !1, !0;
+  }, "Pause playback", !1), k = (e) => {
+    if (!i.value || !g.value)
       return;
-    const n = i.getAllElements();
-    if (!n.view) {
+    const t = d.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,
-      isFullscreen: d.value
-    }), I.smartApplyLandscapeStyles(n.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);
-    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"
-    });
-    const l = await D.requestFullscreen(
+    S.smartApplyLandscapeStyles(t.view, e);
+  }, q = async () => r(async () => {
+    const e = d.getAllElements(), t = d.validateElements(e);
+    if (!t.isValid)
+      throw new Error(`Missing required DOM elements: ${t.missingElements.join(", ")}`);
+    const n = te(y, g.value), s = await b.requestFullscreen(
       e.container,
       e.view,
-      c,
-      S.value,
-      t
+      y,
+      C.value,
+      n
     );
-    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 s.success ? i.value = !0 : console.error("Fullscreen request failed:", s.error), E.value = s.shouldRotateToLandscape, s;
+  }, "Request fullscreen", { success: !1, mode: M.CSS_SIMULATED, shouldRotateToLandscape: !1 }), Q = async () => r(async () => {
+    const e = d.getAllElements();
     if (!e.view)
       throw new Error("live-core-view element not found");
-    const n = R(), a = ce(c, p.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"
-    });
-    const t = await D.exitFullscreen(
+    const t = Z(y, g.value), n = await b.exitFullscreen(
       e.view,
-      c,
-      a
+      y,
+      t
     );
-    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 n.mode === M.CSS_SIMULATED && (i.value = !1), n.success || console.error("Fullscreen exit failed:", n.error), E.value = !1, n;
+  }, "Exit fullscreen", { success: !1, mode: M.CSS_SIMULATED, shouldRotateToLandscape: !1 }), X = async () => r(async () => {
+    const e = d.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 U(), await e.requestPictureInPicture(), !0;
+  }, "Request picture-in-picture", !1), J = async () => r(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 () => {
-    if (!h.instance)
+    return await document.exitPictureInPicture(), !0;
+  }, "Exit picture-in-picture", !1), T = async (e) => r(async () => {
+    if (!u.instance)
       throw new Error("Room engine instance not available");
-    return await h.instance.callExperimentalAPI(
+    return console.debug("Switching to resolution:", e), await u.instance.callExperimentalAPI(
       JSON.stringify({
         api: "switchPlaybackQuality",
         params: {
@@ -125,143 +105,118 @@ 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 () => {
-    if (!h.instance)
+    ), v.value || (v.value = !0), p.value = e, !0;
+  }, "Switch resolution", !1), $ = async (e) => r(async () => {
+    if (!u.instance)
       throw new Error("Room engine instance not available");
-    const n = await h.instance.callExperimentalAPI(
+    return await u.instance.callExperimentalAPI(
       JSON.stringify({
         api: "queryPlaybackQualityList",
         params: {
           roomId: e
         }
       })
-    );
-    return console.log(`Retrieved resolution list for room ${e}:`, n), n || [];
-  }, "Get resolution list", []), J = async (e, n = !0) => {
+    ) || [];
+  }, "Get resolution list", []), z = 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) {
-        console.warn("No resolutions available for room:", e);
+      const n = await $(e);
+      if (h.value = n, n.length === x.FIRST_INDEX) {
+        console.warn("[Resolution] No resolutions available for room:", e), p.value = void 0;
         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,
-        applied: w,
-        hasInitialized: t
-      });
-    } catch (a) {
-      console.error("Failed to initialize resolution:", a);
+      const s = n[x.FIRST_INDEX];
+      p.value = s, t && await T(s);
+    } catch (n) {
+      console.error("[Resolution] Failed to initialize resolution:", n);
     }
-  }, j = async (e) => u(async () => {
-    var a;
-    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 = () => {
+  }, A = async (e) => r(async () => {
+    var t;
+    if (e < l.MIN_VOLUME || e > l.MAX_VOLUME)
+      throw new Error(`Volume value must be between ${l.MIN_VOLUME}-${l.MAX_VOLUME}`);
+    return await ((t = u.instance) == null ? void 0 : t.setAudioPlayoutVolume({ volume: e })), m.value = e, I = e, F.value = e == l.MUTE_VOLUME, !0;
+  }, "Set volume", !1), G = async (e) => r(async () => {
+    var n;
+    let t;
+    return e ? (I = m.value, t = l.MUTE_VOLUME) : t = I || l.DEFAULT_VOLUME, await ((n = u.instance) == null ? void 0 : n.setAudioPlayoutVolume({ volume: t })), m.value = t, F.value = e, !0;
+  }, "Set mute", !1), Y = async (e) => r(async () => (V.value = e, !0), "Change fill mode", !1), _ = () => {
     try {
-      const e = i.getAllElements();
+      const e = d.getAllElements();
       if (!e.view) {
-        console.warn("live-core-view element not found for fullscreen exit cleanup");
+        console.warn("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);
-      }), L.value = !1, console.log("Fullscreen exit style cleanup completed");
+      S.removeFullscreenStyles(e.view), S.removeLandscapeStyles(e.view), y !== "desktop" && P.unlockOrientation().catch(() => {
+      }), E.value = !1;
     } catch (e) {
-      console.error("Fullscreen exit style cleanup failed:", e);
+      console.error("Fullscreen exit cleanup failed:", e);
     }
-  }, X = () => {
+  }, j = () => {
     const e = () => {
-      const a = !!document.fullscreenElement, t = d.value;
-      console.log("Fullscreen state change:", {
-        fullscreenElement: document.fullscreenElement,
-        isCurrentlyFullscreen: a,
-        previousValue: t,
-        deviceType: c,
-        changeType: a ? "entered" : "exited"
-      }), d.value = a, t && !a && (console.log("Detected passive fullscreen exit, executing style cleanup"), q());
+      const n = !!document.fullscreenElement, s = i.value;
+      i.value = n, s && !n && _();
     };
-    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()));
+    c.addListener("fullscreenchange", document, "fullscreenchange", e), c.addListener("webkitfullscreenchange", document, "webkitfullscreenchange", e), c.addListener("mozfullscreenchange", document, "mozfullscreenchange", e), c.addListener("MSFullscreenChange", document, "MSFullscreenChange", e);
+    const t = () => {
+      document.visibilityState === "visible" && i.value && (document.fullscreenElement || (i.value = !1, _()));
     };
-    o.addListener("visibilitychange", document, "visibilitychange", n);
-  }, C = () => {
-    const e = i.getVideoElement();
-    if (!e) return;
-    const n = () => {
-      console.log("Entered picture-in-picture mode"), P.value = !0;
-    }, 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;
-    }, w = () => {
-      console.log("Video ended event detected"), r.value = !1;
-    }, B = () => {
-      console.log("Video load start event detected"), r.value = !e.paused;
-    }, W = () => {
-      console.log("Video can play event detected"), r.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(), b();
+    c.addListener("visibilitychange", document, "visibilitychange", t);
+  }, U = () => {
+    const e = d.getVideoElement();
+    if (!e) {
+      console.warn("Video element not found for setting up event listeners");
+      return;
+    }
+    const t = () => {
+      w.value = !0;
+    }, n = () => {
+      w.value = !1, setTimeout(R, ie.PIP_RESUME_DELAY);
     };
-    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);
-  }, Z = () => {
-    console.log("Cleaning up player control state..."), F.removeOrientationListener(x), o.removeAllListeners(), console.log(`Cleaned up ${o.getListenerCount()} event listeners`);
+    c.addListener("enterpictureinpicture", e, "enterpictureinpicture", t), c.addListener("leavepictureinpicture", e, "leavepictureinpicture", n);
+  }, H = () => {
+    P.removeOrientationListener(O), c.removeAllListeners();
   };
-  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);
-  }), {
-    // State
-    isPlaying: r,
-    currentFillMode: N,
-    isFullscreen: d,
-    isLandscapeStyleMode: L,
-    isPictureInPicture: P,
-    currentVolume: g,
-    // Resolution state
-    resolutionList: z,
-    currentResolution: v,
-    // Methods
-    resume: M,
-    pause: Q,
-    requestFullscreen: G,
-    exitFullscreen: T,
-    requestPictureInPicture: H,
-    exitPictureInPicture: A,
-    switchResolution: $,
-    getResolutionList: O,
-    initializeResolution: J,
-    setVolume: j,
-    changeFillMode: K,
-    // Cleanup
-    cleanup: Z
+  return j(), U(), P.addOrientationListener(O, k), B(
+    () => {
+      var e;
+      return (e = a.value) == null ? void 0 : e.liveId;
+    },
+    async (e) => {
+      e && (v.value = !0, w.value = !1, i.value = !1, h.value = [], p.value = void 0, await A(m.value), await z(e, !1), console.log("[PlayerControl] State after entering room:", JSON.stringify({
+        isPlaying: v.value,
+        currentFillMode: V.value,
+        isFullscreen: i.value,
+        isLandscapeStyleMode: E.value,
+        isPictureInPicture: w.value,
+        currentVolume: m.value,
+        resolutionList: h.value,
+        currentResolution: p.value
+      })));
+    }
+  ), {
+    isPlaying: v,
+    currentFillMode: V,
+    isFullscreen: i,
+    isLandscapeStyleMode: E,
+    isPictureInPicture: w,
+    currentVolume: m,
+    isMuted: F,
+    resolutionList: h,
+    currentResolution: p,
+    resume: R,
+    pause: D,
+    requestFullscreen: q,
+    exitFullscreen: Q,
+    requestPictureInPicture: X,
+    exitPictureInPicture: J,
+    switchResolution: T,
+    setVolume: A,
+    setMute: G,
+    changeFillMode: Y,
+    cleanup: H
   };
 }
 export {
-  pe as FillMode,
-  ve as Resolution,
-  Ve as usePlayerControlState
+  re as FillMode,
+  se as Resolution,
+  pe as usePlayerControlState
 };

package/dist/components/LiveView/PlayerControl/utils/domHelpers.d.ts

@@ -40,7 +40,8 @@ export declare class DOMElementGetter {
      */
     static getTcPlayerElement(): HTMLElement | null;
     /**
-     * Validate if elements exist
+     * Validate if required elements exist for fullscreen
+     * Note: video element is optional because canvas rendering (TRTC SDK) doesn't use video
      */
     static validateElements(elements: {
         container?: HTMLElement | null;
@@ -73,3 +74,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,75 +1,76 @@
-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
+   * Validate if required elements exist for fullscreen
+   * Note: video element is optional because canvas rendering (TRTC SDK) doesn't use video
    */
   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"), {
+    return e.container === null && t.push("live-core-view-container"), e.view === null && t.push("live-core-view"), {
       isValid: t.length === 0,
       missingElements: t
     };
   }
 }
-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 +93,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 a of v)
+      a.type === "childList" && a.addedNodes.forEach((l) => {
+        if (l.nodeName === "VIDEO") {
+          const n = l, 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;