@ndscnj/roomkit-web-vue3 3.2.0

package/src/TUIRoom/utils/common/cookieStorage.js

@@ -0,0 +1,78 @@
+/* eslint-disable no-param-reassign */
+import Cookies from 'js-cookie';
+import logger from './logger';
+
+const SEVEN_DAYS = 7; // default 7 days
+const ONE_DAY_MILLISECOND = 864e5; // one day in milliseconds
+
+const cookieStorage = {
+  set(key, value, options = {}) {
+    // If using "file://" access protocol, the "document.domain" is empty string
+    if (document.domain) {
+      Cookies.set(key, value, options);
+    } else {
+      // Date type of options.expires must be number or Date. If not, use the default
+      if (
+        typeof options.expires !== 'number' &&
+        !(options.expires instanceof Date)
+      ) {
+        options.expires = SEVEN_DAYS;
+      }
+      if (typeof options.expires === 'number') {
+        options.expires = new Date(
+          Date.now() + options.expires * ONE_DAY_MILLISECOND
+        );
+      }
+      if (options.expires) {
+        options.expires = options.expires.toUTCString();
+      }
+      window.localStorage.setItem(
+        `cookie_${key}`,
+        JSON.stringify({
+          value,
+          options,
+        })
+      );
+    }
+  },
+  get(key) {
+    if (document.domain) {
+      return Cookies.get(key);
+    }
+    let value = null;
+    let cookieItem = window.localStorage.getItem(`cookie_${key}`);
+    if (cookieItem) {
+      try {
+        cookieItem = JSON.parse(cookieItem);
+        if (cookieItem?.options?.expires) {
+          const expires = new Date(cookieItem.options.expires).getTime();
+          if (expires > Date.now()) {
+            value = cookieItem.value;
+          } else {
+            // cookie has expired, remove it
+            this.remove(key);
+          }
+        } else {
+          // invalid cookie value
+          this.remove(key);
+        }
+      } catch (err) {
+        logger.warn(
+          `[CookieStorage] come across invalid key/value: ${key}:${cookieItem}`
+        );
+        this.remove(key);
+      }
+    }
+
+    return value;
+  },
+  remove(key) {
+    if (document.domain) {
+      Cookies.remove(key);
+    } else {
+      window.localStorage.removeItem(`cookie_${key}`);
+    }
+  },
+};
+
+export default cookieStorage;

package/src/TUIRoom/utils/common/logger/index.ts

@@ -0,0 +1,68 @@
+/*
+ * @Description: logger
+ * @Date: 2022-04-11 19:39:55
+ * @LastEditTime: 2022-04-12 11:37:24
+ */
+import { EUserEventNames } from './logger-constants';
+import { LogLevelType, LogContext, getLogPrefix } from './logger-utils';
+
+let currentLogLevel = LogLevelType.LOG_LEVEL_DEBUG;
+
+const logger = {
+  debug(...args: any[]) {
+    if (currentLogLevel <= LogLevelType.LOG_LEVEL_DEBUG) {
+      console.debug(`${getLogPrefix(LogContext.RENDER)}`, ...args);
+    }
+  },
+  log(...args: any[]) {
+    if (currentLogLevel <= LogLevelType.LOG_LEVEL_LOG) {
+      console.log(`${getLogPrefix(LogContext.RENDER)}`, ...args);
+    }
+  },
+  info(...args: any[]) {
+    if (currentLogLevel <= LogLevelType.LOG_LEVEL_INFO) {
+      console.info(`${getLogPrefix(LogContext.RENDER)}`, ...args);
+    }
+  },
+  warn(...args: any[]) {
+    if (currentLogLevel <= LogLevelType.LOG_LEVEL_WARN) {
+      console.warn(`${getLogPrefix(LogContext.RENDER)}`, ...args);
+    }
+  },
+  error(...args: any[]) {
+    if (currentLogLevel <= LogLevelType.LOG_LEVEL_ERROR) {
+      console.error(`${getLogPrefix(LogContext.RENDER)}`, ...args);
+    }
+  },
+  setLevel(newLevel: number) {
+    if (
+      newLevel >= LogLevelType.LOG_LEVEL_DEBUG &&
+      newLevel <= LogLevelType.LOG_LEVEL_NON_LOGGING
+    ) {
+      console.log(
+        `${getLogPrefix(
+          LogContext.RENDER
+        )} set log level from ${currentLogLevel} to ${newLevel}`
+      );
+      currentLogLevel = newLevel;
+
+      if ((window as any).electron?.ipcRenderer) {
+        (window as any).electron.ipcRenderer.send(
+          EUserEventNames.ON_CHANGE_LOG_LEVEL,
+          newLevel
+        );
+      }
+    } else {
+      console.error(
+        `${getLogPrefix(
+          LogContext.RENDER
+        )} logger.setLevel() invalid params:${newLevel}`
+      );
+    }
+  },
+  getLevel() {
+    return currentLogLevel;
+  },
+};
+
+export default logger;

