fcr-ui-scene 1.0.40 → 3.1.0

package/lib/utilities/renderer.js

@@ -0,0 +1,109 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.releaseSubAllWindowRefs = exports.open = exports.isWindows = exports.handleWillClose = exports.getCurrentWorkArea = exports.close = void 0;
+require("core-js/modules/es.array.concat.js");
+require("core-js/modules/es.array.find.js");
+require("core-js/modules/es.array.index-of.js");
+require("core-js/modules/es.number.constructor.js");
+require("core-js/modules/es.object.to-string.js");
+var _type = require("agora-rte-sdk/lib/core/rtc/type");
+var open = exports.open = function open(path) {
+  window.runtime.open(path);
+};
+var close = exports.close = function close(path) {
+  window.runtime.close(path);
+};
+var isWindows = exports.isWindows = function isWindows() {
+  return navigator.userAgent.indexOf('Windows') > -1;
+};
+var getCurrentWorkArea = exports.getCurrentWorkArea = function getCurrentWorkArea(currentShareId, currentShareType, allApplicationWindows) {
+  var displays = window.runtime.screen.getAllDisplays();
+  var bounds = {
+    x: 0,
+    y: 0,
+    width: 0,
+    height: 0,
+    displayId: 1,
+    availTop: 0
+  };
+  if (currentShareType === _type.AgoraRtcScreenCaptureType.DISPLAY) {
+    var display;
+    if (isWindows()) {
+      display = displays.find(function (display, index) {
+        return index === Number(currentShareId);
+      });
+    } else {
+      display = displays.find(function (display, index) {
+        return display.id === Number(currentShareId);
+      });
+    }
+    if (!display) {
+      console.log("cannot get correct display, use current display. width: ".concat(window.screen.availWidth, ", height: ").concat(window.screen.availHeight));
+      bounds = {
+        x: 0,
+        y: 0,
+        width: window.screen.availWidth,
+        height: window.screen.availHeight,
+        displayId: 0,
+        availTop: 0
+      };
+    } else {
+      bounds = {
+        x: display.bounds.x,
+        y: isWindows() ? 0 : display.bounds.y,
+        width: display.bounds.width,
+        height: display.bounds.height,
+        displayId: display.id,
+        availTop: display.workArea.y
+      };
+    }
+  } else {
+    var _appWindow$bounds$x, _appWindow$bounds, _appWindow$bounds$y, _appWindow$bounds2;
+    var appWindow = allApplicationWindows.find(function (app) {
+      return app.id === currentShareId;
+    });
+    var _display = window.runtime.screen.getDisplayNearestPoint({
+      x: (_appWindow$bounds$x = appWindow === null || appWindow === void 0 || (_appWindow$bounds = appWindow.bounds) === null || _appWindow$bounds === void 0 ? void 0 : _appWindow$bounds.x) !== null && _appWindow$bounds$x !== void 0 ? _appWindow$bounds$x : 0,
+      y: (_appWindow$bounds$y = appWindow === null || appWindow === void 0 || (_appWindow$bounds2 = appWindow.bounds) === null || _appWindow$bounds2 === void 0 ? void 0 : _appWindow$bounds2.y) !== null && _appWindow$bounds$y !== void 0 ? _appWindow$bounds$y : 0
+    });
+    bounds = {
+      x: _display.bounds.x,
+      y: isWindows() ? 0 : _display.bounds.y,
+      width: _display.bounds.width,
+      height: _display.bounds.height,
+      displayId: _display.id,
+      availTop: _display.workArea.y
+    };
+  }
+  return bounds;
+};
+
+/**
+ * handle the will-close event of the browserWindow,
+ * callback will be called when:
+ * 1. closeRendererWindow is called
+ * 2. user press the shortcut to close the browserWindow such as Cmd + W on Mac
+ *
+ * @param browserWindow
+ * @param callback
+ */
+var handleWillClose = exports.handleWillClose = function handleWillClose(browserWindow) {
+  var callback = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : function () {};
+  browserWindow.addListener(
+  // @ts-ignore
+  'will-close', function () {
+    console.log('browserWindow will-close fired');
+    callback();
+    if (!browserWindow.isDestroyed()) {
+      // dont close the window as it will carsh the renderer process of the main window
+      browserWindow.hide();
+    }
+  });
+};
+var releaseSubAllWindowRefs = exports.releaseSubAllWindowRefs = function releaseSubAllWindowRefs() {
+  window.runtime.releaseSubAllWindowRefs();
+};

