@ndscnj/roomkit-web-vue3 3.2.0

package/src/TUIRoom/constants/room.ts

@@ -0,0 +1,38 @@
+import { TRTCVideoResolution } from '@tencentcloud/tuiroom-engine-js';
+
+export enum SpeechMode {
+  FREE_SPEECH = 'FreeSpeech',
+  APPLY_SPEECH = 'ApplySpeech',
+}
+
+export enum IconButtonLayout {
+  VERTICAl = 'vertical',
+  HORIZONTAL = 'horizontal',
+}
+
+export enum MediaDeviceState {
+  OPEN = 'OPEN',
+  CLOSE = 'CLOSE',
+  DISABLED = 'DISABLED',
+  UNAVAILABLE = 'UNAVAILABLE',
+}
+
+export const SMALL_VIDEO_ENC_PARAM = {
+  videoResolution: TRTCVideoResolution.TRTCVideoResolution_640_360,
+  videoFps: 15,
+  videoBitrate: 800,
+};
+
+export enum USERS_STATUS {
+  Entered = 1,
+  ON_STAGE = 1,
+  NOT_ON_STAGE = 2,
+  NOT_ENTER = 3,
+}
+
+export const PASSWORD_MAX_LENGTH_LIMIT = 6;
+
+export enum TRTCBeautyStyle {
+  TRTCBeautyStyleSmooth = 0,
+  TRTCBeautyStyleNature = 1,
+}

package/src/TUIRoom/core/components/AudioSetting/AudioMediaControl.vue

