tuikit-atomicx-vue3 4.4.0-beta.1 → 4.5.0

package/src/components/StreamView/Layout/MeetingLayout.vue

@@ -1,8 +1,8 @@
 <template>
   <div id="streamContainer" :class="streamContainerClass">
     <StreamRegion
-      class="enlarged-stream-container"
       v-if="enlargeStream"
+      class="enlarged-stream-container"
       :user-info="enlargeStream.userInfo"
       :stream-type="enlargeStream.streamType"
       :support-touch-scale="true"
@@ -36,15 +36,16 @@
 </template>
 
 <script setup lang="ts">
-import { ref, Ref, watch, computed, ComputedRef } from 'vue';
-import ArrowStroke from '../common/ArrowStroke.vue';
-import StreamRegion from '../common/StreamRegion';
-import StreamList from '../common/StreamList/index.vue';
+import type { Ref, ComputedRef } from 'vue';
+import { ref, watch, computed } from 'vue';
 import { TUIVideoStreamType } from '@tencentcloud/tuiroom-engine-js';
-import { StreamPlayMode, StreamPlayQuality } from '../../../types';
-import useUserState from '../../../states/UserState/index';
 import { useRoomState } from '../../../states/RoomState';
-import { DeviceStatus, UserInfo } from '../../../types';
+import useUserState from '../../../states/UserState/index';
+import { StreamPlayMode, StreamPlayQuality, DeviceStatus } from '../../../types';
+import ArrowStroke from '../common/ArrowStroke.vue';
+import StreamList from '../common/StreamList/index.vue';
+import StreamRegion from '../common/StreamRegion';
+import type { UserInfo } from '../../../types';
 
 interface VideoStreamInfo {
   userInfo: UserInfo;
@@ -65,20 +66,20 @@ const localCameraStreamInfo: ComputedRef<VideoStreamInfo | null> = computed(() =
     return {
       userInfo: localUser.value,
       streamType: TUIVideoStreamType.kCameraStream,
-    }
+    };
   }
   return null;
-})
+});
 
 const screenStreamInfo: ComputedRef<VideoStreamInfo | null> = computed(() => {
   if (userWithScreenOn.value) {
     return {
       userInfo: userWithScreenOn.value,
       streamType: TUIVideoStreamType.kScreenStream,
-    }
+    };
   }
   return null;
-})
+});
 
 const allStreamInfoList: ComputedRef<VideoStreamInfo[]> = computed(() => {
   let cameraStreamList = [];
@@ -97,7 +98,7 @@ const allStreamInfoList: ComputedRef<VideoStreamInfo[]> = computed(() => {
     return [screenStreamInfo.value, ...cameraStreamList];
   }
   return cameraStreamList;
-})
+});
 
 const renderStreamInfoList: ComputedRef<VideoStreamInfo[]> = computed(() => {
   if (props.filterFn) {
@@ -109,15 +110,15 @@ const renderStreamInfoList: ComputedRef<VideoStreamInfo[]> = computed(() => {
 const gridLayoutStreamList: ComputedRef<VideoStreamInfo[]> = computed(() => {
   if (currentLayout.value === LAYOUT.NINE_EQUAL_POINTS) {
     return renderStreamInfoList.value;
-  } else {
-    if (enlargeStream.value?.streamType === TUIVideoStreamType.kScreenStream || !userWithScreen.value) {
-      return renderStreamInfoList.value.filter(stream => stream.streamType !== TUIVideoStreamType.kScreenStream);
-    } else if (screenStreamInfo.value) {
-      return renderStreamInfoList.value;
-    }
   }
+  if (enlargeStream.value?.streamType === TUIVideoStreamType.kScreenStream || !userWithScreen.value) {
+    return renderStreamInfoList.value.filter(stream => stream.streamType !== TUIVideoStreamType.kScreenStream);
+  } if (screenStreamInfo.value) {
+    return renderStreamInfoList.value;
+  }
+
   return [];
-})
+});
 
 interface Props {
   config?: string;
@@ -142,10 +143,10 @@ const props = withDefaults(defineProps<Props>(), {
     topLayout: {
       maxColumns: 0,
       maxRows: 1,
-    }
+    },
   })),
   filterFn: (streamInfo: VideoStreamInfo, index: number, list: UserInfo[]) => true,
-  sortFn: (streamInfo: VideoStreamInfo, index: number, list: UserInfo[]) => 0
+  sortFn: (streamInfo: VideoStreamInfo, index: number, list: UserInfo[]) => 0,
 });
 
 const streamListConfig = computed(() => {
@@ -159,7 +160,7 @@ const streamListConfig = computed(() => {
     return JSON.stringify(JSON.parse(props.config).topLayout);
   }
   return JSON.stringify(JSON.parse(props.config).gridLayout);
-})
+});
 
 const showControlBar = computed(() => JSON.parse(props.config)?.showControlBar);
 const preferLayout = computed(() => JSON.parse(props.config)?.preferLayout);