package/lib/utilities/screen.d.ts

@@ -0,0 +1,3 @@
+export declare const isFullScreen: () => boolean;
+export declare const enterFullScreen: () => void;
+export declare const exitFullScreen: () => void;

package/lib/utilities/screen.js

@@ -0,0 +1,41 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.isFullScreen = exports.exitFullScreen = exports.enterFullScreen = void 0;
+var isFullScreen = exports.isFullScreen = function isFullScreen() {
+  return !!(document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement || document.msFullscreenElement);
+};
+var enterFullScreen = exports.enterFullScreen = function enterFullScreen() {
+  if (isFullScreen()) return;
+  var elem = document.documentElement;
+  if (elem.requestFullscreen) {
+    elem.requestFullscreen();
+  } else if (elem.mozRequestFullScreen) {
+    /* Firefox */
+    elem.mozRequestFullScreen();
+  } else if (elem.webkitRequestFullscreen) {
+    /* Chrome, Safari and Opera */
+    elem.webkitRequestFullscreen();
+  } else if (elem.msRequestFullscreen) {
+    /* IE/Edge */
+    elem.msRequestFullscreen();
+  }
+};
+var exitFullScreen = exports.exitFullScreen = function exitFullScreen() {
+  if (!isFullScreen()) return;
+  if (document.exitFullscreen) {
+    document.exitFullscreen();
+  } else if (document.mozCancelFullScreen) {
+    /* Firefox */
+    document.mozCancelFullScreen();
+  } else if (document.webkitExitFullscreen) {
+    /* Chrome, Safari and Opera */
+    document.webkitExitFullscreen();
+  } else if (document.msExitFullscreen) {
+    /* IE/Edge */
+    document.msExitFullscreen();
+  }
+};

package/lib/utilities/tools.d.ts

@@ -0,0 +1,25 @@
+export declare const uint8ArrayToImageData: (target: {
+    buffer?: Uint8Array;
+    width?: number;
+    height?: number;
+}) => string;
+declare class LocalStorage {
+    set(key: string, value: string): void;
+    get(key: string): string | null;
+    remove(key: string): void;
+    clear(): void;
+}
+export declare const storage: LocalStorage;
+export declare const ASIDE_WIDTH = "aside_width";
+export declare const PARTICIPANT_POSITION = "participant_position";
+export declare const getAssetUrl: (path: string) => string;
+export declare const convertToFixedNumber: (value: number, divisor?: number, fractionDigits?: number) => number;
+export declare const matchVirtualSoundCardPattern: (deviceName: string) => boolean;
+export declare const isResourceZipUrl: (url: string) => boolean;
+export declare const isPngOrJpg: (path: string) => boolean;
+export declare const isMp4: (path: string) => boolean;
+export declare function getFileNameWithoutExtension(filePath: string): string;
+export declare const setLanguage: (language: string) => void;
+export declare const getLanguage: () => string | null;
+export declare const waitUntil: (prediction: () => boolean | Promise<boolean>, memo?: string, intervalMs?: number) => Promise<void>;
+export {};

package/lib/utilities/tools.js

