@tencentcloud/roomkit-electron-vue3 2.3.3

package/src/TUIRoom/components/RoomHeader/RoomInfo/useRoomInfoHooks.ts

@@ -0,0 +1,80 @@
+import { ref, computed } from 'vue';
+import { useI18n } from '../../../locales';
+import { useBasicStore } from '../../../stores/basic';
+import { useRoomStore } from '../../../stores/room';
+import { storeToRefs } from 'pinia';
+import TUIMessage from '../../common/base/Message/index';
+import { clipBoard } from '../../../utils/utils';
+import useRoomInviteControl from '../../RoomInvite/useRoomInviteHooks';
+import { isWeChat } from '../../../utils/environment';
+import { roomService } from '../../../services';
+
+export default function useRoomInfo() {
+  const { inviteLink } = useRoomInviteControl();
+  const basicStore = useBasicStore();
+  const roomStore = useRoomStore();
+  const { roomId, isRoomLinkVisible } = storeToRefs(basicStore);
+  const { masterUserId } = storeToRefs(roomStore);
+  const { t } = useI18n();
+  const isShowRoomInfo = ref(false);
+  const roomType = computed(() => (roomStore.isFreeSpeakMode ? t('Free Speech Room') : t('On-stage Speaking Room')));
+  const arrowDirection = ref(false);
+  const roomLinkConfig = roomService.getComponentConfig('RoomLink');
+
+  const masterUserName = computed(() => roomStore.getUserName(masterUserId.value) || masterUserId.value);
+
+  const isShowRoomInfoTitle = computed(() => masterUserName.value);
+
+  const conferenceTitle = computed(() => `${masterUserName.value}${t('Quick Meeting')}`);
+
+  const roomInfoTabList = computed(() => [
+    { id: 1, title: 'Host', content: masterUserName.value, copyLink: '', isShowCopyIcon: false, visible: true },
+    { id: 2, title: 'Room Type', content: roomType.value, copyLink: '', isShowCopyIcon: false, visible: true },
+    { id: 3, title: 'Room ID', content: roomId.value, copyLink: roomId.value, isShowCopyIcon: true, visible: true },
+    { id: 4, title: 'Room Link', content: inviteLink.value, copyLink: inviteLink.value, isShowCopyIcon: true, visible: isRoomLinkVisible.value && roomLinkConfig.visible },
+  ]);
+
+  function toggleShowRoomInfoStatus() {
+    isShowRoomInfo.value = !isShowRoomInfo.value;
+    arrowDirection.value = !arrowDirection.value;
+  }
+
+  function handleClickOutsideRoomInfoContainer() {
+    if (isShowRoomInfo.value || arrowDirection.value) {
+      isShowRoomInfo.value = false;
+      arrowDirection.value = false;
+    }
+  }
+
+  function handleCloseRoomInfo() {
+    isShowRoomInfo.value = false;
+    arrowDirection.value = false;
+  }
+  async function onCopy(value: string | number) {
+    try {
+      await clipBoard(value);
+      TUIMessage({
+        message: t('Copied successfully'),
+        type: 'success',
+      });
+    } catch (error) {
+      TUIMessage({
+        message: t('Copied failure'),
+        type: 'error',
+      });
+    }
+  }
+  return {
+    t,
+    arrowDirection,
+    isWeChat,
+    isShowRoomInfo,
+    isShowRoomInfoTitle,
+    conferenceTitle,
+    roomInfoTabList,
+    handleCloseRoomInfo,
+    toggleShowRoomInfoStatus,
+    handleClickOutsideRoomInfoContainer,
+    onCopy,
+  };
+}

package/src/TUIRoom/components/RoomHeader/UserInfo/index.vue

