@tencentcloud/roomkit-electron-vue3 2.6.0 → 2.6.3

package/src/TUIRoom/components/RoomFooter/index/index.vue

@@ -52,11 +52,17 @@
         class="center-container-item"
         @click="handleControlClick('moreControl')"
       />
+      <AIControl
+        class="center-container-item"
+        @click="handleControlClick('AIControl')"
+        @show-overlay="handleShowOverlay"
+      />
       <setting-control
         class="center-container-item"
         @click="handleControlClick('settingControl')"
       />
       <virtual-background class="center-container-item" />
+      <basic-beauty v-if="!isElectron" class="center-container-item" />
     </div>
     <div class="right-container">
       <end-control />
@@ -65,6 +71,7 @@
 </template>
 
 <script setup lang="ts">
+import { defineEmits } from 'vue';
 import AudioControl from '../AudioControl.vue';
 import ScreenShareControl from '../ScreenShareControl/Index.vue';
 import FullScreenControl from '../FullScreenControl.vue';
@@ -79,15 +86,20 @@ import EndControl from '../EndControl/index.vue';
 import SettingControl from '../SettingControl.vue';
 import WhiteboardControl from '../WhiteboardControl.vue';
 import VirtualBackground from '../VirtualBackground.vue';
+import AIControl from '../AIControl.vue';
+import BasicBeauty from '../BasicBeauty.vue';
 import bus from '../../../hooks/useMitt';
 
 import useRoomFooter from './useRoomFooterHooks';
 import { isElectron } from '../../../utils/environment';
 const { roomStore, isMaster, isAdmin, isAudience } = useRoomFooter();
-
+const emit = defineEmits(['show-overlay']);
 function handleControlClick(name: string) {
   bus.emit('experience-communication', name);
 }
+function handleShowOverlay(data: { name: string; visible: boolean }) {
+  emit('show-overlay', data);
+}
 </script>
 
 <style lang="scss" scoped>

package/src/TUIRoom/components/RoomSidebar/index.vue

@@ -10,16 +10,18 @@
       <chat v-if="sidebarName == 'chat'" />
       <room-more v-if="sidebarName == 'more'" />
       <manage-member v-if="sidebarName == 'manage-member'" />
+      <AITranscription v-if="sidebarName == 'aiTranscription'" />
     </Drawer>
   </div>
 </template>
 
 <script setup lang="ts">
-import Chat from '../Chat/index.vue';
 import Drawer from '../common/base/Drawer.vue';
 import useSideBar from './useSideBarHooks';
 import ManageMember from '../ManageMember/index.vue';
 import RoomMore from '../RoomMore/index.vue';
+import Chat from '../Chat/index/index.vue';
+import AITranscription from '../AITools/AITranscription.vue';
 const { isSidebarOpen, title, handleClose, sidebarName } = useSideBar();
 </script>
 

package/src/TUIRoom/components/RoomSidebar/useSideBarHooks.ts

@@ -6,6 +6,7 @@ import { useBasicStore } from '../../stores/basic';
 import { useI18n } from '../../locales';
 import { computed, onUnmounted, watch } from 'vue';
 import { useRoomStore } from '../../stores/room';
