tuikit-atomicx-vue3 0.1.0

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

@@ -0,0 +1,235 @@
+import { defineComponent, computed, ref, watch, nextTick, onMounted, onBeforeUnmount, createElementBlock, openBlock, normalizeClass, createElementVNode, normalizeStyle, Fragment, renderList, createBlock, unref, withCtx, renderSlot, mergeProps } from "vue";
+import StreamRegion from "../common/StreamRegion/StreamRegionPC.js";
+import { getContentSize } from "../../../utils/domOperation.js";
+import { LocalRoomStatus } from "../../../types/room.js";
+import { useUserState } from "../../../states/UserState/index.js";
+import { TUIVideoStreamType } from "@tencentcloud/tuiroom-engine-js";
+import { safelyParse } from "../../../utils/utils.js";
+import { useRoomState } from "../../../states/RoomState.js";
+import { useDeviceState } from "../../../states/DeviceState.js";
+import { useLoginState } from "../../../states/LoginState.js";
+import { getNewUserInfo } from "../../../states/UserState/store.js";
+import { _ as _export_sfc } from "../../../_plugin-vue_export-helper-1tPrXgE0.js";
+const aspectRatio = "16:9";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "GridLayout",
+  props: {
+    config: { default: () => JSON.stringify({
+      maxRows: 3,
+      maxColumns: 3,
+      rowSpacing: 8,
+      columnSpacing: 8
+    }) },
+    filterFn: { type: Function, default: () => true },
+    sortFn: { type: Function, default: () => 0 }
+  },
+  emits: ["stream-view-dblclick"],
+  setup(__props, { emit: __emit }) {
+    const { userList, userListOnSeat, userWithScreenOn } = useUserState();
+    const { microphoneStatus, cameraStatus } = useDeviceState();
+    const { currentRoom, localRoomStatus } = useRoomState();
+    const { loginUserInfo } = useLoginState();
+    const emits = __emit;
+    const props = __props;
+    const gridConfig = computed(() => {
+      return safelyParse(props.config) || {
+        maxRows: 3,
+        maxColumns: 3,
+        rowSpacing: 8,
+        columnSpacing: 8
+      };
+    });
+    const localFakeUser = computed(() => {
+      var _a;
+      const localUser = getNewUserInfo(((_a = loginUserInfo.value) == null ? void 0 : _a.userId) || "local_fake_user");
+      localUser.cameraStatus = cameraStatus.value;
+      localUser.microphoneStatus = microphoneStatus.value;
+      return localUser;
+    });
+    const totalUserList = computed(() => {
+      var _a;
+      if (!currentRoom.value && localRoomStatus.value === LocalRoomStatus.IDLE) {
+        return [localFakeUser.value];
+      }
+      return ((_a = currentRoom.value) == null ? void 0 : _a.isSeatEnabled) ? userListOnSeat.value : userList.value;
+    });
+    const renderUserInfoList = computed(() => {
+      const videoUserList = totalUserList.value.filter(props.filterFn).map((item) => {
+        return {
+          userInfo: item,
+          streamType: TUIVideoStreamType.kCameraStream
+        };
+      });
+      if (userWithScreenOn.value && [userWithScreenOn.value].filter(props.filterFn).length > 0) {
+        videoUserList.unshift({
+          userInfo: userWithScreenOn.value,
+          streamType: TUIVideoStreamType.kScreenStream
+        });
+      }
+      return videoUserList;
+    });
+    const column = computed(() => {
+      if (gridConfig.value.maxColumns === Infinity) {
+        return gridConfig.value.maxColumns;
+      }
+      return Math.min(
+        Math.ceil(Math.sqrt(renderUserInfoList.value.length)),
+        gridConfig.value.maxColumns
+      );
+    });
+    const row = computed(() => {
+      if (gridConfig.value.maxRows === Infinity) {
+        return gridConfig.value.maxRows;
+      }
+      return Math.min(
+        Math.ceil(renderUserInfoList.value.length / column.value),
+        gridConfig.value.maxRows
+      );
+    });
+    const streamListContainerRef = ref();
+    const streamListRef = ref();
+    const isEqualPointsLayout = computed(
+      () => gridConfig.value.maxRows !== Infinity && gridConfig.value.maxColumns !== Infinity
+    );
+    const isHorizontalInfinityLayout = computed(() => gridConfig.value.maxColumns === Infinity);
+    const isVerticalInfinityLayout = computed(() => gridConfig.value.maxRows === Infinity);
+    watch(
+      () => [column.value, row.value],
+      async () => {
+        await nextTick();
+        handleLayout();
+      },
+      { immediate: true }
+    );
+    function handleLayout() {
+      if (isHorizontalInfinityLayout.value) {
+        handleHorizontalInfinityLayout();
+        return;
+      }
+      if (isVerticalInfinityLayout.value) {
+        handleVerticalInfinityLayout();
+        return;
+      }
+      if (isEqualPointsLayout.value) {
+        handleEqualPointsLayout();
+        return;
+      }
+    }
+    const streamListStyle = ref({
+      width: "0",
+      height: "0"
+    });
+    const streamStyle = ref({
+      width: "0",
+      height: "0"
+    });
+    const widthRatio = computed(() => {
+      if ((aspectRatio == null ? void 0 : aspectRatio.indexOf(":")) < 0) {
+        return 0;
+      }
+      return Number(aspectRatio == null ? void 0 : aspectRatio.split(":")[0]);
+    });
+    const heightRatio = computed(() => {
+      if (aspectRatio.indexOf(":") < 0) {
+        return 0;
+      }
+      return Number(aspectRatio.split(":")[1]);
+    });
+    async function handleEqualPointsLayout() {
+      if (!streamListContainerRef.value) {
+        return;
+      }
+      const containerRect = streamListContainerRef.value.getBoundingClientRect();
+      const containerWidth = Math.floor(containerRect.width);
+      const containerHeight = Math.floor(containerRect.height);
+      const contentWidth = (containerWidth - (column.value - 1) * gridConfig.value.columnSpacing) / column.value;
+      const contentHeight = (containerHeight - (row.value - 1) * gridConfig.value.rowSpacing) / row.value;
+      let width = contentWidth;
+      let height = contentHeight;
+      if (widthRatio.value && heightRatio.value) {
+        const scaleWidth = contentWidth / widthRatio.value;
+        const scaleHeight = contentHeight / heightRatio.value;
+        if (scaleWidth > scaleHeight) {
+          width = Math.floor(contentHeight / heightRatio.value * widthRatio.value);
+          height = Math.floor(contentHeight);
+        }
+        if (scaleWidth <= scaleHeight) {
+          width = Math.floor(contentWidth);
+          height = Math.floor(contentWidth / widthRatio.value * heightRatio.value);
+        }
+      }
+      streamStyle.value.width = `${width}px`;
+      streamStyle.value.height = `${height}px`;
+      streamListStyle.value.width = `${Math.ceil(column.value * width + (column.value - 1) * gridConfig.value.columnSpacing)}px`;
+      streamListStyle.value.height = `${Math.ceil(row.value * height + (row.value - 1) * gridConfig.value.rowSpacing)}px`;
+    }
+    function handleHorizontalInfinityLayout() {
+      streamListStyle.value = {};
+      const contentHeight = getContentSize(streamListContainerRef.value).height;
+      const contentWidth = contentHeight * widthRatio.value / heightRatio.value;
+      streamStyle.value.width = `${contentWidth}px`;
+      streamStyle.value.height = `${contentHeight}px`;
+    }
+    function handleVerticalInfinityLayout() {
+      streamListStyle.value = {};
+      const contentWidth = getContentSize(streamListContainerRef.value).width;
+      const contentHeight = contentWidth * heightRatio.value / widthRatio.value;
+      streamStyle.value.width = `${contentWidth}px`;
+      streamStyle.value.height = `${contentHeight}px`;
+    }
+    function handleStreamDblClick(userInfo, streamType) {
+      emits("stream-view-dblclick", userInfo, streamType);
+    }
+    const resizeObserver = new ResizeObserver(() => {
+      handleLayout();
+    });
+    onMounted(() => {
+      resizeObserver.observe(streamListContainerRef.value);
+    });
+    onBeforeUnmount(() => {
+      resizeObserver.unobserve(streamListContainerRef.value);
+    });
+    function handleWheel(event) {
+      streamListContainerRef.value.scrollLeft += event.deltaY;
+    }
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        ref_key: "streamListContainerRef",
+        ref: streamListContainerRef,
+        class: normalizeClass({
+          "horizontal-infinity-layout": isHorizontalInfinityLayout.value,
+          "vertical-infinity-layout": isVerticalInfinityLayout.value,
+          "equal-points-layout": isEqualPointsLayout.value
+        })
+      }, [
+        createElementVNode("div", {
+          class: "stream-list",
+          ref_key: "streamListRef",
+          ref: streamListRef,
+          style: normalizeStyle(streamListStyle.value),
+          onWheel: handleWheel
+        }, [
+          (openBlock(true), createElementBlock(Fragment, null, renderList(renderUserInfoList.value, (renderUserInfo) => {
+            return openBlock(), createBlock(unref(StreamRegion), {
+              class: "stream-list-item",
+              key: `${renderUserInfo.userInfo.userId}_${renderUserInfo.streamType}`,
+              userInfo: renderUserInfo.userInfo,
+              "stream-type": renderUserInfo.streamType,
+              style: normalizeStyle(streamStyle.value),
+              onStreamViewDblclick: handleStreamDblClick
+            }, {
+              streamViewUI: withCtx((slotProps) => [
+                renderSlot(_ctx.$slots, "streamViewUI", mergeProps({ ref_for: true }, slotProps), void 0, true)
+              ]),
+              _: 2
+            }, 1032, ["userInfo", "stream-type", "style"]);
+          }), 128))
+        ], 36)
+      ], 2);
+    };
+  }
+});
+const GridLayout = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-0dc1b2d5"]]);
+export {
+  GridLayout as default
+};

