@tencentcloud/roomkit-electron-vue3 2.4.1 → 2.5.0

package/src/TUIRoom/stores/room.ts

@@ -20,6 +20,7 @@ export type StreamInfo = {
   userId: string,
   userName?: string,
   avatarUrl?: string,
+  nameCard?: string,
   hasAudioStream?: boolean,
   hasVideoStream?: boolean,
   hasScreenStream?: boolean,
@@ -31,6 +32,7 @@ export type UserInfo = {
   userId: string,
   userName?: string,
   avatarUrl?: string,
+  nameCard?: string,
   hasAudioStream?: boolean,
   hasVideoStream?: boolean,
   hasScreenStream?: boolean,
@@ -83,6 +85,7 @@ interface RoomState {
   masterUserId: string,
   isMicrophoneDisableForAllUser: boolean,
   isCameraDisableForAllUser: boolean,
+  isScreenShareDisableForAllUser: boolean,
   isSeatEnabled: boolean,
   seatMode: TUISeatMode,
   maxMembersCount: number,
@@ -100,6 +103,7 @@ export const useRoomStore = defineStore('room', {
       userId: '',
       userName: '',
       avatarUrl: '',
+      nameCard: '',
       hasAudioStream: false,
       hasVideoStream: false,
       hasScreenStream: false,
@@ -109,6 +113,7 @@ export const useRoomStore = defineStore('room', {
         userId: '',
         userName: '',
         avatarUrl: '',
+        nameCard: '',
         hasAudioStream: false,
         hasVideoStream: false,
         streamType: TUIVideoStreamType.kCameraStream,
@@ -118,6 +123,7 @@ export const useRoomStore = defineStore('room', {
         userId: '',
         userName: '',
         avatarUrl: '',
+        nameCard: '',
         hasScreenStream: false,
         streamType: TUIVideoStreamType.kScreenStream,
         isVisible: true,
@@ -139,6 +145,7 @@ export const useRoomStore = defineStore('room', {
     masterUserId: '',
     isMicrophoneDisableForAllUser: false,
     isCameraDisableForAllUser: false,
+    isScreenShareDisableForAllUser: false,
     isSeatEnabled: false,
     seatMode: TUISeatMode.kFreeToTake,
     maxMembersCount: 5, // Includes local streams and screen shares, above which subsequent streams are played
@@ -195,10 +202,10 @@ export const useRoomStore = defineStore('room', {
       return cameraForbidden as any || this.isAudience;
     },
     localStream: (state) => {
-      const { userId, userName, avatarUrl, hasAudioStream, hasVideoStream } = state.localUser;
+      const { userId, userName, avatarUrl, nameCard, hasAudioStream, hasVideoStream } = state.localUser;
       Object.assign(
         state.localUser.cameraStreamInfo,
-        { userId, userName, avatarUrl, hasAudioStream, hasVideoStream },
+        { userId, userName, avatarUrl, nameCard, hasAudioStream, hasVideoStream },
       );
       return state.localUser.cameraStreamInfo;
     },
@@ -217,6 +224,7 @@ export const useRoomStore = defineStore('room', {
           userId,
           avatarUrl,
           userName,
+          nameCard,
           onSeat,
           hasAudioStream,
           hasVideoStream,
@@ -225,10 +233,10 @@ export const useRoomStore = defineStore('room', {
           isScreenVisible,
         } = userInfo;
         if (onSeat) {
-          obj[`${userId}_${TUIVideoStreamType.kCameraStream}`] = Object.assign(userInfo.cameraStreamInfo, { userId, avatarUrl, userName, hasAudioStream, hasVideoStream, streamType: TUIVideoStreamType.kCameraStream, isVisible: isVideoVisible });
+          obj[`${userId}_${TUIVideoStreamType.kCameraStream}`] = Object.assign(userInfo.cameraStreamInfo, { userId, avatarUrl, userName,nameCard, hasAudioStream, hasVideoStream, streamType: TUIVideoStreamType.kCameraStream, isVisible: isVideoVisible });
         }
         if (hasScreenStream) {
-          obj[`${userId}_${TUIVideoStreamType.kScreenStream}`] = Object.assign(userInfo.screenStreamInfo, { userId, avatarUrl, userName, hasScreenStream, streamType: TUIVideoStreamType.kScreenStream, isVisible: isScreenVisible });
+          obj[`${userId}_${TUIVideoStreamType.kScreenStream}`] = Object.assign(userInfo.screenStreamInfo, { userId, avatarUrl, userName, nameCard, hasScreenStream, streamType: TUIVideoStreamType.kScreenStream, isVisible: isScreenVisible });
         }
       });
       return obj;
@@ -243,12 +251,21 @@ export const useRoomStore = defineStore('room', {
       }
       return list;
     },
+    cameraStreamList(): Array<StreamInfo> {
+      const list = [
+        this.localStream,
+        ...(Object.values(this.remoteStreamObj)
+          .filter(stream => stream.streamType === TUIVideoStreamType.kCameraStream)),
+      ];
+      return list;
+    },
     streamNumber(): number {
       return this.streamList.length;
     },
     remoteUserList: state => [...Object.values(state.remoteUserObj)],
     remoteAnchorList: state => [...Object.values(state.remoteUserObj)].filter(item => item.onSeat),
     userList: state => [state.localUser, ...Object.values(state.remoteUserObj)],
+    generalUserScreenStreamList: state => [...Object.values(state.remoteUserObj)].filter(item => item.hasScreenStream && item.userRole === TUIRole.kGeneralUser),
     userNumber(): number {
       return this.userList.length;
     },
@@ -260,6 +277,15 @@ export const useRoomStore = defineStore('room', {
       return Object.keys(this.hasVideoStreamObject).length > this.maxMembersCount
         ? TUIVideoStreamType.kCameraStreamLow : TUIVideoStreamType.kCameraStream;
     },
+    getDisplayName: (state) =>  {
+      return (userId: string) => {
+      const userInfo = userId === state.localUser.userId ? state.localUser : state.remoteUserObj[userId];
+      if (userInfo) {
+        const { nameCard, userName, userId } = userInfo;
+        return nameCard || userName || userId;
+      }
+      }
+    }
   },
   actions: {
     setLocalUser(obj: Record<string, any>) {
@@ -270,9 +296,9 @@ export const useRoomStore = defineStore('room', {
     },
     getUserName(userId: string) {
       if (userId === this.localUser.userId) {
-        return this.localUser.userName || userId;
+        return this.localUser.nameCard || this.localUser.userName || userId;
       }
-      return this.remoteUserObj[userId]?.userName || userId;
+      return this.remoteUserObj[userId]?.nameCard || this.remoteUserObj[userId]?.userName || userId;
     },
     getUserRole(userId: string) {
       if (userId === this.localUser.userId) {
@@ -285,6 +311,7 @@ export const useRoomStore = defineStore('room', {
         userId,
         userName: '',
         avatarUrl: '',
+        nameCard: '',
         hasAudioStream: false,
         hasVideoStream: false,
         hasScreenStream: false,
@@ -299,6 +326,7 @@ export const useRoomStore = defineStore('room', {
           userId,
           userName: '',
           avatarUrl: '',
+          nameCard: '',
           hasAudioStream: false,
           hasVideoStream: false,
           streamType: TUIVideoStreamType.kCameraStream,
@@ -308,6 +336,7 @@ export const useRoomStore = defineStore('room', {
           userId,
           userName: '',
           avatarUrl: '',
+          nameCard: '',
           hasScreenStream: false,
           streamType: TUIVideoStreamType.kScreenStream,
           isVisible: false,
@@ -517,11 +546,19 @@ export const useRoomStore = defineStore('room', {
       this.currentSpeakerId = deviceId;
     },
     setRoomInfo(roomInfo: TUIRoomInfo) {
+      if (!roomInfo) return;
+
       const {
-        roomOwner, isMicrophoneDisableForAllUser,
-        isCameraDisableForAllUser,
-        isSeatEnabled, seatMode, maxSeatCount, roomName,
+        roomOwner = this.masterUserId,
+        isMicrophoneDisableForAllUser = this.isMicrophoneDisableForAllUser,
+        isCameraDisableForAllUser = this.isCameraDisableForAllUser,
+        isScreenShareDisableForAllUser = this.isScreenShareDisableForAllUser,
+        isSeatEnabled = this.isSeatEnabled,
+        seatMode = this.seatMode,
+        maxSeatCount = this.maxSeatCount,
+        roomName = this.roomName,
       } = roomInfo;
+
       if (this.localUser.userId === roomOwner) {
         this.localUser.userRole = TUIRole.kRoomOwner;
       }
@@ -529,12 +566,14 @@ export const useRoomStore = defineStore('room', {
       this.masterUserId = roomOwner;
       this.isMicrophoneDisableForAllUser = isMicrophoneDisableForAllUser;
       this.isCameraDisableForAllUser = isCameraDisableForAllUser;
+      this.isScreenShareDisableForAllUser = isScreenShareDisableForAllUser;
       this.isSeatEnabled = isSeatEnabled;
       this.seatMode = seatMode;
-      this.canControlSelfAudio = !this.isMicrophoneDisableForAllUser;
-      this.canControlSelfVideo = !this.isCameraDisableForAllUser;
       this.maxSeatCount = maxSeatCount;
       this.roomName = roomName;
+
+      this.canControlSelfAudio = !this.isMicrophoneDisableForAllUser;
+      this.canControlSelfVideo = !this.isCameraDisableForAllUser;
     },
     setDisableMicrophoneForAllUserByAdmin(isDisable: boolean) {
       this.isMicrophoneDisableForAllUser = isDisable;
@@ -542,6 +581,9 @@ export const useRoomStore = defineStore('room', {
     setDisableCameraForAllUserByAdmin(isDisable: boolean) {
       this.isCameraDisableForAllUser = isDisable;
     },
+    setDisableScreenShareForAllUserByAdmin(isDisable: boolean) {
+      this.isScreenShareDisableForAllUser = isDisable;
+    },
     setMasterUserId(userId: string) {
       this.masterUserId = userId;
     },
@@ -615,14 +657,6 @@ export const useRoomStore = defineStore('room', {
         this.setCurrentSpeakerId(deviceList[0].deviceId);
       }
     },
-    // Set everyone's mute status when banning/cancelling the ban
-    setMicrophoneDisableState(isDisable: boolean) {
-      this.isMicrophoneDisableForAllUser = isDisable;
-    },
-    // Set everyone's video banned status when banning/cancelling a ban
-    setCameraDisableState(isDisable: boolean) {
-      this.isCameraDisableForAllUser = isDisable;
-    },
     // Moderator individually modifies the mute status of a user's outgoing text messages
     setMuteUserChat(userId: string, muted: boolean) {
       const remoteUserInfo = this.remoteUserObj[userId];
@@ -636,6 +670,12 @@ export const useRoomStore = defineStore('room', {
         remoteUserInfo.userRole = role;
       }
     },
+    setRemoteUserNameCard(userId: string, nameCard: string) {
+      const remoteUserInfo = this.remoteUserObj[userId];
+      if (remoteUserInfo) {
+        remoteUserInfo.nameCard = nameCard;
+      }
+    },
     setRequestUserOpenMic(options: { userId: string, isRequesting: boolean, requestId?: string }) {
       const { userId, isRequesting, requestId } = options;
       const remoteUserInfo = this.remoteUserObj[userId];
@@ -737,6 +777,7 @@ export const useRoomStore = defineStore('room', {
       this.masterUserId = '';
       this.isMicrophoneDisableForAllUser = false;
       this.isCameraDisableForAllUser = false;
+      this.isScreenShareDisableForAllUser = false;
       this.isSeatEnabled = false;
       this.seatMode = TUISeatMode.kFreeToTake;
       this.hasVideoStreamObject = {};

package/src/TUIRoom/utils/adapter.ts

@@ -1,17 +1,22 @@
 import { isWeChat } from './environment';
 declare let uni: any;
-
 export const clipBoard = (data: any): Promise<{
   code: number,
   data?: any,
   err?: any
-}> => new Promise((resolve, reject) => {
+}> => new Promise(async (resolve, reject) => {
   if (!isWeChat) {
+    const textString = data.toString();
     try {
-      navigator.clipboard.writeText(`${data}`);
+      await navigator.clipboard.writeText(`${data}`);
       resolve({ code: 0, data });
     } catch (err) {
-      reject({ code: -1, err });
+      try {
+        copyTextByDocumentExecCommand(textString);
+        resolve({ code: 0, data });
+      } catch (err) {
+        reject({ code: -1, err });
+      }
     }
     return;
   }
@@ -34,3 +39,38 @@ export const clipBoard = (data: any): Promise<{
 });
 
 
+function copyTextByDocumentExecCommand(textString: string) {
+  try {
+    const input = document.createElement('input');
+    input.id = 'copy-input';
+    input.readOnly = true;
+    input.style.position = 'absolute';
+    input.style.left = '-1000px';
+    input.style.zIndex = '-1000';
+    document.body.appendChild(input);
+    input.value = textString;
+    selectText(input, 0, textString.length);
+    if (document.execCommand('copy')) {
+      document.execCommand('copy');
+    }
+    input.blur();
+  } catch (err) {
+  }
+}
+
+function selectText(
+  textbox: HTMLInputElement,
+  startIndex: number,
+  stopIndex: number,
+) {
+  if ((textbox as any).createTextRange) {
+    const range = (textbox as any).createTextRange();
+    range.collapse(true);
+    range.moveStart('character', startIndex);
+    range.moveEnd('character', stopIndex - startIndex);
+    range.select();
+  } else {
+    (textbox as any).setSelectionRange(startIndex, stopIndex);
+    (textbox as any).focus();
+  }
+}

package/src/TUIRoom/utils/utils.ts

@@ -146,3 +146,45 @@ export function addSuffix(value: string | number, suffix = 'px') {
   }
   return value;
 }
+
+export function getUrlWithRoomId(roomId: string): string {
+  const currentUrl = window.location.href;
+  const urlObj = new URL(currentUrl);
+  const params = new URLSearchParams(urlObj.search);
+  if (params.has('roomId')) {
+    params.delete('roomId');
+  }
+  params.append('roomId', roomId);
+  return `${urlObj.origin + urlObj.pathname + '#/home?' + params.toString()}`; 
+}
+
+export function calculateByteLength(str: string) {
+  let byteLength = 0;
+  for (let i = 0; i < str.length; i++) {
+    const code = str.charCodeAt(i);
+    if (code <= 0x7f) {
+      byteLength += 1;
+    } else if (code <= 0x7ff) {
+      byteLength += 2;
+    } else if (code <= 0xffff) {
+      byteLength += 3;
+    } else {
+      byteLength += 4;
+    }
+  }
+  return byteLength;
+}
+
+
+export function objectMerge(...args: any[]) {
+  return args.reduce((acc, cur) => {
+    Object.keys(cur).forEach((key) => {
+      if (acc[key] && typeof acc[key] === 'object') {
+        acc[key] = objectMerge(acc[key], cur[key]);
+      } else {
+        acc[key] = cur[key];
+      }
+    });
+    return acc;
+  }, {});
+}

package/es/components/common/base/Input.vue.mjs

@@ -1,7 +0,0 @@
-import _sfc_main from "./Input.vue2.mjs";
-import "./Input.vue3.mjs";
-import _export_sfc from "../../../_virtual/_plugin-vue_export-helper.mjs";
-const TuiInput = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-627d0ea3"]]);
-export {
-  TuiInput as default
-};

package/es/components/common/base/Input.vue2.mjs

@@ -1,34 +0,0 @@
-import { defineComponent, openBlock, createElementBlock, createElementVNode } from "vue";
-const _hoisted_1 = { class: "tui-input" };
-const _hoisted_2 = ["value", "placeholder", "disabled", "type"];
-const _sfc_main = /* @__PURE__ */ defineComponent({
-  __name: "Input",
-  props: {
-    modelValue: { default: "" },
-    placeholder: { default: "" },
-    disabled: { type: Boolean, default: false },
-    type: { default: "text" }
-  },
-  emits: ["update:modelValue"],
-  setup(__props, { emit: __emit }) {
-    const emit = __emit;
-    function updateValue(event) {
-      emit("update:modelValue", event.target.value);
-    }
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1, [
-        createElementVNode("input", {
-          value: _ctx.modelValue,
-          placeholder: _ctx.placeholder,
-          disabled: _ctx.disabled,
-          maxlength: "80",
-          type: _ctx.type,
-          onInput: updateValue
-        }, null, 40, _hoisted_2)
-      ]);
-    };
-  }
-});
-export {
-  _sfc_main as default
-};

package/lib/components/common/base/Input.vue.js

@@ -1,7 +0,0 @@
-"use strict";
-Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const Input_vue_vue_type_script_setup_true_lang = require("./Input.vue2.js");
-require("./Input.vue3.js");
-const _pluginVue_exportHelper = require("../../../_virtual/_plugin-vue_export-helper.js");
-const TuiInput = /* @__PURE__ */ _pluginVue_exportHelper.default(Input_vue_vue_type_script_setup_true_lang.default, [["__scopeId", "data-v-627d0ea3"]]);
-exports.default = TuiInput;

package/lib/components/common/base/Input.vue2.js

@@ -1,34 +0,0 @@
-"use strict";
-Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const Vue = require("vue");
-const _hoisted_1 = { class: "tui-input" };
-const _hoisted_2 = ["value", "placeholder", "disabled", "type"];
-const _sfc_main = /* @__PURE__ */ Vue.defineComponent({
-  __name: "Input",
-  props: {
-    modelValue: { default: "" },
-    placeholder: { default: "" },
-    disabled: { type: Boolean, default: false },
-    type: { default: "text" }
-  },
-  emits: ["update:modelValue"],
-  setup(__props, { emit: __emit }) {
-    const emit = __emit;
-    function updateValue(event) {
-      emit("update:modelValue", event.target.value);
-    }
-    return (_ctx, _cache) => {
-      return Vue.openBlock(), Vue.createElementBlock("div", _hoisted_1, [
-        Vue.createElementVNode("input", {
-          value: _ctx.modelValue,
-          placeholder: _ctx.placeholder,
-          disabled: _ctx.disabled,
-          maxlength: "80",
-          type: _ctx.type,
-          onInput: updateValue
-        }, null, 40, _hoisted_2)
-      ]);
-    };
-  }
-});
-exports.default = _sfc_main;

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

@@ -1,61 +0,0 @@
-<template>
-  <div class="tui-input">
-    <input
-      :value="modelValue"
-      :placeholder="placeholder"
-      :disabled="disabled"
-      maxlength="80"
-      :type="type"
-      @input="updateValue"
-    />
-  </div>
-</template>
-
-<script setup lang="ts">
-interface Props {
-  modelValue: string;
-  placeholder: string;
-  disabled?: boolean;
-  type?: string;
-}
-
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-const props = withDefaults(defineProps<Props>(), {
-  modelValue: '',
-  placeholder: '',
-  disabled: false,
-  type: 'text',
-});
-
-const emit = defineEmits(['update:modelValue']);
-
-function updateValue(event: any) {
-  emit('update:modelValue', event.target.value);
-}
-</script>
-
-<style lang="scss" scoped>
-.tui-input {
-  position: relative;
-  display: inline-block;
-}
-
-input {
-  width: 100%;
-  padding: 10px 0px 10px 16px;
-  font-size: 14px;
-  color: var(--title-color);
-  background-color: #f9fafc;
-  border: 1px solid var(--stroke-color);
-  border-radius: 4px;
-}
-
-input:focus {
-  border-color: var(--active-color-1);
-  outline: 0;
-}
-
-input:disabled {
-  background-color: var(--background-color-9);
-}
-</style>