package/src/TUIRoom/utils/common/logger/logger-constants.ts

@@ -0,0 +1,15 @@
+/**
+ * This constant defines the module, i.e., it is used for each ts module in the main directory, and also for the main/preload.
+ * js module, which is defined here in the node.js module format, and can be used for both of these types of modules.
+ *
+ * If this is defined as an ES 6 module (using import/export ),
+ * the preload.js module cannot be used because the preload.js file is a native node.js module executable,
+ * which can be considered for subsequent use if preload.js takes on too many responsibilities and has greater code complexity.
+ */
+export enum EUserEventNames {
+  ON_CHANGE_LOG_LEVEL = 'onChangeLogLevel',
+}
+
+export default {
+  EUserEventNames,
+};

package/src/TUIRoom/utils/common/logger/logger-utils.ts

@@ -0,0 +1,38 @@
+export const LogLevelType = {
+  LOG_LEVEL_DEBUG: -1,
+  LOG_LEVEL_LOG: 0,
+  LOG_LEVEL_INFO: 1,
+  LOG_LEVEL_WARN: 2,
+  LOG_LEVEL_ERROR: 3,
+  LOG_LEVEL_NON_LOGGING: 4, // No logging level, no logs will be printed
+};
+
+export enum LogContext {
+  MAIN = 'main-process',
+  RENDER = 'render-process',
+}
+
+function padMs(ms: number) {
+  const len = ms.toString().length;
+  let ret;
+  switch (len) {
+    case 1:
+      ret = `00${ms}`;
+      break;
+    case 2:
+      ret = `0${ms}`;
+      break;
+    default:
+      ret = ms;
+      break;
+  }
+
+  return ret;
+}
+
+export function getLogPrefix(context: LogContext) {
+  const date = new Date();
+  return `${date.toLocaleTimeString('en-US', {
+    hour12: false,
+  })}.${padMs(date.getMilliseconds())} [${context}]:`;
+}

package/src/TUIRoom/utils/common/mitt.js

@@ -0,0 +1,2 @@
+import Mitt from 'mitt';
+export default new Mitt();

package/src/TUIRoom/utils/common.ts

