tuikit-atomicx-vue3 3.3.3 → 3.4.1

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

@@ -1,18 +1,18 @@
-import { defineComponent, computed, ref, watch, createElementBlock, openBlock, normalizeClass, createBlock, createCommentVNode, createElementVNode, unref, withCtx, renderSlot, normalizeProps, guardReactiveProps, createVNode } from "vue";
-import ArrowStroke from "../common/ArrowStroke.js";
-import StreamRegion from "../common/StreamRegion/StreamRegionPC.js";
-import StreamList from "../common/StreamList/index.js";
-import { TUIVideoStreamType } from "@tencentcloud/tuiroom-engine-js";
-import { useUserState } from "../../../states/UserState/index.js";
-import { useRoomState } from "../../../states/RoomState.js";
-import { StreamPlayQuality, StreamPlayMode } from "../../../types/stream.js";
-import { DeviceStatus } from "../../../types/device.js";
-import { _ as _export_sfc } from "../../../_plugin-vue_export-helper-1tPrXgE0.js";
-const _sfc_main = /* @__PURE__ */ defineComponent({
+import { defineComponent as E, computed as r, ref as d, watch as f, createElementBlock as A, openBlock as L, normalizeClass as k, createBlock as b, createCommentVNode as J, createElementVNode as Q, unref as S, withCtx as W, renderSlot as z, normalizeProps as H, guardReactiveProps as K, createVNode as G } from "vue";
+import Y from "../common/ArrowStroke.js";
+import j from "../common/StreamRegion/StreamRegionPC.js";
+import X from "../common/StreamList/index.js";
+import { TUIVideoStreamType as s } from "@tencentcloud/tuiroom-engine-js";
+import { useUserState as Z } from "../../../states/UserState/index.js";
+import { useRoomState as ee } from "../../../states/RoomState.js";
+import { StreamPlayQuality as P, StreamPlayMode as te } from "../../../types/stream.js";
+import { DeviceStatus as T } from "../../../types/device.js";
+import { _ as re } from "../../../_plugin-vue_export-helper-CHgC5LLL.js";
+const ae = /* @__PURE__ */ E({
   __name: "MeetingLayout",
   props: {
     config: { default: () => JSON.stringify({
-      showControlBar: true,
+      showControlBar: !0,
       preferLayout: "nine_equal_points",
       gridLayout: {
         maxColumns: 3,
@@ -29,252 +29,150 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         maxRows: 1
       }
     }) },
-    filterFn: { type: Function, default: (streamInfo, index, list) => true },
-    sortFn: { type: Function, default: (streamInfo, index, list) => 0 }
+    filterFn: { type: Function, default: (y, g, _) => !0 },
+    sortFn: { type: Function, default: (y, g, _) => 0 }
   },
-  setup(__props) {
-    const { currentRoom } = useRoomState();
-    const { userList, userListOnSeat, userWithScreenOn, localUser, userListWithCameraOn } = useUserState();
-    const localCameraStreamInfo = computed(() => {
-      var _a;
-      if (((_a = localUser.value) == null ? void 0 : _a.cameraStatus) === DeviceStatus.On) {
-        return {
-          userInfo: localUser.value,
-          streamType: TUIVideoStreamType.kCameraStream
-        };
-      }
-      return null;
-    });
-    const screenStreamInfo = computed(() => {
-      if (userWithScreenOn.value) {
-        return {
-          userInfo: userWithScreenOn.value,
-          streamType: TUIVideoStreamType.kScreenStream
-        };
-      }
-      return null;
-    });
-    const allStreamInfoList = computed(() => {
-      var _a;
-      let cameraStreamList = [];
-      if ((_a = currentRoom.value) == null ? void 0 : _a.isSeatEnabled) {
-        cameraStreamList = userListOnSeat.value.map((user) => ({
-          userInfo: user,
-          streamType: TUIVideoStreamType.kCameraStream
-        }));
-      } else {
-        cameraStreamList = userList.value.map((user) => ({
-          userInfo: user,
-          streamType: TUIVideoStreamType.kCameraStream
-        }));
-      }
-      if (screenStreamInfo.value) {
-        return [screenStreamInfo.value, ...cameraStreamList];
-      }
-      return cameraStreamList;
-    });
-    const renderStreamInfoList = computed(() => {
-      if (props.filterFn) {
-        return allStreamInfoList.value.filter(props.filterFn);
-      }
-      return allStreamInfoList.value;
-    });
-    const gridLayoutStreamList = computed(() => {
-      var _a;
-      if (currentLayout.value === "nine_equal_points") {
-        return renderStreamInfoList.value;
-      } else {
-        if (((_a = enlargeStream.value) == null ? void 0 : _a.streamType) === TUIVideoStreamType.kScreenStream || !userWithScreen.value) {
-          return renderStreamInfoList.value.filter((stream) => stream.streamType !== TUIVideoStreamType.kScreenStream);
-        } else if (screenStreamInfo.value) {
-          return renderStreamInfoList.value;
-        }
-      }
-      return [];
-    });
-    const props = __props;
-    const streamListConfig = computed(() => {
-      if (currentLayout.value === "nine_equal_points") {
-        return JSON.stringify(JSON.parse(props.config).gridLayout);
-      }
-      if (currentLayout.value === "right_side_list") {
-        return JSON.stringify(JSON.parse(props.config).rightLayout);
-      }
-      if (currentLayout.value === "top_side_list") {
-        return JSON.stringify(JSON.parse(props.config).topLayout);
-      }
-      return JSON.stringify(JSON.parse(props.config).gridLayout);
-    });
-    const showControlBar = computed(() => {
-      var _a;
-      return (_a = JSON.parse(props.config)) == null ? void 0 : _a.showControlBar;
-    });
-    const preferLayout = computed(() => {
-      var _a;
-      return (_a = JSON.parse(props.config)) == null ? void 0 : _a.preferLayout;
-    });
-    const currentLayout = ref(preferLayout.value);
-    watch(preferLayout, (val) => {
-      currentLayout.value = val;
+  setup(y) {
+    const { currentRoom: g } = ee(), { userList: _, userListOnSeat: V, userWithScreenOn: w, localUser: I, userListWithCameraOn: C } = Z(), D = r(() => {
+      var e;
+      return ((e = I.value) == null ? void 0 : e.cameraStatus) === T.On ? {
+        userInfo: I.value,
+        streamType: s.kCameraStream
+      } : null;
+    }), u = r(() => w.value ? {
+      userInfo: w.value,
+      streamType: s.kScreenStream
+    } : null), h = r(() => {
+      var a;
+      let e = [];
+      return (a = g.value) != null && a.isSeatEnabled ? e = V.value.map((i) => ({
+        userInfo: i,
+        streamType: s.kCameraStream
+      })) : e = _.value.map((i) => ({
+        userInfo: i,
+        streamType: s.kCameraStream
+      })), u.value ? [u.value, ...e] : e;
+    }), c = r(() => n.filterFn ? h.value.filter(n.filterFn) : h.value), q = r(() => {
+      var e;
+      return t.value === "nine_equal_points" ? c.value : ((e = v.value) == null ? void 0 : e.streamType) === s.kScreenStream || !userWithScreen.value ? c.value.filter((a) => a.streamType !== s.kScreenStream) : u.value ? c.value : [];
+    }), n = y, B = r(() => t.value === "nine_equal_points" ? JSON.stringify(JSON.parse(n.config).gridLayout) : t.value === "right_side_list" ? JSON.stringify(JSON.parse(n.config).rightLayout) : t.value === "top_side_list" ? JSON.stringify(JSON.parse(n.config).topLayout) : JSON.stringify(JSON.parse(n.config).gridLayout)), R = r(() => {
+      var e;
+      return (e = JSON.parse(n.config)) == null ? void 0 : e.showControlBar;
+    }), O = r(() => {
+      var e;
+      return (e = JSON.parse(n.config)) == null ? void 0 : e.preferLayout;
+    }), t = d(O.value);
+    f(O, (e) => {
+      t.value = e;
     });
-    const getStreamKey = (stream) => `${stream == null ? void 0 : stream.userInfo.userId}_${stream == null ? void 0 : stream.streamType}`;
-    const isSideListLayout = computed(
+    const N = (e) => `${e == null ? void 0 : e.userInfo.userId}_${e == null ? void 0 : e.streamType}`, m = r(
       () => [
         "right_side_list",
         "top_side_list"
         /* TOP_SIDE_LIST */
-      ].indexOf(currentLayout.value) >= 0
-    );
-    const fixedStream = ref(null);
-    const enlargeStream = computed(() => {
-      if (!isSideListLayout.value) {
-        return null;
-      }
-      if (fixedStream.value) {
-        return fixedStream.value;
-      }
-      if (screenStreamInfo.value) {
-        return screenStreamInfo.value;
-      }
-      if (userListWithCameraOn.value.length > 0) {
-        return {
-          userInfo: userListWithCameraOn.value[0],
-          streamType: TUIVideoStreamType.kCameraStream
-        };
-      }
-      return localCameraStreamInfo.value;
-    });
-    watch(
-      () => allStreamInfoList.value.length,
-      (val) => {
-        if (val === 1 && isSideListLayout.value) {
-          currentLayout.value = "nine_equal_points";
-        }
-      }
-    );
-    watch(
+      ].indexOf(t.value) >= 0
+    ), o = d(null), v = r(() => m.value ? o.value ? o.value : u.value ? u.value : C.value.length > 0 ? {
+      userInfo: C.value[0],
+      streamType: s.kCameraStream
+    } : D.value : null);
+    f(
+      () => h.value.length,
+      (e) => {
+        e === 1 && m.value && (t.value = "nine_equal_points");
+      }
+    ), f(
       () => {
-        var _a;
-        return ((_a = screenStreamInfo.value) == null ? void 0 : _a.userInfo.screenStatus) === DeviceStatus.On;
+        var e;
+        return ((e = u.value) == null ? void 0 : e.userInfo.screenStatus) === T.On;
       },
-      (val, oldVal) => {
-        if (val && !oldVal) {
-          fixedStream.value = null;
-          if (!isSideListLayout.value) {
-            currentLayout.value = "right_side_list";
-          }
+      (e, a) => {
+        e && !a && (o.value = null, m.value || (t.value = "right_side_list"));
+      }
+    ), f(
+      () => c.value.map((e) => N(e)),
+      (e, a) => {
+        if (o.value) {
+          const i = N(o.value);
+          !e.includes(i) && a.includes(i) && (o.value = null);
         }
       }
     );
-    watch(
-      () => renderStreamInfoList.value.map((stream) => getStreamKey(stream)),
-      (val, oldVal) => {
-        if (fixedStream.value) {
-          const fixedStreamKey = getStreamKey(fixedStream.value);
-          if (!val.includes(fixedStreamKey) && oldVal.includes(fixedStreamKey)) {
-            fixedStream.value = null;
-          }
-        }
-      }
-    );
-    function handleStreamViewDblclick(videoStreamInfo) {
-      console.log("handleStreamViewDblclick", videoStreamInfo, isSideListLayout.value, renderStreamInfoList.value.length);
-      if (!isSideListLayout.value && renderStreamInfoList.value.length > 1) {
-        currentLayout.value = "right_side_list";
-      }
-      fixedStream.value = videoStreamInfo;
+    function $(e) {
+      console.log("handleStreamViewDblclick", e, m.value, c.value.length), !m.value && c.value.length > 1 && (t.value = "right_side_list"), o.value = e;
     }
-    const streamContainerClass = ref("stream-container-flatten");
-    async function handleLayout() {
-      console.log("currentLayout", currentLayout.value);
-      switch (currentLayout.value) {
+    const p = d("stream-container-flatten");
+    async function F() {
+      switch (console.log("currentLayout", t.value), t.value) {
         case "nine_equal_points":
-          streamContainerClass.value = "stream-container-flatten";
+          p.value = "stream-container-flatten";
           break;
         case "right_side_list":
-          streamContainerClass.value = "stream-container-right";
+          p.value = "stream-container-right";
           break;
         case "top_side_list":
-          streamContainerClass.value = "stream-container-top";
+          p.value = "stream-container-top";
           break;
       }
     }
-    watch(
-      currentLayout,
+    f(
+      t,
       () => {
-        handleLayout();
+        F();
       },
-      { immediate: true }
+      { immediate: !0 }
     );
-    const showSideList = ref(true);
-    const arrowDirection = computed(() => {
-      let arrowDirection2 = "right";
-      if (currentLayout.value === "top_side_list") {
-        arrowDirection2 = showSideList.value ? "up" : "down";
-      }
-      if (currentLayout.value === "right_side_list") {
-        arrowDirection2 = showSideList.value ? "right" : "left";
-      }
-      return arrowDirection2;
-    });
-    const strokePosition = computed(() => {
-      let strokePosition2 = "";
-      if (currentLayout.value === "top_side_list") {
-        strokePosition2 = "bottom";
-      }
-      if (currentLayout.value === "right_side_list") {
-        strokePosition2 = "left";
-      }
-      return strokePosition2;
+    const l = d(!0), x = r(() => {
+      let e = "right";
+      return t.value === "top_side_list" && (e = l.value ? "up" : "down"), t.value === "right_side_list" && (e = l.value ? "right" : "left"), e;
+    }), M = r(() => {
+      let e = "";
+      return t.value === "top_side_list" && (e = "bottom"), t.value === "right_side_list" && (e = "left"), e;
     });
-    function handleClickIcon() {
-      showSideList.value = !showSideList.value;
+    function U() {
+      l.value = !l.value;
     }
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", {
-        id: "streamContainer",
-        class: normalizeClass(streamContainerClass.value)
+    return (e, a) => (L(), A("div", {
+      id: "streamContainer",
+      class: k(p.value)
+    }, [
+      v.value ? (L(), b(S(j), {
+        key: 0,
+        class: "enlarged-stream-container",
+        "user-info": v.value.userInfo,
+        "stream-type": v.value.streamType,
+        "support-touch-scale": !0,
+        "stream-play-quality": S(P).HIGH,
+        "aspect-ratio": "16:9",
+        onStreamViewDblclick: a[0] || (a[0] = (i) => e.$emit("stream-view-dblclick"))
+      }, {
+        streamViewUI: W((i) => [
+          z(e.$slots, "streamViewUI", H(K(i)), void 0, !0)
+        ]),
+        _: 3
+      }, 8, ["user-info", "stream-type", "stream-play-quality"])) : J("", !0),
+      Q("div", {
+        class: k(["stream-list-container", `${l.value ? "" : "hide-list"}`])
       }, [
-        enlargeStream.value ? (openBlock(), createBlock(unref(StreamRegion), {
-          key: 0,
-          class: "enlarged-stream-container",
-          "user-info": enlargeStream.value.userInfo,
-          "stream-type": enlargeStream.value.streamType,
-          "support-touch-scale": true,
-          "stream-play-quality": unref(StreamPlayQuality).HIGH,
+        G(X, {
+          streamInfoList: q.value,
+          config: B.value,
+          streamPlayMode: S(te).PLAY_IN_VISIBLE,
+          streamPlayQuality: S(P).Default,
           "aspect-ratio": "16:9",
-          onStreamViewDblclick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("stream-view-dblclick"))
-        }, {
-          streamViewUI: withCtx((slotProps) => [
-            renderSlot(_ctx.$slots, "streamViewUI", normalizeProps(guardReactiveProps(slotProps)), void 0, true)
-          ]),
-          _: 3
-        }, 8, ["user-info", "stream-type", "stream-play-quality"])) : createCommentVNode("", true),
-        createElementVNode("div", {
-          class: normalizeClass(["stream-list-container", `${showSideList.value ? "" : "hide-list"}`])
-        }, [
-          createVNode(StreamList, {
-            streamInfoList: gridLayoutStreamList.value,
-            config: streamListConfig.value,
-            streamPlayMode: unref(StreamPlayMode).PLAY_IN_VISIBLE,
-            streamPlayQuality: unref(StreamPlayQuality).Default,
-            "aspect-ratio": "16:9",
-            onStreamViewDblclick: handleStreamViewDblclick
-          }, null, 8, ["streamInfoList", "config", "streamPlayMode", "streamPlayQuality"])
-        ], 2),
-        isSideListLayout.value && (showControlBar.value || showSideList.value) ? (openBlock(), createBlock(ArrowStroke, {
-          key: 1,
-          class: normalizeClass([`arrow-stroke-${arrowDirection.value}`]),
-          "stroke-position": strokePosition.value,
-          "arrow-direction": arrowDirection.value,
-          "has-stroke": showSideList.value,
-          onClickArrow: handleClickIcon
-        }, null, 8, ["class", "stroke-position", "arrow-direction", "has-stroke"])) : createCommentVNode("", true)
-      ], 2);
-    };
+          onStreamViewDblclick: $
+        }, null, 8, ["streamInfoList", "config", "streamPlayMode", "streamPlayQuality"])
+      ], 2),
+      m.value && (R.value || l.value) ? (L(), b(Y, {
+        key: 1,
+        class: k([`arrow-stroke-${x.value}`]),
+        "stroke-position": M.value,
+        "arrow-direction": x.value,
+        "has-stroke": l.value,
+        onClickArrow: U
+      }, null, 8, ["class", "stroke-position", "arrow-direction", "has-stroke"])) : J("", !0)
+    ], 2));
   }
-});
-const MeetingLayout = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-062baff5"]]);
+}), pe = /* @__PURE__ */ re(ae, [["__scopeId", "data-v-062baff5"]]);
 export {
-  MeetingLayout as default
+  pe as default
 };

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

@@ -1,117 +1,89 @@
-import { defineComponent, ref, computed, reactive, watch, onMounted, onBeforeUnmount, createElementBlock, openBlock, createBlock, createCommentVNode, unref, withCtx, renderSlot, normalizeProps, guardReactiveProps, createElementVNode, Fragment, renderList, normalizeStyle, createVNode } from "vue";
-import { TUIVideoStreamType } from "@tencentcloud/tuiroom-engine-js";
-import { useLiveState } from "../../../states/LiveState/index.js";
-import StreamRegion from "../common/StreamRegion/StreamRegionPC.js";
-import StreamCover from "../common/StreamCover/index.js";
-import { innerUserStore } from "../../../states/UserState/store.js";
-import { _ as _export_sfc } from "../../../_plugin-vue_export-helper-1tPrXgE0.js";
-const _hoisted_1 = { class: "mix-layout-container" };
-const _sfc_main = /* @__PURE__ */ defineComponent({
+import { defineComponent as I, ref as S, computed as y, reactive as C, watch as k, onMounted as T, onBeforeUnmount as $, createElementBlock as i, openBlock as u, createBlock as w, createCommentVNode as L, unref as s, withCtx as h, renderSlot as U, normalizeProps as b, guardReactiveProps as P, createElementVNode as z, Fragment as R, renderList as V, normalizeStyle as F, createVNode as B } from "vue";
+import { TUIVideoStreamType as E } from "@tencentcloud/tuiroom-engine-js";
+import { useLiveState as M } from "../../../states/LiveState/index.js";
+import N from "../common/StreamRegion/StreamRegionPC.js";
+import O from "../common/StreamCover/index.js";
+import { innerUserStore as c } from "../../../states/UserState/store.js";
+import { _ as H } from "../../../_plugin-vue_export-helper-CHgC5LLL.js";
+const W = { class: "mix-layout-container" }, A = /* @__PURE__ */ I({
   __name: "MixLayout",
   props: {
     config: {},
     filterFn: { type: Function },
     sortFn: { type: Function }
   },
-  setup(__props) {
-    const { currentLive } = useLiveState();
-    const streamCoverRef = ref();
-    const aspectRatio = computed(() => {
-      if (currentLive.value && currentLive.value.layoutTemplateParams.canvas) {
-        return `${currentLive.value.layoutTemplateParams.canvas.width}:${currentLive.value.layoutTemplateParams.canvas.height}`;
-      }
-      return "16:9";
-    });
-    const layoutList = computed(() => {
-      if (currentLive.value && currentLive.value.layoutTemplateParams.layoutList) {
-        return currentLive.value.layoutTemplateParams.layoutList;
-      }
-      return [];
-    });
-    const itemStyles = reactive({});
-    watch(() => layoutList.value.length, () => {
-      updateAllItemStyles();
-    }, { deep: true });
-    const resizeObserver = new ResizeObserver(() => {
-      if (!streamCoverRef.value) {
-        return;
-      }
-      updateAllItemStyles();
+  setup(j) {
+    const { currentLive: a } = M(), r = S(), x = y(() => a.value && a.value.layoutTemplateParams.canvas ? `${a.value.layoutTemplateParams.canvas.width}:${a.value.layoutTemplateParams.canvas.height}` : "16:9"), l = y(() => a.value && a.value.layoutTemplateParams.layoutList ? a.value.layoutTemplateParams.layoutList : []), n = C({});
+    k(() => l.value.length, () => {
+      p();
+    }, { deep: !0 });
+    const m = new ResizeObserver(() => {
+      r.value && p();
     });
-    onMounted(() => {
-      streamCoverRef.value && resizeObserver.observe(streamCoverRef.value);
+    T(() => {
+      r.value && m.observe(r.value);
+    }), $(() => {
+      r.value && m.unobserve(r.value);
     });
-    onBeforeUnmount(() => {
-      streamCoverRef.value && resizeObserver.unobserve(streamCoverRef.value);
-    });
-    function updateAllItemStyles() {
-      layoutList.value.forEach((item) => {
-        updateItemStyle(item);
+    function p() {
+      l.value.forEach((e) => {
+        v(e);
       });
     }
-    function updateItemStyle(item) {
-      var _a, _b;
-      const key = `${item.userId}-${item.streamType}`;
-      if (!streamCoverRef.value) {
-        itemStyles[key] = {};
+    function v(e) {
+      var f, d;
+      const o = `${e.userId}-${e.streamType}`;
+      if (!r.value) {
+        n[o] = {};
         return;
       }
-      const streamCoverWidth = (_a = streamCoverRef.value) == null ? void 0 : _a.clientWidth;
-      const streamCoverHeight = (_b = streamCoverRef.value) == null ? void 0 : _b.clientHeight;
-      itemStyles[key] = {
-        left: streamCoverWidth * item.x + "px",
-        top: streamCoverWidth * item.y + "px",
-        width: streamCoverWidth * item.width + "px",
-        height: item.height === -1 ? streamCoverHeight + "px" : streamCoverWidth * item.height + "px",
-        zIndex: item.zOrder,
-        backgroundColor: item.backgroundColor
+      const t = (f = r.value) == null ? void 0 : f.clientWidth, g = (d = r.value) == null ? void 0 : d.clientHeight;
+      n[o] = {
+        left: t * e.x + "px",
+        top: t * e.y + "px",
+        width: t * e.width + "px",
+        height: e.height === -1 ? g + "px" : t * e.height + "px",
+        zIndex: e.zOrder,
+        backgroundColor: e.backgroundColor
       };
     }
-    function getStreamCoverStyle(item) {
-      const key = `${item.userId}-${item.streamType}`;
-      if (!itemStyles[key]) {
-        updateItemStyle(item);
-      }
-      return itemStyles[key];
+    function _(e) {
+      const o = `${e.userId}-${e.streamType}`;
+      return n[o] || v(e), n[o];
     }
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1, [
-        unref(innerUserStore).mixUserInfo ? (openBlock(), createBlock(unref(StreamRegion), {
-          key: 0,
-          "user-info": unref(innerUserStore).mixUserInfo,
-          "stream-type": unref(TUIVideoStreamType).kCameraStream,
-          "aspect-ratio": aspectRatio.value
-        }, {
-          "stream-cover": withCtx(() => [
-            createElementVNode("div", {
-              class: "mix-stream-cover",
-              ref_key: "streamCoverRef",
-              ref: streamCoverRef
+    return (e, o) => (u(), i("div", W, [
+      s(c).mixUserInfo ? (u(), w(s(N), {
+        key: 0,
+        "user-info": s(c).mixUserInfo,
+        "stream-type": s(E).kCameraStream,
+        "aspect-ratio": x.value
+      }, {
+        "stream-cover": h(() => [
+          z("div", {
+            class: "mix-stream-cover",
+            ref_key: "streamCoverRef",
+            ref: r
+          }, [
+            (u(!0), i(R, null, V(l.value, (t) => (u(), i("div", {
+              class: "mix-stream-cover-item",
+              key: `${t.userId}-${t.streamType}`,
+              style: F(_(t))
             }, [
-              (openBlock(true), createElementBlock(Fragment, null, renderList(layoutList.value, (item) => {
-                return openBlock(), createElementBlock("div", {
-                  class: "mix-stream-cover-item",
-                  key: `${item.userId}-${item.streamType}`,
-                  style: normalizeStyle(getStreamCoverStyle(item))
-                }, [
-                  createVNode(StreamCover, {
-                    "user-info": unref(innerUserStore).getUserInfo({ userId: item.userId }),
-                    "stream-type": item.streamType
-                  }, null, 8, ["user-info", "stream-type"])
-                ], 4);
-              }), 128))
-            ], 512)
-          ]),
-          streamViewUI: withCtx((slotProps) => [
-            renderSlot(_ctx.$slots, "streamViewUI", normalizeProps(guardReactiveProps(slotProps)), void 0, true)
-          ]),
-          _: 3
-        }, 8, ["user-info", "stream-type", "aspect-ratio"])) : createCommentVNode("", true)
-      ]);
-    };
+              B(O, {
+                "user-info": s(c).getUserInfo({ userId: t.userId }),
+                "stream-type": t.streamType
+              }, null, 8, ["user-info", "stream-type"])
+            ], 4))), 128))
+          ], 512)
+        ]),
+        streamViewUI: h((t) => [
+          U(e.$slots, "streamViewUI", b(P(t)), void 0, !0)
+        ]),
+        _: 3
+      }, 8, ["user-info", "stream-type", "aspect-ratio"])) : L("", !0)
+    ]));
   }
-});
-const MixLayout = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-526bec15"]]);
+}), Y = /* @__PURE__ */ H(A, [["__scopeId", "data-v-526bec15"]]);
 export {
-  MixLayout as default
+  Y as default
 };