@@ -0,0 +1,196 @@
+<template>
+  <div v-if="userInfoConfig.visible" ref="userInfoRef" class="user-info-container">
+    <div class="user-info-content" @click="handleUserControl">
+      <Avatar class="avatar" :img-src="avatarUrl"></Avatar>
+      <div class="name">{{ userName || userId }}</div>
+      <svg-icon
+        :class="[showUserControl ? 'up-icon' : 'down-icon']"
+        :icon="ArrowStrokeSelectDownIcon"
+      ></svg-icon>
+    </div>
+    <div v-if="showUserControl" class="user-control-container">
+      <div v-show="showEditNameContainer">
+        <div class="user-control-item-head" @click="showEditUserNameDialog">{{ t('Edit profile') }}</div>
+      </div>
+      <div class="user-control-item-foot" @click="$emit('log-out')">{{ t('Log out') }}</div>
+    </div>
+    <Dialog
+      v-model="showUserNameEdit"
+      :title="t('Edit profile')"
+      :modal="true"
+      width="480px"
+      :close-on-click-modal="true"
+      :append-to-body="true"
+    >
+      <div class="edit-content">
+        <span>{{ t('User Name') }}</span>
+        <tui-input v-model="tempUserName" class="edit-name-input" :placeholder="t('Please input user name')" />
+      </div>
+      <template #footer>
+        <tui-button class="button" size="default" @click="closeEditUserNameDialog">{{ t('Cancel') }}</tui-button>
+        <tui-button class="button" size="default" type="primary" @click="handleSaveUserName(tempUserName)">
+          {{ t('Save') }}
+        </tui-button>
+      </template>
+    </Dialog>
+  </div>
+</template>
+<script setup lang="ts">
+import Dialog from '../../common/base/Dialog/index.vue';
+import SvgIcon from '../../common/base/SvgIcon.vue';
+import ArrowStrokeSelectDownIcon from '../../common/icons/ArrowStrokeSelectDownIcon.vue';
+import useUserInfo from './useUserInfoHooks';
+import Avatar from '../../common/Avatar.vue';
+import TuiButton from '../../common/base/Button.vue';
+import TuiInput from '../../common/base/Input.vue';
+import { isInnerScene } from '../../../utils/constants';
+import { roomService } from '../../../services';
+import TUIMessage from '../../common/base/Message/index';
+import { MESSAGE_DURATION } from '../../../constants/message';
+import TUIRoomEngine from '@tencentcloud/tuiroom-engine-electron';
+import { useBasicStore } from '../../../stores/basic';
+import { useRoomStore } from '../../../stores/room';
+
+const emits = defineEmits(['log-out', 'update-user-name']);
+
+const userInfoConfig = roomService.getComponentConfig('UserInfo');
+
+const basicStore = useBasicStore();
+const roomStore = useRoomStore();
+
+const {
+  t,
+  showUserControl,
+  showUserNameEdit,
+  userInfoRef,
+  tempUserName,
+  handleUserControl,
+  showEditUserNameDialog,
+  closeEditUserNameDialog,
+} = useUserInfo();
+
+const props = withDefaults(defineProps<{
+  userId: string,
+  userName: string,
+  avatarUrl?: string,
+  isShowEditName?: boolean,
+}>(), {
+  isShowEditName: false,
+});
+const showEditNameContainer = isInnerScene && props.isShowEditName;
+
+/**
+ * Save the new userName
+ *
+**/
+async function handleSaveUserName(userName: string) {
+  if (userName.length === 0) {
+    TUIMessage({
+      type: 'warning',
+      message: t('Username length should be greater than 0'),
+      duration: MESSAGE_DURATION.NORMAL,
+    });
+    return;
+  }
+  emits('update-user-name', userName);
+  basicStore.setUserName(userName);
+  TUIRoomEngine.setSelfInfo({ userName, avatarUrl: roomStore.localUser.avatarUrl || '' });
+  roomStore.setLocalUser({ userName });
+  closeEditUserNameDialog();
+}
+
+</script>
+<style lang="scss" scoped>
+.tui-theme-white .user-control-container {
+  --filter-color:
+    drop-shadow(0px 0px 4px rgba(32, 77, 141, 0.03))
+    drop-shadow(0px 4px 10px rgba(32, 77, 141, 0.06))
+    drop-shadow(0px 1px 14px rgba(32, 77, 141, 0.05));
+}
+.tui-theme-black .user-control-container {
+  --filter-color:
+    drop-shadow(0px 8px 40px rgba(23, 25, 31, 0.6))
+    drop-shadow(0px 4px 12px rgba(23, 25, 31, 0.4));
+}
+
+.user-info-container {
+  position: relative;
+  .user-info-content {
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+    .avatar {
+      width: 28px;
+      height: 28px;
+      border-radius: 50%;
+    }
+    .name {
+      max-width: 100px;
+      margin-left: 10px;
+      font-size: 16px;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      color: var(--font-color);
+    }
+    .down-icon {
+      margin-left: 4px;
+    }
+    .up-icon {
+      margin-left: 4px;
+      transform: rotate(180deg);
+    }
+  }
+  .user-control-container {
+    position: absolute;
+    top: calc(100% + 15px);
+    right: 0;
+    padding: 10px;
+    min-width: 100px;
+    background: #ffffff;
+    border-radius: 8px;
+    filter: var(--filter-color);
+    &::before {
+      content: '';
+      position: absolute;
+      right: 20px;
+      top: -20px;
+      width: 0px;
+      border-top: 10px solid transparent;
+      border-right: 10px solid transparent;
+      border-bottom: 10px solid #ffffff;
+      border-left: 10px solid transparent;
+    }
+    &::after {
+      content: '';
+      width: 100%;
+      height: 20px;
+      position: absolute;
+      left: 0px;
+      top: -20px;
+      background-color: transparent;
+    }
+
+    .user-control-item-foot,
+    .user-control-item-head {
+      text-align: center;
+      color: #4f586b;
+      font-size: 14px;
+      cursor: pointer;
+      height: 20px;
+    }
+  }
+}
+.edit-content {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  .edit-name-input {
+    margin-left: 16px;
+    flex-grow: 1;
+  }
+}
+.button {
+  margin-left: 12px;
+}
+</style>

