tuikit-atomicx-vue3 0.1.0

package/src/directives/vTouchScale.ts

@@ -0,0 +1,230 @@
+/**
+ * <div v-touch-scale="enable"></div>
+ */
+
+const touchScaleElementMap = new Map<HTMLElement, TouchScale>();
+
+class TouchScale {
+  public touchDom: HTMLElement;
+  public transformDom: HTMLElement;
+
+  public lastPosition = { x: 0, y: 0 };
+  public lastCenterPosition = { x: 0, y: 0 };
+  public lastDistance = 0;
+
+  public currentTranslate = { x: 0, y: 0 };
+  public currentCenterPosition = { x: 0, y: 0 };
+  public currentScale = 1;
+
+  public tempScale = 1;
+  public tempTranslate = { x: 0, y: 0 };
+
+  public isOneFingerControl = false;
+  public isTwoFingerControl = false;
+
+  public isEnabled = false;
+
+  constructor(el: HTMLElement, binding: any) {
+    this.touchDom = el;
+    this.transformDom = el;
+    this.transformDom.style.transformOrigin = '0 0';
+
+    this.isEnabled = !!binding.value;
+
+    this.handleTouchStart = this.handleTouchStart.bind(this);
+    this.handleTouchMove = this.handleTouchMove.bind(this);
+    this.handleTouchEnd = this.handleTouchEnd.bind(this);
+    this.touchDom?.addEventListener('touchstart', this.handleTouchStart, false);
+    this.touchDom?.addEventListener('touchmove', this.handleTouchMove, false);
+    this.touchDom?.addEventListener('touchend', this.handleTouchEnd, false);
+  }
+
+  public updateBinding(binding: any) {
+    this.isEnabled = !!binding.value;
+  }
+
+  public destroy() {
+    this.touchDom?.removeEventListener(
+      'touchstart',
+      this.handleTouchStart,
+      false
+    );
+    this.touchDom?.removeEventListener(
+      'touchmove',
+      this.handleTouchMove,
+      false
+    );
+    this.touchDom?.removeEventListener('touchend', this.handleTouchEnd, false);
+  }
+
+  private handleTouchStart(event: TouchEvent) {
+    if (!this.isEnabled) {
+      return;
+    }
+    event.preventDefault();
+    if (this.currentScale !== 1) {
+      event.stopPropagation();
+    }
+    if (event.touches.length === 2) {
+      this.handleScaleStart(event);
+      this.isTwoFingerControl = true;
+    }
+    if (event.touches.length === 1) {
+      this.handlePositionStart(event);
+      this.isOneFingerControl = true;
+    }
+  }
+
+  private handleTouchMove(event: TouchEvent) {
+    if (!this.isEnabled) {
+      return;
+    }
+    event.preventDefault();
+    if (this.tempScale !== 1) {
+      event.stopPropagation();
+    }
+    if (event.touches.length === 2 && this.isTwoFingerControl) {
+      this.handleScaleMove(event);
+    }
+    if (event.touches.length === 1 && this.isOneFingerControl) {
+      this.handlePositionMove(event);
+    }
+  }
+
+  private handleTouchEnd(event: TouchEvent) {
+    if (!this.isEnabled) {
+      return;
+    }
+    event.preventDefault();
+    if (this.currentScale !== 1) {
+      event.stopPropagation();
+    }
+    if (this.isTwoFingerControl) {
+      this.handleScaleEnd();
+    }
+    this.isTwoFingerControl = false;
+    this.isOneFingerControl = false;
+  }
+
+  private getDistance(touchTargetA: Touch, touchTargetB: Touch) {
+    return Math.sqrt(
+      Math.pow(touchTargetA.pageX - touchTargetB.pageX, 2) +
+        Math.pow(touchTargetA.pageY - touchTargetB.pageY, 2)
+    );
+  }
+
+  private getCenterPointer(touchTargetA: Touch, touchTargetB: Touch) {
+    return {
+      x: (touchTargetA.pageX + touchTargetB.pageX) / 2,
+      y: (touchTargetA.pageY + touchTargetB.pageY) / 2,
+    };
+  }
+
+  private getTranslateLimitedObj(
+    translateObj: { x: number; y: number },
+    scale: number
+  ) {
+    const translateResult = { ...translateObj };
+    if (translateObj.x > 0) {
+      translateResult.x = 0;
+    }
+    if (translateObj.x < 0 - (scale - 1) * this.transformDom.offsetWidth) {
+      translateResult.x = 0 - (scale - 1) * this.transformDom.offsetWidth;
+    }
+    if (translateObj.y > 0) {
+      translateResult.y = 0;
+    }
+    if (translateObj.y < 0 - (scale - 1) * this.transformDom.offsetHeight) {
+      translateResult.y = 0 - (scale - 1) * this.transformDom.offsetHeight;
+    }
+    return translateResult;
+  }
+
+  private handleScaleStart(event: TouchEvent) {
+    const [initATarget, initBTarget] = event.touches;
+    this.lastDistance = this.getDistance(initATarget, initBTarget);
+    this.lastCenterPosition = this.getCenterPointer(initATarget, initBTarget);
+  }
+
+  private handleScaleMove(event: TouchEvent) {
+    const [moveATarget, moveBTarget] = event.touches;
+    const moveDistance = this.getDistance(moveATarget, moveBTarget);
+    const centerPosition = this.getCenterPointer(moveATarget, moveBTarget);
+
+    this.tempScale = this.currentScale * (moveDistance / this.lastDistance);
+    if (this.tempScale <= 1) {
+      this.tempTranslate = { x: 0, y: 0 };
+      this.tempScale = 1;
+    } else {
+      const gapTop =
+        (moveDistance / this.lastDistance) *
+          (this.currentScale * this.lastCenterPosition.y) -
+        this.currentScale * centerPosition.y;
+      const gapLeft =
+        (moveDistance / this.lastDistance) *
+          (this.currentScale * this.lastCenterPosition.x) -
+        this.currentScale * centerPosition.x;
+      this.tempTranslate = {
+        x: this.currentTranslate.x - gapLeft,
+        y: this.currentTranslate.y - gapTop,
+      };
+      this.tempTranslate = this.getTranslateLimitedObj(
+        this.tempTranslate,
+        this.tempScale
+      );
+    }
+    this.transformDom.style.transform = `translate(${this.tempTranslate.x}px, ${this.tempTranslate.y}px) scale(${this.tempScale})`;
+  }
+
+  private handleScaleEnd() {
+    this.currentScale = this.tempScale;
+    this.currentTranslate = this.tempTranslate;
+  }
+
+  private handlePositionStart(event: TouchEvent) {
+    this.lastPosition = {
+      x: event.touches[0].pageX,
+      y: event.touches[0].pageY,
+    };
+  }
+
+  private handlePositionMove(event: TouchEvent) {
+    const currentPosition = {
+      x: event.touches[0].pageX,
+      y: event.touches[0].pageY,
+    };
+    this.currentTranslate = {
+      x: this.currentTranslate.x + (currentPosition.x - this.lastPosition.x),
+      y: this.currentTranslate.y + (currentPosition.y - this.lastPosition.y),
+    };
+    this.currentTranslate = this.getTranslateLimitedObj(
+      this.currentTranslate,
+      this.currentScale
+    );
+    this.lastPosition = currentPosition;
+    this.transformDom.style.transform = `translate(${this.currentTranslate.x}px, ${this.currentTranslate.y}px) scale(${this.currentScale})`;
+  }
+}
+
+const vDblTouch = {
+  mounted(el: HTMLElement, binding: any) {
+    if (binding.value) {
+      const newTouchScale = new TouchScale(el, binding);
+      touchScaleElementMap.set(el, newTouchScale);
+    }
+  },
+  updated(el: HTMLElement, binding: any) {
+    if (touchScaleElementMap.get(el)) {
+      touchScaleElementMap.get(el)?.updateBinding(binding);
+    } else if (binding.value) {
+      const newTouchScale = new TouchScale(el, binding);
+      touchScaleElementMap.set(el, newTouchScale);
+    }
+  },
+  beforeUnmount(el: HTMLElement) {
+    touchScaleElementMap.get(el)?.destroy();
+    touchScaleElementMap.delete(el);
+  },
+};
+
+export default vDblTouch;

