@ndscnj/roomkit-web-vue3 3.2.0

package/src/TUIRoom/core/store/utils/stream.ts

@@ -0,0 +1,59 @@
+import { TUIVideoStreamType } from '@tencentcloud/tuiroom-engine-js';
+import {
+  Comparator,
+  createComparator,
+  combineComparators,
+} from '../../../utils/utils';
+import { StreamInfo, StreamPlayState } from '../../type';
+
+export function getNewStreamInfo(
+  userId: string,
+  streamType?: TUIVideoStreamType
+) {
+  const newStreamInfo = {
+    userId,
+    streamType: streamType || TUIVideoStreamType.kCameraStream,
+    streamId: `${userId}_${streamType || TUIVideoStreamType.kCameraStream}`,
+    hasAudioStream: false,
+    audioVolume: 0,
+    hasVideoStream: false,
+    streamPlayState: StreamPlayState.Stopped,
+    streamPlayDomMap: new Map(),
+    timestamp: Date.now(),
+  };
+  return newStreamInfo;
+}
+
+let streamListCompareFunction: Comparator<StreamInfo>;
+export function setStreamListSortComparator(
+  comparator: Comparator<StreamInfo>
+) {
+  streamListCompareFunction = comparator;
+}
+
+export function getStreamListSortComparator({ roomStore }: { roomStore: any }) {
+  const defaultUserListCompareFunction = combineComparators(
+    createComparator((streamInfo: StreamInfo) =>
+      Boolean(streamInfo.streamType === TUIVideoStreamType.kScreenStream)
+    ),
+    createComparator((streamInfo: StreamInfo) =>
+      Boolean(streamInfo.userId === roomStore.roomInfo.ownerId)
+    ),
+    createComparator((streamInfo: StreamInfo) =>
+      Boolean(streamInfo.userId === roomStore.localUserId)
+    ),
+    createComparator((streamInfoA: StreamInfo) =>
+      Boolean(streamInfoA.hasAudioStream && streamInfoA.hasVideoStream)
+    ),
+    createComparator((streamInfoA: StreamInfo) =>
+      Boolean(streamInfoA.hasVideoStream)
+    ),
+    createComparator((streamInfoA: StreamInfo) =>
+      Boolean(streamInfoA.hasAudioStream)
+    ),
+    createComparator((streamInfoA: StreamInfo, streamInfoB: StreamInfo) =>
+      Boolean(Number(streamInfoA.timestamp) - Number(streamInfoB.timestamp))
+    )
+  );
+  return streamListCompareFunction || defaultUserListCompareFunction;
+}

package/src/TUIRoom/core/store/utils/user.ts

@@ -0,0 +1,60 @@
+import { TUIRole, TUIInvitationStatus } from '@tencentcloud/tuiroom-engine-js';
+import {
+  Comparator,
+  combineComparators,
+  createComparator,
+} from '../../../utils/utils';
+import { UserInfo } from '../../type';
+
+export function getNewUserInfo(userId: string): UserInfo {
+  const newUserInfo = {
+    userId,
+    userName: '',
+    avatarUrl: '',
+    nameCard: '',
+    hasAudioStream: false,
+    hasVideoStream: false,
+    hasScreenStream: false,
+    isMessageDisabled: false,
+    userRole: TUIRole.kGeneralUser,
+    customInfo: {},
+    isOnSeat: false,
+    isInRoom: false,
+    invitationStatus: TUIInvitationStatus.kNone,
+    timestamp: Date.now(),
+  };
+  return newUserInfo;
+}
+
+let userListCompareFunction: Comparator<UserInfo>;
+export function setUserListSortComparator(comparator: Comparator<UserInfo>) {
+  userListCompareFunction = comparator;
+}
+export function getUserListSortComparator({
+  localUserId,
+}: {
+  localUserId: string;
+}) {
+  const defaultUserListCompareFunction = combineComparators(
+    createComparator((userInfo: UserInfo) =>
+      Boolean(userInfo.userId === localUserId)
+    ),
+    createComparator((userInfo: UserInfo) =>
+      Boolean(userInfo.userRole === TUIRole.kRoomOwner)
+    ),
+    createComparator((userInfo: UserInfo) =>
+      Boolean(userInfo.userRole === TUIRole.kAdministrator)
+    ),
+    createComparator((userInfo: UserInfo) => Boolean(userInfo.hasScreenStream)),
+    createComparator((userInfo: UserInfo) =>
+      Boolean(userInfo.hasVideoStream && userInfo.hasAudioStream)
+    ),
+    createComparator((userInfo: UserInfo) => Boolean(userInfo.hasVideoStream)),
+    createComparator((userInfo: UserInfo) => Boolean(userInfo.hasAudioStream)),
+    createComparator((userInfo: UserInfo) => Boolean(userInfo.isOnSeat)),
+    createComparator((userInfoA: UserInfo, userInfoB: UserInfo) =>
+      Boolean(Number(userInfoA.timestamp) < Number(userInfoB.timestamp))
+    )
+  );
+  return userListCompareFunction || defaultUserListCompareFunction;
+}

