fcr-ui-scene 3.8.1 → 3.9.0-alpha

package/lib/modules/components/security-menu/store.js

@@ -61,6 +61,7 @@ var _objectManager = require("../../../object-manager");
 var _i18n = require("agora-ui-foundation/lib/i18n");
 var _react = require("react");
 var _constant = require("../../../utilities/constant");
+var _type = require("../../toast-manager/type");
 var _SecurityMenuStore;
 var _initProto, _showLockedRoomToastDecs, _setCheckedStateMapDecs, _setAllowAnnotationDecs, _setLockRoomEnabledDecs, _setAllowChatDecs, _setAllowUnmuteSelfAudioDecs, _setAllowUnmuteSelfVideoDecs, _setAllowShareScreenDecs, _setAllowWriteBoardDecs, _hasLockRoomPermissionDecs, _hasEnableStartAudioPermissionDecs, _hasEnableStartVideoPermissionDecs, _hasAllowWriteBoardPermissionDecs, _hasWaitingRoomPermissionDecs, _hasJoinWithPromptSoundPermissionDecs, _isWaterMarkEnabledDecs, _setAllowWaterMarkLineDecs, _setAllowWaterMarkDecs, _hasWatermarkEnablePermissionDecs, _hasWatermarkDisablePermissionDecs, _hasEnableStartScreenSharePermissionDecs, _hasPermissionToControlAllowSendAllDecs, _hasAllowChangeNamePermissionDecs, _hasDisallowChangeNamePermissionDecs, _setAllowChangeSelfNameDecs, _hasEnableJoinWithAudioPermissionDecs, _hasEnableJoinWithVideoPermissionDecs, _setAllowJoinWithMuteAudioDecs, _setAllowJoinWithMutedVideoDecs, _hasEnableTranscribePermissionDecs, _isTranscribeSupportedDecs, _isCaptionSupportedDecs, _isSourceLanguageSupportedDecs, _allowStartTranscribeDecs, _hasEnableCaptionPermissionDecs, _allowStartCaptionDecs, _hasEnableSourceLanguagePermissionDecs, _allowSetSourceLanguageDecs, _setEnableWaitingRoomDecs, _setAllowJoinWithPromptSoundDecs, _ref;
 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; }