package/src/handler/index.ts

@@ -0,0 +1,2 @@
+export * from './translator';
+export * from './voiceConverter';

package/src/handler/translator.ts

@@ -0,0 +1,159 @@
+import TUIChatEngine, {
+  TUIChatService,
+  TUIStore,
+  TUIUserService,
+} from '@tencentcloud/chat-uikit-engine';
+import type { ITranslationTextType } from '../types/message';
+import type { IMessageModel } from '@tencentcloud/chat-uikit-engine';
+
+class Translator {
+  static instance: Translator | undefined = undefined;
+  private translationCache = new Map<string, ITranslationTextType[]>();
+
+  constructor() {
+    if (Translator.instance) {
+      return Translator.instance;
+    }
+    Translator.instance = this;
+  }
+
+  async get(messageID: string): Promise<ITranslationTextType[]> {
+    // step1: check in cache if translation exist
+    const cache = this.translationCache.get(messageID);
+    if (cache !== undefined) {
+      return cache;
+    }
+
+    // step2: get message model with prototype methods
+    const currentMessage: IMessageModel = TUIStore.getMessageModel(messageID);
+    if (!currentMessage) {
+      return Promise.reject('message not found');
+    }
+
+    const { text } = currentMessage.getMessageContent() || {};
+    const textList: ITranslationTextType[] = [];
+    const splittingList = await this.getNickList(currentMessage);
+    // step3: Categorize origin messages to 'plain text', 'face', 'mention'
+    for (let i = 0; i < text.length; ++i) {
+      const item = text[i];
+      if (item.name === 'img') {
+        textList.push({ type: 'face', value: item.src });
+        continue;
+      }
+      const { transSplittingList, atNickList } = this.getSplitResult(item.text, splittingList);
+      for (let j = 0; j < transSplittingList.length; ++j) {
+        textList.push({ type: 'text', value: transSplittingList[j] });
+        if (j < atNickList.length) {
+          textList.push({ type: 'mention', value: atNickList[j] });
+        }
+      }
+    }
+
+    // step4: filter plain text to be translated
+    const needTranslateTextIndex: number[] = [];
+    const needTranslateText = textList.filter((item, index) => {
+      if (item.type === 'text' && item.value.trim() !== '') {
+        needTranslateTextIndex.push(index);
+        return true;
+      }
+      return false;
+    }).map(item => item.value);
+
+    if (needTranslateText.length === 0) {
+      this.translationCache.set(currentMessage.ID, textList);
+      return textList;
+    }
+    // step5: get final translation result
+    const translationResult = await this.getTranslationStandard(needTranslateText) as string[];
+    translationResult.forEach((item, index) => {
+      textList[needTranslateTextIndex[index]].value = item;
+    });
+
+    // step6: cache translation result
+    this.translationCache.set(currentMessage.ID, textList);
+    return textList;
+  }
+
+  private getTranslationStandard(originTextList: string[]): Promise<string[]> {
+    return new Promise((resolve, reject) => {
+      TUIChatService.translateText({
+        sourceTextList: originTextList,
+        sourceLanguage: 'auto',
+      })
+        .then((response: Record<string, any>) => {
+          const {
+            data: { translatedTextList },
+          } = response;
+          resolve(translatedTextList);
+        })
+        .catch((error) => {
+          reject(error);
+        });
+    });
+  }
+
+  /**
+   * the nick list is used to split the text by @ + {nick or userID}
+   * @param message
+   * @returns e.g. ['@james', '@john']
+   */
+  private async getNickList(message: IMessageModel): Promise<string[]> {
+    const splittingList: string[] = [];
+    const { atUserList = [] } = message;
+    const atAllID: string = TUIChatEngine.TYPES.MSG_AT_ALL;
+    if (atUserList.includes(atAllID)) {
+      splittingList.push('@所有人');
+    }
+    if (atUserList.length > 0) {
+      const { data: userProfileList } = await TUIUserService.getUserProfile({ userIDList: atUserList });
+      userProfileList.forEach((user: any) => {
+        const atNick = `@${user.nick || user.userID}`;
+        splittingList.push(atNick);
+      });
+    }
+    return Array.from(new Set(splittingList));
+  }
+
+  /**
+   * Splits the given text into substrings based on the provided splitString array.
+   *
+   * @param {string} text - The text to be split.
+   * @param {string[]} splitString - The array of strings to split the text by.
+   * @return {{ transSplittingList: string[]; atNickList: string[] }} - An object containing two arrays:
+   *   - transSplittingList: An array of substrings extracted from the text.
+   *   - atNickList: An array of split strings that were found in the text.
+   */
+  private getSplitResult(text: string, splitString: string[]): { transSplittingList: string[]; atNickList: string[] } {
+    let searchStartPos = 0;
+    const transSplittingList: string[] = [];
+    const atNickList: string[] = [];
+    while (searchStartPos < text.length) {
+      const nextAtCharPos = text.indexOf('@', searchStartPos);
+      if (nextAtCharPos === -1) {
+        transSplittingList.push(text.substring(searchStartPos));
+        break;
+      }
+      let found = false;
+      for (let i = 0; i < splitString.length; ++i) {
+        const pos = text.indexOf(splitString[i], nextAtCharPos);
+        if (pos !== -1 && pos === nextAtCharPos) {
+          transSplittingList.push(text.substring(searchStartPos, pos));
+          atNickList.push(splitString[i]);
+          searchStartPos = pos + splitString[i].length;
+          found = true;
+          break;
+        }
+      }
+      if (!found) {
+        transSplittingList.push(text.substring(searchStartPos));
+        break;
+      }
+    }
+    return {
+      transSplittingList,
+      atNickList,
+    };
+  }
+}
+
+export const translator = new Translator();