@@ -0,0 +1,46 @@
+import { getUrlParam } from './utils';
+
+const THEME = {
+  LIGHT: 'light',
+  DARK: 'dark',
+};
+
+type ThemeOption = 'LIGHT' | 'DARK';
+
+/**
+ * Get Language
+ * @returns language
+ */
+export function getLanguage() {
+  const isWxMiniProgram = typeof wx !== 'undefined' && wx.getSystemInfoSync;
+
+  let language =
+    getUrlParam('lang') ||
+    navigator.language ||
+    (isWxMiniProgram ? 'zh-CN' : 'en-US');
+  language = language.replace(/_/, '-').toLowerCase();
+  const isZh = language.startsWith('zh');
+  language = isZh ? 'zh-CN' : 'en-US';
+
+  return language;
+}
+
+/**
+ * Determine if a string is a number
+ * @returns boolean
+ */
+export function checkNumber(roomId: string) {
+  const reg = /^\d+$/;
+  return reg.test(roomId);
+}
+
+export function toTargetTheme(themeOption: ThemeOption) {
+  const theme = themeOption === 'DARK' ? THEME.DARK : THEME.LIGHT;
+  return theme;
+}
+
+// RoomKit schedule conference passwords restricted to digital checksums
+export const invalidDigitalPasswordRegex = /[^\d]+/g;
+// RoomKit enter room Password legitimacy verification
+export const invalidPasswordRegex =
+  /[^A-Za-z0-9!@#$%^&*()_+{}|:"<>?`~';[\]\\/.,-=]+/g;

package/src/TUIRoom/utils/constants.ts

@@ -0,0 +1,11 @@
+import * as Vue from 'vue';
+
+export const isVue27 = /^2\.7\.*/.test(Vue.version); // Is it Vue version 2.7
+
+export const isVue3 = /^3\.*/.test(Vue.version); // Is it Vue version 2.7
+
+// @ts-ignore
+export const isInnerScene =
+  import.meta &&
+  import.meta.env &&
+  import.meta.env.VITE_RUNTIME_SCENE === 'inner';

package/src/TUIRoom/utils/domOperation.ts

@@ -0,0 +1,281 @@
+import { isWeChat } from './environment';
+
+interface IDomRect {
+  id: string;
+  top: number;
+  left: number;
+  right: number;
+  width: number;
+  bottom: number;
+  height: number;
+  x?: number;
+  y?: number;
+}
+
+interface IScrollInfo {
+  scrollHeight: number;
+  scrollLeft: number;
+  scrollTop: number;
+  scrollWidth: number;
+  id: string;
+}
+
+interface IFields {
+  [key: string]: any;
+}
+
+declare const uni: any;
+
+type registeredPage = 'messageList';
+
+export const instanceMapping = new Map<registeredPage, any>();
+
+/**
+ *
+ * @param selector string: e.g. #app | .class
+ * @param instanceName string
+ * @returns Promise<IDomRect>
+ */
+export function getBoundingClientRect(
+  selector: string | HTMLElement,
+  instanceName?: registeredPage
+): Promise<IDomRect> {
+  if (!selector)
+    return Promise.reject(
+      new Error(
+        `getBoundingClientRect() get error selector ${typeof selector}.`
+      )
+    );
+
+  if (window || document) {
+    const dom: HTMLElement | null =
+      typeof selector === 'object'
+        ? selector
+        : document.querySelector(selector);
+    if (!dom)
+      return Promise.reject(
+        new Error(`getBoundingClientRect() can't find ${selector} dom.`)
+      );
+    const domRect = dom.getBoundingClientRect();
+    return Promise.resolve({
+      id: dom.id,
+      top: domRect.top,
+      left: domRect.left,
+      right: domRect.right,
+      bottom: domRect.bottom,
+      width: domRect.width,
+      height: domRect.height,
+      x: domRect.x,
+      y: domRect.y,
+    });
+  }
+
+  if (isWeChat) {
+    if (!instanceName)
+      return Promise.reject(
+        new Error('uni.getBoundingClientRect() need instanceName in params.')
+      );
+    const _query = uni
+      .createSelectorQuery()
+      .in(instanceMapping.get(instanceName));
+    return new Promise((resolve, reject) => {
+      _query
+        .select(selector)
+        .boundingClientRect((data: IDomRect) => {
+          if (data) {
+            resolve(data);
+          }
+        })
+        .exec();
+      setTimeout(
+        () =>
+          reject(new Error(`uni.getBoundingClientRect(${selector}) timeout.`)),
+        500
+      );
+    });
+  }
+
+  return Promise.reject(new Error('getBoundingClientRect() occur error'));
+}
+
+export function getBoundingClientRectSync(
+  selector: string | HTMLElement
+): IDomRect {
+  if (isWeChat) {
+    throw new Error('getBoundingClientRectSync() can not use in uni-app.');
+  }
+
+  if (window || document) {
+    const dom: HTMLElement | null =
+      typeof selector === 'object'
+        ? selector
+        : document.querySelector(selector);
+    if (!dom)
+      throw new Error(
+        `getBoundingClientRectSync() can't find ${selector} dom.`
+      );
+    const domRect = dom.getBoundingClientRect();
+    return {
+      id: dom.id,
+      top: domRect.top,
+      left: domRect.left,
+      right: domRect.right,
+      bottom: domRect.bottom,
+      width: domRect.width,
+      height: domRect.height,
+      x: domRect.x,
+      y: domRect.y,
+    };
+  }
+
+  throw new Error('getBoundingClientRectSync() occur error.');
+}
+
+/**
+ *
+ * @param selector string: e.g. #app | .class
+ * @param instanceName string
+ * @returns Promise<IScrollInfo>
+ */
+export function getScrollInfo(
+  selector: string | HTMLElement,
+  instanceName?: registeredPage
+): Promise<IScrollInfo> {
+  if (!selector)
+    return Promise.reject(
+      new Error(`getScrollInfo() get error selector ${typeof selector}.`)
+    );
+
+  if (!isWeChat && window) {
+    const dom: HTMLElement | null =
+      typeof selector === 'object'
+        ? selector
+        : document.querySelector(selector);
+    if (!dom)
+      return Promise.reject(
+        new Error(`getScrollInfo() can't find ${selector} dom.`)
+      );
+    return Promise.resolve({
+      id: dom.id,
+      scrollTop: dom.scrollTop,
+      scrollLeft: dom.scrollLeft,
+      scrollWidth: dom.scrollWidth,
+      scrollHeight: dom.scrollHeight,
+    });
+  }
+
+  if (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: IScrollInfo) => {
+          if (data) {
+            resolve(data);
+          }
+        })
+        .exec();
+      setTimeout(
+        () => reject(new Error(`uni.getScrollInfo(${selector}) timeout.`)),
+        500
+      );
+    });
+  }
+
+  return Promise.reject(new Error('getScrollInfo() occur error'));
+}
+
+export function getScrollInfoSync(selector: string | HTMLElement): IScrollInfo {
+  if (isWeChat) {
+    throw new Error('getScrollInfoSync() can not use in uni-app.');
+  }
+
+  if (!isWeChat && window) {
+    const dom: HTMLElement | null =
+      typeof selector === 'object'
+        ? selector
+        : document.querySelector(selector);
+    if (!dom)
+      throw new Error(`getScrollInfoSync() can't find ${selector} dom.`);
+    return {
+      id: dom.id,
+      scrollTop: dom.scrollTop,
+      scrollLeft: dom.scrollLeft,
+      scrollWidth: dom.scrollWidth,
+      scrollHeight: dom.scrollHeight,
+    };
+  }
+
+  throw new Error('getScrollInfoSync() occur error.');
+}
+
+export function getFields(
+  selector: string | HTMLElement,
+  instanceName?: registeredPage
+): Promise<IFields> {
+  if (isWeChat) {
+    if (!instanceName)
+      return Promise.reject(
+        new Error('uni.getFields() need instanceName in params.')
+      );
+    const _query = uni
+      .createSelectorQuery()
+      .in(instanceMapping.get(instanceName));
+    return new Promise((resolve, reject) => {
+      _query
+        .select(selector)
+        .fields(
+          {
+            rect: true,
+            size: true,
+            scrollOffset: true,
+          },
+          (data: IFields) => {
+            if (data) {
+              resolve(data);
+            }
+          }
+        )
+        .exec();
+      setTimeout(
+        () => reject(new Error(`get ${selector} fields timeout.`)),
+        500
+      );
+    });
+  }
+
+  return Promise.reject(new Error('getFields() occur error'));
+}
+
+export function getContentSize(element: HTMLElement) {
+  const computedStyle = getComputedStyle(element);
+
+  const paddingTop = Number(computedStyle.paddingTop.replace('px', ''));
+  const paddingBottom = Number(computedStyle.paddingBottom.replace('px', ''));
+  const borderTop = Number(computedStyle.borderTopWidth.replace('px', ''));
+  const borderBottom = Number(
+    computedStyle.borderBottomWidth.replace('px', '')
+  );
+
+  const paddingLeft = Number(computedStyle.paddingLeft.replace('px', ''));
+  const paddingRight = Number(computedStyle.paddingRight.replace('px', ''));
+  const borderLeft = Number(computedStyle.borderLeftWidth.replace('px', ''));
+  const borderRight = Number(computedStyle.borderRightWidth.replace('px', ''));
+
+  const contentWidth =
+    element.offsetWidth - paddingLeft - paddingRight - borderLeft - borderRight;
+  const contentHeight =
+    element.offsetHeight -
+    paddingTop -
+    paddingBottom -
+    borderTop -
+    borderBottom;
+
+  return { width: contentWidth, height: contentHeight };
+}

