@tencentcloud/roomkit-electron-vue3 2.5.0 → 2.6.0

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

@@ -10,10 +10,7 @@
     <div class="item-setting">
       <span class="title">{{ t('Mic') }}</span>
       <div class="flex">
-        <device-select
-          class="select"
-          device-type="microphone"
-        ></device-select>
+        <device-select class="select" device-type="microphone" />
         <tui-button
           v-if="isDetailMode"
           class="button"
@@ -30,19 +27,21 @@
         <div
           v-for="(item, index) in new Array(volumeTotalNum).fill('')"
           :key="index"
-          :class="['mic-bar', `${showVolume && volumeNum > index ? 'active' : ''}`]"
-        >
-        </div>
+          :class="[
+            'mic-bar',
+            `${showVolume && volumeNum > index ? 'active' : ''}`,
+          ]"
+        ></div>
       </div>
     </div>
-    <div v-if="(speakerList.length > 0)" class="item-setting">
+    <div v-if="speakerList.length > 0" class="item-setting">
       <span class="title">{{ t('Speaker') }}</span>
       <div class="flex">
         <device-select
           class="select"
           device-type="speaker"
           :disabled="mode === SettingMode.DETAIL"
-        ></device-select>
+        />
         <tui-button
           v-if="isDetailMode"
           class="button"
@@ -57,7 +56,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed, onBeforeUnmount } from 'vue';
+import { ref, computed, onBeforeUnmount, defineProps } from 'vue';
 import DeviceSelect from './DeviceSelect.vue';
 import { useRoomStore } from '../../stores/room';
 import { SettingMode } from '../../constants/render';
@@ -68,11 +67,10 @@ import { isElectron } from '../../utils/environment';
 import useGetRoomEngine from '../../hooks/useRoomEngine';
 import TuiButton from '../common/base/Button.vue';
 
-
 interface Props {
-  mode?: SettingMode,
-  audioVolume?: number,
-  theme?: string,
+  mode?: SettingMode;
+  audioVolume?: number;
+  theme?: string;
 }
 const props = defineProps<Props>();
 const settingMode = props.mode || SettingMode.SIMPLE;
@@ -86,35 +84,41 @@ const { speakerList, userVolumeObj, currentSpeakerId } = storeToRefs(roomStore);
 const roomEngine = useGetRoomEngine();
 const trtcCloud = roomEngine.instance?.getTRTCCloud();
 
-const themeClass = computed(() => (props.theme ? `tui-theme-${props.theme}` : ''));
+const themeClass = computed(() =>
+  props.theme ? `tui-theme-${props.theme}` : ''
+);
 
 const volumeTotalNum = computed(() => (isDetailMode.value ? 36 : 28));
 
 const volumeNum = computed(() => {
   const volume = props.audioVolume || userVolumeObj.value[userId.value] || 0;
-  return volume * volumeTotalNum.value / 100;
+  return (volume * volumeTotalNum.value) / 100;
 });
 
-const showVolume = computed(() => isSampleMode.value || (isDetailMode.value && isTestingMicrophone.value));
+const showVolume = computed(
+  () => isSampleMode.value || (isDetailMode.value && isTestingMicrophone.value)
+);
 
 const isTestingMicrophone = ref(false);
 
 /**
  * Click on the microphone [Test] button
-**/
+ **/
 function handleMicrophoneTest() {
   isTestingMicrophone.value = !isTestingMicrophone.value;
 }
 
 const isTestingSpeaker = ref(false);
 const audioPlayer = document?.createElement('audio');