package/dist/components/StreamView/Layout/GridLayout.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/MeetingLayout.js

@@ -0,0 +1,280 @@
+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 { DeviceStatus } from "../../../types/device.js";
+import { StreamPlayQuality, StreamPlayMode } from "../../../types/stream.js";
+import { useUserState } from "../../../states/UserState/index.js";
+import { useRoomState } from "../../../states/RoomState.js";
+import { _ as _export_sfc } from "../../../_plugin-vue_export-helper-1tPrXgE0.js";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "MeetingLayout",
+  props: {
+    config: { default: () => JSON.stringify({
+      showControlBar: true,
+      preferLayout: "nine_equal_points",
+      gridLayout: {
+        maxColumns: 3,
+        maxRows: 3,
+        rowSpacing: 8,
+        columnSpacing: 8
+      },
+      rightLayout: {
+        maxColumns: 1,
+        maxRows: 0
+      },
+      topLayout: {
+        maxColumns: 0,
+        maxRows: 1
+      }
+    }) },
+    filterFn: { type: Function, default: (streamInfo, index, list) => true },
+    sortFn: { type: Function, default: (streamInfo, index, list) => 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;
+    });
+    const getStreamKey = (stream) => `${stream == null ? void 0 : stream.userInfo.userId}_${stream == null ? void 0 : stream.streamType}`;
+    const isSideListLayout = computed(
+      () => [
+        "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(
+      () => {
+        var _a;
+        return ((_a = screenStreamInfo.value) == null ? void 0 : _a.userInfo.screenStatus) === DeviceStatus.On;
+      },
+      (val, oldVal) => {
+        if (val && !oldVal) {
+          fixedStream.value = null;
+          if (!isSideListLayout.value) {
+            currentLayout.value = "right_side_list";
+          }
+        }
+      }
+    );
+    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;
+    }
+    const streamContainerClass = ref("stream-container-flatten");
+    async function handleLayout() {
+      console.log("currentLayout", currentLayout.value);
+      switch (currentLayout.value) {
+        case "nine_equal_points":
+          streamContainerClass.value = "stream-container-flatten";
+          break;
+        case "right_side_list":
+          streamContainerClass.value = "stream-container-right";
+          break;
+        case "top_side_list":
+          streamContainerClass.value = "stream-container-top";
+          break;
+      }
+    }
+    watch(
+      currentLayout,
+      () => {
+        handleLayout();
+      },
+      { immediate: true }
+    );
+    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;
+    });
+    function handleClickIcon() {
+      showSideList.value = !showSideList.value;
+    }
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        id: "streamContainer",
+        class: normalizeClass(streamContainerClass.value)
+      }, [
+        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,
+          "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);
+    };
+  }
+});
+const MeetingLayout = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-062baff5"]]);
+export {
+  MeetingLayout as default
+};

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

@@ -0,0 +1,55 @@
+import { TUIVideoStreamType } from '@tencentcloud/tuiroom-engine-js';
+import { UserInfo } from '../../../types';
+
+interface VideoStreamInfo {
+    userInfo: UserInfo;
+    streamType: TUIVideoStreamType;
+}
+interface Props {
+    config?: string;
+    filterFn?: (streamInfo: VideoStreamInfo, index: number) => boolean;
+    sortFn?: (streamInfo: VideoStreamInfo, 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: (streamInfo: VideoStreamInfo, index: number, list: UserInfo[]) => true;
+    sortFn: (streamInfo: VideoStreamInfo, index: number, list: UserInfo[]) => 0;
+}>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<Props>, {
+    config: () => string;
+    filterFn: (streamInfo: VideoStreamInfo, index: number, list: UserInfo[]) => true;
+    sortFn: (streamInfo: VideoStreamInfo, index: number, list: UserInfo[]) => 0;
+}>>> & Readonly<{}>, {
+    config: string;
+    filterFn: (streamInfo: VideoStreamInfo, index: number) => boolean;
+    sortFn: (streamInfo: VideoStreamInfo, 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;
+    };
+};