@@ -0,0 +1,128 @@
+<template>
+  <div
+    v-click-outside="handleHideAudioSettingTab"
+    class="audio-control-container"
+  >
+    <icon-button
+      :title="t('Mic')"
+      :has-more="
+        audioSettingProps?.displayMode === MediaSettingDisplayMode.IconWithPanel
+      "
+      :disabled="microphoneState === MediaDeviceState.DeviceOffAndDisabled"
+      :is-not-support="
+        microphoneState === MediaDeviceState.NotSupportCapture ||
+        microphoneState === MediaDeviceState.NoDeviceDetected
+      "
+      @click-icon="handleClickIcon"
+      @click-more="handleMore"
+    >
+      <audio-icon
+        :audio-volume="audioVolume"
+        :is-muted="isMuted"
+        :is-disabled="microphoneState === MediaDeviceState.DeviceOffAndDisabled"
+      />
+    </icon-button>
+    <audio-setting-tab
+      v-show="showAudioSettingTab"
+      class="audio-tab"
+      :audio-volume="audioVolume"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, Ref, defineEmits, computed, inject } from 'vue';
+import IconButton from '../../../components/common/base/IconButton.vue';
+import AudioIcon from '../../../components/common/AudioIcon.vue';
+import AudioSettingTab from './AudioSettingTab.vue';
+import { useI18n } from '../../../locales';
+import vClickOutside from '../../../directives/vClickOutside';
+import {
+  useAudioDeviceState,
+  MediaDeviceState,
+} from '../../hooks/useAudioDeviceState';
+import { AudioSettingProps, MediaSettingDisplayMode } from '../../type';
+import { useBasicStore } from '../../../stores/basic';
+
+const audioSettingProps: AudioSettingProps | undefined =
+  inject('audioSettingProps');
+
+const basicStore = useBasicStore();
+const { audioVolume, microphoneState, isMicrophoneTesting, microphone } =
+  useAudioDeviceState();
+
+const emits = defineEmits(['click-icon']);
+
+const showAudioSettingTab: Ref<boolean> = ref(false);
+const { t } = useI18n();
+
+const isMuted = computed(() => {
+  if (!basicStore.roomId) {
+    return !isMicrophoneTesting.value;
+  }
+  return microphoneState.value !== MediaDeviceState.DeviceOn;
+});
+
+async function handleClickIcon() {
+  showAudioSettingTab.value = false;
+  emits('click-icon');
+  if (!basicStore.roomId) {
+    if (isMicrophoneTesting.value) {
+      await microphone.stopMicDeviceTest();
+    } else {
+      await microphone.startMicDeviceTest({ interval: 200 });
+    }
+    return;
+  }
+  if (microphoneState.value === MediaDeviceState.DeviceOn) {
+    await microphone.muteLocalAudio();
+  } else {
+    await microphone.openLocalMicrophone();
+    await microphone.unmuteLocalAudio();
+  }
+}
+
+function handleMore() {
+  showAudioSettingTab.value = !showAudioSettingTab.value;
+}
+
+function handleHideAudioSettingTab() {
+  if (showAudioSettingTab.value) {
+    showAudioSettingTab.value = false;
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+$audio-tab-width: 305px;
+
+.audio-control-container {
+  position: relative;
+  display: flex;
+
+  .audio-tab {
+    position: absolute;
+    bottom: calc(100% + 12px);
+    left: -5px;
+    width: $audio-tab-width;
+    padding: 20px 20px 24px;
+    background-color: var(--bg-color-dialog);
+    border-radius: 8px;
+    box-shadow:
+      0 2px 4px -3px var(--uikit-color-black-8),
+      0 6px 10px 1px var(--uikit-color-black-8),
+      0 3px 14px 2px var(--uikit-color-black-8);
+
+    &::before {
+      position: absolute;
+      bottom: -10px;
+      left: 28px;
+      content: '';
+      border-top: 5px solid var(--bg-color-dialog);
+      border-right: 5px solid transparent;
+      border-bottom: 5px solid transparent;
+      border-left: 5px solid transparent;
+    }
+  }
+}
+</style>

package/src/TUIRoom/core/components/AudioSetting/AudioRequestDialog.vue

@@ -0,0 +1,104 @@
+<template>
+  <tui-dialog
+    v-model="showRequestOpenMicDialog"
+    :title="t('Tips')"
+    :modal="true"
+    :show-close="false"
+    :close-on-click-modal="false"
+    width="500px"
+    :append-to-room-container="true"
+    :confirm-button="t('Turn on the microphone')"
+    :cancel-button="t('Keep it closed')"
+    @confirm="handleAccept"
+    @cancel="handleReject"
+  >
+    <span>{{ dialogContent }}</span>
+    <template #footer>
+      <TUIButton @click="handleAccept" type="primary">
+        {{ t('Turn on the microphone') }}
+      </TUIButton>
+      <TUIButton @click="handleReject">
+        {{ t('Keep it closed') }}
+      </TUIButton>
+    </template>
+  </tui-dialog>
+</template>
+
+<script setup lang="ts">
+import { ref, Ref, onUnmounted } from 'vue';
+import TUIRoomEngine, {
+  TUIRoomEvents,
+  TUIRequest,
+  TUIRequestAction,
+  TUIRole,
+} from '@tencentcloud/tuiroom-engine-js';
+import TuiDialog from '../../../components/common/base/Dialog';
+import { TUIButton } from '@tencentcloud/uikit-base-component-vue3';
+import { useRoomStore } from '../../../stores/room';
+import { useI18n } from '../../../locales';
+import useRoomEngine from '../../../hooks/useRoomEngine';
+
+const roomEngine = useRoomEngine();
+const roomStore = useRoomStore();
+const { t } = useI18n();
+const dialogContent: Ref<string> = ref('');
+
+/**
+ * Handling host or administrator turn on/off microphone signalling
+ **/
+const showRequestOpenMicDialog: Ref<boolean> = ref(false);
+const requestOpenMicRequestId: Ref<string> = ref('');
+async function onRequestReceived(eventInfo: { request: TUIRequest }) {
+  const { userId, requestAction, requestId } = eventInfo.request;
+  if (requestAction === TUIRequestAction.kRequestToOpenRemoteMicrophone) {
+    const userRole =
+      roomStore.getUserRole(userId) === TUIRole.kRoomOwner
+        ? t('RoomOwner')
+        : t('Admin');
+    dialogContent.value = t('Sb invites you to turn on the microphone', {
+      role: userRole,
+    });
+    requestOpenMicRequestId.value = requestId;
+    showRequestOpenMicDialog.value = true;
+  }
+}
+// Accept the host invitation and turn on the microphone
+async function handleAccept() {
+  await roomEngine.instance?.responseRemoteRequest({
+    requestId: requestOpenMicRequestId.value,
+    agree: true,
+  });
+  requestOpenMicRequestId.value = '';
+  showRequestOpenMicDialog.value = false;
+}
+
+// keep mute
+async function handleReject() {
+  await roomEngine.instance?.responseRemoteRequest({
+    requestId: requestOpenMicRequestId.value,
+    agree: false,
+  });
+  requestOpenMicRequestId.value = '';
+  showRequestOpenMicDialog.value = false;
+}
+
+// Request canceled
+async function onRequestCancelled(eventInfo: { requestId: string }) {
+  const { requestId } = eventInfo;
+  if (requestOpenMicRequestId.value === requestId) {
+    showRequestOpenMicDialog.value = false;
+  }
+}
+TUIRoomEngine.once('ready', () => {
+  roomEngine.instance?.on(TUIRoomEvents.onRequestReceived, onRequestReceived);
+  roomEngine.instance?.on(TUIRoomEvents.onRequestCancelled, onRequestCancelled);
+});
+
+onUnmounted(() => {
+  roomEngine.instance?.off(TUIRoomEvents.onRequestReceived, onRequestReceived);
+  roomEngine.instance?.off(
+    TUIRoomEvents.onRequestCancelled,
+    onRequestCancelled
+  );
+});
+</script>

package/src/TUIRoom/core/components/AudioSetting/AudioSettingTab.vue

@@ -0,0 +1,169 @@
+<template>
+  <div class="audio-setting-tab">
+    <div v-if="audioSettingProps?.supportSwitchMicrophone" class="item-setting">
+      <span class="title">{{ t('Mic') }}</span>
+      <div class="flex">
+        <microphone-select class="select" />
+        <TUIButton v-if="isDetailMode" @click="handleMicrophoneTest">
+          {{ isMicrophoneTesting ? t('Stop') : t('Test') }}
+        </TUIButton>
+      </div>
+    </div>
+    <div v-if="audioSettingProps?.supportAudioLevel" 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="audioSettingProps?.supportSwitchSpeaker" class="item-setting">
+      <span class="title">{{ t('Speaker') }}</span>
+      <div class="flex">
+        <speaker-select
+          class="select"
+          :disabled="
+            audioSettingProps?.displayMode === MediaSettingDisplayMode.Panel
+          "
+        />
+        <TUIButton v-if="isDetailMode" @click="handleSpeakerTest">
+          {{ isSpeakerTesting ? t('Stop') : t('Test') }}
+        </TUIButton>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, onBeforeUnmount, inject } from 'vue';
+import MicrophoneSelect from './MicrophoneSelect.vue';
+import SpeakerSelect from './SpeakerSelect.vue';
+import { useI18n } from '../../../locales';
+import { TUIButton } from '@tencentcloud/uikit-base-component-vue3';
+import useAudioDeviceState from '../../hooks/useAudioDeviceState';
+import { AudioSettingProps, MediaSettingDisplayMode } from '../../type';
+
+const { t } = useI18n();
+const {
+  audioVolume,
+  isMicrophoneTesting,
+  isSpeakerTesting,
+  microphone,
+  speaker,
+} = useAudioDeviceState();
+
+const audioSettingProps: AudioSettingProps | undefined =
+  inject('audioSettingProps');
+
+const isSimpleMode = computed(
+  () => audioSettingProps?.displayMode === MediaSettingDisplayMode.IconWithPanel
+);
+const isDetailMode = computed(
+  () => audioSettingProps?.displayMode === MediaSettingDisplayMode.Panel
+);
+
+const volumeTotalNum = computed(() => (isDetailMode.value ? 36 : 28));
+
+const volumeNum = computed(
+  () => (audioVolume.value * volumeTotalNum.value) / 100
+);
+
+const showVolume = computed(
+  () => isSimpleMode.value || (isDetailMode.value && isMicrophoneTesting.value)
+);
+
+/**
+ * Click on the microphone [Test] button
+ **/
+function handleMicrophoneTest() {
+  if (isMicrophoneTesting.value) {
+    microphone.stopMicDeviceTest();
+  } else {
+    microphone.startMicDeviceTest({ interval: 200 });
+  }
+}
+/**
+ * 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';
+  if (isSpeakerTesting.value) {
+    speaker.stopSpeakerDeviceTest();
+  } else {
+    speaker.startSpeakerDeviceTest({ filePath: SPEAKER_TEST_URL });
+  }
+}
+
+onBeforeUnmount(() => {
+  speaker.stopSpeakerDeviceTest();
+});
+</script>
+
+<style lang="scss" scoped>
+.audio-setting-tab {
+  width: 100%;
+  font-size: 14px;
+  border-radius: 4px;
+
+  .item-setting {
+    width: 100%;
+
+    &:not(:last-child) {
+      margin-bottom: 20px;
+    }
+  }
+
+  .flex {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    gap: 10px;
+  }
+
+  .select {
+    flex: 1;
+  }
+
+  .title {
+    display: inline-block;
+    width: 100%;
+    margin-bottom: 8px;
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 22px;
+    color: var(--text-color-secondary);
+  }
+
+  .mic-bar-container {
+    display: flex;
+    justify-content: space-between;
+
+    .mic-bar {
+      width: 3px;
+      height: 6px;
+      background-color: var(--text-color-secondary);
+
+      &.active {
+        background-color: var(--text-color-link);
+      }
+    }
+  }
+
+  .audio-level-container {
+    display: flex;
+    width: 100%;
+    height: 20px;
+
+    .slider {
+      height: 20px;
+      margin-left: 10px;
+    }
+  }
+}
+</style>

package/src/TUIRoom/core/components/AudioSetting/MicrophoneSelect.vue

@@ -0,0 +1,69 @@
+<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 microphoneList"
+      :key="item.deviceId"
+      :label="item.deviceName"
+      :value="item.deviceId"
+    />
+  </tui-select>
+</template>
+
+<script setup lang="ts">
+import { ref, watch, defineProps, withDefaults } from 'vue';
+import TuiSelect from '../../../components/common/base/Select';
+import TuiOption from '../../../components/common/base/Option';
+import useAudioDeviceState from '../../hooks/useAudioDeviceState';
+import { TUIDeviceInfo } from '@tencentcloud/tuiroom-engine-js';
+const { microphoneList, currentMicrophoneId, microphone } =
+  useAudioDeviceState();
+
+interface Props {
+  onChange?: (id: string) => void;
+  disabled?: boolean;
+}
+const props = withDefaults(defineProps<Props>(), {
+  disabled: false,
+});
+const currentDeviceId = ref(currentMicrophoneId.value);
+
+watch(
+  currentMicrophoneId,
+  val => {
+    if (currentDeviceId.value !== val) {
+      currentDeviceId.value = val;
+    }
+  },
+  { immediate: true }
+);
+
+async function handleChange(deviceId: string) {
+  props.onChange?.(deviceId);
+  try {
+    await microphone.setCurrentDevice({ deviceId });
+  } catch (error) {
+    if (
+      microphoneList.value
+        .map((item: TUIDeviceInfo) => item.deviceId)
+        .includes(currentMicrophoneId.value)
+    ) {
+      currentDeviceId.value = currentMicrophoneId.value;
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.select {
+  width: 100%;
+  font-size: 14px;
+}
+</style>

package/src/TUIRoom/core/components/AudioSetting/SpeakerSelect.vue

@@ -0,0 +1,69 @@
+<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 speakerList"
+      :key="item.deviceId"
+      :label="item.deviceName"
+      :value="item.deviceId"
+    />
+  </tui-select>
+</template>
+
+<script setup lang="ts">
+import { ref, watch, defineProps, withDefaults } from 'vue';
+import { TUIDeviceInfo } from '@tencentcloud/tuiroom-engine-js';
+import TuiSelect from '../../../components/common/base/Select';
+import TuiOption from '../../../components/common/base/Option';
+import useAudioDeviceState from '../../hooks/useAudioDeviceState';
+
+interface Props {
+  onChange?: (id: string) => void;
+  disabled?: boolean;
+}
+const props = withDefaults(defineProps<Props>(), {
+  disabled: false,
+});
+
+const { speakerList, currentSpeakerId, speaker } = useAudioDeviceState();
+const currentDeviceId = ref(currentSpeakerId.value);
+
+watch(
+  currentSpeakerId,
+  val => {
+    if (currentDeviceId.value !== val) {
+      currentDeviceId.value = val;
+    }
+  },
+  { immediate: true }
+);
+
+async function handleChange(deviceId: string) {
+  props.onChange?.(deviceId);
+  try {
+    await speaker.setCurrentDevice({ deviceId });
+  } catch (error) {
+    if (
+      speakerList.value
+        .map((item: TUIDeviceInfo) => item.deviceId)
+        .includes(currentSpeakerId.value)
+    ) {
+      currentDeviceId.value = currentSpeakerId.value;
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.select {
+  width: 100%;
+  font-size: 14px;
+}
+</style>

package/src/TUIRoom/core/components/AudioSetting/index.vue

@@ -0,0 +1,38 @@
+<template>
+  <div>
+    <audio-media-control
+      v-if="
+        displayMode === MediaSettingDisplayMode.Icon ||
+        displayMode === MediaSettingDisplayMode.IconWithPanel
+      "
+      @click-icon="handleAudioMediaClick"
+    />
+    <audio-setting-tab v-if="displayMode === MediaSettingDisplayMode.Panel" />
+    <audio-request-dialog
+      v-if="displayMode !== MediaSettingDisplayMode.Panel"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { withDefaults, defineProps, reactive, provide, defineEmits } from 'vue';
+import AudioMediaControl from './AudioMediaControl.vue';
+import AudioSettingTab from './AudioSettingTab.vue';
+import AudioRequestDialog from './AudioRequestDialog.vue';
+import { AudioSettingProps, MediaSettingDisplayMode } from '../../type';
+
+const emits = defineEmits(['click-icon']);
+function handleAudioMediaClick() {
+  emits('click-icon');
+}
+
+const props = withDefaults(defineProps<AudioSettingProps>(), {
+  supportSwitchMicrophone: true,
+  supportSwitchSpeaker: true,
+  supportAudioLevel: true,
+});
+
+provide('audioSettingProps', reactive(props));
+</script>
+
+<style lang="scss" scoped></style>