package/src/TUIRoom/core/type/Beauty.ts

@@ -0,0 +1,5 @@
+export type FreeBeautyConfig = {
+  beautyLevel: number;
+  whitenessLevel: number;
+  ruddinessLevel: number;
+};

package/src/TUIRoom/core/type/MediaDeviceSetting.ts

@@ -0,0 +1,28 @@
+export enum MediaDeviceState {
+  NoDeviceDetected = 'NoDeviceDetected',
+  NotSupportCapture = 'NotSupportCapture',
+  DeviceOff = 'DeviceOff',
+  DeviceOn = 'DeviceOn',
+  DeviceOffAndDisabled = 'DeviceOffAndDisabled',
+}
+
+export enum MediaSettingDisplayMode {
+  Icon = 'Icon',
+  IconWithPanel = 'IconWithPanel',
+  Panel = 'Panel',
+}
+
+export interface VideoSettingProps {
+  displayMode: MediaSettingDisplayMode;
+  supportSwitchCamera?: boolean;
+  supportSwitchResolution?: boolean;
+  supportVideoPreview?: boolean;
+  supportSwitchMirror?: boolean;
+}
+
+export interface AudioSettingProps {
+  displayMode: MediaSettingDisplayMode;
+  supportSwitchMicrophone?: boolean;
+  supportSwitchSpeaker?: boolean;
+  supportAudioLevel?: boolean;
+}

package/src/TUIRoom/core/type/Room.ts

@@ -0,0 +1,11 @@
+export enum RoomState {
+  Idle = 'Idle',
+  Loading = 'Loading',
+  Running = 'Running',
+}
+
+export enum RoomAction {
+  AudioAction = 'RoomAudioAction',
+  VideoAction = 'RoomVideoAction',
+  ScreenAction = 'RoomScreenAction',
+}

package/src/TUIRoom/core/type/User.ts