@@ -89,9 +90,8 @@ var SecurityMenuStore = exports["default"] = /*#__PURE__*/function () {
   return (0, _createClass2["default"])(SecurityMenuStore, [{
     key: "showLockedRoomToast",
     value: function showLockedRoomToast(enable) {
-      this._messageProvider.showToast({
-        type: 'info',
-        message: enable ? (0, _i18n.transI18n)('fmt_security_tips_lock_meeting_on') : (0, _i18n.transI18n)('fmt_uimanager_tips_meetingunlocked')
+      this._messageProvider.showToastByKey({
+        key: enable ? _type.FcrUIToastKey.FMT_SECURITY_TIPS_LOCK_MEETING_ON : _type.FcrUIToastKey.FMT_UIMANAGER_TIPS_MEETINGUNLOCKED
       });
     }
   }, {
@@ -352,9 +352,8 @@ var SecurityMenuStore = exports["default"] = /*#__PURE__*/function () {
               _context.next = 2;
               return this._mainRoomControl.enableWaitingRoom(enable);
             case 2:
-              this._messageProvider.showToast({
-                type: 'normal',
-                message: (0, _i18n.transI18n)('fmt_waitingroom_mobile_setting_tips_disable')
+              this._messageProvider.showToastByKey({
+                key: _type.FcrUIToastKey.FMT_WAITINGROOM_MOBILE_SETTING_TIPS_DISABLE
               });
             case 3:
               _context.next = 6;
@@ -363,9 +362,8 @@ var SecurityMenuStore = exports["default"] = /*#__PURE__*/function () {
               _context.next = 5;
               return this._mainRoomControl.enableWaitingRoom(enable);
             case 5:
-              this._messageProvider.showToast({
-                type: 'normal',
-                message: (0, _i18n.transI18n)('fmt_waitingroom_setting_tips_enable')
+              this._messageProvider.showToastByKey({
+                key: _type.FcrUIToastKey.FMT_WAITINGROOM_SETTING_TIPS_ENABLE
               });
             case 6:
             case "end":

package/lib/modules/components/tab-frame/index.css

@@ -1,8 +1,8 @@
 .fcr-tabs-frame {
   display: flex;
   flex-direction: column;
-  /* height: 100%; */
-  width: 100%;
+  height: 100%;
+  width: 400px;
 }
 
 .fcr-tabs-frame-tabs {

package/lib/modules/connection-gateway/components/phone/index.js

@@ -15,6 +15,7 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 var _button = require("agora-ui-foundation/lib/components/button");
 var _divider = _interopRequireDefault(require("agora-ui-foundation/lib/components/divider"));
 var _zonePhone = require("agora-ui-foundation/lib/components/zone-phone");
+var _regex = require("agora-foundation/lib/utilities/regex");
 var _calling = require("./components/calling");
 var _callinfo = _interopRequireDefault(require("./components/callinfo"));
 var _mobxReact = require("mobx-react");
@@ -23,7 +24,6 @@ var _remeber = require("./components/remeber");
 var _react = require("react");
 var _store = require("../../store");
 var _type = require("fcr-core/lib/room-control/room-connector-control/type");
-var _regex = require("../../../../utilities/regex");
 require("./index.css");
 var _i18n = require("agora-ui-foundation/lib/i18n");
 var _type2 = require("../../../../type");

package/lib/modules/connection-gateway/store.js

@@ -80,13 +80,13 @@ var _react = require("react");
 var _decorator = require("agora-foundation/lib/decorator");
 var _type = require("fcr-core/lib/room-control/room-connector-control/type");
 var _isEqual = _interopRequireDefault(require("lodash/isEqual"));
-var _tools = require("../../utilities/tools");
-var _i18n = require("agora-ui-foundation/lib/i18n");
+var _tools = require("agora-foundation/lib/utilities/tools");
 var _type2 = require("../../type");
 var _constant = require("../../utilities/constant");
 var _enums = require("./enums");
 var _objectManager = require("../../object-manager");
 var _type3 = require("../setting/type");
+var _type4 = require("../../modules/toast-manager/type");
 var _ConnectionGatewayStore;
 var _initProto, _init_activeTabKey, _init_rememberMe, _init_rememberedNumberList, _init_connectionPhoneInfo, _init_currentRegion, _init_currentCallInfo, _init_connectInfo, _init_phoneCallState, _init_phoneCallReason, _init_connectSession, _init_calling, _init_outgoingCall, _init_isHangup, _init_hasPstnStream, _init_hasNeedMergedStream, _onTabChangeDecs, _onGetConnectInfoDecs, _regionChangeHandlerDecs, _startCallDecs, _stopCallDecs, _setRememberMeDecs, _initRememberedDataDecs, _rememberNumberDecs, _phoneCallUpdatedDecs, _phoneCallReasonDecs, _setStreamStateDecs, _handleStreamsAddedOrUpdatedDecs, _handleStreamsRemovedDecs, _ref;
 function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t["return"] || t["return"](); } finally { if (u) throw o; } } }; }
@@ -436,9 +436,8 @@ var ConnectionGatewayStore = exports["default"] = /*#__PURE__*/function () {
               _context3.next = 1;
               return this._roomControl.getRoomConnectorControl().stopSession(this.connectSession.sessionId);
             case 1:
-              this._messageProvider.showToast({
-                type: 'normal',
-                message: (0, _i18n.transI18n)('fmt_PSTN_status_hungup')
+              this._messageProvider.showToastByKey({
+                key: _type4.FcrUIToastKey.FMT_PSTN_STATUS_HUNGUP
               });
             case 2:
             case "end":
@@ -601,9 +600,8 @@ var ConnectionGatewayStore = exports["default"] = /*#__PURE__*/function () {
       switch (reason) {
         case _type.FcrRoomConnectorSessionReason.ACCEPTED:
           // 已接听
-          this._messageProvider.showToast({
-            type: 'normal',
-            message: (0, _i18n.transI18n)('fmt_PSTN_status_voiceconnected')
+          this._messageProvider.showToastByKey({
+            key: _type4.FcrUIToastKey.FMT_PSTN_STATUS_VOICECONNECTED
           });
           this.closeConnectionDialog();
           this._accepted = true;

package/lib/modules/control-bar/components/annotation-button/index.d.ts

@@ -0,0 +1,11 @@
+type Props = {
+    onAnnotationButtonClick?: () => void;
+    onCleanAnnotationClick: () => void;
+    onAllowWriteClick: (allow: boolean) => void;
+    isWriteAllowed: boolean;
+    haPermissionAllowWrite: boolean;
+    visible: boolean;
+    setVisible: (visible: boolean) => void;
+};
+export declare const AnnotationButton: ({ onAnnotationButtonClick, onCleanAnnotationClick, onAllowWriteClick, isWriteAllowed, haPermissionAllowWrite, visible, setVisible, }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/modules/control-bar/components/annotation-button/index.js

@@ -0,0 +1,51 @@
+"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.AnnotationButton = void 0;
+var _tooltipsButton = require("agora-ui-foundation/lib/components/tooltips-button");
+var _i18n = require("agora-ui-foundation/lib/i18n");
+var _type = require("agora-ui-foundation/lib/components/icon/type");
+var _annotationMenu = _interopRequireDefault(require("../../../components/annotation-menu"));
+var _jsxRuntime = require("react/jsx-runtime");
+var AnnotationButton = exports.AnnotationButton = function AnnotationButton(_ref) {
+  var onAnnotationButtonClick = _ref.onAnnotationButtonClick,
+    onCleanAnnotationClick = _ref.onCleanAnnotationClick,
+    onAllowWriteClick = _ref.onAllowWriteClick,
+    isWriteAllowed = _ref.isWriteAllowed,
+    haPermissionAllowWrite = _ref.haPermissionAllowWrite,
+    visible = _ref.visible,
+    setVisible = _ref.setVisible;
+  var transI18n = (0, _i18n.useI18n)();
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltipsButton.FrcTooltipButton, {
+    active: visible,
+    tooltip: {
+      content: transI18n('fmt_screenshare_controlbar_button_annotations'),
+      icon: {
+        type: _type.FcrIconType.FCR_RENAME,
+        size: 32,
+        colors: {
+          iconPrimary: 'var(--fcr_web_ui_scene_mainicon1)'
+        }
+      }
+    },
+    withPopover: true,
+    popover: {
+      content: /*#__PURE__*/(0, _jsxRuntime.jsx)(_annotationMenu["default"], {
+        className: "fcr-control-bar-annotation-menu",
+        allowAnnotationWriteState: isWriteAllowed,
+        hasAnnotationAllowWritePermission: haPermissionAllowWrite,
+        setAllowAnnotationWrite: onAllowWriteClick,
+        onCleanAnnotationClick: onCleanAnnotationClick
+      }),
+      onVisibleChange: function onVisibleChange(visible) {
+        setVisible(visible);
+      },
+      visible: visible
+    },
+    onTooltipButtonClick: onAnnotationButtonClick
+  });
+};

package/lib/modules/control-bar/components/apps-popover/index.css

@@ -0,0 +1,3 @@
+.share-action-nav__apps-popover {
+  max-width: 374px;
+}

package/lib/modules/control-bar/components/apps-popover/index.d.ts

@@ -1,3 +1,4 @@
+import './index.css';
 export declare const AppsPopover: (props: {
     children: React.ReactNode;
 }) => import("react/jsx-runtime").JSX.Element;

package/lib/modules/control-bar/components/apps-popover/index.js

@@ -10,6 +10,7 @@ var _appList = require("../../../components/apps/app-list");
 var _store = require("../../store");
 var _react = require("react");
 var _mobxReact = require("mobx-react");
+require("./index.css");
 var _jsxRuntime = require("react/jsx-runtime");
 var AppsPopover = exports.AppsPopover = (0, _mobxReact.observer)(function (props) {
   var _useContext = (0, _react.useContext)(_store.StoreContext),
@@ -18,6 +19,7 @@ var AppsPopover = exports.AppsPopover = (0, _mobxReact.observer)(function (props
     setAppActionbarPopoverVisible = _useContext.setAppActionbarPopoverVisible;
   var children = props.children;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_popover.FcrPopover, {
+    overlayClassName: "share-action-nav__apps-popover",
     trigger: "click",
     showArrow: false,
     content: /*#__PURE__*/(0, _jsxRuntime.jsx)(_appList.AppList, {

package/lib/modules/control-bar/components/carmera/index.js

@@ -36,7 +36,7 @@ var CameraControl = exports.CameraControl = (0, _mobxReact.observer)(function ()
     iconSecondary: 'var(--fcr_ui_scene_ramp_red6)'
   };
   var icon = cameraEnabled ? _type.FcrIconType.FCR_CAMERA : _type.FcrIconType.FCR_CAMERAOFF;
-  var title = cameraEnabled ? transI18n('fmt_device_label_video_start') : transI18n('fmt_device_label_video_stop');
+  var title = cameraEnabled ? transI18n('fmt_device_label_video_stop') : transI18n('fmt_device_label_video_start');
   var noCam = cameraList.length === 0;
   var noCamColor = {
     iconPrimary: "var(--fcr_web_ui_scene_mainicon1)",

package/lib/modules/control-bar/components/meeting-details/index.js

@@ -14,14 +14,15 @@ var _button = require("agora-ui-foundation/lib/components/button");
 var _icon = require("agora-ui-foundation/lib/components/icon");
 var _type = require("agora-ui-foundation/lib/components/icon/type");
 var _i18n = require("agora-ui-foundation/lib/i18n");
-var _tools = require("../../../../utilities/tools");
+var _tools = require("agora-foundation/lib/utilities/tools");
 var _mobxReact = require("mobx-react");
 var _react = require("react");
 require("./index.css");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _store = require("../../store");
 var _enums = require("../../enums");
-var _browserApi = require("../../../../utilities/browser-api");
+var _copyText = require("agora-ui-foundation/lib/utilities/copy-text");
+var _type2 = require("../../../../modules/toast-manager/type");
 var _jsxRuntime = require("react/jsx-runtime");
 var MeetingDetails = exports.MeetingDetails = (0, _mobxReact.observer)(function () {
   var t = (0, _i18n.useI18n)();
@@ -57,41 +58,35 @@ var MeetingDetails = exports.MeetingDetails = (0, _mobxReact.observer)(function
   function handleCopyMeetingId(copyContent) {
     if (!copyContent) return;
     var content = meetingId ? copyContent : copyContent.replace(/\s+/g, '');
-    (0, _browserApi.copyText)(content).then(function () {
+    (0, _copyText.copyText)(content).then(function () {
       showToast({
-        type: 'info',
-        content: t('fmt_statusbar_status_coppied')
+        key: _type2.FcrUIToastKey.FMT_STATUSBAR_STATUS_COPPIED
       });
     })["catch"](function () {
       showToast({
-        type: 'warn',
-        content: t('fmt_information_tips_numbercopyfailed')
+        key: _type2.FcrUIToastKey.FMT_INFORMATION_TIPS_NUMBERCOPYFAILED
       });
     });
   }
   function handlerCopyMeetingShareLink(shareLink) {
-    (0, _browserApi.copyText)(shareLink).then(function () {
+    (0, _copyText.copyText)(shareLink).then(function () {
       showToast({
-        type: 'info',
-        content: t('fmt_additional_tips_invitation')
+        key: _type2.FcrUIToastKey.FMT_ADDITIONAL_TIPS_INVITATION
       });
     })["catch"](function () {
       showToast({
-        type: 'warn',
-        content: t('fmt_additional_tips_invitationfailed')
+        key: _type2.FcrUIToastKey.FMT_ADDITIONAL_TIPS_INVITATIONFAILED
       });
     });
   }
   function handleCopyMeetingPassword(password) {
-    (0, _browserApi.copyText)(password).then(function () {
+    (0, _copyText.copyText)(password).then(function () {
       showToast({
-        type: 'info',
-        content: t('fmt_uimanager_tips_passwordcopied')
+        key: _type2.FcrUIToastKey.FMT_UIMANAGER_TIPS_PASSWORDCOPIED
       });
     })["catch"](function () {
       showToast({
-        type: 'warn',
-        content: t('fmt_settings_tips_passwordcopyfailed')
+        key: _type2.FcrUIToastKey.FMT_SETTINGS_TIPS_PASSWORDCOPYFAILED
       });
     });
   }
@@ -107,7 +102,7 @@ var MeetingDetails = exports.MeetingDetails = (0, _mobxReact.observer)(function
       copyIcon: _type.FcrIconType.FCR_RESET,
       copyText: t('fmt_meeting_call_voice_call_button_copy_info')
     });
-    (0, _browserApi.copyText)(roomDetailCopyText).then(function () {
+    (0, _copyText.copyText)(roomDetailCopyText).then(function () {
       copyTimer = setTimeout(function () {
         setCopyInfoState({
           copyState: _enums.CopyState.COPIED,
@@ -117,8 +112,7 @@ var MeetingDetails = exports.MeetingDetails = (0, _mobxReact.observer)(function
       }, 1500);
     })["catch"](function () {
       showToast({
-        type: 'warn',
-        content: t('fmt_sharing_tips_copyfull_failed')
+        key: _type2.FcrUIToastKey.FMT_SHARING_TIPS_COPYFULL_FAILED
       });
     });
   }

package/lib/modules/control-bar/components/microphone/index.js

@@ -73,10 +73,10 @@ var MicrophoneControl = exports.MicrophoneControl = (0, _mobxReact.observer)(fun
   var transI18n = (0, _i18n.useI18n)();
   var microphoneStateMapToTitle = (0, _react.useMemo)(function () {
     if (microphoneState === _type2.FcrUIMicrophoneState.UNMUTE) {
-      return transI18n('fmt_device_label_audio_unmute');
+      return transI18n('fmt_device_label_audio_mute');
     }
     if (microphoneState === _type2.FcrUIMicrophoneState.MUTE) {
-      return transI18n('fmt_device_label_audio_mute');
+      return transI18n('fmt_device_label_audio_unmute');
     } else {
       return transI18n('fmt_audio_popup_button_turning_on');
     }

package/lib/modules/control-bar/hooks.js

@@ -132,7 +132,7 @@ var usePopoverWatcher = exports.usePopoverWatcher = function usePopoverWatcher(c
               return;
             }
           } else {
-            popoverElementId = "".concat(popoverClassName, "-").concat(Date.now(), "-").concat(countNum++, "}");
+            popoverElementId = "".concat(popoverClassName, "-").concat(Date.now(), "-").concat(countNum++);
             popover.setAttribute('data-popover-id', popoverElementId);
           }
           popoverObservers.set(popoverElementId, handlePositionChange(popover, function (rect) {

package/lib/modules/control-bar/index.css

@@ -338,3 +338,14 @@
 .fcr-control-bar .fcr-tooltip {
   max-width: 300px;
 }
+
+.share-action-nav__security-popover {
+  max-width: 300px;
+}
+
+.security-menu.fcr-control-bar-annotation-menu {
+  box-shadow: none;
+  background-color: none;
+  border-radius: none;
+  border: none;
+}

package/lib/modules/control-bar/store.d.ts

@@ -3,6 +3,7 @@ import { FcrLiveStreamingState, FcrRecordingState, FcrRoomInfo } from 'fcr-core/
 import { ControlBarStoreArgs } from './type';
 import { FcrUIManagedObject } from '../../object-manager';
 import { FcrSecurityCheckedStateType } from '../../shared-data/security-data';
+import { FcrUIMessageShowToastbyKeyParams } from '../../providers/message/type';
 import { AudioProcessingChannel } from './components/share-audio';
 import { MoreAction } from './enums';
 export default class ControlBarStore implements FcrUIManagedObject {
@@ -23,12 +24,19 @@ export default class ControlBarStore implements FcrUIManagedObject {
     private _dialogProvider;
     private _facilityProvider;
     private _applistProvider;
+    private _annotationProvider;
     private _sharedMeetingTimeDataSource;
     private _sharedChatDataSource;
     private _sharedLayoutDataSource;
     private _controlBarWindow;
     private _screenShareObserver;
     private _mouseDetectObserver;
+    private _stateNavArea;
+    private _contentArea;
+    private _popoverArea;
+    private _subPopoverArea;
+    private _tertiaryPopoverArea;
+    private _quaternaryPopoverArea;
     accessor roomDuration: number;
     accessor startTime: number;
     accessor cloudRecordingState: FcrRecordingState;
@@ -47,7 +55,6 @@ export default class ControlBarStore implements FcrUIManagedObject {
     accessor meetingId: string;
     accessor localUserName: string;
     accessor titleHeight: number;
-    private _detectAreas;
     get isSharingWithAudio(): boolean;
     get isInSmoothMode(): boolean;
     get hasSecurityPermission(): boolean;
@@ -66,7 +73,9 @@ export default class ControlBarStore implements FcrUIManagedObject {
     get meetingTimeKey(): string;
     get roomId(): string;
     get checkedStateMap(): FcrSecurityCheckedStateType;
-    get annotationButtonVisible(): boolean;
+    get isWriteAnnotationAllowed(): boolean;
+    get hasPermissionAllowWriteAnnotation(): boolean;
+    get hasAnnotationStartPermission(): boolean;
     get liveStreamingButtonVisible(): boolean;
     get recordingButtonVisible(): boolean;
     get draggableArea(): FcrUI.FcrUIRectangle;
@@ -82,6 +91,9 @@ export default class ControlBarStore implements FcrUIManagedObject {
     showLockedRoomToast(enable: boolean): void;
     handleNewShare(): void;
     handlerStopShare(): void;
+    toggleAnnotation(): void;
+    allowWriteAnnotation(allow: boolean): void;
+    clearAnnotation(): void;
     handleMouseEnter(): void;
     handleMouseLeave(): void;
     openLiveStreamingDialog(): void;
@@ -92,20 +104,23 @@ export default class ControlBarStore implements FcrUIManagedObject {
     startCloudRecording(): void;
     startLiveStreaming(url: string): void;
     stopLiveStreaming(): void;
-    showToast(params: any): void;
+    showToast(params: FcrUIMessageShowToastbyKeyParams): void;
     handleOpenParticipant(): void;
     handleOpenLiveStreaming(): void;
     setEnableWaitingRoom(enable: boolean): void;
     getLocalMeetingTime(): string | null;
     release(): void;
-    setArea(id: string, area: FcrUI.FcrUIRectangle): void;
-    removeArea(id: string): void;
     setStateNavArea(area: FcrUI.FcrUIRectangle): void;
     setControlBarContentArea(area: FcrUI.FcrUIRectangle): void;
+    setPopoverArea(id: string, area: FcrUI.FcrUIRectangle): void;
+    resetPopoverArea(id: string): void;
     handleLeaveRoom(): void;
     closeLeaveMeetingDialog(): void;
     handleMoreClick(actionKey: MoreAction): void;
     updateWindowBounds(bounds: FcrUI.FcrUIRectangle): void;
     setAppActionbarPopoverVisible(visible: boolean): void;
+    private _updateDetectAreas;
+    private _checkPopoverAreaExist;
+    private _checkPopoverAreaEqual;
 }
 export declare const StoreContext: import("react").Context<ControlBarStore>;