package/src/TUIRoom/utils/environment.ts

@@ -0,0 +1,24 @@
+import { getPlatform } from '@tencentcloud/universal-api';
+
+declare const uni: any;
+
+export const isPC = getPlatform() === 'pc';
+
+export const isH5 = getPlatform() === 'h5';
+
+export const isWeChat = getPlatform() === 'wechat';
+
+export const isApp = getPlatform() === 'app';
+
+export const isUniFrameWork = typeof uni !== 'undefined';
+
+// H5, small programs, apps are considered mobile products, if you need to unify the mobile UI style, you can directly use isMobile to control
+export const isMobile = isH5 || isWeChat || isApp;
+
+export const isElectron =
+  navigator.userAgent?.toLowerCase().indexOf(' electron/') > -1;
+
+// WeiXinBrowser
+export const isWeiXinBrowser =
+  navigator &&
+  navigator.userAgent?.toLocaleLowerCase().indexOf('micromessenger') > -1;

package/src/TUIRoom/utils/mediaAbility.ts

@@ -0,0 +1,44 @@
+import { isElectron, isWeChat, isWeiXinBrowser } from './environment';
+import { isFunction } from './utils';
+
+// Whether to support getUserMedia to capture audio and video streams
+// Unsupported Browsers: qq Browser
+export const isGetUserMediaSupported = (function () {
+  if (isElectron || isWeChat) {
+    return true;
+  }
+  return (
+    navigator &&
+    navigator.mediaDevices &&
+    isFunction(navigator.mediaDevices.getUserMedia)
+  );
+})();
+
+// Whether or not getDisplayMedia is supported to capture screen sharing
+export const isGetDisplaySupported = (function () {
+  if (isElectron || isWeChat) {
+    return true;
+  }
+  return (
+    navigator &&
+    navigator.mediaDevices &&
+    isFunction(navigator.mediaDevices.getDisplayMedia)
+  );
+})();
+
+// Whether or not screen sharing capability is supported
+// Unsupported Browsers: mac 360 Browser
+export const isScreenShareSupported = isGetDisplaySupported && !isWeiXinBrowser;
+
+// Whether or not getting a list of devices is supported
+// Unsupported Browsers: mac 360 Browser
+export const isEnumerateDevicesSupported = (function () {
+  if (isElectron || isWeChat) {
+    return true;
+  }
+  return (
+    navigator &&
+    navigator.mediaDevices &&
+    isFunction(navigator.mediaDevices.enumerateDevices)
+  );
+})();