@@ -168,13 +169,12 @@ const currentLayout = ref(preferLayout.value);
 
 watch(preferLayout, (val) => {
   currentLayout.value = val;
-})
-
+});
 
 const isSameStream = (
-    stream1: VideoStreamInfo | null | undefined,
-    stream2: VideoStreamInfo | null | undefined
-  ) => getStreamKey(stream1) === getStreamKey(stream2);
+  stream1: VideoStreamInfo | null | undefined,
+  stream2: VideoStreamInfo | null | undefined,
+) => getStreamKey(stream1) === getStreamKey(stream2);
 
 const getStreamKey = (stream: VideoStreamInfo | null | undefined) =>
   `${stream?.userInfo.userId}_${stream?.streamType}`;
@@ -188,7 +188,7 @@ const getStreamKey = (stream: VideoStreamInfo | null | undefined) =>
 
 const isSideListLayout = computed(
   () =>
-    [LAYOUT.RIGHT_SIDE_LIST, LAYOUT.TOP_SIDE_LIST].indexOf(currentLayout.value) >= 0
+    [LAYOUT.RIGHT_SIDE_LIST, LAYOUT.TOP_SIDE_LIST].indexOf(currentLayout.value) >= 0,
 );
 
 const fixedStream: Ref<VideoStreamInfo | null> = ref(null);
@@ -213,11 +213,11 @@ const enlargeStream = computed(() => {
 
 watch(
   () => allStreamInfoList.value.length,
-  val => {
+  (val) => {
     if (val === 1 && isSideListLayout.value) {
       currentLayout.value = LAYOUT.NINE_EQUAL_POINTS;
     }
-  }
+  },
 );
 
 watch(
@@ -229,7 +229,7 @@ watch(
         currentLayout.value = LAYOUT.RIGHT_SIDE_LIST;
       }
     }
-  }
+  },
 );
 
 watch(
@@ -241,7 +241,7 @@ watch(
         fixedStream.value = null;
       }
     }
