fcr-ui-scene 3.4.5 → 3.5.1

package/lib/base.js

@@ -90,6 +90,7 @@ var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/cl
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _logger = require("agora-foundation/lib/logger");
+var _logger2 = require("./utilities/logger");
 var _rendererEvent = require("./utilities/renderer-event");
 var _decorator = require("agora-foundation/lib/decorator");
 var _react = _interopRequireDefault(require("react"));
@@ -276,7 +277,9 @@ var UIModule = exports.UIModule = /*#__PURE__*/function (_FcrUINode3) {
     var _this3;
     (0, _classCallCheck2["default"])(this, UIModule);
     _this3 = _callSuper(this, UIModule, [parentNode, rootNode]);
-    (0, _defineProperty2["default"])(_this3, "logger", (_initProto(_this3), (0, _logger.getLogger)()));
+    (0, _defineProperty2["default"])(_this3, "logger", (_initProto(_this3), (0, _logger2.createLogger)({
+      prefix: 'UIModule'
+    })));
     return _this3;
   }
   (0, _inherits2["default"])(UIModule, _FcrUINode3);

package/lib/creator.d.ts

@@ -1,10 +1,13 @@
-import { FcrUISceneCancelCallback, FcrUISceneConfig, FcrUISceneCreatorConfig, FcrUISceneFailureCallback, FcrUISceneSuccessCallback, FcrUISettingConfig } from './type';
+import { FcrUISceneCancelCallback, FcrUISceneConfig, FcrUISceneCreatorConfig, FcrUISceneFailureCallback, FcrUISceneSuccessCallback, FcrUISettingConfig, FcrUIWebWidgetConfig } from './type';
 import { FcrUIDefaultScene } from './ui-scene';
 export declare class FcrUISceneCreator {
     private _config;
     protected logger: import("agora-foundation/lib/logger").Logger;
     private _settingConfigStorage;
+    private _registeredWidgetConfigs;
     constructor(_config: FcrUISceneCreatorConfig);
     launch(config: FcrUISceneConfig, onCancel: FcrUISceneCancelCallback, onSuccess: FcrUISceneSuccessCallback, onFailure: FcrUISceneFailureCallback, dom: HTMLElement): FcrUIDefaultScene;
     getSettingConfig(): FcrUISettingConfig;
+    registerWidget(config: FcrUIWebWidgetConfig): void;
+    unregisterWidget(widgetId: string): void;
 }

package/lib/creator.js

@@ -1,13 +1,49 @@
 "use strict";
 
+require("core-js/modules/es.symbol.js");
+require("core-js/modules/es.symbol.description.js");
+require("core-js/modules/es.symbol.to-primitive.js");
+require("core-js/modules/es.error.cause.js");
+require("core-js/modules/es.error.to-string.js");
+require("core-js/modules/es.array.is-array.js");
+require("core-js/modules/es.array.push.js");
+require("core-js/modules/es.date.to-primitive.js");
+require("core-js/modules/es.function.bind.js");
+require("core-js/modules/es.function.name.js");
+require("core-js/modules/es.number.constructor.js");
+require("core-js/modules/es.object.create.js");
 require("core-js/modules/es.object.define-property.js");
+require("core-js/modules/es.object.get-own-property-descriptor.js");
+require("core-js/modules/esnext.function.metadata.js");
+require("core-js/modules/esnext.symbol.metadata.js");
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.FcrUISceneCreator = void 0;
+require("core-js/modules/es.array.iterator.js");
 require("core-js/modules/es.date.to-json.js");
 require("core-js/modules/es.json.stringify.js");
+require("core-js/modules/es.map.js");
+require("core-js/modules/es.object.to-string.js");
+require("core-js/modules/es.string.iterator.js");
+require("core-js/modules/esnext.map.delete-all.js");
+require("core-js/modules/esnext.map.emplace.js");
+require("core-js/modules/esnext.map.every.js");
+require("core-js/modules/esnext.map.filter.js");
+require("core-js/modules/esnext.map.find.js");
+require("core-js/modules/esnext.map.find-key.js");
+require("core-js/modules/esnext.map.includes.js");
+require("core-js/modules/esnext.map.key-of.js");
+require("core-js/modules/esnext.map.map-keys.js");
+require("core-js/modules/esnext.map.map-values.js");
+require("core-js/modules/esnext.map.merge.js");
+require("core-js/modules/esnext.map.reduce.js");
+require("core-js/modules/esnext.map.some.js");
+require("core-js/modules/esnext.map.update.js");
+require("core-js/modules/web.dom-collections.iterator.js");
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
@@ -15,11 +51,23 @@ var _logger = require("agora-foundation/lib/logger");
 var _uiScene = require("./ui-scene");
 var _i18n = require("agora-ui-foundation/lib/i18n");
 var _settingConfigStorage = require("./utilities/setting-config-storage");
