tuikit-atomicx-vue3 3.4.2 → 4.3.1

package/dist/components/LiveView/index.js

@@ -1,17 +1,17 @@
 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 x, 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 { 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 { useUIKit as pe } from "@tencentcloud/uikit-base-component-vue3";
 import { useLiveSeatState as we } from "../../states/LiveSeatState/index.js";
-import { useLiveState as ge } from "../../states/LiveState/index.js";
-import { useLoginState as ye } from "../../states/LoginState.js";
+import { useLoginState as ge } from "../../states/LoginState.js";
 import { getContentSize as j } from "../../utils/domOperation.js";
 import q from "./PlayerControl/PlayerControl.js";
-import Ie from "./CoreViewDecorate/LiveCoreDecorate.js";
-import { usePlayerControlState as Se } from "./PlayerControl/PlayerControlState.js";
+import ye from "./CoreViewDecorate/LiveCoreDecorate.js";
+import { usePlayerControlState as Ie } from "./PlayerControl/PlayerControlState.js";
+import { useLiveListState as Se } from "../../states/LiveListState/LiveListState.js";
 import { isMobile as G } from "../../utils/env.js";
-import { _ as xe } from "../../_plugin-vue_export-helper-CHgC5LLL.js";
-import { resource as Le } from "./i18n/en-US/index.js";
+import { _ as Le } from "../../_plugin-vue_export-helper-CHgC5LLL.js";
+import { resource as xe } from "./i18n/en-US/index.js";
 import { resource as Ce } from "./i18n/zh-CN/index.js";
 const Ve = {
   key: 0,
@@ -22,9 +22,9 @@ const Ve = {
 }, $e = /* @__PURE__ */ ne({
   __name: "index",
   setup(be) {
-    const { isFullscreen: X, isLandscapeStyleMode: Y } = Se(), { t: Z } = pe(), { seatList: d, canvas: u, startPlayStream: ee, stopPlayStream: te } = we(), { currentLive: L } = ge(), ae = ue(), C = n(() => ae.localVideo), { loginUserInfo: $ } = ye(), b = p(!1), R = p(!1), le = n(() => !(!C.value && V.value && h.value < c.value && G)), U = n(() => {
+    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(() => {
       var e;
-      return ((e = L.value) == null ? void 0 : e.liveId) && !d.value.some((l) => {
+      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);
       });
@@ -132,7 +132,7 @@ const Ve = {
       transform: `translate(${r.value.transformX * r.value.scale}px, ${r.value.transformY * r.value.scale}px)`
     })), m = n(() => {
       var e, l;
-      return u.value.width && u.value.height ? `${u.value.width}:${u.value.height}` : L.value && ((e = L.value) == null ? void 0 : e.layoutTemplate) >= 200 && ((l = L.value) == null ? void 0 : l.layoutTemplate) <= 599 ? "16:9" : "9:16";
+      return u.value.width && u.value.height ? `${u.value.width}:${u.value.height}` : x.value && ((e = x.value) == null ? void 0 : e.layoutTemplate) >= 200 && ((l = x.value) == null ? void 0 : l.layoutTemplate) <= 599 ? "16:9" : "9:16";
     }), h = n(() => !m.value || m.value.indexOf(":") < 0 ? 0 : Number(m.value.split(":")[0])), c = n(() => !m.value || m.value.indexOf(":") < 0 ? 0 : Number(m.value.split(":")[1])), I = p(
       "fit"
       /* Fit */
@@ -182,13 +182,13 @@ const Ve = {
       F.unobserve(s.value);
     }), (e, l) => {
       var t;
-      return v(), x("div", {
+      return v(), L("div", {
         ref_key: "liveCoreViewContainerRef",
         ref: s,
         id: "live-core-view-container",
         class: se(["live-core-view-container", { "align-center": le.value }])
       }, [
-        !e.$slots.localVideo && !b.value ? (v(), x("div", Ve, [
+        !e.$slots.localVideo && !b.value ? (v(), L("div", Ve, [
           N("span", ze, ve(g(Z)("No video")), 1)
         ])) : w("", !0),
         N("div", {
@@ -199,8 +199,8 @@ const Ve = {
             id: "atomicx-live-stream-content",
             class: "stream-content"
           }, null, -1)),
-          O.value.length > 0 ? (v(), x("div", Me, [
-            (v(!0), x(ce, null, de(O.value, (a, o) => (v(), x("div", {
+          O.value.length > 0 ? (v(), L("div", Me, [
+            (v(!0), L(ce, null, de(O.value, (a, o) => (v(), L("div", {
               key: `seat-${o}`,
               style: A(a.region)
             }, [
@@ -213,7 +213,7 @@ const Ve = {
             ], 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),
-          he(Ie, { seatListWithRealSize: z.value }, null, 8, ["seatListWithRealSize"])
+          he(ye, { seatListWithRealSize: z.value }, null, 8, ["seatListWithRealSize"])
         ], 4),
         g(X) ? w("", !0) : (v(), M(me, {
           key: 1,
@@ -232,8 +232,8 @@ const Ve = {
       ], 2);
     };
   }
-}), Q = /* @__PURE__ */ xe($e, [["__scopeId", "data-v-3a7697b1"]]);
-J("en-US", { translation: Le });
+}), Q = /* @__PURE__ */ Le($e, [["__scopeId", "data-v-8d25163d"]]);
+J("en-US", { translation: xe });
 J("zh-CN", { translation: Ce });
 const Ae = Q, Ee = Q;
 export {

package/dist/components/MessageInput/TextEditor/EditorCore.js

@@ -1,5 +1,5 @@
-import { S as g, P as x, E as d, I as o } from "../../../index-Bm-QfV5o.js";
-import { E as M } from "../../../index-D2OVtqc8.js";
+import { S as g, P as x, E as d, I as o } from "../../../index-DTi1fL-x.js";
+import { E as M } from "../../../index-BfIEeWMg.js";
 import { MessageContentType as n } from "../../../states/MessageInputState/type.js";
 function y() {
   return o.extend({

package/dist/components/MessageList/MessageList.vue.d.ts

@@ -40,11 +40,11 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
 }>>> & Readonly<{}>, {
     filter: (message: MessageModel) => boolean;
     enableReadReceipt: boolean;
-    messageActionList: MessageAction[];
     Message: Component;
-    messageAggregationTime: number;
     MessageTimeDivider: Component;
+    messageActionList: MessageAction[];
     alignment: "left" | "right" | "two-sided";
+    messageAggregationTime: number;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
 export default _default;
 type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;

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

@@ -82,26 +82,26 @@ declare const MessageList: import('vue').DefineComponent<import('vue').ExtractPr
         type: import('vue').PropType<boolean>;
         default: boolean;
     };
-    messageActionList: {
-        type: import('vue').PropType<import('../../hooks/useMessageActions').MessageAction[]>;
-        default: undefined;
-    };
     Message: {
         type: import('vue').PropType<import('vue').Component>;
         default: undefined;
     };
-    messageAggregationTime: {
-        type: import('vue').PropType<number>;
-        default: number;
-    };
     MessageTimeDivider: {
         type: import('vue').PropType<import('vue').Component>;
         default: undefined;
     };
+    messageActionList: {
+        type: import('vue').PropType<import('../../hooks/useMessageActions').MessageAction[]>;
+        default: undefined;
+    };
     alignment: {
         type: import('vue').PropType<"left" | "right" | "two-sided">;
         default: string;
     };
+    messageAggregationTime: {
+        type: import('vue').PropType<number>;
+        default: number;
+    };
 }>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
     filter: {
         type: import('vue').PropType<(message: import('@tencentcloud/chat-uikit-engine').IMessageModel) => boolean>;
@@ -111,33 +111,33 @@ declare const MessageList: import('vue').DefineComponent<import('vue').ExtractPr
         type: import('vue').PropType<boolean>;
         default: boolean;
     };
-    messageActionList: {
-        type: import('vue').PropType<import('../../hooks/useMessageActions').MessageAction[]>;
-        default: undefined;
-    };
     Message: {
         type: import('vue').PropType<import('vue').Component>;
         default: undefined;
     };
-    messageAggregationTime: {
-        type: import('vue').PropType<number>;
-        default: number;
-    };
     MessageTimeDivider: {
         type: import('vue').PropType<import('vue').Component>;
         default: undefined;
     };
+    messageActionList: {
+        type: import('vue').PropType<import('../../hooks/useMessageActions').MessageAction[]>;
+        default: undefined;
+    };
     alignment: {
         type: import('vue').PropType<"left" | "right" | "two-sided">;
         default: string;
     };
+    messageAggregationTime: {
+        type: import('vue').PropType<number>;
+        default: number;
+    };
 }>> & Readonly<{}>, {
     filter: (message: import('@tencentcloud/chat-uikit-engine').IMessageModel) => boolean;
     enableReadReceipt: boolean;
-    messageActionList: import('../../hooks/useMessageActions').MessageAction[];
     Message: import('vue').Component;
-    messageAggregationTime: number;
     MessageTimeDivider: import('vue').Component;
+    messageActionList: import('../../hooks/useMessageActions').MessageAction[];
     alignment: "left" | "right" | "two-sided";
+    messageAggregationTime: number;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
 export { Message, MessageList, };

package/dist/components/MicButton/index.js

@@ -1,35 +1,35 @@
 import { defineComponent as d, computed as p, createElementBlock as _, openBlock as i, createElementVNode as f, normalizeClass as v, unref as e, createVNode as h, createBlock as b, createCommentVNode as k } from "vue";
 import { IconUnSupport as C } from "@tencentcloud/uikit-base-component-vue3";
-import { useDeviceState as B } from "../../states/DeviceState.js";
-import E from "./AudioIcon.js";
-import { DeviceStatus as n, DeviceError as x } from "../../types/device.js";
-import { _ as A } from "../../_plugin-vue_export-helper-CHgC5LLL.js";
-const L = { class: "mic-button-container" }, M = /* @__PURE__ */ d({
+import B from "./AudioIcon.js";
+import { useDeviceState as E } from "../../states/DeviceState/DeviceState.js";
+import { DeviceStatus as n, DeviceError as M } from "../../types/device.js";
+import { _ as x } from "../../_plugin-vue_export-helper-CHgC5LLL.js";
+const A = { class: "mic-button-container" }, L = /* @__PURE__ */ d({
   __name: "index",
   setup(N) {
     const {
-      audioVolume: r,
+      currentMicVolume: r,
       hasPublishAudioPermission: o,
       microphoneStatus: t,
       microphoneLastError: c,
       muteLocalAudio: a,
       openLocalMicrophone: s,
       unmuteLocalAudio: u
-    } = B(), m = p(() => t.value !== n.On);
+    } = E(), m = p(() => t.value !== n.On);
     async function l() {
       o.value && (t.value === n.On ? await a() : (await s(), await u()));
     }
-    return (S, V) => (i(), _("div", L, [
+    return (S, V) => (i(), _("div", A, [
       f("div", {
         class: v(["mic-button", { disabled: !e(o) }]),
         onClick: l
       }, [
-        h(E, {
+        h(B, {
           "audio-volume": e(r),
           "is-muted": m.value,
           "is-disabled": !e(o)
         }, null, 8, ["audio-volume", "is-muted", "is-disabled"]),
-        e(c) !== e(x).NoError ? (i(), b(e(C), {
+        e(c) !== e(M).NoError ? (i(), b(e(C), {
           key: 0,
           class: "unsupport-icon",
           size: "14"
@@ -37,7 +37,7 @@ const L = { class: "mic-button-container" }, M = /* @__PURE__ */ d({
       ], 2)
     ]));
   }
-}), P = /* @__PURE__ */ A(M, [["__scopeId", "data-v-672ec588"]]);
+}), P = /* @__PURE__ */ x(L, [["__scopeId", "data-v-944a3f62"]]);
 export {
   P as MicButton
 };

package/dist/components/StreamMixer/LocalMixer/MixerControl.js

@@ -1,17 +1,17 @@
 import { defineComponent as M, computed as d, createElementBlock as m, openBlock as c, Fragment as O, renderList as V, withModifiers as z, normalizeStyle as p, normalizeClass as w, createElementVNode as y, createBlock as k, resolveDynamicComponent as b, toDisplayString as h } from "vue";
 import { TRTCVideoMirrorType as v, TRTCVideoRotation as i } from "@tencentcloud/tuiroom-engine-js";
 import { useUIKit as D } from "@tencentcloud/uikit-base-component-vue3";
-import { useVideoMixerState as S } from "../../../states/VideoMixerState.js";
-import I from "../icons/CameraMirror.js";
-import g from "../icons/Delete.js";
-import A from "../icons/Down.js";
-import B from "../icons/Rotation.js";
-import E from "../icons/Up.js";
+import S from "../icons/CameraMirror.js";
+import I from "../icons/Delete.js";
+import g from "../icons/Down.js";
+import A from "../icons/Rotation.js";
+import B from "../icons/Up.js";
+import { useVideoMixerState as E } from "../../../states/VideoMixerState/VideoMixerState.js";
 import { _ as L } from "../../../_plugin-vue_export-helper-CHgC5LLL.js";
 const Z = ["onClick"], U = { class: "mixer-control-item-icon" }, j = { class: "mixer-control-item-name" }, F = /* @__PURE__ */ M({
   __name: "MixerControl",
   setup(K) {
-    const { activeMediaSource: t, mediaSourceList: T, updateMediaSource: a, removeMediaSource: C } = S(), { t: n } = D();
+    const { activeMediaSource: t, mediaSourceList: T, updateMediaSource: a, removeMediaSource: C } = E(), { t: n } = D();
     function R(o) {
       o.stopPropagation();
     }
@@ -25,7 +25,7 @@ const Z = ["onClick"], U = { class: "mixer-control-item-icon" }, j = { class: "m
       {
         name: "mirror",
         text: n("Mirror"),
-        icon: I,
+        icon: S,
         onClick: () => {
           const o = t.value.layout.mirror;
           a(t.value, {
@@ -38,7 +38,7 @@ const Z = ["onClick"], U = { class: "mixer-control-item-icon" }, j = { class: "m
       {
         name: "rotate",
         text: n("Rotate"),
-        icon: B,
+        icon: A,
         onClick: () => {
           const o = t.value.layout.rotation || i.TRTCVideoRotation0, r = {
             [i.TRTCVideoRotation0]: i.TRTCVideoRotation90,
@@ -52,7 +52,7 @@ const Z = ["onClick"], U = { class: "mixer-control-item-icon" }, j = { class: "m
       {
         name: "up",
         text: n("Move Up"),
-        icon: E,
+        icon: B,
         disable: f.value,
         onClick: async () => {
           const o = l.value.findIndex((u) => u.id === t.value.id), e = l.value[o + 1], r = t.value.layout.zOrder, s = e == null ? void 0 : e.layout.zOrder;
@@ -62,7 +62,7 @@ const Z = ["onClick"], U = { class: "mixer-control-item-icon" }, j = { class: "m
       {
         name: "down",
         text: n("Move Down"),
-        icon: A,
+        icon: g,
         disable: _.value,
         onClick: async () => {
           const o = l.value.findIndex((u) => u.id === t.value.id), e = l.value[o - 1], r = t.value.layout.zOrder, s = e == null ? void 0 : e.layout.zOrder;
@@ -72,7 +72,7 @@ const Z = ["onClick"], U = { class: "mixer-control-item-icon" }, j = { class: "m
       {
         name: "delete",
         text: n("Delete"),
-        icon: g,
+        icon: I,
         style: "color: red",
         onClick: () => {
           C(t.value);

package/dist/components/StreamMixer/LocalMixer/index.js

@@ -1,105 +1,108 @@
-import { defineComponent as Y, ref as T, computed as Z, watch as _, nextTick as ee, onMounted as te, onBeforeUnmount as oe, createElementBlock as Q, openBlock as S, createElementVNode as W, createBlock as ie, createCommentVNode as A, unref as w, normalizeStyle as ne, toDisplayString as ae } from "vue";
-import le, { TUIVideoQuality as v, TRTCVideoResolutionMode as L, TRTCVideoRotation as V } from "@tencentcloud/tuiroom-engine-js";
-import { useUIKit as re } from "@tencentcloud/uikit-base-component-vue3";
-import { useRoomEngine as se } from "../../../hooks/useRoomEngine.js";
-import { useLiveState as D } from "../../../states/LiveState/index.js";
-import { useVideoMixerState as ce } from "../../../states/VideoMixerState.js";
-import { debounce as ue } from "../../../utils/utils.js";
-import de from "./MixerControl.js";
-import { LiveOrientation as b, LiveStatus as N } from "../../../types/live.js";
-import { _ as me } from "../../../_plugin-vue_export-helper-CHgC5LLL.js";
-const pe = {
+import { defineComponent as q, ref as T, computed as F, watch as _, nextTick as J, onMounted as Y, onBeforeUnmount as Z, createElementBlock as Q, openBlock as b, createElementVNode as W, createBlock as ee, createCommentVNode as A, unref as w, normalizeStyle as te, toDisplayString as oe } from "vue";
+import ie, { TUIVideoQuality as g, TRTCVideoResolutionMode as S, TRTCVideoRotation as V } from "@tencentcloud/tuiroom-engine-js";
+import { useUIKit as ne } from "@tencentcloud/uikit-base-component-vue3";
+import { useRoomEngine as ae } from "../../../hooks/useRoomEngine.js";
+import { debounce as le } from "../../../utils/utils.js";
+import re from "./MixerControl.js";
+import { useVideoMixerState as se } from "../../../states/VideoMixerState/VideoMixerState.js";
+import { useLiveListState as ce } from "../../../states/LiveListState/LiveListState.js";
+import { LiveOrientation as L } from "../../../types/live.js";
+import { _ as ue } from "../../../_plugin-vue_export-helper-CHgC5LLL.js";
+const de = {
   key: 1,
   class: "local-mixer-placeholder"
-}, he = { class: "placeholder-text" }, d = 6, fe = /* @__PURE__ */ Y({
+}, me = { class: "placeholder-text" }, d = 6, pe = /* @__PURE__ */ q({
   __name: "index",
-  setup(ve) {
-    const { t: U } = re(), { currentLive: g } = D(), k = T(null), { publishVideoQuality: I, activeMediaSource: c, enableLocalVideoMixer: z, mediaSourceList: $ } = ce();
-    z();
-    const B = Z(() => {
+  setup(he) {
+    const { t: N } = ne(), { currentLive: m } = ce(), k = T(null), { publishVideoQuality: I, activeMediaSource: c, enableLocalVideoMixer: U, mediaSourceList: z } = se();
+    U();
+    const B = F(() => {
       var t, e;
-      return g.value && ((t = g.value) == null ? void 0 : t.layoutTemplate) >= 200 && ((e = g.value) == null ? void 0 : e.layoutTemplate) <= 599 ? b.Landscape : b.Portrait;
-    }), { localLiveStatus: G } = D(), x = se(), u = T();
-    function X(t, e) {
+      return m.value && ((t = m.value) == null ? void 0 : t.layoutTemplate) >= 200 && ((e = m.value) == null ? void 0 : e.layoutTemplate) <= 599 ? L.Landscape : L.Portrait;
+    }), x = ae(), u = T();
+    function D(t, e) {
       const i = {
-        [v.kVideoQuality_360p]: { width: 640, height: 360 },
-        [v.kVideoQuality_540p]: { width: 960, height: 540 },
-        [v.kVideoQuality_720p]: { width: 1280, height: 720 },
-        [v.kVideoQuality_1080p]: { width: 1920, height: 1080 }
+        [g.kVideoQuality_360p]: { width: 640, height: 360 },
+        [g.kVideoQuality_540p]: { width: 960, height: 540 },
+        [g.kVideoQuality_720p]: { width: 1280, height: 720 },
+        [g.kVideoQuality_1080p]: { width: 1920, height: 1080 }
       };
       let { width: n, height: o } = i[t];
-      return e === L.TRTCVideoResolutionModePortrait && ([n, o] = [o, n]), { width: n, height: o };
+      return e === S.TRTCVideoResolutionModePortrait && ([n, o] = [o, n]), { width: n, height: o };
     }
-    const E = T({
+    const P = T({
       position: "absolute",
       transform: "translate(0px, 0px)"
     });
-    let m, r;
-    function p() {
+    let p, r;
+    function h() {
       if (!u.value || !c.value)
         return;
-      const { width: t, height: e } = X(
+      const { width: t, height: e } = D(
         I.value,
-        B.value === b.Landscape ? L.TRTCVideoResolutionModeLandscape : L.TRTCVideoResolutionModePortrait
-      ), { width: i, height: n } = u.value.getBoundingClientRect(), o = Math.max(i / t, n / e), s = t * o, h = e * o, { top: C, left: a, right: l, bottom: R } = c.value.layout.rect, f = l - a, O = R - C, H = c.value.layout.rotation || V.TRTCVideoRotation0, q = C * o - (h - n) / 2, F = a * o - (s - i) / 2;
+        B.value === L.Landscape ? S.TRTCVideoResolutionModeLandscape : S.TRTCVideoResolutionModePortrait
+      ), { width: i, height: n } = u.value.getBoundingClientRect(), o = Math.max(i / t, n / e), s = t * o, f = e * o, { top: C, left: a, right: l, bottom: R } = c.value.layout.rect, v = l - a, O = R - C, H = c.value.layout.rotation || V.TRTCVideoRotation0, X = C * o - (f - n) / 2, K = a * o - (s - i) / 2;
       let y, M;
-      H === V.TRTCVideoRotation0 || H === V.TRTCVideoRotation180 ? (y = f * o, M = O * o) : (y = O * o, M = f * o);
-      const J = K(
-        F,
-        q,
+      H === V.TRTCVideoRotation0 || H === V.TRTCVideoRotation180 ? (y = v * o, M = O * o) : (y = O * o, M = v * o);
+      const j = $(
+        K,
+        X,
         y,
         M,
         i,
         n
       );
-      E.value = {
-        ...J,
+      P.value = {
+        ...j,
         position: "absolute"
       };
     }
-    function K(t, e, i, n, o, s) {
-      const h = e + n;
-      let a = t + i / 2 - m / 2, l = e - d - r;
-      a < 0 ? a = 0 : a + m > o && (a = o - m);
-      const R = e, f = s - h;
-      return l >= 0 && R >= r + d ? l = Math.min(l, s - r) : f >= r + d ? l = Math.max(0, h + d) : l = Math.max(0, e - r - d), {
+    function $(t, e, i, n, o, s) {
+      const f = e + n;
+      let a = t + i / 2 - p / 2, l = e - d - r;
+      a < 0 ? a = 0 : a + p > o && (a = o - p);
+      const R = e, v = s - f;
+      return l >= 0 && R >= r + d ? l = Math.min(l, s - r) : v >= r + d ? l = Math.max(0, f + d) : l = Math.max(0, e - r - d), {
         transform: `translate(${a}px, ${l}px)`
       };
     }
-    const j = ue(p, 16);
+    const G = le(h, 16);
     _(() => c.value, async (t, e) => {
       var i;
       if (!e && t) {
-        await ee();
+        await J();
         const n = (i = k.value) == null ? void 0 : i.$el, { width: o, height: s } = (n == null ? void 0 : n.getBoundingClientRect()) || { width: 0, height: 0 };
-        m = o, r = s;
+        p = o, r = s;
       }
-      p();
+      h();
     }, { immediate: !0, deep: !0 }), _(
       () => [I.value, B.value],
       ([t, e]) => {
-        !t || !e || p();
+        !t || !e || h();
       },
       { immediate: !0, deep: !0 }
     );
-    const P = new ResizeObserver(() => {
-      j();
+    const E = new ResizeObserver(() => {
+      G();
     });
-    return te(() => {
-      P.observe(u.value), le.once("ready", async () => {
+    return Y(() => {
+      E.observe(u.value), ie.once("ready", async () => {
         var e;
-        await ((e = x.instance) == null ? void 0 : e.getTRTCCloud().getMediaMixingManager()).bindPreviewArea(document.getElementById("local-video-mixer")), p();
-      }), _(G, async (t) => {
+        await ((e = x.instance) == null ? void 0 : e.getTRTCCloud().getMediaMixingManager()).bindPreviewArea(document.getElementById("local-video-mixer")), h();
+      }), _(() => {
+        var t;
+        return (t = m.value) == null ? void 0 : t.liveId;
+      }, async (t) => {
         var i;
         const e = (i = x.instance) == null ? void 0 : i.getTRTCCloud().getMediaMixingManager();
-        t === N.Live && await (e == null ? void 0 : e.startPublish()), t === N.IDLE && await (e == null ? void 0 : e.stopPublish());
+        t && await (e == null ? void 0 : e.startPublish()), t || await (e == null ? void 0 : e.stopPublish());
       });
-    }), oe(async () => {
+    }), Z(async () => {
       var e;
-      P.unobserve(u.value);
+      E.unobserve(u.value);
       const t = (e = x.instance) == null ? void 0 : e.getTRTCCloud().getMediaMixingManager();
       await (t == null ? void 0 : t.destroy());
-    }), (t, e) => (S(), Q("div", {
+    }), (t, e) => (b(), Q("div", {
       ref_key: "localMixerRef",
       ref: u,
       class: "local-mixer-container"
@@ -108,19 +111,19 @@ const pe = {
         id: "local-video-mixer",
         class: "local-mixer-content"
       }, null, -1)),
-      w(c) ? (S(), ie(de, {
+      w(c) ? (b(), ee(re, {
         key: 0,
         ref_key: "mixControlRef",
         ref: k,
         class: "mixer-control",
-        style: ne(E.value)
+        style: te(P.value)
       }, null, 8, ["style"])) : A("", !0),
-      w($).length === 0 ? (S(), Q("div", pe, [
-        W("span", he, ae(w(U)("No video")), 1)
+      w(z).length === 0 ? (b(), Q("div", de, [
+        W("span", me, oe(w(N)("No video")), 1)
       ])) : A("", !0)
     ], 512));
   }
-}), Le = /* @__PURE__ */ me(fe, [["__scopeId", "data-v-9e8c1226"]]);
+}), be = /* @__PURE__ */ ue(pe, [["__scopeId", "data-v-7f6babec"]]);
 export {
-  Le as default
+  be as default
 };

package/dist/components/StreamView/Layout/CustomLayout.js

@@ -1,10 +1,10 @@
-import { defineComponent as V, computed as l, ref as x, watch as R, onMounted as E, onBeforeUnmount as H, createElementBlock as _, openBlock as b, createElementVNode as W, normalizeStyle as O, Fragment as J, renderList as D, createBlock as P, unref as j, withCtx as q, renderSlot as A, mergeProps as G } from "vue";
+import { defineComponent as V, computed as l, ref as x, watch as R, onMounted as E, onBeforeUnmount as H, createElementBlock as _, openBlock as L, createElementVNode as W, normalizeStyle as O, Fragment as J, renderList as D, createBlock as P, unref as j, withCtx as q, renderSlot as A, mergeProps as G } from "vue";
 import K from "../common/StreamRegion/StreamRegionPC.js";
 import { useUserState as Q } from "../../../states/UserState/index.js";
 import { TUIVideoStreamType as Z } from "@tencentcloud/tuiroom-engine-js";
 import { useRoomState as ee } from "../../../states/RoomState.js";
 import { useLoginState as te } from "../../../states/LoginState.js";
-import { useLiveState as re } from "../../../states/LiveState/index.js";
+import { useLiveListState as re } from "../../../states/LiveListState/LiveListState.js";
 import { _ as ae } from "../../../_plugin-vue_export-helper-CHgC5LLL.js";
 const oe = /* @__PURE__ */ V({
   __name: "CustomLayout",
@@ -17,10 +17,10 @@ const oe = /* @__PURE__ */ V({
   },
   emits: ["stream-view-dblclick"],
   setup(z, { emit: M }) {
-    const { userList: m, localUser: N, userListOnSeat: p } = Q(), { currentRoom: L } = ee(), { currentLive: v } = re(), { loginUserInfo: T } = te(), F = M, d = z, g = l(() => {
+    const { userList: m, localUser: N, userListOnSeat: p } = Q(), { currentRoom: b } = ee(), { currentLive: v } = re(), { loginUserInfo: T } = te(), F = M, d = z, g = l(() => {
       var t, e;
-      if (L.value)
-        return (t = L.value) != null && t.isSeatEnabled ? p.value : m.value;
+      if (b.value)
+        return (t = b.value) != null && t.isSeatEnabled ? p.value : m.value;
       if (v.value) {
         if (v.value.isSeatEnabled) {
           if (p.value.length > 0)
@@ -135,7 +135,7 @@ const oe = /* @__PURE__ */ V({
     function U(t, e) {
       F("stream-view-dblclick", t, e);
     }
-    return (t, e) => (b(), _("div", {
+    return (t, e) => (L(), _("div", {
       class: "custom-layout-container",
       ref_key: "streamListContainerRef",
       ref: s
@@ -146,7 +146,7 @@ const oe = /* @__PURE__ */ V({
         ref: Y,
         style: O(i.value)
       }, [
-        (b(!0), _(J, null, D(X.value, (r, u) => (b(), P(j(K), {
+        (L(!0), _(J, null, D(X.value, (r, u) => (L(), P(j(K), {
           class: "stream-list-item",
           key: `${r.userInfo.userId}_${r.streamType}`,
           userInfo: r.userInfo,
@@ -163,7 +163,7 @@ const oe = /* @__PURE__ */ V({
       ], 4)
     ], 512));
   }
-}), de = /* @__PURE__ */ ae(oe, [["__scopeId", "data-v-a35188d8"]]);
+}), de = /* @__PURE__ */ ae(oe, [["__scopeId", "data-v-6267e055"]]);
 export {
   de as default
 };