+audioPlayer.loop = true;
 const { t } = useI18n();
 
 /**
  * Click on the speaker [Test] button
-**/
+ **/
 async function handleSpeakerTest() {
-  const SPEAKER_TEST_URL = 'https://web.sdk.qcloud.com/trtc/electron/download/resources/media/TestSpeaker.mp3';
+  const SPEAKER_TEST_URL =
+    'https://web.sdk.qcloud.com/trtc/electron/download/resources/media/TestSpeaker.mp3';
   isTestingSpeaker.value = !isTestingSpeaker.value;
   const isStartSpeakerTest = isTestingSpeaker.value;
   if (isElectron) {
@@ -130,7 +134,6 @@ async function handleSpeakerTest() {
     return;
   }
   if (isStartSpeakerTest) {
-    // @ts-ignore
     await audioPlayer?.setSinkId(currentSpeakerId.value);
     audioPlayer.src = SPEAKER_TEST_URL;
     audioPlayer.play();
@@ -147,57 +150,67 @@ onBeforeUnmount(() => {
   }
   audioPlayer && audioPlayer.pause();
 });
-
 </script>
 
 <style lang="scss" scoped>
 .audio-setting-tab {
-  border-radius: 4px;
-  font-size: 14px;
   width: 100%;
+  font-size: 14px;
+  border-radius: 4px;
+
   .item-setting {
     width: 100%;
+
     &:not(:last-child) {
       margin-bottom: 20px;
     }
   }
+
   .flex {
-    width: 100%;
     display: flex;
+    width: 100%;
   }
+
   .select {
     flex: 1;
   }
+
   .button {
-    margin-left: 10px;
-    padding: 5px 23px;
     width: 74px;
+    padding: 5px 23px;
+    margin-left: 10px;
   }
+
   .title {
     display: inline-block;
-    margin-bottom: 8px;
     width: 100%;
-    color: #4f586b;
+    margin-bottom: 8px;
     font-size: 14px;
     font-weight: 400;
     line-height: 22px;
+    color: #4f586b;
   }
+
   .mic-bar-container {
     display: flex;
     justify-content: space-between;
+
     .mic-bar {
       width: 3px;
       height: 6px;
       background-color: var(--background-color-4);
+
       &.active {
         background-color: var(--green-color);
       }
     }
   }
+
   .audio-level-container {
+    display: flex;
     width: 100%;
     height: 20px;
-    display: flex;
+
     .slider {
       height: 20px;
       margin-left: 10px;

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

@@ -5,8 +5,8 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed } from "vue";
-import defaultAvatar from "../../assets/imgs/avatar.png";
+import { ref, computed } from 'vue';
+import defaultAvatar from '../../assets/imgs/avatar.png';
 
 interface Props {
   imgSrc?: string | undefined;
@@ -29,13 +29,14 @@ function handleError() {
   position: relative;
   width: 100%;
   height: 100%;
+
   .avatar {
     position: absolute;
     top: 0;
     left: 0;
-    border-radius: 50%;
     width: 100%;
     height: 100%;
+    border-radius: 50%;
   }
 }
 </style>

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

@@ -25,20 +25,24 @@
 </template>
 
 <script setup lang="ts">
-import { ref, Ref, watch } from 'vue';
+import { ref, Ref, watch, defineProps } from 'vue';
 import { useRoomStore } from '../../stores/room';
 import { storeToRefs } from 'pinia';
-import TuiSelect from './base/Select.vue';
-import TuiOption from './base/Option.vue';
+import TuiSelect from './base/Select/index.vue';
+import TuiOption from './base/Option/index.vue';
 
-import { TRTCDeviceInfo, TUIDeviceInfo, TUIMediaDeviceType } from '@tencentcloud/tuiroom-engine-electron';
+import {
+  TRTCDeviceInfo,
+  TUIDeviceInfo,
+  TUIMediaDeviceType,
+} from '@tencentcloud/tuiroom-engine-electron';
 import useDeviceManager from '../../hooks/useDeviceManager';
 const { deviceManager } = useDeviceManager();
 
 interface Props {
-  deviceType: string,
-  onChange?: (id: string) => void,
-  disabled?: boolean
+  deviceType: string;
+  onChange?: (id: string) => void;
+  disabled?: boolean;
 }
 // eslint-disable-next-line vue/no-setup-props-destructure
 const { deviceType, onChange, disabled = false } = defineProps<Props>();
@@ -53,7 +57,6 @@ const {
   currentSpeakerId,
 } = storeToRefs(roomStore);
 
-// @ts-ignore
 const deviceList: Ref<TRTCDeviceInfo[]> = ref(getDeviceList());
 const currentDeviceId = ref(getInitDeviceId());
 
@@ -71,27 +74,39 @@ function getInitDeviceId() {
 }
 
 if (deviceType === 'camera') {
-  watch(currentCameraId, (val) => {
-    if (currentDeviceId.value !== val) {
-      currentDeviceId.value = val;
-    }
-  }, { immediate: true });
+  watch(
+    currentCameraId,
+    val => {
+      if (currentDeviceId.value !== val) {
+        currentDeviceId.value = val;
+      }
+    },
+    { immediate: true }
+  );
 }
 
 if (deviceType === 'microphone') {
-  watch(currentMicrophoneId, (val) => {
-    if (currentDeviceId.value !== val) {
-      currentDeviceId.value = val;
-    }
-  }, { immediate: true });
+  watch(
+    currentMicrophoneId,
+    val => {
+      if (currentDeviceId.value !== val) {
+        currentDeviceId.value = val;
+      }
+    },
+    { immediate: true }
+  );
 }
 
 if (deviceType === 'speaker') {
-  watch(currentSpeakerId, (val) => {
-    if (currentDeviceId.value !== val) {
-      currentDeviceId.value = val;
-    }
-  }, { immediate: true });
+  watch(
+    currentSpeakerId,
+    val => {
+      if (currentDeviceId.value !== val) {
+        currentDeviceId.value = val;
+      }
+    },
+    { immediate: true }
+  );
 }
 
 function getDeviceList() {
@@ -118,7 +133,11 @@ async function handleChange(deviceId: string) {
         });
         roomStore.setCurrentCameraId(deviceId);
       } catch (error) {
-        if (cameraList.value.map((item: TUIDeviceInfo) => item.deviceId).includes(currentCameraId.value)) {
+        if (
+          cameraList.value
+            .map((item: TUIDeviceInfo) => item.deviceId)
+            .includes(currentCameraId.value)
+        ) {
           currentDeviceId.value = currentCameraId.value;
         }
       }
@@ -131,7 +150,11 @@ async function handleChange(deviceId: string) {
         });
         roomStore.setCurrentMicrophoneId(deviceId);
       } catch (error) {
-        if (microphoneList.value.map((item: TUIDeviceInfo) => item.deviceId).includes(currentMicrophoneId.value)) {
+        if (
+          microphoneList.value
+            .map((item: TUIDeviceInfo) => item.deviceId)
+            .includes(currentMicrophoneId.value)
+        ) {
           currentDeviceId.value = currentMicrophoneId.value;
         }
       }
@@ -144,7 +167,11 @@ async function handleChange(deviceId: string) {
         });
         roomStore.setCurrentSpeakerId(deviceId);
       } catch (error) {
-        if (speakerList.value.map((item: TUIDeviceInfo) => item.deviceId).includes(currentSpeakerId.value)) {
+        if (
+          speakerList.value
+            .map((item: TUIDeviceInfo) => item.deviceId)
+            .includes(currentSpeakerId.value)
+        ) {
           currentDeviceId.value = currentSpeakerId.value;
         }
       }

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

@@ -5,8 +5,7 @@
     :layout="IconButtonLayout.HORIZONTAL"
     :icon="LanguageIcon"
     @click-icon="handleChange"
-  >
-  </icon-button>
+  />
 </template>
 
 <script setup lang="ts">
@@ -20,25 +19,16 @@ import { roomService } from '../../services';
 
 const basicStore = useBasicStore();
 
-const title = computed(() => (basicStore.lang === 'en-US' ? 'English' : '中文'));
+const title = computed(() =>
+  basicStore.lang === 'en-US' ? 'English' : '中文'
+);
 const languageConfig = roomService.getComponentConfig('Language');
 
-const handleChange = (): void => {
-  switch (i18n.global.locale.value) {
-    case 'en-US':
-      i18n.global.locale.value = 'zh-CN';
-      basicStore.setLang('zh-CN');
-      localStorage.setItem('tuiRoom-language', 'zh-CN');
-      break;
-    case 'zh-CN':
-      i18n.global.locale.value = 'en-US';
-      basicStore.setLang('en-US');
-      localStorage.setItem('tuiRoom-language', 'en-US');
-      break;
-  }
+const handleChange = () => {
+  roomService.setLanguage(
+    i18n.global.locale.value === 'en-US' ? 'zh-CN' : 'en-US'
+  );
 };
-
 </script>
 
-<style>
-</style>
+<style></style>

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

@@ -3,28 +3,28 @@
   <div class="logo-container">
     <!-- Logo under Chinese black theme on PC -->
     <div v-if="!isMobile && isZH && isBlackTheme">
-      <svg-icon :icon="LogoOfPCInChineseBlackIcon"></svg-icon>
+      <svg-icon :icon="LogoOfPCInChineseBlackIcon" />
     </div>
     <!-- Logo under Chinese white theme on PC -->
     <div v-if="!isMobile && isZH && isWhiteTheme">
-      <svg-icon :icon="LogoOfPCInChineseWhiteIcon"></svg-icon>
+      <svg-icon :icon="LogoOfPCInChineseWhiteIcon" />
     </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>
+        <svg-icon :icon="LogoOfMobileInChinese" />
       </span>
       <span class="title">
-        <svg-icon :icon="LogoTitleOfMobileInChinese"></svg-icon>
+        <svg-icon :icon="LogoTitleOfMobileInChinese" />
       </span>
     </div>
     <!-- English black and white theme logo -->
-    <div v-if="isEN" :class="['pc-en-logo', { 'mobile': isMobile }]">
+    <div v-if="isEN" :class="['pc-en-logo', { mobile: isMobile }]">
       <span class="logo">
-        <svg-icon :icon="LogoInEnglish"></svg-icon>
+        <svg-icon :icon="LogoInEnglish" />
       </span>
       <span class="title" :class="isWhiteTheme ? 'white' : 'black'">
-        <svg-icon :icon="LogoTitleInEnglish"></svg-icon>
+        <svg-icon :icon="LogoTitleInEnglish" />
       </span>
     </div>
   </div>
@@ -52,7 +52,6 @@ const isEN = computed(() => i18n.global.locale.value === 'en-US');
 const isZH = computed(() => i18n.global.locale.value === 'zh-CN');
 const isBlackTheme = computed(() => defaultTheme.value === 'black');
 const isWhiteTheme = computed(() => defaultTheme.value === 'white');
-
 </script>
 
 <style lang="scss" scoped>
@@ -60,30 +59,38 @@ const isWhiteTheme = computed(() => defaultTheme.value === 'white');
   display: flex;
   align-items: center;
   transform: scale(0.9);
+
   .title {
     margin-left: 10px;
   }
+
   .white {
-    color: #202C40;
+    color: #202c40;
   }
+
   .black {
-    color: #D5E0F2;
+    color: #d5e0f2;
   }
+
   &.mobile {
     transform: scale(0.6);
   }
 }
+
 .mobile-zh-logo {
   display: flex;
   flex-direction: column;
+
   .logo {
     margin-bottom: 7px;
   }
+
   .white {
-    color: #000000;
+    color: #000;
   }
+
   .black {
-    color: #FFFFFF;
+    color: #fff;
   }
 }
 </style>

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

@@ -31,9 +31,9 @@ onUnmounted(() => {
 
 <style lang="scss" scoped>
 .timing {
-  text-align: center;
   font-size: 14px;
   font-weight: 500;
   line-height: 20px;
+  text-align: center;
 }
 </style>

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

@@ -11,26 +11,23 @@
     :layout="IconButtonLayout.HORIZONTAL"
     :icon="SwitchThemeIcon"
     @click-icon="handleSwitchTheme"
-  >
-  </icon-button>
+  />
 </template>
 
 <script setup lang="ts">
+import { withDefaults, defineProps } from 'vue';
 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,
+  visible?: boolean;
 }
 
 withDefaults(defineProps<Props>(), {
@@ -38,38 +35,8 @@ withDefaults(defineProps<Props>(), {
 });
 
 function handleSwitchTheme() {
-  if (defaultTheme.value === 'white') {
-    basicStore.setDefaultTheme('black');
-  } else if (defaultTheme.value === 'black') {
-    basicStore.setDefaultTheme('white');
-  }
+  roomService.setTheme(basicStore.defaultTheme === 'white' ? 'black' : '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>
+<style></style>

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

@@ -8,7 +8,10 @@
 -->
 <template>
   <div>
-    <div v-click-outside="handleHideVideoSettingTab" class="video-control-container">
+    <div
+      v-click-outside="handleHideVideoSettingTab"
+      class="video-control-container"
+    >
       <icon-button
         :title="t('Camera')"
         :has-more="hasMore"
@@ -17,14 +20,14 @@
         @click-icon="handleClickIcon"
         @click-more="handleMore"
       >
-        <svg-icon :icon="icon"></svg-icon>
+        <svg-icon :icon="icon" />
       </icon-button>
       <video-setting-tab
         v-show="showVideoSettingTab"
         class="video-tab"
         :with-mirror="true"
         theme="white"
-      ></video-setting-tab>
+      />
     </div>
   </div>
 </template>
@@ -39,12 +42,15 @@ 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';
+import {
+  isGetUserMediaSupported,
+  isEnumerateDevicesSupported,
+} from '../../utils/mediaAbility';
 
 interface Props {
-  hasMore?: boolean,
-  isMuted: boolean,
-  isDisabled?: boolean,
+  hasMore?: boolean;
+  isMuted: boolean;
+  isDisabled?: boolean;
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -57,7 +63,8 @@ const emits = defineEmits(['click']);
 
 const { t } = useI18n();
 const showVideoSettingTab: Ref<boolean> = ref(false);
-const isSupportVideoMedia = isGetUserMediaSupported && isEnumerateDevicesSupported;
+const isSupportVideoMedia =
+  isGetUserMediaSupported && isEnumerateDevicesSupported;
 
 const icon = computed(() => (props.isMuted ? CameraOffIcon : CameraOnIcon));
 
@@ -83,36 +90,36 @@ function handleHideVideoSettingTab() {
     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;
+    padding: 20px 20px 24px;
     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);
+      0 2px 4px -3px rgba(32, 77, 141, 0.03),
+      0 6px 10px 1px rgba(32, 77, 141, 0.06),
+      0 3px 14px 2px rgba(32, 77, 141, 0.05);
+
     &::before {
-      content: '';
       position: absolute;
-      left: 30px;
       bottom: -10px;
+      left: 30px;
+      content: '';
       border-top: 5px solid var(--background-color-1);
-      border-left: 5px solid transparent;
       border-right: 5px solid transparent;
       border-bottom: 5px solid transparent;
+      border-left: 5px solid transparent;
     }
   }
 }