@@ -0,0 +1,58 @@
+import {
+  TUIRole,
+  TUIInvitationStatus,
+  TUIVideoStreamType,
+} from '@tencentcloud/tuiroom-engine-js';
+
+export interface UserInfo {
+  userId: string;
+  userName: string;
+  avatarUrl: string;
+  nameCard: string;
+  displayName: string;
+  roomCustomInfo: Record<string, any>;
+  userRole: TUIRole;
+  hasAudioStream: boolean;
+  hasVideoStream: boolean;
+  hasScreenStream: boolean;
+  isMessageDisabled: boolean;
+  isOnSeat: boolean;
+  isInRoom: boolean;
+  invitationStatus: TUIInvitationStatus;
+  timestamp: number;
+}
+
+export enum StreamPlayState {
+  Loading = 'Loading',
+  Playing = 'Playing',
+  Stopped = 'Stopped',
+}
+
+export interface StreamInfo {
+  userId: string;
+  streamType: TUIVideoStreamType;
+  streamId: string;
+  hasAudioStream?: boolean;
+  audioVolume?: number;
+  hasVideoStream?: boolean;
+  streamPlayState?: StreamPlayState;
+  streamPlayDomMap?: Map<HTMLElement, TUIVideoStreamType>;
+  timestamp?: number;
+}
+
+export enum UserAction {
+  AudioAction = 'AudioAction',
+  VideoAction = 'VideoAction',
+  ChatAction = 'ChatAction',
+  AdministratorAction = 'AdministratorAction',
+  TransferOwnerAction = 'TransferOwnerAction',
+  KickOutOfRoomAction = 'KickOutOfRoomAction',
+  ChangeUserNameCardAction = 'ChangeUserNameCardAction',
+  SeatAction = 'SeatAction',
+  InviteEnterRoomAction = 'InviteEnterRoomAction',
+
+  InviteOnSeatAction = 'InviteOnSeatAction',
+  AgreeOnSeatAction = 'AgreeOnSeatAction',
+  DenyOnSeatAction = 'DenyOnSeatAction',
+  KickOffSeatAction = 'KickOutSeatAction',
+}

package/src/TUIRoom/core/type/common.ts

@@ -0,0 +1,9 @@
+import { defineComponent, PropType } from 'vue';
+
+export type ActionType<T> = {
+  key: T;
+  icon?: PropType<ReturnType<typeof defineComponent>>;
+  label: string;
+  handler: (data?: any) => void;
+  style?: string;
+};

package/src/TUIRoom/core/type/index.ts

@@ -0,0 +1,5 @@
+export * from './MediaDeviceSetting';
+export * from './User';
+export * from './Room';
+export * from './common';
+export * from './Beauty';

package/src/TUIRoom/directives/vClickOutside.ts

@@ -0,0 +1,30 @@
+const nodeMap = new Map();
+
+const vClickOutside = {
+  mounted(el: HTMLElement, binding: any) {
+    const listenerFunction = (event: any) => {
+      if (el.contains(event.target)) {
+        return;
+      }
+      if (binding.value && typeof binding.value === 'function') {
+        binding.value(event);
+      }
+    };
+    if (!nodeMap.has(el)) {
+      nodeMap.set(el, []);
+    }
+    const nodeCallbackList = nodeMap.get(el);
+    nodeCallbackList.push(listenerFunction);
+    document.addEventListener('click', listenerFunction);
+    document.addEventListener('touchend', listenerFunction);
+  },
+  unmounted(el: HTMLElement) {
+    const nodeCallbackList = nodeMap.get(el);
+    nodeCallbackList.forEach((callback: any) => {
+      document.removeEventListener('click', callback);
+      document.addEventListener('touchend', callback);
+    });
+  },
+};
+
+export default vClickOutside;

package/src/TUIRoom/directives/vDblTouch.ts

@@ -0,0 +1,67 @@
+const touchEventMap = new Map();
+const clickEventMap = new Map();
+
+const TIME_OUT = 300;
+
+class DblTouch {
+  public dom: HTMLElement;
+  public callback: (event?: Event | TouchEvent) => void;
+
+  constructor(el: HTMLElement, binding: any) {
+    this.dom = el;
+    this.callback = binding.value;
+
+    // Compatible iphone 11 chrome browser tap twice trigger once touchend and twice click event problem
+    el?.addEventListener('click', (event: Event) => {
+      if (binding.modifiers.stop) {
+        event.stopPropagation();
+      }
+      this.click(event);
+    });
+
+    el?.addEventListener('touchend', (event: TouchEvent) => {
+      if (binding.modifiers.stop) {
+        event.stopPropagation();
+      }
+      this.touchend(event);
+    });
+  }
+
+  executeCallback(event: Event | TouchEvent) {
+    clickEventMap.delete(this.dom);
+    touchEventMap.delete(this.dom);
+    this.callback && this.callback(event);
+  }
+
+  click(event: Event) {
+    const lastEvent = clickEventMap.get(this.dom);
+    if (lastEvent) {
+      this.executeCallback(event);
+    } else {
+      clickEventMap.set(this.dom, event);
+      setTimeout(() => {
+        clickEventMap.delete(this.dom);
+      }, TIME_OUT);
+    }
+  }
+
+  touchend(event: TouchEvent) {
+    const lastEvent = touchEventMap.get(this.dom);
+    if (lastEvent) {
+      this.executeCallback(event);
+    } else {
+      touchEventMap.set(this.dom, event);
+      setTimeout(() => {
+        touchEventMap.delete(this.dom);
+      }, TIME_OUT);
+    }
+  }
+}
+
+const vDblTouch = {
+  mounted(el: HTMLElement, binding: any) {
+    return new DblTouch(el, binding);
+  },
+};
+
+export default vDblTouch;

