tuikit-atomicx-vue3 3.4.1 → 4.3.0

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

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

@@ -1,14 +1,11 @@
-import { defineComponent as q, ref as O, computed as l, onMounted as G, onBeforeUnmount as K, watch as N, createElementBlock as M, openBlock as B, createElementVNode as J, normalizeStyle as T, createCommentVNode as Q, createVNode as W, unref as C, withCtx as H, renderSlot as V, normalizeProps as E, guardReactiveProps as z } from "vue";
-import $ from "../common/StreamRegion/StreamRegionPC.js";
-import { TUIVideoStreamType as v } from "@tencentcloud/tuiroom-engine-js";
-import { useUserState as ee } from "../../../states/UserState/index.js";
-import { useLiveState as te } from "../../../states/LiveState/index.js";
-import { useRoomEngine as re } from "../../../hooks/useRoomEngine.js";
-import { DeviceStatus as h } from "../../../types/device.js";
-import { LiveStatus as A } from "../../../types/live.js";
-import { SeatStatus as oe } from "../../../types/user.js";
-import { _ as ae } from "../../../_plugin-vue_export-helper-CHgC5LLL.js";
-const ie = { class: "main-view" }, _ = 1920, P = 1080, ne = /* @__PURE__ */ q({
+import { defineComponent as X, ref as I, computed as n, onMounted as Y, onBeforeUnmount as Z, createElementBlock as R, openBlock as F, createElementVNode as O, normalizeStyle as b, createCommentVNode as D, createVNode as M, unref as L, withCtx as V, renderSlot as $, normalizeProps as B, guardReactiveProps as N } from "vue";
+import { TUIVideoStreamType as u } from "@tencentcloud/tuiroom-engine-js";
+import { useUserState as j } from "../../../states/UserState/index.js";
+import W from "../common/StreamRegion/StreamRegionPC.js";
+import { useLiveListState as q } from "../../../states/LiveListState/LiveListState.js";
+import { DeviceStatus as m } from "../../../types/device.js";
+import { _ as G } from "../../../_plugin-vue_export-helper-CHgC5LLL.js";
+const K = { class: "main-view" }, w = 1920, H = 1080, Q = /* @__PURE__ */ X({
   __name: "FloatLayout",
   props: {
     config: { default: () => JSON.stringify({
@@ -20,46 +17,46 @@ const ie = { class: "main-view" }, _ = 1920, P = 1080, ne = /* @__PURE__ */ q({
     filterFn: { type: Function, default: () => !0 },
     sortFn: { type: Function, default: () => 0 }
   },
-  setup(X) {
-    var U, k;
-    const { localUser: x, userListWithVideo: Y } = ee(), { currentLive: c, localLiveStatus: b } = te(), w = re(), p = X, s = O(), Z = O(), y = O({
+  setup(T) {
+    var _, U;
+    const { localUser: z, userListWithVideo: A } = j(), { currentLive: y } = q(), f = T, r = I(), E = I(), v = I({
       width: "0",
       height: "0"
     });
-    function u(t) {
-      return Number(t.replace("px", ""));
+    function a(e) {
+      return Number(e.replace("px", ""));
     }
-    const m = l(() => u(y.value.width) / _);
-    async function D() {
-      if (!s.value)
+    const i = n(() => a(v.value.width) / w);
+    async function J() {
+      if (!r.value)
         return;
-      const t = s.value.getBoundingClientRect(), r = Math.floor(t.width), e = Math.floor(t.height), o = 16, a = 9;
-      let i = r, n = e;
-      const f = r / o, g = e / a;
-      f > g && (i = e / a * o, n = e), f <= g && (i = r, n = r / o * a), y.value.width = `${Math.floor(i)}px`, y.value.height = `${Math.floor(n)}px`;
+      const e = r.value.getBoundingClientRect(), t = Math.floor(e.width), o = Math.floor(e.height), s = 16, c = 9;
+      let d = t, S = o;
+      const k = t / s, C = o / c;
+      k > C && (d = o / c * s, S = o), k <= C && (d = t, S = t / s * c), v.value.width = `${Math.floor(d)}px`, v.value.height = `${Math.floor(S)}px`;
     }
-    const R = new ResizeObserver(() => {
-      D();
+    const x = new ResizeObserver(() => {
+      J();
     });
-    G(() => {
-      s.value && R.observe(s.value);
-    }), K(() => {
-      s.value && R.unobserve(s.value);
+    Y(() => {
+      r.value && x.observe(r.value);
+    }), Z(() => {
+      r.value && x.unobserve(r.value);
     });
-    const S = l(() => {
-      const t = Y.value.filter(p.filterFn);
-      return p.sortFn ? t.sort(p.sortFn) : t;
-    }), L = l(() => {
-      const t = S.value.find((r) => r.screenStatus === h.On);
-      return t || S.value[0];
-    }), I = l(() => L.value.screenStatus === h.On ? v.kScreenStream : v.kCameraStream), d = l(() => I.value === v.kScreenStream ? S.value.find((t) => t.cameraStatus === h.On) : S.value.find((t) => {
-      var r;
-      return t.cameraStatus === h.On && t.userId !== ((r = L.value) == null ? void 0 : r.userId);
+    const h = n(() => {
+      const e = A.value.filter(f.filterFn);
+      return f.sortFn ? e.sort(f.sortFn) : e;
+    }), p = n(() => {
+      const e = h.value.find((t) => t.screenStatus === m.On);
+      return e || h.value[0];
+    }), g = n(() => p.value.screenStatus === m.On ? u.kScreenStream : u.kCameraStream), l = n(() => g.value === u.kScreenStream ? h.value.find((e) => e.cameraStatus === m.On) : h.value.find((e) => {
+      var t;
+      return e.cameraStatus === m.On && e.userId !== ((t = p.value) == null ? void 0 : t.userId);
     }));
-    if (((U = x.value) == null ? void 0 : U.userId) === ((k = c.value) == null ? void 0 : k.liveOwner.userId)) {
-      const t = l(() => {
-        var e, o;
-        return !d.value || d.value.cameraStatus !== h.On ? null : {
+    if (((_ = z.value) == null ? void 0 : _.userId) === ((U = y.value) == null ? void 0 : U.liveOwner.userId)) {
+      const e = n(() => {
+        var t, o;
+        return !l.value || l.value.cameraStatus !== m.On ? null : {
           LocationX: 1540,
           // 以画面左上角为原点的 x 坐标
           LocationY: 20,
@@ -70,119 +67,119 @@ const ie = { class: "main-view" }, _ = 1920, P = 1080, ne = /* @__PURE__ */ q({
           // 调整后的画面高度
           ZOrder: 1,
           // 画面层级
-          StreamType: v.kCameraStream,
+          StreamType: u.kCameraStream,
           // 0 摄像头, 1 屏幕共享, 2 白板, 3 自定义
-          Member_Account: (e = d.value) == null ? void 0 : e.userId,
+          Member_Account: (t = l.value) == null ? void 0 : t.userId,
           // 该路流的用户ID
           BackgroundImageUrl: "",
-          RoomId: (o = c.value) == null ? void 0 : o.liveId,
+          RoomId: (o = y.value) == null ? void 0 : o.liveId,
           BackgroundColor: "0x1F212C"
         };
-      }), r = l(() => {
-        var e;
-        return {
-          // 设置画布大小
-          VideoEncode: {
-            Width: _,
-            Height: P
-          },
-          LayoutMode: 1e3,
-          // 0~9 内置布局模板， 1000自定义布局， 只有1000时候才能修改LayoutInfo,目前只支持 0 和 1000
-          // 设置画面布局
-          LayoutInfo: {
-            LayoutList: t.value ? [t.value] : [],
-            MaxUserLayout: {
-              ZOrder: 0,
-              //层级
-              StreamType: I.value,
-              // 0为摄像头， 1为屏幕共享
-              Member_Account: L.value.userId,
-              BackgroundImageUrl: "",
-              //可以设置看看，可能在最大画面时候没作用
-              RoomId: (e = c.value) == null ? void 0 : e.liveId,
-              BackgroundColor: "0x1F212C",
-              LocationX: 0,
-              // 以画面左上角为原点的 x 坐标
-              LocationY: 0,
-              // 以画面左上角为原点的 y 坐标
-              ImageWidth: _,
-              // 调整后的画面宽度
-              ImageHeight: P,
-              RenderMode: I.value === v.kScreenStream ? 2 : 0
-            }
-          }
-        };
-      });
-      N(() => r.value, async (e, o) => {
-        var i, n;
-        if (console.error("lixin-debug mix watch layoutConfig change 111", JSON.stringify(e), JSON.stringify(o)), b.value !== A.Live || JSON.stringify(e) === JSON.stringify(o))
-          return;
-        const a = (i = w.instance) == null ? void 0 : i.getLiveLayoutManager();
-        console.error("lixin-debug mix setLiveStreamLayoutInfo 111", e), await (a == null ? void 0 : a.setLiveStreamLayoutInfo((n = c.value) == null ? void 0 : n.liveId, JSON.stringify(e)));
-      }, { immediate: !0, deep: !0 }), N(() => {
-        var e;
-        return [b.value, (e = x.value) == null ? void 0 : e.seatStatus];
-      }, async ([e, o], [a, i]) => {
-        var n;
-        console.error("lixin-debug mix localLiveStatus 222", e, a, o, i), !(e === a && o === i) && e === A.Live && o === oe.On && x.value.userId === ((n = c.value) == null ? void 0 : n.liveOwner.userId) && setTimeout(async () => {
-          var g, F;
-          const f = (g = w.instance) == null ? void 0 : g.getLiveLayoutManager();
-          console.error("lixin-debug mix setLiveStreamLayoutInfo 222", r.value), await (f == null ? void 0 : f.setLiveStreamLayoutInfo((F = c.value) == null ? void 0 : F.liveId, JSON.stringify(r.value)));
-        }, 1e3);
       });
+      n(
+        () => {
+          var t;
+          return (
+            // const userOnSeatListConfig = userListOnSeat.value.map(user => {
+            //   return {
+            //     "LocationX": 0,                   // 以画面左上角为原点的 x 坐标
+            //     "LocationY": 0,                  // 以画面左上角为原点的 y 坐标
+            //     "ImageWidth": 0,               // 调整后的画面宽度
+            //     "ImageHeight": 0,               // 调整后的画面高度
+            //     "ZOrder": 0,                      // 画面层级
+            //     "StreamType": TUIVideoStreamType.kCameraStream,                  // 0 摄像头, 1 屏幕共享, 2 白板, 3 自定义
+            //     "Member_Account": user.userId,     // 该路流的用户ID
+            //     "RoomId": user.roomId,
+            //   }
+            // });
+            {
+              // 设置画布大小
+              VideoEncode: {
+                Width: w,
+                Height: H
+              },
+              LayoutMode: 1e3,
+              // 0~9 内置布局模板， 1000自定义布局， 只有1000时候才能修改LayoutInfo,目前只支持 0 和 1000
+              // 设置画面布局
+              LayoutInfo: {
+                LayoutList: e.value ? [e.value] : [],
+                MaxUserLayout: {
+                  ZOrder: 0,
+                  // 层级
+                  StreamType: g.value,
+                  // 0为摄像头， 1为屏幕共享
+                  Member_Account: p.value.userId,
+                  BackgroundImageUrl: "",
+                  // 可以设置看看，可能在最大画面时候没作用
+                  RoomId: (t = y.value) == null ? void 0 : t.liveId,
+                  BackgroundColor: "0x1F212C",
+                  LocationX: 0,
+                  // 以画面左上角为原点的 x 坐标
+                  LocationY: 0,
+                  // 以画面左上角为原点的 y 坐标
+                  ImageWidth: w,
+                  // 调整后的画面宽度
+                  ImageHeight: H,
+                  RenderMode: g.value === u.kScreenStream ? 2 : 0
+                }
+              }
+            }
+          );
+        }
+      );
     }
-    const j = () => {
-      const { top: t, right: r, bottom: e, left: o, width: a, height: i } = JSON.parse(p.config);
+    const P = () => {
+      const { top: e, right: t, bottom: o, left: s, width: c, height: d } = JSON.parse(f.config);
       return {
-        width: u(a) * m.value + "px",
-        height: u(i) * m.value + "px",
-        ...t !== void 0 ? { top: u(t) * m.value + "px" } : {},
-        ...r !== void 0 ? { right: u(r) * m.value + "px" } : {},
-        ...e !== void 0 ? { bottom: u(e) * m.value + "px" } : {},
-        ...o !== void 0 ? { left: u(o) * m.value + "px" } : {}
+        width: `${a(c) * i.value}px`,
+        height: `${a(d) * i.value}px`,
+        ...e !== void 0 ? { top: `${a(e) * i.value}px` } : {},
+        ...t !== void 0 ? { right: `${a(t) * i.value}px` } : {},
+        ...o !== void 0 ? { bottom: `${a(o) * i.value}px` } : {},
+        ...s !== void 0 ? { left: `${a(s) * i.value}px` } : {}
       };
     };
-    return (t, r) => (B(), M("div", {
-      class: "float-layout-container",
+    return (e, t) => (F(), R("div", {
       ref_key: "streamListContainerRef",
-      ref: s
+      ref: r,
+      class: "float-layout-container"
     }, [
-      J("div", {
-        class: "float-layout",
+      O("div", {
         ref_key: "streamListRef",
-        ref: Z,
-        style: T(y.value)
+        ref: E,
+        class: "float-layout",
+        style: b(v.value)
       }, [
-        J("div", ie, [
-          W(C($), {
-            "user-info": L.value,
-            "stream-type": I.value
+        O("div", K, [
+          M(L(W), {
+            "user-info": p.value,
+            "stream-type": g.value
           }, {
-            streamViewUI: H((e) => [
-              V(t.$slots, "streamViewUI", E(z(e)), void 0, !0)
+            streamViewUI: V((o) => [
+              $(e.$slots, "streamViewUI", B(N(o)), void 0, !0)
             ]),
             _: 3
           }, 8, ["user-info", "stream-type"])
         ]),
-        d.value ? (B(), M("div", {
+        l.value ? (F(), R("div", {
           key: 0,
           class: "float-view",
-          style: T(j())
+          style: b(P())
         }, [
-          W(C($), {
-            "user-info": d.value,
-            "stream-type": C(v).kCameraStream
+          M(L(W), {
+            "user-info": l.value,
+            "stream-type": L(u).kCameraStream
           }, {
-            streamViewUI: H((e) => [
-              V(t.$slots, "streamViewUI", E(z(e)), void 0, !0)
+            streamViewUI: V((o) => [
+              $(e.$slots, "streamViewUI", B(N(o)), void 0, !0)
             ]),
             _: 3
           }, 8, ["user-info", "stream-type"])
-        ], 4)) : Q("", !0)
+        ], 4)) : D("", !0)
       ], 4)
     ], 512));
   }
-}), pe = /* @__PURE__ */ ae(ne, [["__scopeId", "data-v-0fdb5f8b"]]);
+}), se = /* @__PURE__ */ G(Q, [["__scopeId", "data-v-65a6a095"]]);
 export {
-  pe as default
+  se as default
 };

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

@@ -5,9 +5,9 @@ import { useUserState as ve } from "../../../states/UserState/index.js";
 import { TUIVideoStreamType as F } from "@tencentcloud/tuiroom-engine-js";
 import { safelyParse as fe } from "../../../utils/utils.js";
 import { useRoomState as he } from "../../../states/RoomState.js";
-import { useDeviceState as pe } from "../../../states/DeviceState.js";
-import { useLoginState as de } from "../../../states/LoginState.js";
-import { getNewUserInfo as ye } from "../../../states/UserState/store.js";
+import { useLoginState as pe } from "../../../states/LoginState.js";
+import { getNewUserInfo as de } from "../../../states/UserState/store.js";
+import { useDeviceState as ye } from "../../../states/DeviceState/DeviceState.js";
 import { LocalRoomStatus as ge } from "../../../types/room.js";
 import { _ as Se } from "../../../_plugin-vue_export-helper-CHgC5LLL.js";
 const i = "16:9", we = /* @__PURE__ */ Q({
@@ -24,14 +24,14 @@ const i = "16:9", we = /* @__PURE__ */ Q({
   },
   emits: ["stream-view-dblclick"],
   setup(W, { emit: H }) {
-    const { userList: O, userListOnSeat: T, userWithScreenOn: g } = ve(), { microphoneStatus: V, cameraStatus: E } = pe(), { currentRoom: L, localRoomStatus: B } = he(), { loginUserInfo: N } = de(), q = H, S = W, t = n(() => fe(S.config) || {
+    const { userList: O, userListOnSeat: T, userWithScreenOn: g } = ve(), { microphoneStatus: V, cameraStatus: E } = ye(), { currentRoom: L, localRoomStatus: B } = he(), { loginUserInfo: N } = pe(), q = H, S = W, t = n(() => fe(S.config) || {
       maxRows: 3,
       maxColumns: 3,
       rowSpacing: 8,
       columnSpacing: 8
     }), D = n(() => {
       var a;
-      const e = ye(((a = N.value) == null ? void 0 : a.userId) || "local_fake_user");
+      const e = de(((a = N.value) == null ? void 0 : a.userId) || "local_fake_user");
       return e.cameraStatus = E.value, e.microphoneStatus = V.value, e;
     }), P = n(() => {
       var e;