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

package/dist/states/LiveSeatState/seatEventManager.js

@@ -1,11 +1,11 @@
 var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-import { DeviceStatus } from "../../types/device.js";
-import TUIRoomEngine, { TUIRoomEvents, TUILiveLayoutManagerEvents } from "@tencentcloud/tuiroom-engine-js";
+import TUIRoomEngine, { TUIDeviceStatus, TUIRoomEvents, TUILiveLayoutManagerEvents } from "@tencentcloud/tuiroom-engine-js";
 import { useRoomEngine } from "../../hooks/useRoomEngine.js";
 import { useLiveState } from "../LiveState/index.js";
 import { useSeatStore } from "./store.js";
+import { DeviceStatus } from "../../types/device.js";
 const { currentLive } = useLiveState();
 const roomEngine = useRoomEngine();
 const { canvas, seatList, speakingUsers, networkQualities } = useSeatStore();
@@ -25,8 +25,8 @@ const _SeatEventManager = class _SeatEventManager {
       roomId: ((_a = currentLive.value) == null ? void 0 : _a.liveId) || "",
       userName: seatRegion.userName,
       avatarUrl: seatRegion.userAvatar,
-      microphoneStatus: seatRegion.isUserMicrophoneOpened ? DeviceStatus.On : DeviceStatus.Off,
-      cameraStatus: seatRegion.isUserCameraOpened ? DeviceStatus.On : DeviceStatus.Off,
+      microphoneStatus: seatRegion.userMicrophoneStatus === TUIDeviceStatus.TUIDeviceStatusOpened ? DeviceStatus.On : DeviceStatus.Off,
+      cameraStatus: seatRegion.userCameraStatus === TUIDeviceStatus.TUIDeviceStatusOpened ? DeviceStatus.On : DeviceStatus.Off,
       onSeatTimestamp: Date.now(),
       customInfo: {}
     };
@@ -45,7 +45,7 @@ const _SeatEventManager = class _SeatEventManager {
       }
     };
   }
