@tencentcloud/roomkit-electron-vue3 2.3.3

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

@@ -0,0 +1,103 @@
+<template>
+  <div class="more-container">
+    <div class="more-title">
+      <svg-icon class="email-icon" :icon="EmailIcon"></svg-icon>
+      <div class="more-notice">{{ t('If you have any questions, please email us.') }}</div>
+    </div>
+    <div v-if="isZH" class="more-item">
+      <div class="item-title">{{ t('Join our product discussion group') }}</div>
+      <tui-button class="join-button" type="primary" @click="handleClick">
+        {{ t('Join now') }}
+      </tui-button>
+    </div>
+    <div class="more-item">
+      <div class="item-title">{{ t('Our email address') }}</div>
+      <div class="more-content">{{ email }}</div>
+      <svg-icon class="copy-icon" :icon="CopyIcon" @click="onCopy(email)">
+      </svg-icon>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import useRoomMoreControl from './useRoomMoreHooks';
+import SvgIcon from '../common/base/SvgIcon.vue';
+import CopyIcon from '../common/icons/CopyIcon.vue';
+import EmailIcon from '../common/icons/EmailIcon.vue';
+import TuiButton from '../common/base/Button.vue';
+
+
+const { t, onCopy, handleClick, email, isZH } = useRoomMoreControl();
+</script>
+
+<style lang="scss" scoped>
+.more-container {
+  padding: 20px;
+  .more-title {
+    display: flex;
+    .email-icon {
+      color: #7c85a6;
+    }
+    .more-notice {
+      font-size: 14px;
+      width: 100%;
+      height: 22px;
+      line-height: 22px;
+      font-weight: 400;
+      color: var(--font-color-5);
+      padding-left: 8px;
+    }
+  }
+  .more-item {
+    display: flex;
+    flex-direction: column;
+    position: relative;
+    &:not(:first-child) {
+      margin-top: 20px;
+      .item-title {
+        font-size: 14px;
+        font-weight: 400;
+        line-height: 22px;
+        color: var(--font-color-5);
+        width: 100%;
+        padding-bottom: 8px;
+      }
+      .join-button {
+        height: 42px;
+        font-weight: 600;
+      }
+      .more-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);
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        position: relative;
+      }
+      .copy-icon {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 32px;
+        height: 32px;
+        cursor: pointer;
+        position: absolute;
+        top: 36px;
+        right: 0;
+      }
+    }
+  }
+}
+</style>

package/src/TUIRoom/components/RoomMore/useRoomMoreHooks.ts

@@ -0,0 +1,47 @@
+import { computed } from 'vue';
+import TUIMessage from '../common/base/Message/index';
+import { useI18n } from '../../locales';
+import { clipBoard } from '../../utils/utils';
+import i18n from '../../locales/index';
+
+export default function useRoomMoreHooks() {
+  const { t } = useI18n();
+
+  const groupNumber = '770645461';
+  const email = 'chaooliang@tencent.com';
+
+  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',
+      });
+    }
+  }
+
+  const isZH = computed(() => i18n.global.locale.value === 'zh-CN');
+
+  const contactContentList = [
+    { id: 1, title: 'group chat', content: groupNumber, copyLink: groupNumber },
+    { id: 2, title: 'Email', content: email, copyLink: email },
+  ];
+
+  const handleClick = () => {
+    window.open('https://zhiliao.qq.com/s/c5GY7HIM62CK', '_blank');
+  };
+
+  return {
+    t,
+    onCopy,
+    contactContentList,
+    email,
+    handleClick,
+    isZH,
+  };
+}

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

