@tencentcloud/roomkit-electron-vue3 2.3.3

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

@@ -0,0 +1,87 @@
+<template>
+  <div :class="['audio-icon-container', `${size == 'small' && 'small' }`]">
+    <div class="audio-level-container">
+      <div class="audio-level" :style="audioLevelStyle"></div>
+    </div>
+    <svg-icon class="audio-icon" :icon="icon" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import SvgIcon from './base/SvgIcon.vue';
+import { useRoomStore } from '../../stores/room';
+import { storeToRefs } from 'pinia';
+import { isUndefined } from '../../utils/utils';
+import MicOnIcon from './icons/MicOnIcon.vue';
+import MicOffIcon from './icons/MicOffIcon.vue';
+
+interface Props {
+  userId?: string,
+  audioVolume?: number,
+  isMuted?: boolean,
+  size?: string,
+  isDisabled?: boolean,
+}
+
+const roomStore = useRoomStore();
+const { userVolumeObj } = storeToRefs(roomStore);
+
+const currentAudioVolume = computed(() => {
+  if (!isUndefined(props.audioVolume)) {
+    return props.audioVolume;
+  }
+  if (userVolumeObj.value && props.userId) {
+    return userVolumeObj.value[props.userId];
+  }
+  return 0;
+});
+
+const props = defineProps<Props>();
+
+const icon = computed(() => (props.isMuted ? MicOffIcon : MicOnIcon));
+
+const audioLevelStyle = computed(() => {
+  if (props.isMuted || !currentAudioVolume.value) {
+    return '';
+  }
+  return `height: ${currentAudioVolume.value * 4}%`;
+});
+
+</script>
+
+<style lang="scss" scoped>
+.audio-icon-container {
+  position: relative;
+  width: 24px;
+  height: 24px;
+  &.small {
+    transform: scale(0.8);
+  }
+  .audio-level-container {
+    position: absolute;
+    top: 2px;
+    left: 7px;
+    width: 10px;
+    height: 14px;
+    display: flex;
+    flex-wrap: wrap;
+    border-radius: 4px;
+    overflow: hidden;
+    flex-direction: column-reverse;
+    justify-content: space-between;
+    .audio-level {
+      width: 100%;
+      background-color: var(--green-color);
+      transition: height 0.2s;
+    }
+  }
+
+  .audio-icon {
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
+}
+
+</style>

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

@@ -0,0 +1,120 @@
+<!--
+  * Name: AudioMediaControl Audio media operation component (on/off microphone)
+  * @param hasMore boolean Whether to display the [More] icon，which can switch microphone and speaker
+  * @param isMuted boolean Whether the audio is muted or not
+  * @param isDisabled boolean Whether the audio is disabled or not
+  * Usage:
+  * Use <audio-media-control /> in the template
+-->
+<template>
+  <div>
+    <div v-click-outside="handleHideAudioSettingTab" class="audio-control-container">
+      <icon-button
+        :title="t('Mic')"
+        :has-more="hasMore"
+        :disabled="isDisabled"
+        :is-not-support="!isSupportAudioMedia"
+        @click-icon="handleClickIcon"
+        @click-more="handleMore"
+      >
+        <audio-icon
+          :audio-volume="audioVolume"
+          :is-muted="isMuted"
+          :is-disabled="isDisabled"
+        ></audio-icon>
+      </icon-button>
+      <audio-setting-tab
+        v-show="showAudioSettingTab"
+        theme="white"
+        class="audio-tab"
+        :audio-volume="audioVolume"
+      ></audio-setting-tab>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, Ref } from 'vue';
+import IconButton from '../common/base/IconButton.vue';
+import TUIMessageBox from '../common/base/MessageBox/index';
+import AudioSettingTab from '../common/AudioSettingTab.vue';
+import AudioIcon from '../common/AudioIcon.vue';
+import { useI18n } from '../../locales';
+import vClickOutside from '../../directives/vClickOutside';
+import { isGetUserMediaSupported, isEnumerateDevicesSupported } from '../../utils/mediaAbility';
+
+interface Props {
+  hasMore?: boolean,
+  isMuted: boolean,
+  isDisabled?: boolean,
+  audioVolume: number,
+}
+
+withDefaults(defineProps<Props>(), {
+  hasMore: true,
+  isDisabled: false,
+  audioVolume: 0,
+});
+const emits = defineEmits(['click']);
+
+const showAudioSettingTab: Ref<boolean> = ref(false);
+const isSupportAudioMedia = isGetUserMediaSupported && isEnumerateDevicesSupported;
+const { t } = useI18n();
+
+async function handleClickIcon() {
+  if (!isSupportAudioMedia) {
+    TUIMessageBox({
+      title: t('Note'),
+      message: t('The current browser does not support capturing audio'),
+      confirmButtonText: t('Sure'),
+    });
+    return;
+  }
+  emits('click');
+  showAudioSettingTab.value = false;
+}
+
+function handleMore() {
+  showAudioSettingTab.value = !showAudioSettingTab.value;
+}
+
+function handleHideAudioSettingTab() {
+  if (showAudioSettingTab.value) {
+    showAudioSettingTab.value = false;
+  }
+}
+
+</script>
+
+<style lang="scss" scoped>
+
+$audioTabWidth: 305px;
+
+.audio-control-container {
+  position: relative;
+  .audio-tab {
+    position: absolute;
+    bottom: calc(100% + 12px);
+    left: -5px;
+    width: $audioTabWidth;
+    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: 28px;
+      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/AudioSettingTab.vue

@@ -0,0 +1,207 @@
+<!--
+  * Name: VideoTab
+  * @param name String required
+  * @param size String 'large'|'medium'|'small'
+  * Usage:
+  * Use <video-tab></video-tab> in the template
+-->
+<template>
+  <div :class="['audio-setting-tab', themeClass]">
+    <div class="item-setting">
+      <span class="title">{{ t('Mic') }}</span>
+      <div class="flex">
+        <device-select
+          class="select"
+          device-type="microphone"
+        ></device-select>
+        <tui-button
+          v-if="isDetailMode"
+          class="button"
+          type="primary"
+          @click="handleMicrophoneTest"
+        >
+          {{ isTestingMicrophone ? t('Stop') : t('Test') }}
+        </tui-button>
+      </div>
+    </div>
+    <div class="item-setting">
+      <span class="title">{{ t('Output') }}</span>
+      <div class="mic-bar-container">
+        <div
+          v-for="(item, index) in new Array(volumeTotalNum).fill('')"
+          :key="index"
+          :class="['mic-bar', `${showVolume && volumeNum > index ? 'active' : ''}`]"
+        >
+        </div>
+      </div>
+    </div>
+    <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"
+          type="primary"
+          @click="handleSpeakerTest"
+        >
+          {{ isTestingSpeaker ? t('Stop') : t('Test') }}
+        </tui-button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onBeforeUnmount } from 'vue';
+import DeviceSelect from './DeviceSelect.vue';
+import { useRoomStore } from '../../stores/room';
+import { SettingMode } from '../../constants/render';
+import { useI18n } from '../../locales';
+import { storeToRefs } from 'pinia';
+import { useBasicStore } from '../../stores/basic';
+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,
+}
+const props = defineProps<Props>();
+const settingMode = props.mode || SettingMode.SIMPLE;
+const isSampleMode = computed(() => settingMode === SettingMode.SIMPLE);
+const isDetailMode = computed(() => settingMode === SettingMode.DETAIL);
+
+const basicStore = useBasicStore();
+const { userId } = storeToRefs(basicStore);
+const roomStore = useRoomStore();
+const { speakerList, userVolumeObj, currentSpeakerId } = storeToRefs(roomStore);
+const roomEngine = useGetRoomEngine();
+const trtcCloud = roomEngine.instance?.getTRTCCloud();
+
+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;
+});
+
+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');
+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';
+  isTestingSpeaker.value = !isTestingSpeaker.value;
+  const isStartSpeakerTest = isTestingSpeaker.value;
+  if (isElectron) {
+    if (isStartSpeakerTest) {
+      trtcCloud?.startSpeakerDeviceTest(SPEAKER_TEST_URL);
+    } else {
+      trtcCloud?.stopSpeakerDeviceTest();
+    }
+    return;
+  }
+
+  if (!audioPlayer) {
+    return;
+  }
+  if (isStartSpeakerTest) {
+    // @ts-ignore
+    await audioPlayer?.setSinkId(currentSpeakerId.value);
+    audioPlayer.src = SPEAKER_TEST_URL;
+    audioPlayer.play();
+  } else {
+    audioPlayer.pause();
+    audioPlayer.currentTime = 0;
+  }
+}
+
+onBeforeUnmount(() => {
+  if (isElectron) {
+    trtcCloud?.stopSpeakerDeviceTest();
+    return;
+  }
+  audioPlayer && audioPlayer.pause();
+});
+
+</script>
+
+<style lang="scss" scoped>
+.audio-setting-tab {
+  border-radius: 4px;
+  font-size: 14px;
+  width: 100%;
+  .item-setting {
+    width: 100%;
+    &:not(:last-child) {
+      margin-bottom: 20px;
+    }
+  }
+  .flex {
+    width: 100%;
+    display: flex;
+  }
+  .select {
+    flex: 1;
+  }
+  .button {
+    margin-left: 10px;
+    padding: 5px 23px;
+    width: 74px;
+  }
+  .title {
+    display: inline-block;
+    margin-bottom: 8px;
+    width: 100%;
+    color: #4f586b;
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 22px;
+  }
+  .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 {
+    width: 100%;
+    height: 20px;
+    display: flex;
+    .slider {
+      height: 20px;
+      margin-left: 10px;
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,41 @@
+<template>
+  <div class="avatar-container">
+    <img class="avatar" :src="src" :onerror="handleError" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from "vue";
+import defaultAvatar from "../../assets/imgs/avatar.png";
+
+interface Props {
+  imgSrc?: string | undefined;
+}
+const props = defineProps<Props>();
+const src = computed(() => {
+  if (isError.value) {
+    return defaultAvatar;
+  }
+  return props.imgSrc || defaultAvatar;
+});
+const isError = ref(false);
+function handleError() {
+  isError.value = true;
+}
+</script>
+
+<style lang="scss" scoped>
+.avatar-container {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  .avatar {
+    position: absolute;
+    top: 0;
+    left: 0;
+    border-radius: 50%;
+    width: 100%;
+    height: 100%;
+  }
+}
+</style>

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

@@ -0,0 +1,121 @@
+<!--
+  * 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="currentDeviceId"
+    placeholder="placeholder"
+    class="select"
+    :disabled="disabled"
+    :teleported="false"
+    :popper-append-to-body="false"
+    @change="handleChange"
+  >
+    <tui-option
+      v-for="item in deviceList"
+      :key="item.deviceId"
+      :label="item.deviceName"
+      :value="item.deviceId"
+    />
+  </tui-select>
+</template>
+
+<script setup lang="ts">
+import { ref, Ref } from 'vue';
+import { useRoomStore } from '../../stores/room';
+import { storeToRefs } from 'pinia';
+import TuiSelect from './base/Select.vue';
+import TuiOption from './base/Option.vue';
+
+import { TRTCDeviceInfo, TUIMediaDeviceType } from '@tencentcloud/tuiroom-engine-electron';
+import useDeviceManager from '../../hooks/useDeviceManager';
+const { deviceManager } = useDeviceManager();
+
+interface Props {
+  deviceType: string,
+  onChange?: (id: string) => void,
+  disabled?: boolean
+}
+// eslint-disable-next-line vue/no-setup-props-destructure
+const { deviceType, onChange, disabled = false } = defineProps<Props>();
+
+const roomStore = useRoomStore();
+const {
+  cameraList,
+  microphoneList,
+  speakerList,
+  currentCameraId,
+  currentMicrophoneId,
+  currentSpeakerId,
+} = storeToRefs(roomStore);
+
+// @ts-ignore
+const deviceList: Ref<TRTCDeviceInfo[]> = ref(getDeviceList());
+const currentDeviceId = ref(getInitDeviceId());
+
+function getInitDeviceId() {
+  if (deviceType === 'camera') {
+    return currentCameraId;
+  }
+  if (deviceType === 'microphone') {
+    return currentMicrophoneId;
+  }
+  if (deviceType === 'speaker') {
+    return currentSpeakerId;
+  }
+  return '';
+}
+
+function getDeviceList() {
+  if (deviceType === 'camera') {
+    return cameraList;
+  }
+  if (deviceType === 'microphone') {
+    return microphoneList;
+  }
+  if (deviceType === 'speaker') {
+    return speakerList;
+  }
+  return [];
+}
+
+async function handleChange(deviceId: string) {
+  onChange && onChange(deviceId);
+  switch (deviceType) {
+    case 'camera':
+      await deviceManager.instance?.setCurrentDevice({
+        type: TUIMediaDeviceType.kMediaDeviceTypeVideoCamera,
+        deviceId,
+      });
+      roomStore.setCurrentCameraId(deviceId);
+      break;
+    case 'microphone':
+      await deviceManager.instance?.setCurrentDevice({
+        type: TUIMediaDeviceType.kMediaDeviceTypeAudioInput,
+        deviceId,
+      });
+      roomStore.setCurrentMicrophoneId(deviceId);
+      break;
+    case 'speaker':
+      await deviceManager.instance?.setCurrentDevice({
+        type: TUIMediaDeviceType.kMediaDeviceTypeAudioOutput,
+        deviceId,
+      });
+      roomStore.setCurrentSpeakerId(deviceId);
+      break;
+    default:
+      break;
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.select {
+  width: 100%;
+  font-size: 14px;
+}
+</style>

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

@@ -0,0 +1,44 @@
+<template>
+  <icon-button
+    v-if="languageConfig.visible"
+    :title="title"
+    :layout="IconButtonLayout.HORIZONTAL"
+    :icon="LanguageIcon"
+    @click-icon="handleChange"
+  >
+  </icon-button>
+</template>
+
+<script setup lang="ts">
+import IconButton from './base/IconButton.vue';
+import { IconButtonLayout } from '../../constants/room';
+import LanguageIcon from './icons/LanguageIcon.vue';
+import { useBasicStore } from '../../stores/basic';
+import i18n from '../../locales/index';
+import { computed } from 'vue';
+import { roomService } from '../../services';
+
+const basicStore = useBasicStore();
+
+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;
+  }
+};
+
+</script>
+
+<style>
+</style>