+var _validateParams = _interopRequireDefault(require("./utilities/validate-params"));
+var _schema = require("./schema");
+var _decorator = require("agora-foundation/lib/decorator");
+var _FcrUISceneCreator;
+var _initProto, _launchDecs, _ref;
+function _applyDecs(e, t, r, n, o, a) { function i(e, t, r) { return function (n, o) { return r && r(n), e[t].call(n, o); }; } function c(e, t) { for (var r = 0; r < e.length; r++) e[r].call(t); return t; } function s(e, t, r, n) { if ("function" != typeof e && (n || void 0 !== e)) throw new TypeError(t + " must " + (r || "be") + " a function" + (n ? "" : " or undefined")); return e; } function applyDec(e, t, r, n, o, a, c, u, l, f, p, d, h) { function m(e) { if (!h(e)) throw new TypeError("Attempted to access private element on non-instance"); } var y, v = t[0], g = t[3], b = !u; if (!b) { r || Array.isArray(v) || (v = [v]); var w = {}, S = [], A = 3 === o ? "get" : 4 === o || d ? "set" : "value"; f ? (p || d ? w = { get: _setFunctionName(function () { return g(this); }, n, "get"), set: function set(e) { t[4](this, e); } } : w[A] = g, p || _setFunctionName(w[A], n, 2 === o ? "" : A)) : p || (w = Object.getOwnPropertyDescriptor(e, n)); } for (var P = e, j = v.length - 1; j >= 0; j -= r ? 2 : 1) { var D = v[j], E = r ? v[j - 1] : void 0, I = {}, O = { kind: ["field", "accessor", "method", "getter", "setter", "class"][o], name: n, metadata: a, addInitializer: function (e, t) { if (e.v) throw Error("attempted to call addInitializer after decoration was finished"); s(t, "An initializer", "be", !0), c.push(t); }.bind(null, I) }; try { if (b) (y = s(D.call(E, P, O), "class decorators", "return")) && (P = y);else { var k, F; O["static"] = l, O["private"] = f, f ? 2 === o ? k = function k(e) { return m(e), w.value; } : (o < 4 && (k = i(w, "get", m)), 3 !== o && (F = i(w, "set", m))) : (k = function k(e) { return e[n]; }, (o < 2 || 4 === o) && (F = function F(e, t) { e[n] = t; })); var N = O.access = { has: f ? h.bind() : function (e) { return n in e; } }; if (k && (N.get = k), F && (N.set = F), P = D.call(E, d ? { get: w.get, set: w.set } : w[A], O), d) { if ("object" == _typeof(P) && P) (y = s(P.get, "accessor.get")) && (w.get = y), (y = s(P.set, "accessor.set")) && (w.set = y), (y = s(P.init, "accessor.init")) && S.push(y);else if (void 0 !== P) throw new TypeError("accessor decorators must return an object with get, set, or init properties or void 0"); } else s(P, (p ? "field" : "method") + " decorators", "return") && (p ? S.push(P) : w[A] = P); } } finally { I.v = !0; } } return (p || d) && u.push(function (e, t) { for (var r = S.length - 1; r >= 0; r--) t = S[r].call(e, t); return t; }), p || b || (f ? d ? u.push(i(w, "get"), i(w, "set")) : u.push(2 === o ? w[A] : i.call.bind(w[A])) : Object.defineProperty(e, n, w)), P; } function u(e, t) { return Object.defineProperty(e, Symbol.metadata || Symbol["for"]("Symbol.metadata"), { configurable: !0, enumerable: !0, value: t }); } if (arguments.length >= 6) var l = a[Symbol.metadata || Symbol["for"]("Symbol.metadata")]; var f = Object.create(null == l ? null : l), p = function (e, t, r, n) { var o, a, i = [], s = function s(t) { return _checkInRHS(t) === e; }, u = new Map(); function l(e) { e && i.push(c.bind(null, e)); } for (var f = 0; f < t.length; f++) { var p = t[f]; if (Array.isArray(p)) { var d = p[1], h = p[2], m = p.length > 3, y = 16 & d, v = !!(8 & d), g = 0 == (d &= 7), b = h + "/" + v; if (!g && !m) { var w = u.get(b); if (!0 === w || 3 === w && 4 !== d || 4 === w && 3 !== d) throw Error("Attempted to decorate a public method/accessor that has the same name as a previously decorated public method/accessor. This is not currently supported by the decorators plugin. Property name was: " + h); u.set(b, !(d > 2) || d); } applyDec(v ? e : e.prototype, p, y, m ? "#" + h : _toPropertyKey(h), d, n, v ? a = a || [] : o = o || [], i, v, m, g, 1 === d, v && m ? s : r); } } return l(o), l(a), i; }(e, t, o, f); return r.length || u(e, f), { e: p, get c() { var t = []; return r.length && [u(applyDec(e, [r], n, e.name, 5, f, t), f), c.bind(null, t, e)]; } }; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _setFunctionName(e, t, n) { "symbol" == _typeof(t) && (t = (t = t.description) ? "[" + t + "]" : ""); try { Object.defineProperty(e, "name", { configurable: !0, value: n ? n + " " + t : t }); } catch (e) {} return e; }
+function _checkInRHS(e) { if (Object(e) !== e) throw TypeError("right-hand side of 'in' should be an object, got " + (null !== e ? _typeof(e) : "null")); return e; }
+_ref = (_launchDecs = [(0, _validateParams["default"])(_schema.fcrUISceneConfigSchema, _schema.fcrUISceneCallbackSchema, _schema.fcrUISceneCallbackSchema, _schema.fcrUISceneFailureCallbackSchema, _schema.fcrRenderViewSchema), _decorator.trace], "logger");
 var FcrUISceneCreator = exports.FcrUISceneCreator = /*#__PURE__*/function () {
   function FcrUISceneCreator(_config) {
     (0, _classCallCheck2["default"])(this, FcrUISceneCreator);
-    (0, _defineProperty2["default"])(this, "logger", (0, _logger.getLogger)());
+    (0, _defineProperty2["default"])(this, _ref, (_initProto(this), (0, _logger.getLogger)()));
     (0, _defineProperty2["default"])(this, "_settingConfigStorage", new _settingConfigStorage.FcrSettingConfigStorage());
+    (0, _defineProperty2["default"])(this, "_registeredWidgetConfigs", new Map([]));
     this._config = _config;
     this.logger.info("[FcrUISceneCreator] creator config: ".concat(JSON.stringify(_config)));
   }
@@ -28,7 +76,7 @@ var FcrUISceneCreator = exports.FcrUISceneCreator = /*#__PURE__*/function () {
     value: function launch(config, onCancel, onSuccess, onFailure, dom) {
       this.logger.info("[FcrUISceneCreator] scene config: ".concat(JSON.stringify(config)));
       (0, _i18n.changeLanguage)(config.language);
-      var scene = new _uiScene.FcrUIDefaultScene(config, this._config, dom, this._settingConfigStorage);
+      var scene = new _uiScene.FcrUIDefaultScene(config, this._config, dom, this._settingConfigStorage, this._registeredWidgetConfigs);
       scene.addObserver({
         onLaunchSuccess: onSuccess,
         onLaunchFailure: onFailure,
@@ -42,5 +90,20 @@ var FcrUISceneCreator = exports.FcrUISceneCreator = /*#__PURE__*/function () {
     value: function getSettingConfig() {
       return this._settingConfigStorage;
     }
+  }, {
+    key: "registerWidget",
+    value: function registerWidget(config) {
+      this._registeredWidgetConfigs.set(config.id, config);
+    }
+  }, {
+    key: "unregisterWidget",
+    value: function unregisterWidget(widgetId) {
+      this._registeredWidgetConfigs["delete"](widgetId);
+    }
   }]);
-}();
+}();
+_FcrUISceneCreator = FcrUISceneCreator;
+var _applyDecs$e = _applyDecs(_FcrUISceneCreator, [[_launchDecs, 2, "launch"], [_decorator.trace, 2, "getSettingConfig"], [_decorator.trace, 2, "registerWidget"], [_decorator.trace, 2, "unregisterWidget"]], []).e;
+var _applyDecs$e2 = (0, _slicedToArray2["default"])(_applyDecs$e, 1);
+_initProto = _applyDecs$e2[0];
+_applyDecs$e;

package/lib/electron/app.js

@@ -212,7 +212,4 @@ var hookApp = exports.hookApp = function hookApp(app) {
       (0, _window.clearAllRendererWindows)();
     });
   });
