tuikit-atomicx-vue3 3.4.2 → 3.5.0-beta.8

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

@@ -1,6 +1,6 @@
+import { watch } from 'vue';
 import TUIRoomEngine, {
   TUIRoomEvents,
-  TUIChangeReason,
   TUIVideoStreamType,
   TRTCVideoStreamType,
   TRTCVideoFillMode,
@@ -9,23 +9,23 @@ import TUIRoomEngine, {
   TRTCVideoResolution,
   TRTCVideoResolutionMode,
 } from '@tencentcloud/tuiroom-engine-js';
-import { isMobile } from '../../../utils/environment';
+import useRoomEngine from '../../../hooks/useRoomEngine';
+import { useLiveListState } from '../../../states/LiveListState';
 import useUserState from '../../../states/UserState/index';
 import { innerUserStore } from '../../../states/UserState/store';
-import { DeviceStatus, LiveStatus, StreamPlayStatus } from '../../../types';
-import useRoomEngine from '../../../hooks/useRoomEngine';
-import useLiveState from '../../../states/LiveState';
 import { useVideoMixerState } from '../../../states/VideoMixerState';
-import { watch } from 'vue';
+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 { localLiveStatus } = useLiveState();
 const roomEngine = useRoomEngine();
 const playDomMap = new Map<string, Map<HTMLElement, TUIVideoStreamType>>();
 
 // todo: 这里退出房间之后需要清空
-function setPlayDomMap(params1: {userId: string, streamType: TUIVideoStreamType}, params2: {view: HTMLElement, streamType: TUIVideoStreamType}) {
+function setPlayDomMap(params1: { userId: string; streamType: TUIVideoStreamType }, params2: { view: HTMLElement; streamType: TUIVideoStreamType }) {
   const playDomInfo = playDomMap.get(`${params1.userId}-${params1.streamType}`);
   if (!playDomInfo) {
     playDomMap.set(`${params1.userId}-${params1.streamType}`, new Map());
@@ -33,27 +33,23 @@ function setPlayDomMap(params1: {userId: string, streamType: TUIVideoStreamType}
   playDomMap.get(`${params1.userId}-${params1.streamType}`)?.set(params2.view, params2.streamType);
 }
 
-function getPlayDomMap(params: {userId: string, streamType: TUIVideoStreamType}) {
+function getPlayDomMap(params: { userId: string; streamType: TUIVideoStreamType }) {
   return playDomMap.get(`${params.userId}-${params.streamType}`);
 }
 
-watch(localLiveStatus, (newVal) => {
-  if (newVal === LiveStatus.IDLE) {
-    playDomMap.clear();
-  }
-});
-
-function updateStreamPlayStatus(params: {userId: string, streamType: TUIVideoStreamType, playStatus: StreamPlayStatus}) {
+function updateStreamPlayStatus(params: { userId: string; streamType: TUIVideoStreamType; playStatus: StreamPlayStatus }) {
   if (params.userId === 'local_fake_user') {
     return;
   }
   const { userId, streamType, playStatus } = params;
-  const assignObj = streamType === TUIVideoStreamType.kScreenStream ? {
-    screenPlayStatus: playStatus
-  } : {
-    cameraPlayStatus: playStatus
-  }
-  innerUserStore.updateUserInfo({ userId, ...assignObj })
+  const assignObj = streamType === TUIVideoStreamType.kScreenStream
+    ? {
+      screenPlayStatus: playStatus,
+    }
+    : {
+      cameraPlayStatus: playStatus,
+    };
+  innerUserStore.updateUserInfo({ userId, ...assignObj });
 }
 
 interface ObserverData {
@@ -97,7 +93,7 @@ export class MediaManager {
       userId,
       streamType,
       view,
-      observerViewInVisible
+      observerViewInVisible,
     );
     // if (userId.indexOf('livekit_') !== 0) {
     //   const hasVideo =
@@ -120,7 +116,7 @@ export class MediaManager {
       Object.assign(this.observerDataMap.get(view) || {}, {
         userId,
         streamType,
-      })
+      }),
     );
     this.intersectionObserver?.observe(view);
 
@@ -164,8 +160,8 @@ export class MediaManager {
 
   private initIntersectionObserver() {
     if (
-      !this.intersectionObserver ||
-      document.getElementById('roomContainer') !== this.observerRoot
+      !this.intersectionObserver
+      || document.getElementById('roomContainer') !== this.observerRoot
     ) {
       const observerRoot = document.getElementById('roomContainer');
       this.intersectionObserver = new IntersectionObserver(
@@ -173,7 +169,7 @@ export class MediaManager {
         {
           root: observerRoot,
           rootMargin: '0px',
-        }
+        },
       );
       this.observerDataMap = new Map();
       this.observerRoot = observerRoot;
@@ -200,11 +196,11 @@ export class MediaManager {
       } else {
         observerData.isIntersection = false;
         const isContinuePlay = Array.from(
-          playDomInfo?.keys() || []
+          playDomInfo?.keys() || [],
         ).find(
           item =>
-            !this.observerDataMap.get(item) ||
-            this.observerDataMap.get(item)?.isIntersection
+            !this.observerDataMap.get(item)
+            || this.observerDataMap.get(item)?.isIntersection,
         );
         if (!isContinuePlay) {
           this.doStopPlayVideo({ userId, streamType });
@@ -238,14 +234,14 @@ export class MediaManager {
       return;
     }
     const playStreamType = this.getPlayStreamType(userId, streamType);
-    const viewIdList = Array.from(playDomInfo.keys()).map(item => {
+    const viewIdList = Array.from(playDomInfo.keys()).map((item) => {
       if (item instanceof HTMLElement) {
         return item?.id;
       }
       return item;
     });
 
-    updateStreamPlayStatus({ userId, streamType, playStatus: StreamPlayStatus.Loading })
+    updateStreamPlayStatus({ userId, streamType, playStatus: StreamPlayStatus.Loading });
     if (userId === localUser.value?.userId) {
       if (streamType === TUIVideoStreamType.kCameraStream) {
         if (isVideoMixerEnabled.value) {
@@ -284,7 +280,7 @@ export class MediaManager {
         streamType: playStreamType,
       });
     }
-    updateStreamPlayStatus({ userId, streamType, playStatus: StreamPlayStatus.Playing })
+    updateStreamPlayStatus({ userId, streamType, playStatus: StreamPlayStatus.Playing });
   }
 
   private async setVideoRenderParams(options: {
@@ -294,8 +290,8 @@ export class MediaManager {
     const { userId, streamType } = options;
     if (userId !== localUser.value?.userId) {
       const trtcCloud = roomEngine.instance?.getTRTCCloud();
-      const trtcStreamType =
-        streamType === TUIVideoStreamType.kScreenStream
+      const trtcStreamType
+        = streamType === TUIVideoStreamType.kScreenStream
           ? TRTCVideoStreamType.TRTCVideoStreamTypeSub
           : TRTCVideoStreamType.TRTCVideoStreamTypeBig;
       // todo: 确认这里的 cdn 流渲染模式
@@ -334,10 +330,10 @@ export class MediaManager {
     if (userId === localUser.value?.userId && isVideoMixerEnabled.value) {
       return;
     }
-    updateStreamPlayStatus({ userId, streamType, playStatus: StreamPlayStatus.Stopped })
+    updateStreamPlayStatus({ userId, streamType, playStatus: StreamPlayStatus.Stopped });
     if (
-      userId === localUser.value?.userId &&
-      streamType === TUIVideoStreamType.kCameraStream
+      userId === localUser.value?.userId
+      && streamType === TUIVideoStreamType.kCameraStream
     ) {
       roomEngine.instance?.setLocalVideoView({ view: null });
     } else {
@@ -412,11 +408,11 @@ export class MediaManager {
     TUIRoomEngine.once('ready', () => {
       roomEngine.instance?.on(
         TUIRoomEvents.onUserVideoStateChanged,
-        this.onUserVideoStateChanged.bind(this)
+        this.onUserVideoStateChanged.bind(this),
       );
       roomEngine.instance?.on(
         TUIRoomEvents.onUserAudioStateChanged,
-        this.onUserAudioStateChanged.bind(this)
+        this.onUserAudioStateChanged.bind(this),
       );
     });
   }
@@ -424,11 +420,11 @@ export class MediaManager {
   private unbindRoomEngineEvents() {
     roomEngine.instance?.off(
       TUIRoomEvents.onUserVideoStateChanged,
-      this.onUserVideoStateChanged
+      this.onUserVideoStateChanged,
     );
     roomEngine.instance?.off(
       TUIRoomEvents.onUserAudioStateChanged,
-      this.onUserAudioStateChanged
+      this.onUserAudioStateChanged,
     );
   }
 }

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 @@
+export { UIKitModal } from './UIKitModal';

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/UserPicker/UserPicker.vue

@@ -102,7 +102,7 @@ const selectionManager = useSelection<any>({
 const searchManager = useSearchFilter<any>({
   dataSource: internalDataSource,
   isTreeMode: isTreeMode.value,
-  onSearch: props.onSearch || (() => {}),
+  onSearch: props.onSearch,
 });
 
 // Use custom hook to manage tree state (if in tree mode)

package/src/components/UserPicker/components/SelectedPanel/SelectedPanel.vue

@@ -8,6 +8,7 @@
       <span :class="$style.selected__count">
         {{ leafItems.length }}
         <template v-if="maxCount < InfinityValue"> / {{ maxCount }} </template>
+        {{ t('UserPicker.people_unit') }}
       </span>
     </div>
     <div :class="$style.selected__list">