tuikit-atomicx-vue3 4.4.0-beta.1 → 4.5.0

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

@@ -1,122 +1,103 @@
-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(
+import { ref as o, computed as N, watch as B } from "vue";
+import { TUIVideoQuality as w } 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 M, FullscreenMode as S, FullscreenManager as b } from "./utils/fullscreenManager.js";
+import { useLiveListState as re } from "../../../states/LiveListState/LiveListState.js";
+var ae = /* @__PURE__ */ ((r) => (r.CONTAIN = "contain", r.COVER = "cover", r.FILL = "fill", r))(ae || {}), se = ((r) => (r[r.R360P = w.kVideoQuality_360p] = "R360P", r[r.R540P = w.kVideoQuality_540p] = "R540P", r[r.R720P = w.kVideoQuality_720p] = "R720P", r[r.R1080P = w.kVideoQuality_1080p] = "R1080P", r))(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([]), 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(
+), i = o(!1), E = o(!1), L = 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: r } = re(), { canvas: f } = W(), c = new ne(), R = `player-control-${Date.now()}`, g = N(
     () => f.value ? f.value.width > f.value.height : !1
-  ), S = q(
+  ), C = N(
     () => f.value ? f.value.width < f.value.height : !1
-  ), c = se(), u = async (e, t, n) => {
+  ), y = ee(), a = async (e, t, n) => {
     try {
       return await e();
-    } catch (a) {
-      return console.error(`${t} operation failed:`, a), n;
+    } catch (s) {
+      return console.error(`${t} operation failed:`, s), 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)
+  }, T = async () => a(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 () => a(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 t = r.getAllElements();
+    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: v.value,
-      isFullscreen: d.value
-    }), F.smartApplyLandscapeStyles(t.view, e);
-  }, G = async () => u(async () => {
-    const e = r.getAllElements(), t = r.validateElements(e);
+    M.smartApplyLandscapeStyles(t.view, e);
+  }, q = async () => a(async () => {
+    const e = d.getAllElements(), t = d.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(
+    const n = te(y, g.value), s = await b.requestFullscreen(
       e.container,
       e.view,
-      c,
-      S.value,
-      a
+      y,
+      C.value,
+      n
     );
-    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();
+    return s.success ? i.value = !0 : console.error("Fullscreen request failed:", s.error), E.value = s.shouldRotateToLandscape, s;
+  }, "Request fullscreen", { success: !1, mode: S.CSS_SIMULATED, shouldRotateToLandscape: !1 }), Q = async () => a(async () => {
+    const e = d.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(
+    const t = Z(y, g.value), n = await b.exitFullscreen(
       e.view,
-      c,
-      n
+      y,
+      t
     );
-    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();
+    return n.mode === S.CSS_SIMULATED && (i.value = !1), n.success || console.error("Fullscreen exit failed:", n.error), E.value = !1, n;
+  }, "Exit fullscreen", { success: !1, mode: S.CSS_SIMULATED, shouldRotateToLandscape: !1 }), X = async () => a(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 O(), await e.requestPictureInPicture(), console.log("Picture-in-picture request successful"), !0;
-  }, "Request picture-in-picture", !1), T = async () => u(async () => {
+    return U(), await e.requestPictureInPicture(), !0;
+  }, "Request picture-in-picture", !1), $ = async () => a(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)
+    return await document.exitPictureInPicture(), !0;
+  }, "Exit picture-in-picture", !1), A = async (e) => a(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: {
@@ -124,140 +105,118 @@ function Pe() {
           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)
+    ), v.value || (v.value = !0), p.value = e, !0;
+  }, "Switch resolution", !1), z = async (e) => a(async () => {
+    if (!u.instance)
       throw new Error("Room engine instance not available");
-    const t = 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}:`, 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);
+      const n = await z(e);
+      if (h.value = n, n.length === x.FIRST_INDEX) {
+        console.warn("[Resolution] No resolutions available for room:", e), p.value = void 0;
         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
-      });
+      const s = n[x.FIRST_INDEX];
+      p.value = s, t && await A(s);
     } catch (n) {
-      console.error("Failed to initialize resolution:", n);
+      console.error("[Resolution] Failed to initialize resolution:", n);
     }
-  }, j = async (e) => u(async () => {
+  }, O = async (e) => a(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), $ = () => {
+    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) => a(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) => a(async () => (V.value = e, !0), "Change fill mode", !1), _ = () => {
     try {
-      const e = r.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: 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");
+      M.removeFullscreenStyles(e.view), M.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 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"), $());
+      const n = !!document.fullscreenElement, s = i.value;
+      i.value = n, s && !n && _();
     };
-    l.addListener("fullscreenchange", document, "fullscreenchange", e), l.addListener("webkitfullscreenchange", document, "webkitfullscreenchange", e), l.addListener("mozfullscreenchange", document, "mozfullscreenchange", e), l.addListener("MSFullscreenChange", document, "MSFullscreenChange", e);
+    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" && d.value && (document.fullscreenElement || (console.log("Detected fullscreen state inconsistency via visibilitychange, executing cleanup"), d.value = !1, $()));
+      document.visibilityState === "visible" && i.value && (document.fullscreenElement || (i.value = !1, _()));
     };
-    l.addListener("visibilitychange", document, "visibilitychange", t);
-  }, O = () => {
-    const e = r.getVideoElement();
-    if (!e)
+    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 = () => {
-      console.log("Entered picture-in-picture mode"), P.value = !0;
+      L.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.value = !1, setTimeout(T, ie.PIP_RESUME_DELAY);
     };
-    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`);
+    c.addListener("enterpictureinpicture", e, "enterpictureinpicture", t), c.addListener("leavepictureinpicture", e, "leavepictureinpicture", n);
+  }, H = () => {
+    P.removeOrientationListener(R), c.removeAllListeners();
   };
