@tencentcloud/roomkit-electron-vue3 2.3.3

package/src/TUIRoom/conference.vue

@@ -0,0 +1,359 @@
+<template>
+  <div v-if="conferenceShow" id="roomContainer" ref="roomRef" :class="tuiRoomClass">
+    <room-header
+      v-show="showRoomTool && showHeaderTool"
+      class="header"
+      @log-out="logOut"
+    ></room-header>
+    <room-content
+      ref="roomContentRef"
+      v-tap="handleRoomContentTap"
+      :show-room-tool="showRoomTool"
+      class="content"
+    ></room-content>
+    <room-footer v-show="showRoomTool" class="footer" />
+    <room-sidebar></room-sidebar>
+    <room-setting></room-setting>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted, Ref, watch, computed, withDefaults, defineProps } from 'vue';
+import RoomHeader from './components/RoomHeader/index/index.vue';
+import RoomFooter from './components/RoomFooter/index/index.vue';
+import RoomSidebar from './components/RoomSidebar/index.vue';
+import RoomContent from './components/RoomContent/index.vue';
+import RoomSetting from './components/RoomSetting/index.vue';
+import { debounce, throttle } from './utils/utils';
+import { useBasicStore } from './stores/basic';
+import { isMobile, isWeChat } from './utils/environment';
+import vTap from './directives/vTap';
+import { TUIKickedOutOfRoomReason } from '@tencentcloud/tuiroom-engine-electron';
+
+import TUIRoomAegis from './utils/aegis';
+import { MESSAGE_DURATION } from './constants/message';
+
+import TUIMessageBox from './components/common/base/MessageBox/index';
+import TUIMessage from './components/common/base/Message/index';
+import { roomService, EventType, RoomParam, RoomInitData } from './services/index';
+import useDeviceManager from './hooks/useDeviceManager';
+
+const props = withDefaults(defineProps<{
+  displayMode: 'permanent' | 'wake-up'
+}>(), {
+  displayMode: 'permanent',
+});
+
+const conferenceShow = computed(() => (props.displayMode === 'permanent' || !!basicStore.roomId));
+
+useDeviceManager({ listenForDeviceChange: true });
+
+const { t } = roomService;
+defineExpose({
+  init,
+  createRoom,
+  enterRoom,
+  dismissRoom,
+  leaveRoom,
+  resetStore,
+  t,
+});
+
+const emit = defineEmits([
+  'on-log-out',
+  'on-create-room',
+  'on-enter-room',
+  'on-exit-room',
+  'on-destroy-room',
+  'on-kicked-out-of-room',
+  'on-kicked-off-line',
+  'on-userSig-expired',
+]);
+
+const basicStore = useBasicStore();
+
+const showMessageBox = (data: {
+  code?: number;
+  message: string;
+  title: string;
+  confirmButtonText: string;
+  callback?: () => void;
+}) => {
+  const {
+    message,
+    title = roomService.t('Note'),
+    confirmButtonText = roomService.t('Sure'),
+    callback = () => { },
+  } = data;
+  TUIMessageBox({
+    title,
+    message,
+    confirmButtonText,
+    callback: async () => {
+      callback && callback();
+    },
+  });
+};
+const showMessage = (data: {
+  type: 'warning' | 'success' | 'error' | 'info';
+  message: string;
+  duration: MESSAGE_DURATION;
+}) => {
+  const { type, message, duration } = data;
+  TUIMessage({
+    type,
+    message,
+    duration,
+  });
+};
+
+onMounted(() => {
+  roomService.on(EventType.ROOM_NOTICE_MESSAGE, showMessage);
+  roomService.on(EventType.ROOM_NOTICE_MESSAGE_BOX, showMessageBox);
+  roomService.on(EventType.KICKED_OUT, onKickedOutOfRoom);
+  roomService.on(EventType.USER_SIG_EXPIRED, onUserSigExpired);
+  roomService.on(EventType.KICKED_OFFLINE, onKickedOffLine);
+  roomService.on(EventType.ROOM_START, onStartRoom);
+  roomService.on(EventType.ROOM_JOIN, onJoinRoom);
+  roomService.on(EventType.ROOM_LEAVE, onLeaveRoom);
+  roomService.on(EventType.ROOM_DISMISS, onDismissRoom);
+  roomService.on(EventType.USER_LOGOUT, onLogout);
+});
+onUnmounted(() => {
+  roomService.off(EventType.ROOM_NOTICE_MESSAGE, showMessage);
+  roomService.off(EventType.ROOM_NOTICE_MESSAGE_BOX, showMessageBox);
+  roomService.off(EventType.KICKED_OUT, onKickedOutOfRoom);
+  roomService.off(EventType.USER_SIG_EXPIRED, onUserSigExpired);
+  roomService.off(EventType.KICKED_OFFLINE, onKickedOffLine);
+  roomService.off(EventType.ROOM_START, onStartRoom);
+  roomService.off(EventType.ROOM_JOIN, onJoinRoom);
+  roomService.off(EventType.ROOM_LEAVE, onLeaveRoom);
+  roomService.off(EventType.ROOM_DISMISS, onDismissRoom);
+  roomService.off(EventType.USER_LOGOUT, onLogout);
+  roomService.resetStore();
+});
+
+const { sdkAppId, showHeaderTool } = roomService.basicStore;
+watch(
+  () => sdkAppId,
+  (val: number) => {
+    if (val) {
+      TUIRoomAegis.setSdkAppId(val);
+      TUIRoomAegis.reportEvent({
+        name: 'loaded',
+        ext1: 'loaded-success',
+      });
+    }
+  },
+);
+const tuiRoomClass = computed(() => {
+  const roomClassList = ['tui-room', `tui-theme-${roomService.basicStore.defaultTheme}`];
+  if (isMobile) {
+    roomClassList.push('tui-room-h5');
+  }
+  if (basicStore.scene === 'chat') {
+    roomClassList.push('chat-room');
+  }
+  return roomClassList;
+});
+
+/**
+ * Handle page mouse hover display toolbar logic
+ *
+ **/
+const roomContentRef = ref<InstanceType<typeof RoomContent>>();
+const showRoomTool: Ref<boolean> = ref(true);
+const roomRef: Ref<Node | undefined> = ref();
+function handleHideRoomTool() {
+  showRoomTool.value = false;
+}
+
+watch(() => roomRef.value, (newValue, oldValue) => {
+  if (!isWeChat && !isMobile) {
+    if (newValue) {
+      addRoomContainerEvent(newValue);
+    } else {
+      oldValue && removeRoomContainerEvent(oldValue);
+    }
+  }
+});
+
+const handleHideRoomToolDebounce = debounce(handleHideRoomTool, 5000);
+const handleHideRoomToolThrottle = throttle(handleHideRoomToolDebounce, 1000);
+const showTool = () => {
+  showRoomTool.value = true;
+  handleHideRoomToolDebounce();
+};
+const showToolThrottle = () => {
+  showRoomTool.value = true;
+  handleHideRoomToolThrottle();
+};
+const hideTool = () => {
+  handleHideRoomTool();
+};
+const addRoomContainerEvent = (container: Node) => {
+  container.addEventListener('mouseenter', showTool);
+  container.addEventListener('click', showTool);
+  container.addEventListener('mousemove', showToolThrottle);
+  container.addEventListener('mouseleave', hideTool);
+};
+const removeRoomContainerEvent = (container: Node) => {
+  container.removeEventListener('mouseenter', showTool);
+  container.removeEventListener('click', showTool);
+  container.removeEventListener('mousemove', showToolThrottle);
+  container.removeEventListener('mouseleave', hideTool);
+};
+
+function handleRoomContentTap() {
+  showRoomTool.value = !showRoomTool.value;
+  if (showRoomTool.value) {
+    handleHideRoomToolDebounce();
+  }
+}
+
+async function dismissRoom() {
+  await roomService.dismissRoom();
+}
+
+async function leaveRoom() {
+  await roomService.leaveRoom();
+}
+
+async function init(option: RoomInitData) {
+  await roomService.initRoomKit(option);
+}
+
+async function createRoom(options: {
+  roomId: string;
+  roomName: string;
+  roomMode: 'FreeToSpeak' | 'SpeakAfterTakingSeat';
+  roomParam?: RoomParam;
+}) {
+  const { roomId, roomName, roomMode, roomParam } = options;
+  roomService.createRoom({
+    roomId,
+    roomName,
+    roomMode,
+    roomParam,
+  });
+}
+
+async function enterRoom(options: { roomId: string; roomParam?: RoomParam }) {
+  await roomService.enterRoom(options);
+}
+
+function resetStore() {
+  roomService.resetStore();
+}
+
+const logOut = () => {
+  roomService.logOut();
+};
+
+const onStartRoom = () => {
+  emit('on-create-room',  { code: 0, message: 'create room' });
+};
+
+const onJoinRoom = () => {
+  emit('on-enter-room',  { code: 0, message: 'enter room' });
+};
+
+
+const onLeaveRoom = () => {
+  emit('on-exit-room',  { code: 0, message: 'exit room' });
+};
+
+const onDismissRoom = () => {
+  emit('on-destroy-room', { code: 0, message: 'destroy room' });
+};
+
+const onLogout = () => {
+  emit('on-log-out', { code: 0, message: 'user logout' });
+};
+
+const onKickedOutOfRoom = async (eventInfo: { roomId: string; reason: TUIKickedOutOfRoomReason; message: string }) => {
+  const { roomId, reason, message } = eventInfo;
+  emit('on-kicked-out-of-room', { roomId, reason, message });
+};
+
+const onUserSigExpired = () => {
+  emit('on-userSig-expired');
+};
+
+const onKickedOffLine = (eventInfo: { message: string }) => {
+  const { message } = eventInfo;
+  emit('on-kicked-off-line', { message });
+};
+</script>
+
+<style lang="scss">
+@import './assets/style/global.scss';
+@import './assets/style/black-theme.scss';
+@import './assets/style/white-theme.scss';
+
+.tui-room :not([class|='el']) {
+  transition: background-color 0.3s, color 0.3s, box-shadow 0.3s;
+}
+</style>
+
+<style lang="scss" scoped>
+.tui-theme-white .tui-room {
+  --header-shadow-color: #e3eaf7;
+  --footer-shadow-color: rgba(197, 210, 229, 0.2);
+}
+
+.tui-theme-black .tui-room {
+  --header-shadow-color: rgba(34, 38, 46, 0.3);
+  --footer-shadow-color: rgba(34, 38, 46, 0.3);
+}
+
+.tui-room {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  color: var(--font-color-1);
+  background-color: var(--background-color-1);
+  display: flex;
+  flex-direction: column;
+  text-align: left;
+
+  .header {
+    width: 100%;
+    height: 64px;
+    background-color: var(--background-color-2);
+    box-shadow: 0px 1px 0px var(--header-shadow-color);
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 100;
+  }
+
+  .content {
+    width: 100%;
+    height: 100%;
+    background-color: var(--background-color-1);
+    position: absolute;
+    top: 0;
+  }
+
+  &.tui-room-h5 {
+    width: 100%;
+    height: 100%;
+  }
+}
+
+#roomContainer {
+  &.chat-room {
+    position: absolute;
+    margin: auto;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: 999;
+    height: 80%;
+    width: 80%;
+    border-radius: 10px;
+  }
+}
+</style>