package/src/TUIRoom/components/RoomHeader/UserInfo/useUserInfoHooks.ts

@@ -0,0 +1,67 @@
+import { ref, onMounted, onUnmounted, Ref } from 'vue';
+import { useI18n } from '../../../locales';
+import { useBasicStore } from '../../../stores/basic';
+import { storeToRefs } from 'pinia';
+export default function useUserInfo() {
+  const { t } = useI18n();
+  const basicStore = useBasicStore();
+  const { userName } = storeToRefs(basicStore);
+
+  const userInfoRef = ref();
+  const showUserControl = ref(false);
+  const showUserNameEdit: Ref<boolean> = ref(false);
+
+  const tempUserName = ref('');
+  /**
+     * Whether to display the user information operation box
+     *
+    **/
+  function handleUserControl() {
+    showUserControl.value = !showUserControl.value;
+  }
+
+  /**
+     * Hide the user information action box
+     *
+    **/
+  function hideUserControl(event: Event) {
+    if (!userInfoRef.value?.contains(event.target)) {
+      showUserControl.value = false;
+    }
+  }
+
+  /**
+     * Show change name dialog
+     *
+    **/
+  function showEditUserNameDialog() {
+    showUserNameEdit.value = true;
+    tempUserName.value = userName.value;
+  }
+
+  /**
+     * Close the modify name dialog
+     *
+    **/
+  function closeEditUserNameDialog() {
+    showUserNameEdit.value = false;
+  }
+
+  onMounted(() => {
+    window.addEventListener('click', hideUserControl);
+  });
+
+  onUnmounted(() => {
+    window.removeEventListener('click', hideUserControl);
+  });
+  return {
+    t,
+    showUserControl,
+    showUserNameEdit,
+    userInfoRef,
+    tempUserName,
+    handleUserControl,
+    showEditUserNameDialog,
+    closeEditUserNameDialog,
+  };
+}

package/src/TUIRoom/components/RoomHeader/index/InfoControl.vue