-  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,
+  return j(), U(), P.addOrientationListener(R, k), B(
+    () => {
+      var e;
+      return (e = r.value) == null ? void 0 : e.liveId;
+    },
+    async (e) => {
+      e && (v.value = !0, h.value = [], p.value = void 0, await O(m.value), await J(e, !1), console.log("[PlayerControl] State after entering room:", {
+        isPlaying: v.value,
+        currentFillMode: V.value,
+        isFullscreen: i.value,
+        isLandscapeStyleMode: E.value,
+        isPictureInPicture: L.value,
+        currentVolume: m.value,
+        resolutionList: h.value,
+        currentResolution: p.value
+      }));
+    }
+  ), {
+    isPlaying: v,
+    currentFillMode: V,
+    isFullscreen: i,
+    isLandscapeStyleMode: E,
+    isPictureInPicture: L,
+    currentVolume: m,
+    isMuted: F,
+    resolutionList: h,
     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
+    resume: T,
+    pause: D,
+    requestFullscreen: q,
+    exitFullscreen: Q,
+    requestPictureInPicture: X,
+    exitPictureInPicture: $,
+    switchResolution: A,
+    setVolume: O,
+    setMute: G,
+    changeFillMode: Y,
+    cleanup: H
   };
 }
 export {
-  de as FillMode,
-  ve as Resolution,
-  Pe as usePlayerControlState
+  ae as FillMode,
+  se as Resolution,
+  pe as usePlayerControlState
 };

package/dist/components/LiveView/index.d.ts

@@ -1,5 +1,3 @@
-import { default as DefaultStreamViewUI } from './DefaultStreamViewUI.vue';
-
 declare const LiveCoreView: {
     new (...args: any[]): import('vue').CreateComponentPublicInstanceWithMixins<Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, import('vue').PublicProps, {}, true, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {}, any, import('vue').ComponentProvideOptions, {
         P: {};
@@ -76,4 +74,41 @@ declare const LiveView: {
         }): any;
     };
 });
+declare const DefaultStreamViewUI: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    userInfo: {
+        type: import('vue').PropType<import('../..').SeatUserInfo>;
+        required: true;
+    };
+    streamViewInfoList: {
+        type: import('vue').PropType<{
+            userInfo: import('../..').SeatUserInfo;
+            region: {
+                left: string;
+                top: string;
+                width: string;
+                height: string;
+                zIndex: number;
+            };
+        }[]>;
+        required: true;
+    };
+}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    userInfo: {
+        type: import('vue').PropType<import('../..').SeatUserInfo>;
+        required: true;
+    };
+    streamViewInfoList: {
+        type: import('vue').PropType<{
+            userInfo: import('../..').SeatUserInfo;
+            region: {
+                left: string;
+                top: string;
+                width: string;
+                height: string;
+                zIndex: number;
+            };
+        }[]>;
+        required: true;
+    };
+}>> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
 export { LiveCoreView, LiveView, DefaultStreamViewUI };

package/dist/components/LiveView/index.js