package/src/TUIRoom/constants/icon.ts

@@ -0,0 +1,30 @@
+export enum ICON_NAME {
+  MicOn = 'mic-on',
+  MicOff = 'mic-off',
+  MicOffDisabled = 'mic-off-gray',
+  CameraOn = 'camera-on',
+  CameraOff = 'camera-off',
+  CameraOffDisabled = 'camera-off-gray',
+  ArrowBorderDown = 'arrow-border-down',
+  ScreenSharing = 'screen-sharing',
+  ScreenShare = 'screen-share',
+  ScreenShareStopped = 'screen-share-stopped',
+  ScreenShareDisabled = 'screen-share-disabled',
+  ChatActive = 'chat-active',
+  Chat = 'chat',
+  ExitFullScreen = 'exit-fullscreen',
+  FullScreen = 'full-screen',
+  InviteActive = 'invite-active',
+  Invite = 'invite',
+  ManageMemberActive = 'manage-member-active',
+  ManageMember = 'manage-member',
+  More = 'more',
+  MoreActive = 'more-active',
+  SettingActive = 'setting-active',
+  Setting = 'setting',
+  LineArrowUp = 'line-arrow-up',
+  LineArrowDown = 'line-arrow-down',
+  ApplyOnSeat = 'apply',
+  ApplyActive = 'apply-active',
+  GoOffSeat = 'go-off-seat',
+}