-  app.addListener('will-quit', function () {
-    _electron.globalShortcut.unregister('CommandOrControl+Shift+X');
-  });
 };

package/lib/electron/bootstrap-dev.js

@@ -24,6 +24,7 @@ var _app = require("./app");
 var _defaultOptions = require("./default-options");
 var _env = require("./env");
 var _main2 = require("./main");
+var _devtoolShortcut = require("./plugins/devtool-shortcut");
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 (0, _main.initialize)();
@@ -41,4 +42,5 @@ _electron.app.addListener('ready', function () {
   });
   mainWindow.loadURL(_env.devPageUrl);
   (0, _main.enable)(mainWindow.webContents);
+  (0, _devtoolShortcut.listenDevToolShortcut)(mainWindow);
 });

package/lib/electron/bootstrap-sdk.js

@@ -28,6 +28,7 @@ var _defaultOptions = require("./default-options");
 var _env = require("./env");
 var _path = _interopRequireDefault(require("path"));
 var _logger = require("./logger");
+var _devtoolShortcut = require("./plugins/devtool-shortcut");
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 (0, _main.initialize)();
@@ -60,6 +61,7 @@ _electron.app.addListener('ready', function () {
   } else {
     mainWindow.loadFile(_path["default"].join(_env.distPathPrefix, _env.distIndexFileName));
   }
+  (0, _devtoolShortcut.listenDevToolShortcut)(mainWindow);
   return mainWindow;
 });
 _electron.app.addListener('browser-window-created', function (_, window) {

package/lib/electron/main.js

@@ -7,18 +7,18 @@ Object.defineProperty(exports, "__esModule", {
 exports.hookWindow = void 0;
 require("core-js/modules/es.array.concat.js");
 require("core-js/modules/es.array.includes.js");
+require("core-js/modules/es.string.starts-with.js");
 require("core-js/modules/web.timers.js");
 var _window = require("./window");
 var _screenshot = require("./plugins/screenshot");
 var _logger = require("./logger");
 var _meetingState = require("./plugins/meeting-state");
-var _devtoolShortcut = require("./plugins/devtool-shortcut");
 var logger = (0, _logger.getLogger)();
 var hookWindow = exports.hookWindow = function hookWindow(mainWindow) {
   mainWindow.webContents.addListener('did-create-window', function (window, details) {
     logger.info("browser window is opened, frameName: ".concat(details.frameName));
     var builtinFrameNames = ['device-settings', 'chat', 'live-streaming', 'participant', 'share-screen-selection', 'invite', 'video-window', 'confirm', 'connection-gateway', 'whiteboard', 'progress-dialog', 'operation-waiting-room', 'operation-waiting-room', 'interpreter-setting', 'waiting-room-single-remove', 'waiting-room-all-remove', 'waiting-room-all-admit', 'control-bar', 'show-toast', 'system-preference'];
-    if (!builtinFrameNames.includes(details.frameName)) {
+    if (!builtinFrameNames.includes(details.frameName) && !details.frameName.startsWith('widget')) {
       logger.info("frameName [".concat(details.frameName, "] is not in builtinFrameNames, ignore it"));
       return;
     }
@@ -35,6 +35,18 @@ var hookWindow = exports.hookWindow = function hookWindow(mainWindow) {
       logger.info("Window [".concat(window.title, ":").concat(window.id, "] is closed by shortcut CMD + W, send 'will-close' event to that window"));
       window.emit('will-close');
     });
+    window.addListener('will-resize', function (event, newBounds, details) {
+      logger.info("Window [".concat(window.title, ":").concat(window.id, "] is resized, send 'will-resize' event to that window"));
+      window.emit('custom-resize', event, newBounds, details);
+    });
+
+    // screen?.addListener('display-metrics-changed', (event, display, changedMetrics) => {
+    //   logger.info(
+    //     `Screen metrics [${window.title}:${window.id}] is changed, send 'display-metrics-changed' event to that window`,
+    //   );
+    //   window.emit('display-metrics-changed', event, display, changedMetrics);
+    // });
+
     attachEventOnMethod(window, 'hide', 'CALL_HIDE');
     attachEventOnMethod(window, 'show', 'CALL_SHOW');
   });
@@ -59,7 +71,6 @@ var hookWindow = exports.hookWindow = function hookWindow(mainWindow) {
   });
   (0, _screenshot.listenScreenshot)(mainWindow);
   (0, _meetingState.listenMeetingState)(mainWindow);
-  (0, _devtoolShortcut.listenDevToolShortcut)(mainWindow);
 };
 var attachEventOnMethod = function attachEventOnMethod(browserWindow, method, action) {
   var func = browserWindow[method];

package/lib/electron/plugins/devtool-shortcut.js

@@ -25,4 +25,9 @@ var listenDevToolShortcut = exports.listenDevToolShortcut = function listenDevTo
   });
   logger.info("CommandOrControl+Shift+X is ".concat(_electron.globalShortcut.isRegistered('CommandOrControl+Shift+X') ? 'registered' : 'not registered', " "));
   logger.info("CommandOrControl+Shift+R is ".concat(_electron.globalShortcut.isRegistered('CommandOrControl+Shift+R') ? 'registered' : 'not registered', " "));
+  var unregister = function unregister() {
+    _electron.globalShortcut.unregister('CommandOrControl+Shift+X');
+    _electron.globalShortcut.unregister('CommandOrControl+Shift+R');
+  };
+  window.addListener('closed', unregister);
 };

package/lib/electron/plugins/screenshot.js

@@ -6,15 +6,18 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.listenScreenshot = void 0;
+require("core-js/modules/web.timers.js");
 var _electron = require("electron");
 var _electronScreenshots = _interopRequireDefault(require("electron-screenshots"));
 var listenScreenshot = exports.listenScreenshot = function listenScreenshot(window) {
   var shortcutCapture = new _electronScreenshots["default"]();
   var isCapturing = false,
     module = '';
+  var timer = null;
   var stopScreen = function stopScreen() {
     window.show();
     isCapturing = false;
+    timer && clearTimeout(timer);
   };
   shortcutCapture.on('ok', function () {
     stopScreen();
@@ -43,7 +46,7 @@ var listenScreenshot = exports.listenScreenshot = function listenScreenshot(wind
       if (!shortcutCapture) {
         shortcutCapture = new _electronScreenshots["default"]();
       }
-      showScreenShot();
+      timer = setTimeout(showScreenShot, 500);
     }
   });
 };

package/lib/modules/action-bar/components/apps/app-item/index.css

@@ -3,9 +3,10 @@
   flex-direction: column;
   justify-content: center;
   align-items: center;
-  padding: 22px 16px 0;
+  padding-top: 22px;
 }
 .fcr-action-apps-item-icon {
+  margin: 0px 16px 8px;
   width: 58px;
   height: 58px;
   border-radius: var(--fcr_cornerradius_m);
@@ -13,7 +14,6 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  margin-bottom: 8px;
 }
 .fcr-action-apps-item-text {
   font-size: 12px;
@@ -21,7 +21,7 @@
   line-height: 18px;
   text-align: center;
   color: var(--fcr_ui_scene_icontext1);
-  height: 18px;
+  width: 90px;
 }
 .fcr-action-apps-item-wrapper:hover .fcr-action-apps-item-text {
   color: var(--fcr_web_ui_scene_mainicon2,);

package/lib/modules/action-bar/components/apps/app-item/index.js

@@ -30,32 +30,43 @@ require("./index.css");
 var _jsxRuntime = require("react/jsx-runtime");
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var size = 32;
 var Appitem = exports.Appitem = function Appitem(props) {
   var name = props.name,
     onClick = props.onClick,
     fcrToolTipProps = props.fcrToolTipProps,
-    fcrIconProps = props.fcrIconProps;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip.FcrToolTip, _objectSpread(_objectSpread({
-    mouseEnterDelay: 0
-  }, fcrToolTipProps ? fcrToolTipProps : {
-    visible: false
-  }), {}, {
-    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-      className: (0, _classnames["default"])('fcr-action-apps-item-wrapper'),
-      onClick: onClick,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        className: "fcr-action-apps-item-icon",
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, _objectSpread(_objectSpread({
-          size: 32
-        }, fcrIconProps), {}, {
-          colors: {
-            iconPrimary: 'var(--fcr_web_ui_scene_mainicon1)'
-          }
-        }))
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        className: "fcr-action-apps-item-text",
-        children: name
-      })]
-    })
-  }));
+    fcrIconProps = props.fcrIconProps,
+    imgSrc = props.imgSrc;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: (0, _classnames["default"])('fcr-action-apps-item-wrapper'),
+    onClick: onClick,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip.FcrToolTip, _objectSpread(_objectSpread({
+      mouseEnterDelay: 0
+    }, fcrToolTipProps ? fcrToolTipProps : {
+      visible: false
+    }), {}, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: "fcr-action-apps-item-icon",
+          children: imgSrc ? /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+            style: {
+              width: size,
+              height: size
+            },
+            src: imgSrc,
+            alt: name
+          }) : fcrIconProps && /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, _objectSpread(_objectSpread({
+            size: size
+          }, fcrIconProps), {}, {
+            colors: {
+              iconPrimary: 'var(--fcr_web_ui_scene_mainicon1)'
+            }
+          }))
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: "fcr-action-apps-item-text",
+          children: name
+        })]
+      })
+    }))
+  });
 };