@@ -1,6 +1,6 @@
 import { addI18n as J } from "../../i18n/index.js";
-import oe from "./DefaultStreamViewUI.js";
-import { defineComponent as ne, useSlots as ue, computed as n, ref as p, onMounted as T, onBeforeUnmount as D, watch as P, createElementBlock as L, openBlock as v, normalizeClass as se, createCommentVNode as w, createElementVNode as N, createBlock as M, toDisplayString as ve, unref as g, normalizeStyle as A, renderSlot as E, createVNode as he, Fragment as ce, renderList as de, mergeProps as K, normalizeProps as fe, Teleport as me } from "vue";
+import Q from "./DefaultStreamViewUI.js";
+import { defineComponent as ne, useSlots as ue, computed as n, ref as p, onMounted as H, onBeforeUnmount as T, watch as P, createElementBlock as L, openBlock as v, normalizeClass as se, createCommentVNode as w, createElementVNode as N, createBlock as M, toDisplayString as ve, unref as g, normalizeStyle as A, renderSlot as E, createVNode as he, Fragment as ce, renderList as de, mergeProps as K, normalizeProps as fe, Teleport as me } from "vue";
 import { useUIKit as pe } from "@tencentcloud/uikit-base-component-vue3";
 import { useLiveSeatState as we } from "../../states/LiveSeatState/index.js";
 import { useLoginState as ge } from "../../states/LoginState.js";