package/src/TUIRoom/constants/message.ts

@@ -0,0 +1,13 @@
+export enum WARNING_MESSAGE {
+  UNMUTE_LOCAL_MIC_FAIL_MUTE_ALL = 'Has been fully muted and cannot open the microphone',
+  UNMUTE_LOCAL_MIC_FAIL_MUTE_BY_MASTER = 'Has been muted by the host and cannot open the microphone',
+  UNMUTE_LOCAL_MIC_FAIL_AUDIENCE = 'To apply to speak in the room, please raise your hand first to apply for the microphone',
+  UNMUTE_LOCAL_CAMERA_FAIL_MUTE_ALL = 'Has been full static painting, can not open the video',
+  UNMUTE_LOCAL_CAMERA_FAIL_MUTE_BY_MASTER = 'It has been stilled by the host and cannot open the video',
+  UNMUTE_LOCAL_CAMERA_FAIL_AUDIENCE = 'To apply to speak in the room, please raise your hand first to apply for the microphone',
+};
+
+export enum MESSAGE_DURATION {
+  NORMAL = 3000,
+  LONG = 5000
+};

package/src/TUIRoom/constants/render.ts

@@ -0,0 +1,15 @@
+
+export enum LAYOUT {
+  SIX_EQUAL_POINTS = 'six_equal_points',
+  NINE_EQUAL_POINTS = 'nine_equal_points',
+  TWENTY_FIVE_EQUAL_POINTS = 'twenty_five_equal_points',
+  RIGHT_SIDE_LIST = 'right_side_list',
+  TOP_SIDE_LIST = 'top_side_list',
+  LARGE_SMALL_WINDOW = 'large_small_window',
+  GRID_VIEW= 'grid_view',
+};
+
+export enum SettingMode {
+  SIMPLE = 'simple',
+  DETAIL = 'detail',
+}

