@tencentcloud/roomkit-electron-vue3 2.4.2 → 2.6.0

package/lib/utils/adapter.js

@@ -1,13 +1,19 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const environment = require("./environment.js");
-const clipBoard = (data) => new Promise((resolve, reject) => {
+const clipBoard = (data) => new Promise(async (resolve, reject) => {
   if (!environment.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 (err2) {
+        reject({ code: -1, err: err2 });
+      }
     }
     return;
   }
@@ -28,4 +34,34 @@ const clipBoard = (data) => new Promise((resolve, reject) => {
     }
   });
 });
+function copyTextByDocumentExecCommand(textString) {
+  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, startIndex, stopIndex) {
+  if (textbox.createTextRange) {
+    const range = textbox.createTextRange();
+    range.collapse(true);
+    range.moveStart("character", startIndex);
+    range.moveEnd("character", stopIndex - startIndex);
+    range.select();
+  } else {
+    textbox.setSelectionRange(startIndex, stopIndex);
+    textbox.focus();
+  }
+}
 exports.clipBoard = clipBoard;

package/lib/utils/aegis/config.d.ts

@@ -9,4 +9,4 @@ declare const isUploadLoaded: boolean;
 declare const isUploadDetailEvent: boolean;
 declare const aegisId = "iHWefAYqooXkVQhcyK";
 declare const projectName = "TUIRoomKit-Electron";
-export { isUploadLoaded, isUploadDetailEvent, aegisId, projectName, };
+export { isUploadLoaded, isUploadDetailEvent, aegisId, projectName };

package/lib/utils/common.d.ts

@@ -1,3 +1,4 @@
+type ThemeOption = 'LIGHT' | 'DARK';
 /**
  * Get Language
  * @returns language
@@ -8,3 +9,5 @@ export declare function getLanguage(): string;
  * @returns boolean
  */
 export declare function checkNumber(roomId: string): boolean;
+export declare function toTargetTheme(themeOption: ThemeOption): string;
+export {};

package/lib/utils/common.js

@@ -1,14 +1,21 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const utils = require("./utils.js");
+const THEME = {
+  LIGHT: "white",
+  DARK: "black"
+};
 function getLanguage() {
-  let language = utils.getUrlParam("lang") || localStorage.getItem("tuiRoom-language") || navigator.language || "zh";
+  const isWxMiniProgram = typeof wx !== "undefined" && wx.getSystemInfoSync;
+  let language = utils.getUrlParam("lang") || localStorage.getItem("tuiRoom-language") || navigator.language || (isWxMiniProgram ? "zh-CN" : "en-US");
   language = language.replace(/_/, "-").toLowerCase();
-  if (language === "zh-cn" || language === "zh") {
-    language = "zh-CN";
-  } else if (language === "en" || language === "en-us" || language === "en-GB") {
-    language = "en-US";
-  }
+  const isZh = language.startsWith("zh");
+  language = isZh ? "zh-CN" : "en-US";
   return language;
 }
+function toTargetTheme(themeOption) {
+  const theme = themeOption === "DARK" ? THEME.DARK : THEME.LIGHT;
+  return theme;
+}
 exports.getLanguage = getLanguage;
+exports.toTargetTheme = toTargetTheme;

package/lib/utils/constants.d.ts

@@ -1,3 +1,3 @@
 export declare const isVue27: boolean;
 export declare const isVue3: boolean;
-export declare const isInnerScene: boolean;
+export declare const isInnerScene: any;

package/lib/utils/constants.js

@@ -19,10 +19,10 @@ function _interopNamespaceDefault(e) {
   return Object.freeze(n);
 }
 const Vue__namespace = /* @__PURE__ */ _interopNamespaceDefault(Vue);
-var define_import_meta_env_default = { BASE_URL: "/", MODE: "production", DEV: false, PROD: true, SSR: false };
+const __vite_import_meta_env__ = { "BASE_URL": "/", "DEV": false, "MODE": "production", "PROD": true, "SSR": false };
 const isVue27 = /^2\.7\.*/.test(Vue__namespace.version);
 const isVue3 = /^3\.*/.test(Vue__namespace.version);
