@trtc/calls-uikit-react 4.4.2 → 4.4.3-beta.2

package/types/TUICallService/locales/en.d.ts

@@ -136,6 +136,5 @@ export declare const en: {
     'error.10008': string;
     'error.10012': string;
     'error.10013': string;
-    'error.10014': string;
     error: string;
 };

package/types/TUICallService/locales/ja_JP.d.ts

@@ -135,6 +135,5 @@ export declare const ja_JP: {
     'error.10008': string;
     'error.10012': string;
     'error.10013': string;
-    'error.10014': string;
     error: string;
 };

package/types/TUICallService/locales/zh-cn.d.ts

@@ -131,6 +131,5 @@ export declare const zh: {
     'error.10008': string;
     'error.10012': string;
     'error.10013': string;
-    'error.10014': string;
     error: string;
 };

package/types/TUICallService/utils/validate/validateStatus.d.ts

@@ -0,0 +1,5 @@
+interface IStatusValidateParams {
+    engineInstance?: boolean;
+}
+export declare function statusValidate(config: IStatusValidateParams): (target: any, propertyName: string, descriptor: PropertyDescriptor) => PropertyDescriptor;
+export {};

package/src/Components/components/common/UIKitModal/UIKitModal.tsx

@@ -1,250 +0,0 @@
-import React, { useState, useEffect, useCallback, useMemo } from 'react';
-import { createPortal } from 'react-dom';
-import ReactDOM from 'react-dom/client';
-import type { ReactNode } from 'react';
-import { uikitModalState } from './UIKitModalState';
-import { IS_PC } from '../../../../TUICallService/utils/env';
-import { t } from '../../../../TUICallService';
-import styles from './index.module.scss';
-
-// Types
-export interface UIKitModalConfig {
-  id: number;
-  title: string;
-  content: string | ReactNode;
-  type: 'info' | 'warning' | 'error' | 'success';
-  onConfirm?: () => void;
-  onCancel?: () => void;
-}
-
-export type UIKitModalOptions = UIKitModalConfig;
-
-// Constants
-let root: ReactDOM.Root | null = null;
-let container: HTMLDivElement | null = null;
-let resolvePromise: ((value: { action: string }) => void) | null = null;
-
-const URL_REGEX = /^(https?:\/\/)?([\da-z.-]+)\.([a-z.]{2,6})([/\w .-]*)*\/?$/i;
-const FULL_URL_REGEX = /(https?:\/\/[^\s]+)/g;
-
-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(styles['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;
-}
-
-const TypeIcons: Record<string, () => JSX.Element> = {
-  success: () => <span style={{ color: 'green', marginRight: '6px' }}>✓</span>,
-  info: () => <span style={{ color: '#1890ff', marginRight: '6px' }}>ℹ</span>,
-  error: () => <span style={{ color: 'red', marginRight: '6px' }}>✕</span>,
-  warning: () => <span style={{ color: '#faad14', marginRight: '6px' }}>⚠</span>,
-};
-
-const isLocalEnvironment = (): boolean => {
-  const { hostname: host, href } = window.location;
-  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 (root) {
-    root.unmount();
-    root = null;
-  }
-  if (container && container.parentNode) {
-    container.parentNode.removeChild(container);
-    container = null;
-  }
-  resolvePromise = null;
-};
-
-interface UIKitModalComponentProps extends UIKitModalOptions {
-  visible: boolean;
-}
-
-export function UIKitModalComponent(props: UIKitModalComponentProps) {
-  const {
-    type = 'info',
-    title = '',
-    content = '',
-    visible = false,
-    onConfirm,
-    onCancel,
-  } = props;
-
-  const cancelText = t('reject');
-  const confirmText = t('accept');
-
-  const modalContainerClass = IS_PC
-    ? `${styles['uikit-modal-default']} ${styles['uikit-modal-container']}`
-    : `${styles['uikit-modal-default']} ${styles['uikit-modal-container']} ${styles['uikit-modal-container-mobile']}`;
-
-  const processedContent = useMemo(() => {
-    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="${styles['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="${styles['uikit-modal-link']}">${url}</a>`);
-    }
-
-    return escapeHtml(content);
-  }, [content]);
-
-  const TypeIcon = TypeIcons[type] || TypeIcons.info;
-
-  if (!visible) {
-    return null;
-  }
-
-  const modalContent = (
-    <div
-      className={styles['uikit-modal-mask']}
-      onClick={onConfirm}
-    >
-      <div
-        className={modalContainerClass}
-        onClick={e => e.stopPropagation()}
-      >
-        <div className={styles['uikit-modal-header']}>
-          <TypeIcon />
-          <span className={styles['uikit-modal-title']}>{title}</span>
-        </div>
-        <div
-          className={styles['uikit-modal-body']}
-          dangerouslySetInnerHTML={typeof processedContent === 'string' ? { __html: processedContent } : undefined}
-        >
-          {typeof processedContent !== 'string' ? processedContent : null}
-        </div>
-        <div className={styles['uikit-modal-footer']}>
-          <button
-            className={`${styles['uikit-modal-btn']} ${styles['uikit-modal-btn-cancel']}`}
-            onClick={onCancel}
-          >
-            {cancelText || 'Cancel'}
-          </button>
-          <button
-            className={`${styles['uikit-modal-btn']} ${styles['uikit-modal-btn-confirm']}`}
-            onClick={onConfirm}
-          >
-            {confirmText || 'Confirm'}
-          </button>
-        </div>
-      </div>
-    </div>
-  );
-
-  return createPortal(modalContent, document.body);
-}
-
-interface UIKitModalWrapperProps {
-  options: UIKitModalOptions;
-}
-
-function UIKitModalWrapper(props: UIKitModalWrapperProps) {
-  const { options } = props;
-  const [visible, setVisible] = useState(true);
-
-  const handleAction = useCallback((action: 'confirm' | 'cancel') => {
-    const { closeModal } = uikitModalState.getState();
-    setVisible(false);
-    closeModal(action);
-    if (resolvePromise) {
-      resolvePromise({ action });
-    }
-    setTimeout(cleanup, 100);
-  }, []);
-
-  const handleConfirm = useCallback(() => {
-    options.onConfirm?.();
-    handleAction('confirm');
-  }, [options, handleAction]);
-
-  const handleCancel = useCallback(() => {
-    options.onCancel?.();
-    handleAction('cancel');
-  }, [options, handleAction]);
-
-  useEffect(() => {
-    const handleKeyDown = (e: KeyboardEvent) => {
-      if (e.key === 'Escape') {
-        handleCancel();
-      }
-    };
-    document.addEventListener('keydown', handleKeyDown);
-    return () => document.removeEventListener('keydown', handleKeyDown);
-  }, [handleCancel]);
-
-  return (
-    <UIKitModalComponent
-      {...options}
-      visible={visible}
-      onConfirm={handleConfirm}
-      onCancel={handleCancel}
-    />
-  );
-}
-
-const createUIKitModal = (options: UIKitModalOptions): Promise<{ action: string }> => new Promise((resolve) => {
-  cleanup();
-
-  const { openModal } = uikitModalState.getState();
-
-  openModal({
-    id: options.id,
-    title: options.title,
-    content: options.content,
-    type: options.type,
-    ...(options.onConfirm && { onConfirm: options.onConfirm }),
-    ...(options.onCancel && { onCancel: options.onCancel }),
-  });
-
-  if (!isLocalEnvironment()) {
-    resolve({ action: 'confirm' });
-    return;
-  }
-
-  resolvePromise = resolve;
-
-  container = document.createElement('div');
-  container.id = 'uikit-modal-root';
-  document.body.appendChild(container);
-  root = ReactDOM.createRoot(container);
-  root.render(React.createElement(UIKitModalWrapper, { options }));
-});
-
-export const UIKitModal = {
-  openModal: (config: UIKitModalOptions) => createUIKitModal(config),
-};