package/src/TUIRoom/constants/room.ts

@@ -0,0 +1,24 @@
+import { TRTCVideoResolution } from '@tencentcloud/tuiroom-engine-electron';
+
+export enum SpeechMode {
+  FREE_SPEECH = 'FreeSpeech',
+  APPLY_SPEECH = 'ApplySpeech',
+}
+
+export enum IconButtonLayout {
+  VERTICAl = 'vertical',
+  HORIZONTAL = 'horizontal',
+}
+
+export enum MediaDeviceState {
+  OPEN = 'OPEN',
+  CLOSE = 'CLOSE',
+  DISABLED = 'DISABLED',
+  UNAVAILABLE = 'UNAVAILABLE',
+}
+
+export const SMALL_VIDEO_ENC_PARAM = {
+  videoResolution: TRTCVideoResolution.TRTCVideoResolution_640_360,
+  videoFps: 15,
+  videoBitrate: 800,
+};

package/src/TUIRoom/directives/vClickOutside.ts

@@ -0,0 +1,29 @@
+
+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);
+  },
+  unmounted(el: HTMLElement) {
+    const nodeCallbackList = nodeMap.get(el);
+    nodeCallbackList.forEach((callback: any) => {
+      document.removeEventListener('click', callback);
+    });
+  },
+};
+
+export default vClickOutside;

