tuikit-atomicx-vue3 0.1.0 → 3.3.0-beta.3

package/dist/components/ConversationList/index.js

@@ -1,4 +1,34 @@
-import { default as default2 } from "./ConversationList.js";
+import { addI18n } from "../../i18n/index.js";
+import ConversationListComponent from "./ConversationList.js";
+import ConversationPlaceHolder$1 from "./ConversationPlaceHolder/ConversationPlaceHolder.js";
+import enResource from "./i18n/en-US.js";
+import zhResource from "./i18n/zh-CN.js";
+import ConversationActionsComponent from "./ConversationActions/ConversationActions.js";
+import ConversationListHeaderComponent from "./ConversationListHeader/ConversationListHeader.js";
+import ConversationListContentComponent from "./ConversationListContent/ConversationListContent.js";
+import { ConversationPreview as _sfc_main } from "./ConversationPreview/index.js";
+import ConversationCreateComponent from "./ConversationCreate/ConversationCreate.js";
+import ConversationPreviewUIComponent from "./ConversationPreview/ConversationPreviewUI.js";
+import ConversationSearchComponent from "./ConversationSearch/ConversationSearch.js";
+addI18n("en-US", { translation: enResource });
+addI18n("zh-CN", { translation: zhResource });
+const ConversationList = ConversationListComponent;
+const ConversationActions = ConversationActionsComponent;
+const ConversationCreate = ConversationCreateComponent;
+const ConversationListHeader = ConversationListHeaderComponent;
+const ConversationListContent = ConversationListContentComponent;
+const ConversationPlaceHolder = ConversationPlaceHolder$1;
+const ConversationPreview = _sfc_main;
+const ConversationPreviewUI = ConversationPreviewUIComponent;
+const ConversationSearch = ConversationSearchComponent;
 export {
-  default2 as ConversationList
+  ConversationActions,
+  ConversationCreate,
+  ConversationList,
+  ConversationListContent,
+  ConversationListHeader,
+  ConversationPlaceHolder,
+  ConversationPreview,
+  ConversationPreviewUI,
+  ConversationSearch
 };

package/dist/components/LiveAudienceList/LiveAudienceList.js

@@ -3,9 +3,9 @@ import { useUIKit } from "@tencentcloud/uikit-base-component-vue3";
 import { useLiveAudienceState } from "../../states/LiveAudienceState.js";
 import { useLiveState } from "../../states/LiveState/index.js";
 import { useLoginState } from "../../states/LoginState.js";
-import { LiveStatus } from "../../types/live.js";
 import UserActionMenu from "./UserActionMenu.js";
 import Avatar from "../Avatar/Avatar.js";
+import { LiveStatus } from "../../types/live.js";
 import { _ as _export_sfc } from "../../_plugin-vue_export-helper-1tPrXgE0.js";
 const _hoisted_1 = ["onClick"];
 const _hoisted_2 = { class: "viewer-info" };
@@ -138,7 +138,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             createElementVNode("p", null, toDisplayString(unref(t)("No audience yet")), 1)
           ])) : createCommentVNode("", true)
         ], 512),
