tuikit-atomicx-vue3 3.4.1 → 3.5.0-beta.7

package/dist/components/Search/SearchBar/SearchBar.js

@@ -1,9 +1,9 @@
-import { defineComponent as g, ref as N, watch as V, computed as E, createElementBlock as u, openBlock as n, normalizeStyle as p, normalizeClass as s, createCommentVNode as d, createVNode as f, unref as o, withCtx as v, createElementVNode as A, createBlock as h, resolveDynamicComponent as m, toDisplayString as T } from "vue";
-import { useUIKit as $, IconBack as w, TUIInput as M, IconCloseInput as F, IconSearch as K } from "@tencentcloud/uikit-base-component-vue3";
+import { defineComponent as D, ref as g, watch as N, computed as V, createElementBlock as i, openBlock as t, normalizeStyle as E, normalizeClass as u, createCommentVNode as d, createVNode as m, unref as o, withCtx as v, createElementVNode as p, createBlock as h, resolveDynamicComponent as y, toDisplayString as A } from "vue";
+import { useUIKit as T, IconBack as $, TUIInput as w, IconCloseInput as M, IconSearch as F } from "@tencentcloud/uikit-base-component-vue3";
 import { VariantType as r } from "../../../types/search.js";
-import { isH5 as z } from "../../../utils/env.js";
-import { _ as R } from "../../../_plugin-vue_export-helper-CHgC5LLL.js";
-const U = { key: 1 }, x = /* @__PURE__ */ g({
+import { isH5 as b } from "../../../utils/env.js";
+import { _ as K } from "../../../_plugin-vue_export-helper-CHgC5LLL.js";
+const z = { key: 1 }, R = /* @__PURE__ */ D({
   __name: "SearchBar",
   props: {
     value: { default: "" },
@@ -20,74 +20,74 @@ const U = { key: 1 }, x = /* @__PURE__ */ g({
     autoFocus: { type: Boolean, default: !1 },
     variant: { default: r.STANDARD }
   },
-  setup(c) {
-    const e = c, l = N(e.value);
-    V(
+  setup(n) {
+    const e = n, l = g(e.value);
+    N(
       () => e.value,
       (a) => {
         l.value = a || "";
       }
     );
-    const { t: _ } = $(), S = E(() => e.variant !== r.MINI && e.variant !== r.EXACT && z), I = {
+    const { t: _ } = T(), S = V(() => e.variant !== r.MINI && e.variant !== r.EXACT && b), I = {
       [r.EXACT]: _("Search.action.search"),
       [r.STANDARD]: _("Search.action.search"),
       [r.MINI]: _("Search.action.search"),
       [r.EMBEDDED]: _("Search.results.title")
     }, C = (a) => {
-      var y;
-      const i = {
+      var f;
+      const s = {
         target: { value: String(a) }
       };
-      (y = e.onChange) == null || y.call(e, i);
-    }, b = (a) => {
-      var t;
-      (t = e.onFocus) == null || t.call(e, a);
+      (f = e.onChange) == null || f.call(e, s);
     }, k = (a) => {
-      var t;
-      (t = e.onBlur) == null || t.call(e, a);
-    }, D = (a) => {
-      var t;
+      var c;
+      (c = e.onFocus) == null || c.call(e, a);
+    }, x = (a) => {
+      var c;
+      (c = e.onBlur) == null || c.call(e, a);
+    }, j = (a) => {
+      var c;
       if (a) {
-        const i = new KeyboardEvent("keydown", { key: "Enter" });
-        (t = e.onKeyDown) == null || t.call(e, i);
+        const s = new KeyboardEvent("keydown", { key: "Enter" });
+        (c = e.onKeyDown) == null || c.call(e, s);
       }
     }, B = () => {
       var a;
       l.value = "", (a = e.onClear) == null || a.call(e);
     };
-    return (a, t) => (n(), u("div", {
-      class: s([a.$style.SearchBar, S.value && a.$style["SearchBar--h5"], c.className]),
-      style: p(c.style)
+    return (a, c) => (t(), i("div", {
+      class: u([a.$style.SearchBar, S.value && a.$style["SearchBar--h5"], n.className]),
+      style: E(n.style)
     }, [
-      S.value ? (n(), u("div", {
+      S.value ? (t(), i("div", {
         key: 0,
-        class: s(a.$style.SearchBar__left),
+        class: u(a.$style.SearchBar__left),
         onClick: B
       }, [
-        f(o(w), { size: 24 })
+        m(o($), { size: 24 })
       ], 2)) : d("", !0),
-      f(o(M), {
+      m(o(w), {
         modelValue: l.value,
-        "onUpdate:modelValue": t[0] || (t[0] = (i) => l.value = i),
-        placeholder: c.placeholder || I[c.variant || o(r).STANDARD],
+        "onUpdate:modelValue": c[0] || (c[0] = (s) => l.value = s),
+        placeholder: n.placeholder || I[n.variant || o(r).STANDARD],
         onInput: C,
-        onFocus: b,
-        onBlur: k,
-        onDone: D
+        onFocus: k,
+        onBlur: x,
+        onDone: j
       }, {
         prefix: v(() => [
-          c.SearchIcon ? (n(), h(m(c.SearchIcon), { key: 0 })) : (n(), h(o(K), { key: 1 }))
+          n.SearchIcon ? (t(), h(y(n.SearchIcon), { key: 0 })) : (t(), h(o(F), { key: 1 }))
         ]),
         suffix: v(() => [
-          !S.value && l.value ? (n(), u("div", {
+          !S.value && l.value ? (t(), i("div", {
             key: 0,
-            class: s(a.$style.SearchBar__actions)
+            class: u(a.$style.SearchBar__actions)
           }, [
-            A("div", {
-              class: s(a.$style["SearchBar__clear-icon"]),
+            p("div", {
+              class: u(a.$style["SearchBar__clear-icon"]),
               onClick: B
             }, [
-              c.ClearIcon ? (n(), h(m(c.ClearIcon), { key: 0 })) : (n(), h(o(F), {
+              n.ClearIcon ? (t(), h(y(n.ClearIcon), { key: 0 })) : (t(), h(o(M), {
                 key: 1,
                 class: "clearIcon"
               }))
@@ -96,36 +96,34 @@ const U = { key: 1 }, x = /* @__PURE__ */ g({
         ]),
         _: 1
       }, 8, ["modelValue", "placeholder"]),
-      S.value ? (n(), u("div", {
+      S.value ? (t(), i("div", {
         key: 1,
-        class: s(a.$style.SearchBar__right),
+        class: u(a.$style.SearchBar__right),
         onClick: B
       }, [
-        c.ClearIcon ? (n(), h(m(c.ClearIcon), { key: 0 })) : (n(), u("span", U, T(o(_)("Search.action.cancel")), 1))
+        n.ClearIcon ? (t(), h(y(n.ClearIcon), { key: 0 })) : (t(), i("span", z, A(o(_)("Search.action.cancel")), 1))
       ], 2)) : d("", !0)
     ], 6));
   }
-}), H = "_SearchBar_1ob40_295", X = "_SearchBar__left_1ob40_301", P = "_SearchBar__right_1ob40_304", j = "_SearchBar__icon_1ob40_308", q = "_SearchBar__input_1ob40_313", G = "_clearIcon_1ob40_372", J = "_SearchBar__button_1ob40_382", L = "_SearchBar__actions_1ob40_386", O = {
-  "tui-theme-dark": "_tui-theme-dark_1ob40_2",
-  "tui-theme-light": "_tui-theme-light_1ob40_140",
-  SearchBar: H,
-  SearchBar__left: X,
-  SearchBar__right: P,
-  SearchBar__icon: j,
+}), U = "_SearchBar_1jsx0_1", H = "_SearchBar__left_1jsx0_7", X = "_SearchBar__right_1jsx0_10", P = "_SearchBar__icon_1jsx0_14", q = "_SearchBar__input_1jsx0_19", G = "_clearIcon_1jsx0_78", J = "_SearchBar__button_1jsx0_88", L = "_SearchBar__actions_1jsx0_92", O = {
+  SearchBar: U,
+  SearchBar__left: H,
+  SearchBar__right: X,
+  SearchBar__icon: P,
   SearchBar__input: q,
-  "tui-input": "_tui-input_1ob40_316",
-  "tui-input__native-input": "_tui-input__native-input_1ob40_319",
-  "tui-input__prefix-icon": "_tui-input__prefix-icon_1ob40_336",
-  "tui-input__clear-icon": "_tui-input__clear-icon_1ob40_347",
-  "SearchBar__clear-icon": "_SearchBar__clear-icon_1ob40_365",
+  "tui-input": "_tui-input_1jsx0_22",
+  "tui-input__native-input": "_tui-input__native-input_1jsx0_25",
+  "tui-input__prefix-icon": "_tui-input__prefix-icon_1jsx0_42",
+  "tui-input__clear-icon": "_tui-input__clear-icon_1jsx0_53",
+  "SearchBar__clear-icon": "_SearchBar__clear-icon_1jsx0_71",
   clearIcon: G,
-  "SearchBar__clear-icon--default": "_SearchBar__clear-icon--default_1ob40_378",
+  "SearchBar__clear-icon--default": "_SearchBar__clear-icon--default_1jsx0_84",
   SearchBar__button: J,
   SearchBar__actions: L,
-  "SearchBar--h5": "_SearchBar--h5_1ob40_391"
+  "SearchBar--h5": "_SearchBar--h5_1jsx0_97"
 }, Q = {
   $style: O
-}, te = /* @__PURE__ */ R(x, [["__cssModules", Q]]);
+}, ce = /* @__PURE__ */ K(R, [["__cssModules", Q]]);
 export {
-  te as default
+  ce as default
 };

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/StreamMixer/index.js

@@ -1,16 +1,16 @@
-import { defineComponent as r, createBlock as t, openBlock as i, unref as n, withCtx as a, createVNode as m, normalizeStyle as c } from "vue";
-import { LiveCoreView as l } from "../LiveCoreView/index.js";
+import { defineComponent as o, createBlock as t, openBlock as i, unref as n, withCtx as a, createVNode as m, normalizeStyle as c } from "vue";
+import { LiveCoreView as l } from "../LiveView/index.js";
 import s from "./LocalMixer/index.js";
 import { addI18n as e } from "../../i18n/index.js";
 import { resource as p } from "./i18n/en-US/index.js";
 import { resource as f } from "./i18n/zh-CN/index.js";
-const y = /* @__PURE__ */ r({
+const k = /* @__PURE__ */ o({
   __name: "index",
   setup(u) {
     return (_, d) => (i(), t(n(l), { "ignore-local-video": !0 }, {
-      localVideo: a(({ style: o }) => [
+      localVideo: a(({ style: r }) => [
         m(s, {
-          style: c(o)
+          style: c(r)
         }, null, 8, ["style"])
       ]),
       _: 1
@@ -20,5 +20,5 @@ const y = /* @__PURE__ */ r({
 e("en-US", { translation: p });
 e("zh-CN", { translation: f });
 export {
-  y as StreamMixer
+  k as StreamMixer
 };

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
 };