package/src/TUIRoom/directives/vTap.ts

@@ -0,0 +1,47 @@
+
+class VueTouch {
+  public dom: HTMLElement;
+  public callback: Function;
+  public isMove: boolean;
+
+  constructor(el: HTMLElement, binding: any) {
+    this.dom = el;
+    this.callback = binding.value;
+
+    this.isMove = false;
+
+    el?.addEventListener('touchstart', () => {
+      this.touchstart();
+    });
+
+    el?.addEventListener('touchmove', () => {
+      this.touchmove();
+    });
+
+    el?.addEventListener('touchend', (event: TouchEvent) => {
+      this.touchend(event);
+    });
+  }
+
+  touchstart() {
+    this.isMove = false;
+  }
+
+  touchmove() {
+    this.isMove = true;
+  }
+
+  touchend(event?: TouchEvent) {
+    if (!this.isMove) {
+      this.callback(event);
+    }
+  }
+}
+
+const vTap = {
+  mounted(el: HTMLElement, binding: any) {
+    return new VueTouch(el, binding);
+  },
+};
+
+export default vTap;

package/src/TUIRoom/extension/RoomMessageCard/RoomMessageCard.vue

@@ -0,0 +1,178 @@
+<template>
+  <div
+    v-if="roomCardData.isRoomMessage"
+    :class="['room-message-container', roomCardData.isMessageFromMe ? 'isMe' : 'notMe']"
+  >
+    <div :class="['room-message-card-container', roomCardData.roomState]">
+      <div class="content">
+        <div :class="['content-title', contentTitleClass]">
+          <span class="icon"></span>
+          <p v-if="RoomState.CREATED === roomCardData.roomState">{{ t('Meeting in progress') }}</p>
+          <p v-else>{{ t('Meeting') }}</p>
+        </div>
+        <div class="content-desc">
+          <div class="title">
+            {{ `${roomCardData.ownerName || roomCardData.owner}${t('Quick Meeting')}` }}
+          </div>
+          <ul class="users">
+            <template
+              v-for="(user, index) in roomCardData.userList"
+              :key="user.userId"
+            >
+              <li v-if="index <= 4">
+                <img
+                  :src="user.faceUrl || defaultAvatarUrl"
+                  :alt="user.nickName || user.userId" :onerror="avatarLoadError"
+                />
+              </li>
+              <li v-if="index === 5" class="more">
+                ...
+              </li>
+            </template>
+          </ul>
+        </div>
+      </div>
+      <div :class="['footer', footerClass, roomCardData.isInnerRoom && 'in-room']">
+        <span v-if="roomInfo.visible" class="room-info">{{ roomInfo.message }}</span>
+        <span v-if="roomStatus.visible" :class="['room-status']" @click="enterRoom">{{ roomStatus.message }}</span>
+        <span v-if="roomDestroy.visible" :class="['room-info', 'center']">{{ roomDestroy.message }}</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineProps, computed, watchEffect, ref } from 'vue';
+import { chatExtension, RoomState, MessageData } from '../chatExtension';
+import { HandleRoomMessage } from './handleRoomMessage';
+import { Message, Profile } from '@tencentcloud/chat';
+import { useI18n } from '../../locales/index';
+const { t } = useI18n();
+const props = defineProps<{
+  message: Message
+}>();
+const roomCardData = ref<MessageData>({
+  roomId: '',
+  isRoomMessage: false,
+  isRoomCreateByMe: false,
+  isMessageFromMe: false,
+  roomState: RoomState.CREATING,
+  userList: [],
+  isInnerRoom: false,
+  myProfile: {} as Profile,
+  ownerName: '',
+  owner: '',
+});
+const roomMessageCard = new HandleRoomMessage();
+watchEffect(() => {
+  roomMessageCard.initialize(props.message);
+  const {
+    isRoomMessage,
+    isRoomCreateByMe,
+    roomState, userList,
+    roomId,
+    isInnerRoom,
+    myProfile,
+    isMessageFromMe,
+    ownerName,
+    owner,
+  } = roomMessageCard.messageData;
+  roomCardData.value = {
+    roomId,
+    isRoomMessage,
+    isRoomCreateByMe,
+    isMessageFromMe,
+    roomState,
+    userList,
+    isInnerRoom,
+    myProfile,
+    ownerName,
+    owner,
+  };
+});
+const avatarLoadError = (e: any) => {
+  e.target.src = defaultAvatarUrl;
+};
+const contentTitleClass = computed(() => {
+  const stateMap = {
+    [RoomState.CREATED]: 'success',
+    [RoomState.CREATING]: 'primary',
+    [RoomState.DESTROYING]: 'default',
+    [RoomState.DESTROYED]: 'default',
+  };
+  return stateMap[roomCardData.value.roomState];
+});
+const footerClass = computed(() => {
+  const stateMap = {
+    [RoomState.CREATED]: 'default',
+    [RoomState.CREATING]: 'center',
+    [RoomState.DESTROYING]: 'center',
+    [RoomState.DESTROYED]: 'center',
+  };
+  return stateMap[roomCardData.value.roomState];
+});
+const roomInfo = computed(() => {
+  if (roomCardData.value.roomState === RoomState.CREATING) {
+    return {
+      visible: true,
+      message: `${t('Initiating')}...`,
+    };
+  }
+  if (roomCardData.value.isRoomCreateByMe && roomCardData.value.roomState === RoomState.CREATED) {
+    return {
+      visible: true,
+      message: roomCardData.value.userList.length > 1
+        ? t('X people have joined', { number: roomCardData.value.userList.length - 1 })
+        : t('Waiting for members to join the meeting'),
+    };
+  }
+  if (!roomCardData.value.isRoomCreateByMe && roomCardData.value.roomState === RoomState.CREATED) {
+    return {
+      visible: true,
+      message: t('X people are in the meeting', { number: roomCardData.value.userList.length }),
+    };
+  }
+  return {
+    visible: false,
+    message: '',
+  };
+});
+const roomStatus = computed(() => {
+  if (roomCardData.value.roomState === RoomState.CREATED) {
+    return {
+      visible: true,
+      message: roomCardData.value.isInnerRoom ? t('Already joined') : t('Enter the meeting'),
+    };
+  }
+  return {
+    visible: false,
+    message: '',
+  };
+});
+const roomDestroy = computed(() => {
+  if (roomCardData.value.roomState === RoomState.DESTROYING) {
+    return {
+      visible: true,
+      message: `${t('Ending meeting')}...`,
+    };
+  }
+  if (roomCardData.value.roomState === RoomState.DESTROYED) {
+    return {
+      visible: true,
+      message: t('The meeting has ended'),
+    };
+  }
+  return {
+    visible: false,
+    message: '',
+  };
+});
+const defaultAvatarUrl = 'https://web.sdk.qcloud.com/component/TUIKit/assets/avatar_21.png';
+const enterRoom = () => {
+  chatExtension.enterRoom(roomCardData.value.roomId, props.message);
+};
+</script>
+
+<style lang="scss" scoped>
+@import './roomMessageCard.scss';
+</style>