+import { isMobile } from '../../utils/environment';
 
 export default function useSideBar() {
   const roomEngine = useGetRoomEngine();
@@ -39,6 +40,9 @@ export default function useSideBar() {
       case 'manage-member':
         sidebarTitle = `${t('Members')} (${userNumber.value})`;
         break;
+      case 'aiTranscription':
+        sidebarTitle = `${t('AI real-time conference content')}`;
+        break;
       default:
         break;
     }
@@ -53,19 +57,34 @@ export default function useSideBar() {
 
   /** Monitor message reception, placed here to only record unread messages before opening chat */
   const onReceiveMessage = (options: { data: any }) => {
+    let messageTypeList = [TencentCloudChat.TYPES.MSG_TEXT];
+    // todo Remove this logic when chat is released
+    if (!isMobile || basicStore.scene !== 'chat') {
+      messageTypeList = messageTypeList.concat([
+        TencentCloudChat.TYPES.MSG_IMAGE,
+        TencentCloudChat.TYPES.MSG_FILE,
+        TencentCloudChat.TYPES.MSG_FACE,
+        TencentCloudChat.TYPES.MSG_VIDEO,
+      ]);
+    }
+
     if (!options || !options.data) {
       return;
     }
+
     const currentConversationId = `GROUP${roomId.value}`;
+    const isChatSidebarOpen =
+      basicStore.isSidebarOpen && basicStore.sidebarName === 'chat';
+
     options.data.forEach((message: any) => {
-      if (
-        message.conversationID === currentConversationId &&
-        message.type === TencentCloudChat.TYPES.MSG_TEXT
-      ) {
-        if (!basicStore.isSidebarOpen || basicStore.sidebarName !== 'chat') {
-          // eslint-disable-next-line no-plusplus
-          chatStore.updateUnReadCount(++chatStore.unReadCount);
-        }
+      if (message.conversationID !== currentConversationId) return;
+
+      const shouldUpdateUnreadCount =
+        messageTypeList.includes(message.type) && !isChatSidebarOpen;
+
+      if (shouldUpdateUnreadCount) {
+        // eslint-disable-next-line no-plusplus
+        chatStore.updateUnReadCount(++chatStore.unReadCount);
       }
     });
   };

package/src/TUIRoom/components/ScheduleConference/ScheduleRoomList.vue

@@ -189,9 +189,18 @@ const updateAttendees = (
   );
   return resultList;
 };
-const onConferenceScheduled = async (data: { conferenceInfo: any }) => {
+const onConferenceScheduled = async (data: {
+  conferenceInfo: TUIConferenceInfo;
+}) => {
   const { conferenceInfo } = data;
-  scheduleRoomList.value.push(conferenceInfo);
+  const index = scheduleRoomList.value.findIndex(
+    item => item.basicRoomInfo.roomId === conferenceInfo.basicRoomInfo.roomId
+  );
+  if (index >= 0) {
+    scheduleRoomList.value.splice(index, 1, conferenceInfo);
+  } else {
+    scheduleRoomList.value.push(conferenceInfo);
+  }
 };
 const onConferenceCancelled = async (data: any) => {
   scheduleRoomList.value = scheduleRoomList.value.filter(

package/src/TUIRoom/components/Whiteboard/controller/ImageController/image/folder.svg

@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="32px" height="32px" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 60.1 (88133) - https://sketch.com -->
+    <title>folder</title>
+    <desc>Created with Sketch.</desc>
+    <g id="页面-4" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Whiteboard-Guidelines" transform="translate(-664.000000, -374.000000)">
+            <g id="folder" transform="translate(664.000000, 374.000000)">
+                <rect id="矩形备份-25" fill="#FFFFFF" opacity="0.01" x="0" y="0" width="32" height="32"></rect>
+                <path d="M10,11 C10,10.4477153 10.4477153,10 11,10 L14.4384472,10 C15.3561825,10 16.1561487,10.6245947 16.3787322,11.5149287 L16.5,12 L20,12 C21.1045695,12 22,12.8954305 22,14 L22,20 C22,21.1045695 21.1045695,22 20,22 L12,22 C10.8954305,22 10,21.1045695 10,20 L10,11 Z" id="形状结合" stroke="#212324" stroke-linecap="round" stroke-linejoin="round"></path>
+                <line x1="10" y1="14" x2="22" y2="14" id="路径-6" stroke="#212324" stroke-linecap="round" stroke-linejoin="round"></line>
+            </g>
+        </g>
+    </g>
+</svg>

package/src/TUIRoom/components/Whiteboard/controller/ImageController/index.vue

@@ -0,0 +1,92 @@
+<template>
+  <div>
+    <div class="image-controller">
+      <button class="upload-button" @click="insertImage">
+        <img :src="folder" />
+      </button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { inject, Ref } from 'vue';
+import FabricCanvas from './../../core';
+import folder from './image/folder.svg';
+import logger from '../../../../utils/common/logger';
+const canvas = inject<Ref<FabricCanvas>>('canvas');
+
+function insertImage() {
+  if (!canvas || !canvas.value) {
+    logger.error('Canvas is not available or not initialized.');
+    return;
+  }
+  const input = document.createElement('input');
+  input.type = 'file';
+  const mimeTypes = ['image/png', 'image/jpeg', 'image/jpg', 'image/bmp'].join(
+    ','
+  );
+  input.accept = mimeTypes;
+  input.onchange = event => {
+    const file = (event.target as HTMLInputElement).files?.[0];
+    if (!file) {
+      logger.info('No file selected.');
+      return;
+    }
+    const validTypes = mimeTypes.split(',').map(type => type.trim());
+    if (!validTypes.includes(file.type)) {
+      logger.error(
+        'Invalid file type. Please upload a PNG, JPEG, JPG, or BMP image.'
+      );
+      return;
+    }
+    const reader = new FileReader();
+    reader.onload = event => {
+      const img = new Image();
+      img.onload = () => {
+        canvas.value.insertImage(img.src);
+      };
+      img.src = event.target?.result as string;
+    };
+    reader.onerror = () => {
+      logger.error('Failed to read file.');
+    };
+    reader.readAsDataURL(file);
+  };
+  input.onerror = () => {
+    logger.error('Failed to create file input.');
+  };
+  input.click();
+}
+</script>
+
+<style lang="scss" scoped>
+.image-controller {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  font-size: 12px;
+  cursor: pointer;
+  user-select: none;
+  background-color: white;
+  border-radius: 4px;
+  box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.1);
+}
+
+.upload-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  margin-right: 2px;
+  margin-left: 2px;
+  background-color: white;
+  border: none;
+
+  &:hover {
+    background: rgba(33, 35, 36, 0.1);
+  }
+}
+</style>

package/src/TUIRoom/components/Whiteboard/controller/RedoUndo/index.vue

@@ -24,7 +24,6 @@ const historyList = ref<any>([]);
 
 function renderCanvas(data: any) {
   if (!canvas?.value) return;
-  canvas.value.clearCanvas();
   canvas.value.loadFromJSON(data, () => {
     canvas.value.renderAll();
   });

package/src/TUIRoom/components/Whiteboard/controller/SaveController/index.vue

@@ -11,6 +11,7 @@
 <script setup lang="ts">
 import { inject, Ref } from 'vue';
 import FabricCanvas from './../../core';
+import { ipcRenderer } from 'electron';
 
 const canvas = inject<Ref<FabricCanvas>>('canvas');
 
@@ -44,6 +45,7 @@ function downloadCanvas() {
   document.body.appendChild(link);
   link.click();
   document.body.removeChild(link);
+  ipcRenderer.send('whiteboard:save-from-whiteboard-window');
 }
 </script>
 

package/src/TUIRoom/components/Whiteboard/controller/ToolBox/index.vue

@@ -21,7 +21,7 @@
   </div>
 </template>
 <script setup lang="ts">
-import { inject, ref, Ref } from 'vue';
+import { inject, onMounted, onUnmounted, ref, Ref } from 'vue';
 import FabricCanvas, { DrawingTool } from './../../core';
 import selector from './image/selector.svg';
 import selectorActive from './image/selector-active.svg';
@@ -121,6 +121,18 @@ function clickClear() {
   // eslint-disable-next-line no-undef
   eventBus.emit('undo-clear-canvas');
 }
+
+function changeToSelect() {
+  currentShapType.value = 'select';
+}
+
+onMounted(() => {
+  eventBus.on('insert-images', changeToSelect);
+});
+
+onUnmounted(() => {
+  eventBus.off('insert-images', changeToSelect);
+});
 </script>
 <style lang="scss" scoped>
 .tool-mid-box {

package/src/TUIRoom/components/Whiteboard/core/index.ts

@@ -156,6 +156,15 @@ class FabricCanvas extends EventEmitter<FabricEvents> {
     this.canvas.setActiveObject(object);
   }
 
+  public resetActiveObject(): void {
+    const allObjects = this.canvas.getObjects();
+    const activeSelection = new fabric.ActiveSelection(allObjects, {
+      canvas: this.canvas,
+    });
+    this.canvas.setActiveObject(activeSelection);
+    this.canvas.discardActiveObject();
+  }
+
   public setWidth(value: number | string): void {
     this.canvas.setWidth(value);
   }
@@ -171,6 +180,26 @@ class FabricCanvas extends EventEmitter<FabricEvents> {
     }
   }
 
+  public setObjectsSelectable(objectsSelectable: boolean) {
+    this.canvas.getObjects().forEach((obj: any) => {
+      obj.selectable = objectsSelectable;
+      obj.evented = objectsSelectable;
+    });
+    this.canvas.perPixelTargetFind = !objectsSelectable;
+    this.canvas.selection = objectsSelectable;
+
+    if (!objectsSelectable) {
+      this.canvas.renderAll();
+    }
+  }
+
+  public setEvented() {
+    this.canvas.getObjects().forEach((obj: any) => {
+      obj.evented = true;
+    });
+    this.canvas.renderAll();
+  }
+
   public reloadCanvas() {
     this.clearCanvas();
     this.canvas.renderAll();
@@ -181,26 +210,23 @@ class FabricCanvas extends EventEmitter<FabricEvents> {
 
   public setDrawingTool(tool: DrawingTool) {
     if (this.drawingTool === tool) return;
-
     this.canvas.isDrawingMode = false;
-    this.canvas.selection = false;
-    this.canvas.perPixelTargetFind = true;
     this.drawingTool = tool;
-
     this.canvas.discardActiveObject();
-    this.canvas.requestRenderAll();
+    this.setObjectsSelectable(false);
 
     switch (tool) {
       case 'pencil':
         this.drawFreeDraw();
         break;
       case 'eraser':
+        this.setEvented();
         this.setEraser();
         break;
       case 'select':
-        this.canvas.selection = true;
-        this.canvas.perPixelTargetFind = false;
-        this.canvas.defaultCursor = 'auto';
+        this.setObjectsSelectable(true);
+        this.resetActiveObject();
+        this.canvas.defaultCursor = 'move';
         break;
       case 'rectangle':
       case 'triangle':
@@ -224,28 +250,48 @@ class FabricCanvas extends EventEmitter<FabricEvents> {
   }
 
   public drawRect(options: IRectOptions): void {
-    const rect = new fabric.Rect({ ...this.options, ...options });
+    const rect = new fabric.Rect({
+      ...this.options,
+      selectable: false,
+      evented: false,
+      ...options,
+    });
     this.canvas.add(rect);
     this.currentShape = rect;
     this.canvas.defaultCursor = 'crosshair';
   }
 
   public drawTriangle(options: ITriangleOptions): void {
-    const triangle = new fabric.Triangle({ ...this.options, ...options });
+    const triangle = new fabric.Triangle({
+      ...this.options,
+      selectable: false,
+      evented: false,
+      ...options,
+    });
     this.canvas.add(triangle);
     this.currentShape = triangle;
     this.canvas.defaultCursor = 'crosshair';
   }
 
   public drawCircle(options: ICircleOptions): void {
-    const circle = new fabric.Circle({ ...this.options, ...options });
+    const circle = new fabric.Circle({
+      ...this.options,
+      selectable: false,
+      evented: false,
+      ...options,
+    });
     this.canvas.add(circle);
     this.currentShape = circle;
     this.canvas.defaultCursor = 'crosshair';
   }
 
   public drawEllipse(options: IEllipseOptions): void {
-    const ellipse = new fabric.Ellipse({ ...this.options, ...options });
+    const ellipse = new fabric.Ellipse({
+      ...this.options,
+      selectable: false,
+      evented: false,
+      ...options,
+    });
     this.canvas.add(ellipse);
     this.currentShape = ellipse;
     this.canvas.defaultCursor = 'crosshair';
@@ -261,6 +307,8 @@ class FabricCanvas extends EventEmitter<FabricEvents> {
     const line = new fabric.Line([x1, y1, x2, y2], {
       ...this.options,
       ...options,
+      selectable: false,
+      evented: false,
     });
     this.canvas.add(line);
     this.currentShape = line;
@@ -274,7 +322,12 @@ class FabricCanvas extends EventEmitter<FabricEvents> {
     y2: number,
     options?: ILineOptions
   ): void {
-    const arrow = new Arrow([x1, y1, x2, y2], { ...this.options, ...options });
+    const arrow = new Arrow([x1, y1, x2, y2], {
+      ...this.options,
+      selectable: false,
+      evented: false,
+      ...options,
+    });
     this.canvas.add(arrow);
     this.currentShape = arrow;
     this.canvas.defaultCursor = 'crosshair';
@@ -305,6 +358,8 @@ class FabricCanvas extends EventEmitter<FabricEvents> {
       editingBorderColor: '#999999',
       cursorColor: '#999999',
       padding: 5,
+      selectable: false,
+      evented: false,
       ...options,
     });
     this.canvas.add(textObj);
@@ -331,11 +386,30 @@ class FabricCanvas extends EventEmitter<FabricEvents> {
         const canvasHeight = this.canvas.getHeight();
         const imageWidth = (img.width as number) * (img.scaleX as number);
         const imageHeight = (img.height as number) * (img.scaleY as number);
-        const left = (canvasWidth - imageWidth) / 2;
-        const top = (canvasHeight - imageHeight) / 2;
+        const aspectRatio = imageWidth / imageHeight;
+        const halfCanvasWidth = canvasWidth / 2;
+        const halfCanvasHeight = canvasHeight / 2;
+        let scaledWidth;
+        let scaledHeight;
+        if (aspectRatio > 1) {
+          scaledWidth = halfCanvasWidth;
+          scaledHeight = scaledWidth / aspectRatio;
+        } else {
+          scaledHeight = halfCanvasHeight;
+          scaledWidth = scaledHeight * aspectRatio;
+        }
+        const scale = scaledWidth / imageWidth;
+        img.scale(scale);
+        const left = (canvasWidth - scaledWidth) / 2;
+        const top = (canvasHeight - scaledHeight) / 2;
         img.set({ left, top });
       }
       this.canvas.add(img);
+      eventBus.emit('insert-images');
+      this.setDrawingTool('select');
+      this.emit('push-canvas-to-stack', null);
+      this.setActiveObject(img);
+      this.canvas.requestRenderAll();
     });
   }
 
@@ -353,7 +427,7 @@ class FabricCanvas extends EventEmitter<FabricEvents> {
 
   public setEraser(options?: any): void {
     this.canvas.freeDrawingBrush = new fabric.EraserBrush(this.canvas, options);
-    this.canvas.freeDrawingCursor = 'auto';
+    this.canvas.freeDrawingCursor = 'pointer';
     this.canvas.renderAll();
   }
 
@@ -363,6 +437,7 @@ class FabricCanvas extends EventEmitter<FabricEvents> {
     this.canvas.on('mouse:up', this.onMouseUp.bind(this));
     this.canvas.on('object:moving', this.onObjectMoving.bind(this));
     this.canvas.on('object:scaling', this.onObjectScaling.bind(this));
+    this.canvas.on('object:rotating', this.onObjectRotating.bind(this));
     eventBus.on('exitTextEditing', this.exitTextEditing.bind(this));
   }
 
@@ -531,6 +606,9 @@ class FabricCanvas extends EventEmitter<FabricEvents> {
     this.isValidSelection = true;
   }
 
+  private onObjectRotating(event: IEvent) {
+    this.isValidSelection = true;
+  }
   private isNeedPushToStack() {
     if (
       this.drawingTool === 'text' ||
@@ -566,6 +644,10 @@ class FabricCanvas extends EventEmitter<FabricEvents> {
     return this.canvas.renderAll();
   }
 
+  public requestRenderAll() {
+    return this.canvas.requestRenderAll();
+  }
+
   public zoom(ratio = 1) {
     const point = new fabric.Point(
       (this.canvas.width as number) / 2,

package/src/TUIRoom/components/Whiteboard/index.vue

@@ -15,6 +15,9 @@
           <CloseController />
         </div>
       </div>
+      <div class="image-controller" v-show="isImageControllerVisiable">
+        <ImageController />
+      </div>
       <!-- <div class="zoom-controller-box">
         <ZoomController />
       </div> -->
@@ -32,6 +35,7 @@ import RedoUndo from './controller/RedoUndo/index.vue';
 import CloseController from './controller/CloseController/index.vue';
 import { getUrlParam } from '../../utils/utils';
 import SaveController from './controller/SaveController/index.vue';
+import ImageController from './controller/ImageController/index.vue';
 
 const isAnnotationWin: Ref<boolean> = ref(false);
 const isAnnotationStarted: Ref<boolean> = ref(false);
@@ -45,7 +49,7 @@ const isControllerVisiable = computed(
 );
 
 const isSaveControllerVisiable = computed(() => !isAnnotationWin.value);
-
+const isImageControllerVisiable = computed(() => !isAnnotationWin.value);
 function init() {
   const fabricCanvas = new FabricCanvas('canvas');
   canvas.value = fabricCanvas;
@@ -142,6 +146,14 @@ ipcRenderer.on('annotation:clear', () => {
   display: flex;
 }
 
+.image-controller {
+  position: absolute;
+  right: 18px;
+  bottom: 18px;
+  z-index: 3;
+  display: flex;
+}
+
 .whiteboard-canvas {
   width: 100%;
   height: 100%;

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

@@ -110,7 +110,9 @@ function handleMicrophoneTest() {
 
 const isTestingSpeaker = ref(false);
 const audioPlayer = document?.createElement('audio');
-audioPlayer.loop = true;
+if (audioPlayer && typeof audioPlayer.loop !== 'undefined') {
+  audioPlayer.loop = true;
+}
 const { t } = useI18n();
 
 /**