package/src/TUIRoom/directives/vTap.ts

@@ -0,0 +1,86 @@
+const eventMap = new Map();
+
+const TIME_OUT = 300;
+
+class VueTouch {
+  public dom: HTMLElement;
+  public callback: (event: TouchEvent) => void;
+  public isMove: boolean;
+  public isInOnceTouch: boolean;
+  public isLazyTap: boolean;
+
+  constructor(el: HTMLElement, binding: any) {
+    this.dom = el;
+    this.callback = binding.value;
+    this.isLazyTap = binding.modifiers.lazy;
+
+    this.isMove = false;
+    this.isInOnceTouch = false;
+
+    el?.addEventListener('touchstart', (event: TouchEvent) => {
+      if (binding.modifiers.stop) {
+        event.stopPropagation();
+      }
+      this.touchstart(event);
+    });
+
+    el?.addEventListener('touchmove', (event: TouchEvent) => {
+      if (binding.modifiers.stop) {
+        event.stopPropagation();
+      }
+      this.touchmove();
+    });
+
+    el?.addEventListener('touchend', (event: TouchEvent) => {
+      if (binding.modifiers.stop) {
+        event.stopPropagation();
+      }
+      this.touchend(event);
+    });
+  }
+
+  touchstart(event: TouchEvent) {
+    if (event.touches.length > 1 || this.isInOnceTouch) {
+      return;
+    }
+    this.isMove = false;
+    this.isInOnceTouch = true;
+  }
+
+  touchmove() {
+    if (!this.isInOnceTouch) {
+      return;
+    }
+    this.isMove = true;
+    this.isInOnceTouch = false;
+  }
+
+  touchend(event: TouchEvent) {
+    if (this.isMove || !this.isInOnceTouch) {
+      return;
+    }
+    this.isInOnceTouch = false;
+    if (this.isLazyTap) {
+      if (eventMap.get(this.dom)) {
+        clearTimeout(eventMap.get(this.dom));
+        eventMap.delete(this.dom);
+        return;
+      }
+      const timer = setTimeout(() => {
+        this.callback(event);
+        eventMap.delete(this.dom);
+      }, TIME_OUT);
+      eventMap.set(this.dom, timer);
+    } else {
+      this.callback(event);
+    }
+  }
+}
+
+const vTap = {
+  mounted(el: HTMLElement, binding: any) {
+    return new VueTouch(el, binding);
+  },
+};
+
+export default vTap;

package/src/TUIRoom/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/TUIRoom/env.d.ts

@@ -0,0 +1,17 @@
+declare module 'rtc-detect' {
+  import RTCDetect from 'rtc-detect';
+  export default RTCDetect;
+}
+
+interface ImportMetaEnv {
+  readonly VITE_YOUR_URL: string;
+  readonly VITE_REALM: string;
+  readonly VITE_CLIENT_ID: string;
+  readonly VITE_RUNTIME_SCENE: string;
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv;
+}
+
+declare const wx: any;