tuikit-atomicx-vue3 0.1.0

package/src/components/AudioSetting/AudioMediaControl.vue

@@ -0,0 +1,132 @@
+<template>
+  <div
+    v-click-outside="handleHideAudioSettingTab"
+    class="audio-control-container"
+  >
+    <icon-button
+      :title="t('Mic')"
+      :has-more="
+        audioSettingProps?.displayMode === MediaSettingDisplayMode.IconWithPanel
+      "
+      :disabled="microphoneStatus === DeviceStatus.OffNeedPermission"
+      :is-not-support="microphoneLastError !== DeviceError.NoError"
+      @click-icon="handleClickIcon"
+      @click-more="handleMore"
+    >
+      <audio-icon
+        :audio-volume="captureVolume"
+        :is-muted="isMuted"
+        :is-disabled="microphoneStatus === DeviceStatus.OffNeedPermission"
+      />
+    </icon-button>
+    <audio-setting-tab
+      v-show="showAudioSettingTab"
+      class="audio-tab"
+      :audio-volume="captureVolume"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, Ref, defineEmits, computed, inject } from 'vue';
+import IconButton from '../../baseComp/IconButton.vue';
+import AudioIcon from '../../baseComp/AudioIcon.vue';
+import AudioSettingTab from './AudioSettingTab.vue';
+import { useI18n } from '../../locales';
+import vClickOutside from '../../directives/vClickOutside';
+import useDeviceState from '../../states/DeviceState';
+import { DeviceStatus, DeviceError, AudioSettingProps, MediaSettingDisplayMode } from '../../types';
+import { useRoomState } from '../../states/RoomState';
+
+const audioSettingProps: AudioSettingProps | undefined =
+  inject('audioSettingProps');
+
+
+const { currentRoom } = useRoomState();
+const {
+  captureVolume,
+  microphoneStatus,
+  microphoneLastError,
+  isMicrophoneTesting,
+  openLocalMicrophone,
+  muteLocalAudio,
+  unmuteLocalAudio,
+  startMicrophoneTest,
+  stopMicrophoneTest,
+} = useDeviceState();
+
+const emits = defineEmits(['click-icon']);
+
+const showAudioSettingTab: Ref<boolean> = ref(false);
+const { t } = useI18n();
+
+const isMuted = computed(() => {
+  if (!currentRoom.value) {
+    return !isMicrophoneTesting.value;
+  }
+  return microphoneStatus.value !== DeviceStatus.On;
+});
+
+async function handleClickIcon() {
+  showAudioSettingTab.value = false;
+  emits('click-icon');
+  if (!currentRoom.value) {
+    if (isMicrophoneTesting.value) {
+      await stopMicrophoneTest();
+    } else {
+      await startMicrophoneTest({ interval: 200 });
+    }
+    return;
+  }
+  if (microphoneStatus.value === DeviceStatus.On) {
+    await muteLocalAudio();
+  } else {
+    await openLocalMicrophone();
+    await 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/components/AudioSetting/AudioRequestDialog.vue

@@ -0,0 +1,105 @@
+<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 { TUIButton } from '@tencentcloud/uikit-base-component-vue3';
+import TuiDialog from '../../baseComp/Dialog';
+import { useI18n } from '../../locales';
+import useRoomEngine from '../../hooks/useRoomEngine';
+import useUserState from '../../states/UserState/index';
+
+const roomEngine = useRoomEngine();
+const { t } = useI18n();
+const dialogContent: Ref<string> = ref('');
+
+const { getUserInfo } = useUserState();
+
+/**
+ * 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 =
+      getUserInfo({ userId })?.userRole === 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/components/AudioSetting/AudioSettingTab.vue

@@ -0,0 +1,172 @@
+<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 useDeviceState from '../../states/DeviceState';
+import { AudioSettingProps, MediaSettingDisplayMode } from '../../types';
+
+const { t } = useI18n();
+const {
+  captureVolume,
+  isMicrophoneTesting,
+  isSpeakerTesting,
+  startMicrophoneTest,
+  stopMicrophoneTest,
+  startSpeakerTest,
+  stopSpeakerTest,
+} = useDeviceState();
+
+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(
+  () => (captureVolume.value * volumeTotalNum.value) / 100
+);
+
+const showVolume = computed(
+  () => isSimpleMode.value || (isDetailMode.value && isMicrophoneTesting.value)
+);
+
+/**
+ * Click on the microphone [Test] button
+ **/
+function handleMicrophoneTest() {
+  if (isMicrophoneTesting.value) {
+    stopMicrophoneTest();
+  } else {
+    startMicrophoneTest({ 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) {
+    stopSpeakerTest();
+  } else {
+    startSpeakerTest({ filePath: SPEAKER_TEST_URL });
+  }
+}
+
+onBeforeUnmount(() => {
+  stopSpeakerTest();
+});
+</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>
+../../states/DeviceState

package/src/components/AudioSetting/MicrophoneSelect.vue

@@ -0,0 +1,74 @@
+<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, onBeforeMount } from 'vue';
+import TuiSelect from '../../baseComp/Select';
+import TuiOption from '../../baseComp/Option';
+import useDeviceState from '../../states/DeviceState';
+import { TUIDeviceInfo } from '@tencentcloud/tuiroom-engine-js';
+const { microphoneList, currentMicrophone, setCurrentMicrophone, getMicrophoneList } = useDeviceState();
+
+interface Props {
+  onChange?: (id: string) => void;
+  disabled?: boolean;
+}
+const props = withDefaults(defineProps<Props>(), {
+  disabled: false,
+});
+const currentDeviceId = ref(currentMicrophone.value?.deviceId);
+
+watch(
+  () => currentMicrophone.value?.deviceId,
+  val => {
+    if (currentDeviceId.value !== val) {
+      currentDeviceId.value = val;
+    }
+  },
+  { immediate: true }
+);
+
+async function handleChange(deviceId: string) {
+  props.onChange?.(deviceId);
+  try {
+    await setCurrentMicrophone({ deviceId });
+  } catch (error) {
+    if (
+      currentMicrophone.value?.deviceId &&
+      microphoneList.value
+        .map((item: TUIDeviceInfo) => item.deviceId)
+        .includes(currentMicrophone.value?.deviceId)
+    ) {
+      currentDeviceId.value = currentMicrophone.value?.deviceId;
+    }
+  }
+}
+
+onBeforeMount(async () => {
+  await getMicrophoneList();
+})
+</script>
+
+<style lang="scss" scoped>
+.select {
+  width: 100%;
+  font-size: 14px;
+}
+</style>
+../../states/DeviceState

package/src/components/AudioSetting/SpeakerSelect.vue

@@ -0,0 +1,75 @@
+<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, onBeforeMount } from 'vue';
+import { TUIDeviceInfo } from '@tencentcloud/tuiroom-engine-js';
+import TuiSelect from '../../baseComp/Select';
+import TuiOption from '../../baseComp/Option';
+import useDeviceState from '../../states/DeviceState';
+
+interface Props {
+  onChange?: (id: string) => void;
+  disabled?: boolean;
+}
+const props = withDefaults(defineProps<Props>(), {
+  disabled: false,
+});
+
+const { speakerList, currentSpeaker, setCurrentSpeaker, getSpeakerList } = useDeviceState();
+const currentDeviceId = ref(currentSpeaker.value?.deviceId);
+
+watch(
+  () => currentSpeaker.value?.deviceId,
+  val => {
+    if (currentDeviceId.value !== val) {
+      currentDeviceId.value = val;
+    }
+  },
+  { immediate: true }
+);
+
+async function handleChange(deviceId: string) {
+  props.onChange?.(deviceId);
+  try {
+    await setCurrentSpeaker({ deviceId });
+  } catch (error) {
+    if (
+      currentSpeaker.value?.deviceId &&
+      speakerList.value
+        .map((item: TUIDeviceInfo) => item.deviceId)
+        .includes(currentSpeaker.value?.deviceId)
+    ) {
+      currentDeviceId.value = currentSpeaker.value?.deviceId;
+    }
+  }
+}
+
+onBeforeMount(async () => {
+  await getSpeakerList();
+})
+</script>
+
+<style lang="scss" scoped>
+.select {
+  width: 100%;
+  font-size: 14px;
+}
+</style>
+../../states/DeviceState

package/src/components/AudioSetting/index.ts

@@ -0,0 +1,4 @@
+import AudioSetting from './index.vue';
+
+export { AudioSetting };
+export default AudioSetting;

package/src/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 '../../types';
+
+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>

package/src/components/AudioSettingPanel/i18n/en-US/index.ts

@@ -0,0 +1,7 @@
+export const resource = {
+  Microphone: 'Microphone',
+  'Select device': 'Select device',
+  'Input volume': 'Input volume',
+  Speaker: 'Speaker',
+  'Output volume': '输出音量',
+};

package/src/components/AudioSettingPanel/i18n/index.ts

@@ -0,0 +1,4 @@
+import { resource as enResource } from './en-US/index';
+import { resource as zhResource } from './zh-CN/index';
+
+export { enResource, zhResource };

package/src/components/AudioSettingPanel/i18n/zh-CN/index.ts

@@ -0,0 +1,7 @@
+export const resource = {
+  Microphone: '麦克风',
+  'Select device': '选择设备',
+  'Input volume': '输入音量',
+  Speaker: '扬声器',
+  'Output volume': '输出音量',
+};

package/src/components/AudioSettingPanel/index.ts

@@ -0,0 +1,8 @@
+import AudioSettingPanel from './index.vue';
+import { addI18n } from '../../i18n';
+import { enResource, zhResource } from './i18n';
+
+addI18n('en-US', { translation: enResource });
+addI18n('zh-CN', { translation: zhResource });
+
+export { AudioSettingPanel };