tuikit-atomicx-vue3 4.4.0 → 4.5.0

package/src/components/AudioSettingPanel/MicrophoneSelect.vue

@@ -0,0 +1,77 @@
+<template>
+  <TUISelect
+    v-model="currentDeviceId"
+    :placeholder="t('AudioSettingPanel.SelectMicrophone')"
+    class="select"
+    :disabled="disabled"
+    :teleported="false"
+    :popper-append-to-body="false"
+    @change="handleChange"
+  >
+    <TUIOption
+      v-for="item in microphoneList"
+      :key="item.deviceId"
+      :label="item.deviceName"
+      :value="item.deviceId"
+    />
+  </TUISelect>
+</template>
+
+<script setup lang="ts">
+import { ref, watch, defineProps, withDefaults, onBeforeMount } from 'vue';
+import { TUISelect, TUIOption, useUIKit } from '@tencentcloud/uikit-base-component-vue3';
+import { useDeviceState } from '../../states/DeviceState';
+import type { TUIDeviceInfo } from '@tencentcloud/tuiroom-engine-js';
+import TUIRoomEngine from '@tencentcloud/tuiroom-engine-js';
+const { microphoneList, currentMicrophone, setCurrentMicrophone, getMicrophoneList } = useDeviceState();
+
+const { t } = useUIKit();
+
+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 () => {
+  TUIRoomEngine.once('ready', async () => {
+    await getMicrophoneList();
+  });
+});
+</script>
+
+<style lang="scss" scoped>
+.select {
+  width: 100%;
+  font-size: 14px;
+}
+</style>

package/src/components/AudioSettingPanel/SpeakerSelect.vue

@@ -0,0 +1,78 @@
+<template>
+  <TUISelect
+    v-model="currentDeviceId"
+    :placeholder="t('AudioSettingPanel.SelectSpeaker')"
+    class="select"
+    :disabled="disabled"
+    :teleported="false"
+    :popper-append-to-body="false"
+    @change="handleChange"
+  >
+    <TUIOption
+      v-for="item in speakerList"
+      :key="item.deviceId"
+      :label="item.deviceName"
+      :value="item.deviceId"
+    />
+  </TUISelect>
+</template>
+
+<script setup lang="ts">
+import { ref, watch, defineProps, withDefaults, onBeforeMount } from 'vue';
+import { TUISelect, TUIOption, useUIKit } from '@tencentcloud/uikit-base-component-vue3';
+import { useDeviceState } from '../../states/DeviceState';
+import type { TUIDeviceInfo } from '@tencentcloud/tuiroom-engine-js';
+import TUIRoomEngine from '@tencentcloud/tuiroom-engine-js';
+
+const { t } = useUIKit();
+
+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 () => {
+  TUIRoomEngine.once('ready', async () => {
+    await getSpeakerList();
+  });
+});
+</script>
+
+<style lang="scss" scoped>
+.select {
+  width: 100%;
+  font-size: 14px;
+}
+</style>

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

@@ -1,8 +1,14 @@
 export const resource = {
-  Microphone: 'Microphone',
-  'Select device': 'Select device',
-  'Input volume': 'Input volume',
-  Speaker: 'Speaker',
-  'Output volume': '输出音量',
-  'Unrecognized device': 'Unrecognized device',
+  AudioSettingPanel: {
+    Microphone: 'Microphone',
+    SelectMicrophone: 'Select microphone',
+    SelectSpeaker: 'Select speaker',
+    InputLevel: 'Input level',
+    InputVolume: 'Input volume',
+    Speaker: 'Speaker',
+    OutputVolume: 'Output volume',
+    UnrecognizedDevice: 'Unrecognized device',
+    Test: 'Test',
+    Stop: 'Stop',
+  },
 };

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

@@ -1,8 +1,14 @@
 export const resource = {
-  Microphone: '麦克风',
-  'Select device': '选择设备',
-  'Input volume': '输入音量',
-  Speaker: '扬声器',
-  'Output volume': '输出音量',
-  'Unrecognized device': '未识别设备',
+  AudioSettingPanel: {
+    Microphone: '麦克风',
+    SelectMicrophone: '选择麦克风',
+    SelectSpeaker: '选择扬声器',
+    InputLevel: '输入等级',
+    InputVolume: '输入音量',
+    Speaker: '扬声器',
+    OutputVolume: '输出音量',
+    UnrecognizedDevice: '未识别设备',
+    Test: '测试',
+    Stop: '停止测试',
+  },
 };

package/src/components/AudioSettingPanel/index.ts

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

package/src/components/AudioSettingPanel/index.vue

@@ -1,61 +1,57 @@
 <template>
