tuikit-atomicx-vue3 3.3.3 → 3.4.1

package/dist/components/StreamMixer/icons/Delete.js

@@ -1,33 +1,32 @@
-import { createElementBlock, openBlock, createElementVNode } from "vue";
-import { _ as _export_sfc } from "../../../_plugin-vue_export-helper-1tPrXgE0.js";
-const _sfc_main = {};
-const _hoisted_1 = {
+import { createElementBlock as e, openBlock as o, createElementVNode as l } from "vue";
+import { _ as i } from "../../../_plugin-vue_export-helper-CHgC5LLL.js";
+const r = {}, n = {
   xmlns: "http://www.w3.org/2000/svg",
   width: "16",
   height: "16",
   viewBox: "0 0 16 16",
   fill: "none"
 };
-function _sfc_render(_ctx, _cache) {
-  return openBlock(), createElementBlock("svg", _hoisted_1, [..._cache[0] || (_cache[0] = [
-    createElementVNode("path", {
+function c(f, t) {
+  return o(), e("svg", n, [...t[0] || (t[0] = [
+    l("path", {
       d: "M6 12V6H7V12H6Z",
       "fill-opacity": "0.9",
-      style: { "fill": "currentColor", "fill-opacity": "0.9" }
+      style: { fill: "currentColor", "fill-opacity": "0.9" }
     }, null, -1),
-    createElementVNode("path", {
+    l("path", {
       d: "M9 6V12H10V6H9Z",
       "fill-opacity": "0.9",
-      style: { "fill": "currentColor", "fill-opacity": "0.9" }
+      style: { fill: "currentColor", "fill-opacity": "0.9" }
     }, null, -1),
-    createElementVNode("path", {
+    l("path", {
       d: "M10.5 3H14V4H13V14C13 14.5523 12.5523 15 12 15H4C3.44772 15 3 14.5523 3 14V4H2V3H5.5L5.5 1.8C5.5 1.35817 5.85817 1 6.3 1H9.7C10.1418 1 10.5 1.35817 10.5 1.8V3ZM6.5 3H9.5L9.5 2L6.5 2V3ZM4 4V14H12V4H4Z",
       "fill-opacity": "0.9",
-      style: { "fill": "currentColor", "fill-opacity": "0.9" }
+      style: { fill: "currentColor", "fill-opacity": "0.9" }
     }, null, -1)
   ])]);
 }
-const Delete = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+const a = /* @__PURE__ */ i(r, [["render", c]]);
 export {
-  Delete as default
+  a as default
 };

package/dist/components/StreamMixer/icons/Down.js

@@ -1,30 +1,29 @@
-import { createElementBlock, openBlock, createElementVNode } from "vue";
-import { _ as _export_sfc } from "../../../_plugin-vue_export-helper-1tPrXgE0.js";
-const _sfc_main = {};
-const _hoisted_1 = {
+import { createElementBlock as r, openBlock as t, createElementVNode as o } from "vue";
+import { _ as n } from "../../../_plugin-vue_export-helper-CHgC5LLL.js";
+const s = {}, l = {
   xmlns: "http://www.w3.org/2000/svg",
   width: "18",
   height: "18",
   viewBox: "0 0 18 18",
   fill: "none"
 };
-function _sfc_render(_ctx, _cache) {
-  return openBlock(), createElementBlock("svg", _hoisted_1, [..._cache[0] || (_cache[0] = [
-    createElementVNode("path", {
+function i(c, e) {
+  return t(), r("svg", l, [...e[0] || (e[0] = [
+    o("path", {
       d: "M9.00342 12.8867V2.1575",
       stroke: "currentcolor",
       "stroke-width": "1.5",
       "stroke-linecap": "round",
       "stroke-linejoin": "round"
     }, null, -1),
-    createElementVNode("path", {
+    o("path", {
       d: "M4.06299 7.99265L9.00003 12.9297L13.9371 7.99265",
       stroke: "currentcolor",
       "stroke-width": "1.5",
       "stroke-linecap": "round",
       "stroke-linejoin": "round"
     }, null, -1),
-    createElementVNode("path", {
+    o("path", {
       d: "M4.06299 15.8457H13.9371",
       stroke: "currentcolor",
       "stroke-width": "1.5",
@@ -33,7 +32,7 @@ function _sfc_render(_ctx, _cache) {
     }, null, -1)
   ])]);
 }
-const Down = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+const k = /* @__PURE__ */ n(s, [["render", i]]);
 export {
-  Down as default
+  k as default
 };

package/dist/components/StreamMixer/icons/Rotation.js

@@ -1,30 +1,29 @@
-import { createElementBlock, openBlock, createElementVNode } from "vue";
-import { _ as _export_sfc } from "../../../_plugin-vue_export-helper-1tPrXgE0.js";
-const _sfc_main = {};
-const _hoisted_1 = {
+import { createElementBlock as o, openBlock as e, createElementVNode as t } from "vue";
+import { _ as i } from "../../../_plugin-vue_export-helper-CHgC5LLL.js";
+const c = {}, n = {
   xmlns: "http://www.w3.org/2000/svg",
   width: "16",
   height: "16",
   viewBox: "0 0 16 16",
   fill: "none"
 };
-function _sfc_render(_ctx, _cache) {
-  return openBlock(), createElementBlock("svg", _hoisted_1, [..._cache[0] || (_cache[0] = [
-    createElementVNode("path", {
+function a(f, l) {
+  return e(), o("svg", n, [...l[0] || (l[0] = [
+    t("path", {
       d: "M8.00016 2.71134C10.8965 2.71134 13.2534 5.0736 13.2534 7.99868H14.2148C14.2148 4.54763 11.4324 1.75 8.00016 1.75C5.76382 1.75 3.80336 2.93771 2.7087 4.72001L2.7087 2.64252H1.75V5.74894C1.75 6.02508 1.97386 6.24894 2.25 6.24894L5.33676 6.24894V5.28498L3.49045 5.28498C4.40906 3.74211 6.08692 2.71134 8.00016 2.71134Z",
       fill: "black",
       "fill-opacity": "0.9",
-      style: { "fill": "black", "fill-opacity": "0.9" }
+      style: { fill: "black", "fill-opacity": "0.9" }
     }, null, -1),
-    createElementVNode("path", {
+    t("path", {
       d: "M1.78554 7.99863H2.74687C2.74687 10.9237 5.10379 13.286 8.00015 13.286C9.91339 13.286 11.5912 12.2553 12.5099 10.7124H10.6632V9.74843H13.75C14.0261 9.74843 14.25 9.97228 14.25 10.2484V13.3548H13.2913V11.2779C12.1966 13.0599 10.2363 14.2474 8.00015 14.2474C4.56792 14.2474 1.78554 11.4497 1.78554 7.99863Z",
       fill: "black",
       "fill-opacity": "0.9",
-      style: { "fill": "black", "fill-opacity": "0.9" }
+      style: { fill: "black", "fill-opacity": "0.9" }
     }, null, -1)
   ])]);
 }
-const Rotation = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+const p = /* @__PURE__ */ i(c, [["render", a]]);
 export {
-  Rotation as default
+  p as default
 };

package/dist/components/StreamMixer/icons/Up.js

@@ -1,30 +1,29 @@
-import { createElementBlock, openBlock, createElementVNode } from "vue";
-import { _ as _export_sfc } from "../../../_plugin-vue_export-helper-1tPrXgE0.js";
-const _sfc_main = {};
-const _hoisted_1 = {
+import { createElementBlock as r, openBlock as t, createElementVNode as o } from "vue";
+import { _ as n } from "../../../_plugin-vue_export-helper-CHgC5LLL.js";
+const s = {}, l = {
   xmlns: "http://www.w3.org/2000/svg",
   width: "18",
   height: "18",
   viewBox: "0 0 18 18",
   fill: "none"
 };
-function _sfc_render(_ctx, _cache) {
-  return openBlock(), createElementBlock("svg", _hoisted_1, [..._cache[0] || (_cache[0] = [
-    createElementVNode("path", {
+function i(c, e) {
+  return t(), r("svg", l, [...e[0] || (e[0] = [
+    o("path", {
       d: "M9.00342 5.11328V15.8425",
       stroke: "currentcolor",
       "stroke-width": "1.5",
       "stroke-linecap": "round",
       "stroke-linejoin": "round"
     }, null, -1),
-    createElementVNode("path", {
+    o("path", {
       d: "M4.06299 10.0074L9.00003 5.07031L13.9371 10.0074",
       stroke: "currentcolor",
       "stroke-width": "1.5",
       "stroke-linecap": "round",
       "stroke-linejoin": "round"
     }, null, -1),
-    createElementVNode("path", {
+    o("path", {
       d: "M4.06299 2.15234H13.9371",
       stroke: "currentcolor",
       "stroke-width": "1.5",
@@ -33,7 +32,7 @@ function _sfc_render(_ctx, _cache) {
     }, null, -1)
   ])]);
 }
-const Up = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+const k = /* @__PURE__ */ n(s, [["render", i]]);
 export {
-  Up as default
+  k as default
 };

package/dist/components/StreamMixer/index.js

@@ -1,26 +1,24 @@
-import { defineComponent, createBlock, openBlock, unref, withCtx, createVNode, normalizeStyle } from "vue";
-import { LiveCoreView as LiveCoreViewComponent } from "../LiveCoreView/index.js";
-import LocalMixer from "./LocalMixer/index.js";
-import { addI18n } from "../../i18n/index.js";
-import { resource } from "./i18n/en-US/index.js";
-import { resource as resource$1 } from "./i18n/zh-CN/index.js";
-const _sfc_main = /* @__PURE__ */ defineComponent({
+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 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({
   __name: "index",
-  setup(__props) {
-    return (_ctx, _cache) => {
-      return openBlock(), createBlock(unref(LiveCoreViewComponent), { "ignore-local-video": true }, {
-        localVideo: withCtx(({ style }) => [
-          createVNode(LocalMixer, {
-            style: normalizeStyle(style)
-          }, null, 8, ["style"])
-        ]),
-        _: 1
-      });
-    };
+  setup(u) {
+    return (_, d) => (i(), t(n(l), { "ignore-local-video": !0 }, {
+      localVideo: a(({ style: o }) => [
+        m(s, {
+          style: c(o)
+        }, null, 8, ["style"])
+      ]),
+      _: 1
+    }));
   }
 });
-addI18n("en-US", { translation: resource });
-addI18n("zh-CN", { translation: resource$1 });
+e("en-US", { translation: p });
+e("zh-CN", { translation: f });
 export {
-  _sfc_main as StreamMixer
+  y as StreamMixer
 };

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

@@ -1,246 +1,169 @@
-import { defineComponent, computed, ref, watch, onMounted, onBeforeUnmount, createElementBlock, openBlock, createElementVNode, normalizeStyle, Fragment, renderList, createBlock, unref, withCtx, renderSlot, mergeProps } from "vue";
-import StreamRegion from "../common/StreamRegion/StreamRegionPC.js";
-import { useUserState } from "../../../states/UserState/index.js";
-import { TUIVideoStreamType } from "@tencentcloud/tuiroom-engine-js";
-import { useRoomState } from "../../../states/RoomState.js";
-import { useLoginState } from "../../../states/LoginState.js";
-import { useLiveState } from "../../../states/LiveState/index.js";
-import { _ as _export_sfc } from "../../../_plugin-vue_export-helper-1tPrXgE0.js";
-const _sfc_main = /* @__PURE__ */ defineComponent({
+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 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 { _ as ae } from "../../../_plugin-vue_export-helper-CHgC5LLL.js";
+const oe = /* @__PURE__ */ V({
   __name: "CustomLayout",
   props: {
     config: { default: () => JSON.stringify({
       layoutList: []
     }) },
-    filterFn: { type: Function, default: () => true },
+    filterFn: { type: Function, default: () => !0 },
     sortFn: { type: Function, default: () => 0 }
   },
   emits: ["stream-view-dblclick"],
-  setup(__props, { emit: __emit }) {
-    const { userList, localUser, userListOnSeat } = useUserState();
-    const { currentRoom } = useRoomState();
-    const { currentLive } = useLiveState();
-    const { loginUserInfo } = useLoginState();
-    const emits = __emit;
-    const props = __props;
-    const totalUserList = computed(() => {
-      var _a, _b;
-      if (currentRoom.value) {
-        return ((_a = currentRoom.value) == null ? void 0 : _a.isSeatEnabled) ? userListOnSeat.value : userList.value;
-      }
-      if (currentLive.value) {
-        if (currentLive.value.isSeatEnabled) {
-          if (userListOnSeat.value.length > 0) {
-            return userListOnSeat.value;
-          }
-          if (currentLive.value.liveOwner.userId === ((_b = loginUserInfo.value) == null ? void 0 : _b.userId)) {
-            return [localUser.value];
-          }
-        } else {
-          return userList.value;
-        }
+  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(() => {
+      var t, e;
+      if (L.value)
+        return (t = L.value) != null && t.isSeatEnabled ? p.value : m.value;
+      if (v.value) {
+        if (v.value.isSeatEnabled) {
+          if (p.value.length > 0)
+            return p.value;
+          if (v.value.liveOwner.userId === ((e = T.value) == null ? void 0 : e.userId))
+            return [N.value];
+        } else
+          return m.value;
         return [];
       }
-      return userList.value;
-    });
-    const renderUserInfoList = computed(() => {
-      var _a;
-      if (!totalUserList.value || totalUserList.value.length === 0) return [];
-      return (_a = totalUserList.value) == null ? void 0 : _a.filter(props.filterFn).sort(props.sortFn).map((item) => {
-        return {
-          userInfo: item,
-          streamType: TUIVideoStreamType.kCameraStream
-        };
-      });
-    });
-    const streamListContainerRef = ref();
-    const streamListRef = ref();
-    const aspectRatio = computed(() => {
-      return "16:9";
-    });
-    const originStreamListStyle = ref({
+      return m.value;
+    }), X = l(() => {
+      var t;
+      return !g.value || g.value.length === 0 ? [] : (t = g.value) == null ? void 0 : t.filter(d.filterFn).sort(d.sortFn).map((e) => ({
+        userInfo: e,
+        streamType: Z.kCameraStream
+      }));
+    }), s = x(), Y = x(), h = l(() => "16:9"), a = x({
       width: 0,
       height: 0,
       transformX: 0,
       transformY: 0,
       scale: 1
-    });
-    const streamListStyle = computed(() => {
+    }), i = l(() => ({
+      width: `${a.value.width * a.value.scale}px`,
+      height: `${a.value.height * a.value.scale}px`,
+      transform: `translate(${a.value.transformX * a.value.scale}px, ${a.value.transformY * a.value.scale}px)`
+    })), f = l(() => {
+      const { layoutList: t } = JSON.parse(d.config);
+      return t ? t.map((r) => r.width > 1 || r.height > 1 ? {
+        left: o(a.value.width) * (r.x / 720),
+        top: o(a.value.width) * (r.y / 720),
+        width: o(a.value.width) * (r.width / 720),
+        height: o(a.value.height) * (r.height / 1280),
+        zIndex: r.zOrder,
+        backgroundColor: r.backgroundColor
+      } : {
+        left: o(a.value.width) * r.x,
+        top: o(a.value.width) * r.y,
+        width: o(a.value.width) * r.width,
+        height: r.height === -1 ? o(a.value.height) : o(a.value.width) * r.height,
+        zIndex: r.zOrder,
+        backgroundColor: r.backgroundColor
+      }) : [];
+    }), c = l(() => {
+      const t = Math.min(...f.value.map((n) => n.left)), e = Math.min(...f.value.map((n) => n.top)), r = Math.max(...f.value.map((n) => n.left + n.width)), u = Math.max(...f.value.map((n) => n.top + n.height));
       return {
-        width: `${originStreamListStyle.value.width * originStreamListStyle.value.scale}px`,
-        height: `${originStreamListStyle.value.height * originStreamListStyle.value.scale}px`,
-        transform: `translate(${originStreamListStyle.value.transformX * originStreamListStyle.value.scale}px, ${originStreamListStyle.value.transformY * originStreamListStyle.value.scale}px)`
+        width: r - t,
+        height: u - e,
+        centerX: (t + r) / 2,
+        centerY: (e + u) / 2
       };
     });
-    const customConfig = computed(() => {
-      const { layoutList } = JSON.parse(props.config);
-      if (!layoutList) return [];
-      const absoluteLayoutList = layoutList.map((item) => {
-        if (item.width > 1 || item.height > 1) {
-          return {
-            left: stringToNumber(originStreamListStyle.value.width) * (item.x / 720),
-            top: stringToNumber(originStreamListStyle.value.width) * (item.y / 720),
-            width: stringToNumber(originStreamListStyle.value.width) * (item.width / 720),
-            height: stringToNumber(originStreamListStyle.value.height) * (item.height / 1280),
-            zIndex: item.zOrder,
-            backgroundColor: item.backgroundColor
-          };
-        }
-        return {
-          left: stringToNumber(originStreamListStyle.value.width) * item.x,
-          top: stringToNumber(originStreamListStyle.value.width) * item.y,
-          width: stringToNumber(originStreamListStyle.value.width) * item.width,
-          height: item.height === -1 ? stringToNumber(originStreamListStyle.value.height) : stringToNumber(originStreamListStyle.value.width) * item.height,
-          zIndex: item.zOrder,
-          backgroundColor: item.backgroundColor
-        };
-      });
-      return absoluteLayoutList;
-    });
-    const streamContainerSize = computed(() => {
-      const minX = Math.min(...customConfig.value.map((item) => item.left));
-      const minY = Math.min(...customConfig.value.map((item) => item.top));
-      const maxX = Math.max(...customConfig.value.map((item) => item.left + item.width));
-      const maxY = Math.max(...customConfig.value.map((item) => item.top + item.height));
-      return {
-        width: maxX - minX,
-        height: maxY - minY,
-        centerX: (minX + maxX) / 2,
-        centerY: (minY + maxY) / 2
-      };
-    });
-    watch(streamContainerSize, () => {
-      handleStreamListTransform();
+    R(c, () => {
+      S();
     });
-    function handleStreamListTransform() {
-      const containerRect = streamListContainerRef.value.getBoundingClientRect();
-      const containerWidth = Math.floor(containerRect.width);
-      const containerHeight = Math.floor(containerRect.height);
-      const scaleWidth = containerWidth / streamContainerSize.value.width;
-      const scaleHeight = containerHeight / streamContainerSize.value.height;
-      originStreamListStyle.value.scale = Math.min(scaleWidth, scaleHeight);
-      originStreamListStyle.value.transformX = stringToNumber(originStreamListStyle.value.width) / 2 - streamContainerSize.value.centerX;
-      originStreamListStyle.value.transformY = stringToNumber(originStreamListStyle.value.height) / 2 - streamContainerSize.value.centerY;
+    function S() {
+      const t = s.value.getBoundingClientRect(), e = Math.floor(t.width), r = Math.floor(t.height), u = e / c.value.width, n = r / c.value.height;
+      a.value.scale = Math.min(u, n), a.value.transformX = o(a.value.width) / 2 - c.value.centerX, a.value.transformY = o(a.value.height) / 2 - c.value.centerY;
     }
-    const widthRatio = computed(() => {
-      var _a, _b;
-      if (!aspectRatio.value || ((_a = aspectRatio.value) == null ? void 0 : _a.indexOf(":")) < 0) {
-        return 0;
-      }
-      return Number((_b = aspectRatio.value) == null ? void 0 : _b.split(":")[0]);
-    });
-    const heightRatio = computed(() => {
-      if (!aspectRatio.value || aspectRatio.value.indexOf(":") < 0) {
-        return 0;
-      }
-      return Number(aspectRatio.value.split(":")[1]);
-    });
-    async function handleLayout() {
-      if (!streamListContainerRef.value) {
+    const w = l(() => {
+      var t, e;
+      return !h.value || ((t = h.value) == null ? void 0 : t.indexOf(":")) < 0 ? 0 : Number((e = h.value) == null ? void 0 : e.split(":")[0]);
+    }), y = l(() => !h.value || h.value.indexOf(":") < 0 ? 0 : Number(h.value.split(":")[1]));
+    async function k() {
+      if (!s.value)
         return;
-      }
-      const containerRect = streamListContainerRef.value.getBoundingClientRect();
-      const containerWidth = Math.floor(containerRect.width);
-      const containerHeight = Math.floor(containerRect.height);
-      let width = containerWidth;
-      let height = containerHeight;
-      const scaleWidth = containerWidth / widthRatio.value;
-      const scaleHeight = containerHeight / heightRatio.value;
-      if (scaleWidth > scaleHeight) {
-        width = containerHeight / heightRatio.value * widthRatio.value;
-        height = containerHeight;
-      }
-      if (scaleWidth <= scaleHeight) {
-        width = containerWidth;
-        height = containerWidth / widthRatio.value * heightRatio.value;
-      }
-      originStreamListStyle.value.width = Math.floor(width);
-      originStreamListStyle.value.height = Math.floor(height);
+      const t = s.value.getBoundingClientRect(), e = Math.floor(t.width), r = Math.floor(t.height);
+      let u = e, n = r;
+      const $ = e / w.value, I = r / y.value;
+      $ > I && (u = r / y.value * w.value, n = r), $ <= I && (u = e, n = e / w.value * y.value), a.value.width = Math.floor(u), a.value.height = Math.floor(n);
     }
-    function stringToNumber(str) {
-      if (typeof str !== "string") {
-        return str;
-      }
-      return Number(str.replace("px", ""));
+    function o(t) {
+      return typeof t != "string" ? t : Number(t.replace("px", ""));
     }
-    function getStreamStyle(index) {
-      const streamLayoutConfig = JSON.parse(props.config).layoutList[index];
-      if (!streamLayoutConfig) return;
-      if ((streamLayoutConfig == null ? void 0 : streamLayoutConfig.width) > 1) {
-        return {
-          left: `${stringToNumber(streamListStyle.value.width) * (streamLayoutConfig.x / 720)}px`,
-          top: `${stringToNumber(streamListStyle.value.width) * (streamLayoutConfig.y / 720)}px`,
-          width: `${stringToNumber(streamListStyle.value.width) * (streamLayoutConfig.width / 720)}px`,
-          height: `${stringToNumber(streamListStyle.value.height) * (streamLayoutConfig.height / 1280)}px`,
-          zIndex: streamLayoutConfig.zOrder,
-          backgroundColor: streamLayoutConfig.backgroundColor
+    function B(t) {
+      const e = JSON.parse(d.config).layoutList[t];
+      if (e)
+        return (e == null ? void 0 : e.width) > 1 ? {
+          left: `${o(i.value.width) * (e.x / 720)}px`,
+          top: `${o(i.value.width) * (e.y / 720)}px`,
+          width: `${o(i.value.width) * (e.width / 720)}px`,
+          height: `${o(i.value.height) * (e.height / 1280)}px`,
+          zIndex: e.zOrder,
+          backgroundColor: e.backgroundColor
+        } : {
+          left: `${o(i.value.width) * e.x}px`,
+          top: `${o(i.value.width) * e.y}px`,
+          width: `${o(i.value.width) * e.width}px`,
+          height: e.height === -1 ? `${o(i.value.height)}px` : `${o(i.value.width) * e.height}px`,
+          zIndex: e.zOrder,
+          backgroundColor: e.backgroundColor
         };
-      }
-      return {
-        left: `${stringToNumber(streamListStyle.value.width) * streamLayoutConfig.x}px`,
-        top: `${stringToNumber(streamListStyle.value.width) * streamLayoutConfig.y}px`,
-        width: `${stringToNumber(streamListStyle.value.width) * streamLayoutConfig.width}px`,
-        height: streamLayoutConfig.height === -1 ? `${stringToNumber(streamListStyle.value.height)}px` : `${stringToNumber(streamListStyle.value.width) * streamLayoutConfig.height}px`,
-        zIndex: streamLayoutConfig.zOrder,
-        backgroundColor: streamLayoutConfig.backgroundColor
-      };
     }
-    watch(
+    R(
       () => {
-        var _a;
-        return (_a = currentLive.value) == null ? void 0 : _a.layoutTemplate;
+        var t;
+        return (t = v.value) == null ? void 0 : t.layoutTemplate;
       },
       () => {
-        handleLayout();
+        k();
       }
     );
-    const resizeObserver = new ResizeObserver(() => {
-      handleLayout();
-      handleStreamListTransform();
-    });
-    onMounted(() => {
-      resizeObserver.observe(streamListContainerRef.value);
+    const C = new ResizeObserver(() => {
+      k(), S();
     });
-    onBeforeUnmount(() => {
-      resizeObserver.unobserve(streamListContainerRef.value);
+    E(() => {
+      C.observe(s.value);
+    }), H(() => {
+      C.unobserve(s.value);
     });
-    function handleStreamDblClick(userInfo, streamType) {
-      emits("stream-view-dblclick", userInfo, streamType);
+    function U(t, e) {
+      F("stream-view-dblclick", t, e);
     }
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", {
-        class: "custom-layout-container",
-        ref_key: "streamListContainerRef",
-        ref: streamListContainerRef
+    return (t, e) => (b(), _("div", {
+      class: "custom-layout-container",
+      ref_key: "streamListContainerRef",
+      ref: s
+    }, [
+      W("div", {
+        class: "stream-list",
+        ref_key: "streamListRef",
+        ref: Y,
+        style: O(i.value)
       }, [
-        createElementVNode("div", {
-          class: "stream-list",
-          ref_key: "streamListRef",
-          ref: streamListRef,
-          style: normalizeStyle(streamListStyle.value)
-        }, [
-          (openBlock(true), createElementBlock(Fragment, null, renderList(renderUserInfoList.value, (renderUserInfo, index) => {
-            return openBlock(), createBlock(unref(StreamRegion), {
-              class: "stream-list-item",
-              key: `${renderUserInfo.userInfo.userId}_${renderUserInfo.streamType}`,
-              userInfo: renderUserInfo.userInfo,
-              "stream-type": renderUserInfo.streamType,
-              style: normalizeStyle(getStreamStyle(index)),
-              "aspect-ratio": "auto",
-              onStreamViewDblclick: handleStreamDblClick
-            }, {
-              streamViewUI: withCtx((slotProps) => [
-                renderSlot(_ctx.$slots, "streamViewUI", mergeProps({ ref_for: true }, slotProps), void 0, true)
-              ]),
-              _: 3
-            }, 8, ["userInfo", "stream-type", "style"]);
-          }), 128))
-        ], 4)
-      ], 512);
-    };
+        (b(!0), _(J, null, D(X.value, (r, u) => (b(), P(j(K), {
+          class: "stream-list-item",
+          key: `${r.userInfo.userId}_${r.streamType}`,
+          userInfo: r.userInfo,
+          "stream-type": r.streamType,
+          style: O(B(u)),
+          "aspect-ratio": "auto",
+          onStreamViewDblclick: U
+        }, {
+          streamViewUI: q((n) => [
+            A(t.$slots, "streamViewUI", G({ ref_for: !0 }, n), void 0, !0)
+          ]),
+          _: 3
+        }, 8, ["userInfo", "stream-type", "style"]))), 128))
+      ], 4)
+    ], 512));
   }
-});
-const CustomLayout = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-a35188d8"]]);
+}), de = /* @__PURE__ */ ae(oe, [["__scopeId", "data-v-a35188d8"]]);
 export {
-  CustomLayout as default
+  de as default
 };