@tencentcloud/roomkit-electron-vue3 2.4.1 → 2.5.0

package/src/TUIRoom/components/ScheduleConference/ScheduleConferencePanel.vue

@@ -0,0 +1,731 @@
+<template>
+  <TuiDialog
+    v-model="isDialogVisible"
+    :title="t(!isEditMode ? t('Schedule') : t('Modify Room'))"
+    :modal="true"
+    :append-to-body="true"
+  >
+    <div class="schedule-conference-form">
+      <div class="form-item">
+        <span class="form-label">{{ t('Room Name') }}</span>
+        <TuiInput
+          v-model="form.roomName"
+          theme="white"
+          class="form-value"
+          :placeholder="t('please enter the room name')"
+          maxlength=""
+        ></TuiInput>
+      </div>
+      <div v-if="!isEditMode" class="form-item">
+        <span class="form-label">{{ t('Room type') }}</span>
+        <div class="form-value">
+          <tui-select
+            v-model="form.roomMode"
+            theme="white"
+            class="select"
+            :teleported="false"
+            :popper-append-to-body="false"
+            :custom-select-content-style="{ 'font-weight': 400 }"
+          >
+            <tui-option
+              v-for="item in roomTypeList"
+              :key="item.value" theme="white"
+              :value="item.value"
+              :label="t(item.label)"
+              :custom-option-content-style="{ 'font-weight': 400 }"
+            />
+          </tui-select>
+        </div>
+      </div>
+      <div class="form-item">
+        <span class="form-label">{{ t('Starting time') }}</span>
+        <div class="form-value">
+          <TuiDatepicker
+            :model-value="form.startDate"
+            class="date-picker"
+            @input="form.startDate = $event"
+          ></TuiDatepicker>
+          <TuiTimepicker
+            :model-value="form.startTime"
+            class="time-picker"
+            @input="form.startTime = $event"
+          ></TuiTimepicker>
+        </div>
+      </div>
+      <div class="form-item">
+        <span class="form-label">{{ t('Room duration') }}</span>
+        <div class="form-value">
+          <TuiDurationTimePicker
+            :model-value="form.duration"
+            class="select"
+            @input="form.duration = $event"
+          ></TuiDurationTimePicker>
+        </div>
+      </div>
+      <div class="form-item">
+        <span class="form-label">{{ t('Time zone') }}</span>
+        <div class="form-value">
+          <TimezonePicker
+            :model-value="form.timezone"
+            class="select"
+            @input="form.timezone = $event"
+          ></TimezonePicker>
+        </div>
+      </div>
+      <div class="form-item column">
+        <span class="form-label">{{ t('Attendees') }}</span>
+        <div class="form-value">
+          <TuiInput
+            v-model="form.searchUser"
+            class="form-input search-user" :search="searchScheduleAttend" :select="addSelectUser"
+            :placeholder="t('Please enter the member name')"
+          >
+            <template #suffixIcon>
+              <ScheduleAttendees class="select-attendees" @click="selectScheduleAttends" />
+              <Contacts
+                :visible="contactsVisible"
+                :contacts="contacts"
+                :selected-list="scheduleParams.scheduleAttendees"
+                @input="contactsVisible = $event"
+                @confirm="contactsConfirm"
+              ></Contacts>
+            </template>
+            <template #searchResultItem="{ data }">
+              <TuiAvatar class="form-attendees-item-avatar" :img-src="data.profile.avatar"></TuiAvatar>
+              <p class="form-attendees-item-name" :title="data.profile.nick">{{ data.profile.nick }}</p>
+            </template>
+          </TuiInput>
+          <div class="form-attendees">
+            <span v-for="user in form.scheduleAttendees" :key="user.userId" class="form-attendees-item">
+              <TuiAvatar class="form-attendees-item-avatar" :img-src="user.avatarUrl"></TuiAvatar>
+              <p class="form-attendees-item-name" :title="user.userName">{{ user.userName }}</p>
+              <CloseIcon class="form-attendees-item-remove" @click="removeSelectUser(user)"></CloseIcon>
+            </span>
+            <span v-if="form.scheduleAttendees?.length > 0" class="form-attendees-item" style="flex-basis: content;">
+              {{ `${form.scheduleAttendees.length} ${t('people')}` }}
+            </span>
+          </div>
+        </div>
+      </div>
+      <div v-if="!isEditMode" class="form-item column">
+        <span class="form-label">{{ t('Member management') }}</span>
+        <div class="form-value">
+          <div class="checkbox-group">
+            <TuiCheckbox
+              :model-value="form.isMicrophoneDisableForAllUser"
+              class="checkbox-group-item"
+              @input="form.isMicrophoneDisableForAllUser = $event"
+            >
+              <span>{{ t('Disable all audios') }}</span>
+            </TuiCheckbox>
+            <TuiCheckbox
+              :model-value="form.isCameraDisableForAllUser"
+              class="checkbox-group-item"
+              @input="form.isCameraDisableForAllUser = $event"
+            >
+              {{ t('Disable all videos') }}
+            </TuiCheckbox>
+          </div>
+        </div>
+      </div>
+    </div>
+    <template #footer>
+      <div class="schedule-conference-footer">
+        <TuiButton class="footer-button" type="primary" @click="cancel">{{ t('Cancel') }}</TuiButton>
+        <TuiButton
+          v-if="!isEditMode"
+          class="footer-button" @click="scheduleConference"
+        >
+          {{ t('Schedule') }}
+        </TuiButton>
+        <TuiButton v-else class="footer-button" @click="updateConferenceInfo">{{ t('Save') }}</TuiButton>
+      </div>
+    </template>
+  </TuiDialog>
+  <TuiShareLink
+    :visible="showRoomInvite"
+    :schedule-params="shareLinkData"
+    @input="showRoomInvite = $event"
+  ></TuiShareLink>
+</template>
+
+<script setup lang="ts">
+import { ref, defineProps, defineEmits, watch, computed, nextTick } from 'vue';
+import { useI18n } from '../../locales';
+import TuiDialog from '../common/base/Dialog/index.vue';
+import TuiInput from '../common/base/Input/index.vue';
+import TuiSelect from '../common/base/Select.vue';
+import TuiOption from '../common/base/Option.vue';
+import TuiCheckbox from '../common/base/Checkbox.vue';
+import TuiButton from '../common/base/Button.vue';
+import TuiAvatar from '../common/Avatar.vue';
+import TuiDatepicker from '../common/base/Datepicker/Datepicker.vue';
+import TuiTimepicker from '../common/base/Datepicker/Timepicker.vue';
+import TuiDurationTimePicker from './DurationTimePicker.vue';
+import TimezonePicker from './TimezonePicker.vue';
+import TuiShareLink from './ShareLink.vue';
+import Contacts from './Contacts.vue';
+import ScheduleAttendees from '../common/icons/ScheduleAttendees.vue';
+import CloseIcon from '../common/icons/CloseIcon.vue';
+import { EventType, roomService } from '../../services';
+import { TUIUserInfo, TUIConferenceInfo, TUISeatMode, TUIConferenceStatus } from '@tencentcloud/tuiroom-engine-electron';
+import { deepClone, calculateByteLength } from '../../utils/utils';
+
+const { t } = useI18n();
+const shareLinkData = ref({});
+interface Props {
+  userName?: string,
+  visible: boolean,
+  conferenceInfo?: TUIConferenceInfo,
+}
+const props = defineProps<Props>();
+
+type DateAndTimeResult = {
+  date: Date;
+  laterTime: string;
+  time: string;
+};
+
+const getDateAndTime = (
+  date: Date,
+  timeZone: string = Intl.DateTimeFormat().resolvedOptions().timeZone,
+): DateAndTimeResult => {
+  // Convert the date to the specified timezone
+  const formatter = new Intl.DateTimeFormat('en-US', {
+    year: 'numeric',
+    month: '2-digit',
+    day: '2-digit',
+    hour: '2-digit',
+    minute: '2-digit',
+    hour12: false, // Use 24-hour format
+    timeZone,
+  });
+
+  const formattedDate = formatter.format(date);
+  const [month, day, year, hour, minute] = formattedDate
+    .split(/[\s,:/]+/)
+    .filter(part => part !== 'AM' && part !== 'PM');
+
+  // Round minutes up to the nearest multiple of 15 (00, 15, 30, or 45)
+  const roundedMinute = Math.ceil(parseInt(minute) / 15) * 15;
+
+  // If the rounded minute is 60, increment the hour and set the minute to 00
+  const adjustedHour = roundedMinute === 60 ? parseInt(hour) + 1 : parseInt(hour);
+  const adjustedMinute = roundedMinute === 60 ? 0 : roundedMinute;
+
+  // Create a new date object with the adjusted hour and minute
+  const adjustedDate = new Date(parseInt(year), parseInt(month) - 1, parseInt(day), adjustedHour, adjustedMinute);
+
+  // If the adjusted date is earlier than the current date, add 15 minutes
+  if (adjustedDate < date) {
+    adjustedDate.setMinutes(adjustedDate.getMinutes() + 15);
+  }
+
+  const intHour = parseInt(hour);
+  const intMinute = parseInt(minute);
+
+  return {
+    date: new Date(parseInt(year), parseInt(month) - 1, parseInt(day)),
+    laterTime: `${adjustedHour < 10 ? `0${adjustedHour}` : adjustedHour}:${
+      adjustedMinute < 10 ? `0${adjustedMinute}` : adjustedMinute
+    }`,
+    time: `${intHour < 10 ? `0${intHour}` : intHour}:${intMinute < 10 ? `0${intMinute}` : intMinute}`,
+  };
+};
+
+
+const emit = defineEmits(['input']);
+const isDialogVisible = ref(false);
+const contactsVisible = ref(false);
+const showRoomInvite = ref(false);
+const isEditMode = computed(() => (!!props.conferenceInfo));
+const roomId = ref('');
+let contacts: any = [];
+const { date: startDate, laterTime: startTime } = getDateAndTime(new Date());
+const defaultFormData = ref({
+  roomName: t('sb temporary room', { name: props.userName || roomService.basicStore.userId }),
+  roomMode: 'FreeToSpeak',
+  startDate,
+  startTime,
+  duration: 1800,
+  timezone: Intl.DateTimeFormat().resolvedOptions().timeZone,
+  searchUser: '',
+  scheduleAttendees: [],
+  isMicrophoneDisableForAllUser: false,
+  isScreenShareDisableForAllUser: false,
+  isCameraDisableForAllUser: false,
+});
+const form = ref(deepClone(defaultFormData.value));
+
+const resetData  = () => {
+  defaultFormData.value.startDate = form.value.startDate;
+  defaultFormData.value.startTime = form.value.startTime;
+  form.value = Object.assign({}, deepClone(defaultFormData.value));
+};
+watch(
+  () => props.visible,
+  async (val) => {
+    isDialogVisible.value = val;
+    if (val) {
+      const { date, laterTime } = getDateAndTime(new Date());
+      form.value.startDate = date;
+      form.value.startTime = laterTime;
+      contacts = await roomService.scheduleConferenceManager.fetchFriendList();
+      isEditMode.value && (form.value =  Object.assign({}, deepClone(editParams.value)));
+    }
+  },
+  {
+    immediate: true,
+  },
+);
+const updateDialogVisible = (val: boolean) => {
+  emit('input', val);
+  if (!val) {
+    resetData();
+  }
+};
+watch(isDialogVisible, (val) => {
+  updateDialogVisible(val);
+}, { immediate: true });
+const editParams = computed(() => {
+  if (!props.conferenceInfo) return {};
+  const { basicRoomInfo, scheduleAttendees, scheduleStartTime, scheduleEndTime  } = props.conferenceInfo;
+  const { date, time } = getDateAndTime(new Date(scheduleStartTime * 1000));
+  const {
+    roomName,
+    isSeatEnabled,
+    isMicrophoneDisableForAllUser,
+    isScreenShareDisableForAllUser,
+    isCameraDisableForAllUser,
+  } = basicRoomInfo;
+  return {
+    roomName,
+    roomMode: isSeatEnabled  ? 'SpeakAfterTakingSeat' : 'FreeToSpeak',
+    startDate: date,
+    startTime: time,
+    duration: scheduleEndTime - scheduleStartTime,
+    timezone: Intl.DateTimeFormat().resolvedOptions().timeZone,
+    searchUser: '',
+    scheduleAttendees,
+    isMicrophoneDisableForAllUser,
+    isScreenShareDisableForAllUser,
+    isCameraDisableForAllUser,
+  };
+});
+
+
+const convertToTimestamp = (
+  date: Date,
+  time: string,
+  timezone: string,
+  offset: 1 | -1 = 1,
+  referenceTimezone?: string,
+) => {
+  const year = date.getFullYear();
+  const month = date.getMonth() + 1;
+  const day = date.getDate();
+  const timezoneOffset = offset * getTimezoneOffset(timezone, referenceTimezone) * 60 * 1000;
+  return  new Date(`${year}-${month}-${day} ${time}`).getTime() - timezoneOffset;
+};
+
+const calculateEndTime = (startTime: number, duration: number) => {
+  const endTime = startTime + duration * 1000;
+  return endTime;
+};
+
+const scheduleParams = computed(() => {
+  const { startDate, startTime, timezone, duration, scheduleAttendees } = form.value;
+  const scheduleStartTime =  convertToTimestamp(startDate, startTime, timezone);
+  const scheduleEndTime = calculateEndTime(scheduleStartTime, duration);
+  return {
+    roomId: roomId.value,
+    scheduleStartTime: scheduleStartTime / 1000,
+    scheduleEndTime: scheduleEndTime / 1000,
+    scheduleAttendees,
+    roomName: form.value.roomName,
+    isSeatEnabled: form.value.roomMode !== 'FreeToSpeak',
+    seatMode: form.value.roomMode === 'SpeakAfterTakingSeat' ? TUISeatMode.kApplyToTake : undefined,
+    isMicrophoneDisableForAllUser: form.value.isMicrophoneDisableForAllUser,
+    isScreenShareDisableForAllUser: form.value.isScreenShareDisableForAllUser,
+    isCameraDisableForAllUser: form.value.isCameraDisableForAllUser,
+  };
+});
+
+function getTimezoneOffset(targetTimezone: string, referenceTimezone = 'UTC') {
+  const now = Date.now();
+
+  const referenceDate = referenceTimezone === 'UTC'
+    ? new Date(now).toISOString()
+    : new Date(now).toLocaleString('en-US', { timeZone: referenceTimezone, hour12: false });
+  const targetDate = new Date(now).toLocaleString('en-US', { timeZone: targetTimezone, hour12: false });
+
+  const referenceTime = new Date(referenceDate).getTime();
+  const targetTime = new Date(targetDate).getTime();
+
+  const offset = Math.round((targetTime - referenceTime) / (1000 * 60));
+
+  return offset;
+}
+
+const timeCheck = () => {
+  if (!props.visible) return true;
+  const { timezone, startDate, startTime } = form.value;
+  const scheduleStartTime = convertToTimestamp(startDate, startTime, timezone);
+
+  const currentDate = new Date();
+  currentDate.setMilliseconds(0);
+  currentDate.setSeconds(0);
+  const currentTime = currentDate.getTime();
+
+  const result =  scheduleStartTime >= currentTime;
+  !result && roomService.emit(EventType.ROOM_NOTICE_MESSAGE, {
+    type: 'warning',
+    message: t('The start time cannot be earlier than the current time'),
+  });
+  return result;
+};
+const roomNameCheck = () => {
+  if (!props.visible) return true;
+  const result  = calculateByteLength(form.value.roomName) <= 100;
+  !result && roomService.emit(EventType.ROOM_NOTICE_MESSAGE, {
+    type: 'warning',
+    message: t('The room name cannot exceed 100 characters'),
+  });
+  return result;
+};
+const roomStatusCheck = () => {
+  if (!props.visible) return true;
+  const isNotStarted = props.conferenceInfo?.status === TUIConferenceStatus.kConferenceStatusNotStarted;
+  !isNotStarted && roomService.emit(EventType.ROOM_NOTICE_MESSAGE, {
+    type: 'warning',
+    message: t('The meeting is in progress and any meeting information cannot be modified'),
+  });
+  return isNotStarted;
+};
+
+watch(() => form.value.startTime, async (newValue, oldValue) => {
+  if (!timeCheck()) {
+    await nextTick();
+    form.value.startTime = oldValue;
+  }
+});
+
+watch(() => form.value.startDate, async (newValue, oldValue) => {
+  if (!timeCheck()) {
+    await nextTick();
+    form.value.startDate = oldValue;
+  }
+});
+
+watch(() => form.value.timezone, async (newValue, oldValue) => {
+  const { startDate, startTime } = form.value;
+  const currentDate = new Date(convertToTimestamp(startDate, startTime, newValue, -1, oldValue));
+  const { date, laterTime } = getDateAndTime(currentDate);
+  form.value.startDate = date;
+  form.value.startTime = laterTime;
+});
+
+const roomTypeList = [
+  { label: 'Free Speech Room', value: 'FreeToSpeak' },
+  { label: 'On-stage Speaking Room', value: 'SpeakAfterTakingSeat' },
+];
+
+const selectScheduleAttends = () => {
+  contactsVisible.value = true;
+};
+const searchScheduleAttend = (v: string) => {
+  if (!v) return [];
+  return contacts.filter((user:any) => user?.profile.nick.includes(v) || user?.userID.includes(v));
+};
+const addSelectUser = (user: any) => {
+  form.value.searchUser = '';
+  if (form.value.scheduleAttendees.findIndex((item: TUIUserInfo) => item.userId === user.userID) !== -1) return;
+  form.value.scheduleAttendees.push({
+    userId: user.userID,
+    userName: user.profile?.nick,
+    avatarUrl: user.profile?.avatar,
+  });
+};
+
+const removeSelectUser = (user: TUIUserInfo) => {
+  form.value.scheduleAttendees = form.value.scheduleAttendees
+    .filter((item: TUIUserInfo) => item.userId !== user.userId);
+};
+
+const contactsConfirm = (contacts: TUIUserInfo[]) => {
+  form.value.scheduleAttendees = contacts;
+};
+
+const scheduleConference = async () => {
+  if (!timeCheck()) return;
+  if (!roomNameCheck()) return;
+  roomId.value = String(Math.ceil(Math.random() * 1000000));
+  try {
+    await roomService.scheduleConferenceManager.scheduleConference({
+      ...scheduleParams.value,
+      roomId: roomId.value,
+    });
+    const userIdList = scheduleParams.value.scheduleAttendees.map((item: TUIUserInfo) => item.userId);
+    if (userIdList && userIdList.length > 0) {
+      await roomService.scheduleConferenceManager.addAttendeesByAdmin({
+        roomId: roomId.value,
+        userIdList,
+      });
+    }
+    shareLinkData.value = deepClone(scheduleParams.value);
+    updateDialogVisible(false);
+    showRoomInvite.value = true;
+  } catch (err: any) {
+    roomService.emit(EventType.ROOM_NOTICE_MESSAGE, {
+      type: 'error',
+      message: err.message,
+    });
+  }
+};
+const  compareArrays = (oldArray: any[], newArray: any[], key: string) => {
+  const added: any[] = [];
+  const removed: any[] = [];
+
+  const newKeySet = new Set(newArray.map(item => item[key]));
+  const oldKeySet = new Set(oldArray.map(item => item[key]));
+
+  // Find added elements
+  newArray.forEach((item) => {
+    if (!oldKeySet.has(item[key])) {
+      added.push(item);
+    }
+  });
+
+  // Find removed elements
+  oldArray.forEach((item) => {
+    if (!newKeySet.has(item[key])) {
+      removed.push(item);
+    }
+  });
+
+  return {
+    added,
+    removed,
+  };
+};
+const updateConferenceInfo = async () => {
+  if (!roomStatusCheck()) return;
+  if (!timeCheck()) return;
+  if (!roomNameCheck()) return;
+  try {
+    const roomId = props.conferenceInfo?.basicRoomInfo.roomId;
+    if (!roomId) return;
+    const { roomName, scheduleStartTime, scheduleEndTime, scheduleAttendees } = scheduleParams.value;
+    await roomService.scheduleConferenceManager.updateConferenceInfo({
+      roomId,
+      roomName,
+      scheduleStartTime,
+      scheduleEndTime,
+    });
+    const compareResult = compareArrays(props.conferenceInfo.scheduleAttendees, scheduleAttendees, 'userId');
+    await Promise.all([
+      compareResult.added.length > 0 && roomService.scheduleConferenceManager.addAttendeesByAdmin({
+        roomId,
+        userIdList: compareResult.added.map(item => item.userId),
+      }),
+      compareResult.removed.length > 0 && roomService.scheduleConferenceManager.removeAttendeesByAdmin({
+        roomId,
+        userIdList: compareResult.removed.map(item => item.userId),
+      }),
+    ]);
+    updateDialogVisible(false);
+  } catch (err: any) {
+    roomService.emit(EventType.ROOM_NOTICE_MESSAGE, {
+      type: 'error',
+      message: err.message,
+    });
+  }
+};
+
+const cancel = () => {
+  updateDialogVisible(false);
+};
+</script>
+
+<style lang="scss" scoped>
+.schedule-conference-form {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+
+  .form-item {
+    display: flex;
+    align-items: center;
+
+    .form-label {
+      display: inline-block;
+      width: 100px;
+      min-width: 100px;
+      color: #4F586B;
+      font-size: 14px;
+      font-weight: 400;
+    }
+
+    .form-value {
+      width: 100%;
+      height: 42px;
+      line-height: 42px;
+      font-size: 14px;
+      font-weight: 400;
+      color: #0F1014;
+      display: flex;
+      justify-content: space-between;
+
+      .search-user {
+        height: 42px;
+      }
+
+      .form-input {
+        width: 100%;
+      }
+
+      .checkbox-group {
+        display: flex;
+        flex-direction: column;
+        &-item {
+          max-width: 145px;
+        }
+        &-item:hover {
+          color: #409eff;
+        }
+      }
+
+      .select {
+        width: 100%;
+      }
+
+      .date-picker {
+        width: 210px;
+      }
+
+      .time-picker {
+        width: 110px;
+      }
+
+      .select-attendees {
+        cursor: pointer;
+      }
+
+      .select-attendees:hover {
+        color: var(--active-color-1);
+      }
+
+      .select-search-result-item {
+        display: inline-block;
+        width: 100%;
+        height: 100%;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        overflow: hidden;
+      }
+
+      .form-attendees:hover {
+        overflow: auto;
+
+      }
+      .form-attendees {
+        margin-top: 6px;
+        display: flex;
+        flex-wrap: wrap;
+        gap: 2px;
+        line-height: normal;
+        justify-content: flex-start;
+        max-height: 100px;
+        overflow: hidden;
+
+        &-item {
+          display: flex;
+          line-height: normal;
+          align-items: center;
+          background-color: #e3f0fd;
+          border-radius: 4px;
+          padding: 2px 8px;
+          flex-basis: calc(33.3333% - 2px);
+          overflow: hidden;
+          box-sizing: border-box;
+
+          &-avatar {
+            min-width: 20px;
+            min-height: 20px;
+            width: 20px;
+            height: 20px;
+            margin-right: 6px;
+          }
+
+          &-name {
+            width: 100%;
+            display: inline;
+            margin: initial;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+            overflow: hidden;
+          }
+
+          &-remove {
+            cursor: pointer;
+            margin-left: auto;
+            color: #b3acac;
+          }
+        }
+      }
+    }
+  }
+
+  .form-item.column {
+    align-items: flex-start;
+
+    .form-label {
+      height: 42px;
+      line-height: 42px;
+    }
+
+    .form-value {
+      height: auto;
+      display: flex;
+      flex-direction: column;
+    }
+  }
+}
+
+.schedule-conference-footer {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+  width: 100%;
+
+  .footer-button {
+    width: 116px;
+    height: 32px;
+  }
+}
+
+.invite-member {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  .invite-member-title {
+    color: #4F586B;
+  }
+  .invite-member-item {
+    margin-top: 8px;
+    border-radius: 8px;
+    border: 1px solid #E4E8EE;
+    background: #F9FAFC;
+    padding: 10px 16px;
+    color: #0F1014;
+    display: flex;
+    justify-content: space-between;
+    .copy {
+      width: 20px;
+      height: 20px;
+      cursor: pointer;
+    }
+  }
+}
+</style>