package/lib/modules/action-bar/components/apps/app-list.d.ts

@@ -0,0 +1,3 @@
+import './index.css';
+import { AppListPorps } from '../../types';
+export declare const AppList: (props: AppListPorps) => import("react/jsx-runtime").JSX.Element;

package/lib/modules/action-bar/components/apps/app-list.js

@@ -0,0 +1,45 @@
+"use strict";
+
+require("core-js/modules/es.symbol.js");
+require("core-js/modules/es.array.filter.js");
+require("core-js/modules/es.array.for-each.js");
+require("core-js/modules/es.array.push.js");
+require("core-js/modules/es.object.define-properties.js");
+require("core-js/modules/es.object.define-property.js");
+require("core-js/modules/es.object.get-own-property-descriptor.js");
+require("core-js/modules/es.object.get-own-property-descriptors.js");
+require("core-js/modules/es.object.keys.js");
+require("core-js/modules/es.object.to-string.js");
+require("core-js/modules/esnext.async-iterator.filter.js");
+require("core-js/modules/esnext.async-iterator.for-each.js");
+require("core-js/modules/esnext.iterator.constructor.js");
+require("core-js/modules/esnext.iterator.filter.js");
+require("core-js/modules/esnext.iterator.for-each.js");
+require("core-js/modules/web.dom-collections.for-each.js");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.AppList = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+require("core-js/modules/es.array.map.js");
+require("core-js/modules/es.function.name.js");
+require("core-js/modules/esnext.async-iterator.map.js");
+require("core-js/modules/esnext.iterator.map.js");
+var _mobxReact = require("mobx-react");
+var _appItem = require("./app-item");
+var _useAppItemOptions = _interopRequireDefault(require("./useAppItemOptions"));
+require("./index.css");
+var _jsxRuntime = require("react/jsx-runtime");
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var AppList = exports.AppList = (0, _mobxReact.observer)(function (props) {
+  var onAppClick = props.onAppClick;
+  var options = (0, _useAppItemOptions["default"])(onAppClick);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: "action-bar-apps-container",
+    children: options.map(function (config) {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_appItem.Appitem, _objectSpread({}, config), config.name);
+    })
+  });
+});