@@ -0,0 +1,164 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getAssetUrl = exports.convertToFixedNumber = exports.PARTICIPANT_POSITION = exports.ASIDE_WIDTH = void 0;
+exports.getFileNameWithoutExtension = getFileNameWithoutExtension;
+exports.waitUntil = exports.uint8ArrayToImageData = exports.storage = exports.setLanguage = exports.matchVirtualSoundCardPattern = exports.isResourceZipUrl = exports.isPngOrJpg = exports.isMp4 = exports.getLanguage = void 0;
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+require("core-js/modules/es.array.concat.js");
+require("core-js/modules/es.array.reduce.js");
+require("core-js/modules/es.number.constructor.js");
+require("core-js/modules/es.number.to-fixed.js");
+require("core-js/modules/es.object.to-string.js");
+require("core-js/modules/es.promise.js");
+require("core-js/modules/es.regexp.exec.js");
+require("core-js/modules/es.regexp.test.js");
+require("core-js/modules/es.string.ends-with.js");
+require("core-js/modules/es.string.match.js");
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _schedule = require("agora-foundation/lib/schedule");
+var _logger = require("agora-foundation/lib/logger");
+var _platform = require("./platform");
+var uint8ArrayToImageData = exports.uint8ArrayToImageData = function uint8ArrayToImageData(target) {
+  var _target$buffer;
+  if (!target || !(target !== null && target !== void 0 && (_target$buffer = target.buffer) !== null && _target$buffer !== void 0 && _target$buffer.length)) {
+    return '';
+  }
+  var canvas = document.createElement('canvas');
+  var ctx = canvas.getContext('2d');
+  if (!ctx) return '';
+  var width = canvas.width = target.width;
+  var height = canvas.height = target.height;
+  var rowBytes = width * 4;
+  for (var row = 0; row < height; row++) {
+    var srow = row;
+    var imageData = ctx.createImageData(width, 1);
+    var start = srow * width * 4;
+    if ((0, _platform.isWindows)()) {
+      for (var i = 0; i < rowBytes; i += 4) {
+        imageData.data[i] = target.buffer[start + i + 2];
+        imageData.data[i + 1] = target.buffer[start + i + 1];
+        imageData.data[i + 2] = target.buffer[start + i];
+        imageData.data[i + 3] = target.buffer[start + i + 3];
+      }
+    } else {
+      for (var _i = 0; _i < rowBytes; ++_i) {
+        imageData.data[_i] = target.buffer[start + _i];
+      }
+    }
+    ctx.putImageData(imageData, 0, row);
+  }
+  return canvas.toDataURL('image/png');
+};
+var LocalStorage = /*#__PURE__*/function () {
+  function LocalStorage() {
+    (0, _classCallCheck2["default"])(this, LocalStorage);
+  }
+  return (0, _createClass2["default"])(LocalStorage, [{
+    key: "set",
+    value: function set(key, value) {
+      localStorage.setItem(key, value);
+    }
+  }, {
+    key: "get",
+    value: function get(key) {
+      return localStorage.getItem(key);
+    }
+  }, {
+    key: "remove",
+    value: function remove(key) {
+      localStorage.removeItem(key);
+    }
+  }, {
+    key: "clear",
+    value: function clear() {
+      localStorage.clear();
+    }
+  }]);
+}();
+var storage = exports.storage = new LocalStorage();
+var ASIDE_WIDTH = exports.ASIDE_WIDTH = 'aside_width';
+var PARTICIPANT_POSITION = exports.PARTICIPANT_POSITION = 'participant_position';
+var getAssetUrl = exports.getAssetUrl = function getAssetUrl(path) {
+  return window.runtime.getAssetUrl(path);
+};
+var convertToFixedNumber = exports.convertToFixedNumber = function convertToFixedNumber(value) {
+  var divisor = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 100;
+  var fractionDigits = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 2;
+  return Number((value / divisor).toFixed(fractionDigits));
+};
+var virtualSoundCardPatternList = [/BlackHole/i, /SoundFlower/i, /AgoraALD/i];
+var matchVirtualSoundCardPattern = exports.matchVirtualSoundCardPattern = function matchVirtualSoundCardPattern(deviceName) {
+  return virtualSoundCardPatternList.reduce(function (prev, pattern) {
+    pattern.test(deviceName) && (prev = true);
+    return prev;
+  }, false);
+};
+var isResourceZipUrl = exports.isResourceZipUrl = function isResourceZipUrl(url) {
+  if (!url || typeof url !== 'string') return false;
+  var regex = /^https?:\/\/.+\.(zip)(\?.*)?$/i;
+  return regex.test(url);
+};
+var isPngOrJpg = exports.isPngOrJpg = function isPngOrJpg(path) {
+  if (!path || typeof path !== 'string') return false;
+  return path.endsWith('.png') || path.endsWith('.jpg');
+};
+var isMp4 = exports.isMp4 = function isMp4(path) {
+  if (!path || typeof path !== 'string') return false;
+  return path.endsWith('.mp4');
+};
+function getFileNameWithoutExtension(filePath) {
+  var match = filePath.match(/([^\\/]+)(?=\.\w+$)/);
+  return match ? match[1] : '';
+}
+var setLanguage = exports.setLanguage = function setLanguage(language) {
+  storage.set('$$fcr_language', language);
+};
+var getLanguage = exports.getLanguage = function getLanguage() {
+  return storage.get('$$fcr_language');
+};
+var waitUntil = exports.waitUntil = /*#__PURE__*/function () {
+  var _ref = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee2(prediction, memo) {
+    var intervalMs,
+      logger,
+      _args2 = arguments;
+    return _regenerator["default"].wrap(function _callee2$(_context2) {
+      while (1) switch (_context2.prev = _context2.next) {
+        case 0:
+          intervalMs = _args2.length > 2 && _args2[2] !== undefined ? _args2[2] : 100;
+          logger = (0, _logger.getLogger)();
+          return _context2.abrupt("return", new Promise(function (resolve) {
+            var task = _schedule.AgoraScheduler.shared.addPollingTask( /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee() {
+              var isTrue;
+              return _regenerator["default"].wrap(function _callee$(_context) {
+                while (1) switch (_context.prev = _context.next) {
+                  case 0:
+                    isTrue = prediction();
+                    logger.info("[wait-until] predict ".concat(memo, ": ").concat(isTrue));
+                    if (isTrue) {
+                      task.stop();
+                      resolve();
+                    }
+                  case 3:
+                  case "end":
+                    return _context.stop();
+                }
+              }, _callee);
+            })), intervalMs, false);
+          }));
+        case 3:
+        case "end":
+          return _context2.stop();
+      }
+    }, _callee2);
+  }));
+  return function waitUntil(_x, _x2) {
+    return _ref.apply(this, arguments);
+  };
+}();