package/src/handler/voiceConverter.ts

@@ -0,0 +1,42 @@
+import {
+  TUIChatService,
+  TUIStore,
+} from '@tencentcloud/chat-uikit-engine';
+import type { IMessageModel } from '@tencentcloud/chat-uikit-engine';
+
+class VoiceConverter {
+  static instance: VoiceConverter | undefined = undefined;
+  private convertCache = new Map<string, string>();
+
+  constructor() {
+    if (VoiceConverter.instance) {
+      return;
+    }
+    VoiceConverter.instance = this;
+  }
+
+  async get(messageID: string): Promise<string> {
+    // step1: check in cache if convert result exist
+    const cache = this.convertCache.get(messageID);
+    if (cache !== undefined) {
+      return cache;
+    }
+
+    // step2: get message model with prototype methods
+    const currentMessage: IMessageModel = TUIStore.getMessageModel(messageID);
+    if (!currentMessage) {
+      return Promise.reject('message not found');
+    }
+    // step3: get response from api
+    const response: Record<string, any> = await TUIChatService.convertVoiceToText({
+      message: currentMessage,
+    });
+    const { data: { result = '' } = {} } = response;
+    if (result) {
+      this.convertCache.set(currentMessage.ID, result);
+    }
+    return result;
+  }
+}
+
+export const voiceConverter = new VoiceConverter();

