@tencentcloud/roomkit-electron-vue3 2.6.0 → 2.6.2

package/src/TUIRoom/components/common/base/Slider.vue

@@ -0,0 +1,152 @@
+<template>
+  <div class="slider" ref="slider" @mousedown="handleMousedown">
+    <div
+      class="slider-track"
+      ref="track"
+      :style="{ width: valuePercentage + '%' }"
+    ></div>
+    <div
+      class="slider-thumb"
+      ref="thumb"
+      :style="thumbStyle"
+      :class="{ 'slider-thumb-disabled': disabled }"
+    ></div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import {
+  ref,
+  watch,
+  onMounted,
+  onUnmounted,
+  computed,
+  defineProps,
+  defineEmits,
+} from 'vue';
+
+const props = defineProps({
+  modelValue: {
+    type: Number,
+    default: 0,
+  },
+  min: {
+    type: Number,
+    default: 0,
+  },
+  max: {
+    type: Number,
+    default: 100,
+  },
+  step: {
+    type: Number,
+    default: 1,
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const emit = defineEmits(['update:modelValue']);
+
+const value = ref(props.modelValue);
+const thumb = ref<HTMLElement | null>(null);
+const slider = ref<HTMLElement | null>(null);
+const track = ref(null);
+
+watch(value, newValue => {
+  emit('update:modelValue', newValue);
+});
+
+watch(
+  () => props.modelValue,
+  newValue => {
+    value.value = newValue;
+  }
+);
+
+const valuePercentage = computed(() => {
+  return ((value.value - props.min) / (props.max - props.min)) * 100;
+});
+
+const thumbStyle = computed(() => {
+  return {
+    left: `${valuePercentage.value}%`,
+  };
+});
+
+function handleMousedown(event: MouseEvent) {
+  if (props.disabled) return;
+  thumb.value?.classList.add('slider-thumb-active');
+  handleMousemove(event);
+}
+
+function handleMousemove(event: MouseEvent) {
+  if (props.disabled || !thumb.value?.classList.contains('slider-thumb-active'))
+    return;
+  const sliderRect = slider.value?.getBoundingClientRect();
+  if (sliderRect) {
+    const newValue =
+      ((event.clientX - sliderRect.left) / sliderRect.width) *
+        (props.max - props.min) +
+      props.min;
+    const steppedValue = Math.round(newValue / props.step) * props.step;
+    const clampedValue = Math.min(Math.max(steppedValue, props.min), props.max);
+    value.value = clampedValue;
+  }
+}
+
+function handleMouseup() {
+  if (props.disabled) return;
+  thumb.value?.classList.remove('slider-thumb-active');
+}
+
+onMounted(() => {
+  document.addEventListener('mousemove', handleMousemove);
+  document.addEventListener('mouseup', handleMouseup);
+});
+
+onUnmounted(() => {
+  document.removeEventListener('mousemove', handleMousemove);
+  document.removeEventListener('mouseup', handleMouseup);
+});
+</script>
+
+<style scoped lang="scss">
+.slider {
+  position: relative;
+  width: 160px;
+  height: 3px;
+  background-color: #ddd;
+  cursor: pointer;
+}
+
+.slider-track {
+  position: absolute;
+  height: 100%;
+  background-color: var(--active-color-1);
+}
+
+.slider-thumb {
+  position: absolute;
+  top: 2px;
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  background-color: #fff;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+  transform: translate(-50%, -50%);
+  transition: box-shadow 0.2s;
+  cursor: pointer;
+}
+
+.slider-thumb-active {
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
+}
+
+.slider-thumb-disabled {
+  background-color: #ccc;
+  cursor: not-allowed;
+}
+</style>

package/src/TUIRoom/components/common/icons/AIIcon.vue

@@ -0,0 +1,46 @@
+<template>
+  <svg
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M2.00049 1.99989C2.00032 8.66652 2.00024 15.3332 2 21.9998C8.66667 21.9998 15.3333 21.9999 22 21.9999V1.99996C15.3335 1.99935 8.667 2.00035 2.00049 1.99989Z"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-miterlimit="16"
+    />
+    <path
+      d="M2 12H5.18262"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="square"
+    />
+    <path
+      d="M18.7227 12H22"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="square"
+    />
+    <path
+      d="M16 7.14014V16.7283"
+      stroke="#4791FF"
+      stroke-width="2"
+      stroke-linejoin="bevel"
+    />
+    <path
+      d="M7 16.729C7 15.9108 10.2727 7.729 10.2727 7.729C10.2727 7.729 13.5455 15.9108 13.5455 16.729"
+      stroke="#4791FF"
+      stroke-width="2"
+      stroke-linejoin="bevel"
+    />
+    <path
+      d="M8.5 14H12"
+      stroke="#4791FF "
+      stroke-width="2"
+      stroke-linejoin="bevel"
+    />
+  </svg>
+</template>

package/src/TUIRoom/components/common/icons/AISubtitles.vue

@@ -0,0 +1,16 @@
+<template>
+  <svg
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M1.33331 1.33325H14.6666V14.6666H1.33331V1.33325ZM2.66665 2.66659V13.3333H13.3333V2.66659H2.66665ZM3.99998 6.66659C3.99998 5.93021 4.59693 5.33325 5.33331 5.33325H7.33331V6.66659H5.33331V9.33325H7.33331V10.6666H5.33331C4.59693 10.6666 3.99998 10.0697 3.99998 9.33325V6.66659ZM8.66665 6.66659C8.66665 5.93021 9.26358 5.33325 9.99998 5.33325H12V6.66659H9.99998V9.33325H12V10.6666H9.99998C9.26358 10.6666 8.66665 10.0697 8.66665 9.33325V6.66659Z"
+      fill="currentColor"
+    />
+  </svg>
+</template>

package/src/TUIRoom/components/common/icons/AITranscription.vue

@@ -0,0 +1,32 @@
+<template>
+  <svg
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M14.6666 3.33333L1.33331 3.33333L1.33331 2L14.6666 2V3.33333Z"
+      fill="currentColor"
+    />
+    <path
+      d="M5.6673 8.66667H1.33331L1.33331 7.33333L5.6673 7.33333V8.66667Z"
+      fill="currentColor"
+    />
+    <path
+      d="M1.33331 14H5.6673V12.6667H1.33331L1.33331 14Z"
+      fill="currentColor"
+    />
+    <path
+      d="M10.4006 8.19987V10.9333H13.1333V9.73333H11.6006V8.19987H10.4006Z"
+      fill="currentColor"
+    />
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M11.0006 14.6667C13.3939 14.6667 15.334 12.7266 15.334 10.3333C15.334 7.9401 13.3939 6 11.0006 6C8.6074 6 6.6673 7.9401 6.6673 10.3333C6.6673 12.7266 8.6074 14.6667 11.0006 14.6667ZM11.0006 13.3333C12.6575 13.3333 14.0006 11.9902 14.0006 10.3333C14.0006 8.67648 12.6575 7.33333 11.0006 7.33333C9.34378 7.33333 8.00063 8.67648 8.00063 10.3333C8.00063 11.9902 9.34378 13.3333 11.0006 13.3333Z"
+      fill="currentColor"
+    />
+  </svg>
+</template>

package/src/TUIRoom/components/common/icons/BasicBeautyIcon.vue

@@ -0,0 +1,31 @@
+<template>
+  <svg
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <g id="Frame">
+      <path
+        id="Vector"
+        d="M12.4895 5.25858L11.5546 5.78718C11.3026 5.92964 11.0013 5.95592 10.7284 5.85925L7.05828 4.55875C6.32422 4.29864 5.58769 4.94039 5.74486 5.70315L6.52523 9.49018C6.5841 9.77587 6.5153 10.073 6.33685 10.3038L3.96988 13.3644C3.49257 13.9815 3.87443 14.8832 4.64981 14.9699L8.51453 15.402C8.8028 15.4342 9.06287 15.59 9.22728 15.829L11.4286 19.0287C11.8692 19.6691 12.84 19.584 13.1624 18.8767L14.7713 15.347C14.8918 15.0827 15.1212 14.8839 15.3999 14.8022L19.3705 13.6382C20.0132 13.4498 20.2018 12.6307 19.7064 12.1802V12.1802"
+        stroke="currentColor"
+        stroke-width="1.7"
+      />
+      <path
+        id="Vector_2"
+        d="M14.4872 4.12929L15.1531 3.75286V3.75286C15.7384 3.42193 16.4607 3.85698 16.442 4.52912L16.3273 8.63684C16.3191 8.92817 16.4385 9.20856 16.6541 9.40463L17.4452 10.1239L18.0105 10.638"
+        stroke="#4791FF"
+        stroke-width="1.7"
+        stroke-linecap="square"
+      />
+      <path
+        id="Vector_3"
+        d="M17.5 17.5L20.5 20.5"
+        stroke="currentColor"
+        stroke-width="1.7"
+      />
+    </g>
+  </svg>
+</template>

package/src/TUIRoom/components/common/icons/CloseBeautyIcon.vue

@@ -0,0 +1,29 @@
+<template>
+  <svg
+    width="32"
+    height="32"
+    viewBox="0 0 32 32"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <!-- eslint-disable vue/no-parsing-error -->
+    <g id="&#229;&#133;&#179;&#233;&#151;&#173;">
+      <g id="Group 48097253">
+        <circle
+          id="Ellipse 347"
+          cx="16"
+          cy="16"
+          r="12.8667"
+          stroke="#4F586B"
+          stroke-width="2"
+        />
+        <path
+          id="Vector 186"
+          d="M25.6001 6.40002L6.40015 25.6"
+          stroke="#4F586B"
+          stroke-width="2"
+        />
+      </g>
+    </g>
+  </svg>
+</template>

package/src/TUIRoom/components/common/icons/CompareIcon.vue

@@ -0,0 +1,72 @@
+<template>
+  <svg
+    width="20"
+    height="20"
+    viewBox="0 0 20 20"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <!-- eslint-disable vue/no-parsing-error -->
+    <g id="&#231;&#188;&#150;&#231;&#187;&#132; 16">
+      <g id="Group 48097543" filter="url(#filter0_d_9286_1548)">
+        <g id="Group 48097543_2">
+          <path
+            id="Vector"
+            d="M9.6875 3.125V16.875"
+            stroke="white"
+            stroke-width="1.25"
+          />
+          <path
+            id="Rectangle 2379"
+            d="M9.6875 5.3125H4.0625V14.6875H9.6875V5.3125Z"
+            stroke="white"
+            stroke-width="1.25"
+          />
+          <path
+            id="Rectangle 2380"
+            d="M11.5625 5.3125H15.9375V14.6875H11.5625"
+            stroke="white"
+            stroke-width="1.25"
+          />
+        </g>
+      </g>
+    </g>
+    <defs>
+      <filter
+        id="filter0_d_9286_1548"
+        x="0.9375"
+        y="0.625"
+        width="18.125"
+        height="18.75"
+        filterUnits="userSpaceOnUse"
+        color-interpolation-filters="sRGB"
+      >
+        <feFlood flood-opacity="0" result="BackgroundImageFix" />
+        <feColorMatrix
+          in="SourceAlpha"
+          type="matrix"
+          values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+          result="hardAlpha"
+        />
+        <feOffset />
+        <feGaussianBlur stdDeviation="1.25" />
+        <feComposite in2="hardAlpha" operator="out" />
+        <feColorMatrix
+          type="matrix"
+          values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"
+        />
+        <feBlend
+          mode="normal"
+          in2="BackgroundImageFix"
+          result="effect1_dropShadow_9286_1548"
+        />
+        <feBlend
+          mode="normal"
+          in="SourceGraphic"
+          in2="effect1_dropShadow_9286_1548"
+          result="shape"
+        />
+      </filter>
+    </defs>
+  </svg>
+</template>

package/src/TUIRoom/components/common/icons/ResetIcon.vue

@@ -0,0 +1,30 @@
+<template>
+  <svg
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <!-- eslint-disable vue/no-parsing-error -->
+    <g id="&#231;&#188;&#150;&#231;&#187;&#132; 5">
+      <g id="&#231;&#188;&#150;&#231;&#187;&#132; 3">
+        <path
+          id="&#232;&#183;&#175;&#229;&#190;&#132;"
+          d="M2 8C2 11.3137 4.68629 14 8 14C11.3137 14 14 11.3137 14 8C14 4.68629 11.3137 2 8 2C6.36788 2 4.88796 2.65167 3.80626 3.70902"
+          stroke="white"
+          stroke-width="1.5"
+          stroke-linecap="square"
+        />
+        <path
+          id="&#232;&#183;&#175;&#229;&#190;&#132;_2"
+          d="M5.33317 4.66667H2.6665V2"
+          stroke="white"
+          stroke-width="1.5"
+          stroke-linecap="square"
+          stroke-linejoin="round"
+        />
+      </g>
+    </g>
+  </svg>
+</template>

package/src/TUIRoom/components/common/icons/RuddyBeautyIcon.vue

@@ -0,0 +1,43 @@
+<template>
+  <svg
+    width="30"
+    height="30"
+    viewBox="0 0 30 30"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <g id="Group 48097289">
+      <path
+        id="Ellipse 349"
+        d="M27 15C27 21.6274 21.6274 27 15 27C8.37258 27 3 21.6274 3 15C3 12.1605 3.98496 9.55384 5.63267 7.49904C6.3356 6.62243 7.159 5.84657 8.07758 5.19665C10.0333 3.81292 12.4202 3 15 3C21.6274 3 27 8.37258 27 15Z"
+        stroke="#4F586B"
+        stroke-width="2"
+      />
+      <path
+        id="Ellipse 352"
+        d="M18 17C18 18.6569 16.6569 20 15 20C13.3431 20 12 18.6569 12 17"
+        stroke="#4F586B"
+        stroke-width="2"
+      />
+      <path id="Vector 195" d="M8 11L6 15" stroke="#4F586B" stroke-width="2" />
+      <path
+        id="Vector 197"
+        d="M20 11L18 15"
+        stroke="#4F586B"
+        stroke-width="2"
+      />
+      <path
+        id="Vector 196"
+        d="M12 11L10 15"
+        stroke="#4F586B"
+        stroke-width="2"
+      />
+      <path
+        id="Vector 198"
+        d="M24 11L22 15"
+        stroke="#4F586B"
+        stroke-width="2"
+      />
+    </g>
+  </svg>
+</template>

package/src/TUIRoom/components/common/icons/SmootherBeautyIcon.vue

@@ -0,0 +1,49 @@
+<template>
+  <svg
+    width="32"
+    height="32"
+    viewBox="0 0 32 32"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <!-- eslint-disable vue/no-parsing-error -->
+    <g id="&#231;&#163;&#168;&#231;&#154;&#174;">
+      <g id="Group 48097291">
+        <g id="Group 48097256">
+          <circle
+            id="Ellipse 348"
+            cx="16"
+            cy="16"
+            r="11.8"
+            stroke="#4F586B"
+            stroke-width="2"
+          />
+          <path
+            id="Vector 187"
+            d="M16 1.06665V30.9333"
+            stroke="#4F586B"
+            stroke-width="2"
+          />
+          <path
+            id="Vector 190"
+            d="M16 16H27.7333"
+            stroke="#4F586B"
+            stroke-width="2"
+          />
+          <path
+            id="Vector 191"
+            d="M16 10.6666H26.6667"
+            stroke="#4F586B"
+            stroke-width="2"
+          />
+          <path
+            id="Vector 192"
+            d="M16 21.3333H26.6667"
+            stroke="#4F586B"
+            stroke-width="2"
+          />
+        </g>
+      </g>
+    </g>
+  </svg>
+</template>

package/src/TUIRoom/components/common/icons/WhiteningBeautyIcon.vue

@@ -0,0 +1,38 @@
+<template>
+  <svg
+    width="30"
+    height="30"
+    viewBox="0 0 30 30"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <g id="Group 48097287">
+      <path
+        id="Ellipse 349"
+        d="M27 15C27 21.6274 21.6274 27 15 27C8.37258 27 3 21.6274 3 15C3 12.1605 3.98496 9.55384 5.63267 7.49904C6.3356 6.62243 7.159 5.84657 8.07758 5.19665C10.0333 3.81292 12.4202 3 15 3C21.6274 3 27 8.37258 27 15Z"
+        stroke="#4F586B"
+        stroke-width="2"
+      />
+      <circle id="Ellipse 350" cx="10.5" cy="12.5" r="1.5" fill="#4F586B" />
+      <circle id="Ellipse 351" cx="19.5" cy="12.5" r="1.5" fill="#4F586B" />
+      <path
+        id="Ellipse 352"
+        d="M18 17C18 18.6569 16.6569 20 15 20C13.3431 20 12 18.6569 12 17"
+        stroke="#4F586B"
+        stroke-width="2"
+      />
+      <path
+        id="Vector 188"
+        d="M8 5L11 8M22 5L19 8"
+        stroke="#4F586B"
+        stroke-width="2"
+      />
+      <path
+        id="Vector 189"
+        d="M8 25L11 22M22 25L19 22"
+        stroke="#4F586B"
+        stroke-width="2"
+      />
+    </g>
+  </svg>
+</template>

package/src/TUIRoom/conference.ts

@@ -30,6 +30,7 @@ export enum FeatureButton {
   SwitchLanguage = 'Language',
   FullScreen = 'FullScreen',
   Invitation = 'InviteControl',
+  BasicBeauty = 'BasicBeauty',
 }
 export type ThemeOption = 'LIGHT' | 'DARK';
 
@@ -80,6 +81,8 @@ interface IConference {
 
   enableVirtualBackground: () => void;
 
+  enableBasicBeauty: () => void;
+
   hideFeatureButton: (name: FeatureButton) => void;
 
   replaceFriendList: (userList: Array<any>) => void;
@@ -164,6 +167,10 @@ class Conference implements IConference {
     roomService.setComponentConfig({ VirtualBackground: { visible: true } });
   }
 
+  public enableBasicBeauty() {
+    roomService.setComponentConfig({ BasicBeauty: { visible: true } });
+  }
+
   public hideFeatureButton(name: FeatureButton) {
     roomService.setComponentConfig({ [name]: { visible: false } });
   }

package/src/TUIRoom/conference.vue

@@ -16,9 +16,14 @@
       :show-room-tool="showRoomTool"
       class="content"
     />
-    <room-footer v-show="showRoomTool" class="footer" />
+    <room-footer
+      v-show="showRoomTool"
+      class="footer"
+      @show-overlay="handleShowOverlay"
+    />
     <room-sidebar />
     <room-setting />
+    <AISubtitlesOverlay v-if="overlayMap.AISubtitlesOverlay.visible" />
     <loading-overlay v-if="isShowLoading" />
     <password-dialog
       :visible="isShowPasswordContainer"
@@ -47,6 +52,7 @@ import RoomContent from './components/RoomContent/index.vue';
 import RoomSetting from './components/RoomSetting/index.vue';
 import LoadingOverlay from './components/PreRoom/LoadingOverlay.vue';
 import PasswordDialog from './components/PreRoom/PasswordDialog.vue';
+import AISubtitlesOverlay from './components/AITools/AISubtitles.vue';
 import { debounce, throttle } from './utils/utils';
 import { useBasicStore } from './stores/basic';
 import { isMobile, isWeChat } from './utils/environment';
@@ -79,6 +85,13 @@ const props = withDefaults(
   }
 );
 
+const overlayMap = ref<{
+  AISubtitlesOverlay: { visible: boolean };
+  [key: string]: { visible: boolean };
+}>({
+  AISubtitlesOverlay: { visible: false },
+});
+
 const conferenceShow = computed(
   () => props.displayMode === 'permanent' || !!basicStore.roomId
 );
@@ -148,6 +161,12 @@ const showMessage = (data: {
   });
 };
 
+const handleShowOverlay = (data: { name: string; visible: boolean }) => {
+  if (overlayMap.value[data.name]) {
+    overlayMap.value[data.name].visible = data.visible;
+  }
+};
+
 onMounted(() => {
   roomService.on(EventType.ROOM_NOTICE_MESSAGE, showMessage);
   roomService.on(EventType.ROOM_NOTICE_MESSAGE_BOX, showMessageBox);

package/src/TUIRoom/constants/room.ts

@@ -29,4 +29,10 @@ export enum USERS_STATUS {
   NOT_ON_STAGE = 2,
   NOT_ENTER = 3,
 }
+
 export const PASSWORD_MAX_LENGTH_LIMIT = 6;
+
+export enum TRTCBeautyStyle {
+  TRTCBeautyStyleSmooth = 0,
+  TRTCBeautyStyleNature = 1,
+}