@@ -0,0 +1,171 @@
+<!--
+  * Name: infoControl
+  * Usage:
+  * Use <info-control /> in template
+  *
+-->
+<template>
+  <div class="info-container">
+    <svg-icon
+      class="layout-icon"
+      icon-name="info"
+      size="medium"
+      @click.stop="handleClickInfoIcon"
+    ></svg-icon>
+    <div ref="infoRef"></div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, Ref } from 'vue';
+import SvgIcon from '../../common/base/SvgIcon.vue';
+
+const showInfoTab = ref(false);
+const infoRef:Ref<Node | undefined> = ref(undefined);
+
+function handleClickInfoIcon() {
+  if (!showInfoTab.value) {
+    showInfoTab.value = true;
+    document.addEventListener('click', handleDocumentClick, false);
+  } else {
+    document.removeEventListener('click', handleDocumentClick, false);
+    showInfoTab.value = false;
+  }
+}
+
+function handleDocumentClick(event: MouseEvent) {
+  if (showInfoTab.value && infoRef.value && !infoRef.value.contains(event.target as Node)) {
+    document.removeEventListener('click', handleDocumentClick);
+    showInfoTab.value = false;
+  }
+}
+
+</script>
+
+<style lang="scss" scoped>
+.info-container {
+  position: relative;
+  width: 20px;
+  height: 20px;
+  .layout-icon {
+    cursor: pointer;
+  }
+  .layout-list {
+    position: absolute;
+    top: 47px;
+    right: 0;
+    background-color: $toolBarBackgroundColor;
+    box-shadow: 0 1px 10px 0 rgba(0,0,0,0.30);
+    border-radius: 4px;
+    padding: 20px;
+    display: flex;
+    .layout-item {
+      width: 180px;
+      height: 133px;
+      padding: 20px 30px 39px;
+      background-color: $primaryColor;
+      border-radius: 2px;
+      border: 1px solid transparent;
+      cursor: pointer;
+      position: relative;
+      &:not(:first-child) {
+        margin-left: 20px;
+      }
+      &:hover {
+        border: 1px solid $primaryHighLightColor;
+        border-radius: 2px;
+      }
+      &.checked {
+        border: 1px solid $primaryHighLightColor;
+        border-radius: 2px;
+        &:after {
+          content: '';
+          display: block;
+          width: 20px;
+          height: 20px;
+          background-image: url('../../assets/imgs/checked.png');
+          background-size: 100% 100%;
+          position: absolute;
+          top: 0;
+          right: 0;
+        }
+      }
+      .layout-block-container {
+        width: 120px;
+        height: 74px;
+      }
+      .layout-title {
+        font-size: 16px;
+        font-weight: 400;
+        line-height: 24px;
+        display: inline-block;
+        margin-top: 10px;
+        width: 100%;
+        text-align: center;
+      }
+    }
+    .layout1 {
+      .layout-block-container {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: space-between;
+        align-content: space-between;
+        .layout-block {
+          width: 38px;
+          height: 22px;
+          background-color: $layoutBlockColor;
+        }
+      }
+    }
+    .layout2 {
+      .layout-block-container {
+        display: flex;
+        justify-content: space-between;
+        .left-container {
+          width: 90px;
+          height: 74px;
+          background-color: $layoutBlockColor;
+        }
+        .right-container {
+          width: 27px;
+          height: 74px;
+          display: flex;
+          flex-wrap: wrap;
+          justify-content: space-between;
+          align-content: space-between;
+          > div {
+            width: 27px;
+            height: 16px;
+            background-color: $layoutBlockColor;
+          }
+        }
+      }
+    }
+    .layout3 {
+      .layout-block-container {
+        display: flex;
+        flex-wrap: wrap;
+        align-content: space-between;
+        .top-container {
+          width: 120px;
+          height: 16px;
+          display: flex;
+          flex-wrap: wrap;
+          justify-content: space-between;
+          align-content: space-between;
+          > div {
+            width: 28px;
+            height: 16px;
+            background-color: $layoutBlockColor;
+          }
+        }
+        .bottom-container {
+          width: 120px;
+          height: 55px;
+          background-color: $layoutBlockColor;
+        }
+      }
+    }
+  }
+}
+</style>