package/lib/utilities/ui-resources.d.ts

@@ -0,0 +1,2 @@
+export declare const BUILTIN_VIRTUAL_BACKGROUND_IMAGES_URL = "https://solutions-apaas.agora.io/fcr-ui-scene/picture/common/virtual_background_images.zip";
+export declare const BUILTIN_VIRTUAL_BACKGROUND_VIDEOS_URL = "https://solutions-apaas.agora.io/fcr-ui-scene/video/common/virtual_background_videos.zip";

package/lib/utilities/ui-resources.js

@@ -0,0 +1,9 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.BUILTIN_VIRTUAL_BACKGROUND_VIDEOS_URL = exports.BUILTIN_VIRTUAL_BACKGROUND_IMAGES_URL = void 0;
+var BUILTIN_VIRTUAL_BACKGROUND_IMAGES_URL = exports.BUILTIN_VIRTUAL_BACKGROUND_IMAGES_URL = 'https://solutions-apaas.agora.io/fcr-ui-scene/picture/common/virtual_background_images.zip';
+var BUILTIN_VIRTUAL_BACKGROUND_VIDEOS_URL = exports.BUILTIN_VIRTUAL_BACKGROUND_VIDEOS_URL = 'https://solutions-apaas.agora.io/fcr-ui-scene/video/common/virtual_background_videos.zip';

package/lib/utilities/useNamespace.d.ts

@@ -0,0 +1,15 @@
+export declare const useNamespace: (block: string) => {
+    namespace: string;
+    b: (blockSuffix?: string) => string;
+    e: (element?: string) => string;
+    m: (modifier?: string) => string;
+    be: (blockSuffix?: string, element?: string) => string;
+    em: (element?: string, modifier?: string) => string;
+    bm: (blockSuffix?: string, modifier?: string) => string;
+    bem: (blockSuffix?: string, element?: string, modifier?: string) => string;
+    is: {
+        (name: string, state: boolean | undefined): string;
+        (name: string): string;
+    };
+};
+export type UseNamespaceReturn = ReturnType<typeof useNamespace>;

package/lib/utilities/useNamespace.js