@@ -0,0 +1,176 @@
+<template>
+  <div v-if="showSettingDialog" class="overlay-container overlay" @click="handleOverlayClick">
+    <div class="setting-container">
+      <div class="setting-header">
+        <span class="setting-title">{{ t('Settings') }}</span>
+        <svg-icon class="close-icon" :icon="CloseIcon" @click="handleCloseSettingDialog" />
+      </div>
+      <div class="setting-body">
+        <div class="setting-tabs">
+          <div
+            v-for="(item, index) in settingTabsTitleList"
+            :key="index"
+            :class="['tabs-title', `${activeSettingTab === item.value ? 'active' : ''}`]"
+            @click="handleUpdateActiveTab(item.value)"
+          >
+            {{ item.label }}
+          </div>
+        </div>
+        <div class="divide-line"></div>
+        <div class="setting-content">
+          <audio-setting-tab
+            v-if="activeSettingTab === 'audio'"
+            class="setting-tab"
+            :mode="SettingMode.DETAIL"
+            theme="white"
+          ></audio-setting-tab>
+          <video-setting-tab
+            v-else-if="activeSettingTab === 'video'"
+            class="setting-tab"
+            :with-preview="true"
+            theme="white"
+          ></video-setting-tab>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+// import { ref } from 'vue';
+import SvgIcon from '../common/base/SvgIcon.vue';
+import AudioSettingTab from '../common/AudioSettingTab.vue';
+import VideoSettingTab from '../common/VideoSettingTab.vue';
+import { useBasicStore } from '../../stores/basic';
+import { storeToRefs } from 'pinia';
+import { SettingMode } from '../../constants/render';
+import { useI18n } from '../../locales';
+import { computed } from 'vue';
+import CloseIcon from '../common/icons/CloseIcon.vue';
+
+const { t } = useI18n();
+
+const basicStore = useBasicStore();
+
+const { showSettingDialog, activeSettingTab } = storeToRefs(basicStore);
+
+const settingTabsTitleList = computed(() => [
+  { label: t('Audio settings'), value: 'audio' },
+  { label: t('Camera settings'), value: 'video' },
+]);
+
+function handleUpdateActiveTab(tabTitle: string) {
+  basicStore.setActiveSettingTab(tabTitle);
+}
+
+function handleCloseSettingDialog() {
+  basicStore.setShowSettingDialog(false);
+}
+
+function handleOverlayClick(event: any) {
+  if (event.target !== event.currentTarget) {
+    return;
+  }
+  handleCloseSettingDialog();
+}
+</script>
+
+<style lang="scss" scoped>
+.overlay-container {
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: 2007;
+  &.overlay {
+    background-color: rgba(15, 16, 20, 0.6);
+  }
+}
+
+.setting-container {
+  width: 610px;
+  height: 590px;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  display: flex;
+  background-color: #ffffff;
+  border-radius: 20px;
+  flex-direction: column;
+
+  .setting-header {
+    height: 64px;
+    border-bottom: 1px solid rgba(235, 240, 247, 1);
+    box-shadow: 0px 7px 10px -5px rgba(230, 236, 245, 0.8);
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    position: relative;
+    .close-icon {
+      width: 32px;
+      height: 32px;
+      position: absolute;
+      top: 50%;
+      transform: translateY(-50%);
+      right: 20px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      color: #4f586b;
+      cursor: pointer;
+    }
+    .setting-title {
+      display: inline-block;
+      font-weight: 500;
+      line-height: 24px;
+      color: #000;
+      padding: 20px 0 20px 24px;
+      font-size: 16px;
+      font-style: normal;
+      font-weight: 600;
+      line-height: 24px;
+    }
+  }
+  .setting-body {
+    height: 100%;
+    display: flex;
+    .setting-tabs {
+      width: 170px;
+      background-color: #f0f3fa;
+      padding-top: 7px;
+      border-bottom-left-radius: 10px;
+
+      .tabs-title {
+        width: 100%;
+        height: 36px;
+        padding-left: 32px;
+        font-weight: 400;
+        font-size: 14px;
+        color: #4f586b;
+        line-height: 36px;
+        position: relative;
+        cursor: pointer;
+        &.active {
+          background-color: #1c66e5;
+          color: #fff;
+          font-weight: 400;
+        }
+      }
+    }
+    .divide-line {
+      width: 1px;
+      height: 100%;
+      background: var(--divide-line-color-setting);
+    }
+    .setting-content {
+      flex-grow: 1;
+      padding: 16px 30px;
+      .setting-tab {
+        width: 100%;
+      }
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,37 @@
+<template>
+  <div
+    class="sidebar-container"
+  >
+    <Drawer
+      v-model="isSidebarOpen"
+      :modal="false"
+      :title="title"
+      :before-close="handleClose"
+      :size="400"
+    >
+      <chat v-if="sidebarName == 'chat'"></chat>
+      <room-invite v-if="sidebarName == 'invite'"></room-invite>
+      <room-more v-if="sidebarName == 'more'"></room-more>
+      <manage-member v-if="sidebarName == 'manage-member'"></manage-member>
+    </Drawer>
+  </div>
+</template>
+
+<script setup lang="ts">
+import Chat from '../Chat/index.vue';
+import Drawer from '../common/base/Drawer.vue';
+import useSideBar from './useSideBarHooks';
+import RoomInvite from '../RoomInvite/index.vue';
+import ManageMember from '../ManageMember/index.vue';
+import RoomMore from '../RoomMore/index.vue';
+const {
+  isSidebarOpen,
+  title,
+  handleClose,
+  sidebarName,
+} = useSideBar();
+
+</script>
+
+<style lang="scss">
+</style>

package/src/TUIRoom/components/RoomSidebar/useSideBarHooks.ts

@@ -0,0 +1,91 @@
+import { TencentCloudChat } from '@tencentcloud/tuiroom-engine-electron';
+import useGetRoomEngine from '../../hooks/useRoomEngine';
+import { useChatStore } from '../../stores/chat';
+import { storeToRefs } from 'pinia';
+import { useBasicStore } from '../../stores/basic';
+import { useI18n } from '../../locales';
+import { computed, onUnmounted, watch } from 'vue';
+import { useRoomStore } from '../../stores/room';
+
+export default function useSideBar() {
+  const roomEngine = useGetRoomEngine();
+  const { t } = useI18n();
+
+  const chatStore = useChatStore();
+  const basicStore = useBasicStore();
+  const { sdkAppId, isSidebarOpen, sidebarName } = storeToRefs(basicStore);
+  const roomStore = useRoomStore();
+  const { userNumber } = storeToRefs(roomStore);
+
+  const showSideBar = computed(() => isSidebarOpen.value && sidebarName.value !== 'transfer-leave');
+  const title = computed((): string => {
+    let sidebarTitle = '';
+    switch (sidebarName.value) {
+      case 'chat':
+        sidebarTitle = t('Chat');
+        break;
+      case 'invite':
+        sidebarTitle = t('Invite');
+        break;
+      case 'more':
+        sidebarTitle = t('More');
+        break;
+      case 'apply':
+        sidebarTitle = t('Members applying on stage');
+        break;
+      case 'manage-member':
+        sidebarTitle = `${t('Members')} (${userNumber.value})`;
+        break;
+      default:
+        break;
+    }
+    return sidebarTitle;
+  });
+
+  function handleClose(done: any) {
+    basicStore.setSidebarOpenStatus(false);
+    basicStore.setSidebarName('');
+    done();
+  }
+
+  /** Monitor message reception, placed here to only record unread messages before opening chat */
+  const onReceiveMessage = (options: { data: any }) => {
+    if (!options || !options.data) {
+      return;
+    }
+    options.data.forEach((message: any) => {
+      if (message.type === TencentCloudChat.TYPES.MSG_TEXT) {
+        if (!basicStore.isSidebarOpen || basicStore.sidebarName !== 'chat') {
+          // eslint-disable-next-line no-plusplus
+          chatStore.updateUnReadCount(++chatStore.unReadCount);
+        }
+      }
+    });
+  };
+
+  let tim = roomEngine.instance?.getTIM();
+  tim?.on(TencentCloudChat.EVENT.MESSAGE_RECEIVED, onReceiveMessage);
+
+
+  watch(sdkAppId, () => {
+    if (!tim && sdkAppId.value) {
+      tim = TencentCloudChat.create({ SDKAppID: basicStore.sdkAppId });
+      tim?.on(TencentCloudChat.EVENT.MESSAGE_RECEIVED, onReceiveMessage);
+    }
+  });
+
+  onUnmounted(() => {
+    tim?.off(TencentCloudChat.EVENT.MESSAGE_RECEIVED, onReceiveMessage);
+  });
+
+  return {
+    t,
+    isSidebarOpen,
+    title,
+    sidebarName,
+    handleClose,
+    showSideBar,
+  }
+  ;
+}
+

package/src/TUIRoom/components/common/ArrowStroke.vue

@@ -0,0 +1,239 @@
+<template>
+  <div :class="arrowStrokeClass">
+    <div :class="['stroke-content', { 'has-stroke': hasStroke }]">
+      <div class="arrow-content" @click="handleClickArrow">
+      </div>
+    </div>
+    <svg-icon :class="['arrow', { 'has-stroke': hasStroke }]" @click="handleClickArrow">
+      <arrow-stroke-left-icon :class="arrowDirection"></arrow-stroke-left-icon>
+    </svg-icon>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import SvgIcon from './base/SvgIcon.vue';
+import ArrowStrokeLeftIcon from './icons/ArrowStrokeLeftIcon.vue';
+
+interface Props {
+  strokePosition: string;
+  arrowDirection: string;
+  hasStroke: boolean,
+}
+
+const props = defineProps<Props>();
+
+const emits = defineEmits(['click-arrow']);
+
+const arrowStrokeClass = computed(() => `arrow-stroke-container-${props.strokePosition}`);
+
+function handleClickArrow() {
+  emits('click-arrow');
+}
+
+</script>
+
+<style lang="scss" scoped>
+.arrow-stroke-container-left {
+  width: 8px;
+  height: 100%;
+  .stroke-content {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    background-color: transparent;
+    transform: perspective(20px) rotateX(0deg) rotateY(-20deg) translateZ(0);
+    .arrow-content {
+      width: 5px;
+      height: 60px;
+      position: absolute;
+      top: 50%;
+      left: 0px;
+      transform: translateY(-50%);
+      cursor: pointer;
+      &::before {
+        content: '';
+        width: 20px;
+        height: 100%;
+        box-sizing: border-box;
+        position: absolute;
+        top: 0;
+        right: -15px;
+        border-top-left-radius: 10px;
+        border-bottom-left-radius: 10px;
+        border: 1px solid rgba(143, 154, 178, 0.10);
+        background-color: rgba(15, 16, 20, 0.30);
+      }
+    }
+    &.has-stroke {
+      .arrow-content {
+        width: 5px;
+        height: 60px;
+        position: absolute;
+        top: 50%;
+        left: 0px;
+        transform: translateY(-50%);
+        border-top: 1px solid var(--stroke-color);
+        border-left: 1px solid var(--stroke-color);
+        border-bottom: 1px solid var(--stroke-color);
+        border-top-left-radius: 4px;
+        border-bottom-left-radius: 4px;
+        cursor: pointer;
+        &::before {
+          content: '';
+          width: 20px;
+          height: 100%;
+          position: absolute;
+          top: 0;
+          right: -15px;
+          border: 0px;
+          background-color: transparent;
+        }
+      }
+      &::before {
+        content: '';
+        width: 2px;
+        height: calc((100% - 60px) / 2);
+        position: absolute;
+        top: 0px;
+        right: 0px;
+        border-right: 1px solid var(--stroke-color);
+        border-bottom: 1px solid var(--stroke-color);
+        border-bottom-right-radius: 4px;
+      }
+      &::after {
+        content: '';
+        width: 2px;
+        height: calc((100% - 60px) / 2);
+        position: absolute;
+        bottom: 0px;
+        right: 0px;
+        border-right: 1px solid var(--stroke-color);
+        border-top: 1px solid var(--stroke-color);
+        border-top-right-radius: 4px;
+      }
+    }
+  }
+  .arrow {
+    position: absolute;
+    top: 50%;
+    left: 6px;
+    transform: translateY(-50%);
+    cursor: pointer;
+    color: #D5E0F2;
+    transition: color 0s;
+    svg {
+      transition: color 0s;
+    }
+  }
+}
+
+.arrow-stroke-container-bottom {
+  width: 100%;
+  height: 8px;
+  .stroke-content {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    background-color: transparent;
+    transform: perspective(20px) rotateX(-20deg) rotateY(0deg) translateZ(0);
+    .arrow-content {
+      width: 60px;
+      height: 5px;
+      position: absolute;
+      left: 50%;
+      bottom: 0px;
+      transform: translateX(-50%);
+      cursor: pointer;
+      &::before {
+        content: '';
+        width: 100%;
+        height: 20px;
+        position: absolute;
+        box-sizing: border-box;
+        bottom: 0;
+        border-bottom-left-radius: 10px;
+        border-bottom-right-radius: 10px;
+        border: 1px solid rgba(143, 154, 178, 0.10);
+        background-color: rgba(15, 16, 20, 0.30);
+      }
+    }
+    &.has-stroke {
+      .arrow-content {
+        width: 60px;
+        height: 5px;
+        position: absolute;
+        left: 50%;
+        bottom: 0px;
+        transform: translateX(-50%);
+        border-left: 1px solid var(--stroke-color);
+        border-bottom: 1px solid var(--stroke-color);
+        border-right: 1px solid var(--stroke-color);
+        border-bottom-left-radius: 4px;
+        border-bottom-right-radius: 4px;
+        cursor: pointer;
+        .arrow {
+          color: #A4BBDB;
+        }
+        &::before {
+          content: '';
+          width: 100%;
+          height: 20px;
+          position: absolute;
+          bottom: 0;
+          border: 0px;
+          background-color: transparent;
+        }
+      }
+      &::before {
+        content: '';
+        width: calc((100% - 60px) / 2);
+        height: 2px;
+        position: absolute;
+        top: 0px;
+        left: 0px;
+        border-top: 1px solid var(--stroke-color);
+        border-right: 1px solid var(--stroke-color);
+        border-top-right-radius: 4px;
+      }
+      &::after {
+        content: '';
+        width: calc((100% - 60px) / 2);
+        height: 2px;
+        position: absolute;
+        top: 0px;
+        right: 0px;
+        border-left: 1px solid var(--stroke-color);
+        border-top: 1px solid var(--stroke-color);
+        border-top-left-radius: 4px;
+      }
+    }
+  }
+  .arrow {
+      position: absolute;
+      left: 50%;
+      bottom: 4px;
+      transform: translateX(-50%);
+      cursor: pointer;
+      color: #D5E0F2;
+      transition: color 0s;
+      svg {
+        transition: color 0s;
+      }
+    }
+}
+
+.up {
+  transform: rotate(90deg);
+}
+.left {
+  transform: rotate(0deg);
+}
+.down {
+  transform: rotate(-90deg);
+}
+.right {
+  transform: rotate(180deg);
+}
+
+</style>