@@ -22,17 +22,17 @@ const Ve = {
 }, $e = /* @__PURE__ */ ne({
   __name: "index",
   setup(be) {
-    const { isFullscreen: X, isLandscapeStyleMode: Y } = Ie(), { t: Z } = pe(), { seatList: d, canvas: u, startPlayStream: ee, stopPlayStream: te } = we(), { currentLive: x } = Se(), ae = ue(), C = n(() => ae.localVideo), { loginUserInfo: $ } = ge(), b = p(!1), R = p(!1), le = n(() => !(!C.value && V.value && h.value < c.value && G)), U = n(() => {
+    const { isFullscreen: U, isLandscapeStyleMode: X } = Ie(), { t: ee } = pe(), { seatList: d, canvas: u, startPlayStream: te, stopPlayStream: ae } = we(), { currentLive: x } = Se(), le = ue(), C = n(() => le.localVideo), { loginUserInfo: $ } = ge(), b = p(!1), R = p(!1), re = n(() => !(!C.value && V.value && h.value < c.value && G)), Y = n(() => {
       var e;
       return ((e = x.value) == null ? void 0 : e.liveId) && !d.value.some((l) => {
         var t, a;
         return ((t = l.userInfo) == null ? void 0 : t.userId) === ((a = $.value) == null ? void 0 : a.userId);
       });
     });
-    T(async () => {
-      R.value = !0, await ee({ view: "atomicx-live-stream-content" }), b.value = !0;
-    }), D(async () => {
-      R.value = !1, await te(), b.value = !1;
+    H(async () => {
+      R.value = !0, await te({ view: "atomicx-live-stream-content" }), b.value = !0;
+    }), T(async () => {
+      R.value = !1, await ae(), b.value = !1;
     });
     const V = p(!0), s = p(), _ = p({
       width: 0,
@@ -61,8 +61,8 @@ const Ve = {
       width: r.value.width * r.value.scale,
       height: r.value.height * r.value.scale
     })), z = n(() => d.value.map((e, l) => {
-      var i, H;
-      const t = k.value[l], a = V.value && I.value === "fill", o = d.value.length === 1 || ((i = e.region) == null ? void 0 : i.w) === u.value.width && ((H = e.region) == null ? void 0 : H.h) === u.value.height;
+      var i, F;
+      const t = k.value[l], a = V.value && I.value === "fill", o = d.value.length === 1 || ((i = e.region) == null ? void 0 : i.w) === u.value.width && ((F = e.region) == null ? void 0 : F.h) === u.value.height;
       return !C.value && a && o ? {
         userInfo: e.userInfo,
         region: {
@@ -85,7 +85,7 @@ const Ve = {
           zIndex: Number(t.zOrder) || 0
         }
       };
-    })), re = n(() => z.value.find((e) => {
+    })), ie = n(() => z.value.find((e) => {
       var l, t;
       return ((l = e == null ? void 0 : e.userInfo) == null ? void 0 : l.userId) === ((t = $.value) == null ? void 0 : t.userId);
     })), O = n(() => C.value ? z.value.filter((e) => {
@@ -126,7 +126,7 @@ const Ve = {
         } else
           S(), r.value.scale = 1, r.value.transformX = 0, r.value.transformY = 0;
     }
-    const ie = n(() => ({
+    const oe = n(() => ({
       width: `${Math.floor(r.value.width) * r.value.scale}px`,
       height: `${Math.floor(r.value.height) * r.value.scale}px`,
       transform: `translate(${r.value.transformX * r.value.scale}px, ${r.value.transformY * r.value.scale}px)`
@@ -173,27 +173,27 @@ const Ve = {
         width: e.width,
         height: e.height
       };
-    }, F = new ResizeObserver(() => {
+    }, D = new ResizeObserver(() => {
       B(), S(), W();
     });
-    return T(() => {
-      F.observe(s.value), B();
-    }), D(() => {
-      F.unobserve(s.value);
+    return H(() => {
+      D.observe(s.value), B();
+    }), T(() => {
+      D.unobserve(s.value);
     }), (e, l) => {
       var t;
       return v(), L("div", {
         ref_key: "liveCoreViewContainerRef",
         ref: s,
         id: "live-core-view-container",
-        class: se(["live-core-view-container", { "align-center": le.value }])
+        class: se(["live-core-view-container", { "align-center": re.value }])
       }, [
         !e.$slots.localVideo && !b.value ? (v(), L("div", Ve, [
-          N("span", ze, ve(g(Z)("No video")), 1)
+          N("span", ze, ve(g(ee)("No video")), 1)
         ])) : w("", !0),
         N("div", {
           class: "live-core-view",
-          style: A(ie.value)
+          style: A(oe.value)
         }, [
           l[0] || (l[0] = N("div", {
             id: "atomicx-live-stream-content",
@@ -205,39 +205,39 @@ const Ve = {
               style: A(a.region)
             }, [
               E(e.$slots, "streamViewUI", K({ ref_for: !0 }, { userInfo: a.userInfo }), void 0, !0),
-              e.$slots.streamViewUI ? w("", !0) : (v(), M(oe, {
+              e.$slots.streamViewUI ? w("", !0) : (v(), M(Q, {
                 key: 0,
                 streamViewInfoList: O.value,
                 userInfo: a.userInfo
               }, null, 8, ["streamViewInfoList", "userInfo"]))
             ], 4))), 128))
           ])) : w("", !0),
-          e.$slots.localVideo && R.value ? E(e.$slots, "localVideo", fe(K({ key: 1 }, { style: (t = re.value) == null ? void 0 : t.region })), void 0, !0) : w("", !0),
+          e.$slots.localVideo && R.value ? E(e.$slots, "localVideo", fe(K({ key: 1 }, { style: (t = ie.value) == null ? void 0 : t.region })), void 0, !0) : w("", !0),
           he(ye, { seatListWithRealSize: z.value }, null, 8, ["seatListWithRealSize"])
         ], 4),
-        g(X) ? w("", !0) : (v(), M(me, {
+        g(U) ? w("", !0) : (v(), M(me, {
           key: 1,
           to: "body",
           disabled: !g(G)
         }, [
-          U.value ? (v(), M(q, {
+          Y.value ? (v(), M(q, {
             key: 0,
-            isLandscapeStyleMode: g(Y)
+            isLandscapeStyleMode: g(X)
           }, null, 8, ["isLandscapeStyleMode"])) : w("", !0)
         ], 8, ["disabled"])),
-        U.value && g(X) ? (v(), M(q, {
+        Y.value && g(U) ? (v(), M(q, {
           key: 2,
-          isLandscapeStyleMode: g(Y)
+          isLandscapeStyleMode: g(X)
         }, null, 8, ["isLandscapeStyleMode"])) : w("", !0)
       ], 2);
     };
   }
-}), Q = /* @__PURE__ */ Le($e, [["__scopeId", "data-v-8d25163d"]]);
+}), Z = /* @__PURE__ */ Le($e, [["__scopeId", "data-v-8d25163d"]]);
 J("en-US", { translation: xe });
 J("zh-CN", { translation: Ce });
-const Ae = Q, Ee = Q;
+const Ae = Z, Ee = Z, Ke = Q;
 export {
-  oe as DefaultStreamViewUI,
+  Ke as DefaultStreamViewUI,
   Ae as LiveCoreView,
   Ee as LiveView
 };