package/src/hooks/useAudioControl.ts

@@ -0,0 +1,231 @@
+import { ref, onMounted, onUnmounted } from 'vue';
+
+// Global audio instance management
+const audioInstances = new Map<string, HTMLAudioElement>();
+let currentPlayingId: string | null = null;
+
+// Define audio play event name
+const AUDIO_PLAY_EVENT = 'AUDIO_PLAY_EVENT';
+
+// Create custom event
+const createAudioPlayEvent = (audioId: string) => new CustomEvent(AUDIO_PLAY_EVENT, {
+  detail: { audioId },
+});
+
+interface IUseAudioControlProps {
+  url: string;
+  audioId?: string;
+}
+
+interface IUseAudioControlReturn {
+  isPlaying: ReturnType<typeof ref<boolean>>;
+  progress: ReturnType<typeof ref<number>>;
+  duration: ReturnType<typeof ref<number | undefined>>;
+  isLoading: ReturnType<typeof ref<boolean>>;
+  play: () => void;
+  pause: () => void;
+  stop: () => void;
+  setProgress: (newProgress: number) => void;
+}
+
+/**
+ * Vue 3 Hook for audio control
+ *
+ * This Hook encapsulates audio control functionality, providing reactive state and methods
+ *
+ * @param props Configuration parameters
+ * @returns Audio control related states and methods
+ */
+export function useAudioControl(props: IUseAudioControlProps): IUseAudioControlReturn {
+  const { url } = props;
+
+  // Generate a unique ID if audioId is not provided
+  const audioId = props.audioId || `audio-${url}`;
+
+  // Create reactive states
+  const isPlaying = ref(false);
+  const progress = ref(0);
+  const duration = ref<number | undefined>(undefined);
+  const isLoading = ref(true);
+  const audio = ref<HTMLAudioElement | null>(null);
+
+  // Play method
+  const play = () => {
+    if (!audio.value) {
+      return;
+    }
+
+    // Trigger global event to notify other audio to stop playing
+    window.dispatchEvent(createAudioPlayEvent(audioId));
+
+    // Play current audio
+    audio.value.play();
+    isPlaying.value = true;
+    currentPlayingId = audioId;
+  };
+
+  // Pause method
+  const pause = () => {
+    if (!audio.value) {
+      return;
+    }
+
+    audio.value.pause();
+    isPlaying.value = false;
+
+    if (currentPlayingId === audioId) {
+      currentPlayingId = null;
+    }
+  };
+
+  // Stop method
+  const stop = () => {
+    if (!audio.value) {
+      return;
+    }
+
+    audio.value.pause();
+    audio.value.currentTime = 0;
+    isPlaying.value = false;
+    progress.value = 0;
+
+    if (currentPlayingId === audioId) {
+      currentPlayingId = null;
+    }
+  };
+
+  // Set progress method
+  const setProgress = (newProgress: number) => {
+    if (!audio.value || duration.value === undefined) {
+      return;
+    }
+
+    // Ensure progress value is in valid range
+    const validProgress = Math.max(0, Math.min(1, newProgress));
+
+    audio.value.currentTime = duration.value * validProgress;
+    progress.value = validProgress;
+  };
+
+  // Handle time update event
+  const handleTimeUpdate = () => {
+    if (!audio.value || !duration.value) {
+      return;
+    }
+    progress.value = audio.value.currentTime / duration.value;
+  };
+
+  // Handle audio end event
+  const handleEnded = () => {
+    isPlaying.value = false;
+    progress.value = 0;
+
+    if (currentPlayingId === audioId) {
+      currentPlayingId = null;
+    }
+  };
+
+  // Listen for other audio play events
+  const handleAudioPlay = (e: Event) => {
+    const event = e as CustomEvent<{ audioId: string }>;
+    if (event.detail.audioId !== audioId && isPlaying.value) {
+      // Pause current audio if another audio starts playing
+      pause();
+    }
+  };
+
+  // Initialize audio instance when component mounts
+  onMounted(() => {
+    // Listen for global audio play events
+    window.addEventListener(AUDIO_PLAY_EVENT, handleAudioPlay);
+
+    // Check if audio instance already exists
+    let audioInstance = audioInstances.get(audioId);
+
+    // Handle metadata load event
+    const handleLoadedMetadata = () => {
+      if (!audioInstance) {
+        return;
+      }
+      duration.value = audioInstance.duration;
+      isLoading.value = false;
+    };
+
+    // Error handling
+    const handleError = () => {
+      console.error('Audio load error:', url);
+      isLoading.value = false;
+    };
+
+    // Create new instance if it doesn't exist or URL has changed
+    if (!audioInstance || audioInstance.src !== url) {
+      isLoading.value = true;
+      duration.value = undefined;
+
+      // Clean up old instance if it exists
+      if (audioInstance) {
+        audioInstance.pause();
+        audioInstance.src = '';
+        audioInstance.load();
+        audioInstance.removeEventListener('loadedmetadata', handleLoadedMetadata);
+        audioInstance.removeEventListener('error', handleError);
+        audioInstance.removeEventListener('timeupdate', handleTimeUpdate);
+        audioInstance.removeEventListener('ended', handleEnded);
+      }
+
+      // Create new instance
+      audioInstance = new Audio(url);
+      audioInstance.addEventListener('loadedmetadata', handleLoadedMetadata);
+      audioInstance.addEventListener('error', handleError);
+      audioInstance.addEventListener('timeupdate', handleTimeUpdate);
+      audioInstance.addEventListener('ended', handleEnded);
+
+      audioInstances.set(audioId, audioInstance);
+      audio.value = audioInstance;
+      isPlaying.value = false;
+      progress.value = 0;
+    } else {
+      // Use existing instance
+      audio.value = audioInstance;
+
+      // Ensure event listeners are added
+      audioInstance.removeEventListener('timeupdate', handleTimeUpdate);
+      audioInstance.removeEventListener('ended', handleEnded);
+      audioInstance.addEventListener('timeupdate', handleTimeUpdate);
+      audioInstance.addEventListener('ended', handleEnded);
+
+      if (audioInstance.duration) {
+        duration.value = audioInstance.duration;
+        isLoading.value = false;
+      }
+    }
+  });
+
+  // Clean up resources when component unmounts
+  onUnmounted(() => {
+    // Remove global event listener
+    window.removeEventListener(AUDIO_PLAY_EVENT, handleAudioPlay);
+
+    // Clean up audio instance
+    if (audioInstances.has(audioId)) {
+      const instance = audioInstances.get(audioId)!;
+      instance.removeEventListener('timeupdate', handleTimeUpdate);
+      instance.removeEventListener('ended', handleEnded);
+      instance.pause();
+      instance.src = '';
+      instance.load();
+      audioInstances.delete(audioId);
+    }
+  });
+
+  return {
+    isPlaying,
+    progress,
+    duration,
+    isLoading,
+    play,
+    pause,
+    stop,
+    setProgress,
+  };
+}