@@ -0,0 +1,66 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useNamespace = void 0;
+require("core-js/modules/es.array.concat.js");
+var defaultNamespace = 'fcr';
+var statePrefix = 'is-';
+var _bem = function _bem(namespace, block, blockSuffix, element, modifier) {
+  var cls = "".concat(namespace, "-").concat(block);
+  if (blockSuffix) {
+    cls += "-".concat(blockSuffix);
+  }
+  if (element) {
+    cls += "__".concat(element);
+  }
+  if (modifier) {
+    cls += "--".concat(modifier);
+  }
+  return cls;
+};
+var useNamespace = exports.useNamespace = function useNamespace(block) {
+  var namespace = defaultNamespace;
+  var b = function b() {
+    var blockSuffix = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
+    return _bem(namespace, block, blockSuffix, '', '');
+  };
+  var e = function e(element) {
+    return element ? _bem(namespace, block, '', element, '') : '';
+  };
+  var m = function m(modifier) {
+    return modifier ? _bem(namespace, block, '', '', modifier) : '';
+  };
+  var be = function be(blockSuffix, element) {
+    return blockSuffix && element ? _bem(namespace, block, blockSuffix, element, '') : '';
+  };
+  var em = function em(element, modifier) {
+    return element && modifier ? _bem(namespace, block, '', element, modifier) : '';
+  };
+  var bm = function bm(blockSuffix, modifier) {
+    return blockSuffix && modifier ? _bem(namespace, block, blockSuffix, '', modifier) : '';
+  };
+  var bem = function bem(blockSuffix, element, modifier) {
+    return blockSuffix && element && modifier ? _bem(namespace, block, blockSuffix, element, modifier) : '';
+  };
+  var is = function is(name) {
+    for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+      args[_key - 1] = arguments[_key];
+    }
+    var state = args.length >= 1 ? args[0] : true;
+    return name && state ? "".concat(statePrefix).concat(name) : '';
+  };
+  return {
+    namespace: namespace,
+    b: b,
+    e: e,
+    m: m,
+    be: be,
+    em: em,
+    bm: bm,
+    bem: bem,
+    is: is
+  };
+};

package/lib/utilities/video-track-render-context.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { FcrDeviceStore } from '../common/device-store';
+import { FcrStreamControl } from 'agora-edu-core';
+export interface FcrVideoTrackRenderer {
+    deviceStore?: FcrDeviceStore;
+    streamControl?: FcrStreamControl;
+}
+export declare const FcrVideoTrackRenderContext: import("react").Context<FcrVideoTrackRenderer>;

package/lib/utilities/video-track-render-context.js

@@ -0,0 +1,9 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FcrVideoTrackRenderContext = void 0;
+var _react = require("react");
+var FcrVideoTrackRenderContext = exports.FcrVideoTrackRenderContext = /*#__PURE__*/(0, _react.createContext)({});

package/package.json