-        unref(loginUserInfo) && unref(localLiveStatus) === unref(LiveStatus).Live ? (openBlock(), createElementBlock("div", _hoisted_7, [
+        unref(loginUserInfo) && unref(localLiveStatus) === unref(LiveStatus).Live && !isOwner.value ? (openBlock(), createElementBlock("div", _hoisted_7, [
           _cache[1] || (_cache[1] = createElementVNode("span", { class: "rank" }, "-", -1)),
           createVNode(unref(Avatar), {
             src: unref(loginUserInfo).avatarUrl,
@@ -161,7 +161,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const LiveAudienceListPC = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-62951863"]]);
+const LiveAudienceListPC = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-51062739"]]);
 export {
   LiveAudienceListPC as default
 };

package/dist/components/LiveAudienceList/UserActionMenu.js

@@ -35,10 +35,6 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       receivedCoGuestUserList,
       sentCoGuestUserList,
       availableCoGuestUserList,
-      sendCoGuestRequest,
-      cancelCoGuestRequest,
-      acceptCoGuestRequest,
-      rejectCoGuestRequest,
       disconnect
     } = useCoGuestState();
     const { disableSendMessage, audienceList, kickUserOutOfRoom } = useLiveAudienceState();
@@ -55,9 +51,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         return [];
       }
       const isInCoGuest = userListInCoGuest.value.some((user) => user.userId === props.userId);
-      const isSentCoGuest = sentCoGuestUserList.value.some((user) => user.userId === props.userId);
-      const isAvailableCoGuest = availableCoGuestUserList.value.some((user) => user.userId === props.userId);
-      const isReceivedCoGuest = receivedCoGuestUserList.value.some((user) => user.userId === props.userId);
+      sentCoGuestUserList.value.some((user) => user.userId === props.userId);
+      availableCoGuestUserList.value.some((user) => user.userId === props.userId);
+      receivedCoGuestUserList.value.some((user) => user.userId === props.userId);
       const isDisableSendMessage = (_a = currentUserInfo.value) == null ? void 0 : _a.isMessageDisabled;
       if (!isDisableSendMessage) {
         tempActions.push({
@@ -76,35 +72,6 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       if (isInCoGuest) {
         tempActions.push({ label: t("Kick out"), action: "disconnect", actionFn: () => disconnect(props.userId) });
       }
-      if (isAvailableCoGuest) {
-        tempActions.push({
-          label: t("Invite to seat"),
-          action: "takeSeat",
-          actionFn: () => sendCoGuestRequest({
-            userId: props.userId,
-            seatIndex: -1
-          })
-        });
-      }
-      if (isSentCoGuest) {
-        tempActions.push({
-          label: t("Cancel invitation"),
-          action: "cancelCoGuestRequest",
-          actionFn: () => cancelCoGuestRequest({ userId: props.userId })
-        });
-      }
-      if (isReceivedCoGuest) {
-        tempActions.push({
-          label: t("Accept invitation"),
-          action: "acceptCoGuestRequest",
-          actionFn: () => acceptCoGuestRequest({ userId: props.userId })
-        });
-        tempActions.push({
-          label: t("Reject invitation"),
-          action: "rejectCoGuestRequest",
-          actionFn: () => rejectCoGuestRequest({ userId: props.userId })
-        });
-      }
       tempActions.push({
         label: t("Kick out of room"),
         action: "kickUserOutOfRoom",
@@ -171,7 +138,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const UserActionMenu = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-edae413d"]]);
+const UserActionMenu = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-8fb62a68"]]);
 export {
   UserActionMenu as default
 };

package/dist/components/LiveCoreView/DefaultStreamViewUI.js

@@ -0,0 +1,177 @@
+import { defineComponent, ref, computed, watch, nextTick, onUnmounted, createElementBlock, openBlock, createCommentVNode, Fragment, createVNode, unref, createBlock, createElementVNode, toDisplayString } from "vue";
+import { useCoGuestState } from "../../states/CoGuestState.js";
+import Avatar from "../Avatar/Avatar.js";
+import AudioIcon from "../../baseComp/AudioIcon.js";
+import { useLiveSeatState } from "../../states/LiveSeatState/index.js";
+import { useUIKit } from "@tencentcloud/uikit-base-component-vue3";
+import { DeviceStatus } from "../../types/device.js";
+import { CoGuestStatus } from "../../types/coGuest.js";
+import { _ as _export_sfc } from "../../_plugin-vue_export-helper-1tPrXgE0.js";
+const _hoisted_1 = { class: "stream-cover" };
+const _hoisted_2 = {
+  key: 0,
+  class: "no-video-container"
+};
+const _hoisted_3 = {
+  key: 1,
+  class: "mask"
+};
+const _hoisted_4 = {
+  key: 1,
+  class: "user-details"
+};
+const _hoisted_5 = { class: "username" };
+const _hoisted_6 = {
+  key: 1,
+  class: "empty-position"
+};
+const _hoisted_7 = ["title"];
+const _hoisted_8 = ["title"];
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "DefaultStreamViewUI",
+  props: {
+    userInfo: {},
+    streamViewInfoList: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const { t } = useUIKit();
+    const canvasRef = ref(null);
+    const { localCoGuestStatus } = useCoGuestState();
+    const { speakingUsers, seatList } = useLiveSeatState();
+    const seatListWithUser = computed(() => {
+      return seatList.value.filter((item) => item.userInfo && item.userInfo.userId !== "");
+    });
+    const currentStreamViewSize = computed(() => {
+      const currentStreamViewInfo = props.streamViewInfoList.find((item) => {
+        var _a, _b;
+        return ((_a = item.userInfo) == null ? void 0 : _a.userId) === ((_b = props.userInfo) == null ? void 0 : _b.userId);
+      });
+      if (!currentStreamViewInfo) return { width: 0, height: 0 };
+      return {
+        width: parseInt(currentStreamViewInfo == null ? void 0 : currentStreamViewInfo.region.width),
+        height: parseInt(currentStreamViewInfo == null ? void 0 : currentStreamViewInfo.region.height)
+      };
+    });
+    const avatarSize = computed(() => {
+      const defaultAvatarSize = 54;
+      const minSize = Math.min(currentStreamViewSize.value.width, currentStreamViewSize.value.height);
+      if (minSize < defaultAvatarSize + 10) {
+        return minSize - 10;
+      }
+      return defaultAvatarSize;
+    });
+    const needCanvasMaskList = computed(() => {
+      const currentStreamViewInfo = props.streamViewInfoList.find((item) => {
+        var _a, _b;
+        return ((_a = item.userInfo) == null ? void 0 : _a.userId) === ((_b = props.userInfo) == null ? void 0 : _b.userId);
+      });
+      if (!currentStreamViewInfo) return [];
+      return props.streamViewInfoList.filter((item) => {
+        const isHigher = item.region.zIndex > (currentStreamViewInfo == null ? void 0 : currentStreamViewInfo.region.zIndex);
+        const isHorizontalOverlap = parseInt(item.region.left) > parseInt(currentStreamViewInfo == null ? void 0 : currentStreamViewInfo.region.left) && parseInt(item.region.left) < parseInt(currentStreamViewInfo == null ? void 0 : currentStreamViewInfo.region.left) + parseInt(currentStreamViewInfo == null ? void 0 : currentStreamViewInfo.region.width);
+        const isVerticalOverlap = parseInt(item.region.top) > parseInt(currentStreamViewInfo == null ? void 0 : currentStreamViewInfo.region.top) && parseInt(item.region.top) < parseInt(currentStreamViewInfo == null ? void 0 : currentStreamViewInfo.region.top) + parseInt(currentStreamViewInfo == null ? void 0 : currentStreamViewInfo.region.height);
+        return isHigher && isHorizontalOverlap && isVerticalOverlap;
+      }).map((item) => {
+        return {
+          left: parseInt(item.region.left) - parseInt(currentStreamViewInfo == null ? void 0 : currentStreamViewInfo.region.left),
+          top: parseInt(item.region.top) - parseInt(currentStreamViewInfo == null ? void 0 : currentStreamViewInfo.region.top),
+          width: parseInt(item.region.width),
+          height: parseInt(item.region.height)
+        };
+      });
+    });
+    const drawCanvas = () => {
+      if (!canvasRef.value) return;
+      const canvas = canvasRef.value;
+      const ctx = canvas.getContext("2d");
+      if (!ctx) return;
+      const rect = canvas.getBoundingClientRect();
+      canvas.width = rect.width;
+      canvas.height = rect.height;
+      ctx.fillStyle = "#1F2024";
+      ctx.fillRect(0, 0, canvas.width, canvas.height);
+      needCanvasMaskList.value.forEach((item) => {
+        ctx.clearRect(item.left, item.top, item.width, item.height);
+      });
+    };
+    let resizeObserver = null;
+    watch(() => needCanvasMaskList.value.length, async () => {
+      if (needCanvasMaskList.value.length > 0) {
+        await nextTick();
+        if (canvasRef.value) {
+          drawCanvas();
+          resizeObserver = new ResizeObserver(() => {
+            drawCanvas();
+          });
+          resizeObserver.observe(canvasRef.value);
+        }
+      } else {
+        if (resizeObserver && canvasRef.value) {
+          resizeObserver.unobserve(canvasRef.value);
+        }
+      }
+    }, { immediate: true });
+    onUnmounted(() => {
+      if (resizeObserver && canvasRef.value) {
+        resizeObserver.unobserve(canvasRef.value);
+      }
+    });
+    const displayName = computed(() => {
+      var _a, _b;
+      return ((_a = props.userInfo) == null ? void 0 : _a.userName) || ((_b = props.userInfo) == null ? void 0 : _b.userId);
+    });
+    const isAudioAvailable = computed(() => {
+      var _a;
+      return ((_a = props.userInfo) == null ? void 0 : _a.microphoneStatus) === DeviceStatus.On;
+    });
+    const isVideoAvailable = computed(() => {
+      var _a;
+      return ((_a = props.userInfo) == null ? void 0 : _a.cameraStatus) === DeviceStatus.On;
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1, [
+        _ctx.userInfo.userId ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+          !isVideoAvailable.value ? (openBlock(), createElementBlock("div", _hoisted_2, [
+            needCanvasMaskList.value.length > 0 ? (openBlock(), createElementBlock("canvas", {
+              key: 0,
+              ref_key: "canvasRef",
+              ref: canvasRef,
+              class: "canvas-mask"
+            }, null, 512)) : (openBlock(), createElementBlock("div", _hoisted_3)),
+            createVNode(unref(Avatar), {
+              class: "avatar",
+              size: avatarSize.value,
+              src: _ctx.userInfo.avatarUrl,
+              alt: displayName.value
+            }, null, 8, ["size", "src", "alt"])
+          ])) : createCommentVNode("", true),
+          seatListWithUser.value.length > 1 ? (openBlock(), createElementBlock("div", _hoisted_4, [
+            !isAudioAvailable.value ? (openBlock(), createBlock(AudioIcon, {
+              key: 0,
+              class: "audio-icon",
+              isMuted: !isAudioAvailable.value,
+              audioVolume: unref(speakingUsers).get(_ctx.userInfo.userId) || 0
+            }, null, 8, ["isMuted", "audioVolume"])) : createCommentVNode("", true),
+            createElementVNode("div", _hoisted_5, toDisplayString(displayName.value), 1)
+          ])) : createCommentVNode("", true)
+        ], 64)) : createCommentVNode("", true),
+        !_ctx.userInfo.userId ? (openBlock(), createElementBlock("div", _hoisted_6, [
+          unref(localCoGuestStatus) === unref(CoGuestStatus).Connected ? (openBlock(), createElementBlock("span", {
+            key: 0,
+            class: "text",
+            title: unref(t)("Waiting for connection")
+          }, toDisplayString(unref(t)("Waiting for connection")), 9, _hoisted_7)) : (openBlock(), createElementBlock("span", {
+            key: 1,
+            class: "text",
+            title: unref(t)("Waiting for connection")
+          }, toDisplayString(unref(t)("Waiting for connection")), 9, _hoisted_8))
+        ])) : createCommentVNode("", true)
+      ]);
+    };
+  }
+});
+const DefaultStreamViewUI = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-9237082b"]]);
+export {
+  DefaultStreamViewUI as default
+};

package/dist/components/LiveCoreView/DefaultStreamViewUI.vue.d.ts

@@ -0,0 +1,26 @@
+import { SeatUserInfo } from '../../types';
+
+interface Props {
+    userInfo: SeatUserInfo;
+    streamViewInfoList: Array<{
+        userInfo: SeatUserInfo;
+        region: {
+            left: string;
+            top: string;
+            width: string;
+            height: string;
+            zIndex: number;
+        };
+    }>;
+}
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<Props>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<Props>>> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+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;
+    };
+};

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

@@ -0,0 +1,4 @@
+import { default as DefaultStreamViewUI } from './DefaultStreamViewUI.vue';
+import { default as LiveCoreView } from './index.vue';
+
+export { LiveCoreView, DefaultStreamViewUI };

package/dist/components/{LiveStreamView → LiveCoreView}/index.js

@@ -1,22 +1,22 @@
-import { defineComponent, useSlots, computed, ref, onMounted, onBeforeUnmount, watch, createElementBlock, openBlock, createElementVNode, normalizeStyle, createCommentVNode, renderSlot, unref, toDisplayString, Fragment, renderList, createBlock, mergeProps, normalizeProps } from "vue";
+import { addI18n } from "../../i18n/index.js";
 import DefaultStreamViewUI from "./DefaultStreamViewUI.js";
-import { getContentSize } from "../../utils/domOperation.js";
+import { defineComponent, useSlots, computed, ref, onMounted, onBeforeUnmount, watch, createElementBlock, openBlock, createElementVNode, normalizeStyle, createCommentVNode, renderSlot, unref, toDisplayString, Fragment, renderList, createBlock, mergeProps, normalizeProps } from "vue";
+import { useUIKit } from "@tencentcloud/uikit-base-component-vue3";
 import { useLiveSeatState } from "../../states/LiveSeatState/index.js";
-import { useLoginState } from "../../states/LoginState.js";
 import { useLiveState } from "../../states/LiveState/index.js";
-import { useUIKit } from "@tencentcloud/uikit-base-component-vue3";
+import { useLoginState } from "../../states/LoginState.js";
+import { getContentSize } from "../../utils/domOperation.js";
 import { _ as _export_sfc } from "../../_plugin-vue_export-helper-1tPrXgE0.js";
-import { addI18n } from "../../i18n/index.js";
-import { resource as resource$1 } from "./i18n/zh-CN/index.js";
 import { resource } from "./i18n/en-US/index.js";
+import { resource as resource$1 } from "./i18n/zh-CN/index.js";
 const _hoisted_1 = {
   key: 0,
-  class: "live-stream-placeholder"
+  class: "live-core-placeholder"
 };
 const _hoisted_2 = { class: "placeholder-text" };
 const _hoisted_3 = {
   key: 1,
-  class: "live-stream-ui"
+  class: "live-core-ui"
 };
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "index",
@@ -30,12 +30,21 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const isMounted = ref(false);
     onMounted(() => {
       isMounted.value = true;
-      startPlayStream({ view: "stream-content" });
+      startPlayStream({ view: "atomicx-live-stream-content" });
     });
     onBeforeUnmount(() => {
       isMounted.value = false;
       stopPlayStream();
     });
+    const isPortraitContainer = ref(true);
+    const liveCoreViewContainerRef = ref();
+    const originStreamViewStyle = ref({
+      width: 0,
+      height: 0,
+      transformX: 0,
+      transformY: 0,
+      scale: 1
+    });
     const ratioLayoutList = computed(() => {
       var _a;
       const layoutCanvas = canvas.value;
@@ -55,28 +64,36 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         zOrder: item.zOrder
       }));
     });
-    const seatListWithRealSize = computed(() => {
-      return seatList.value.map((item, index) => {
-        const ratioLayout = ratioLayoutList.value[index];
+    const streamViewSize = computed(() => {
+      if (isPortraitContainer.value) {
         return {
-          userInfo: item.userInfo,
-          region: {
-            position: "absolute",
-            left: `${streamViewSize.value.width * ratioLayout.x}px`,
-            top: `${streamViewSize.value.width * ratioLayout.y}px`,
-            width: `${streamViewSize.value.width * ratioLayout.width}px`,
-            height: ratioLayout.height === -1 ? `${streamViewSize.value.height}px` : `${streamViewSize.value.width * ratioLayout.height}px`,
-            zIndex: Number(ratioLayout.zOrder) || 0
-          }
+          width: originStreamViewStyle.value.width,
+          height: originStreamViewStyle.value.height
         };
-      });
-    });
-    const localStreamViewInfo = computed(() => {
-      return seatListWithRealSize.value.find((item) => {
-        var _a, _b;
-        return ((_a = item == null ? void 0 : item.userInfo) == null ? void 0 : _a.userId) === ((_b = loginUserInfo.value) == null ? void 0 : _b.userId);
-      });
+      }
+      return {
+        width: originStreamViewStyle.value.width * originStreamViewStyle.value.scale,
+        height: originStreamViewStyle.value.height * originStreamViewStyle.value.scale
+      };
     });
+    const seatListWithRealSize = computed(() => seatList.value.map((item, index) => {
+      const ratioLayout = ratioLayoutList.value[index];
+      return {
+        userInfo: item.userInfo,
+        region: {
+          position: "absolute",
+          left: `${streamViewSize.value.width * ratioLayout.x}px`,
+          top: `${streamViewSize.value.width * ratioLayout.y}px`,
+          width: `${streamViewSize.value.width * ratioLayout.width}px`,
+          height: ratioLayout.height === -1 ? `${streamViewSize.value.height}px` : `${streamViewSize.value.width * ratioLayout.height}px`,
+          zIndex: Number(ratioLayout.zOrder) || 0
+        }
+      };
+    }));
+    const localStreamViewInfo = computed(() => seatListWithRealSize.value.find((item) => {
+      var _a, _b;
+      return ((_a = item == null ? void 0 : item.userInfo) == null ? void 0 : _a.userId) === ((_b = loginUserInfo.value) == null ? void 0 : _b.userId);
+    }));
     const needPlayStreamViewInfo = computed(() => {
       if (ignoreLocalVideoPlay.value) {
         return seatListWithRealSize.value.filter((item) => {
@@ -86,14 +103,6 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       }
       return seatListWithRealSize.value;
     });
-    const liveStreamViewContainerRef = ref();
-    const originStreamViewStyle = ref({
-      width: 0,
-      height: 0,
-      transformX: 0,
-      transformY: 0,
-      scale: 1
-    });
     const visualStreamSize = computed(() => {
       if (ratioLayoutList.value.length === 0) {
         return {
@@ -103,16 +112,14 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           centerY: 0
         };
       }
-      const absoluteLayoutList = ratioLayoutList.value.map((item) => {
-        return {
-          userId: item.userId,
-          left: originStreamViewStyle.value.width * item.x,
-          top: originStreamViewStyle.value.width * item.y,
-          width: originStreamViewStyle.value.width * item.width,
-          height: item.height === -1 ? originStreamViewStyle.value.height : originStreamViewStyle.value.width * item.height,
-          zIndex: item.zOrder
-        };
-      });
+      const absoluteLayoutList = ratioLayoutList.value.map((item) => ({
+        userId: item.userId,
+        left: originStreamViewStyle.value.width * item.x,
+        top: originStreamViewStyle.value.width * item.y,
+        width: originStreamViewStyle.value.width * item.width,
+        height: item.height === -1 ? originStreamViewStyle.value.height : originStreamViewStyle.value.width * item.height,
+        zIndex: item.zOrder
+      }));
       const minX = Math.min(...absoluteLayoutList.map((item) => item.left));
       const minY = Math.min(...absoluteLayoutList.map((item) => item.top));
       const maxX = Math.max(...absoluteLayoutList.map((item) => item.left + item.width));
@@ -128,10 +135,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       handleStreamListTransform();
     });
     function handleStreamListTransform() {
-      if (!liveStreamViewContainerRef.value) {
+      if (!liveCoreViewContainerRef.value) {
         return;
       }
-      const containerRect = liveStreamViewContainerRef.value.getBoundingClientRect();
+      const containerRect = liveCoreViewContainerRef.value.getBoundingClientRect();
       const containerWidth = Math.floor(containerRect.width);
       const containerHeight = Math.floor(containerRect.height);
       if (visualStreamSize.value.width && visualStreamSize.value.height) {
@@ -147,18 +154,6 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         originStreamViewStyle.value.transformY = 0;
       }
     }
-    const streamViewSize = computed(() => {
-      if (isPortraitContainer.value) {
-        return {
-          width: originStreamViewStyle.value.width,
-          height: originStreamViewStyle.value.height
-        };
-      }
-      return {
-        width: originStreamViewStyle.value.width * originStreamViewStyle.value.scale,
-        height: originStreamViewStyle.value.height * originStreamViewStyle.value.scale
-      };
-    });
     const streamViewStyle = computed(() => {
       if (isPortraitContainer.value) {
         return {
@@ -195,11 +190,11 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       return Number(aspectRatio.value.split(":")[1]);
     });
     function handleStreamRegionSize() {
-      if (!liveStreamViewContainerRef.value) {
+      if (!liveCoreViewContainerRef.value) {
         return;
       }
-      const containerWidth = getContentSize(liveStreamViewContainerRef.value).width;
-      const containerHeight = getContentSize(liveStreamViewContainerRef.value).height;
+      const containerWidth = getContentSize(liveCoreViewContainerRef.value).width;
+      const containerHeight = getContentSize(liveCoreViewContainerRef.value).height;
       let width = containerWidth;
       let height = containerHeight;
       if (widthRatio.value && heightRatio.value) {
@@ -223,12 +218,11 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         handleStreamRegionSize();
       }
     );
-    const isPortraitContainer = ref(true);
     const getContainerOrientation = () => {
-      if (!liveStreamViewContainerRef.value) {
+      if (!liveCoreViewContainerRef.value) {
         return;
       }
-      const containerRect = liveStreamViewContainerRef.value.getBoundingClientRect();
+      const containerRect = liveCoreViewContainerRef.value.getBoundingClientRect();
       isPortraitContainer.value = containerRect.width < containerRect.height;
     };
     const ro = new ResizeObserver(() => {
@@ -237,28 +231,28 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       handleStreamListTransform();
     });
     onMounted(() => {
-      ro.observe(liveStreamViewContainerRef.value);
+      ro.observe(liveCoreViewContainerRef.value);
       getContainerOrientation();
     });
     onBeforeUnmount(() => {
-      ro.unobserve(liveStreamViewContainerRef.value);
+      ro.unobserve(liveCoreViewContainerRef.value);
     });
     return (_ctx, _cache) => {
       var _a;
       return openBlock(), createElementBlock("div", {
-        class: "live-stream-view-container",
-        ref_key: "liveStreamViewContainerRef",
-        ref: liveStreamViewContainerRef
+        ref_key: "liveCoreViewContainerRef",
+        ref: liveCoreViewContainerRef,
+        class: "live-core-view-container"
       }, [
         createElementVNode("div", {
-          class: "live-stream-view",
+          class: "live-core-view",
           style: normalizeStyle(streamViewStyle.value)
         }, [
           !_ctx.$slots.localVideo && unref(seatList).length === 0 ? (openBlock(), createElementBlock("div", _hoisted_1, [
             createElementVNode("span", _hoisted_2, toDisplayString(unref(t)("No video")), 1)
           ])) : createCommentVNode("", true),
           _cache[0] || (_cache[0] = createElementVNode("div", {
-            id: "stream-content",
+            id: "atomicx-live-stream-content",
             class: "stream-content"
           }, null, -1)),
           needPlayStreamViewInfo.value.length > 0 ? (openBlock(), createElementBlock("div", _hoisted_3, [
@@ -270,9 +264,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                 renderSlot(_ctx.$slots, "streamViewUI", mergeProps({ ref_for: true }, { userInfo: item.userInfo }), void 0, true),
                 !_ctx.$slots.streamViewUI ? (openBlock(), createBlock(DefaultStreamViewUI, {
                   key: 0,
-                  containerStyle: item.region,
+                  streamViewInfoList: needPlayStreamViewInfo.value,
                   userInfo: item.userInfo
-                }, null, 8, ["containerStyle", "userInfo"])) : createCommentVNode("", true)
+                }, null, 8, ["streamViewInfoList", "userInfo"])) : createCommentVNode("", true)
               ], 4);
             }), 128))
           ])) : createCommentVNode("", true),
@@ -282,10 +276,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const LiveStreamView = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-80a8bddb"]]);
+const LiveCoreViewComponent = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-42a8fbdc"]]);
 addI18n("en-US", { translation: resource });
 addI18n("zh-CN", { translation: resource$1 });
 export {
   DefaultStreamViewUI,
-  LiveStreamView
+  LiveCoreViewComponent as LiveCoreView
 };

package/dist/components/{LiveStreamView → LiveCoreView}/index.vue.d.ts

@@ -1,6 +1,8 @@
+import { SeatUserInfo } from '../../types';
+
 declare function __VLS_template(): {
     streamViewUI?(_: {
-        userInfo: import('../..').SeatUserInfo | undefined;
+        userInfo: SeatUserInfo;
     }): any;
     localVideo?(_: {
         style: {