tuikit-atomicx-vue3 0.1.0

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

@@ -0,0 +1,246 @@
+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({
+  __name: "CustomLayout",
+  props: {
+    config: { default: () => JSON.stringify({
+      layoutList: []
+    }) },
+    filterFn: { type: Function, default: () => true },
+    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;
+        }
+        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({
+      width: 0,
+      height: 0,
+      transformX: 0,
+      transformY: 0,
+      scale: 1
+    });
+    const streamListStyle = computed(() => {
+      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)`
+      };
+    });
+    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();
+    });
+    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;
+    }
+    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) {
+        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);
+    }
+    function stringToNumber(str) {
+      if (typeof str !== "string") {
+        return str;
+      }
+      return Number(str.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
+        };
+      }
+      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(
+      () => {
+        var _a;
+        return (_a = currentLive.value) == null ? void 0 : _a.layoutTemplate;
+      },
+      () => {
+        handleLayout();
+      }
+    );
+    const resizeObserver = new ResizeObserver(() => {
+      handleLayout();
+      handleStreamListTransform();
+    });
+    onMounted(() => {
+      resizeObserver.observe(streamListContainerRef.value);
+    });
+    onBeforeUnmount(() => {
+      resizeObserver.unobserve(streamListContainerRef.value);
+    });
+    function handleStreamDblClick(userInfo, streamType) {
+      emits("stream-view-dblclick", userInfo, streamType);
+    }
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: "custom-layout-container",
+        ref_key: "streamListContainerRef",
+        ref: streamListContainerRef
+      }, [
+        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)
+              ]),
+              _: 2
+            }, 1032, ["userInfo", "stream-type", "style"]);
+          }), 128))
+        ], 4)
+      ], 512);
+    };
+  }
+});
+const CustomLayout = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-a35188d8"]]);
+export {
+  CustomLayout as default
+};

package/dist/components/StreamView/Layout/CustomLayout.vue.d.ts

@@ -0,0 +1,55 @@
+import { UserInfo } from '../../../types';
+import { TUIVideoStreamType } from '@tencentcloud/tuiroom-engine-js';
+
+interface Props {
+    config?: string;
+    filterFn?: (userInfo: UserInfo, index: number) => boolean;
+    sortFn?: (userInfoA: UserInfo, userInfoB: UserInfo) => number;
+}
+declare function __VLS_template(): {
+    streamViewUI?(_: {
+        userInfo: UserInfo;
+        streamType: TUIVideoStreamType;
+    }): any;
+};
+declare const __VLS_component: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<Props>, {
+    config: () => string;
+    filterFn: () => true;
+    sortFn: () => 0;
+}>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "stream-view-dblclick": (...args: any[]) => void;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<Props>, {
+    config: () => string;
+    filterFn: () => true;
+    sortFn: () => 0;
+}>>> & Readonly<{
+    "onStream-view-dblclick"?: ((...args: any[]) => any) | undefined;
+}>, {
+    config: string;
+    filterFn: (userInfo: UserInfo, index: number) => boolean;
+    sortFn: (userInfoA: UserInfo, userInfoB: UserInfo) => number;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};
+type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+type __VLS_Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,251 @@
+import { defineComponent, ref, computed, onMounted, onBeforeUnmount, watch, createElementBlock, openBlock, createElementVNode, normalizeStyle, createCommentVNode, createVNode, unref, withCtx, renderSlot, normalizeProps, guardReactiveProps } from "vue";
+import StreamRegion from "../common/StreamRegion/StreamRegionPC.js";
+import { TUIVideoStreamType } from "@tencentcloud/tuiroom-engine-js";
+import { DeviceStatus } from "../../../types/device.js";
+import { SeatStatus } from "../../../types/user.js";
+import { LiveStatus } from "../../../types/live.js";
+import { useUserState } from "../../../states/UserState/index.js";
+import { useLiveState } from "../../../states/LiveState/index.js";
+import { useRoomEngine } from "../../../hooks/useRoomEngine.js";
+import { _ as _export_sfc } from "../../../_plugin-vue_export-helper-1tPrXgE0.js";
+const _hoisted_1 = { class: "main-view" };
+const encodeWidth = 1920;
+const encodeHeight = 1080;
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "FloatLayout",
+  props: {
+    config: { default: () => JSON.stringify({
+      top: "20px",
+      right: "20px",
+      width: "160px",
+      height: "160px"
+    }) },
+    filterFn: { type: Function, default: () => true },
+    sortFn: { type: Function, default: () => 0 }
+  },
+  setup(__props) {
+    var _a, _b;
+    const { userList, localUser, userListWithVideo } = useUserState();
+    const { currentLive, localLiveStatus } = useLiveState();
+    const roomEngine = useRoomEngine();
+    const props = __props;
+    const streamListContainerRef = ref();
+    const streamListRef = ref();
+    const streamListStyle = ref({
+      width: "0",
+      height: "0"
+    });
+    function stringToNumber(str) {
+      return Number(str.replace("px", ""));
+    }
+    const toLayoutRadio = computed(() => {
+      return stringToNumber(streamListStyle.value.width) / encodeWidth;
+    });
+    async function handleFloatContainerLayout() {
+      if (!streamListContainerRef.value) {
+        return;
+      }
+      const containerRect = streamListContainerRef.value.getBoundingClientRect();
+      const containerWidth = Math.floor(containerRect.width);
+      const containerHeight = Math.floor(containerRect.height);
+      const widthRatio = 16;
+      const heightRatio = 9;
+      let width = containerWidth;
+      let height = containerHeight;
+      const scaleWidth = containerWidth / widthRatio;
+      const scaleHeight = containerHeight / heightRatio;
+      if (scaleWidth > scaleHeight) {
+        width = containerHeight / heightRatio * widthRatio;
+        height = containerHeight;
+      }
+      if (scaleWidth <= scaleHeight) {
+        width = containerWidth;
+        height = containerWidth / widthRatio * heightRatio;
+      }
+      streamListStyle.value.width = `${Math.floor(width)}px`;
+      streamListStyle.value.height = `${Math.floor(height)}px`;
+    }
+    const resizeObserver = new ResizeObserver(() => {
+      handleFloatContainerLayout();
+    });
+    onMounted(() => {
+      streamListContainerRef.value && resizeObserver.observe(streamListContainerRef.value);
+    });
+    onBeforeUnmount(() => {
+      streamListContainerRef.value && resizeObserver.unobserve(streamListContainerRef.value);
+    });
+    const filterAndSortUserList = computed(() => {
+      const filteredUserList = userListWithVideo.value.filter(props.filterFn);
+      if (props.sortFn) {
+        return filteredUserList.sort(props.sortFn);
+      }
+      return filteredUserList;
+    });
+    const mainUserInfo = computed(() => {
+      const hasScreenUserInfo = filterAndSortUserList.value.find((userInfo) => userInfo.screenStatus === DeviceStatus.On);
+      if (hasScreenUserInfo) {
+        return hasScreenUserInfo;
+      }
+      return filterAndSortUserList.value[0];
+    });
+    const mainStreamType = computed(() => {
+      return mainUserInfo.value.screenStatus === DeviceStatus.On ? TUIVideoStreamType.kScreenStream : TUIVideoStreamType.kCameraStream;
+    });
+    const floatUserInfo = computed(() => {
+      if (mainStreamType.value === TUIVideoStreamType.kScreenStream) {
+        return filterAndSortUserList.value.find((userInfo) => userInfo.cameraStatus === DeviceStatus.On);
+      } else {
+        return filterAndSortUserList.value.find((userInfo) => {
+          var _a2;
+          return userInfo.cameraStatus === DeviceStatus.On && userInfo.userId !== ((_a2 = mainUserInfo.value) == null ? void 0 : _a2.userId);
+        });
+      }
+    });
+    if (((_a = localUser.value) == null ? void 0 : _a.userId) === ((_b = currentLive.value) == null ? void 0 : _b.liveOwner.userId)) {
+      const floatLayoutConfig = computed(() => {
+        var _a2, _b2;
+        if (!floatUserInfo.value || floatUserInfo.value.cameraStatus !== DeviceStatus.On) {
+          return null;
+        }
+        return {
+          "LocationX": 1540,
+          // 以画面左上角为原点的 x 坐标
+          "LocationY": 20,
+          // 以画面左上角为原点的 y 坐标
+          "ImageWidth": 360,
+          // 调整后的画面宽度
+          "ImageHeight": 202,
+          // 调整后的画面高度
+          "ZOrder": 1,
+          // 画面层级
+          "StreamType": TUIVideoStreamType.kCameraStream,
+          // 0 摄像头, 1 屏幕共享, 2 白板, 3 自定义
+          "Member_Account": (_a2 = floatUserInfo.value) == null ? void 0 : _a2.userId,
+          // 该路流的用户ID
+          "BackgroundImageUrl": "",
+          "RoomId": (_b2 = currentLive.value) == null ? void 0 : _b2.liveId,
+          "BackgroundColor": "0x1F212C"
+        };
+      });
+      const layoutConfig = computed(() => {
+        var _a2;
+        return {
+          // 设置画布大小
+          "VideoEncode": {
+            "Width": encodeWidth,
+            "Height": encodeHeight
+          },
+          "LayoutMode": 1e3,
+          // 0~9 内置布局模板， 1000自定义布局， 只有1000时候才能修改LayoutInfo,目前只支持 0 和 1000
+          // 设置画面布局
+          "LayoutInfo": {
+            "LayoutList": floatLayoutConfig.value ? [floatLayoutConfig.value] : [],
+            "MaxUserLayout": {
+              "ZOrder": 0,
+              //层级
+              "StreamType": mainStreamType.value,
+              // 0为摄像头， 1为屏幕共享
+              "Member_Account": mainUserInfo.value.userId,
+              "BackgroundImageUrl": "",
+              //可以设置看看，可能在最大画面时候没作用
+              "RoomId": (_a2 = currentLive.value) == null ? void 0 : _a2.liveId,
+              "BackgroundColor": "0x1F212C",
+              "LocationX": 0,
+              // 以画面左上角为原点的 x 坐标
+              "LocationY": 0,
+              // 以画面左上角为原点的 y 坐标
+              "ImageWidth": encodeWidth,
+              // 调整后的画面宽度
+              "ImageHeight": encodeHeight,
+              "RenderMode": mainStreamType.value === TUIVideoStreamType.kScreenStream ? 2 : 0
+            }
+          }
+        };
+      });
+      watch(() => layoutConfig.value, async (newVal, oldVal) => {
+        var _a2, _b2;
+        console.error("lixin-debug mix watch layoutConfig change 111", JSON.stringify(newVal), JSON.stringify(oldVal));
+        if (localLiveStatus.value !== LiveStatus.Live || JSON.stringify(newVal) === JSON.stringify(oldVal)) {
+          return;
+        }
+        const liveLayoutManager = (_a2 = roomEngine.instance) == null ? void 0 : _a2.getLiveLayoutManager();
+        console.error("lixin-debug mix setLiveStreamLayoutInfo 111", newVal);
+        await (liveLayoutManager == null ? void 0 : liveLayoutManager.setLiveStreamLayoutInfo((_b2 = currentLive.value) == null ? void 0 : _b2.liveId, JSON.stringify(newVal)));
+      }, { immediate: true, deep: true });
+      watch(() => {
+        var _a2;
+        return [localLiveStatus.value, (_a2 = localUser.value) == null ? void 0 : _a2.seatStatus];
+      }, async ([newlocalLiveStatus, newSeatStatus], [oldlocalLiveStatus, oldSeatStatus]) => {
+        var _a2;
+        console.error("lixin-debug mix localLiveStatus 222", newlocalLiveStatus, oldlocalLiveStatus, newSeatStatus, oldSeatStatus);
+        if (newlocalLiveStatus === oldlocalLiveStatus && newSeatStatus === oldSeatStatus) {
+          return;
+        }
+        if (newlocalLiveStatus === LiveStatus.Live && newSeatStatus === SeatStatus.On && localUser.value.userId === ((_a2 = currentLive.value) == null ? void 0 : _a2.liveOwner.userId)) {
+          setTimeout(async () => {
+            var _a3, _b2;
+            const liveLayoutManager = (_a3 = roomEngine.instance) == null ? void 0 : _a3.getLiveLayoutManager();
+            console.error("lixin-debug mix setLiveStreamLayoutInfo 222", layoutConfig.value);
+            await (liveLayoutManager == null ? void 0 : liveLayoutManager.setLiveStreamLayoutInfo((_b2 = currentLive.value) == null ? void 0 : _b2.liveId, JSON.stringify(layoutConfig.value)));
+          }, 1e3);
+        }
+      });
+    }
+    const getFloatStyle = () => {
+      const { top, right, bottom, left, width, height } = JSON.parse(props.config);
+      return {
+        width: stringToNumber(width) * toLayoutRadio.value + "px",
+        height: stringToNumber(height) * toLayoutRadio.value + "px",
+        ...top !== void 0 ? { top: stringToNumber(top) * toLayoutRadio.value + "px" } : {},
+        ...right !== void 0 ? { right: stringToNumber(right) * toLayoutRadio.value + "px" } : {},
+        ...bottom !== void 0 ? { bottom: stringToNumber(bottom) * toLayoutRadio.value + "px" } : {},
+        ...left !== void 0 ? { left: stringToNumber(left) * toLayoutRadio.value + "px" } : {}
+      };
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: "float-layout-container",
+        ref_key: "streamListContainerRef",
+        ref: streamListContainerRef
+      }, [
+        createElementVNode("div", {
+          class: "float-layout",
+          ref_key: "streamListRef",
+          ref: streamListRef,
+          style: normalizeStyle(streamListStyle.value)
+        }, [
+          createElementVNode("div", _hoisted_1, [
+            createVNode(unref(StreamRegion), {
+              "user-info": mainUserInfo.value,
+              "stream-type": mainStreamType.value
+            }, {
+              streamViewUI: withCtx((slotProps) => [
+                renderSlot(_ctx.$slots, "streamViewUI", normalizeProps(guardReactiveProps(slotProps)), void 0, true)
+              ]),
+              _: 3
+            }, 8, ["user-info", "stream-type"])
+          ]),
+          floatUserInfo.value ? (openBlock(), createElementBlock("div", {
+            key: 0,
+            class: "float-view",
+            style: normalizeStyle(getFloatStyle())
+          }, [
+            createVNode(unref(StreamRegion), {
+              "user-info": floatUserInfo.value,
+              "stream-type": unref(TUIVideoStreamType).kCameraStream
+            }, {
+              streamViewUI: withCtx((slotProps) => [
+                renderSlot(_ctx.$slots, "streamViewUI", normalizeProps(guardReactiveProps(slotProps)), void 0, true)
+              ]),
+              _: 3
+            }, 8, ["user-info", "stream-type"])
+          ], 4)) : createCommentVNode("", true)
+        ], 4)
+      ], 512);
+    };
+  }
+});
+const FloatLayout = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-0fdb5f8b"]]);
+export {
+  FloatLayout as default
+};

package/dist/components/StreamView/Layout/FloatLayout.vue.d.ts

@@ -0,0 +1,54 @@
+import { TUIVideoStreamType } from '@tencentcloud/tuiroom-engine-js';
+import { UserInfo } from '../../../types';
+
+declare function __VLS_template(): {
+    streamViewUI?(_: {
+        userInfo: UserInfo;
+        streamType: TUIVideoStreamType;
+    }): any;
+};
+declare const __VLS_component: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    config?: string;
+    filterFn?: (userInfo: UserInfo, index: number) => boolean;
+    sortFn?: (userInfoA: UserInfo, userInfoB: UserInfo) => number;
+}>, {
+    config: () => string;
+    filterFn: () => true;
+    sortFn: () => 0;
+}>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    config?: string;
+    filterFn?: (userInfo: UserInfo, index: number) => boolean;
+    sortFn?: (userInfoA: UserInfo, userInfoB: UserInfo) => number;
+}>, {
+    config: () => string;
+    filterFn: () => true;
+    sortFn: () => 0;
+}>>> & Readonly<{}>, {
+    config: string;
+    filterFn: (userInfo: UserInfo, index: number) => boolean;
+    sortFn: (userInfoA: UserInfo, userInfoB: UserInfo) => number;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};
+type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+type __VLS_Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};