-  }
+  },
 );
 
 /**
@@ -281,7 +281,7 @@ watch(
   () => {
     handleLayout();
   },
-  { immediate: true }
+  { immediate: true },
 );
 
 const showSideList = ref(true);
@@ -433,4 +433,3 @@ function handleClickIcon() {
   }
 }
 </style>
-../../../states/RoomState

package/src/components/StreamView/index.ts

@@ -1,5 +1,7 @@
-import StreamView from './index.vue'
+import StreamViewComp from './index.vue';
+
+const StreamView = StreamViewComp;
 
 export {
-  StreamView
-}
+  StreamView,
+};

package/src/components/StreamView/manager/mediaManager.ts

@@ -13,14 +13,13 @@ import useRoomEngine from '../../../hooks/useRoomEngine';
 import { useLiveListState } from '../../../states/LiveListState';
 import useUserState from '../../../states/UserState/index';
 import { innerUserStore } from '../../../states/UserState/store';
-import { useVideoMixerState } from '../../../states/VideoMixerState';
+import { useVideoMixerState, isVideoMixerEnabled } from '../../../states/VideoMixerState';
 import { DeviceStatus, StreamPlayStatus } from '../../../types';
 import { isMobile } from '../../../utils/environment';
 import type {
   TUIChangeReason } from '@tencentcloud/tuiroom-engine-js';
 
 const { localUser } = useUserState();
-const { isVideoMixerEnabled } = useVideoMixerState();
 const roomEngine = useRoomEngine();
 const playDomMap = new Map<string, Map<HTMLElement, TUIVideoStreamType>>();
 

package/src/components/UIKitModal/UIKitModal.ts

@@ -0,0 +1,71 @@
+import { createApp } from 'vue';
+import { useUIKitModalState } from '../../states/UIKitModalState';
+import UIKitModalComponent from './index.vue';
+import type { UIKitModalOptions } from './type';
+
+let instance: any = null;
+
+const { openModal: openModalState, closeModal } = useUIKitModalState();
+
+const isLocalEnvironment = (): boolean => {
+  const host = window.location.hostname;
+  const href = window.location.href;
+  if (host === 'localhost' || host === '127.0.0.1' || host.startsWith('192.168.')) {
+    return true;
+  }
+  if (href.startsWith('https://web.sdk.qcloud.com/trtc/livekit')) {
+    return true;
+  }
+  return false;
+};
+
+const cleanup = () => {
+  if (instance) {
+    instance.unmount();
+    instance = null;
+  }
+};
+
+const createUIKitModal = (options: UIKitModalOptions): Promise<{ action: string }> => new Promise((resolve) => {
+  cleanup();
+
+  openModalState({
+    id: options.id,
+    title: options.title,
+    content: options.content,
+    type: options.type,
+    onConfirm: options.onConfirm,
+    onCancel: options.onCancel,
+  });
+
+  if (!isLocalEnvironment()) {
+    resolve({ action: 'confirm' });
+    return;
+  }
+
+  const handleAction = (action: 'confirm' | 'cancel') => {
+    closeModal(action);
+    cleanup();
+    resolve({ action });
+  };
+
+  const props = {
+    ...options,
+    visible: true,
+    onConfirm: () => {
+      options.onConfirm?.();
+      handleAction('confirm');
+    },
+    onCancel: () => {
+      options.onCancel?.();
+      handleAction('cancel');
+    },
+  };
+
+  instance = createApp(UIKitModalComponent, props);
+  instance.mount(document.createElement('div'));
+});
+
+export const UIKitModal = {
+  openModal: (config: UIKitModalOptions) => createUIKitModal(config),
+};

package/src/components/UIKitModal/index.scss

@@ -0,0 +1,134 @@
+.uikit-modal-mask {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  background: var(--uikit-color-black-3);
+  z-index: 9999;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.no-mask {
+  background: transparent;
+}
+
+.fade-enter-active, .fade-leave-active {
+  transition: opacity 0.3s;
+}
+
+.fade-enter-from, .fade-leave-to {
+  opacity: 0;
+}
+
+.uikit-modal-default {
+  width: 480px;
+  max-width: calc(100% - 40px);
+  border-radius: var(--tui-dialog-round-radius);
+  box-shadow: 0 2px 12px rgba(0,0,0,0.15);
+}
+
+.uikit-modal-container {
+  box-sizing: border-box;
+  background: var(--bg-color-dialog);
+  position: absolute;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  padding: 24px;
+}
+
+.uikit-modal-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding-bottom: 20px;
+
+  .uikit-modal-type-icon {
+    margin-right: 6px;
+  }
+}
+
+.uikit-modal-close-icon {
+  position: absolute;
+  top: 24px;
+  right: 24px;
+  cursor: pointer;
+  color: var(--text-color-primary);
+}
+
+.uikit-modal-title {
+  font-size: 16px;
+  line-height: 24px;
+  font-weight: 600;
+  color: var(--text-color-primary);
+  flex: 1;
+}
+
+.uikit-modal-body {
+  flex: 1;
+  display: block;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 22px;
+  color: var(--text-color-primary);
+  word-break: break-word;
+
+  :deep(.uikit-modal-link) {
+    color: var(--text-color-link);
+    text-decoration: none;
+    transition: all 0.2s ease;
+    cursor: pointer;
+    border-bottom: 1px solid transparent;
+    margin: 0 0.2em;
+  }
+}
+
+.uikit-modal-footer {
+  padding-top: 20px;
+  box-sizing: border-box;
+  display: flex;
+  justify-content: flex-end;
+  gap: 12px;
+}
+
+.uikit-modal-header:not(:has(:not(:empty))),
+.uikit-modal-body:not(:has(:not(:empty))),
+.uikit-modal-footer:not(:has(:not(:empty))) {
+  padding: 0;
+}
+
+.uikit-modal-container-mobile {
+  padding: 0;
+  .uikit-modal-header {
+    padding: 0;
+    justify-content: center;
+  }
+  .uikit-modal-header .uikit-modal-title:not(:empty) {
+    padding: 20px 20px 0;
+  }
+  .uikit-modal-body{
+    justify-content: center;
+  }
+  .uikit-modal-body:not(:has(*)) {
+    padding: 20px;
+  }
+  .uikit-modal-footer {
+    padding: 0;
+    border-top: 0.5px solid var(--stroke-color-module);
+    gap: 12px;
+    .uikit-modal-footer-btn {
+      flex: 1;
+      border-radius: 0;
+      border: 0;
+      height: 56px;
+    }
+    .uikit-modal-footer-btn + .uikit-modal-footer-btn {
+      margin: 0;
+      border-left: 0.5px solid var(--stroke-color-module);
+    }
+  }
+}
+

package/src/components/UIKitModal/index.ts

@@ -0,0 +1,2 @@
+export { UIKitModal } from './UIKitModal';
+export { useRoomModal } from './useRoomModal';

package/src/components/UIKitModal/index.vue

@@ -0,0 +1,160 @@
+<template>
+  <teleport to="body">
+    <transition name="fade">
+      <div
+        v-if="visible"
+        class="uikit-modal-mask"
+        @click.self="handleConfirm"
+      >
+        <div class="uikit-modal-default uikit-modal-container">
+          <div class="uikit-modal-header">
+            <IconSuccessToast
+              v-if="type === 'success'"
+              class="uikit-modal-type-icon"
+            />
+            <IconInfoToast
+              v-if="type === 'info'"
+              class="uikit-modal-type-icon"
+            />
+            <IconErrorToast
+              v-if="type === 'error'"
+              class="uikit-modal-type-icon"
+            />
+            <IconWarningToast
+              v-if="type === 'warning'"
+              class="uikit-modal-type-icon"
+            />
+            <span class="uikit-modal-title">{{ title }}</span>
+            <IconClose
+              v-if="IS_PC"
+              class="uikit-modal-close-icon"
+              @click="handleCancel"
+            />
+          </div>
+          <div
+            class="uikit-modal-body"
+            v-html="processedContent"
+          />
+          <div class="uikit-modal-footer">
+            <TUIButton
+              type="default"
+              style="min-width: 88px"
+              @click="handleCancel"
+            >
+              {{ t('Cancel') }}
+            </TUIButton>
+            <TUIButton
+              type="primary"
+              style="min-width: 88px"
+              @click="handleConfirm"
+            >
+              {{ t('Confirm') }}
+            </TUIButton>
+          </div>
+        </div>
+      </div>
+    </transition>
+  </teleport>
+</template>
+
+<script lang="ts" setup>
+import {
+  withDefaults,
+  defineProps,
+  defineEmits,
+  computed,
+} from 'vue';
+import {
+  TUIButton,
+  IconClose,
+  IconSuccessToast,
+  IconInfoToast,
+  IconErrorToast,
+  IconWarningToast,
+} from '@tencentcloud/uikit-base-component-vue3';
+import { getPlatform } from '@tencentcloud/universal-api';
+import { useI18n } from '../../locales';
+import type { UIKitModalOptions } from './type';
+
+const IS_PC = getPlatform() === 'pc';
+const { t } = useI18n();
+
+interface Props extends UIKitModalOptions {
+  visible: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  type: 'info',
+  title: '',
+  content: '',
+  visible: false,
+});
+
+const emit = defineEmits<{
+  (_e: 'confirm'): void;
+  (_e: 'cancel'): void;
+}>();
+
+const URL_REGEX = /^(https?:\/\/)?([\da-z.-]+)\.([a-z.]{2,6})([/\w .-]*)*\/?$/i;
+const FULL_URL_REGEX = /(https?:\/\/[^\s]+)/g;
+
+const processedContent = computed(() => {
+  const { content } = props;
+
+  if (!content || typeof content !== 'string') {
+    return content;
+  }
+
+  if (URL_REGEX.test(content.trim())) {
+    const url = content.trim();
+    const href = url.startsWith('http') ? url : `https://${url}`;
+    return `<a href="${escapeHtml(href)}" target="_blank" rel="noopener noreferrer" class="uikit-modal-link">${escapeHtml(url)}</a>`;
+  }
+
+  if (content.includes('<a ') || content.includes('<a>')) {
+    return processAnchorTags(content);
+  }
+
+  if (FULL_URL_REGEX.test(content)) {
+    return escapeHtml(content).replace(FULL_URL_REGEX, url => `<a href="${url}" target="_blank" rel="noopener noreferrer" class="uikit-modal-link">${url}</a>`);
+  }
+
+  return escapeHtml(content);
+});
+
+function escapeHtml(text: string): string {
+  const div = document.createElement('div');
+  div.textContent = text;
+  return div.innerHTML;
+}
+
+function processAnchorTags(content: string): string {
+  const parser = new DOMParser();
+  const doc = parser.parseFromString(content, 'text/html');
+  const anchors = doc.querySelectorAll('a');
+  anchors.forEach((anchor) => {
+    const href = anchor.getAttribute('href');
+    if (href) {
+      anchor.setAttribute('target', '_blank');
+      anchor.setAttribute('rel', 'noopener noreferrer');
+      anchor.classList.add('uikit-modal-link');
+      const originalText = anchor.textContent || '';
+      anchor.innerHTML = `<span style="padding: 0 0.2em; display: inline-block; color: var(--text-color-link)">${originalText}</span>`;
+    }
+  });
+
+  return doc.body.innerHTML;
+}
+
+function handleConfirm() {
+  props.onConfirm?.();
+  emit('confirm');
+}
+
+function handleCancel() {
+  props.onCancel?.();
+  emit('cancel');
+}
+</script>
+
+<style lang="scss" src="./index.scss"></style>

package/src/components/UIKitModal/type.ts

@@ -0,0 +1,24 @@
+import type { VNode } from 'vue';
+
+export type ButtonType = 'primary' | 'default' | 'text';
+export type Action = 'cancel' | 'confirm' | 'close' | 'mask';
+
+export interface UIKitModalEvents {
+  onConfirm?: () => void;
+  onCancel?: () => void;
+}
+
+export interface UIKitModalOptions extends UIKitModalEvents {
+  id: number;
+  title: string;
+  content: string | VNode;
+  type: 'info' | 'warning' | 'error' | 'success';
+}
+
+export interface IUIKitModalBtn {
+  type?: ButtonType;
+  text?: string;
+  customClasses?: string[];
+  action?: () => void;
+  disabled?: boolean;
+}

package/src/components/UIKitModal/useRoomModal/i18n/en-US/index.ts

@@ -0,0 +1,19 @@
+export const resource = {
+  // Modal
+  Room: {
+    'Modal.Title': 'Error',
+    'Modal.UserSigExpired': 'The user signature has expired. It is recommended to set the signature validity period to at least 24 hours. You can check our online document: <a target="_blank" href="https://trtc.io/document/35166?product=live&menulabel=uikit&platform=web">Generating UserSig</a>.',
+    'Modal.InvalidSignature': 'Invalid signature. Please regenerate it. You can check our online document: <a target="_blank" href="https://trtc.io/document/35166?product=live&menulabel=uikit&platform=web">Generating UserSig</a>.',
+    'Modal.UserIdNotMatchUserSig': 'The user ID does not match the user signature. Please check. You can verify your ID and signature on <a target="_blank" href="https://console.trtc.io/usersig">RTC Console</a>.',
+    'Modal.SdkAppIdNotMatchUserSig': 'The SDKAppID does not match the user signature. Please check. You can verify your SDKAppID and signature on <a target="_blank" href="https://console.trtc.io/usersig">RTC Console</a>.',
+    'Modal.RequirePaymentContent': 'No active package found or account is in arrears. Please proceed to the <a target="_blank" href="https://console.trtc.io/subscription/buy/live">Tencent Cloud console</a> to make a purchase.For first-time use, you can <a target="_blank" href="https://trtc.io/document/60033?product=live&menulabel=uikit&platform=web">activate the trial version</a>.',
+    'Modal.DeviceFailed': 'If you encounter any issues acquiring devices or capturing audio/video, please visit the [Audio/Video Capability Testing Tool] to check if your device and environment are compatible: https://web.sdk.qcloud.com/trtc/webrtc/demo/detect/index.html',
+    'Modal.DeviceNotDetected': 'No camera/microphone device detected. Please ensure your camera/microphone is properly connected and check your system or browser settings to confirm the camera/microphone is available.',
+    'Modal.DevicePermissionDenied': 'Camera/Microphone access was denied. Please check your browser settings to ensure this site is allowed to use your camera and microphone. If you have confirmed permission is granted, please use the [A/V Capability Test Tool] to check your device and environment for call compatibility: https://web.sdk.qcloud.com/trtc/webrtc/demo/detect/index.html',
+    'Modal.CameraPermissionDenied': 'Camera access was denied. Please check your browser settings to ensure this site is allowed to use your camera. If you have confirmed permission is granted, please use the [A/V Capability Test Tool] to check your device and environment for call compatibility: https://web.sdk.qcloud.com/trtc/webrtc/demo/detect/index.html',
+    'Modal.MicrophonePermissionDenied': 'Microphone access was denied. Please check your browser settings to ensure this site is allowed to use your microphone. If you have confirmed permission is granted, please use the [A/V Capability Test Tool] to check your device and environment for call compatibility: https://web.sdk.qcloud.com/trtc/webrtc/demo/detect/index.html',
+    'Modal.CameraStartFailed': 'Camera access failed. Please check your browser settings to ensure this site is allowed to use your camera. If you have confirmed permission is granted, please use the [A/V Capability Test Tool] to check your device and environment for call compatibility: https://web.sdk.qcloud.com/trtc/webrtc/demo/detect/index.html',
+    'Modal.MicrophoneStartFailed': 'Microphone access failed. Please check your browser settings to ensure this site is allowed to use your microphone. If you have confirmed permission is granted, please use the [A/V Capability Test Tool] to check your device and environment for call compatibility: https://web.sdk.qcloud.com/trtc/webrtc/demo/detect/index.html',
+
+  },
+};

package/src/components/UIKitModal/useRoomModal/i18n/index.ts

@@ -0,0 +1,4 @@
+import { resource as enResource } from './en-US/index';
+import { resource as zhResource } from './zh-CN/index';
+
+export { enResource, zhResource };

package/src/components/UIKitModal/useRoomModal/i18n/zh-CN/index.ts

@@ -0,0 +1,18 @@
+export const resource = {
+  // Modal
+  Room: {
+    'Modal.Title': '错误',
+    'Modal.UserSigExpired': '用户签名已过期，建议生成的签名有效期不少于 24 小时。可参阅 <a target="_blank" href="https://cloud.tencent.com/document/product/269/32688">生成 UserSig(用户鉴权)</a>。',
+    'Modal.InvalidSignature': '非法的用户签名，请重新生成。可参阅 <a target="_blank" href="https://cloud.tencent.com/document/product/269/32688">生成 UserSig(用户鉴权)</a>。',
+    'Modal.UserIdNotMatchUserSig': '用户 ID 与用户签名不匹配，请检查。可前往腾讯云控制台验证：<a target="_blank" href="https://console.cloud.tencent.com/trtc/usersigtool">验证签名</a>。',
+    'Modal.SdkAppIdNotMatchUserSig': 'SDKAppID 与用户签名不匹配，请检查。可前往腾讯云控制台验证：<a target="_blank" href="https://console.cloud.tencent.com/trtc/usersigtool">验证签名</a>。',
+    'Modal.RequirePaymentContent': '未购买套餐包或者已欠费，请前往<a target="_blank" href="https://buy.cloud.tencent.com/trtc">腾讯云控制台购买</a>。首次使用，可以<a target="_blank" href="https://cloud.tencent.com/document/product/647/105439">开通体验版</a>。',
+    'Modal.DeviceFailed': '获取设备或者采集音视频出现异常，请前往 [音视频能力检测工具] 检查您的设备和环境是否支持： https://web.sdk.qcloud.com/trtc/webrtc/demo/detect/index.html',
+    'Modal.DeviceNotDetected': '未检测到摄像头/麦克风设备。 请确保您的摄像头/麦克风已连接，并检查系统或浏览器设置中摄像头/麦克风是否可用。',
+    'Modal.DevicePermissionDenied': '摄像头/麦克风权限被拒绝，请检查浏览器设置，确保已允许使用您的摄像头和麦克风。如果您确认已授予权限， 请前往 [音视频能力检测工具] 检查您的设备和环境是否支持通话： https://web.sdk.qcloud.com/trtc/webrtc/demo/detect/index.html',
+    'Modal.CameraPermissionDenied': '摄像头权限被拒绝，请检查浏览器设置，确保已允许使用您的摄像头。如果您确认已授予权限， 请前往 [音视频能力检测工具] 检查您的设备和环境是否支持通话： https://web.sdk.qcloud.com/trtc/webrtc/demo/detect/index.html',
+    'Modal.MicrophonePermissionDenied': '麦克风权限被拒绝，请检查浏览器设置，确保已允许使用您的麦克风。如果您确认已授予权限， 请前往 [音视频能力检测工具] 检查您的设备和环境是否支持通话： https://web.sdk.qcloud.com/trtc/webrtc/demo/detect/index.html',
+    'Modal.CameraStartFailed': '打开摄像头失败，请检查浏览器设置，确保已允许使用您的摄像头。如果您确认已授予权限， 请前往 [音视频能力检测工具] 检查您的设备和环境是否支持： https://web.sdk.qcloud.com/trtc/webrtc/demo/detect/index.html',
+    'Modal.MicrophoneStartFailed': '打开麦克风失败，请检查浏览器设置，确保已允许使用您的麦克风。如果您确认已授予权限， 请前往 [音视频能力检测工具] 检查您的设备和环境是否支持： https://web.sdk.qcloud.com/trtc/webrtc/demo/detect/index.html',
+  },
+};

package/src/components/UIKitModal/useRoomModal/index.ts

@@ -0,0 +1,11 @@
+import { addI18n } from '../../../i18n';
+import { enResource, zhResource } from './i18n';
+import { useRoomModal as useRoomModalFunction } from './useRoomModal';
+
+const useRoomModal = useRoomModalFunction;
+
+addI18n('en-US', { translation: enResource });
+addI18n('zh-CN', { translation: zhResource });
+export {
+  useRoomModal,
+};