package/lib/modules/action-bar/components/apps/index.css

@@ -5,4 +5,5 @@
   flex-wrap: wrap;
   justify-content: left;
   width: 100%;
+  align-items: start;
 }

package/lib/modules/action-bar/components/apps/index.js

@@ -12,8 +12,8 @@ var _tooltip = require("agora-ui-foundation/lib/components/tooltip");
 var _react = require("react");
 var _store = require("../../store");
 var _mobxReact = require("mobx-react");
-var _appitems = require("./appitems");
 var _item = require("../item");
+var _appList = require("./app-list");
 var _jsxRuntime = require("react/jsx-runtime");
 var Apps = exports.Apps = (0, _mobxReact.observer)(function (_ref) {
   var id = _ref.id,
@@ -24,14 +24,17 @@ var Apps = exports.Apps = (0, _mobxReact.observer)(function (_ref) {
     _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
     visible = _useState2[0],
     setVisible = _useState2[1];
+  var onAppClick = function onAppClick() {
+    setVisible(false);
+  };
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip.FcrToolTip, {
     content: 'Apps',
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_item.ActionBarItemWithPopover, {
       popoverProps: {
         trigger: 'click',
         visible: visible,
-        content: /*#__PURE__*/(0, _jsxRuntime.jsx)(_appitems.AppItems, {
-          closeActionBarItemWithPopover: setVisible
+        content: /*#__PURE__*/(0, _jsxRuntime.jsx)(_appList.AppList, {
+          onAppClick: onAppClick
         }),
         overlayInnerStyle: {
           boxShadow: 'var(--fcr_web_light_dropup_m)',
@@ -47,7 +50,7 @@ var Apps = exports.Apps = (0, _mobxReact.observer)(function (_ref) {
       id: id,
       order: order,
       icon: _type.FcrIconType.FCR_MOREAPP,
-      title: 'Apps',
+      title: "Apps",
       iconColors: {
         iconPrimary: 'var(--fcr_web_ui_scene_mainicon1)'
       }

package/lib/modules/action-bar/components/apps/useAppItemOptions.d.ts

@@ -1,9 +1,17 @@
-declare const useAppItemOptions: (closeActionBarItemWithPopover?: (visible: boolean) => void) => {
+declare const useAppItemOptions: (onAppClick?: () => void) => ({
     name: string;
     onClick: () => void;
     fcrIconProps: {
         type: import("agora-ui-foundation/lib/components/icon/type").FcrIconType;
     };
     permission: boolean;
-}[];
+} | {
+    name: string;
+    fcrToolTipProps: {
+        content: string;
+    };
+    onClick: () => void;
+    imgSrc: string;
+    permission: boolean;
+})[];
 export default useAppItemOptions;

package/lib/modules/action-bar/components/apps/useAppItemOptions.js

@@ -6,6 +6,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+require("core-js/modules/es.array.concat.js");
 require("core-js/modules/es.array.filter.js");
 require("core-js/modules/es.object.to-string.js");
 require("core-js/modules/esnext.async-iterator.filter.js");
@@ -15,15 +17,17 @@ var _react = require("react");
 var _useInterpreter = _interopRequireDefault(require("./useInterpreter"));
 var _useLiveStreaming = _interopRequireDefault(require("./useLiveStreaming"));
 var _useBeautyBackground = _interopRequireDefault(require("./useBeautyBackground"));
-var useAppItemOptions = function useAppItemOptions(closeActionBarItemWithPopover) {
-  var interpreter = (0, _useInterpreter["default"])(closeActionBarItemWithPopover);
-  var liveStreaming = (0, _useLiveStreaming["default"])(closeActionBarItemWithPopover);
-  var beautyBackground = (0, _useBeautyBackground["default"])(closeActionBarItemWithPopover);
+var _useWidgetList = _interopRequireDefault(require("./useWidgetList"));
+var useAppItemOptions = function useAppItemOptions(onAppClick) {
+  var interpreter = (0, _useInterpreter["default"])(onAppClick);
+  var liveStreaming = (0, _useLiveStreaming["default"])(onAppClick);
+  var beautyBackground = (0, _useBeautyBackground["default"])(onAppClick);
+  var widgetList = (0, _useWidgetList["default"])(onAppClick);
   var options = (0, _react.useMemo)(function () {
-    return [interpreter, liveStreaming, beautyBackground].filter(function (appItem) {
+    return [interpreter, liveStreaming, beautyBackground].concat((0, _toConsumableArray2["default"])(widgetList)).filter(function (appItem) {
       return appItem.permission;
     });
-  }, [[interpreter, liveStreaming, beautyBackground]]);
+  }, [[interpreter, liveStreaming, beautyBackground, widgetList]]);
   return options;
 };
 var _default = exports["default"] = useAppItemOptions;

package/lib/modules/action-bar/components/apps/useBeautyBackground.d.ts

@@ -1,5 +1,5 @@
 import { FcrIconType } from 'agora-ui-foundation/lib/components/icon/type';
-declare const useLiveStreaming: (closeActionBarItemWithPopover?: (visible: boolean) => void) => {
+declare const useLiveStreaming: (onAppClick?: () => void) => {
     name: string;
     onClick: () => void;
     fcrIconProps: {

package/lib/modules/action-bar/components/apps/useBeautyBackground.js

@@ -10,7 +10,7 @@ var _store = require("../../store");
 var _type = require("agora-ui-foundation/lib/components/icon/type");
 var _store2 = require("../../../setting/store");
 var _i18n = require("agora-ui-foundation/lib/i18n");
-var useLiveStreaming = function useLiveStreaming(closeActionBarItemWithPopover) {
+var useLiveStreaming = function useLiveStreaming(onAppClick) {
   var _useContext = (0, _react.useContext)(_store.ActionBarContext),
     hasStartLiveStreamingPermission = _useContext.hasStartLiveStreamingPermission,
     openDeviceSettingDialog = _useContext.openDeviceSettingDialog;
@@ -20,7 +20,7 @@ var useLiveStreaming = function useLiveStreaming(closeActionBarItemWithPopover)
       activeTab: _store2.DeviceSettingTab.VIDEO,
       videoActiveTab: 'virtual-background'
     });
-    closeActionBarItemWithPopover && closeActionBarItemWithPopover(false);
+    onAppClick && onAppClick();
   };
   return (0, _react.useMemo)(function () {
     return {

package/lib/modules/action-bar/components/apps/useInterpreter.d.ts

@@ -1,5 +1,5 @@
 import { FcrIconType } from 'agora-ui-foundation/lib/components/icon/type';
-declare const useInterpreter: (closeActionBarItemWithPopover?: (visible: boolean) => void) => {
+declare const useInterpreter: (onAppClick?: () => void) => {
     name: string;
     onClick: () => void;
     fcrToolTipProps: {

package/lib/modules/action-bar/components/apps/useInterpreter.js

@@ -9,14 +9,14 @@ var _react = require("react");
 var _store = require("../../store");
 var _type = require("agora-ui-foundation/lib/components/icon/type");
 var _i18n = require("agora-ui-foundation/lib/i18n");
-var useInterpreter = function useInterpreter(closeActionBarItemWithPopover) {
+var useInterpreter = function useInterpreter(onAppClick) {
   var _useContext = (0, _react.useContext)(_store.ActionBarContext),
     hasEnableInterpreterPermission = _useContext.hasEnableInterpreterPermission,
-    interpreterState = _useContext.interpreterState,
+    isInterpreterEnabled = _useContext.isInterpreterEnabled,
     openInterpreterDialog = _useContext.openInterpreterDialog;
   var onClick = function onClick() {
     openInterpreterDialog();
-    closeActionBarItemWithPopover && closeActionBarItemWithPopover(false);
+    onAppClick && onAppClick();
   };
   var transI18n = (0, _i18n.useI18n)();
   return (0, _react.useMemo)(function () {
@@ -24,14 +24,14 @@ var useInterpreter = function useInterpreter(closeActionBarItemWithPopover) {
       name: transI18n('fmt_interpretation_setting_controller_option_simultaneous_interpretation'),
       onClick: onClick,
       fcrToolTipProps: {
-        content: interpreterState ? transI18n('fmt_interpretation_setting_controller_toast_turn_off_simultaneous_interpretation') : transI18n('fmt_interpretation_setting_controller_toast_turn_on_simultaneous_interpretation')
+        content: isInterpreterEnabled ? transI18n('fmt_interpretation_setting_controller_toast_turn_off_simultaneous_interpretation') : transI18n('fmt_interpretation_setting_controller_toast_turn_on_simultaneous_interpretation')
       },
       fcrIconProps: {
-        type: interpreterState ? _type.FcrIconType.FCR_SIMULTANEOUSINTERPRETATION_ON : _type.FcrIconType.FCR_SIMULTANEOUSINTERPRETATION_OFF,
+        type: isInterpreterEnabled ? _type.FcrIconType.FCR_SIMULTANEOUSINTERPRETATION_ON : _type.FcrIconType.FCR_SIMULTANEOUSINTERPRETATION_OFF,
         iconPrimary: 'var(--fcr_web_ui_scene_mainicon1)'
       },
       permission: hasEnableInterpreterPermission
     };
-  }, [hasEnableInterpreterPermission, interpreterState]);
+  }, [hasEnableInterpreterPermission, isInterpreterEnabled]);
 };
 var _default = exports["default"] = useInterpreter;

package/lib/modules/action-bar/components/apps/useLiveStreaming.d.ts

@@ -1,5 +1,5 @@
 import { FcrIconType } from 'agora-ui-foundation/lib/components/icon/type';
-declare const useLiveStreaming: (closeActionBarItemWithPopover?: (visible: boolean) => void) => {
+declare const useLiveStreaming: (onAppClick?: () => void) => {
     name: string;
     onClick: () => void;
     fcrToolTipProps: {

package/lib/modules/action-bar/components/apps/useLiveStreaming.js

@@ -10,7 +10,7 @@ var _store = require("../../store");
 var _type = require("agora-ui-foundation/lib/components/icon/type");
 var _type2 = require("fcr-core/lib/type");
 var _i18n = require("agora-ui-foundation/lib/i18n");
-var useLiveStreaming = function useLiveStreaming(closeActionBarItemWithPopover) {
+var useLiveStreaming = function useLiveStreaming(onAppClick) {
   var _useContext = (0, _react.useContext)(_store.ActionBarContext),
     hasStartLiveStreamingPermission = _useContext.hasStartLiveStreamingPermission,
     liveStreamingState = _useContext.liveStreamingState,
@@ -18,7 +18,7 @@ var useLiveStreaming = function useLiveStreaming(closeActionBarItemWithPopover)
   var transI18n = (0, _i18n.useI18n)();
   var onClick = function onClick() {
     openLiveStreamingDialog();
-    closeActionBarItemWithPopover && closeActionBarItemWithPopover(false);
+    onAppClick && onAppClick();
   };
   return (0, _react.useMemo)(function () {
     var isStarted = liveStreamingState === _type2.FcrLiveStreamingState.STARTED;