fcr-ui-scene 3.8.2 → 3.9.0-alpha

package/lib-es/modules/share-screen/components/selection/index.js

@@ -31,6 +31,7 @@ import { ShareAudio } from 'agora-ui-foundation/lib/components/room-screen-share
 import './index.css';
 import { FcrUIShareType } from '../../type';
 import { FcrIconType } from 'agora-ui-foundation/lib/components/icon/type';
+import { isWindows } from 'agora-foundation/lib/utilities/env';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 export var ShareSelection = observer(function () {
   var _useContext = useContext(StoreContext),
@@ -157,7 +158,8 @@ var ThumbnailRender = function ThumbnailRender(_ref3) {
     return uint8ArrayToImageData({
       buffer: image,
       width: width,
-      height: height
+      height: height,
+      isWindows: isWindows()
     });
   }, [image]);
   return /*#__PURE__*/_jsx("img", {

package/lib-es/modules/share-screen/store.base.js

@@ -82,6 +82,7 @@ import { FcrScreenCaptureType, FcrUserRole, FcrVideoRenderMode } from 'fcr-core/
 import { transI18n } from 'agora-ui-foundation/lib/i18n';
 import { FcrUIScreenShareErrorCode, FcrUIScreenShareStopReason } from '../../providers/screen-share/struct';
 import { FcrIconType } from 'agora-ui-foundation/lib/components/icon/type';
+import { FcrUIToastKey } from '../../modules/toast-manager/type';
 var _A = /*#__PURE__*/new WeakMap();
 var _B = /*#__PURE__*/new WeakMap();
 var _C = /*#__PURE__*/new WeakMap();
@@ -115,9 +116,8 @@ var ShareScreenStoreBase = /*#__PURE__*/function () {
         });
         _this.dialogProvider.setSharingDisplayBounds(null);
         if (reason === FcrUIScreenShareStopReason.STOPPED_BY_OTHER) {
-          _this.messageProvider.showToast({
-            type: 'info',
-            message: transI18n('fmt_share_tips_sharingdisabled')
+          _this.messageProvider.showToastByKey({
+            key: FcrUIToastKey.FMT_SHARE_TIPS_SHARINGDISABLED
           });
           _this._replaceShareConfirmDialog(operator);
         }
@@ -131,11 +131,9 @@ var ShareScreenStoreBase = /*#__PURE__*/function () {
       onScreenShareErrorOccurred: function onScreenShareErrorOccurred(code) {
         if (code === FcrUIScreenShareErrorCode.NETWORK_DISCONNECTED) {
           if (!_this.facilityProvider.isNetworkConnected) {
-            var params = {
-              message: transI18n('fmt_screenshare_toast_network_error_unable_start_screen_share'),
-              type: 'error'
-            };
-            _this.messageProvider.showToast(params);
+            _this.messageProvider.showToastByKey({
+              key: FcrUIToastKey.FMT_SCREENTIPS_NETWORK_ERROR_UNABLE_START_SCREEN_SHARE
+            });
             return false;
           }
         }
@@ -314,7 +312,7 @@ var ShareScreenStoreBase = /*#__PURE__*/function () {
     key: "startShareScreen",
     value: function () {
       var _startShareScreen = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
-        var params, captureType, videoSourceId, _t;
+        var captureType, videoSourceId, _t;
         return _regeneratorRuntime.wrap(function (_context2) {
           while (1) switch (_context2.prev = _context2.next) {
             case 0:
@@ -328,11 +326,9 @@ var ShareScreenStoreBase = /*#__PURE__*/function () {
                 _context2.next = 2;
                 break;
               }
-              params = {
-                message: transI18n('fmt_screenshare_toast_network_error_unable_start_screen_share'),
-                type: 'error'
-              };
-              this.messageProvider.showToast(params);
+              this.messageProvider.showToastByKey({
+                key: FcrUIToastKey.FMT_SCREENTIPS_NETWORK_ERROR_UNABLE_START_SCREEN_SHARE
+              });
               return _context2.abrupt("return");
             case 2:
               _context2.prev = 2;

package/lib-es/modules/share-screen/store.electron.js

@@ -5,7 +5,6 @@ import "core-js/modules/es.error.cause.js";
 import "core-js/modules/es.error.to-string.js";
 import "core-js/modules/es.array.is-array.js";
 import "core-js/modules/es.array.iterator.js";
-import "core-js/modules/es.array.push.js";
 import "core-js/modules/es.date.to-primitive.js";
 import "core-js/modules/es.function.bind.js";
 import "core-js/modules/es.function.name.js";
@@ -46,10 +45,15 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 var _ElectronShareScreenStore;
 var _initProto, _handleSelectionOpenDecs, _setShareWithAudioStateDecs, _setShareInSmoothModeDecs, _ref;
 import _regeneratorRuntime from "@babel/runtime/regenerator";
+import "core-js/modules/es.array.concat.js";
 import "core-js/modules/es.array.find.js";
+import "core-js/modules/es.array.for-each.js";
+import "core-js/modules/es.array.push.js";
 import "core-js/modules/es.object.to-string.js";
 import "core-js/modules/esnext.iterator.constructor.js";
 import "core-js/modules/esnext.iterator.find.js";
+import "core-js/modules/esnext.iterator.for-each.js";
+import "core-js/modules/web.dom-collections.for-each.js";
 function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 function _superPropGet(t, o, e, r) { var p = _get(_getPrototypeOf(1 & r ? t.prototype : t), o, e); return 2 & r && "function" == typeof p ? function (t) { return p.apply(e, t); } : p; }
@@ -66,12 +70,13 @@ import { FcrDialogInterceptorEventName } from '../../providers/dialog/type';
 import { AudioProcessingChannel } from '../control-bar/components/share-audio';
 import { setVideoWindowDialogPosition } from '../dialog/dialogs/video-window';
 import { bound, trace } from 'agora-foundation/lib/decorator';
-import { action, runInAction } from 'mobx';
+import { action, reaction, runInAction } from 'mobx';
 import { getStartScreenSharing } from '../../utilities/parameters';
 import { FcrScreenCaptureType } from 'fcr-core/lib/type';
 import { WindowRelativeLevel } from '../dialog/level-config';
 import { sleep } from 'fcr-core/lib/imports';
 import { FcrUISelectionBoundsChangeReason } from '../../providers/screen-share/struct';
+import { isMac } from 'agora-foundation/lib/utilities/env';
 _ref = (_handleSelectionOpenDecs = [action, action.bound], _setShareWithAudioStateDecs = [action, action.bound], _setShareInSmoothModeDecs = [action, action.bound], "_windowProvider");
 var ElectronShareScreenStore = /*#__PURE__*/function (_ShareScreenStoreBase) {
   function ElectronShareScreenStore(args) {
@@ -80,10 +85,12 @@ var ElectronShareScreenStore = /*#__PURE__*/function (_ShareScreenStoreBase) {
     _this = _callSuper(this, ElectronShareScreenStore, [args]);
     _defineProperty(_this, _ref, void _initProto(_this));
     _defineProperty(_this, "_isSharing", false);
+    _defineProperty(_this, "_disposers", []);
     _defineProperty(_this, "_screenShareElectronObserver", {
       onPrepreScreenCapture: _this._showControlBar,
-      onScreenShareErrorOccurred: _this._hideControlBar,
-      onScreenShareStopped: _this._hideControlBar,
+      onScreenShareStarted: _this._handleScreenShareStarted,
+      onScreenShareErrorOccurred: _this._handleScreenShareEnded,
+      onScreenShareStopped: _this._handleScreenShareEnded,
       onShareSourceReplaced: _this._handleSourceReplaced
     });
     _this._windowProvider = args.objectManager.getObject(FcrUIObjectKeys.P_WINDOW_PROVIDER);
@@ -94,6 +101,7 @@ var ElectronShareScreenStore = /*#__PURE__*/function (_ShareScreenStoreBase) {
     _this._renderer = args.objectManager.getObject(FcrUIObjectKeys.RENDERER_WRAPPER);
     _this._renderer.addEventListener(_this._handleDisplayCountUpdated);
     _this.screenShareProvider.addObserver(_this._screenShareElectronObserver);
+    _this._addReactions();
     _this._checkAutoStartScreenSharing();
     return _this;
   }
@@ -174,6 +182,7 @@ var ElectronShareScreenStore = /*#__PURE__*/function (_ShareScreenStoreBase) {
   }, {
     key: "release",
     value: function release() {
+      this._renderer.setMainWindowDisplaySupport(true);
       this._isSharing = false;
       this._dialogProvider.removeInterceptor(FcrDialogInterceptorEventName.ON_CLOSE, this._interceptDialogClose);
       this._dialogProvider.closeDialog(FcrUIDialogKey.SHARE_SCREEN_CONTROL_BAR);
@@ -184,6 +193,10 @@ var ElectronShareScreenStore = /*#__PURE__*/function (_ShareScreenStoreBase) {
       _superPropGet(ElectronShareScreenStore, "release", this, 3)([]);
       this.screenShareProvider.removeObserver(this._screenShareElectronObserver);
       this._renderer.removeEventListener(this._handleDisplayCountUpdated);
+      this._disposers.forEach(function (disposer) {
+        return disposer();
+      });
+      this._disposers = [];
     }
   }, {
     key: "_ensureWindowsAreOpenAndPositioned",
@@ -233,7 +246,7 @@ var ElectronShareScreenStore = /*#__PURE__*/function (_ShareScreenStoreBase) {
               isMultiDisplayActive = this._multiDisplayProvider.isActive;
               mainWindow = this._windowProvider.getCurrentWindow();
               if (isMultiDisplayActive) {
-                _context2.next = 1;
+                _context2.next = 2;
                 break;
               }
               if (!mainWindow.isFullScreen()) {
@@ -251,13 +264,14 @@ var ElectronShareScreenStore = /*#__PURE__*/function (_ShareScreenStoreBase) {
                 videoWindow.show();
               }
               videoWindow.setAlwaysOnTop(true, 'screen-saver', WindowRelativeLevel.VIDEO_WINDOW_LEVEL);
+            case 2:
               this._ensureWindowsAreOpenAndPositioned(true, isMultiDisplayActive);
               if (isMultiDisplayActive) {
                 this._multiDisplayProvider.moveMainWindowToIndexLeastDisplay();
               } else {
                 mainWindow.hide();
               }
-            case 2:
+            case 3:
             case "end":
               return _context2.stop();
           }
@@ -268,6 +282,23 @@ var ElectronShareScreenStore = /*#__PURE__*/function (_ShareScreenStoreBase) {
       }
       return _showControlBar;
     }()
+  }, {
+    key: "_handleScreenShareStarted",
+    value: function _handleScreenShareStarted() {
+      var isMultiDisplayActive = this._multiDisplayProvider.isActive;
+
+      // 单屏幕模式下，需要通知主进程屏幕共享已开启，不支持显示主窗口，避免主窗口和control bar 重复显示
+      if (!isMultiDisplayActive) {
+        this._renderer.setMainWindowDisplaySupport(false);
+      }
+    }
+  }, {
+    key: "_handleScreenShareEnded",
+    value: function _handleScreenShareEnded() {
+      // 通知主进程屏幕共享已关闭，支持显示主窗口
+      this._renderer.setMainWindowDisplaySupport(true);
+      this._hideControlBar();
+    }
   }, {
     key: "_hideControlBar",
     value: function _hideControlBar() {
@@ -277,6 +308,22 @@ var ElectronShareScreenStore = /*#__PURE__*/function (_ShareScreenStoreBase) {
       var mainWindow = this._windowProvider.getCurrentWindow();
       mainWindow.show();
     }
+  }, {
+    key: "_addReactions",
+    value: function _addReactions() {
+      var _this3 = this;
+      // 监听多屏模式状态变化，当用户正在屏幕共享时同步更新主窗口显示支持
+      this._disposers.push(reaction(function () {
+        return _this3._multiDisplayProvider.isActive;
+      }, function (isActive) {
+        if (_this3.screenShareProvider.isLocalUserScreenSharing) {
+          // 单屏模式下（isActive = false），禁用主窗口显示支持
+          // 多屏模式下（isActive = true），启用主窗口显示支持
+          _this3._renderer.setMainWindowDisplaySupport(isActive);
+          _this3.logger.info("Multi-display mode changed to ".concat(isActive ? 'active' : 'inactive', ", setMainWindowDisplaySupport(").concat(isActive, ")"));
+        }
+      }));
+    }
   }, {
     key: "_handleSourceReplaced",
     value: function _handleSourceReplaced() {
@@ -329,7 +376,7 @@ var ElectronShareScreenStore = /*#__PURE__*/function (_ShareScreenStoreBase) {
     key: "_handleDisplayCountUpdated",
     value: function () {
       var _handleDisplayCountUpdated2 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee4(event) {
-        var eventAction, _this$selectedShareIt, type, id, sharingTargetBounds, displayList, display, windowList, window, selectionBounds, _t;
+        var eventAction, _this$selectedShareIt, removedDisplay, _this$selectedShareIt2, x, y, _removedDisplay$bound, displayX, displayY, width, height, isPointInRemovedDisplay, _this$selectedShareIt3, type, id, sharingTargetBounds, displayList, display, windowList, window, selectionBounds, _t;
         return _regeneratorRuntime.wrap(function (_context4) {
           while (1) switch (_context4.prev = _context4.next) {
             case 0:
@@ -339,82 +386,109 @@ var ElectronShareScreenStore = /*#__PURE__*/function (_ShareScreenStoreBase) {
               // ||
               // eventAction === FcrUIRendererEventAction.SCREEN_DISPLAY_METRICS_CHANGED
               )) {
-                _context4.next = 11;
+                _context4.next = 14;
                 break;
               }
               this.logger.info("action: ".concat(eventAction));
+              if (!(eventAction === FcrUIRendererEventAction.SCREEN_DISPLAY_REMOVED)) {
+                _context4.next = 3;
+                break;
+              }
+              removedDisplay = event.display;
+              if (!(
+              // macOS: some versions do not emit screen track callbacks when a display is unplugged.
+              isMac() && removedDisplay && this.screenShareProvider.isLocalUserScreenSharing && ((_this$selectedShareIt = this.selectedShareItem) === null || _this$selectedShareIt === void 0 ? void 0 : _this$selectedShareIt.type) === FcrUIShareType.DISPLAY && this.selectedShareItem.bounds)) {
+                _context4.next = 3;
+                break;
+              }
+              _this$selectedShareIt2 = this.selectedShareItem.bounds, x = _this$selectedShareIt2.x, y = _this$selectedShareIt2.y;
+              _removedDisplay$bound = removedDisplay.bounds, displayX = _removedDisplay$bound.x, displayY = _removedDisplay$bound.y, width = _removedDisplay$bound.width, height = _removedDisplay$bound.height;
+              isPointInRemovedDisplay = x >= displayX && x < displayX + width && y >= displayY && y < displayY + height;
+              if (isPointInRemovedDisplay) {
+                _context4.next = 1;
+                break;
+              }
+              this.logger.info("removed display ".concat(removedDisplay.id, " does not match shared display, skip stop"));
+              return _context4.abrupt("return");
+            case 1:
+              this.logger.info("shared display removed (".concat(removedDisplay.id, "), stop screen sharing"));
+              _context4.next = 2;
+              return this.screenShareProvider.stopShare();
+            case 2:
+              return _context4.abrupt("return");
+            case 3:
               if (!this.screenShareProvider.isLocalUserScreenSharing) {
-                _context4.next = 11;
+                _context4.next = 14;
                 break;
               }
               if (this.selectedShareItem) {
-                _context4.next = 1;
+                _context4.next = 4;
                 break;
               }
               this.logger.warn('no selected share item, supposed to be non-null');
               return _context4.abrupt("return");
-            case 1:
-              _this$selectedShareIt = this.selectedShareItem, type = _this$selectedShareIt.type, id = _this$selectedShareIt.id;
+            case 4:
+              _this$selectedShareIt3 = this.selectedShareItem, type = _this$selectedShareIt3.type, id = _this$selectedShareIt3.id;
               if (!(type === FcrUIShareType.DISPLAY)) {
-                _context4.next = 5;
+                _context4.next = 8;
                 break;
               }
-              _context4.next = 2;
+              _context4.next = 5;
               return this.screenShareProvider.getDisplayList();
-            case 2:
+            case 5:
               displayList = _context4.sent;
               display = displayList.find(function (item) {
                 return item.id === id;
               });
               if (!display) {
-                _context4.next = 3;
+                _context4.next = 6;
                 break;
               }
               sharingTargetBounds = display.bounds;
-              _context4.next = 4;
+              _context4.next = 7;
               break;
-            case 3:
+            case 6:
               this.logger.warn("can not find display info for shared screen id: ".concat(id));
               return _context4.abrupt("return");
-            case 4:
-              _context4.next = 10;
+            case 7:
+              _context4.next = 13;
               break;
-            case 5:
-              _context4.next = 6;
+            case 8:
+              _context4.next = 9;
               return this.screenShareProvider.getWindowList();
-            case 6:
+            case 9:
               windowList = _context4.sent;
               window = windowList.find(function (item) {
                 return item.id === id;
               });
               if (!window) {
-                _context4.next = 7;
+                _context4.next = 10;
                 break;
               }
               sharingTargetBounds = window.bounds;
-              _context4.next = 10;
+              _context4.next = 13;
               break;
-            case 7:
+            case 10:
               this.logger.warn("can not find window info for shared window id: ".concat(id));
 
               // 共享的窗口被隐藏时，尝试使用 selectionBounds 作为位置依据
-              _context4.prev = 8;
+              _context4.prev = 11;
               selectionBounds = this.screenShareProvider.selectionBounds;
               sharingTargetBounds = this._renderer.getDisplayMatching(selectionBounds).bounds;
-              _context4.next = 10;
+              _context4.next = 13;
               break;
-            case 9:
-              _context4.prev = 9;
-              _t = _context4["catch"](8);
+            case 12:
+              _context4.prev = 12;
+              _t = _context4["catch"](11);
               this.logger.warn("get selection bounds error, can not set video window position: ".concat(_t));
               return _context4.abrupt("return");
-            case 10:
+            case 13:
               this.screenShareProvider.changeSelectionBounds(sharingTargetBounds, FcrUISelectionBoundsChangeReason.DISPLAY_CHANGE);
-            case 11:
+            case 14:
             case "end":
               return _context4.stop();
           }
-        }, _callee4, this, [[8, 9]]);
+        }, _callee4, this, [[11, 12]]);
       }));
       function _handleDisplayCountUpdated(_x) {
         return _handleDisplayCountUpdated2.apply(this, arguments);
@@ -424,6 +498,6 @@ var ElectronShareScreenStore = /*#__PURE__*/function (_ShareScreenStoreBase) {
   }]);
 }(ShareScreenStoreBase);
 _ElectronShareScreenStore = ElectronShareScreenStore;
-var _applyDecs$e = _slicedToArray(_applyDecs(_ElectronShareScreenStore, [[_handleSelectionOpenDecs, 18, "handleSelectionOpen"], [_setShareWithAudioStateDecs, 18, "setShareWithAudioState"], [_setShareInSmoothModeDecs, 18, "setShareInSmoothMode"], [bound, 2, "setShareAudioMode"], [bound, 2, "setSelectedItem"], [[bound, trace], 2, "release"], [bound, 2, "_interceptDialogClose"], [bound, 2, "_showControlBar"], [bound, 2, "_hideControlBar"], [bound, 2, "_handleSourceReplaced"], [bound, 2, "_handleDisplayCountUpdated"]], [], 0, void 0, ShareScreenStoreBase).e, 1);
+var _applyDecs$e = _slicedToArray(_applyDecs(_ElectronShareScreenStore, [[_handleSelectionOpenDecs, 18, "handleSelectionOpen"], [_setShareWithAudioStateDecs, 18, "setShareWithAudioState"], [_setShareInSmoothModeDecs, 18, "setShareInSmoothMode"], [bound, 2, "setShareAudioMode"], [bound, 2, "setSelectedItem"], [[bound, trace], 2, "release"], [bound, 2, "_interceptDialogClose"], [bound, 2, "_showControlBar"], [bound, 2, "_handleScreenShareStarted"], [bound, 2, "_handleScreenShareEnded"], [bound, 2, "_hideControlBar"], [bound, 2, "_handleSourceReplaced"], [bound, 2, "_handleDisplayCountUpdated"]], [], 0, void 0, ShareScreenStoreBase).e, 1);
 _initProto = _applyDecs$e[0];
 export { ElectronShareScreenStore as default };

package/lib-es/modules/state-bar/layout-config.js

@@ -5,7 +5,7 @@ import "core-js/modules/esnext.iterator.constructor.js";
 import "core-js/modules/esnext.iterator.map.js";
 import { useI18n } from 'agora-ui-foundation/lib/i18n';
 import { observer } from 'mobx-react';
-import { useNamespace } from '../../utilities/useNamespace';
+import { useNamespace } from 'agora-ui-foundation/lib/utilities/use-namespace';
 import './index.css';
 import { FcrIcon } from 'agora-ui-foundation/lib/components/icon';
 import { FcrIconType } from 'agora-ui-foundation/lib/components/icon/type';

package/lib-es/modules/state-bar/live-streaming-state.js

@@ -10,10 +10,11 @@ import { FcrDropMenu } from 'agora-ui-foundation/lib/components/drop-menu';
 import { useContext, useRef, useState, useEffect } from 'react';
 import { StoreContext } from './main-scene/store.base';
 import liveStreamingGif from './assets/live-streaming.gif';
-import { useNamespace } from '../../utilities/useNamespace';
+import { useNamespace } from 'agora-ui-foundation/lib/utilities/use-namespace';
 import { useI18n } from 'agora-ui-foundation/lib/i18n';
-import { copyText } from '../../utilities/browser-api';
+import { copyText } from 'agora-ui-foundation/lib/utilities/copy-text';
 import { GALLERY_MIN_SIZE } from '../../utilities/constant';
+import { FcrUIToastKey } from '../../modules/toast-manager/type';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export var LiveStreamingState = observer(function () {
   var _useContext = useContext(StoreContext),
@@ -75,13 +76,11 @@ export var LiveStreamingState = observer(function () {
       toggleLayoutBarLock(false);
       copyText(liveStreamingPlayUrl).then(function () {
         showToast({
-          type: 'info',
-          message: transI18n('fmt_statusbar_status_coppied')
+          key: FcrUIToastKey.FMT_STATUSBAR_STATUS_COPPIED
         });
       })["catch"](function () {
         showToast({
-          type: 'error',
-          message: transI18n('fmt_statusbar_tips_copyfailed')
+          key: FcrUIToastKey.FMT_STATUSBAR_TIPS_COPYFAILED
         });
       });
     }

package/lib-es/modules/state-bar/main-scene/store.browser.js

@@ -70,7 +70,7 @@ var StateBarBrowserStore = /*#__PURE__*/function (_StateBarMainSceneSto) {
     get: function get() {
       // 浏览器环境中，如果正在共享屏幕则禁用布局切换
       // 复用 state-bar/store.browser.ts 中的逻辑
-      return this.isSharingScreen || this.isLiveStreaming;
+      return this.isSharingScreen;
     }
   }]);
 }(StateBarMainSceneStoreBase);

package/lib-es/modules/state-bar/main-scene/store.electron.js

@@ -97,7 +97,7 @@ var StateBarElectronStore = /*#__PURE__*/function (_StateBarMainSceneSto) {
       }
 
       // 如果正在共享屏幕，则禁用布局切换
-      return this.isSharingScreen || this.isLiveStreaming;
+      return this.isSharingScreen;
     }
   }]);
 }(StateBarMainSceneStoreBase);

package/lib-es/modules/state-bar/meeting-details.js

@@ -11,7 +11,8 @@ import { useContext, useMemo, useState, useEffect } from 'react';
 import { StoreContext } from './main-scene/store.base';
 import './meeting-detail.css';
 import classNames from 'classnames';
-import { copyText } from '../../utilities/browser-api';
+import { copyText } from 'agora-ui-foundation/lib/utilities/copy-text';
+import { FcrUIToastKey } from '../../modules/toast-manager/type';
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 var CopyState = /*#__PURE__*/function (CopyState) {
   CopyState[CopyState["COPYINIT"] = 1] = "COPYINIT";
@@ -50,39 +51,33 @@ export var MeetingDetails = observer(function () {
     var content = meetingId ? copyContent : copyContent.replace(/\s+/g, '');
     copyText(content).then(function () {
       showToast({
-        type: 'info',
-        message: t('fmt_statusbar_status_coppied')
+        key: FcrUIToastKey.FMT_STATUSBAR_STATUS_COPPIED
       });
     })["catch"](function () {
       showToast({
-        type: 'warn',
-        message: t('fmt_information_tips_numbercopyfailed')
+        key: FcrUIToastKey.FMT_INFORMATION_TIPS_NUMBERCOPYFAILED
       });
     });
   }
   function handleCopyMeetingPassword(password) {
     copyText(password).then(function () {
       showToast({
-        type: 'info',
-        message: t('fmt_uimanager_tips_passwordcopied')
+        key: FcrUIToastKey.FMT_UIMANAGER_TIPS_PASSWORDCOPIED
       });
     })["catch"](function () {
       showToast({
-        type: 'warn',
-        message: t('fmt_settings_tips_passwordcopyfailed')
+        key: FcrUIToastKey.FMT_SETTINGS_TIPS_PASSWORDCOPYFAILED
       });
     });
   }
   function handlerCopyMeetingShareLink(shareLink) {
     copyText(shareLink).then(function () {
       showToast({
-        type: 'info',
-        message: t('fmt_additional_tips_invitation')
+        key: FcrUIToastKey.FMT_ADDITIONAL_TIPS_INVITATION
       });
     })["catch"](function () {
       showToast({
-        type: 'warn',
-        message: t('fmt_additional_tips_invitationfailed')
+        key: FcrUIToastKey.FMT_ADDITIONAL_TIPS_INVITATIONFAILED
       });
     });
   }
@@ -102,13 +97,11 @@ export var MeetingDetails = observer(function () {
         copyText: t('fmt_statusbar_status_coppied')
       });
       showToast({
-        type: 'info',
-        message: t('fmt_meeting_mainwindow_topbar_left_popup_toast_copy_done')
+        key: FcrUIToastKey.FMT_MEETING_MAINWINDOW_TOPBAR_LEFT_POPUP_TOAST_COPY_DONE
       });
     })["catch"](function () {
       showToast({
-        type: 'warn',
-        message: t('fmt_sharing_tips_copyfull_failed')
+        key: FcrUIToastKey.FMT_SHARING_TIPS_COPYFULL_FAILED
       });
     });
   }

package/lib-es/modules/state-bar/meeting-network-state.css

@@ -85,7 +85,11 @@
   flex-grow: 1;
 }
 
-.meeting-network-state__delay__value {
+.meeting-network-state__loss-rate__value_web {
+  display: flex;
+  flex-grow: 1;
+  justify-content: flex-start;
+  align-items: center;
 }
 
 .meeting-network-state__loss-rate__value {

package/lib-es/modules/state-bar/meeting-network-state.js

@@ -8,6 +8,7 @@ import { FcrIcon } from 'agora-ui-foundation/lib/components/icon';
 import { FcrIconType } from 'agora-ui-foundation/lib/components/icon/type';
 import { FcrUIHighlightElement } from '../../utilities/constant';
 import { DeviceSettingTab } from '../setting/type';
+import { isElectron } from 'agora-foundation/lib/utilities/env';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export var MeetingNetworkState = observer(function () {
   var t = useI18n();
@@ -65,7 +66,7 @@ export var MeetingNetworkState = observer(function () {
       className: "meeting-network-state__loss-rate",
       children: [/*#__PURE__*/_jsx("label", {
         children: t('fmt_networkstatus_window_loss')
-      }), /*#__PURE__*/_jsxs("div", {
+      }), isElectron() ? /*#__PURE__*/_jsxs("div", {
         className: "meeting-network-state__loss-rate__value",
         children: [/*#__PURE__*/_jsxs("div", {
           children: [/*#__PURE__*/_jsxs("span", {
@@ -80,6 +81,11 @@ export var MeetingNetworkState = observer(function () {
             children: "\u2193"
           })]
         })]
+      }) : /*#__PURE__*/_jsx("div", {
+        className: "meeting-network-state__loss-rate__value_web",
+        children: /*#__PURE__*/_jsxs("span", {
+          children: [networkStats.downlinkPacketLossRate, "%"]
+        })
       })]
     }), /*#__PURE__*/_jsx("div", {
       className: "meeting-network-state__divider"

package/lib-es/modules/state-bar/meeting-time.js

@@ -1,7 +1,7 @@
 import { observer } from 'mobx-react';
 import { FcrIcon } from 'agora-ui-foundation/lib/components/icon';
 import { FcrIconType } from 'agora-ui-foundation/lib/components/icon/type';
-import { useNamespace } from '../../utilities/useNamespace';
+import { useNamespace } from 'agora-ui-foundation/lib/utilities/use-namespace';
 import './index.css';
 import classnames from 'classnames';
 import { useContext } from 'react';

package/lib-es/modules/state-bar/network-quality.js

@@ -1,5 +1,5 @@
 import { observer } from 'mobx-react';
-import { useNamespace } from '../../utilities/useNamespace';
+import { useNamespace } from 'agora-ui-foundation/lib/utilities/use-namespace';
 import { FcrIcon } from 'agora-ui-foundation/lib/components/icon';
 import { FcrIconType } from 'agora-ui-foundation/lib/components/icon/type';
 import { useContext } from 'react';

package/lib-es/modules/state-bar/recording.js

@@ -6,7 +6,7 @@ import { FcrIcon } from 'agora-ui-foundation/lib/components/icon';
 import { FcrIconType } from 'agora-ui-foundation/lib/components/icon/type';
 import { FcrToolTip } from 'agora-ui-foundation/lib/components/tooltip';
 import { useI18n } from 'agora-ui-foundation/lib/i18n';
-import { useNamespace } from '../../utilities/useNamespace';
+import { useNamespace } from 'agora-ui-foundation/lib/utilities/use-namespace';
 import { StopCloudRecording } from '../action-bar/components/record/stop-record-dialog';
 import { StoreContext } from './main-scene/store.base';
 import { GALLERY_MIN_SIZE } from '../../utilities/constant';