-  onSeatLayoutChanged(roomId, seatLayout) {
+  onSeatLayoutChanged({ roomId, seatLayout }) {
     var _a;
     if (roomId !== ((_a = currentLive.value) == null ? void 0 : _a.liveId)) {
       return;
@@ -55,12 +55,10 @@ const _SeatEventManager = class _SeatEventManager {
       height: seatLayout.canvasHeight,
       background: "#000000"
     };
-    seatList.value = seatLayout.regions.map((region) => {
-      return this.getNewSeatInfo(region);
-    });
+    seatList.value = seatLayout.regions.map((region) => this.getNewSeatInfo(region));
   }
   onUserNetworkQualityChanged({ userNetworkList }) {
-    Object.keys(networkQualities.value).forEach((userId) => {
+    Array.from(networkQualities.value.keys()).forEach((userId) => {
       if (!userNetworkList.some((userNetwork) => userNetwork.userId === userId)) {
         networkQualities.value.delete(userId);
       }

package/dist/states/LiveSeatState/store.js

@@ -1,6 +1,6 @@
 import { ref, watch } from "vue";
-import { LiveStatus } from "../../types/live.js";
 import { useLiveState } from "../LiveState/index.js";
+import { LiveStatus } from "../../types/live.js";
 const { localLiveStatus } = useLiveState();
 const canvas = ref({
   width: 0,

package/dist/states/LiveSeatState/usePlayStream/MixStreamPlayer.js

@@ -40,6 +40,15 @@ const _MixStreamPlayer = class _MixStreamPlayer {
         streamType: TUIVideoStreamType.kCameraStream
       }));
       this.isPlayingMixStream = true;
+      setTimeout(() => {
+        var _a2, _b2, _c;
+        const { x: xContainer, y: yContainer, width: widthContainer, height: heightContainer } = ((_a2 = document.querySelector("#atomicx-live-stream-content")) == null ? void 0 : _a2.getBoundingClientRect()) ?? {};
+        console.log("MixStreamPlayer.startPlay: container", xContainer, yContainer, widthContainer, heightContainer);
+        const { x: xVideo, y: yVideo, width: widthVideo, height: heightVideo } = ((_b2 = document.querySelector("#atomicx-live-stream-content #atomicx-live-stream-content_video")) == null ? void 0 : _b2.getBoundingClientRect()) ?? {};
+        console.log("MixStreamPlayer.startPlay: videoDiv", xVideo, yVideo, widthVideo, heightVideo);
+        const { x: xVideoElement, y: yVideoElement, width: widthVideoElement, height: heightVideoElement } = ((_c = document.querySelector("#atomicx-live-stream-content video")) == null ? void 0 : _c.getBoundingClientRect()) ?? {};
+        console.log("MixStreamPlayer.startPlay: videoElement", xVideoElement, yVideoElement, widthVideoElement, heightVideoElement);
+      }, 1e3);
     }
   }
   async stop() {

package/dist/states/LiveSeatState/usePlayStream/RTCStreamManager.js

@@ -3,9 +3,9 @@ var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { en
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
 import { TUIVideoStreamType } from "@tencentcloud/tuiroom-engine-js";
 import RTCStreamPlayer from "./RTCStreamPlayer.js";
-import { DeviceStatus } from "../../../types/device.js";
 import { useLoginState } from "../../LoginState.js";
 import { useVideoMixerState } from "../../VideoMixerState.js";
+import { DeviceStatus } from "../../../types/device.js";
 const { loginUserInfo } = useLoginState();
 const { isVideoMixerEnabled } = useVideoMixerState();
 const _RTCStreamManager = class _RTCStreamManager {

package/dist/states/LiveSeatState/usePlayStream/RTCStreamPlayer.js

@@ -27,7 +27,7 @@ class RTCStreamPlayer {
   }
   createRtcStreamView() {
     const view = document.createElement("div");
-    view.id = `rtc_stream_view_${this.userId}_${this.streamType}_${Math.random()}`;
+    view.id = `rtc_stream_view_${this.userId}_${this.streamType}_${Math.floor(Math.random() * 1e6)}`;
     view.style.position = "absolute";
     if (this.rect) {
       view.style.width = this.rect.width;

package/dist/states/LiveSeatState/usePlayStream/index.d.ts

@@ -1,6 +1,9 @@
+declare function startPlayStream({ view }: {
+    view: string;
+}): Promise<void>;
+declare function stopPlayStream(): Promise<void>;
 export declare function usePlayStream(): {
-    startPlayStream: ({ view }: {
-        view: string;
-    }) => Promise<void>;
-    stopPlayStream: () => Promise<void>;
+    startPlayStream: typeof startPlayStream;
+    stopPlayStream: typeof stopPlayStream;
 };
+export {};

package/dist/states/LiveSeatState/usePlayStream/index.js

@@ -1,118 +1,106 @@
 import { RTCStreamManager } from "./RTCStreamManager.js";
 import { MixStreamPlayer } from "./MixStreamPlayer.js";
-import { ref, computed, watch } from "vue";
+import { ref, watch } from "vue";
 import { useStreamPosition } from "./useStreamPostion.js";
-import { DeviceStatus } from "../../../types/device.js";
-import { TUIVideoStreamType } from "../../../types/types.js";
-import { LiveStatus } from "../../../types/live.js";
-import { useSeatStore } from "../store.js";
 import TUIRoomEngine, { TUIRoomEvents } from "@tencentcloud/tuiroom-engine-js";
 import { useRoomEngine } from "../../../hooks/useRoomEngine.js";
 import { useLiveState } from "../../LiveState/index.js";
+import { LiveStatus } from "../../../types/live.js";
+import { DeviceStatus } from "../../../types/device.js";
 const roomEngine = useRoomEngine();
 const { positionList, createResizeObserver, deleteResizeObserver } = useStreamPosition();
 const { localLiveStatus } = useLiveState();
-const { seatList } = useSeatStore();
 const isNeedPlayStream = ref(false);
 const containerId = ref(null);
 const mixStreamPlayer = new MixStreamPlayer();
 const rtcStreamManager = new RTCStreamManager();
 let playContainerId = "";
-function usePlayStream() {
-  const mixUserInfo = ref({
-    userId: "",
-    cameraStatus: DeviceStatus.Off
-  });
-  const rtcUserInfoList = computed(() => {
-    const cameraOnUserList = seatList.value.filter((item) => {
-      var _a;
-      return ((_a = item.userInfo) == null ? void 0 : _a.cameraStatus) === DeviceStatus.On;
-    });
-    return cameraOnUserList.map((item) => {
-      var _a, _b;
-      return {
-        userId: (_a = item.userInfo) == null ? void 0 : _a.userId,
-        cameraStatus: (_b = item.userInfo) == null ? void 0 : _b.cameraStatus,
-        rect: positionList.value.find((positionItem) => {
-          var _a2;
-          return positionItem.userId === ((_a2 = item.userInfo) == null ? void 0 : _a2.userId);
-        })
-      };
-    });
-  });
-  watch(
-    () => rtcUserInfoList.value,
-    (newUserList, oldUserList) => {
-      console.error("rtcUserInfoList.value: ", newUserList, playContainerId);
-      if (!isNeedPlayStream.value) {
-        return;
-      }
-      if (oldUserList.length === 0 && newUserList.length > 0) {
-        rtcStreamManager == null ? void 0 : rtcStreamManager.start({ view: playContainerId, userList: newUserList });
-      }
-      if (isNeedPlayStream.value && newUserList.length > 0) {
-        rtcStreamManager.update({ userList: newUserList });
-      }
-      if (oldUserList.length > 0 && newUserList.length === 0) {
-        rtcStreamManager == null ? void 0 : rtcStreamManager.stop();
-      }
+const mixUserInfo = ref(null);
+const rtcUserInfoList = ref([]);
+async function startPlayStream({ view }) {
+  var _a, _b;
+  playContainerId = view;
+  isNeedPlayStream.value = true;
+  createResizeObserver({ view });
+  if (((_a = mixUserInfo.value) == null ? void 0 : _a.userId) && ((_b = mixUserInfo.value) == null ? void 0 : _b.cameraStatus) === DeviceStatus.On) {
+    await (mixStreamPlayer == null ? void 0 : mixStreamPlayer.start({ view, userInfo: mixUserInfo.value }));
+  } else {
+    if (rtcUserInfoList.value.length > 0) {
+      await (rtcStreamManager == null ? void 0 : rtcStreamManager.start({ view, userList: rtcUserInfoList.value }));
+    }
+  }
+}
+watch(positionList, (newPositionList) => {
+  rtcUserInfoList.value.forEach((item) => {
+    if (newPositionList.find((positionItem) => positionItem.userId === item.userId)) {
+      item.rect = newPositionList.find((positionItem) => positionItem.userId === item.userId);
     }
-  );
-  async function startPlayStream({ view }) {
-    playContainerId = view;
-    isNeedPlayStream.value = true;
-    createResizeObserver({ view });
-    if (mixUserInfo.value.userId && mixUserInfo.value.cameraStatus === DeviceStatus.On) {
-      await (mixStreamPlayer == null ? void 0 : mixStreamPlayer.start({ view, userInfo: mixUserInfo.value }));
+  });
+  if (isNeedPlayStream.value && rtcUserInfoList.value.length > 0) {
+    rtcStreamManager.update({ userList: rtcUserInfoList.value });
+  }
+});
+async function stopPlayStream() {
+  mixStreamPlayer == null ? void 0 : mixStreamPlayer.stop();
+  rtcStreamManager == null ? void 0 : rtcStreamManager.stop();
+  containerId.value = null;
+  isNeedPlayStream.value = false;
+  playContainerId = "";
+  deleteResizeObserver();
+}
+function handleUserVideoStateChanged(event) {
+  const { userId, hasVideo } = event;
+  if (userId.indexOf("livekit_") === 0) {
+    mixUserInfo.value = hasVideo ? {
+      userId,
+      cameraStatus: DeviceStatus.On
+    } : null;
+  } else {
+    if (hasVideo) {
+      rtcUserInfoList.value.push({ userId, cameraStatus: DeviceStatus.On, rect: positionList.value.find((item) => item.userId === userId) });
     } else {
-      if (rtcUserInfoList.value.length > 0) {
-        await (rtcStreamManager == null ? void 0 : rtcStreamManager.start({ view, userList: rtcUserInfoList.value }));
-      }
+      rtcUserInfoList.value = rtcUserInfoList.value.filter((item) => item.userId !== userId);
     }
   }
-  async function stopPlayStream() {
-    mixStreamPlayer == null ? void 0 : mixStreamPlayer.stop();
-    rtcStreamManager == null ? void 0 : rtcStreamManager.stop();
-    containerId.value = null;
-    isNeedPlayStream.value = false;
-    playContainerId = "";
-    deleteResizeObserver();
+}
+watch(() => mixUserInfo.value, (newUserInfo) => {
+  if (!isNeedPlayStream.value) {
+    return;
+  }
+  if (newUserInfo) {
+    mixStreamPlayer.start({ view: playContainerId, userInfo: mixUserInfo.value });
+  } else {
+    mixStreamPlayer.stop();
   }
-  function handleUserVideoStateChanged(event) {
-    const { userId, streamType, hasVideo } = event;
-    const isMixUserId = userId.indexOf("livekit_") === 0;
-    if (isMixUserId && streamType === TUIVideoStreamType.kCameraStream) {
-      if (hasVideo) {
-        mixUserInfo.value.userId = userId;
-        mixUserInfo.value.cameraStatus = DeviceStatus.On;
-        if (isNeedPlayStream.value) {
-          mixStreamPlayer.start({ view: playContainerId, userInfo: mixUserInfo.value });
-          rtcStreamManager.stop();
-        }
-      } else {
-        mixUserInfo.value.userId = "";
-        mixUserInfo.value.cameraStatus = DeviceStatus.Off;
-        if (isNeedPlayStream.value) {
-          if (rtcUserInfoList.value.length > 0) {
-            rtcStreamManager.start({ view: playContainerId, userList: rtcUserInfoList.value });
-          }
-          mixStreamPlayer.stop();
-        }
-      }
+});
+watch(
+  () => rtcUserInfoList.value.length,
+  (newUserListLength, oldUserListLength) => {
+    if (!isNeedPlayStream.value) {
+      return;
+    }
+    if (oldUserListLength === 0 && newUserListLength > 0) {
+      rtcStreamManager == null ? void 0 : rtcStreamManager.start({ view: playContainerId, userList: rtcUserInfoList.value });
+    }
+    if (oldUserListLength > 0 && newUserListLength === 0) {
+      rtcStreamManager == null ? void 0 : rtcStreamManager.stop();
     }
   }
-  watch(
-    () => localLiveStatus.value,
-    (newLiveStatus) => {
-      if (newLiveStatus === LiveStatus.IDLE && isNeedPlayStream.value) {
-        stopPlayStream();
-      }
+);
+watch(
+  () => localLiveStatus.value,
+  (newLiveStatus) => {
+    if (newLiveStatus === LiveStatus.IDLE && isNeedPlayStream.value) {
+      mixUserInfo.value = null;
+      rtcUserInfoList.value = [];
     }
-  );
-  TUIRoomEngine.once("ready", () => {
-    var _a;
-    (_a = roomEngine.instance) == null ? void 0 : _a.on(TUIRoomEvents.onUserVideoStateChanged, handleUserVideoStateChanged);
-  });
+  }
+);
+TUIRoomEngine.once("ready", () => {
+  var _a;
+  (_a = roomEngine.instance) == null ? void 0 : _a.on(TUIRoomEvents.onUserVideoStateChanged, handleUserVideoStateChanged);
+});
+function usePlayStream() {
   return {
     startPlayStream,
     stopPlayStream

package/dist/states/LiveState/index.d.ts

@@ -1,5 +1,4 @@
 import { LiveStatus, LiveType, TUISeatMode, LiveInfo, CreateLiveParams, JoinLiveParams, UpdateLiveInfoParams } from '../../types';
-import { TUISeatLayoutTemplate } from '@tencentcloud/tuiroom-engine-js';
 
 /**
  * 直播间状态管理 Hook
@@ -31,7 +30,7 @@ export declare function useLiveState(): {
         isSeatEnabled: boolean;
         seatMode: TUISeatMode;
         maxSeatCount: number;
-        layoutTemplate: TUISeatLayoutTemplate;
+        layoutTemplate: number;
         customInfo: Record<string, any>;
     }[], LiveInfo[] | {
         liveId: string;
@@ -56,13 +55,10 @@ export declare function useLiveState(): {
         isSeatEnabled: boolean;
         seatMode: TUISeatMode;
         maxSeatCount: number;
-        layoutTemplate: TUISeatLayoutTemplate;
+        layoutTemplate: number;
         customInfo: Record<string, any>;
     }[]>;
-    hasMoreLive: import('vue').Ref<boolean, boolean>;
     currentCursor: import('vue').Ref<string, string>;
-    isLoadingLiveList: import('vue').Ref<boolean, boolean>;
-    isLoadingMore: import('vue').Ref<boolean, boolean>;
     currentLive: import('vue').Ref<{
         liveId: string;
         liveName: string;
@@ -86,7 +82,7 @@ export declare function useLiveState(): {
         isSeatEnabled: boolean;
         seatMode: TUISeatMode;
         maxSeatCount: number;
-        layoutTemplate: TUISeatLayoutTemplate;
+        layoutTemplate: number;
         customInfo: Record<string, any>;
     } | null, LiveInfo | {
         liveId: string;
@@ -111,21 +107,19 @@ export declare function useLiveState(): {
         isSeatEnabled: boolean;
         seatMode: TUISeatMode;
         maxSeatCount: number;
-        layoutTemplate: TUISeatLayoutTemplate;
+        layoutTemplate: number;
         customInfo: Record<string, any>;
     } | null>;
     localLiveStatus: import('vue').Ref<LiveStatus, LiveStatus>;
-    fetchLiveList: ({ category, cursor, count, append, }: {
+    fetchLiveList: ({ category, cursor, count, }: {
         category?: string;
         cursor?: string;
         count?: number;
-        append?: boolean;
     }) => Promise<void>;
     createLive: (params: CreateLiveParams) => Promise<void>;
     joinLive: ({ liveId }: JoinLiveParams) => Promise<void>;
     leaveLive: () => Promise<void>;
     endLive: () => Promise<void>;
     updateLiveInfo: (params: UpdateLiveInfoParams) => Promise<void>;
-    setLayoutTemplate: (templateId: TUISeatLayoutTemplate) => Promise<void>;
 };
 export default useLiveState;

package/dist/states/LiveState/index.js

@@ -1,18 +1,15 @@
 import { ref, watch, nextTick } from "vue";
-import TUIRoomEngine, { TUIRoomEvents, TUILiveListManagerEvents, TUILiveLayoutManagerEvents, TUILiveModifyFlag, TUIRoomType } from "@tencentcloud/tuiroom-engine-js";
+import TUIRoomEngine, { TUIRoomEvents, TUILiveLayoutManagerEvents, TUILiveListManagerEvents, TUILiveModifyFlag, TUIRoomType } from "@tencentcloud/tuiroom-engine-js";
 import { useRoomEngine } from "../../hooks/useRoomEngine.js";
-import { TUISeatMode } from "../../types/types.js";
+import RTCLoginServer from "../../rtc/server.js";
 import { LiveType, LiveStatus } from "../../types/live.js";
+import { TUISeatMode } from "../../types/types.js";
 import { useConversationListState } from "../ConversationListState/ConversationListState.js";
-import { useLoginState } from "../LoginState.js";
-const { switchConversation } = useConversationListState();
+const LoginServer = RTCLoginServer.getInstance();
+const { setActiveConversation } = useConversationListState();
 const roomEngine = useRoomEngine();
-const { loginUserInfo } = useLoginState();
 const liveList = ref([]);
-const hasMoreLive = ref(true);
-const isLoadingLiveList = ref(false);
 const currentCursor = ref("");
-const isLoadingMore = ref(false);
 const defaultLiveInfo = {
   liveId: "",
   liveName: "",
@@ -75,9 +72,8 @@ const updateCurrentLive = (liveInfo) => {
 };
 const createLive = async (params) => {
   var _a, _b;
-  if (!loginUserInfo.value) {
-    console.error("[liveState createLive] login user info not found");
-    throw new Error("[liveState createLive] login user info not found");
+  if (!LoginServer.isLogin.value) {
+    await LoginServer.login();
   }
   try {
     console.log("[liveState createLive] create live", params);
@@ -112,6 +108,9 @@ const createLive = async (params) => {
 };
 const joinLive = async ({ liveId }) => {
   var _a;
+  if (!LoginServer.isLogin.value) {
+    await LoginServer.login();
+  }
   console.log("[liveState joinLive] enter room", liveId);
   const liveListManager = (_a = roomEngine.instance) == null ? void 0 : _a.getLiveListManager();
   try {
@@ -121,7 +120,7 @@ const joinLive = async ({ liveId }) => {
     }
     updateCurrentLive(liveInfo);
     localLiveStatus.value = LiveStatus.Live;
-    switchConversation(`GROUP${liveId}`);
+    await setActiveConversation(`GROUP${liveId}`);
   } catch (error) {
     console.error("[liveState joinLive] error", error);
     throw error;
@@ -153,18 +152,28 @@ const endLive = async () => {
 };
 const updateLiveInfo = async (params) => {
   var _a;
+  if (!currentLive.value) {
+    currentLive.value = { ...defaultLiveInfo, ...params };
+    return;
+  }
+  if (!currentLive.value.liveId) {
+    Object.assign(currentLive.value, { ...params });
+    return;
+  }
   try {
     console.log("[liveState updateLiveInfo]", JSON.stringify(params));
     const liveListManager = (_a = roomEngine.instance) == null ? void 0 : _a.getLiveListManager();
-    await (liveListManager == null ? void 0 : liveListManager.setLiveInfo({
-      roomId: params.liveId,
-      activityStatus: params.activityStatus,
-      categoryList: params.categoryList,
-      coverUrl: params.coverUrl,
-      backgroundUrl: params.backgroundUrl,
-      isPublicVisible: params.isPublicVisible
-    }));
-    const liveInfo = await (liveListManager == null ? void 0 : liveListManager.getLiveInfo({ roomId: params.liveId }));
+    const updateLiveInfoParams = {
+      roomId: params.liveId || currentLive.value.liveId
+    };
+    params.activityStatus && (updateLiveInfoParams.activityStatus = params.activityStatus);
+    params.categoryList && (updateLiveInfoParams.categoryList = params.categoryList);
+    params.coverUrl && (updateLiveInfoParams.coverUrl = params.coverUrl);
+    params.backgroundUrl && (updateLiveInfoParams.backgroundUrl = params.backgroundUrl);
+    params.isPublicVisible && (updateLiveInfoParams.isPublicVisible = params.isPublicVisible);
+    params.layoutTemplate && (updateLiveInfoParams.seatLayoutTemplateId = params.layoutTemplate);
+    await (liveListManager == null ? void 0 : liveListManager.setLiveInfo(updateLiveInfoParams));
+    const liveInfo = await (liveListManager == null ? void 0 : liveListManager.getLiveInfo({ roomId: updateLiveInfoParams.roomId }));
     if (!liveInfo) {
       throw new Error("[liveState updateLiveInfo] update live info failed");
     }
@@ -177,18 +186,12 @@ const updateLiveInfo = async (params) => {
 const fetchLiveList = async ({
   category,
   cursor = "",
-  count = 20,
-  append = false
+  count = 20
 }) => {
   if (!roomEngine.instance) {
     console.error("[liveState fetchLiveList] RoomEngine instance is not ready");
     return;
   }
-  if (append) {
-    isLoadingMore.value = true;
-  } else {
-    isLoadingLiveList.value = true;
-  }
   try {
     const liveListManager = roomEngine.instance.getLiveListManager();
     if (!liveListManager) {
@@ -196,35 +199,19 @@ const fetchLiveList = async ({
       throw new Error("[liveState fetchLiveList] get live list manager failed");
     }
     const result = await liveListManager.fetchLiveList({
-      cursor: append ? currentCursor.value : cursor,
+      cursor,
       count
     });
     const convertedList = result.liveInfoList.map((tuiLiveInfo) => getLiveInfo(tuiLiveInfo));
-    if (append) {
-      liveList.value = [...liveList.value, ...convertedList];
-    } else {
-      liveList.value = convertedList;
-    }
+    const existingLiveIds = new Set(liveList.value.map((item) => item.liveId));
+    const newItems = convertedList.filter((item) => !existingLiveIds.has(item.liveId));
+    liveList.value = [...liveList.value, ...newItems];
     currentCursor.value = result.cursor;
-    hasMoreLive.value = result.cursor !== "";
   } catch (error) {
     console.error("[liveState fetchLiveList] error", error);
     throw error;
-  } finally {
-    isLoadingLiveList.value = false;
-    isLoadingMore.value = false;
   }
 };
-watch(
-  () => roomEngine.instance,
-  (newVal) => {
-    if (newVal) {
-      console.log("[liveState] RoomEngine instance is ready, auto fetch first page live list");
-      fetchLiveList({});
-    }
-  },
-  { immediate: true }
-);
 const onRoomDismissed = async (roomId) => {
   console.log("[liveState onRoomDismissed]", roomId);
   localLiveStatus.value = LiveStatus.Ended;
@@ -322,16 +309,11 @@ const bindEvent = () => {
     });
   }
 };
-const setLayoutTemplate = async (templateId) => {
-  var _a, _b;
-  if (!((_a = currentLive.value) == null ? void 0 : _a.liveId)) {
-    currentLive.value.layoutTemplate = templateId;
-    return;
+watch(localLiveStatus, (newStatus) => {
+  if (newStatus === LiveStatus.IDLE) {
+    setActiveConversation("");
   }
-  const liveListManager = (_b = roomEngine.instance) == null ? void 0 : _b.getLiveListManager();
-  await (liveListManager == null ? void 0 : liveListManager.setLiveInfo({ roomId: currentLive.value.liveId, seatLayoutTemplateId: templateId }));
-  currentLive.value.layoutTemplate = templateId;
-};
+});
 TUIRoomEngine.once("ready", () => {
   bindEvent();
 });
@@ -339,10 +321,7 @@ function useLiveState() {
   return {
     // 响应式数据
     liveList,
-    hasMoreLive,
     currentCursor,
-    isLoadingLiveList,
-    isLoadingMore,
     currentLive,
     localLiveStatus,
     // 操作接口
@@ -351,8 +330,7 @@ function useLiveState() {
     joinLive,
     leaveLive,
     endLive,
-    updateLiveInfo,
-    setLayoutTemplate
+    updateLiveInfo
   };
 }
 export {

package/dist/states/LoginState.d.ts

@@ -1,28 +1,19 @@
-import { TUILoginUserInfo } from '@tencentcloud/tuiroom-engine-js';
+import { LoginParams, LoginUserInfo, SetSelfInfoParams } from '../types/login';
 
-declare function login(options: {
-    userId: string;
-    userSig: string;
-    sdkAppId: number;
-    testEnv?: boolean;
-}): Promise<void>;
-declare function setSelfInfo(options: {
-    userName?: string;
-    avatarUrl?: string;
-    customInfo?: Record<string, any>;
-}): Promise<void>;
+declare function login(options: LoginParams): Promise<void>;
+declare function setSelfInfo(options: SetSelfInfoParams): Promise<void>;
 declare function logout(): Promise<void>;
 export declare function useLoginState(): {
     loginUserInfo: import('vue').Ref<{
         userId: string;
         userName: string;
         avatarUrl: string;
-        customInfo: Record<string, any>;
-    } | null, TUILoginUserInfo | {
+        customInfo?: Record<string, any> | undefined;
+    } | null, LoginUserInfo | {
         userId: string;
         userName: string;
         avatarUrl: string;
-        customInfo: Record<string, any>;
+        customInfo?: Record<string, any> | undefined;
     } | null>;
     login: typeof login;
     logout: typeof logout;