-  <div class="audio-setting-panel">
-    <div class="section">
-      <div class="section-title">
-        {{ t('Microphone') }}
+  <div class="audio-setting-tab">
+    <div class="item-setting">
+      <span class="title">{{ t('AudioSettingPanel.Microphone') }}</span>
+      <div class="flex">
+        <microphone-select class="select" />
+        <TUIButton v-if="micTestVisible" @click="handleMicrophoneTest">
+          {{ isMicrophoneTesting ? t('AudioSettingPanel.Stop') : t('AudioSettingPanel.Test') }}
+        </TUIButton>
       </div>
-      <div class="row" v-if="microphoneList.length > 0">
-        <span class="label">{{ t('Select device') }}</span>
-        <TUISelect
-          v-model="currentMicrophoneId"
-          class="select"
-          :placeholder="t('Unrecognized device')"
-        >
-          <TUIOption
-            v-for="item in microphoneList"
-            :key="item.deviceId"
-            :label="item.deviceName"
-            :value="item.deviceId"
-          />
-        </TUISelect>
+    </div>
+    <div v-if="inputVolumeLevelVisible" class="item-setting">
+      <span class="title">{{ t('AudioSettingPanel.InputLevel') }}</span>
+      <div class="mic-bar-container">
+        <div
+          v-for="(item, index) in new Array(volumeTotalNum).fill('')"
+          :key="index"
+          :class="[
+            'mic-bar',
+            `${showInputVolume && volumeNum > index ? 'active' : ''}`,
+          ]"
+        />
       </div>
-      <div class="row">
-        <span class="label">{{ t('Input volume') }}</span>
+    </div>
+    <div v-if="inputVolumeVisible" class="item-setting">
+      <span class="title">{{ t('AudioSettingPanel.InputVolume') }}</span>
+      <div class="flex">
         <TUISlider
           v-model="captureVolumeValue"
+          class="custom-slider"
           :min="0"
           :max="100"
         />
         <span class="volume-value">{{ captureVolume }}</span>
       </div>
     </div>
-
-    <div class="divider" />
-
-    <div class="section">
-      <div class="section-title">
-        {{ t('Speaker') }}
-      </div>
-      <div class="row" v-if="speakerList.length > 0">
-        <span class="label">{{ t('Select device') }}</span>
-        <TUISelect
-          v-model="currentSpeakerId"
+    <div class="item-setting">
+      <span class="title">{{ t('AudioSettingPanel.Speaker') }}</span>
+      <div class="flex">
+        <speaker-select
           class="select"
-          :placeholder="t('Unrecognized device')"
-        >
-          <TUIOption
-            v-for="item in speakerList"
-            :key="item.deviceId"
-            :label="item.deviceName"
-            :value="item.deviceId"
-          />
-        </TUISelect>
+          :disabled="speakerTestVisible"
+        />
+        <TUIButton v-if="speakerTestVisible" @click="handleSpeakerTest">
+          {{ isSpeakerTesting ? t('AudioSettingPanel.Stop') : t('AudioSettingPanel.Test') }}
+        </TUIButton>
       </div>
-
-      <div class="row">
-        <span class="label">{{ t('Output volume') }}</span>
+    </div>
+    <div v-if="outputVolumeVisible" class="item-setting">
+      <span class="title">{{ t('AudioSettingPanel.OutputVolume') }}</span>
+      <div class="flex">
         <TUISlider
           v-model="outputVolumeValue"
+          class="custom-slider"
           :min="0"
           :max="100"
         />
@@ -66,54 +62,90 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, watch } from 'vue';
-import { TUISelect, TUIOption, TUISlider, useUIKit } from '@tencentcloud/uikit-base-component-vue3';
+import { ref, watch, computed } from 'vue';
+import { useUIKit, TUIButton, TUISlider } from '@tencentcloud/uikit-base-component-vue3';
 import { useDeviceState } from '../../states/DeviceState';
+import MicrophoneSelect from './MicrophoneSelect.vue';
+import SpeakerSelect from './SpeakerSelect.vue';
 
 const { t } = useUIKit();
 
+const props = defineProps({
+  micTestVisible: {
+    type: Boolean,
+    default: true,
+  },
+  inputVolumeLevelVisible: {
+    type: Boolean,
+    default: true,
+  },
+  inputVolumeVisible: {
+    type: Boolean,
+    default: true,
+  },
+  speakerTestVisible: {
+    type: Boolean,
+    default: true,
+  },
+  outputVolumeVisible: {
+    type: Boolean,
+    default: true,
+  },
+});
+
 const {
-  microphoneList,
-  currentMicrophone,
-  setCurrentMicrophone,
-  speakerList,
-  currentSpeaker,
-  setCurrentSpeaker,
-  getMicrophoneList,
-  getSpeakerList,
   captureVolume,
+  currentMicVolume,
+  testingMicVolume,
   outputVolume,
   setCaptureVolume,
   setOutputVolume,
+  isMicrophoneTesting,
+  isSpeakerTesting,
+  startMicrophoneTest,
+  stopMicrophoneTest,
+  startSpeakerTest,
+  stopSpeakerTest,
 } = useDeviceState();
 
