@tencentcloud/roomkit-electron-vue3 2.3.3

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

@@ -0,0 +1,89 @@
+<!-- eslint-disable max-len -->
+<template>
+  <div class="logo-container">
+    <!-- Logo under Chinese black theme on PC -->
+    <div v-if="!isMobile && isZH && isBlackTheme">
+      <svg-icon :icon="LogoOfPCInChineseBlackIcon"></svg-icon>
+    </div>
+    <!-- Logo under Chinese white theme on PC -->
+    <div v-if="!isMobile && isZH && isWhiteTheme">
+      <svg-icon :icon="LogoOfPCInChineseWhiteIcon"></svg-icon>
+    </div>
+    <!-- Mobile Chinese black and white theme logo -->
+    <div v-if="isMobile && isZH" class="mobile-zh-logo">
+      <span class="logo" :class="isWhiteTheme ? 'white' : 'black'">
+        <svg-icon :icon="LogoOfMobileInChinese"></svg-icon>
+      </span>
+      <span class="title">
+        <svg-icon :icon="LogoTitleOfMobileInChinese"></svg-icon>
+      </span>
+    </div>
+    <!-- English black and white theme logo -->
+    <div v-if="isEN" :class="['pc-en-logo', { 'mobile': isMobile }]">
+      <span class="logo">
+        <svg-icon :icon="LogoInEnglish"></svg-icon>
+      </span>
+      <span class="title" :class="isWhiteTheme ? 'white' : 'black'">
+        <svg-icon :icon="LogoTitleInEnglish"></svg-icon>
+      </span>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import i18n from '../../locales/index';
+import { isMobile, isWeChat } from '../../utils/environment';
+import { computed } from 'vue';
+import { useBasicStore } from '../../stores/basic';
+import { storeToRefs } from 'pinia';
+import SvgIcon from './base/SvgIcon.vue';
+import LogoOfPCInChineseBlackIcon from './icons/LogoOfPCInChineseBlackIcon.vue';
+import LogoOfPCInChineseWhiteIcon from './icons/LogoOfPCInChineseWhiteIcon.vue';
+import LogoOfMobileInChinese from './icons/LogoOfMobileInChinese.vue';
+import LogoTitleOfMobileInChinese from './icons/LogoTitleOfMobileInChinese.vue';
+import LogoInEnglish from './icons/LogoInEnglish.vue';
+import LogoTitleInEnglish from './icons/LogoTitleInEnglish.vue';
+
+const basicStore = useBasicStore();
+
+const { defaultTheme } = storeToRefs(basicStore);
+
+const isEN = computed(() => !isWeChat && i18n.global.locale.value === 'en-US');
+const isZH = computed(() => isWeChat || i18n.global.locale.value === 'zh-CN');
+const isBlackTheme = computed(() => defaultTheme.value === 'black');
+const isWhiteTheme = computed(() => defaultTheme.value === 'white');
+
+</script>
+
+<style lang="scss" scoped>
+.pc-en-logo {
+  display: flex;
+  align-items: center;
+  transform: scale(0.9);
+  .title {
+    margin-left: 10px;
+  }
+  .white {
+    color: #202C40;
+  }
+  .black {
+    color: #D5E0F2;
+  }
+  &.mobile {
+    transform: scale(0.6);
+  }
+}
+.mobile-zh-logo {
+  display: flex;
+  flex-direction: column;
+  .logo {
+    margin-bottom: 7px;
+  }
+  .white {
+    color: #000000;
+  }
+  .black {
+    color: #FFFFFF;
+  }
+}
+</style>

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