package/src/TUIRoom/utils/toCanvas.ts

@@ -0,0 +1,73 @@
+const { requestAnimationFrame, cancelAnimationFrame } = window;
+const canvasWidth = 1280;
+const canvasHeight = 720;
+
+type CanvasImageSource =
+  | HTMLImageElement
+  | HTMLVideoElement
+  | HTMLCanvasElement;
+
+export default class ToCanvas {
+  private sourceElement!: CanvasImageSource;
+
+  private timer: any;
+
+  public element!: HTMLCanvasElement;
+
+  private ctx: any;
+
+  constructor(Element: CanvasImageSource) {
+    if (!Element) {
+      return;
+    }
+    this.sourceElement = Element;
+    this.timer = null;
+    this.element = this.initCanvas();
+    this.ctx = this.element.getContext('2d');
+  }
+
+  initCanvas() {
+    const canvas = document.createElement('canvas');
+    canvas.width = canvasWidth;
+    canvas.height = canvasHeight;
+    canvas.style.width = '100%';
+    canvas.style.height = '100%';
+    return canvas;
+  }
+
+  drawFrame() {
+    this.ctx.drawImage(this.sourceElement, 0, 0, canvasWidth, canvasHeight);
+    this.element.style.objectFit = this.sourceElement.style.objectFit;
+    this.element.style.transform = this.sourceElement.style.transform;
+  }
+
+  play() {
+    this.timer = setAnimationFrame(this.drawFrame.bind(this));
+  }
+
+  stop() {
+    clearAnimationFrame(this.timer);
+  }
+}
+
+function setAnimationFrame(render: Function, stepTime = 24) {
+  let lastTime = Date.now();
+  let currentTime;
+  const timer = {
+    id: -1,
+  };
+  function animeLoop() {
+    currentTime = Date.now();
+    if (currentTime - lastTime > stepTime) {
+      lastTime = currentTime;
+      render();
+    }
+    timer.id = requestAnimationFrame(animeLoop);
+  }
+  animeLoop();
+  return timer;
+}
+
+function clearAnimationFrame(timer: any) {
+  cancelAnimationFrame(timer.id);
+}