@@ -1,95 +1,70 @@
 {
   "name": "fcr-ui-scene",
-  "version": "1.0.40",
-  "main": "lib/scene.bundle.js",
-  "types": "lib/fcr-ui-scene/src/index.d.ts",
+  "version": "3.1.0",
+  "main": "lib/index.js",
+  "repository": "ssh://git@git.agoralab.co/aduc/fcr-ui-scene-desktop.git",
+  "author": "agora.io",
+  "license": "MIT",
   "scripts": {
-    "dev": "cross-env NODE_ENV=production NODE_OPTIONS=--max_old_space_size=4096 webpack --watch --config ./webpack/webpack.dev.js",
-    "build:types": "tsc -p tsconfig.json",
-    "build:docs": "typedoc",
-    "pack:npm": "run-s bundle:npm build:types",
-    "bundle:npm": "cross-env NODE_ENV=production NODE_OPTIONS=--max_old_space_size=4096 webpack --config ./webpack.config.js",
-    "ci:build": "run-s bundle:npm build:types"
+    "prepare": "husky",
+    "dev": "agora-tc-dev-server",
+    "dev-electron": "agora-tc-dev-server --electron",
+    "test-browser": "agora-tc-test-karma-browser",
+    "test-electron": "agora-tc-test-karma-electron",
+    "build": "agora-tc-transpile",
+    "bundle": "agora-tc-bundle --entry src/index",
+    "build-electron-mac": "agora-tc-pack-sdk --platform darwin --arch x64",
+    "build-electron-win": "agora-tc-pack-sdk --platform win32 --arch x64"
   },
   "dependencies": {
-    "agora-common-libs": "~2.9.0",
-    "agora-edu-core": "~2.9.0",
-    "agora-rte-sdk": "~2.9.0",
-    "react": "17.0.0",
-    "react-dom": "17.0.0",
-    "react-draggable": "4.4.3",
-    "react-rnd": "10.3.4",
-    "react-spring": "9.4.4",
-    "react-transition-group": "4.4.1",
-    "react-use-measure": "2.1.1",
-    "mobx-react": "6.3.1",
-    "agora-extension-virtual-background": "1.1.1",
-    "agora-extension-beauty-effect": "1.0.1-beta",
-    "agora-extension-ai-denoiser": "1.0.0",
-    "fscreen": "1.2.0",
-    "clipboard": "2.0.8",
-    "react-dnd": "15.1.2",
-    "react-dnd-html5-backend": "15.1.3"
+    "@react-spring/web": "^9.7.3",
+    "@use-gesture/react": "^10.3.1",
+    "classnames": "^2.5.1",
+    "js-md5": "^0.8.3",
+    "lodash": "^4.17.21",
+    "mobx": "^6.12.3",
+    "mobx-react": "^9.1.1",
+    "mobx-utils": "^6.0.8",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "react-rnd": "^10.4.1",
+    "react-use-measure": "^2.1.1",
+    "react-virtualized": "^9.22.5",
+    "dayjs": "^1.10.4",
+    "@electron/remote": "2.0.1",
+    "core-js": "^3.33.3",
+    "agora-electron-sdk": "4.3.2-build.90-rc.1",
+    "tinycolor2": "^1.6.0",
+    "electron-screenshots": "^0.5.26",
+    "pidusage": "^3.0.2",
+    "systeminformation": "^5.22.11"
   },
   "devDependencies": {
-    "@types/tailwindcss": "2.2.4",
-    "@types/fscreen": "1.0.1",
-    "autoprefixer": "10.2.5",
-    "postcss": "8.4.4",
-    "postcss-import": "14.0.1",
-    "postcss-loader": "4.0.3",
-    "babel-loader": "8.2.2",
-    "tailwindcss": "2.0.3",
-    "tinycolor2": "1.4.2",
-    "npm-run-all": "4.1.5",
-    "cross-env": "6.0.3",
-    "webpack": "5.54.0",
-    "webpackbar": "5.0.0-3",
-    "webpack-cli": "4.10.0",
-    "thread-loader": "3.0.1",
-    "core-js": "3.20.1",
-    "url-loader": "4.1.1",
-    "typescript": "4.4.4",
-    "@types/js-md5": "0.7.0",
-    "@types/axios": "0.14.0",
-    "@types/classnames": "2.2.11",
-    "@types/react": "17.0.44",
-    "@types/react-dom": "16.9.2",
-    "@types/react-helmet": "6.1.5",
-    "@types/react-router-dom": "5.3.3",
-    "@types/react-transition-group": "4.4.1",
-    "@types/tinycolor2": "1.4.3",
-    "@types/react-select": "4.0.15",
-    "@types/react-virtualized": "^9.21.14",
-    "@babel/cli": "7.17.6",
-    "@babel/core": "7.13.15",
-    "@babel/plugin-proposal-class-properties": "7.13.0",
-    "@babel/plugin-proposal-decorators": "7.15.8",
-    "@babel/plugin-proposal-object-rest-spread": "7.13.8",
-    "@babel/plugin-proposal-private-property-in-object": "7.16.7",
-    "@babel/plugin-syntax-decorators": "7.12.13",
-    "@babel/plugin-syntax-dynamic-import": "7.8.3",
-    "@babel/plugin-transform-runtime": "7.13.15",
-    "@babel/plugin-transform-typescript": "7.16.1",
-    "@babel/preset-env": "7.13.15",
-    "@babel/preset-react": "7.13.13",
-    "@babel/preset-typescript": "7.13.0",
-    "@babel/runtime-corejs3": "7.13.10"
+    "electron": "24.8.8",
+    "@babel/core": "^7.23.5",
+    "@babel/plugin-proposal-decorators": "^7.23.5",
+    "@babel/plugin-transform-runtime": "^7.13.15",
+    "@babel/preset-env": "^7.23.5",
+    "@babel/preset-react": "^7.24.1",
+    "@babel/preset-typescript": "^7.23.3",
+    "@types/jasmine": "^5.1.4",
+    "@types/lodash": "^4.17.0",
+    "@types/react": "^17.0.2",
+    "@types/react-dom": "^17.0.11",
+    "@types/react-virtualized": "^9.21.30",
+    "@types/tinycolor2": "^1.4.6",
+    "core-js": "^3.33.3",
+    "husky": "^9.0.11",
+    "lint-staged": "^15.2.2",
+    "prettier": "^3.2.5",
+    "react-hot-loader": "^4.13.1",
+    "tslib": "^2.6.2"
   },
-  "peerDependencies": {
-    "electron": "12.0.0"
+  "lint-staged": {
+    "*.{ts,tsx,html,css}": "prettier --write"
   },
-  "browserslist": {
-    "production": [
-      ">0.3%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      ">0.3%",
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
+  "agora_electron": {
+    "electron_version": "24.8.8",
+    "prebuilt": true
   }
 }

package/public/assets/fcr_chat_reddot.svg

@@ -0,0 +1,5 @@
+<svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M1.61335 6C2.14518 6 2.57632 5.55228 2.57632 5C2.57632 4.44772 2.14518 4 1.61335 4C1.08152 4 0.650391 4.44772 0.650391 5C0.650391 5.55228 1.08152 6 1.61335 6Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4.98372 6C5.51555 6 5.94669 5.55228 5.94669 5C5.94669 4.44772 5.51555 4 4.98372 4C4.45189 4 4.02076 4.44772 4.02076 5C4.02076 5.55228 4.45189 6 4.98372 6Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8.3541 6C8.88593 6 9.31706 5.55228 9.31706 5C9.31706 4.44772 8.88593 4 8.3541 4C7.82227 4 7.39113 4.44772 7.39113 5C7.39113 5.55228 7.82227 6 8.3541 6Z" fill="white"/>
+</svg>

package/public/assets/fcr_grid_big.svg

@@ -0,0 +1,3 @@
+<svg width="68" height="38" viewBox="0 0 68 38" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path id="fcr_grid_big" fill-rule="evenodd" clip-rule="evenodd" d="M2.72 0C1.21779 0 0 1.21523 0 2.71429V9.21213C0 9.84809 0.516635 10.3636 1.15394 10.3636H14.2797C14.917 10.3636 15.4336 9.84809 15.4336 9.21213V1.15152C15.4336 0.515551 14.917 0 14.2797 0H2.72ZM18.7373 0C18.1 0 17.5833 0.51555 17.5833 1.15152V9.21213C17.5833 9.84809 18.1 10.3636 18.7373 10.3636H31.863C32.5003 10.3636 33.0169 9.84809 33.0169 9.21213V1.15152C33.0169 0.515551 32.5003 0 31.863 0H18.7373ZM52.5664 1.15152C52.5664 0.51555 53.083 0 53.7203 0H65.28C66.7822 0 68 1.21523 68 2.71429V9.21213C68 9.84809 67.4834 10.3636 66.8461 10.3636H53.7203C53.083 10.3636 52.5664 9.84809 52.5664 9.21213V1.15152ZM36.2291 0C35.5918 0 35.0752 0.51555 35.0752 1.15152V9.21213C35.0752 9.84809 35.5918 10.3636 36.2291 10.3636H49.3549C49.9922 10.3636 50.5088 9.84809 50.5088 9.21213V1.15152C50.5088 0.515551 49.9922 0 49.3549 0H36.2291ZM17.5833 27.6364C17.5833 27.0004 18.1 26.4848 18.7373 26.4848H31.863C32.5003 26.4848 33.0169 27.0004 33.0169 27.6364V36.8485C33.0169 37.4845 32.5003 38 31.863 38H18.7373C18.1 38 17.5833 37.4845 17.5833 36.8485V27.6364ZM1.15394 26.4848C0.516636 26.4848 0 27.0004 0 27.6364V35.2857C0 36.7848 1.21778 38 2.72 38H14.2797C14.917 38 15.4336 37.4845 15.4336 36.8485V27.6364C15.4336 27.0004 14.917 26.4848 14.2797 26.4848H1.15394ZM52.5664 27.6364C52.5664 27.0004 53.083 26.4848 53.7203 26.4848H66.8461C67.4834 26.4848 68 27.0004 68 27.6364V35.2857C68 36.7848 66.7822 38 65.28 38H53.7203C53.083 38 52.5664 37.4845 52.5664 36.8485V27.6364ZM36.2291 26.4848C35.5918 26.4848 35.0752 27.0004 35.0752 27.6364V36.8485C35.0752 37.4845 35.5918 38 36.2291 38H49.3549C49.9922 38 50.5088 37.4845 50.5088 36.8485V27.6364C50.5088 27.0004 49.9922 26.4848 49.3549 26.4848H36.2291ZM17.5833 13.8184C17.5833 13.1824 18.1 12.6669 18.7373 12.6669H31.863C32.5003 12.6669 33.0169 13.1824 33.0169 13.8184V23.0305C33.0169 23.6665 32.5003 24.1821 31.863 24.1821H18.7373C18.1 24.1821 17.5833 23.6665 17.5833 23.0305V13.8184ZM1.15394 12.6669C0.516636 12.6669 0 13.1824 0 13.8184V23.0305C0 23.6665 0.516635 24.1821 1.15394 24.1821H14.2797C14.917 24.1821 15.4336 23.6665 15.4336 23.0305V13.8184C15.4336 13.1824 14.917 12.6669 14.2797 12.6669H1.15394ZM52.5664 13.8184C52.5664 13.1824 53.083 12.6669 53.7203 12.6669H66.8461C67.4834 12.6669 68 13.1824 68 13.8184V23.0305C68 23.6665 67.4834 24.1821 66.8461 24.1821H53.7203C53.083 24.1821 52.5664 23.6665 52.5664 23.0305V13.8184ZM36.2291 12.6669C35.5918 12.6669 35.0752 13.1824 35.0752 13.8184V23.0305C35.0752 23.6665 35.5918 24.1821 36.2291 24.1821H49.3549C49.9922 24.1821 50.5088 23.6665 50.5088 23.0305V13.8184C50.5088 13.1824 49.9922 12.6669 49.3549 12.6669H36.2291Z" fill="#E5EAF3" fillOpacity="0.9"/>
+</svg>

package/public/assets/fcr_listontop_big.svg

@@ -0,0 +1,3 @@
+<svg width="68" height="38" viewBox="0 0 68 38" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path id="fcr_listontop_big" fill-rule="evenodd" clip-rule="evenodd" d="M4.08 0C1.82668 0 0 1.82284 0 4.07143V6.84848C0 7.48445 0.516634 8 1.15394 8H11.3724C12.0097 8 12.5263 7.48445 12.5263 6.84848V1.15152C12.5263 0.515551 12.0097 0 11.3724 0H4.08ZM2.72 10C1.21779 10 0 11.2152 0 12.7143V33.9286C0 36.1772 1.82668 38 4.08 38H63.92C66.1733 38 68 36.1772 68 33.9286V12.7143C68 11.2152 66.7822 10 65.28 10H2.72ZM28.0352 1.15152C28.0352 0.515553 28.5518 0 29.1891 0H39.4076C40.0449 0 40.5615 0.515551 40.5615 1.15152V6.84848C40.5615 7.48445 40.0449 8 39.4076 8H29.1891C28.5518 8 28.0352 7.48445 28.0352 6.84848V1.15152ZM57.224 0C56.5867 0 56.07 0.515553 56.07 1.15152V6.84848C56.07 7.48445 56.5867 8 57.224 8H66.8459C67.4832 8 67.9998 7.48445 67.9998 6.84848V4.07143C67.9998 1.82284 66.1732 0 63.9198 0H57.224ZM14.3159 1.15152C14.3159 0.515553 14.8325 0 15.4699 0H25.0918C25.7291 0 26.2457 0.515551 26.2457 1.15152V6.84848C26.2457 7.48445 25.7291 8 25.0918 8H15.4699C14.8325 8 14.3159 7.48445 14.3159 6.84848V1.15152ZM43.5047 0C42.8674 0 42.3508 0.515553 42.3508 1.15152V6.84848C42.3508 7.48445 42.8674 8 43.5047 8H53.1266C53.7639 8 54.2806 7.48445 54.2806 6.84848V1.15152C54.2806 0.515551 53.7639 0 53.1266 0H43.5047Z" fill="#E5EAF3" fillOpacity="0.9"/>
+</svg>