@@ -0,0 +1,39 @@
+<template>
+  <div class="timing">{{ formattedTime }}</div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted, onUnmounted } from 'vue';
+
+const meetingTime = ref(0);
+let intervalId: any = null;
+
+const formattedTime = computed(() => {
+  const minutes = Math.floor(meetingTime.value / 60);
+  const seconds = meetingTime.value % 60;
+  return `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
+});
+
+function startTimer() {
+  intervalId = setInterval(() => {
+    meetingTime.value += 1;
+  }, 1000);
+}
+
+onMounted(() => {
+  startTimer();
+});
+
+onUnmounted(() => {
+  intervalId && clearInterval(intervalId);
+});
+</script>
+
+<style lang="scss" scoped>
+.timing {
+  text-align: center;
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 20px;
+}
+</style>

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

@@ -0,0 +1,75 @@
+<!--
+  * Name: Switchtheme
+  * Usage:
+  * Use <switch-theme /> in template
+  *
+-->
+<template>
+  <icon-button
+    v-if="visible && switchThemeConfig.visible"
+    :title="t('Switch Theme')"
+    :layout="IconButtonLayout.HORIZONTAL"
+    :icon="SwitchThemeIcon"
+    @click-icon="handleSwitchTheme"
+  >
+  </icon-button>
+</template>
+
+<script setup lang="ts">
+import IconButton from './base/IconButton.vue';
+import SwitchThemeIcon from './icons/SwitchThemeIcon.vue';
+import { IconButtonLayout } from '../../constants/room';
+import { watch } from 'vue';
+import { useBasicStore } from '../../stores/basic';
+import { storeToRefs } from 'pinia';
+import { useI18n } from '../../locales';
+import { roomService } from '../../services';
+const basicStore = useBasicStore();
+const { defaultTheme } = storeToRefs(basicStore);
+const { t } = useI18n();
+const switchThemeConfig = roomService.getComponentConfig('SwitchTheme');
+
+interface Props {
+  visible?: boolean,
+}
+
+withDefaults(defineProps<Props>(), {
+  visible: true,
+});
+
+function handleSwitchTheme() {
+  if (defaultTheme.value === 'white') {
+    basicStore.setDefaultTheme('black');
+  } else if (defaultTheme.value === 'black') {
+    basicStore.setDefaultTheme('white');
+  }
+}
+
+function doSwitchTheme(theme: string) {
+  switch (theme) {
+    case 'black':
+      document.body.classList.remove('tui-theme-white');
+      document.body.classList.add('tui-theme-black');
+      localStorage.setItem('tuiRoom-currentTheme', 'black');
+      break;
+    case 'white':
+      document.body.classList.remove('tui-theme-black');
+      document.body.classList.add('tui-theme-white');
+      localStorage.setItem('tuiRoom-currentTheme', 'white');
+      break;
+  };
+}
+
+const storageCurrentTheme = localStorage.getItem('tuiRoom-currentTheme');
+if (storageCurrentTheme) {
+  basicStore.setDefaultTheme(storageCurrentTheme);
+}
+
+watch(defaultTheme, (val: string) => {
+  doSwitchTheme(val);
+}, { immediate: true });
+
+</script>
+
+<style>
+</style>

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

@@ -0,0 +1,119 @@
+<!--
+  * Name: VideoMediaControl Video media operation component (on/off camera)
+  * @param hasMore boolean Whether to display the [More] icon，which can switch camera
+  * @param isMuted boolean Whether the video is muted or not
+  * @param isDisabled boolean Whether the video is disabled or not
+  * Usage:
+  * Use <video-media-control :isMuted="isMuted" /> in the template
+-->
+<template>
+  <div>
+    <div v-click-outside="handleHideVideoSettingTab" class="video-control-container">
+      <icon-button
+        :title="t('Camera')"
+        :has-more="hasMore"
+        :disabled="isDisabled"
+        :is-not-support="!isSupportVideoMedia"
+        @click-icon="handleClickIcon"
+        @click-more="handleMore"
+      >
+        <svg-icon :icon="icon"></svg-icon>
+      </icon-button>
+      <video-setting-tab
+        v-show="showVideoSettingTab"
+        class="video-tab"
+        :with-mirror="true"
+        theme="white"
+      ></video-setting-tab>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, Ref } from 'vue';
+import IconButton from '../common/base/IconButton.vue';
+import TUIMessageBox from '../common/base/MessageBox/index';
+import SvgIcon from '../common/base/SvgIcon.vue';
+import CameraOnIcon from '../common/icons/CameraOnIcon.vue';
+import CameraOffIcon from '../common/icons/CameraOffIcon.vue';
+import VideoSettingTab from '../common/VideoSettingTab.vue';
+import { useI18n } from '../../locales';
+import vClickOutside from '../../directives/vClickOutside';
+import { isGetUserMediaSupported, isEnumerateDevicesSupported } from '../../utils/mediaAbility';
+
+interface Props {
+  hasMore?: boolean,
+  isMuted: boolean,
+  isDisabled?: boolean,
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  hasMore: true,
+  isMuted: undefined,
+  isDisabled: false,
+});
+
+const emits = defineEmits(['click']);
+
+const { t } = useI18n();
+const showVideoSettingTab: Ref<boolean> = ref(false);
+const isSupportVideoMedia = isGetUserMediaSupported && isEnumerateDevicesSupported;
+
+const icon = computed(() => (props.isMuted ? CameraOffIcon : CameraOnIcon));
+
+async function handleClickIcon() {
+  if (!isSupportVideoMedia) {
+    TUIMessageBox({
+      title: t('Note'),
+      message: t('The current browser does not support capturing video'),
+      confirmButtonText: t('Sure'),
+    });
+    return;
+  }
+  emits('click');
+  showVideoSettingTab.value = false;
+}
+
+function handleMore() {
+  showVideoSettingTab.value = !showVideoSettingTab.value;
+}
+
+function handleHideVideoSettingTab() {
+  if (showVideoSettingTab.value) {
+    showVideoSettingTab.value = false;
+  }
+}
+
+</script>
+
+<style lang="scss" scoped>
+
+$videoTabWidth: 305px;
+
+.video-control-container {
+  position: relative;
+  .video-tab {
+    position: absolute;
+    bottom: calc(100% + 12px);
+    left: -5px;
+    width: $videoTabWidth;
+    background: var(--background-color-1);
+    padding: 20px 20px 24px 20px;
+    border-radius: 8px;
+    box-shadow:
+      0px 2px 4px -3px rgba(32, 77, 141, 0.03),
+      0px 6px 10px 1px rgba(32, 77, 141, 0.06),
+      0px 3px 14px 2px rgba(32, 77, 141, 0.05);
+    &::before {
+      content: '';
+      position: absolute;
+      left: 30px;
+      bottom: -10px;
+      border-top: 5px solid var(--background-color-1);
+      border-left: 5px solid transparent;
+      border-right: 5px solid transparent;
+      border-bottom: 5px solid transparent;
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,64 @@
+<!--
+  * Name: DeviceSelect
+  * @param deviceType String required
+  * @param size String 'large'|'medium'|'small'
+  * Usage:
+  * Use <device-select></device-select> in template
+  *
+-->
+<template>
+  <tui-select
+    v-model="localVideoQuality"
+    placeholder="placeholder"
+    class="select"
+    :teleported="false"
+    :popper-append-to-body="false"
+  >
+    <tui-option
+      v-for="(item, index) in videoProfileList"
+      :key="index"
+      :label="item.label"
+      :value="item.value"
+    />
+  </tui-select>
+</template>
+
+<script setup lang="ts">
+import { computed, watch } from 'vue';
+import { useI18n } from '../../locales';
+import TuiSelect from './base/Select.vue';
+import TuiOption from './base/Option.vue';
+
+import TUIRoomEngine, { TUIVideoQuality } from '@tencentcloud/tuiroom-engine-electron';
+import { useRoomStore } from '../../stores/room';
+import useGetRoomEngine from '../../hooks/useRoomEngine';
+import { storeToRefs } from 'pinia';
+
+const roomEngine = useGetRoomEngine();
+const roomStore = useRoomStore();
+const { localVideoQuality } = storeToRefs(roomStore);
+
+const { t } = useI18n();
+
+const videoProfileList = computed(() => [
+  { label: t('Low Definition'), value: TUIVideoQuality.kVideoQuality_360p },
+  { label: t('Standard Definition'), value: TUIVideoQuality.kVideoQuality_540p },
+  { label: t('High Definition'), value: TUIVideoQuality.kVideoQuality_720p },
+  { label: t('Super Definition'), value: TUIVideoQuality.kVideoQuality_1080p }]);
+
+watch(localVideoQuality, (val: TUIVideoQuality) => {
+  roomEngine.instance?.updateVideoQuality({ quality: val });
+});
+
+TUIRoomEngine.once('ready', () => {
+  roomEngine.instance?.updateVideoQuality({ quality: localVideoQuality.value });
+});
+</script>
+
+<style lang="scss" scoped>
+
+.select {
+  width: 100%;
+  font-size: 14px;
+}
+</style>

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

@@ -0,0 +1,158 @@
+<!--
+  * Name: VideoTab
+  * @param name String required
+  * @param size String 'large'|'medium'|'small'
+  * Usage:
+  * Use <video-tab></video-tab> in the template
+  *
+-->
+<template>
+  <div :class="['video-tab', themeClass]">
+    <div class="item-setting">
+      <span class="title">{{ t('Camera') }}</span>
+      <device-select device-type="camera"></device-select>
+    </div>
+    <div v-if="withPreview" class="item-setting">
+      <span class="title">{{ t('Preview') }}</span>
+      <div class="video-preview-container">
+        <div id="test-camera-preview" class="video-preview"></div>
+      </div>
+    </div>
+    <div class="item-setting">
+      <span class="title">{{ t('Resolution') }}</span>
+      <video-profile></video-profile>
+    </div>
+    <div class="mirror-container">
+      <span>{{ t('Mirror') }}</span>
+      <tui-switch v-model="isLocalStreamMirror"></tui-switch>
+    </div>
+    <div v-if="withMore" class="item-setting">
+      <div class="item" @click="handleMoreCameraSetting">{{ t('More Camera Settings') }}</div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, Ref, watch, onMounted, onUnmounted, computed } from 'vue';
+import DeviceSelect from './DeviceSelect.vue';
+import VideoProfile from './VideoProfile.vue';
+import TuiSwitch from './base/TuiSwitch.vue';
+import { useBasicStore } from '../../stores/basic';
+import { useI18n } from '../../locales';
+
+import useGetRoomEngine from '../../hooks/useRoomEngine';
+import { TRTCVideoMirrorType, TRTCVideoRotation, TRTCVideoFillMode } from '@tencentcloud/tuiroom-engine-electron';
+import { isElectron, isMobile }  from '../../utils/environment';
+import { storeToRefs } from 'pinia';
+const roomEngine = useGetRoomEngine();
+
+interface Props {
+  withPreview?: boolean,
+  withMore?: boolean,
+  withMirror?: boolean,
+  theme?: 'white' | 'black',
+}
+const props = defineProps<Props>();
+
+const basicStore = useBasicStore();
+const { isLocalStreamMirror } = storeToRefs(basicStore);
+
+const themeClass = computed(() => (props.theme ? `tui-theme-${props.theme}` : ''));
+
+watch(isLocalStreamMirror, async (val: boolean) => {
+  const trtcCloud = roomEngine.instance?.getTRTCCloud();
+  if (!isMobile) {
+    await trtcCloud?.setLocalRenderParams({
+      mirrorType: val
+        ? TRTCVideoMirrorType.TRTCVideoMirrorType_Enable : TRTCVideoMirrorType.TRTCVideoMirrorType_Disable,
+      rotation: TRTCVideoRotation.TRTCVideoRotation0,
+      fillMode: TRTCVideoFillMode.TRTCVideoFillMode_Fill,
+    });
+  }
+});
+
+const { t } = useI18n();
+
+/**
+ * Click [More Camera Settings].
+**/
+function handleMoreCameraSetting() {
+  basicStore.setShowSettingDialog(true);
+  basicStore.setActiveSettingTab('video');
+}
+
+if (props.withPreview) {
+  onMounted(async () => {
+    roomEngine.instance?.startCameraDeviceTest({ view: 'test-camera-preview' });
+    if (isElectron) {
+      // Electron requires mirrorType to be set for the first time
+      const trtcCloud = roomEngine.instance?.getTRTCCloud();
+      await trtcCloud?.setLocalRenderParams({
+        mirrorType: isLocalStreamMirror.value
+          ? TRTCVideoMirrorType.TRTCVideoMirrorType_Enable : TRTCVideoMirrorType.TRTCVideoMirrorType_Disable,
+        rotation: TRTCVideoRotation.TRTCVideoRotation0,
+        fillMode: TRTCVideoFillMode.TRTCVideoFillMode_Fill,
+      });
+    }
+  });
+
+  onUnmounted(() => {
+    roomEngine.instance?.stopCameraDeviceTest();
+  });
+}
+
+</script>
+
+<style lang="scss" scoped>
+.video-tab {
+  border-radius: 8px;
+  font-size: 14px;
+  .item-setting {
+    &:not(:last-child) {
+      margin-bottom: 20px;
+    }
+  }
+  .title {
+    display: inline-block;
+    margin-bottom: 8px;
+    width: 100%;
+    color: var(--font-color-4);
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 22px;
+  }
+  .video-preview-container {
+    position: relative;
+    width: 100%;
+    height: 0;
+    padding-top: calc(100% * 9 / 16);
+    background-color: #000000;
+    border-radius: 8px;
+    overflow: hidden;
+    .video-preview {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+    }
+  }
+  .mirror-container {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    color: var(--font-color-4);
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 22px;
+    padding-right: 2px;
+  }
+  .item {
+    width: 100%;
+    height: 20px;
+    cursor: pointer;
+    color: var(--font-color-3);
+  }
+}
+</style>

package/src/TUIRoom/components/common/base/Badge.vue

@@ -0,0 +1,79 @@
+<template>
+  <div :class="badgeClass">
+    <slot></slot>
+    <sup v-if="showBadge" class="tui-badge-count">{{ content }}</sup>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed } from 'vue';
+
+interface Props {
+  type?: 'primary' | 'danger';
+  value?: string | number;
+  max?: number;
+  hidden?: boolean;
+  isDot?: boolean;
+}
+const props = withDefaults(defineProps<Props>(), {
+  type: 'primary',
+  value: '',
+  max: 99,
+  hidden: false,
+  isDot: false,
+});
+
+const showBadge = computed(() => !props.hidden && (props.value || props.isDot));
+
+const content = computed(() => {
+  if (props.isDot) return '';
+  if (typeof props.value === 'number' && typeof props.max === 'number') {
+    return props.value > props.max ? `${props.max}+` : props.value;
+  }
+  return props.value;
+});
+
+const badgeClass = computed(() => ['tui-badge', `tui-badge-${props.type}`, props.isDot ? 'tui-badge-isDot' : '']);
+</script>
+
+<style lang="scss" scoped>
+.tui-badge {
+  position: relative;
+  display: inline-block;
+
+  .tui-badge-count {
+    position: absolute;
+    top: 0;
+    right: 15px;
+    display: inline-block;
+    padding: 1px 6px;
+    font-size: 12px;
+    color: var(--white-color);
+    transform: translateY(-50%) translateX(100%);
+    font-weight: bold;
+    border-radius: 10px;
+  }
+}
+
+.tui-badge-primary {
+  .tui-badge-count {
+    background-color: var(--active-color-1);
+  }
+}
+
+.tui-badge-danger {
+  .tui-badge-count {
+    background-color: var(--red-color-2);
+  }
+}
+
+.tui-badge-isDot {
+  .tui-badge-count {
+    top: 0;
+    height: 8px;
+    width: 8px;
+    padding: 0;
+    border-radius: 50%;
+  }
+}
+</style>