package/src/Components/components/common/UIKitModal/UIKitModalState.ts

@@ -1,177 +0,0 @@
-import type { ReactNode } from 'react';
-import { TUICallKitAPI } from '../../../../TUICallService/index';
-
-// Types
-export interface UIKitModalConfig {
-  id: number;
-  title: string;
-  content: string | ReactNode;
-  type: 'info' | 'warning' | 'error' | 'success';
-  onConfirm?: () => void;
-  onCancel?: () => void;
-}
-
-export type UIKitModalOptions = UIKitModalConfig;
-
-interface AnalyticsData {
-  eventType: number;
-  modalId: number;
-  title: string;
-  type: string;
-  content: string | ReactNode;
-  timestamp: number;
-  stayDuration?: number;
-  closeReasonCode?: number;
-  sessionId?: string;
-  platformCode?: number;
-  userAgent?: string;
-}
-
-interface UIKitModalState {
-  modalData: UIKitModalConfig | null;
-  activeModalId: number | null;
-  modalOpenTime: number | null;
-}
-
-interface UIKitModalActions {
-  openModal: (config: UIKitModalConfig) => void;
-  closeModal: (action?: 'confirm' | 'cancel' | 'mask' | 'timeout') => void;
-  getState: () => UIKitModalState & UIKitModalActions;
-}
-
-function getPlatformInfo() {
-  const ua = navigator.userAgent;
-  const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(ua);
-  return {
-    userAgent: ua,
-    platformCode: isMobile ? 2 : 1,
-  };
-}
-
-function getSessionId(): string {
-  let sessionId = sessionStorage.getItem('uikit_session_id');
-  if (!sessionId) {
-    sessionId = `session_${Date.now()}_${Math.random().toString(36).substring(2, 11)}`;
-    sessionStorage.setItem('uikit_session_id', sessionId);
-  }
-  return sessionId;
-}
-
-function reportAnalytics(data: AnalyticsData) {
-  try {
-    // IM report
-    const tim = TUICallKitAPI.getTim();
-    if (tim && typeof tim.callExperimentalAPI === 'function') {
-      const reportData = {
-        id: data.modalId,
-        title: data.title,
-        type: data.type,
-        content: data.content,
-      };
-      tim.callExperimentalAPI('reportModalView', JSON.stringify(reportData));
-    }
-  } catch (_error) {
-    console.info('[UIKitModal]', data);
-  }
-}
-
-const createUIKitModalStore = () => {
-  let state: UIKitModalState = {
-    modalData: null,
-    activeModalId: null,
-    modalOpenTime: null,
-  };
-
-  const listeners: Set<() => void> = new Set();
-
-  const notify = () => {
-    listeners.forEach(listener => listener());
-  };
-
-  const openModal = (config: UIKitModalConfig) => {
-    const now = Date.now();
-    const { userAgent, platformCode } = getPlatformInfo();
-
-    state = {
-      modalData: config,
-      activeModalId: config.id,
-      modalOpenTime: now,
-    };
-
-    reportAnalytics({
-      eventType: 1,
-      modalId: config.id,
-      title: config.title,
-      type: config.type,
-      content: config.content,
-      timestamp: now,
-      sessionId: getSessionId(),
-      platformCode,
-      userAgent,
-    });
-
-    notify();
-  };
-
-  const closeModal = (action: 'confirm' | 'cancel' | 'mask' | 'timeout' = 'confirm') => {
-    const { activeModalId, modalOpenTime, modalData } = state;
-
-    if (activeModalId === null || !modalOpenTime || !modalData) {
-      return;
-    }
-
-    const now = Date.now();
-    const stayDuration = now - modalOpenTime;
-    const { userAgent, platformCode } = getPlatformInfo();
-
-    const closeReasonCodeMap: Record<string, number> = {
-      confirm: 1,
-      cancel: 2,
-      timeout: 3,
-      mask: 2,
-    };
-
-    reportAnalytics({
-      eventType: 2,
-      modalId: activeModalId,
-      title: modalData.title,
-      type: modalData.type,
-      content: modalData.content,
-      timestamp: now,
-      stayDuration,
-      closeReasonCode: closeReasonCodeMap[action],
-      sessionId: getSessionId(),
-      platformCode,
-      userAgent,
-    });
-
-    state = {
-      modalData: null,
-      activeModalId: null,
-      modalOpenTime: null,
-    };
-
-    notify();
-  };
-
-  const getState = (): UIKitModalState & UIKitModalActions => ({
-    ...state,
-    openModal,
-    closeModal,
-    getState,
-  });
-
-  return {
-    getState,
-    openModal,
-    closeModal,
-    subscribe: (listener: () => void) => {
-      listeners.add(listener);
-      return () => listeners.delete(listener);
-    },
-  };
-};
-
-export const uikitModalState = createUIKitModalStore();
-
-export default uikitModalState;

