tuikit-atomicx-vue3 0.1.1 → 3.3.0

package/dist/components/Search/i18n/zh-CN/Search.js

@@ -1,5 +1,5 @@
 const Search = {
-  // 基础操作
+  // actions
   "action.search": "搜索",
   "action.cancel": "取消",
   "action.confirm": "确定",
@@ -7,33 +7,33 @@ const Search = {
   "action.locateToChat": "定位到聊天",
   "action.readMore": "查看更多",
   "action.filter": "筛选",
-  // 搜索类型
+  // types
   "type.all": "全部",
   "type.messages": "消息",
   "type.users": "用户",
   "type.groups": "群组",
-  // 输入提示
+  // input
   "input.placeholder.keywords": "请输入关键词搜索",
   "input.selectTime": "选择时间",
-  // 加载状态
+  // status
   "status.loading": "加载中...",
   "status.noContent": "暂无内容",
-  // 加载更多
+  // loading
   "loadMore.default": "加载更多",
   "loadMore.messages": "加载更多消息",
   "loadMore.users": "加载更多用户",
   "loadMore.groups": "加载更多群组",
-  // 搜索结果
+  // results
   "results.title": "搜索消息",
-  "results.relatedTo": "{{count}}条与",
+  "results.relatedTo": "{{count}} 条与",
   "results.relatedToSuffix": "的消息",
-  "results.foundMessages": "发现{{count}}条消息",
-  // 消息类型
+  "results.foundMessages": "发现 {{count}} 条消息",
+  // message types
   "messageType.image": "图片消息",
   "messageType.videoCover": "视频封面",
   "messageType.custom": "自定义消息",
   "messageType.unsupported": "不支持的消息类型",
-  // 用户筛选
+  // filter
   "filter.title": "筛选用户",
   "filter.gender": "性别",
   "filter.age": "年龄",
@@ -42,11 +42,11 @@ const Search = {
   "filter.gender.female": "女",
   "filter.gender.secret": "保密",
   "filter.age.yearsOld": "岁",
-  // 时间筛选
+  // time filter
   "timeFilter.allTime": "全部时间",
   "timeFilter.today": "今天",
-  "timeFilter.last3Days": "最近3天",
-  "timeFilter.last7Days": "最近7天"
+  "timeFilter.last3Days": "最近 3 天",
+  "timeFilter.last7Days": "最近 7 天"
 };
 export {
   Search,

package/dist/components/Search/index.d.ts

@@ -211,7 +211,7 @@ declare const Search: import('vue').DefineComponent<import('vue').ExtractPropTyp
                 default: import('../..').VariantType;
             };
             searchType: {
-                type: import('vue').PropType<"all" | import('../..').SearchType>;
+                type: import('vue').PropType<import('../..').SearchType | "all">;
                 default: string;
             };
             typeLabels: {
@@ -325,7 +325,7 @@ declare const Search: import('vue').DefineComponent<import('vue').ExtractPropTyp
                 default: import('../..').VariantType;
             };
             searchType: {
-                type: import('vue').PropType<"all" | import('../..').SearchType>;
+                type: import('vue').PropType<import('../..').SearchType | "all">;
                 default: string;
             };
             typeLabels: {
@@ -646,7 +646,7 @@ declare const Search: import('vue').DefineComponent<import('vue').ExtractPropTyp
                 default: import('../..').VariantType;
             };
             searchType: {
-                type: import('vue').PropType<"all" | import('../..').SearchType>;
+                type: import('vue').PropType<import('../..').SearchType | "all">;
                 default: string;
             };
             typeLabels: {
@@ -760,7 +760,7 @@ declare const Search: import('vue').DefineComponent<import('vue').ExtractPropTyp
                 default: import('../..').VariantType;
             };
             searchType: {
-                type: import('vue').PropType<"all" | import('../..').SearchType>;
+                type: import('vue').PropType<import('../..').SearchType | "all">;
                 default: string;
             };
             typeLabels: {
@@ -947,7 +947,7 @@ declare const SearchResults: import('vue').DefineComponent<import('vue').Extract
         default: import('../..').VariantType;
     };
     searchType: {
-        type: import('vue').PropType<"all" | import('../..').SearchType>;
+        type: import('vue').PropType<import('../..').SearchType | "all">;
         default: string;
     };
     typeLabels: {
@@ -1061,7 +1061,7 @@ declare const SearchResults: import('vue').DefineComponent<import('vue').Extract
         default: import('../..').VariantType;
     };
     searchType: {
-        type: import('vue').PropType<"all" | import('../..').SearchType>;
+        type: import('vue').PropType<import('../..').SearchType | "all">;
         default: string;
     };
     typeLabels: {

package/dist/components/StreamMixer/LocalMixer/MixerControl.js

@@ -1,12 +1,12 @@
 import { defineComponent, computed, createElementBlock, openBlock, Fragment, renderList, withModifiers, normalizeStyle, normalizeClass, createElementVNode, createBlock, resolveDynamicComponent, toDisplayString } from "vue";
+import { TRTCVideoMirrorType, TRTCVideoRotation } from "@tencentcloud/tuiroom-engine-js";
+import { useUIKit } from "@tencentcloud/uikit-base-component-vue3";
+import { useVideoMixerState } from "../../../states/VideoMixerState.js";
 import CameraMirror from "../icons/CameraMirror.js";
 import Delete from "../icons/Delete.js";
+import Down from "../icons/Down.js";
 import Rotation from "../icons/Rotation.js";
 import Up from "../icons/Up.js";
-import Down from "../icons/Down.js";
-import { useVideoMixerState } from "../../../states/VideoMixerState.js";
-import { TRTCVideoMirrorType, TRTCVideoRotation } from "@tencentcloud/tuiroom-engine-js";
-import { useUIKit } from "@tencentcloud/uikit-base-component-vue3";
 import { _ as _export_sfc } from "../../../_plugin-vue_export-helper-1tPrXgE0.js";
 const _hoisted_1 = ["onClick"];
 const _hoisted_2 = { class: "mixer-control-item-icon" };
@@ -19,11 +19,15 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     function handleMouseDown(event) {
       event.stopPropagation();
     }
-    const orderMediaSourceList = computed(() => {
-      return [...mediaSourceList.value].sort((a, b) => a.layout.zOrder - b.layout.zOrder);
+    const orderMediaSourceList = computed(() => [...mediaSourceList.value].sort((a, b) => a.layout.zOrder - b.layout.zOrder));
+    const isActiveMediaSourceTop = computed(() => {
+      var _a, _b;
+      return ((_a = activeMediaSource.value) == null ? void 0 : _a.id) === ((_b = orderMediaSourceList.value[0]) == null ? void 0 : _b.id);
+    });
+    const isActiveMediaSourceBottom = computed(() => {
+      var _a, _b;
+      return ((_a = activeMediaSource.value) == null ? void 0 : _a.id) === ((_b = orderMediaSourceList.value[orderMediaSourceList.value.length - 1]) == null ? void 0 : _b.id);
     });
-    const isActiveMediaSourceTop = computed(() => activeMediaSource.value.id === orderMediaSourceList.value[0].id);
-    const isActiveMediaSourceBottom = computed(() => activeMediaSource.value.id === orderMediaSourceList.value[orderMediaSourceList.value.length - 1].id);
     const controlList = computed(() => [
       {
         name: "mirror",
@@ -109,8 +113,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       }, [
         (openBlock(true), createElementBlock(Fragment, null, renderList(controlList.value, (control) => {
           return openBlock(), createElementBlock("div", {
-            class: normalizeClass(["mixer-control-item", { "disable": control.disable }]),
             key: control.name,
+            class: normalizeClass(["mixer-control-item", { "disable": control.disable }]),
             style: normalizeStyle(control.style),
             onClick: withModifiers(control.onClick, ["stop"])
           }, [
@@ -126,7 +130,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const MixerControl = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-f2286717"]]);
+const MixerControl = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-6c6a65c2"]]);
 export {
   MixerControl as default
 };

package/dist/components/StreamMixer/LocalMixer/index.js

@@ -1,10 +1,11 @@
-import { defineComponent, computed, ref, watch, onMounted, onUnmounted, createElementBlock, openBlock, createElementVNode, createCommentVNode, unref, normalizeStyle, createVNode, toDisplayString } from "vue";
+import { defineComponent, ref, computed, watch, nextTick, onMounted, onBeforeUnmount, createElementBlock, openBlock, createElementVNode, createBlock, createCommentVNode, unref, normalizeStyle, toDisplayString } from "vue";
+import TUIRoomEngine, { TUIVideoQuality, TRTCVideoResolutionMode, TRTCVideoRotation } from "@tencentcloud/tuiroom-engine-js";
+import { useUIKit } from "@tencentcloud/uikit-base-component-vue3";
 import { useRoomEngine } from "../../../hooks/useRoomEngine.js";
-import { useVideoMixerState } from "../../../states/VideoMixerState.js";
-import TUIRoomEngine, { TRTCVideoRotation, TUIVideoQuality, TRTCVideoResolutionMode } from "@tencentcloud/tuiroom-engine-js";
 import { useLiveState } from "../../../states/LiveState/index.js";
+import { useVideoMixerState } from "../../../states/VideoMixerState.js";
+import { debounce } from "../../../utils/utils.js";
 import MixerControl from "./MixerControl.js";
-import { useUIKit } from "@tencentcloud/uikit-base-component-vue3";
 import { LiveOrientation, LiveStatus } from "../../../types/live.js";
 import { _ as _export_sfc } from "../../../_plugin-vue_export-helper-1tPrXgE0.js";
 const _hoisted_1 = {
@@ -12,11 +13,13 @@ const _hoisted_1 = {
   class: "local-mixer-placeholder"
 };
 const _hoisted_2 = { class: "placeholder-text" };
+const CONTROL_MARGIN_WITH_MEDIA_SOURCE = 6;
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "index",
   setup(__props) {
     const { t } = useUIKit();
     const { currentLive } = useLiveState();
+    const mixControlRef = ref(null);
     const { publishVideoQuality, activeMediaSource, enableLocalVideoMixer, mediaSourceList } = useVideoMixerState();
     enableLocalVideoMixer();
     const currentLiveOrientation = computed(() => {
@@ -42,16 +45,12 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       }
       return { width, height };
     }
-    const mixControlContainerStyle = ref({
-      top: "0px",
-      left: "0px",
-      width: "0px",
-      height: "0px"
-    });
     const mixControlStyle = ref({
-      top: "-6px",
-      transform: "translate(-50%, -100%)"
+      position: "absolute",
+      transform: "translate(0px, 0px)"
     });
+    let mixControlWidth;
+    let mixControlHeight;
     function getMixControlStyle() {
       if (!localMixerRef.value || !activeMediaSource.value) {
         return;
@@ -60,48 +59,77 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         publishVideoQuality.value,
         currentLiveOrientation.value === LiveOrientation.Landscape ? TRTCVideoResolutionMode.TRTCVideoResolutionModeLandscape : TRTCVideoResolutionMode.TRTCVideoResolutionModePortrait
       );
-      const { width: realWidth, height: realHeight } = localMixerRef.value.getBoundingClientRect();
-      const scale = Math.max(realWidth / canvasWidth, realHeight / canvasHeight);
+      const { width: viewportWidth, height: viewportHeight } = localMixerRef.value.getBoundingClientRect();
+      const scale = Math.max(viewportWidth / canvasWidth, viewportHeight / canvasHeight);
       const previewWidth = canvasWidth * scale;
       const previewHeight = canvasHeight * scale;
       const { top, left, right, bottom } = activeMediaSource.value.layout.rect;
       const mediaSourceWidth = right - left;
       const mediaSourceHeight = bottom - top;
       const rotation = activeMediaSource.value.layout.rotation || TRTCVideoRotation.TRTCVideoRotation0;
+      const mediaSourceTop = top * scale - (previewHeight - viewportHeight) / 2;
+      const mediaSourceLeft = left * scale - (previewWidth - viewportWidth) / 2;
+      let mediaSourceDisplayWidth;
+      let mediaSourceDisplayHeight;
       if (rotation === TRTCVideoRotation.TRTCVideoRotation0 || rotation === TRTCVideoRotation.TRTCVideoRotation180) {
-        mixControlContainerStyle.value = {
-          top: `${top * scale - (previewHeight - realHeight) / 2}px`,
-          left: `${left * scale - (previewWidth - realWidth) / 2}px`,
-          width: `${mediaSourceWidth * scale}px`,
-          height: `${mediaSourceHeight * scale}px`
-        };
+        mediaSourceDisplayWidth = mediaSourceWidth * scale;
+        mediaSourceDisplayHeight = mediaSourceHeight * scale;
       } else {
-        mixControlContainerStyle.value = {
-          top: `${top * scale - (previewHeight - realHeight) / 2}px`,
-          left: `${left * scale - (previewWidth - realWidth) / 2}px`,
-          width: `${mediaSourceHeight * scale}px`,
-          height: `${mediaSourceWidth * scale}px`
-        };
+        mediaSourceDisplayWidth = mediaSourceHeight * scale;
+        mediaSourceDisplayHeight = mediaSourceWidth * scale;
+      }
+      const controlPosition = calculateOptimalControlPosition(
+        mediaSourceLeft,
+        mediaSourceTop,
+        mediaSourceDisplayWidth,
+        mediaSourceDisplayHeight,
+        viewportWidth,
+        viewportHeight
+      );
+      mixControlStyle.value = {
+        ...controlPosition,
+        position: "absolute"
+      };
+    }
+    function calculateOptimalControlPosition(mediaSourceLeft, mediaSourceTop, mediaSourceWidth, mediaSourceHeight, viewportWidth, viewportHeight) {
+      const mediaSourceBottom = mediaSourceTop + mediaSourceHeight;
+      const mediaSourceCenterX = mediaSourceLeft + mediaSourceWidth / 2;
+      let controlLeft = mediaSourceCenterX - mixControlWidth / 2;
+      let controlTop = mediaSourceTop - CONTROL_MARGIN_WITH_MEDIA_SOURCE - mixControlHeight;
+      if (controlLeft < 0) {
+        controlLeft = 0;
+      } else if (controlLeft + mixControlWidth > viewportWidth) {
+        controlLeft = viewportWidth - mixControlWidth;
       }
-      if (top < 60) {
-        mixControlStyle.value = {
-          bottom: "-6px",
-          transform: "translate(-50%, 100%)"
-        };
+      const topSpaceAvailable = mediaSourceTop;
+      const bottomSpaceAvailable = viewportHeight - mediaSourceBottom;
+      if (controlTop >= 0 && topSpaceAvailable >= mixControlHeight + CONTROL_MARGIN_WITH_MEDIA_SOURCE) {
+        controlTop = Math.min(controlTop, viewportHeight - mixControlHeight);
+      } else if (bottomSpaceAvailable >= mixControlHeight + CONTROL_MARGIN_WITH_MEDIA_SOURCE) {
+        controlTop = Math.max(0, mediaSourceBottom + CONTROL_MARGIN_WITH_MEDIA_SOURCE);
       } else {
-        mixControlStyle.value = {
-          top: "-6px",
-          transform: "translate(-50%, -100%)"
-        };
+        controlTop = Math.max(0, mediaSourceTop - mixControlHeight - CONTROL_MARGIN_WITH_MEDIA_SOURCE);
       }
+      return {
+        transform: `translate(${controlLeft}px, ${controlTop}px)`
+      };
     }
+    const debouncedGetMixControlStyle = debounce(getMixControlStyle, 16);
+    watch(() => activeMediaSource.value, async (newVal, oldVal) => {
+      var _a;
+      if (!oldVal && newVal) {
+        await nextTick();
+        const mixControlElement = (_a = mixControlRef.value) == null ? void 0 : _a.$el;
+        const { width, height } = (mixControlElement == null ? void 0 : mixControlElement.getBoundingClientRect()) || { width: 0, height: 0 };
+        mixControlWidth = width;
+        mixControlHeight = height;
+      }
+      getMixControlStyle();
+    }, { immediate: true, deep: true });
     watch(
-      () => {
-        var _a;
-        return [publishVideoQuality.value, currentLiveOrientation.value, (_a = activeMediaSource.value) == null ? void 0 : _a.layout];
-      },
-      ([newVideoQuality, newOrientation, newLayout]) => {
-        if (!newVideoQuality || !newOrientation || !newLayout) {
+      () => [publishVideoQuality.value, currentLiveOrientation.value],
+      ([newVideoQuality, newOrientation]) => {
+        if (!newVideoQuality || !newOrientation) {
           return;
         }
         getMixControlStyle();
@@ -109,47 +137,50 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       { immediate: true, deep: true }
     );
     const re = new ResizeObserver(() => {
-      getMixControlStyle();
+      debouncedGetMixControlStyle();
     });
     onMounted(() => {
       re.observe(localMixerRef.value);
       TUIRoomEngine.once("ready", async () => {
         var _a;
         const mediaSourceManager = (_a = roomEngine.instance) == null ? void 0 : _a.getTRTCCloud().getMediaMixingManager();
-        await mediaSourceManager.setDisplayParams(document.getElementById("local-video-mixer"));
+        await mediaSourceManager.bindPreviewArea(document.getElementById("local-video-mixer"));
         getMixControlStyle();
       });
       watch(localLiveStatus, async (newVal) => {
         var _a;
+        const mediaSourceManager = (_a = roomEngine.instance) == null ? void 0 : _a.getTRTCCloud().getMediaMixingManager();
         if (newVal === LiveStatus.Live) {
-          const mediaSourceManager = (_a = roomEngine.instance) == null ? void 0 : _a.getTRTCCloud().getMediaMixingManager();
           await (mediaSourceManager == null ? void 0 : mediaSourceManager.startPublish());
         }
+        if (newVal === LiveStatus.IDLE) {
+          await (mediaSourceManager == null ? void 0 : mediaSourceManager.stopPublish());
+        }
       });
     });
-    onUnmounted(() => {
+    onBeforeUnmount(async () => {
+      var _a;
       re.unobserve(localMixerRef.value);
+      const mediaSourceManager = (_a = roomEngine.instance) == null ? void 0 : _a.getTRTCCloud().getMediaMixingManager();
+      await (mediaSourceManager == null ? void 0 : mediaSourceManager.destroy());
     });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", {
-        class: "local-mixer-container",
         ref_key: "localMixerRef",
-        ref: localMixerRef
+        ref: localMixerRef,
+        class: "local-mixer-container"
       }, [
         _cache[0] || (_cache[0] = createElementVNode("div", {
-          class: "local-mixer-content",
-          id: "local-video-mixer"
+          id: "local-video-mixer",
+          class: "local-mixer-content"
         }, null, -1)),
-        unref(activeMediaSource) ? (openBlock(), createElementBlock("div", {
+        unref(activeMediaSource) ? (openBlock(), createBlock(MixerControl, {
           key: 0,
-          class: "mixer-control-container",
-          style: normalizeStyle(mixControlContainerStyle.value)
-        }, [
-          createVNode(MixerControl, {
-            class: "mixer-control",
-            style: normalizeStyle(mixControlStyle.value)
-          }, null, 8, ["style"])
-        ], 4)) : createCommentVNode("", true),
+          ref_key: "mixControlRef",
+          ref: mixControlRef,
+          class: "mixer-control",
+          style: normalizeStyle(mixControlStyle.value)
+        }, null, 8, ["style"])) : createCommentVNode("", true),
         unref(mediaSourceList).length === 0 ? (openBlock(), createElementBlock("div", _hoisted_1, [
           createElementVNode("span", _hoisted_2, toDisplayString(unref(t)("No video")), 1)
         ])) : createCommentVNode("", true)
@@ -157,7 +188,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const LocalMixer = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-d5530943"]]);
+const LocalMixer = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-9e8c1226"]]);
 export {
   LocalMixer as default
 };

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

@@ -9,7 +9,7 @@ const _hoisted_1 = {
   fill: "none"
 };
 function _sfc_render(_ctx, _cache) {
-  return openBlock(), createElementBlock("svg", _hoisted_1, _cache[0] || (_cache[0] = [
+  return openBlock(), createElementBlock("svg", _hoisted_1, [..._cache[0] || (_cache[0] = [
     createElementVNode("path", {
       d: "M7.5 1H8.5V15H7.5V1Z",
       fill: "black",
@@ -28,7 +28,7 @@ function _sfc_render(_ctx, _cache) {
       "fill-opacity": "0.9",
       style: { "fill": "black", "fill-opacity": "0.9" }
     }, null, -1)
-  ]));
+  ])]);
 }
 const CameraMirror = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
 export {

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

@@ -9,7 +9,7 @@ const _hoisted_1 = {
   fill: "none"
 };
 function _sfc_render(_ctx, _cache) {
-  return openBlock(), createElementBlock("svg", _hoisted_1, _cache[0] || (_cache[0] = [
+  return openBlock(), createElementBlock("svg", _hoisted_1, [..._cache[0] || (_cache[0] = [
     createElementVNode("path", {
       d: "M6 12V6H7V12H6Z",
       "fill-opacity": "0.9",
@@ -25,7 +25,7 @@ function _sfc_render(_ctx, _cache) {
       "fill-opacity": "0.9",
       style: { "fill": "currentColor", "fill-opacity": "0.9" }
     }, null, -1)
-  ]));
+  ])]);
 }
 const Delete = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
 export {

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

@@ -9,7 +9,7 @@ const _hoisted_1 = {
   fill: "none"
 };
 function _sfc_render(_ctx, _cache) {
-  return openBlock(), createElementBlock("svg", _hoisted_1, _cache[0] || (_cache[0] = [
+  return openBlock(), createElementBlock("svg", _hoisted_1, [..._cache[0] || (_cache[0] = [
     createElementVNode("path", {
       d: "M9.00342 12.8867V2.1575",
       stroke: "currentcolor",
@@ -31,7 +31,7 @@ function _sfc_render(_ctx, _cache) {
       "stroke-linecap": "round",
       "stroke-linejoin": "round"
     }, null, -1)
-  ]));
+  ])]);
 }
 const Down = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
 export {

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

@@ -9,7 +9,7 @@ const _hoisted_1 = {
   fill: "none"
 };
 function _sfc_render(_ctx, _cache) {
-  return openBlock(), createElementBlock("svg", _hoisted_1, _cache[0] || (_cache[0] = [
+  return openBlock(), createElementBlock("svg", _hoisted_1, [..._cache[0] || (_cache[0] = [
     createElementVNode("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",
@@ -22,7 +22,7 @@ function _sfc_render(_ctx, _cache) {
       "fill-opacity": "0.9",
       style: { "fill": "black", "fill-opacity": "0.9" }
     }, null, -1)
-  ]));
+  ])]);
 }
 const Rotation = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
 export {

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

@@ -9,7 +9,7 @@ const _hoisted_1 = {
   fill: "none"
 };
 function _sfc_render(_ctx, _cache) {
-  return openBlock(), createElementBlock("svg", _hoisted_1, _cache[0] || (_cache[0] = [
+  return openBlock(), createElementBlock("svg", _hoisted_1, [..._cache[0] || (_cache[0] = [
     createElementVNode("path", {
       d: "M9.00342 5.11328V15.8425",
       stroke: "currentcolor",
@@ -31,7 +31,7 @@ function _sfc_render(_ctx, _cache) {
       "stroke-linecap": "round",
       "stroke-linejoin": "round"
     }, null, -1)
-  ]));
+  ])]);
 }
 const Up = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
 export {

package/dist/components/StreamMixer/index.js

@@ -1,6 +1,6 @@
 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 { LiveStreamView as LiveStreamViewComponent } from "../LiveStreamView/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";
@@ -8,7 +8,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "index",
   setup(__props) {
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(unref(LiveStreamViewComponent), { "ignore-local-video": true }, {
+      return openBlock(), createBlock(unref(LiveCoreViewComponent), { "ignore-local-video": true }, {
         localVideo: withCtx(({ style }) => [
           createVNode(LocalMixer, {
             style: normalizeStyle(style)

package/dist/components/StreamView/common/StreamCover/index.js

@@ -59,9 +59,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         createElementVNode("div", _hoisted_5, [
           createElementVNode("span", {
             class: normalizeClass(["audio-status", { "audio-on": isAudioAvailable.value, "audio-off": !isAudioAvailable.value }])
-          }, _cache[0] || (_cache[0] = [
+          }, [..._cache[0] || (_cache[0] = [
             createElementVNode("i", { class: "audio-icon" }, null, -1)
-          ]), 2),
+          ])], 2),
           createElementVNode("div", _hoisted_6, toDisplayString(displayName.value), 1)
         ])
       ]);

package/dist/components/StreamView/manager/mediaManager.js

@@ -196,7 +196,7 @@ class MediaManager {
       if (streamType === TUIVideoStreamType.kCameraStream) {
         if (isVideoMixerEnabled.value) {
           const mediaSourceManager = (_b = roomEngine.instance) == null ? void 0 : _b.getTRTCCloud().getMediaMixingManager();
-          mediaSourceManager.setDisplayParams(document.getElementById(viewIdList[0]));
+          mediaSourceManager.bindPreviewArea(document.getElementById(viewIdList[0]));
         } else {
           (_c = roomEngine.instance) == null ? void 0 : _c.setLocalVideoView({ view: viewIdList });
         }

package/dist/components/UserPicker/UserPicker.js

@@ -181,7 +181,7 @@ const style0 = {
 const cssModules = {
   "$style": style0
 };
-const UserPicker = /* @__PURE__ */ _export_sfc(_sfc_main, [["__cssModules", cssModules]]);
+const UserPickerComponent = /* @__PURE__ */ _export_sfc(_sfc_main, [["__cssModules", cssModules]]);
 export {
-  UserPicker as default
+  UserPickerComponent as default
 };

package/dist/components/UserPicker/UserPicker.vue.d.ts

@@ -1,7 +1,6 @@
-import { IUserPickerProps, IUserPickerNode, IUserPickerRow } from './type';
+import { UserPickerProps, UserPickerNode, UserPickerRow } from './type';
 
-type UserPickerProps = IUserPickerProps<any>;
-declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<UserPickerProps>, {
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<UserPickerProps<unknown>>, {
     dataSource: () => never[];
     defaultSelectedItems: () => never[];
     lockedItems: () => never[];
@@ -9,10 +8,10 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
     minCount: number;
     enableSearch: boolean;
 }>>, {
-    getSelectedItems: () => import('./type').IUserPickerResult<any>;
-    updateListData: (newDataSource: IUserPickerRow<any>[]) => void;
-    updateTreeData: (key: string, partialNewNode: Partial<IUserPickerNode<any>>) => void;
-}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<UserPickerProps>, {
+    getSelectedItems: () => import('./type').UserPickerResult<any>;
+    updateListData: (newDataSource: UserPickerRow<any>[]) => void;
+    updateTreeData: (key: string, partialNewNode: Partial<UserPickerNode<any>>) => void;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<UserPickerProps<unknown>>, {
     dataSource: () => never[];
     defaultSelectedItems: () => never[];
     lockedItems: () => never[];
@@ -20,7 +19,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
     minCount: number;
     enableSearch: boolean;
 }>>> & Readonly<{}>, {
-    dataSource: import('./type').IUserPickerDataSource<any>;
+    dataSource: import('./type').UserPickerDataSource<unknown>;
     maxCount: number;
     minCount: number;
     defaultSelectedItems: Array<{

package/dist/components/UserPicker/components/ListMode/ListMode.js

@@ -62,10 +62,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                 createElementVNode("div", {
                   class: normalizeClass([_ctx.$style.list__checkbox, { [_ctx.$style["list__checkbox--checked"]]: isSelected(item.key) }])
                 }, [
-                  isSelected(item.key) ? (openBlock(), createBlock(unref(IconCheckSm), {
-                    key: 0,
-                    name: "check"
-                  })) : createCommentVNode("", true)
+                  isSelected(item.key) ? (openBlock(), createBlock(unref(IconCheckSm), { key: 0 })) : createCommentVNode("", true)
                 ], 2)
               ], 2),
               _ctx.renderItem ? (openBlock(), createBlock(resolveDynamicComponent(_ctx.renderItem), {
@@ -91,27 +88,27 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const list__container = "_list__container_1k3dy_1";
-const list__item = "_list__item_1k3dy_21";
-const list__checkbox = "_list__checkbox_1k3dy_42";
-const list__content = "_list__content_1k3dy_60";
-const list__avatar = "_list__avatar_1k3dy_66";
-const list__label = "_list__label_1k3dy_69";
-const list__empty = "_list__empty_1k3dy_85";
+const list__container = "_list__container_101wg_1";
+const list__item = "_list__item_101wg_21";
+const list__checkbox = "_list__checkbox_101wg_42";
+const list__content = "_list__content_101wg_59";
+const list__avatar = "_list__avatar_101wg_65";
+const list__label = "_list__label_101wg_68";
+const list__empty = "_list__empty_101wg_84";
 const style0 = {
   list__container,
   list__item,
-  "list__item--selected": "_list__item--selected_1k3dy_32",
-  "list__item--locked": "_list__item--locked_1k3dy_38",
-  "list__checkbox-wrapper": "_list__checkbox-wrapper_1k3dy_42",
+  "list__item--selected": "_list__item--selected_101wg_32",
+  "list__item--locked": "_list__item--locked_101wg_38",
+  "list__checkbox-wrapper": "_list__checkbox-wrapper_101wg_42",
   list__checkbox,
-  "list__checkbox--checked": "_list__checkbox--checked_1k3dy_56",
+  "list__checkbox--checked": "_list__checkbox--checked_101wg_55",
   list__content,
   list__avatar,
   list__label,
-  "list__load-more": "_list__load-more_1k3dy_77",
+  "list__load-more": "_list__load-more_101wg_76",
   list__empty,
-  "list__end-marker": "_list__end-marker_1k3dy_94"
+  "list__end-marker": "_list__end-marker_101wg_93"
 };
 const cssModules = {
   "$style": style0