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

package/src/components/LiveView/PlayerControl/utils/domHelpers.ts

@@ -73,7 +73,8 @@ export class DOMElementGetter {
   }
 
   /**
-   * Validate if elements exist
+   * Validate if required elements exist for fullscreen
+   * Note: video element is optional because canvas rendering (TRTC SDK) doesn't use video
    */
   static validateElements(elements: { container?: HTMLElement | null; view?: HTMLElement | null; video?: HTMLVideoElement | null }): {
     isValid: boolean;
@@ -87,9 +88,8 @@ export class DOMElementGetter {
     if (elements.view === null) {
       missingElements.push('live-core-view');
     }
-    if (elements.video === null) {
-      missingElements.push('video');
-    }
+    // Video element is not required for fullscreen (canvas rendering works without it)
+    // Only required for picture-in-picture feature
 
     return {
       isValid: missingElements.length === 0,
@@ -143,3 +143,67 @@ export class EventListenerManager {
     return this.listeners.size;
   }
 }
+
+/**
+ * Wait for video element to be mounted in DOM
+ * @param timeout Maximum wait time in milliseconds
+ * @returns Promise that resolves with video element or null if timeout
+ */
+export const waitForVideoMounted = (timeout = 3000): Promise<HTMLVideoElement | null> => {
+  return new Promise((resolve) => {
+    const container = document.querySelector('#atomicx-live-stream-content');
+    if (!container) {
+      resolve(null);
+      return;
+    }
+
+    let timeoutId: number | null = null;
+    
+    const observer = new MutationObserver((mutations) => {
+      for (const mutation of mutations) {
+        if (mutation.type === 'childList') {
+          mutation.addedNodes.forEach((node) => {
+            if (node.nodeName === 'VIDEO') {
+              const video = node as HTMLVideoElement;
+              
+              // Temporarily remove volumechange listener to prevent syncVolumeState interference
+              const originalVolumeHandler = (video as any).onvolumechange;
+              (video as any).onvolumechange = null;
+              
+              const handleLoadedData = () => {
+                if (timeoutId) clearTimeout(timeoutId);
+                observer.disconnect();
+                video.removeEventListener('loadeddata', handleLoadedData);
+                setTimeout(() => {
+                  (video as any).onvolumechange = originalVolumeHandler;
+                }, 100);
+                resolve(video);
+              };
+              
+              if (video.readyState >= 2) {
+                if (timeoutId) clearTimeout(timeoutId);
+                observer.disconnect();
+                setTimeout(() => {
+                  (video as any).onvolumechange = originalVolumeHandler;
+                }, 100);
+                resolve(video);
+              } else {
+                video.addEventListener('loadeddata', handleLoadedData, { once: true });
+              }
+            }
+          });
+        }
+      }
+    });
+
+    observer.observe(container, {
+      childList: true,
+      subtree: true,
+    });
+
+    timeoutId = window.setTimeout(() => {
+      observer.disconnect();
+      resolve(null);
+    }, timeout);
+  });
+};

package/src/components/LiveView/i18n/en-US/index.ts

@@ -7,8 +7,8 @@ export const resource = {
   'Exit Picture in Picture': 'Exit Picture in Picture',
   'Fullscreen': 'Fullscreen',
   'Exit Fullscreen': 'Exit Fullscreen',
-  'Mute': 'Mute',
-  'Unmute': 'Unmute',
+  'Open Speaker': 'Open Speaker',
+  'Close Speaker': 'Close Speaker',
   'The system does not support picture-in-picture mode': 'The system does not support picture-in-picture mode',
   'co-Hosting': 'co-Hosting',
   'In battle': 'In battle',

package/src/components/LiveView/i18n/zh-CN/index.ts

@@ -7,8 +7,8 @@ export const resource = {
   'Exit Picture in Picture': '退出画中画',
   'Fullscreen': '全屏',
   'Exit Fullscreen': '退出全屏',
-  'Mute': '静音',
-  'Unmute': '取消静音',
+  'Open Speaker': '取消静音',
+  'Close Speaker': '静音',
   'The system does not support picture-in-picture mode': '系统不支持画中画模式',
   'co-Hosting': '连线中',
   'In battle': 'PK中',

package/src/components/LiveView/index.vue

@@ -57,7 +57,7 @@
 import { ref, computed, watch, onMounted, onBeforeUnmount, useSlots, type ComputedRef, Teleport } from 'vue';
 import { useUIKit } from '@tencentcloud/uikit-base-component-vue3';
 import { useLiveSeatState } from '../../states/LiveSeatState';
-import { useLiveState } from '../../states/LiveState';
+import { useLiveListState } from '../../states/LiveListState';
 import { useLoginState } from '../../states/LoginState';
 import { getContentSize } from '../../utils/domOperation';
 import DefaultStreamViewUI from './DefaultStreamViewUI.vue';
@@ -70,7 +70,7 @@ import { usePlayerControlState } from './PlayerControl';
 const { isFullscreen, isLandscapeStyleMode } = usePlayerControlState();
 const { t } = useUIKit();
 const { seatList, canvas, startPlayStream, stopPlayStream } = useLiveSeatState();
-const { currentLive } = useLiveState();
+const { currentLive } = useLiveListState();
 
 const slots = useSlots();
 
@@ -419,6 +419,7 @@ onBeforeUnmount(() => {
       position: absolute;
       top: 0;
       left: 0;
+      overflow: hidden;
     }
 
     .live-core-ui {

package/src/components/MessageInput/AudioCallPicker/AudioCallPicker.vue

@@ -74,7 +74,7 @@ const props = withDefaults(defineProps<AudioCallPickerProps>(), {
 const styles = useCssModule();
 const { t } = useUIKit();
 const { activeConversation } = useConversationListState();
-const { allMembers, getGroupMemberList, memberCount } = useGroupSettingState();
+const { allMembers, getGroupMemberList, memberCount, currentUserID } = useGroupSettingState();
 
 const isGroupCallDialogVisible = ref(false);
 const groupMemberPickerRef = ref();
@@ -83,13 +83,15 @@ const isC2CConversation = computed(() =>
   activeConversation.value?.type === ConversationType.C2C,
 );
 
-const groupMemberOptions = computed(() =>
-  allMembers.value?.map((member: any) => ({
+const groupMemberOptions = computed(() => {
+  const restructuredMembers = allMembers.value?.map(member => ({
     key: member.userID,
     label: member.nick || member.userID,
     avatarUrl: member.avatar,
-  })) ?? [],
-);
+  })) ?? [];
+
+  return restructuredMembers.filter(member => member.key !== currentUserID.value);
+});
 
 const canStartCall = computed(() => {
   if (!activeConversation.value || props.disabled) {
@@ -229,7 +231,7 @@ const handleConfirmGroupCall = () => initiateGroupCall();
 
 <style>
 .group-call-dialog {
-  background: white;
+  background: var(--bg-color-operate);
   border-radius: 8px;
   max-width: 500px;
   max-height: 70vh;

package/src/components/MessageInput/EmojiPicker/EmojiPicker.vue

@@ -1,6 +1,9 @@
 <template>
-  <div>
-    <PopoverRoot :open="isOpen" @update:open="handleOpenChange">
+  <View>
+    <PopoverRoot
+      :open="isOpen"
+      @update:open="handleOpenChange"
+    >
       <PopoverTrigger
         as="div"
         :disabled="props.disabled"
@@ -45,7 +48,7 @@
         </PopoverContent>
       </PopoverPortal>
     </PopoverRoot>
-  </div>
+  </View>
 </template>
 
 <script setup lang="ts">
@@ -53,6 +56,7 @@ import { onMounted, defineProps, useCssModule, ref } from 'vue';
 import { useUIKit, IconEmoji } from '@tencentcloud/uikit-base-component-vue3';
 import cs from 'classnames';
 import { PopoverContent, PopoverPortal, PopoverRoot, PopoverTrigger } from 'reka-ui';
+import { View } from '../../../baseComp/View';
 import { emojiUrlMap, emojiBaseUrl } from '../../../constants/emoji';
 import { useMessageInputState, MessageContentType } from '../../../states/MessageInputState';
 import { transformTextWithEmojiKeyToName } from '../../../utils/emoji';

package/src/components/MessageInput/MessageInput.module.scss

@@ -14,6 +14,7 @@
     align-items: center;
     color: var(--text-color-secondary);
     gap: 2px;
+    margin-left: -6px;
   }
 
   &__wrapper {

package/src/components/MessageInput/MessageInput.vue

@@ -23,6 +23,7 @@
           :autoFocus="autoFocus"
           :disabled="disabled"
           :placeholder="placeholder"
+          :maxLength="maxLength"
         >
           <template #inputPrefix>
             <slot name="inputPrefix" />
@@ -76,7 +77,8 @@ const props = withDefaults(defineProps<MessageInputProps>(), {
   autoFocus: true,
   disabled: false,
   hideSendButton: false,
-  placeholder: '',
+  placeholder: undefined,
+  maxLength: undefined,
   attachmentPickerMode: 'collapsed',
   actions: () => ['EmojiPicker', 'ImagePicker', 'FilePicker', 'VideoPicker'],
 });

package/src/components/MessageInput/TextEditor/EditorCore.ts

@@ -3,9 +3,10 @@ import Placeholder from '@tiptap/extension-placeholder';
 import StarterKit from '@tiptap/starter-kit';
 import { Extension, Editor } from '@tiptap/vue-3';
 import { MessageContentType } from '../../../states/MessageInputState';
+import { CharacterCount } from './extensions/characterCountExtension';
+import { createImageExtension } from './extensions/imageExtension';
 import type { InputContent } from '../../../states/MessageInputState';
-import type { JSONContent } from '@tiptap/vue-3';
-import type { EditorOptions as TiptapEditorOptions } from '@tiptap/vue-3';
+import type { JSONContent, EditorOptions as TiptapEditorOptions } from '@tiptap/vue-3';
 import './Editor.scss';
 
 function createEmojiExtension() {
@@ -25,31 +26,6 @@ function createEmojiExtension() {
   });
 }
 
-function createImageExtension() {
-  return Image.extend({
-    addOptions() {
-      return {
-        ...this.parent?.(),
-        HTMLAttributes: {
-          class: 'message-image',
-        },
-      };
-    },
-    addAttributes() {
-      return {
-        ...this.parent?.(),
-        fileData: {
-          default: null,
-          parseHTML: element => element.getAttribute('file-data'),
-          renderHTML: attributes => attributes.fileData ? { 'file-data': attributes.fileData } : {},
-        },
-      };
-    },
-  }).configure({
-    inline: true,
-  });
-}
-
 function createEnterKeyExtension(options?: { onEnter?: (() => void) | undefined }) {
   return Extension.create({
     addKeyboardShortcuts() {
@@ -111,6 +87,8 @@ interface EditorOptions {
   placeholder?: string;
   autoFocus?: boolean;
   disabled?: boolean;
+  maxLength?: number;
+  isPlaceholderOnlyShowWhenEditable?: boolean;
   onUpdate?: (content: InputContent[]) => void;
   onEnter?: () => void;
   onFocus?: () => void;
@@ -122,18 +100,29 @@ function createEditor({
   placeholder = '',
   autoFocus = false,
   disabled = false,
+  isPlaceholderOnlyShowWhenEditable = true,
+  maxLength = undefined,
   onUpdate,
   onEnter,
   onFocus,
   onBlur,
 }: EditorOptions) {
   const createBaseExtensions = (enterHandler?: () => void) => [
-    StarterKit,
+    StarterKit.configure({
+      bold: false,
+      italic: false,
+      strike: false,
+      code: false,
+    }),
+    CharacterCount.configure({
+      limit: maxLength,
+    }),
     createEnterKeyExtension(enterHandler ? { onEnter: enterHandler } : undefined),
     createEmojiExtension(),
     createImageExtension(),
     Placeholder.configure({
       placeholder,
+      showOnlyWhenEditable: isPlaceholderOnlyShowWhenEditable,
     }),
   ];
 

package/src/components/MessageInput/TextEditor/TextEditor.vue

@@ -27,22 +27,24 @@ interface TextEditorProps {
   autoFocus?: boolean;
   disabled?: boolean;
   placeholder?: string;
+  maxLength?: number;
 }
 
 const props = withDefaults(defineProps<TextEditorProps>(), {
   autoFocus: true,
   disabled: false,
-  placeholder: '',
+  placeholder: undefined,
+  maxLength: undefined,
 });
 
-const { t } = useUIKit();
+const { t, language } = useUIKit();
 const { activeConversation } = useConversationListState();
 const { updateRawValue, sendMessage, setEditorInstance, setContent } = useMessageInputState();
 
 const editorDomRef = ref<HTMLDivElement | null>(null);
 const isFocused = ref(props.autoFocus);
 
-const placeholderText = computed(() => (props.disabled ? '' : props.placeholder || t('MessageInput.enter_a_message')));
+const computedPlaceholder = computed(() => props.placeholder ?? t('MessageInput.enter_a_message'));
 
 let editorInstance: Editor | null = null;
 
@@ -57,9 +59,11 @@ onMounted(() => {
   if (!element.dataset.editorCreated) {
     editorInstance = createEditor({
       element,
-      placeholder: placeholderText.value,
+      placeholder: computedPlaceholder.value,
+      isPlaceholderOnlyShowWhenEditable: props.placeholder === undefined,
       autoFocus: props.autoFocus,
       disabled: props.disabled,
+      maxLength: props.maxLength,
       onUpdate: (content) => {
         updateRawValue(content);
       },
@@ -94,6 +98,22 @@ watch(activeConversation, (newConversation, oldConversation) => {
   }
 });
 
+// Watch language change and update placeholder using Tiptap's extensionManager
+watch(language, () => {
+  if (editorInstance && props.placeholder === undefined) {
+    // Update placeholder extension options
+    const placeholderExtension = editorInstance.extensionManager.extensions.find(
+      ext => ext.name === 'placeholder',
+    );
+    if (placeholderExtension) {
+      // eslint-disable-next-line no-param-reassign
+      placeholderExtension.options.placeholder = computedPlaceholder.value;
+      // Force re-render to apply new placeholder
+      editorInstance.view.updateState(editorInstance.state);
+    }
+  }
+});
+
 watch(() => props.disabled, (newDisabled) => {
   if (editorInstance) {
     editorInstance.setEditable(!newDisabled);

package/src/components/MessageInput/TextEditor/extensions/characterCountExtension.ts

@@ -0,0 +1,159 @@
+import { Plugin, PluginKey } from '@tiptap/pm/state';
+import { Extension } from '@tiptap/vue-3';
+import type { Node as ProseMirrorNode } from '@tiptap/pm/model';
+
+interface CharacterCountOptions {
+  limit: number | null | undefined;
+  textCounter: (text: string) => number;
+  wordCounter: (text: string) => number;
+}
+
+interface CharacterCountStorage {
+  characters: (options?: { node?: ProseMirrorNode; mode?: 'textSize' | 'nodeSize' }) => number;
+  words: (options?: { node?: ProseMirrorNode }) => number;
+}
+
+function countGraphemes(text: string): number {
+  if (typeof Intl !== 'undefined' && 'Segmenter' in Intl) {
+    const segmenter = new (Intl as any).Segmenter('en', { granularity: 'grapheme' });
+    return Array.from(segmenter.segment(text)).length;
+  }
+  return [...text].length;
+}
+
+const CharacterCount = Extension.create<CharacterCountOptions, CharacterCountStorage>({
+  name: 'characterCount',
+
+  addOptions() {
+    return {
+      limit: null,
+      textCounter: text => text.length,
+      wordCounter: text => text.split(' ').filter(word => word !== '').length,
+    };
+  },
+
+  addStorage() {
+    return {
+      characters: () => 0,
+      words: () => 0,
+    };
+  },
+
+  onBeforeCreate() {
+    this.storage.characters = (options) => {
+      const node = options?.node || this.editor.state.doc;
+
+      // Count all inline nodes: text nodes (with grapheme counting) + emoji nodes
+      let totalCount = 0;
+
+      node.descendants((childNode) => {
+        if (childNode.isText && childNode.text) {
+          totalCount += countGraphemes(childNode.text);
+        } else if (childNode.type.name === 'emoji') {
+          // Emoji node: count as 1 character
+          totalCount += 1;
+        }
+        // Images and other inline nodes can be added here if needed
+      });
+
+      return totalCount;
+    };
+
+    this.storage.words = (options) => {
+      const node = options?.node || this.editor.state.doc;
+      const text = node.textBetween(0, node.content.size, ' ', ' ');
+      return this.options.wordCounter(text);
+    };
+  },
+
+  addProseMirrorPlugins() {
+    let initialEvaluationDone = false;
+
+    return [
+      new Plugin({
+        key: new PluginKey('characterCount'),
+        appendTransaction: (_transactions, _oldState, newState) => {
+          if (initialEvaluationDone) {
+            return;
+          }
+
+          const { limit } = this.options;
+
+          if (limit === null || limit === undefined || limit === 0) {
+            initialEvaluationDone = true;
+            return;
+          }
+
+          const initialContentSize = this.storage.characters({ node: newState.doc });
+
+          if (initialContentSize > limit) {
+            const over = initialContentSize - limit;
+            const from = 0;
+            const to = over;
+
+            const tr = newState.tr.deleteRange(from, to);
+            initialEvaluationDone = true;
+            return tr;
+          }
+
+
+          initialEvaluationDone = true;
+        },
+        filterTransaction: (transaction, state) => {
+          const { limit } = this.options;
+
+          if (!transaction.docChanged || limit === 0 || limit === null || limit === undefined) {
+            return true;
+          }
+
+          const oldSize = this.storage.characters({ node: state.doc });
+          const newSize = this.storage.characters({ node: transaction.doc });
+          const isPaste = transaction.getMeta('paste');
+
+          // Allow if within limit
+          if (newSize <= limit) {
+            return true;
+          }
+
+          // Allow deletion when already over limit
+          if (oldSize > limit && newSize > limit && newSize <= oldSize) {
+            return true;
+          }
+
+          // Reject if already over limit and still adding
+          if (oldSize > limit && newSize > limit && newSize > oldSize) {
+            return false;
+          }
+
+          // Handle paste trimming
+          if (!isPaste) {
+            return false;
+          }
+
+          const { pos } = transaction.selection.$head;
+          const over = newSize - limit;
+          const from = pos - over;
+          const to = pos;
+
+          if (from < 0) {
+            return false;
+          }
+
+          transaction.deleteRange(from, to);
+          const updatedSize = this.storage.characters({ node: transaction.doc });
+
+          if (updatedSize > limit) {
+            return false;
+          }
+
+          return true;
+        },
+      }),
+    ];
+  },
+});
+
+
+export {
+  CharacterCount,
+}

package/src/components/MessageInput/TextEditor/extensions/imageExtension.ts

@@ -0,0 +1,79 @@
+import Image from '@tiptap/extension-image';
+import { Plugin, PluginKey } from '@tiptap/pm/state';
+
+function createImageExtension() {
+  return Image.extend({
+    addOptions() {
+      return {
+        ...this.parent?.(),
+        HTMLAttributes: {
+          class: 'message-image',
+        },
+      };
+    },
+    addAttributes() {
+      return {
+        ...this.parent?.(),
+        fileData: {
+          default: null,
+          parseHTML: () => null,
+          renderHTML: () => ({}),
+        },
+      };
+    },
+    addProseMirrorPlugins() {
+      return [
+        new Plugin({
+          key: new PluginKey('imagePaste'),
+          props: {
+            handlePaste: (view, event) => {
+              const items = Array.from(event.clipboardData?.items || []);
+              const images = items.filter(item => item.type.indexOf('image') === 0);
+
+              if (images.length === 0) {
+                return false; // Let default handler process
+              }
+
+              images.forEach((item) => {
+                const file = item.getAsFile();
+
+                if (file) {
+                  const reader = new FileReader();
+                  reader.onload = (readerEvent) => {
+                    const dataUrl = readerEvent.target?.result as string;
+
+                    const node = view.state.schema.nodes.image.create({
+                      src: dataUrl,
+                      fileData: file,
+                    });
+
+                    const transaction = view.state.tr.replaceSelectionWith(node);
+                    view.dispatch(transaction);
+                  };
+
+                  reader.onerror = (error) => {
+                    console.error('[MessageInput]::Failed to read image file:', error);
+                  };
+
+                  reader.onabort = () => {
+                    console.warn('[MessageInput]::Image file reading was aborted.');
+                  };
+
+                  reader.readAsDataURL(file);
+                }
+              });
+
+              return true; // Prevent default paste behavior
+            },
+          },
+        }),
+      ];
+    },
+  }).configure({
+    inline: true,
+  });
+}
+
+export {
+  createImageExtension,
+};

package/src/components/MessageInput/VideoCallPicker/VideoCallPicker.vue

@@ -76,7 +76,7 @@ const props = withDefaults(defineProps<VideoCallPickerProps>(), {
 const styles = useCssModule();
 const { t } = useUIKit();
 const { activeConversation } = useConversationListState();
-const { allMembers, getGroupMemberList, memberCount } = useGroupSettingState();
+const { allMembers, getGroupMemberList, memberCount, currentUserID } = useGroupSettingState();
 
 const isGroupCallDialogVisible = ref(false);
 const groupMemberPickerRef = ref();
@@ -85,13 +85,15 @@ const isPrivateConversation = computed(() =>
   activeConversation.value?.type === ConversationType.C2C,
 );
 
-const groupMemberOptions = computed(() =>
-  allMembers.value?.map((member: any) => ({
+const groupMemberOptions = computed(() => {
+  const restructuredMembers = allMembers.value?.map(member => ({
     key: member.userID,
     label: member.nick || member.userID,
     avatarUrl: member.avatar,
-  })) ?? [],
-);
+  })) ?? [];
+
+  return restructuredMembers.filter(member => member.key !== currentUserID.value);
+});
 
 const canStartCall = computed(() => {
   if (!activeConversation.value || props.disabled) {
@@ -235,7 +237,7 @@ const handleConfirmGroupCall = () => initiateGroupCall();
 
 <style>
 .group-call-dialog {
-  background: white;
+  background: var(--bg-color-operate);
   border-radius: 8px;
   max-width: 500px;
   max-height: 70vh;

package/src/components/MessageInput/i18n/zh-CN.ts

@@ -8,6 +8,10 @@ const MessageInput = {
   unknown: '未知',
   enter_a_message: '输入消息',
   send: '发送',
+  select_call_members: '选择成员',
+  cancel: '取消',
+  confirm: '确认',
+  initiate_call: '发起通话',
 };
 
 export default MessageInput;

package/src/components/MessageInput/types.d.ts

@@ -28,6 +28,7 @@ export interface MessageInputProps {
   hideSendButton?: boolean;
   placeholder?: string;
   attachmentPickerMode?: MessageInputAttachmentPickerMode;
+  maxLength?: number;
   actions?: MessageInputActions;
   slots?: MessageInputSlots;
 }