@tencentcloud/roomkit-electron-vue3 2.4.2 → 2.6.0

package/src/TUIRoom/components/RoomInvite/InvitationNotification.vue

@@ -0,0 +1,247 @@
+<template>
+  <div v-if="showInvitation" class="invitation-notification-container">
+    <div class="invitation-notification-inviter-container">
+      <div class="invitation-notification-inviter">
+        <Avatar class="avatar" :img-src="invitationInfo.avatarUrl" />
+        <span class="invitation-notification-title">{{
+          t('sb invites you to join the conference', {
+            name: invitationInfo.userName || invitationInfo.userId,
+          })
+        }}</span>
+      </div>
+      <span class="invitation-notification-room-name">{{
+        invitationInfo.roomName
+      }}</span>
+      <div class="invitation-notification-room-info-container">
+        <div class="invitation-notification-room-text-container">
+          <span class="invitation-notification-room-text">
+            {{ t('Host') }}:
+          </span>
+          <span class="invitation-notification-room-text">
+            {{ invitationInfo.roomOwner }}
+          </span>
+        </div>
+        <i class="invitation-notification-room-text-split"></i>
+        <div>
+          <span class="invitation-notification-room-text">
+            {{ t('Attendees') }}:
+          </span>
+          <span class="invitation-notification-room-text">
+            {{ `${invitationInfo.roomMemberCount} ${t('people')}` }}
+          </span>
+        </div>
+      </div>
+    </div>
+    <i class="invitation-notification-bottom-split"></i>
+    <div class="invitation-notification-bottom-container">
+      <span
+        class="invitation-notification-bottom"
+        @click="handleRejectInvitation"
+        >{{ t('Not joining for now') }}
+      </span>
+      <tui-button
+        class="button-item"
+        style="width: 110px"
+        @click="handleEnterRoom"
+      >
+        <svg-icon class="icon" :icon="EnterRoomIcon" />
+        <span class="button-text">{{ t('Enter Now') }}</span>
+      </tui-button>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted, defineEmits } from 'vue';
+import Avatar from '../common/Avatar.vue';
+import { useI18n } from '../../locales';
+import EnterRoomIcon from '../common/icons/EnterRoomIcon.vue';
+import SvgIcon from '../common/base/SvgIcon.vue';
+import TuiButton from '../common/base/Button.vue';
+import {
+  TUIConferenceInvitationManagerEvents,
+  TUIInvitation,
+  TUIInvitationRejectedReason,
+  TUIRoomInfo,
+} from '@tencentcloud/tuiroom-engine-electron';
+import { roomService } from '../../services/index';
+import { isMobile } from '../../utils/environment';
+const invitationInfo = ref({
+  userId: '',
+  userName: '',
+  avatarUrl: '',
+  roomName: '',
+  roomMemberCount: 0,
+  roomOwner: '',
+  roomId: '',
+});
+const { t } = useI18n();
+const showInvitation = ref(false);
+
+const emits = defineEmits(['join-conference']);
+
+const onReceiveInvitation = (data: {
+  roomInfo: TUIRoomInfo;
+  invitation: TUIInvitation;
+  extensionInfo: string;
+}) => {
+  const { roomInfo, invitation } = data;
+  invitationInfo.value.userId = invitation.inviter.userId;
+  invitationInfo.value.userName = invitation.inviter.userName;
+  invitationInfo.value.avatarUrl = invitation.inviter.avatarUrl;
+  invitationInfo.value.roomName = roomInfo.roomName;
+  invitationInfo.value.roomMemberCount = roomInfo.roomMemberCount;
+  invitationInfo.value.roomOwner = roomInfo.roomOwner;
+  invitationInfo.value.roomId = roomInfo.roomId;
+  setInvitationDisplay(true);
+};
+
+const handleEnterRoom = () => {
+  const { roomId } = invitationInfo.value;
+  roomService.conferenceInvitationManager.accept({ roomId });
+  setInvitationDisplay(false);
+  emits('join-conference', {
+    roomId,
+    roomParam: {
+      isOpenCamera: false,
+      isOpenMicrophone: true,
+    },
+  });
+};
+
+const handleRejectInvitation = () => {
+  const { roomId } = invitationInfo.value;
+  roomService.conferenceInvitationManager.reject({
+    roomId,
+    reason: TUIInvitationRejectedReason.kRejectToEnter,
+  });
+  setInvitationDisplay(false);
+};
+
+const onInvitationTimeout = () => {
+  setInvitationDisplay(false);
+};
+
+const setInvitationDisplay = (options: boolean) => {
+  if (isMobile) {
+    return;
+  }
+  showInvitation.value = options;
+};
+
+onMounted(() => {
+  roomService.conferenceInvitationManager.on(
+    TUIConferenceInvitationManagerEvents.onReceiveInvitation,
+    onReceiveInvitation
+  );
+  roomService.conferenceInvitationManager.on(
+    TUIConferenceInvitationManagerEvents.onInvitationTimeout,
+    onInvitationTimeout
+  );
+});
+onUnmounted(() => {
+  roomService.conferenceInvitationManager.off(
+    TUIConferenceInvitationManagerEvents.onReceiveInvitation,
+    onReceiveInvitation
+  );
+  roomService.conferenceInvitationManager.off(
+    TUIConferenceInvitationManagerEvents.onInvitationTimeout,
+    onInvitationTimeout
+  );
+});
+</script>
+<style scoped lang="scss">
+.invitation-notification-container {
+  position: fixed;
+  top: 40px;
+  right: 20px;
+  padding: 20px 30px 10px 20px;
+  background-color: var(--white-color);
+  border-radius: 15px;
+
+  .invitation-notification-inviter {
+    display: flex;
+    align-items: center;
+
+    .invitation-notification-title {
+      overflow: hidden;
+      font-size: 14px;
+      font-weight: 400;
+      color: var(--font-color-4);
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    .avatar {
+      width: 30px;
+      height: 30px;
+      margin-right: 5px;
+    }
+  }
+
+  .invitation-notification-room-info-container {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    .invitation-notification-room-text {
+      max-width: 20px;
+      overflow: hidden;
+      font-size: 14px;
+      font-weight: 400;
+      color: rgba(79, 88, 107, 1);
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+  }
+
+  .invitation-notification-room-text-split {
+    display: block;
+    width: 1px;
+    height: 14px;
+    background-color: rgba(0, 0, 0, 0.1);
+  }
+
+  .invitation-notification-bottom-split {
+    display: block;
+    width: 100%;
+    height: 1px;
+    margin-top: 15px;
+    background-color: rgba(0, 0, 0, 0.1);
+  }
+
+  .invitation-notification-bottom-container {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-top: 10px;
+
+    .invitation-notification-bottom {
+      font-size: 14px;
+      font-weight: 500;
+      color: rgba(143, 154, 178, 1);
+      cursor: pointer;
+    }
+  }
+
+  .icon {
+    width: 16px;
+    height: 16px;
+  }
+
+  .invitation-notification-room-name {
+    display: block;
+    max-width: 300px;
+    padding: 5px 0;
+    overflow: hidden;
+    font-size: 20px;
+    font-weight: 500;
+    color: rgba(34, 38, 46, 1);
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .button-text {
+    padding-left: 5px;
+  }
+}
+</style>

package/src/TUIRoom/components/RoomInvite/index.vue

@@ -1,77 +1,170 @@
 <template>
   <div class="invite-container">
     <div
-      v-for="item in visibleInviteContentList"
-      :key="item.id"
+      v-for="(item, index) in invitationFeatureDetails"
+      :key="index"
       class="invite-item"
+      @click="item.function()"
     >
-      <div class="invite-title">{{ t(item.pcTitle) }}</div>
-      <div class="invite-content">{{ item.content }}</div>
-      <svg-icon class="copy-icon" @click="onCopy(item.copyLink)">
-        <copy-icon></copy-icon>
-      </svg-icon>
+      <svg-icon class="icon" :icon="item.icon" />
+      <span class="invite-title">{{ t(item.text) }}</span>
     </div>
+    <Contacts
+      :visible="showContacts"
+      :contacts="contacts"
+      :disabled-list="remoteEnteredUserList"
+      @input="showContacts = $event"
+      @confirm="contactsConfirm"
+    />
+    <Dialog
+      v-model="showRoomInvite"
+      :title="
+        t('sb invites you to join the conference', { name: userName || userId })
+      "
+      :modal="true"
+      :show-close="true"
+      :close-on-click-modal="true"
+      width="540px"
+      :append-to-body="true"
+      :title-icon="SuccessIcon"
+    >
+      <div class="invite-member">
+        <div
+          v-for="item in conferenceInviteList"
+          :key="item.title"
+          v-show="item.isVisible"
+        >
+          <div class="invite-member-container">
+            <span class="invite-member-title">{{ t(item.title) }}</span>
+            <span class="invite-member-content" :title="item.content">
+              {{ item.content }}
+            </span>
+            <svg-icon
+              class="copy"
+              :icon="copyIcon"
+              v-if="item.isShowCopyIcon"
+              @click="onCopy(item.content)"
+            />
+          </div>
+        </div>
+      </div>
+      <template #footer>
+        <span>
+          <tui-button
+            class="dialog-button"
+            size="default"
+            @click="copyRoomIdAndRoomLink()"
+            >{{ t('Copy the conference number and link') }}
+          </tui-button>
+        </span>
+      </template>
+    </Dialog>
   </div>
 </template>
 
 <script setup lang="ts">
 import useRoomInviteControl from './useRoomInviteHooks';
 import SvgIcon from '../common/base/SvgIcon.vue';
-import CopyIcon from '../common/icons/CopyIcon.vue';
-
-const { t, visibleInviteContentList, onCopy } = useRoomInviteControl();
+import TuiButton from '../common/base/Button.vue';
+import Contacts from '../ScheduleConference/Contacts.vue';
+import SuccessIcon from '../common/icons/SuccessIcon.vue';
+import copyIcon from '../common/icons/CopyIcon.vue';
+import Dialog from '../common/base/Dialog/index.vue';
+const {
+  t,
+  invitationFeatureDetails,
+  showContacts,
+  contactsConfirm,
+  contacts,
+  remoteEnteredUserList,
+  showRoomInvite,
+  userId,
+  userName,
+  conferenceInviteList,
+  onCopy,
+  copyRoomIdAndRoomLink,
+} = useRoomInviteControl();
 </script>
 
 <style lang="scss" scoped>
 .invite-container {
-  padding: 20px;
+  position: absolute;
+  right: -25px;
+  bottom: 72px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 100px;
+  padding: 5px 10px;
+  background-color: var(--background-color-2);
+  border-radius: 15px;
+  box-shadow: 0 -8px 30px var(--footer-shadow-color);
+
   .invite-item {
     display: flex;
-    flex-direction: column;
-    position: relative;
-    &:not(:first-child) {
-      margin-top: 20px;
+    align-items: center;
+    margin-top: 5px;
+    cursor: pointer;
+
+    .icon {
+      width: 16px;
+      height: 16px;
     }
+
     .invite-title {
-      font-size: 14px;
+      padding-left: 5px;
+      font-family: 'PingFang SC';
+      font-size: 12px;
       font-weight: 400;
-      line-height: 22px;
-      color: var(--font-color-5);
-      width: 100%;
-      padding-bottom: 8px;
+      line-height: 20px;
+      text-align: left;
     }
+  }
+}
 
-    .invite-content {
-      flex: 1;
-      background-color: var(--background-color-7);
-      border-radius: 8px;
-      border: 1px solid var(--border-color);
-      box-sizing: border-box;
-      color: var(--font-color-6);
-      display: inline-block;
-      font-size: 14px;
-      height: 42px;
-      font-weight: 500;
-      line-height: 22px;
-      outline: none;
-      padding: 10px 30px 10px 16px;
-      transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
+.invite-member {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  margin-top: 10px;
+
+  .invite-member-container {
+    display: flex;
+    align-items: stretch;
+    min-width: 400px;
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 20px;
+    color: #4f586b;
+
+    .invite-member-title {
+      flex-basis: 18%;
+    }
+
+    .invite-member-content {
+      max-width: 360px;
       overflow: hidden;
+      font-weight: 500;
       text-overflow: ellipsis;
       white-space: nowrap;
-      position: relative;
     }
-    .copy-icon {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      width: 32px;
-      height: 32px;
+
+    .copy {
+      width: 20px;
+      height: 20px;
+      margin-left: 8px;
+      color: var(--active-color-1);
       cursor: pointer;
-      position: absolute;
-      top: 36px;
-      right: 0;
     }
   }
 }
+
+.tui-theme-black .invite-container {
+  --hover-bg-color: rgba(79, 88, 107, 0.2);
+}
+
+.tui-theme-white .invite-container {
+  --hover-bg-color: rgba(213, 224, 242, 0.3);
+}
 </style>

package/src/TUIRoom/components/RoomInvite/useRoomInviteHooks.ts

@@ -1,20 +1,39 @@
 import { computed, ref } from 'vue';
 import { useBasicStore } from '../../stores/basic';
+import { useRoomStore } from '../../stores/room';
 import TUIMessage from '../common/base/Message/index';
 import { storeToRefs } from 'pinia';
 import { useI18n } from '../../locales';
-import { clipBoard } from '../../utils/utils';
+import { clipBoard, getUrlWithRoomId } from '../../utils/utils';
 import { isElectron } from '../../utils/environment';
-
+import InviteIcon from '../common/icons/InviteIcon.vue';
+import ShareIcon from '../common/icons/ShareIcon.vue';
+import { roomService, TUIUserInfo } from '../../services';
+import { MESSAGE_DURATION } from '../../constants/message';
 export default function useRoomInvite() {
   const { t } = useI18n();
 
   const basicStore = useBasicStore();
-  const { roomId, shareLink, isRoomLinkVisible, isSchemeLinkVisible } = storeToRefs(basicStore);
+  const roomLinkConfig = roomService.getComponentConfig('RoomLink');
+  const roomStore = useRoomStore();
+  const { remoteEnteredUserList, roomName, isSeatEnabled, password } =
+    storeToRefs(roomStore);
+  const {
+    roomId,
+    shareLink,
+    isRoomLinkVisible,
+    isSchemeLinkVisible,
+    userId,
+    userName,
+  } = storeToRefs(basicStore);
 
   const { origin, pathname } = location || {};
   const isShowLink = ref(true);
 
+  const showContacts = ref(false);
+
+  const showRoomInvite = ref(false);
+
   const inviteLink = computed(() => {
     if (shareLink.value) {
       const urlConcatenation = shareLink.value.indexOf('?') !== -1 ? '&' : '?';
@@ -22,10 +41,42 @@ export default function useRoomInvite() {
     }
     return `${origin}${pathname}#/home?roomId=${roomId.value}`;
   });
-  const schemeLink = computed(() => `tuiroom://joinroom?roomId=${roomId.value}`);
+  const schemeLink = computed(
+    () => `tuiroom://joinroom?roomId=${roomId.value}`
+  );
 
-  const inviteBarTitle = computed(() => (isRoomLinkVisible.value ? t('You can share the room number or link to invite more people to join the room.') : t('You can share the room number to invite more people to join the room')));
+  const inviteBarTitle = computed(() =>
+    isRoomLinkVisible.value
+      ? t(
+          'You can share the room number or link to invite more people to join the room.'
+        )
+      : t(
+          'You can share the room number to invite more people to join the room'
+        )
+  );
 
+  const isShowPassword = computed(() => !!password?.value);
+
+  const invitationFeatureDetails = ref([
+    {
+      icon: InviteIcon,
+      text: 'addMember',
+      function: async () => {
+        contacts.value =
+          await roomService.scheduleConferenceManager.fetchFriendList();
+        showContacts.value = true;
+      },
+    },
+    {
+      icon: ShareIcon,
+      text: 'shareRoom',
+      function: () => {
+        showRoomInvite.value = true;
+      },
+    },
+  ]);
+
+  const contacts = ref([]);
 
   async function onCopy(value: string | number) {
     try {
@@ -43,12 +94,101 @@ export default function useRoomInvite() {
   }
 
   const inviteContentList = computed(() => [
-    { id: 1, mobileTitle: 'Room ID', pcTitle: 'Invite by room number', content: roomId.value, copyLink: roomId.value, visible: isShowLink.value },
-    { id: 2, mobileTitle: 'Room Link', pcTitle: 'Invite via room link', content: inviteLink.value, copyLink: inviteLink.value, visible: isRoomLinkVisible.value },
-    { id: 3, mobileTitle: 'scheme', pcTitle: 'Invite via client scheme', content: schemeLink.value, copyLink: schemeLink.value, visible: isSchemeLinkVisible.value },
+    {
+      id: 1,
+      mobileTitle: 'Room ID',
+      pcTitle: 'Invite by room number',
+      content: roomId.value,
+      copyLink: roomId.value,
+      visible: isShowLink.value,
+    },
+    {
+      id: 2,
+      mobileTitle: 'Room Link',
+      pcTitle: 'Invite via room link',
+      content: inviteLink.value,
+      copyLink: inviteLink.value,
+      visible: isRoomLinkVisible.value,
+    },
+    {
+      id: 3,
+      mobileTitle: 'scheme',
+      pcTitle: 'Invite via client scheme',
+      content: schemeLink.value,
+      copyLink: schemeLink.value,
+      visible: isSchemeLinkVisible.value,
+    },
+  ]);
+
+  const visibleInviteContentList = computed(() =>
+    inviteContentList.value.filter(item => item.visible)
+  );
+
+  const conferenceInviteList = computed(() => [
+    {
+      title: 'Room Name',
+      content: roomName.value,
+      isShowCopyIcon: false,
+      isVisible: true,
+    },
+    {
+      title: 'Room Type',
+      content: `${t(getSeatModeDisplay(isSeatEnabled.value))}`,
+      isShowCopyIcon: false,
+      isVisible: true,
+    },
+    {
+      title: 'Room ID',
+      content: roomId.value,
+      isShowCopyIcon: true,
+      isVisible: true,
+    },
+    {
+      title: 'Room Password',
+      content: password?.value,
+      isShowCopyIcon: true,
+      isVisible: isShowPassword.value,
+    },
+    {
+      title: 'Room Link',
+      content: getUrlWithRoomId(roomId.value),
+      isShowCopyIcon: true,
+      isVisible: isRoomLinkVisible.value && roomLinkConfig.visible,
+    },
   ]);
 
-  const visibleInviteContentList = computed(() => inviteContentList.value.filter(item => item.visible));
+  function getSeatModeDisplay(isSeatEnabled: boolean) {
+    return isSeatEnabled ? 'On-stage Speaking Room' : 'Free Speech Room';
+  }
+
+  function copyRoomIdAndRoomLink() {
+    const invitationList = [
+      roomName.value,
+      `${t('Room Type')}: ${t(getSeatModeDisplay(isSeatEnabled.value))}`,
+      `${t('Room ID')}: ${roomId.value}`,
+    ];
+    if (isShowPassword.value) {
+      invitationList.push(`${t('Room Password')}: ${password?.value}`);
+    }
+    if (isRoomLinkVisible.value && roomLinkConfig.visible) {
+      invitationList.push(
+        `${t('Room Link')}: ${getUrlWithRoomId(roomId.value)}`
+      );
+    }
+    const invitation = invitationList.join('\n');
+    onCopy(invitation);
+    showRoomInvite.value = false;
+  }
+
+  const contactsConfirm = async (contacts: TUIUserInfo[]) => {
+    const userIdList = contacts.map(contacts => contacts.userId);
+    await roomService.conferenceInvitationManager.inviteUsers({ userIdList });
+    TUIMessage({
+      type: 'success',
+      message: t('Invitation sent, waiting for members to join.'),
+      duration: MESSAGE_DURATION.NORMAL,
+    });
+  };
 
   return {
     t,
@@ -62,5 +202,15 @@ export default function useRoomInvite() {
     inviteBarTitle,
     onCopy,
     visibleInviteContentList,
+    invitationFeatureDetails,
+    showContacts,
+    contactsConfirm,
+    contacts,
+    remoteEnteredUserList,
+    showRoomInvite,
+    userId,
+    userName,
+    conferenceInviteList,
+    copyRoomIdAndRoomLink,
   };
 }