-const isInnerScene = { url: typeof document === "undefined" ? require("url").pathToFileURL(__filename).href : _documentCurrentScript && _documentCurrentScript.src || new URL("utils/constants.js", document.baseURI).href } && define_import_meta_env_default && define_import_meta_env_default.VITE_RUNTIME_SCENE === "inner";
+const isInnerScene = { url: typeof document === "undefined" ? require("url").pathToFileURL(__filename).href : _documentCurrentScript && _documentCurrentScript.src || new URL("utils/constants.js", document.baseURI).href } && __vite_import_meta_env__ && false;
 exports.isInnerScene = isInnerScene;
 exports.isVue27 = isVue27;
 exports.isVue3 = isVue3;

package/lib/utils/domOperation.js

@@ -1,14 +1,13 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const environment = require("./environment.js");
-const instanceMapping = /* @__PURE__ */ new Map();
 function getScrollInfo(selector, instanceName) {
-  if (!selector)
-    return Promise.reject(new Error(`getScrollInfo() get error selector ${typeof selector}.`));
   if (!environment.isWeChat && window) {
-    const dom = typeof selector === "object" ? selector : document.querySelector(selector);
+    const dom = document.querySelector(selector);
     if (!dom)
-      return Promise.reject(new Error(`getScrollInfo() can't find ${selector} dom.`));
+      return Promise.reject(
+        new Error(`getScrollInfo() can't find ${selector} dom.`)
+      );
     return Promise.resolve({
       id: dom.id,
       scrollTop: dom.scrollTop,
@@ -18,19 +17,10 @@ function getScrollInfo(selector, instanceName) {
     });
   }
   if (environment.isWeChat) {
-    if (!instanceName)
-      return Promise.reject(new Error("uni.getScrollInfo() need instanceName in params."));
-    const _query = uni.createSelectorQuery().in(instanceMapping.get(instanceName));
-    return new Promise((resolve, reject) => {
-      _query.select(selector).scrollOffset((data) => {
-        if (data) {
-          resolve(data);
-        }
-      }).exec();
-      setTimeout(() => reject(new Error(`uni.getScrollInfo(${selector}) timeout.`)), 500);
-    });
+    return Promise.reject(
+      new Error("uni.getScrollInfo() need instanceName in params.")
+    );
   }
   return Promise.reject(new Error("getScrollInfo() occur error"));
 }
 exports.getScrollInfo = getScrollInfo;
-exports.instanceMapping = instanceMapping;

package/lib/utils/environment.js

@@ -2,7 +2,7 @@
 var _a, _b;
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const universalApi = require("@tencentcloud/universal-api");
-universalApi.getPlatform() === "pc";
+const isPC = universalApi.getPlatform() === "pc";
 const isH5 = universalApi.getPlatform() === "h5";
 const isWeChat = universalApi.getPlatform() === "wechat";
 const isApp = universalApi.getPlatform() === "app";
@@ -13,4 +13,5 @@ exports.isApp = isApp;
 exports.isElectron = isElectron;
 exports.isH5 = isH5;
 exports.isMobile = isMobile;
+exports.isPC = isPC;
 exports.isWeChat = isWeChat;

package/lib/utils/utils.d.ts

@@ -45,9 +45,24 @@ export declare function getUrlParam(key: string): string | null;
  */
 export declare function deepClone(data: any): any;
 export { clipBoard } from './adapter';
-export declare const isUndefined: (value: any) => boolean;
-export declare const isString: (value: any) => boolean;
-export declare const isNumber: (value: any) => boolean;
+export declare const isUndefined: (value: any) => value is undefined;
+export declare const isString: (value: any) => value is string;
+export declare const isNumber: (value: any) => value is number;
 export declare const isStringNumber: (value: any) => boolean;
 export declare const isFunction: (value: any) => boolean;
-export declare function addSuffix(value: string | number, suffix?: string): string | number;
+export declare function addSuffix(value: string | number, suffix?: string): string;
+export declare function getUrlWithRoomId(roomId: string): string;
+export declare function calculateByteLength(str: string): number;
+export declare function objectMerge(...args: any[]): any;
+export declare function convertSecondsToHMS(seconds: number): {
+    hours: number;
+    minutes: number;
+    seconds: number;
+};
+/**
+ * Determine if the input string contains only numbers
+ * @param str data of any string
+ * @returns It returns true if it contains only numbers, otherwise it returns false.
+ */
+export declare function isDigitsOnly(str: string): boolean;
+export declare function getNanoId(size?: number): string;

package/lib/utils/utils.js

@@ -1,13 +1,13 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-require("./environment.js");
+const environment = require("./environment.js");
 function debounce(fn, delay) {
   let timer;
   return function(...args) {
     if (timer > 0) {
       clearTimeout(timer);
     }
-    timer = window == null ? void 0 : window.setTimeout(() => {
+    timer = setTimeout(() => {
       fn.apply(this, args);
       timer = -1;
     }, delay);
@@ -56,6 +56,28 @@ function getUrlParam(key) {
   const paramMatch = url == null ? void 0 : url.match(regexp);
   return paramMatch ? paramMatch[2] : null;
 }
+function deepClone(data) {
+  let res = null;
+  const reference = [Date, RegExp, Set, WeakSet, Map, WeakMap, Error];
+  if (reference.includes(data == null ? void 0 : data.constructor)) {
+    res = new data.constructor(data);
+  } else if (Array.isArray(data)) {
+    res = [];
+    data.forEach((e, i) => {
+      res[i] = deepClone(e);
+    });
+  } else if (typeof data === "object" && data !== null) {
+    res = {};
+    Object.keys(data).forEach((key) => {
+      if (Object.hasOwnProperty.call(data, key)) {
+        res[key] = deepClone(data[key]);
+      }
+    });
+  } else {
+    res = data;
+  }
+  return res;
+}
 const isUndefined = (value) => typeof value === "undefined";
 const isNumber = (value) => typeof value === "number";
 const isStringNumber = (value) => typeof value === "string" && !isNaN(Number(value));
@@ -66,13 +88,83 @@ function addSuffix(value, suffix = "px") {
   }
   return value;
 }
+function getUrlWithRoomId(roomId) {
+  if (environment.isWeChat) return "";
+  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()}`}`;
+}
+function calculateByteLength(str) {
+  let byteLength = 0;
+  for (let i = 0; i < str.length; i++) {
+    const code = str.charCodeAt(i);
+    if (code <= 127) {
+      byteLength += 1;
+    } else if (code <= 2047) {
+      byteLength += 2;
+    } else if (code <= 65535) {
+      byteLength += 3;
+    } else {
+      byteLength += 4;
+    }
+  }
+  return byteLength;
+}
+function objectMerge(...args) {
+  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;
+  }, {});
+}
+function convertSecondsToHMS(seconds) {
+  const hours = Math.floor(seconds / 3600);
+  const minutes = Math.floor(seconds % 3600 / 60);
+  const remainingSeconds = seconds % 60;
+  return {
+    hours,
+    minutes,
+    seconds: remainingSeconds
+  };
+}
+function isDigitsOnly(str) {
+  const regex = /^\d+$/;
+  return regex.test(str);
+}
+function getNanoId(size = 21) {
+  const urlAlphabet = "useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict";
+  let id = "";
+  let i = size;
+  while (i) {
+    id += urlAlphabet[Math.random() * 64 | 0];
+    i = i - 1;
+  }
+  return id;
+}
 exports.addSuffix = addSuffix;
+exports.calculateByteLength = calculateByteLength;
+exports.convertSecondsToHMS = convertSecondsToHMS;
 exports.debounce = debounce;
+exports.deepClone = deepClone;
 exports.exitFullScreen = exitFullScreen;
+exports.getNanoId = getNanoId;
 exports.getUrlParam = getUrlParam;
+exports.getUrlWithRoomId = getUrlWithRoomId;
+exports.isDigitsOnly = isDigitsOnly;
 exports.isFunction = isFunction;
 exports.isNumber = isNumber;
 exports.isStringNumber = isStringNumber;
 exports.isUndefined = isUndefined;
+exports.objectMerge = objectMerge;
 exports.setFullScreen = setFullScreen;
 exports.throttle = throttle;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tencentcloud/roomkit-electron-vue3",
-  "version": "2.4.2",
+  "version": "2.6.0",
   "main": "./lib/index.js",
   "module": "./es/index.mjs",
   "types": "./es/index.d.ts",
@@ -20,14 +20,17 @@
   "dependencies": {
     "@tencentcloud/chat": "latest",
     "@tencentcloud/tui-core": "latest",
-    "@tencentcloud/tuiroom-engine-electron": "^2.4.2",
+    "@tencentcloud/tuiroom-engine-electron": "^2.6.0",
     "@tencentcloud/universal-api": "^2.0.9",
     "interactjs": "^1.10.26",
-    "mitt": "^3.0.0"
+    "mitt": "^3.0.0",
+    "fabric": "^5.3.0",
+    "hotkeys-js": "^3.10.1"
   },
   "peerDependencies": {
     "pinia": "^2.1.7",
-    "vue": "~3.3.13"
+    "vue": "~3.3.13",
+    "electron": ">=4.0.0"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^5.0.4",

package/scripts/eject.js

@@ -13,18 +13,23 @@ const readline = require('readline').createInterface({
 
 const defaultTargetDir = './src/components/TUIRoom';
 
-readline.question(`This script copies the TUIRoomKit source code to the ${defaultTargetDir} path, do you want to change the copy path? (y|n)`, (answer) => {
-  if (answer.toLocaleLowerCase() === 'y' || answer.toLocaleLowerCase() === 'yes') {
-    readline.question('Please enter your copy path: ', (targetDir) => {
-      copyTUIRoomKit(targetDir);
+readline.question(
+  `This script copies the TUIRoomKit source code to the ${defaultTargetDir} path, do you want to change the copy path? (y|n)`,
+  answer => {
+    if (
+      answer.toLocaleLowerCase() === 'y' ||
+      answer.toLocaleLowerCase() === 'yes'
+    ) {
+      readline.question('Please enter your copy path: ', targetDir => {
+        copyTUIRoomKit(targetDir);
+        readline.close();
+      });
+    } else {
+      copyTUIRoomKit();
       readline.close();
-    });
-  } else {
-    copyTUIRoomKit();
-    readline.close();
+    }
   }
-});
-
+);
 
 function copyTUIRoomKit(targetDir) {
   if (!targetDir) {
@@ -35,18 +40,22 @@ function copyTUIRoomKit(targetDir) {
 
   try {
     fs.accessSync(targetPath);
-    errorLog(`${targetDir} path already exists, if you want to copy it, please delete the target path first or re-specify it!`);
+    errorLog(
+      `${targetDir} path already exists, if you want to copy it, please delete the target path first or re-specify it!`
+    );
     return;
   } catch (error) {
     fs.mkdirSync(targetPath, { recursive: true });
   }
   copyExitsFolder(sourcePath, targetPath);
-  successLog(`The TUIRoomKit source code has been successfully copied to the ${targetDir} path!`);
+  successLog(
+    `The TUIRoomKit source code has been successfully copied to the ${targetDir} path!`
+  );
 }
 
 function copyExitsFolder(src, dest) {
   const files = fs.readdirSync(src);
-  files.forEach((file) => {
+  files.forEach(file => {
     const srcPath = path.join(src, file);
     const destPath = path.join(dest, file);
     if (fs.statSync(srcPath).isDirectory()) {

package/src/TUIRoom/assets/style/black-theme.scss

@@ -11,15 +11,18 @@
   --background-color-10: #2B2F38;
   --background-color-11: #2B303A;
   --background-color-12: #4F586B;
+  --hover-background-colo-1: rgba(213, 224, 242, 0.5);
   --font-color-1: #D5E0F2;
   --font-color-2: #6B758A;
   --font-color-3: #B3B8C8;
   --font-color-4: #4F586B;
   --font-color-5: #7C85A6;
   --font-color-6: #CFD5E6;
-  --font-color-7: #FFFFFF;
+  --font-color-7: #FFF;
   --font-color-8: #8F9AB2;
-  --title-color: #000000;
+  --font-color-9: #969EB4;
+  --font-color-10: #FF643D;
+  --title-color: #000;
   --stroke-color: rgba(79, 88, 107, 0.30);
   --stroke-color-2: #434956;
   --border-color: #2E323D;
@@ -28,12 +31,11 @@
   --active-color-2: #4791FF;
   --green-color: #27C39F;
   --orange-color: #F06C4B;
-  --white-color: #FFFFFF;
-  --black-color: #000000;
+  --white-color: #FFF;
+  --black-color: #000;
   --red-color: #ED414D;
   --red-color-2: #F23C5B;
   --red-color-3: #E5395C;
-
   --color-font: #D5E0F2;
   --control-content: rgba(27, 30, 38, 0.9);
   --background-image-color: rgba(61,119,255,0.53);
@@ -63,7 +65,7 @@
   --el-drawer-header-color: #CFD4E6;
   --user-extra-info-bg-color: #4D70FF;
   --user-extra-info-color: #2E323D;
-  --check-select-color: #FFFFFF;
+  --check-select-color: #FFF;
   --member-item-container-hover-bg-color: rgba(46,50,61,0.70);
   --el-bg-color-select: #1D2029;
   --el-bg-color-overlay-select: #1D2029;
@@ -85,17 +87,17 @@
   --apply-list-container-color: #CFD4E6;
   --room-sidebar-bg-color: #1D2029;
   --create-room-option: rgba(50,59,84,0.60);
-  --create-room-option-color: #EEEEEE;
+  --create-room-option-color: #EEE;
   --create-room-option-tab: #006EFF;
-  --create-room-option-icon: #EEEEEE;
-  --create-room-option-icon-color:#EEEEEE;
+  --create-room-option-icon: #EEE;
+  --create-room-option-icon-color:#EEE;
   --control-region-bg-color: rgba(13,16,21,0.60);
   --dialog-tabs-bg-color: rgba(0,0,0,0.20);
   --divide-line-color: #2E323D;
   --divice-line: #CFD4E6;
   --el-drawer-divide: #0D0F15;
   --send-btn: #CFD4E6;
-  --invite-region: #FFFFFF;
+  --invite-region: #FFF;
   --layout-list: #1D2029;
   --layout-item: #2E323D;
   --stream-list-container: #1D2029;
@@ -111,7 +113,7 @@
   --mic-bar-color: #2E323D;
   --more-notice-color: #7C85A6;
   --setting-dialog: none;
-  --caret-color: #ffffff;
+  --caret-color: #fff;
   --apply-container-primary: #CFD4E6;
   --apply-container-outline: #CFD4E6;
   --el-drawer-body: #1D2029;
@@ -124,6 +126,7 @@
   --el-message-box-title: #CFD4E6;
   --el-button-text-color: #7C85A6;
   --selected-screen-share-dialog: #006EFF;
+
   /* H5 New Content */
   --log-out-mobile: rgba(0, 0, 0, 0.7);
   --log-out: #2C2C2E;
@@ -136,25 +139,24 @@
   --chat-editor-input-color-h5:#292D38;
   --chat-editor-bg-color-h5: #0D1015;
   --message-list-color-h5: #1B1E26;
-  --popup-mute-background-color-h5: #FFFFFF;
+  --popup-mute-background-color-h5: #FFF;
   --mute-button-color-h5: #CFD5E6;
   --member-control-background-color-h5: #1B1E26;
   --member-border-color-h5:rgba(207, 212, 230, 0.1);
   --member-title-content-h5: #CFD5E6;
   --end-control-text-h5: #292D38;
   --end-control-title-h5: #CACACB;
-  --end-control-cancel-h5: #FFFFFF;
+  --end-control-cancel-h5: #FFF;
   --transfer-input-color-h5: #292D38;
   --popup-background-color-h5: #1B1E26;
   --popup-title-color-h5: #CFD4E6;
   --popup-content-color-h5: #7C85A6;
   --close-cancel-h5: #5a5a5e;
-  --dialog-title-h5: #FFFFFF;
+  --dialog-title-h5: #FFF;
   --manage-member-button-h5:#292D38;
   --message-body-h5: #292D38;
   --user-extra-info-bg-color-h5: #0565FA;
-  --user-extra-info-color-h5: #FFFFFF;
+  --user-extra-info-color-h5: #FFF;
   --apply-container-background-outline-h5: #292D38;
   --apply-container-outline-h5: #CFD5E6;
-  --mute-all-h5: #FF2E2E
 }

package/src/TUIRoom/assets/style/global.scss

@@ -1,17 +1,18 @@
 body, html {
   width: 100%;
   height: 100%;
-  margin: 0;
   padding: 0;
+  margin: 0;
 }
+
 #roomContainer {
   width: 100%;
   height: 100%;
-  margin: 0;
   padding: 0;
-  user-select: none;
+  margin: 0;
   overflow: hidden;
   touch-action: manipulation;
+  user-select: none;
 }
 
 #roomContainer *, ::before, ::after{