-const currentMicrophoneId = ref('');
-const currentSpeakerId = ref('');
-
-const captureVolumeValue = ref(captureVolume.value);
-const outputVolumeValue = ref(outputVolume.value);
-
-onMounted(async () => {
-  await getMicrophoneList();
-  await getSpeakerList();
-  if (currentMicrophone.value) {
-    currentMicrophoneId.value = currentMicrophone.value.deviceId;
+function handleMicrophoneTest() {
+  if (isMicrophoneTesting.value) {
+    stopMicrophoneTest();
+  } else {
+    startMicrophoneTest({ interval: 200 });
   }
-  if (currentSpeaker.value) {
-    currentSpeakerId.value = currentSpeaker.value.deviceId;
+}
+
+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 });
   }
-});
-watch(currentMicrophone, (value) => {
-  if (value && value.deviceId !== currentMicrophoneId.value) {
-    currentMicrophoneId.value = value.deviceId;
+}
+
+const volumeTotalNum = ref(28);
+
+const volumeNum = computed(() => {
+  if (isMicrophoneTesting.value) {
+    return (testingMicVolume.value * volumeTotalNum.value) / 100;
+  } else {
+    return (currentMicVolume.value * volumeTotalNum.value) / 100;
   }
 });
 
-watch(currentSpeaker, (value) => {
-  if (value && value.deviceId !== currentSpeakerId.value) {
-    currentSpeakerId.value = value.deviceId;
+const showInputVolume = computed(() => {
+  if (props.micTestVisible) {
+    return isMicrophoneTesting.value;
+  } else {
+    return true;
   }
-});
+})
+
+const captureVolumeValue = ref(captureVolume.value);
+const outputVolumeValue = ref(outputVolume.value);
 
 watch(captureVolumeValue, async (value) => {
   await setCaptureVolume(value);
@@ -122,69 +154,65 @@ watch(captureVolumeValue, async (value) => {
 watch(outputVolumeValue, async (value) => {
   await setOutputVolume(value);
 });
-
-watch(currentMicrophoneId, (id) => {
-  setCurrentMicrophone({ deviceId: id });
-});
-watch(currentSpeakerId, (id) => {
-  setCurrentSpeaker({ deviceId: id });
-});
 </script>
 
-<style scoped lang="scss">
-.audio-setting-panel {
-  color: var(--tui-color-text-primary);
-
-  .section {
-    margin-bottom: 32px;
+<style lang="scss" scoped>
+.audio-setting-tab {
+  width: 100%;
+  font-size: 14px;
+  border-radius: 4px;
 
-    .section-title {
-      font-size: 18px;
-      font-weight: bold;
-      margin-bottom: 16px;
-    }
-
-    .row {
-      display: flex;
-      align-items: center;
-      margin-bottom: 16px;
-
-      .label {
-        width: 96px;
-      }
+  .item-setting {
+    width: 100%;
 
-      .volume-value {
-        margin-left: 12px;
-      }
+    &:not(:last-child) {
+      margin-bottom: 20px;
     }
   }
 
-  .divider {
-    height: 1px;
-    background: var(--uikit-color-gray-4);
-    margin: 32px 0;
+  .flex {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    gap: 10px;
   }
 
   .select {
-    width: 300px;
+    flex: 1;
   }
 
-  input[type='range'] {
-    margin: 0 16px;
+  .title {
+    display: inline-block;
+    width: 100%;
+    margin-bottom: 8px;
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 22px;
+    color: var(--text-color-secondary);
+  }
+
+  .custom-slider {
     flex: 1;
   }
 
-  .icon-tip {
-    display: inline-block;
-    margin-left: 4px;
-    width: 16px;
-    height: 16px;
-    border-radius: 50%;
-    background: #444;
-    text-align: center;
-    font-size: 12px;
-    line-height: 16px;
-    cursor: pointer;
+  .volume-value {
+    margin-left: 6px;
   }
+
+  .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);
+      }
+    }
+  }
+
 }
 </style>

package/src/components/BarrageList/BarrageList.vue

@@ -11,7 +11,7 @@ import { useBarrageListState } from './BarrageListState';
 import UserActionMenu from './ClickAction/UserActionMenu.vue';
 import { Message as DefaultMessage } from './Message';
 import { MessageListContextSymbol } from './MessageListContext';
-import type { Barrage } from '../../states/BarrageState';
+import type { Barrage } from '../../types/barrage';
 
 const { t } = useUIKit();
 

package/src/components/BarrageList/BarrageListH5.vue

@@ -11,7 +11,7 @@ import { useBarrageListState } from './BarrageListState';
 import UserActionMenu from './ClickAction/UserActionMenu.vue';
 import { Message as DefaultMessage } from './Message';
 import { MessageListContextSymbol } from './MessageListContext';
-import type { Barrage } from '../../states/BarrageState';
+import type { Barrage } from '../../types/barrage';
 
 const { t } = useUIKit();
 

package/src/components/BarrageList/BarrageListState.ts

@@ -3,7 +3,7 @@ import { TUIRoomEvents } from '@tencentcloud/tuiroom-engine-js';
 import { useRoomEngine } from '../../hooks/useRoomEngine';
 import { useBarrageState } from '../../states/BarrageState';
 import { useLiveListState } from '../../states/LiveListState';
-import type { Barrage } from '../../states/BarrageState';
+import type { Barrage } from '../../types/barrage';
 
 interface IMessageGroupTip {
   avatarUrl: string;

package/src/components/BarrageList/Message/MessageLayout/MessageBubble/MessageBubble.vue

@@ -16,7 +16,7 @@
 import { toRefs, defineProps, withDefaults } from 'vue';
 import cs from 'classnames';
 import { useLoginState } from '../../../../../states/LoginState';
-import type { Barrage } from '../../../../../states/BarrageState';
+import type { Barrage } from '../../../../../types/barrage';
 
 interface IMessageBubbleProps {
   message: Barrage;

package/src/components/BarrageList/Message/MessageLayout/MessageLayout.vue

@@ -1,12 +1,12 @@
 <script lang="ts" setup>
 import { toRefs, computed, withDefaults, defineProps } from 'vue';
 import cs from 'classnames';
-import { BarrageType } from '../../../../states/BarrageState';
 import { useLoginState } from '../../../../states/LoginState';
+import { BarrageType } from '../../../../types/barrage';
 import { CustomMessage } from '../CustomMessage';
 import { TextMessage } from '../TextMessage';
 import { MessageBubble } from './MessageBubble';
-import type { Barrage } from '../../../../states/BarrageState';
+import type { Barrage } from '../../../../types/barrage';
 
 interface IMessageLayoutProps {
   message: Barrage;

package/src/components/BarrageList/Message/TextMessage/TextMessage.vue

@@ -41,7 +41,7 @@ import { useUIKit } from '@tencentcloud/uikit-base-component-vue3';
 import { useLiveListState } from '../../../../states/LiveListState';
 import { useMessageListContext } from '../../MessageListContext';
 import { BASEURL, BASIC_EMOJI_URL_MAPPING } from './emoji';
-import type { Barrage } from '../../../../states/BarrageState';
+import type { Barrage } from '../../../../types/barrage';
 
 const { currentLive } = useLiveListState();
 const context: {

package/src/components/ChatSetting/GroupChatSetting/GroupChatSetting.vue

@@ -272,6 +272,7 @@ const userPickerDialogTitle = computed(() => {
       >
         <UserPicker
           ref="userPickerRef"
+          class="user-picker-dialog__content"
           display-mode="list"
           :data-source="memberDataSource"
           :locked-items="userPickerLockedItems"
@@ -292,5 +293,9 @@ const userPickerDialogTitle = computed(() => {
 <style lang="scss">
 .user-picker-dialog {
   height: 70vh;
+
+  &__content {
+    width: 100%;
+  }
 }
 </style>

package/src/components/ConversationList/ConversationActions/ConversationActions.vue

@@ -25,11 +25,11 @@
     <TUIDropdown
       v-else
       trigger="click"
+      :teleported="false"
       placement="bottom-end"
     >
       <div
         :class="$style['conversationActions__popup-icon']"
-        @click="toggleClick"
       >
         <IconEllipsis size="18px" />
       </div>
@@ -81,7 +81,6 @@ const { t } = useUIKit();
 const { markConversationUnread } = useConversationListState();
 
 const markUnreadStatus = ref(true);
-const anchor = ref<HTMLElement | null>(null);
 const conversationActions = ref<Record<string, ConversationActionItem>>({});
 
 const enabledActions = computed(() => Object.entries(conversationActions.value)
@@ -151,12 +150,7 @@ watch(
   { immediate: true, deep: true },
 );
 
-const toggleClick = (e: Event) => {
-  anchor.value = anchor.value ? null : (e.currentTarget as HTMLElement);
-};
-
 const onClickMenuItem = (e: Event, key: string) => {
-  toggleClick(e);
   emit('click', e, key, props.conversation);
 
   const action = conversationActions.value[key];