tuikit-atomicx-vue3 0.1.0

package/dist/states/UserState/userManager.js

@@ -0,0 +1,300 @@
+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 TUIRoomEngine, { TUIRole, TUIMediaDevice, TUIRequestAction, TUIRoomEvents } from "@tencentcloud/tuiroom-engine-js";
+import { DeviceType, DeviceStatus } from "../../types/device.js";
+import { SeatStatus, RequestType } from "../../types/user.js";
+import { useRoomEngine } from "../../hooks/useRoomEngine.js";
+import { innerUserStore } from "./store.js";
+import UserEventManager from "./userEventManager.js";
+import { useRoomState } from "../RoomState.js";
+const { currentRoom } = useRoomState();
+const roomEngine = useRoomEngine();
+const sentRequestMap = /* @__PURE__ */ new Map();
+const receivedRequestMap = /* @__PURE__ */ new Map();
+const _UserManager = class _UserManager {
+  constructor() {
+    __publicField(this, "userListCompareFunction");
+    if (!_UserManager.instance) {
+      _UserManager.instance = this;
+    }
+    new UserEventManager();
+    this.userListCompareFunction = null;
+    this.onRequestReceived = this.onRequestReceived.bind(this);
+    this.onRequestCancelled = this.onRequestCancelled.bind(this);
+    this.onRequestProcessed = this.onRequestProcessed.bind(this);
+    this.bindRoomEngineEvents();
+    return _UserManager.instance;
+  }
+  async initUserList() {
+    var _a, _b, _c, _d, _e;
+    if (!roomEngine.instance) {
+      return;
+    }
+    const { nextSequence, userInfoList } = await ((_a = roomEngine.instance) == null ? void 0 : _a.getUserList());
+    innerUserStore.setUserListCursor(nextSequence || 0);
+    userInfoList == null ? void 0 : userInfoList.forEach((user) => {
+      innerUserStore.addUserInfo(user);
+    });
+    if (!((_b = currentRoom.value) == null ? void 0 : _b.isSeatEnabled)) {
+      return;
+    }
+    const seatList = await ((_c = roomEngine.instance) == null ? void 0 : _c.getSeatList());
+    seatList == null ? void 0 : seatList.forEach(async (seat) => {
+      var _a2;
+      if (seat.userId && seat.userId.indexOf("livekit_") !== 0) {
+        const userInfo = await ((_a2 = roomEngine.instance) == null ? void 0 : _a2.getUserInfo({ userId: seat.userId }));
+        innerUserStore.addUserInfo(userInfo);
+        innerUserStore.updateUserInfo({ userId: seat.userId, seatStatus: SeatStatus.On, onSeatTimestamp: Date.now() });
+      }
+    });
+    if (((_d = innerUserStore.localUser) == null ? void 0 : _d.userRole) !== TUIRole.kGeneralUser) {
+      const seatApplicationList = await ((_e = roomEngine.instance) == null ? void 0 : _e.getSeatApplicationList());
+      seatApplicationList == null ? void 0 : seatApplicationList.forEach(async (application) => {
+        var _a2;
+        if (!innerUserStore.getUserInfo({ userId: application.userId })) {
+          const userInfo = await ((_a2 = roomEngine.instance) == null ? void 0 : _a2.getUserInfo({ userId: application.userId }));
+          innerUserStore.addUserInfo(userInfo);
+        }
+        receivedRequestMap.set(`${RequestType.Seat}_${application.userId}`, application.requestId);
+        innerUserStore.updateUserInfo({ userId: application.userId, seatStatus: SeatStatus.OffApplicationPending });
+      });
+    }
+    console.error("userStore.userList", innerUserStore.userList);
+  }
+  async setCustomInfoForUser(options) {
+    var _a;
+    return (_a = roomEngine.instance) == null ? void 0 : _a.setCustomInfoForUser(options);
+  }
+  async changeUserRole(options) {
+    var _a;
+    await ((_a = roomEngine.instance) == null ? void 0 : _a.changeUserRole(options));
+    innerUserStore.updateUserInfo(options);
+  }
+  async loadMoreUserInfo(options) {
+    var _a;
+    if (!roomEngine.instance) {
+      return;
+    }
+    const { nextSequence, userInfoList } = await ((_a = roomEngine.instance) == null ? void 0 : _a.getUserList({ nextSequence: options.cursor }));
+    innerUserStore.setUserListCursor(nextSequence);
+    userInfoList == null ? void 0 : userInfoList.forEach((user) => {
+      innerUserStore.addUserInfo(user);
+    });
+  }
+  // todo: 设置用户排序函数
+  setUserListSortFn(sortFn) {
+  }
+  async fetchUserList({ cursor, count }) {
+    var _a;
+    if (!roomEngine.instance) {
+      return;
+    }
+    const { nextSequence, userInfoList } = await ((_a = roomEngine.instance) == null ? void 0 : _a.getUserList({ nextSequence: cursor }));
+    innerUserStore.setUserListCursor(nextSequence || 0);
+    userInfoList == null ? void 0 : userInfoList.forEach((user) => {
+      innerUserStore.addUserInfo(user);
+    });
+  }
+  async transferRoomOwner(options) {
+    var _a;
+    await ((_a = roomEngine.instance) == null ? void 0 : _a.changeUserRole({
+      userId: options.userId,
+      userRole: TUIRole.kRoomOwner
+    }));
+  }
+  async setAdministrator(options) {
+    var _a;
+    await ((_a = roomEngine.instance) == null ? void 0 : _a.changeUserRole({ userId: options.userId, userRole: TUIRole.kAdministrator }));
+  }
+  async revokeAdministrator(options) {
+    var _a;
+    await ((_a = roomEngine.instance) == null ? void 0 : _a.changeUserRole({ userId: options.userId, userRole: TUIRole.kGeneralUser }));
+  }
+  async kickUserOutOfRoom(options) {
+    var _a;
+    await ((_a = roomEngine.instance) == null ? void 0 : _a.kickRemoteUserOutOfRoom({
+      userId: options.userId
+    }));
+  }
+  async disableSendMessage(options) {
+    var _a;
+    await ((_a = roomEngine.instance) == null ? void 0 : _a.disableSendingMessageByAdmin({ userId: options.userId, isDisable: options.isDisable }));
+  }
+  async changeUserNameCard(options) {
+    var _a;
+    await ((_a = roomEngine.instance) == null ? void 0 : _a.changeUserNameCard({
+      userId: options.userId,
+      nameCard: options.nameCard
+    }));
+  }
+  transformDeviceTypeToTUIMediaDevice(type) {
+    const DeviceTypeToTUIMediaDevice = {
+      [DeviceType.Camera]: TUIMediaDevice.kCamera,
+      [DeviceType.Microphone]: TUIMediaDevice.kMicrophone,
+      [DeviceType.ScreenShare]: TUIMediaDevice.kScreen
+    };
+    return DeviceTypeToTUIMediaDevice[type];
+  }
+  async sendOpenDeviceRequest(options) {
+    var _a, _b;
+    const callback = options.requestCallback ? (
+      // @ts-ignore 类型不匹配但实际运行时正常
+      (callbackInfo) => {
+        if (options.requestCallback) {
+          options.requestCallback(callbackInfo);
+        }
+      }
+    ) : void 0;
+    let request = void 0;
+    if (innerUserStore.localUser.userRole !== TUIRole.kGeneralUser && options.userId) {
+      const newUserInfoObj = {
+        [DeviceType.Camera]: { cameraStatus: DeviceStatus.OffInvitationPending },
+        [DeviceType.Microphone]: { microphoneStatus: DeviceStatus.OffInvitationPending },
+        [DeviceType.ScreenShare]: { screenStatus: DeviceStatus.OffInvitationPending }
+      };
+      const newUserInfo = newUserInfoObj[options.type];
+      innerUserStore.updateUserInfo({ userId: options.userId, ...newUserInfo });
+      request = await ((_a = roomEngine.instance) == null ? void 0 : _a.openRemoteDeviceByAdmin({
+        userId: options.userId,
+        device: this.transformDeviceTypeToTUIMediaDevice(options.type),
+        timeout: options.timeout,
+        requestCallback: callback
+      }));
+    } else {
+      const newUserInfoObj = {
+        [DeviceType.Camera]: { cameraStatus: DeviceStatus.OffApplicationPending },
+        [DeviceType.Microphone]: { microphoneStatus: DeviceStatus.OffApplicationPending },
+        [DeviceType.ScreenShare]: { screenStatus: DeviceStatus.OffApplicationPending }
+      };
+      const newUserInfo = newUserInfoObj[options.type];
+      innerUserStore.updateUserInfo({ userId: innerUserStore.localUser.userId, ...newUserInfo });
+      request = await ((_b = roomEngine.instance) == null ? void 0 : _b.applyToAdminToOpenLocalDevice({
+        device: this.transformDeviceTypeToTUIMediaDevice(options.type),
+        timeout: options.timeout,
+        requestCallback: callback
+      }));
+    }
+    if (request) {
+      sentRequestMap.set(`${options.type}_${options.userId || "admin"}`, request.requestId);
+    }
+  }
+  async cancelOpenDeviceRequest(options) {
+    var _a;
+    const requestMapKey = `${options.type}_${options.userId || "admin"}`;
+    if (sentRequestMap.has(requestMapKey)) {
+      await ((_a = roomEngine.instance) == null ? void 0 : _a.cancelRequest({
+        requestId: sentRequestMap.get(requestMapKey)
+      }));
+      const newUserInfoObj = {
+        [DeviceType.Camera]: { cameraStatus: DeviceStatus.Off },
+        [DeviceType.Microphone]: { microphoneStatus: DeviceStatus.Off },
+        [DeviceType.ScreenShare]: { screenStatus: DeviceStatus.Off }
+      };
+      const newUserInfo = newUserInfoObj[options.type];
+      innerUserStore.updateUserInfo({ userId: innerUserStore.localUser.userId, ...newUserInfo });
+      sentRequestMap.delete(requestMapKey);
+    }
+  }
+  async acceptOpenDeviceRequest(options) {
+    var _a;
+    const requestMapKey = `${options.type}_${options.userId || "admin"}`;
+    if (receivedRequestMap.has(requestMapKey)) {
+      await ((_a = roomEngine.instance) == null ? void 0 : _a.responseRemoteRequest({
+        requestId: receivedRequestMap.get(requestMapKey),
+        agree: true
+      }));
+      const newUserInfoObj = {
+        [DeviceType.Camera]: { cameraStatus: DeviceStatus.On },
+        [DeviceType.Microphone]: { microphoneStatus: DeviceStatus.On },
+        [DeviceType.ScreenShare]: { screenStatus: DeviceStatus.On }
+      };
+      const newUserInfo = newUserInfoObj[options.type];
+      innerUserStore.updateUserInfo({ userId: innerUserStore.localUser.userId, ...newUserInfo });
+      receivedRequestMap.delete(requestMapKey);
+    }
+  }
+  async rejectOpenDeviceRequest(options) {
+    var _a;
+    const requestMapKey = `${options.type}_${options.userId || "admin"}`;
+    if (receivedRequestMap.has(requestMapKey)) {
+      await ((_a = roomEngine.instance) == null ? void 0 : _a.responseRemoteRequest({
+        requestId: receivedRequestMap.get(requestMapKey),
+        agree: false
+      }));
+      const newUserInfoObj = {
+        [DeviceType.Camera]: { cameraStatus: DeviceStatus.Off },
+        [DeviceType.Microphone]: { microphoneStatus: DeviceStatus.Off },
+        [DeviceType.ScreenShare]: { screenStatus: DeviceStatus.Off }
+      };
+      const newUserInfo = newUserInfoObj[options.type];
+      innerUserStore.updateUserInfo({ userId: innerUserStore.localUser.userId, ...newUserInfo });
+      receivedRequestMap.delete(requestMapKey);
+    }
+  }
+  onRequestReceived(eventInfo) {
+    const { userId, requestAction, requestId } = eventInfo.request;
+    if (!innerUserStore.getUserInfo({ userId })) {
+      return;
+    }
+    switch (requestAction) {
+      case TUIRequestAction.kRequestToTakeSeat:
+        receivedRequestMap.set(`${RequestType.Seat}_${userId}`, requestId);
+        innerUserStore.updateUserInfo({ userId, seatStatus: SeatStatus.OffApplicationPending });
+        break;
+      case TUIRequestAction.kRequestRemoteUserOnSeat:
+        receivedRequestMap.set(`${RequestType.Seat}`, requestId);
+        innerUserStore.updateUserInfo({ userId: innerUserStore.localUser.userId, seatStatus: SeatStatus.OffInvitationPending });
+        break;
+    }
+  }
+  // The remote user cancels the application to connect to the stage
+  onRequestCancelled(eventInfo) {
+    const { requestAction, userId } = eventInfo.request;
+    switch (requestAction) {
+      case TUIRequestAction.kRequestToTakeSeat:
+        receivedRequestMap.delete(`${RequestType.Seat}_${userId}`);
+        innerUserStore.updateUserInfo({ userId, seatStatus: SeatStatus.Off });
+        break;
+      case TUIRequestAction.kRequestRemoteUserOnSeat:
+        receivedRequestMap.delete(`${RequestType.Seat}`);
+        innerUserStore.updateUserInfo({ userId: innerUserStore.localUser.userId, seatStatus: SeatStatus.Off });
+        break;
+    }
+  }
+  // todo: 测试请求被其他人处理的情况
+  // The remote user's request is handled by other administrators/hosts.
+  onRequestProcessed(eventInfo) {
+    const { requestAction, userId } = eventInfo.request;
+    switch (requestAction) {
+      case TUIRequestAction.kRequestToTakeSeat:
+        receivedRequestMap.delete(`${RequestType.Seat}_${userId}`);
+        break;
+      case TUIRequestAction.kRequestRemoteUserOnSeat:
+        receivedRequestMap.delete(`${RequestType.Seat}`);
+        break;
+    }
+  }
+  bindRoomEngineEvents() {
+    TUIRoomEngine.once("ready", () => {
+      var _a, _b, _c;
+      (_a = roomEngine.instance) == null ? void 0 : _a.on(
+        TUIRoomEvents.onRequestReceived,
+        this.onRequestReceived
+      );
+      (_b = roomEngine.instance) == null ? void 0 : _b.on(
+        TUIRoomEvents.onRequestCancelled,
+        this.onRequestCancelled
+      );
+      (_c = roomEngine.instance) == null ? void 0 : _c.on(
+        TUIRoomEvents.onRequestProcessed,
+        this.onRequestProcessed
+      );
+    });
+  }
+};
+__publicField(_UserManager, "instance");
+let UserManager = _UserManager;
+export {
+  UserManager as default
+};