package/src/Components/components/common/UIKitModal/index.module.scss

@@ -1,176 +0,0 @@
-.uikit-modal-mask {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100vw;
-  height: 100vh;
-  background: rgba(0, 0, 0, 0.6);
-  z-index: 9999;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.uikit-modal-default {
-  width: 480px;
-  max-width: calc(100% - 40px);
-  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
-}
-
-.uikit-modal-container {
-  box-sizing: border-box;
-  background: #fff;
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-  padding: 24px;
-  border-radius: 20px;
-}
-
-.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 {
-  cursor: pointer;
-  color: #333;
-}
-
-.uikit-modal-title {
-  font-size: 16px;
-  line-height: 24px;
-  font-weight: 600;
-  color: #333;
-  flex: 1;
-}
-
-.uikit-modal-body {
-  flex: 1;
-  display: block;
-  font-size: 14px;
-  font-weight: 400;
-  line-height: 22px;
-  color: #333;
-  word-break: break-word;
-}
-
-.uikit-modal-link {
-  color: #006eff;
-  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-btn {
-  min-width: 88px;
-  height: 32px;
-  padding: 0 16px;
-  border-radius: 20px;
-  font-size: 14px;
-  font-weight: 500;
-  cursor: pointer;
-  transition: all 0.2s ease;
-  border: none;
-  outline: none;
-  white-space: nowrap;
-
-  &:active {
-    transform: scale(0.98);
-  }
-}
-
-.uikit-modal-btn-cancel {
-  background: #f0f2f9;
-  color: #333;
-
-  &:hover {
-    background: #e5e7ed;
-  }
-}
-
-.uikit-modal-btn-confirm {
-  background: #1c66e5;
-  color: #fff;
-
-  &:hover {
-    background: #1557cc;
-  }
-}
-
-.uikit-modal-header:empty,
-.uikit-modal-body:empty,
-.uikit-modal-footer:empty {
-  padding: 0;
-}
-
-.uikit-modal-container-mobile {
-  border-radius: 12px;
-  max-width: calc(100% - 32px);
-  padding: 0;
-
-  .uikit-modal-header {
-    padding: 20px 20px 16px;
-    justify-content: flex-start;
-  }
-
-  .uikit-modal-body {
-    padding: 0 20px 20px;
-    justify-content: flex-start;
-  }
-
-  .uikit-modal-footer {
-    padding: 0;
-    border-top: 0.5px solid #e5e5e5;
-    gap: 0;
-
-    .uikit-modal-btn {
-      flex: 1;
-      border-radius: 0;
-      height: 56px;
-      min-width: auto;
-      background: #fff;
-      font-size: 17px;
-
-      &:active {
-        transform: none;
-        background: #f5f5f5;
-      }
-
-      &:hover {
-        background: #fff;
-      }
-    }
-
-    .uikit-modal-btn-cancel {
-      color: #666;
-
-      &:first-child:last-child {
-        border-radius: 0 0 12px 12px;
-      }
-    }
-
-    .uikit-modal-btn-confirm {
-      color: #1c66e5;
-      border-left: 0.5px solid #e5e5e5;
-      font-weight: 600;
-    }
-  }
-}

package/src/Components/components/common/UIKitModal/index.ts

@@ -1,3 +0,0 @@
-export { UIKitModal, UIKitModalComponent } from './UIKitModal';
-export type { UIKitModalConfig, UIKitModalOptions } from './UIKitModal';
-export { uikitModalState } from './UIKitModalState';

package/types/Components/components/common/UIKitModal/UIKitModal.d.ts

@@ -1,21 +0,0 @@
-import React from 'react';
-import type { ReactNode } from 'react';
-export interface UIKitModalConfig {
-    id: number;
-    title: string;
-    content: string | ReactNode;
-    type: 'info' | 'warning' | 'error' | 'success';
-    onConfirm?: () => void;
-    onCancel?: () => void;
-}
-export type UIKitModalOptions = UIKitModalConfig;
-interface UIKitModalComponentProps extends UIKitModalOptions {
-    visible: boolean;
-}
-export declare function UIKitModalComponent(props: UIKitModalComponentProps): React.ReactPortal;
-export declare const UIKitModal: {
-    openModal: (config: UIKitModalOptions) => Promise<{
-        action: string;
-    }>;
-};
-export {};

package/types/Components/components/common/UIKitModal/UIKitModalState.d.ts

@@ -1,27 +0,0 @@
-import type { ReactNode } from 'react';
-export interface UIKitModalConfig {
-    id: number;
-    title: string;
-    content: string | ReactNode;
-    type: 'info' | 'warning' | 'error' | 'success';
-    onConfirm?: () => void;
-    onCancel?: () => void;
-}
-export type UIKitModalOptions = UIKitModalConfig;
-interface UIKitModalState {
-    modalData: UIKitModalConfig | null;
-    activeModalId: number | null;
-    modalOpenTime: number | null;
-}
-interface UIKitModalActions {
-    openModal: (config: UIKitModalConfig) => void;
-    closeModal: (action?: 'confirm' | 'cancel' | 'mask' | 'timeout') => void;
-    getState: () => UIKitModalState & UIKitModalActions;
-}
-export declare const uikitModalState: {
-    getState: () => UIKitModalState & UIKitModalActions;
-    openModal: (config: UIKitModalConfig) => void;
-    closeModal: (action?: "confirm" | "cancel" | "mask" | "timeout") => void;
-    subscribe: (listener: () => void) => () => boolean;
-};
-export default uikitModalState;

package/types/Components/components/common/UIKitModal/index.d.ts

@@ -1,3 +0,0 @@
-export { UIKitModal, UIKitModalComponent } from './UIKitModal';
-export type { UIKitModalConfig, UIKitModalOptions } from './UIKitModal';
-export { uikitModalState } from './UIKitModalState';