package/dist/states/VideoMixerState.d.ts

@@ -0,0 +1,19 @@
+import { TUIVideoQuality, MediaSource } from '../types';
+
+declare function addMediaSource(source: MediaSource): Promise<void>;
+declare function updateMediaSource(source: MediaSource, config: Partial<MediaSource>): Promise<void>;
+declare function removeMediaSource(source: MediaSource): Promise<void>;
+declare function enableLocalVideoMixer(): void;
+declare function clearMediaSource(): void;
+declare function useVideoMixerState(): {
+    isVideoMixerEnabled: import('vue').Ref<boolean, boolean>;
+    publishVideoQuality: import('vue').Ref<TUIVideoQuality, TUIVideoQuality>;
+    mediaSourceList: import('vue').Ref<any, any>;
+    activeMediaSource: import('vue').ComputedRef<any>;
+    enableLocalVideoMixer: typeof enableLocalVideoMixer;
+    addMediaSource: typeof addMediaSource;
+    updateMediaSource: typeof updateMediaSource;
+    removeMediaSource: typeof removeMediaSource;
+    clearMediaSource: typeof clearMediaSource;
+};
+export { useVideoMixerState };

package/dist/states/VideoMixerState.js

@@ -0,0 +1,297 @@
+import { computed, ref, watch } from "vue";
+import TUIRoomEngine, { TRTCVideoResolutionMode, TRTCVideoResolution, TUIRoomDeviceMangerEvents, TRTCMediaMixingEvent, TUIMediaDeviceType, TUIMediaDeviceState, TRTCMediaSourceType, TRTCVideoFillMode, TRTCVideoRotation, TRTCVideoMirrorType } from "@tencentcloud/tuiroom-engine-js";
+import { useRoomEngine } from "../hooks/useRoomEngine.js";
+import { TUIVideoQuality } from "../types/types.js";
+import { LiveOrientation } from "../types/live.js";
+import { useLiveState } from "./LiveState/index.js";
+import { objectMerge } from "../utils/utils.js";
+const roomEngine = useRoomEngine();
+const { currentLive } = useLiveState();
+const currentLiveOrientation = computed(() => {
+  var _a, _b;
+  if (currentLive.value && ((_a = currentLive.value) == null ? void 0 : _a.layoutTemplate) >= 200 && ((_b = currentLive.value) == null ? void 0 : _b.layoutTemplate) <= 599) {
+    return LiveOrientation.Landscape;
+  }
+  return LiveOrientation.Portrait;
+});
+function getVideoDataByQuality(quality) {
+  const videoDataMap = {
+    [TUIVideoQuality.kVideoQuality_1080p]: {
+      fps: 20,
+      bitrate: 3e3
+    },
+    [TUIVideoQuality.kVideoQuality_720p]: {
+      fps: 15,
+      bitrate: 1800
+    },
+    [TUIVideoQuality.kVideoQuality_540p]: {
+      fps: 15,
+      bitrate: 1200
+    },
+    [TUIVideoQuality.kVideoQuality_360p]: {
+      fps: 15,
+      bitrate: 800
+    }
+  };
+  return videoDataMap[quality];
+}
+function getSizeByQuality(quality) {
+  const sizeMap = {
+    [TUIVideoQuality.kVideoQuality_1080p]: {
+      width: 1920,
+      height: 1080
+    },
+    [TUIVideoQuality.kVideoQuality_720p]: {
+      width: 1280,
+      height: 720
+    },
+    [TUIVideoQuality.kVideoQuality_540p]: {
+      width: 960,
+      height: 540
+    },
+    [TUIVideoQuality.kVideoQuality_360p]: {
+      width: 640,
+      height: 360
+    }
+  };
+  return sizeMap[quality];
+}
+function getSizeByResolution(resolution) {
+  const videoProfileObj = {
+    [TRTCVideoResolution.TRTCVideoResolution_480_270]: { width: 480, height: 270 },
+    [TRTCVideoResolution.TRTCVideoResolution_640_360]: { width: 640, height: 360 },
+    [TRTCVideoResolution.TRTCVideoResolution_960_540]: { width: 960, height: 540 },
+    [TRTCVideoResolution.TRTCVideoResolution_1280_720]: { width: 1280, height: 720 },
+    [TRTCVideoResolution.TRTCVideoResolution_1920_1080]: { width: 1920, height: 1080 }
+  };
+  return videoProfileObj[resolution] || { width: 1280, height: 720 };
+}
+const publishVideoQuality = ref(TUIVideoQuality.kVideoQuality_720p);
+const publishVideoWidth = computed(() => {
+  const { width: publishWidth, height: publishHeight } = getSizeByQuality(publishVideoQuality.value);
+  return currentLiveOrientation.value === LiveOrientation.Portrait ? publishHeight : publishWidth;
+});
+const publishVideoHeight = computed(() => {
+  const { width: publishWidth, height: publishHeight } = getSizeByQuality(publishVideoQuality.value);
+  return currentLiveOrientation.value === LiveOrientation.Portrait ? publishWidth : publishHeight;
+});
+function transformTUIVideoQualityToTRTCVideoResolution(quality) {
+  const sizeMap = {
+    [TUIVideoQuality.kVideoQuality_1080p]: TRTCVideoResolution.TRTCVideoResolution_1920_1080,
+    [TUIVideoQuality.kVideoQuality_720p]: TRTCVideoResolution.TRTCVideoResolution_1280_720,
+    [TUIVideoQuality.kVideoQuality_540p]: TRTCVideoResolution.TRTCVideoResolution_960_540,
+    [TUIVideoQuality.kVideoQuality_360p]: TRTCVideoResolution.TRTCVideoResolution_640_360
+  };
+  return sizeMap[quality];
+}
+const publishParams = computed(() => {
+  const { fps, bitrate } = getVideoDataByQuality(publishVideoQuality.value);
+  return {
+    videoEncoderParams: {
+      videoResolution: transformTUIVideoQualityToTRTCVideoResolution(publishVideoQuality.value),
+      resMode: currentLiveOrientation.value === LiveOrientation.Portrait ? TRTCVideoResolutionMode.TRTCVideoResolutionModePortrait : TRTCVideoResolutionMode.TRTCVideoResolutionModeLandscape,
+      videoFps: fps,
+      videoBitrate: bitrate
+    }
+  };
+});
+const isVideoMixerEnabled = ref(false);
+const mediaSourceList = ref([]);
+const activeMediaSource = computed(() => {
+  return mediaSourceList.value.find((item) => item.isSelected) || null;
+});
+let mediaSourceManager;
+function changeActiveMediaSource(source) {
+  if (activeMediaSource.value) {
+    const mediaSource = mediaSourceList.value.find((item) => item.id === activeMediaSource.value.id) || null;
+    if (mediaSource) {
+      mediaSource.isSelected = false;
+    }
+  }
+  if (source) {
+    const mediaSource = mediaSourceList.value.find((item) => item.id === source.id) || null;
+    mediaSource && (mediaSource.isSelected = true);
+  }
+}
+watch(
+  () => publishParams.value,
+  () => {
+    mediaSourceManager && mediaSourceManager.updatePublishParams(publishParams.value);
+  },
+  { immediate: true }
+);
+let currentZOrder = 1;
+function getDefaultLayoutByMediaSource(source) {
+  var _a, _b;
+  if (source.type === TRTCMediaSourceType.kCamera || source.type === TRTCMediaSourceType.kScreen) {
+    let resolution;
+    let defaultFillMode;
+    if (source.type === TRTCMediaSourceType.kCamera) {
+      resolution = ((_a = source.camera) == null ? void 0 : _a.resolution) || TRTCVideoResolution.TRTCVideoResolution_1280_720;
+      defaultFillMode = TRTCVideoFillMode.TRTCVideoFillMode_Fill;
+    } else if (source.type === TRTCMediaSourceType.kScreen) {
+      resolution = ((_b = source.screen) == null ? void 0 : _b.resolution) || TRTCVideoResolution.TRTCVideoResolution_1920_1080;
+      defaultFillMode = TRTCVideoFillMode.TRTCVideoFillMode_Fit;
+    }
+    const { width: mediaSourceWidth, height: mediaSourceHeight } = getSizeByResolution(resolution);
+    const scale = Math.min(publishVideoWidth.value / mediaSourceWidth, publishVideoHeight.value / mediaSourceHeight);
+    const defaultLayout = {
+      rect: {
+        left: 0,
+        top: 0,
+        right: mediaSourceWidth * scale,
+        bottom: mediaSourceHeight * scale
+      },
+      zOrder: currentZOrder,
+      fillMode: defaultFillMode,
+      mirror: TRTCVideoMirrorType.TRTCVideoMirrorType_Disable,
+      rotation: TRTCVideoRotation.TRTCVideoRotation_0
+    };
+    currentZOrder += 1;
+    return defaultLayout;
+  }
+  if (source.type === TRTCMediaSourceType.kText) {
+    const defaultLayout = {
+      rect: {
+        left: 20,
+        top: 400,
+        right: 220,
+        bottom: 500
+      },
+      zOrder: currentZOrder
+    };
+    currentZOrder += 1;
+    return defaultLayout;
+  }
+  if (source.type === TRTCMediaSourceType.kImage || source.type === TRTCMediaSourceType.kVideo) {
+    const defaultLayout = {
+      rect: {
+        left: 0,
+        top: 0,
+        right: 400,
+        bottom: 300
+      },
+      zOrder: currentZOrder,
+      fillMode: TRTCVideoFillMode.TRTCVideoFillMode_Fit,
+      mirror: TRTCVideoMirrorType.TRTCVideoMirrorType_Disable,
+      rotation: TRTCVideoRotation.TRTCVideoRotation_0
+    };
+    currentZOrder += 1;
+    return defaultLayout;
+  }
+  return null;
+}
+async function addMediaSource(source) {
+  var _a, _b, _c, _d;
+  if (source.type === TRTCMediaSourceType.kCamera) {
+    try {
+      const mediaStream = await navigator.mediaDevices.getUserMedia({ audio: false, video: true });
+      mediaStream.getVideoTracks()[0].stop();
+    } catch (error) {
+      throw error;
+    }
+  }
+  if (!source.layout) {
+    source.layout = getDefaultLayoutByMediaSource(source);
+  } else {
+    source.layout = Object.assign({}, getDefaultLayoutByMediaSource(source), source.layout);
+  }
+  if (source.type === TRTCMediaSourceType.kText) {
+    source.text = {
+      content: ((_a = source.text) == null ? void 0 : _a.content) || "",
+      color: (_b = source.text) == null ? void 0 : _b.fontColor,
+      font: `${(_c = source.text) == null ? void 0 : _c.fontSize}px ${(_d = source.text) == null ? void 0 : _d.fontFamily}`
+    };
+  }
+  await mediaSourceManager.addMediaSource(source);
+  mediaSourceList.value.push(source);
+  changeActiveMediaSource(source);
+}
+async function updateMediaSource(source, config) {
+  const newSource = objectMerge(source, config);
+  await mediaSourceManager.updateMediaSource(newSource);
+  if (source.isSelected) {
+    changeActiveMediaSource(newSource);
+  }
+  const index = mediaSourceList.value.findIndex((item) => item.id === source.id);
+  if (index !== -1) {
+    mediaSourceList.value[index] = newSource;
+  }
+}
+async function removeMediaSource(source) {
+  await mediaSourceManager.removeMediaSource(source);
+  mediaSourceList.value = mediaSourceList.value.filter((item) => item.id !== source.id);
+}
+function enableLocalVideoMixer() {
+  isVideoMixerEnabled.value = true;
+  initMediaSourceManager();
+}
+function clearMediaSource() {
+  mediaSourceList.value.forEach(async (item) => {
+    await mediaSourceManager.removeMediaSource(item);
+  });
+  mediaSourceList.value = [];
+}
+async function onDeviceChanged(eventInfo) {
+  const { deviceId, type, state } = eventInfo;
+  if (type === TUIMediaDeviceType.kMediaDeviceTypeVideoCamera && state === TUIMediaDeviceState.kMediaDeviceStateAdd) {
+    const updateMediaList = mediaSourceList.value.filter((item) => {
+      var _a;
+      return ((_a = item.camera) == null ? void 0 : _a.cameraId) === deviceId;
+    });
+    updateMediaList.forEach(async (item) => {
+      await mediaSourceManager.updateMediaSource(item);
+    });
+  }
+}
+async function initMediaSourceManager() {
+  var _a, _b;
+  if (!roomEngine.instance) return;
+  const deviceManager = (_a = roomEngine.instance) == null ? void 0 : _a.getMediaDeviceManager();
+  deviceManager.on(TUIRoomDeviceMangerEvents.onDeviceChanged, onDeviceChanged);
+  mediaSourceManager = (_b = roomEngine.instance) == null ? void 0 : _b.getTRTCCloud().getMediaMixingManager();
+  mediaSourceManager.updatePublishParams(publishParams.value);
+  mediaSourceManager.on(TRTCMediaMixingEvent.onSourceSelected, (source) => {
+    changeActiveMediaSource(source);
+  });
+  mediaSourceManager.on(TRTCMediaMixingEvent.onSourceDisconnected, (source) => {
+    if (source && source.id) {
+      mediaSourceList.value = mediaSourceList.value.filter((item) => item.id !== source.id);
+    }
+  });
+  mediaSourceManager.on(TRTCMediaMixingEvent.onSourceMoved, (source, rect) => {
+    const mediaSource = mediaSourceList.value.find((item) => item.id === source.id && item.type === source.type) || null;
+    if (mediaSource) {
+      mediaSource.layout.rect = rect;
+    }
+  });
+  mediaSourceManager.on(TRTCMediaMixingEvent.onSourceResized, (source, rect) => {
+    const mediaSource = mediaSourceList.value.find((item) => item.id === source.id && item.type === source.type) || null;
+    if (mediaSource) {
+      mediaSource.layout.rect = rect;
+    }
+  });
+  mediaSourceManager.on(TRTCMediaMixingEvent.onRightButtonClicked, (source) => {
+  });
+}
+TUIRoomEngine.once("ready", async () => {
+  if (isVideoMixerEnabled.value) {
+    await initMediaSourceManager();
+  }
+});
+function useVideoMixerState() {
+  return {
+    isVideoMixerEnabled,
+    publishVideoQuality,
+    mediaSourceList,
+    activeMediaSource,
+    enableLocalVideoMixer,
+    addMediaSource,
+    updateMediaSource,
+    removeMediaSource,
+    clearMediaSource
+  };
+}
+export {
+  useVideoMixerState
+};