fcr-ui-scene 3.7.9-alpha → 3.8.0-alpha

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

@@ -72,7 +72,7 @@ var _controlBar = require("../dialog/dialogs/control-bar");
 var _platform = require("../../utilities/platform");
 var _struct = require("../../providers/mouse-detect/struct");
 var _ControlBarStore;
-var _initProto, _init_roomDuration, _init_startTime, _init_cloudRecordingState, _init_playUrl, _init_liveStreamingState, _init_allApplicationWindows, _init_boardOwnerUser, _init_currentShareDisplayId, _init_position, _setCheckedStateMapDecs, _showLockedRoomToastDecs, _handleNewShareDecs, _handlerStopShareDecs, _pauseCloudRecordingDecs, _resumeCloudRecordingDecs, _stopCloudRecordingDecs, _showToastDecs, _handleLeaveRoomDecs, _closeLeaveMeetingDialogDecs, _handleMoreClickDecs, _ref;
+var _initProto, _init_roomDuration, _init_startTime, _init_cloudRecordingState, _init_playUrl, _init_liveStreamingState, _init_allApplicationWindows, _init_boardOwnerUser, _init_currentShareDisplayId, _init_position, _init_appActionbarPopoverVisible, _setCheckedStateMapDecs, _showLockedRoomToastDecs, _handleNewShareDecs, _handlerStopShareDecs, _pauseCloudRecordingDecs, _resumeCloudRecordingDecs, _stopCloudRecordingDecs, _showToastDecs, _handleLeaveRoomDecs, _closeLeaveMeetingDialogDecs, _handleMoreClickDecs, _setAppActionbarPopoverVisibleDecs, _ref;
 function _classPrivateFieldInitSpec(e, t, a) { _checkPrivateRedeclaration(e, t), t.set(e, a); }
 function _checkPrivateRedeclaration(e, t) { if (t.has(e)) throw new TypeError("Cannot initialize the same private elements twice on an object"); }
 function _classPrivateFieldSet(s, a, r) { return s.set(_assertClassBrand(s, a), r), r; }
@@ -92,6 +92,7 @@ var _K = /*#__PURE__*/new WeakMap();
 var _L = /*#__PURE__*/new WeakMap();
 var _M = /*#__PURE__*/new WeakMap();
 var _N = /*#__PURE__*/new WeakMap();
+var _O = /*#__PURE__*/new WeakMap();
 var _A = /*#__PURE__*/new WeakMap();
 var _B = /*#__PURE__*/new WeakMap();
 var _C = /*#__PURE__*/new WeakMap();
@@ -103,7 +104,7 @@ _ref = (_setCheckedStateMapDecs = [_mobx.action, _mobx.action.bound], _showLocke
   leading: true
 })], _stopCloudRecordingDecs = [_decorator.bound, (0, _decorator.debounced)(500, {
   leading: true
-})], _showToastDecs = [_mobx.action, _mobx.action.bound], _handleLeaveRoomDecs = [_mobx.action, _mobx.action.bound], _closeLeaveMeetingDialogDecs = [_mobx.action, _mobx.action.bound], _handleMoreClickDecs = [_mobx.action, _mobx.action.bound], "logger");
+})], _showToastDecs = [_mobx.action, _mobx.action.bound], _handleLeaveRoomDecs = [_mobx.action, _mobx.action.bound], _closeLeaveMeetingDialogDecs = [_mobx.action, _mobx.action.bound], _handleMoreClickDecs = [_mobx.action, _mobx.action.bound], _setAppActionbarPopoverVisibleDecs = [_mobx.action, _mobx.action.bound], "logger");
 var ControlBarStore = exports["default"] = /*#__PURE__*/function () {
   function ControlBarStore(_ref2) {
     var _this = this,
@@ -120,17 +121,18 @@ var ControlBarStore = exports["default"] = /*#__PURE__*/function () {
     (0, _defineProperty2["default"])(this, "_disposers", []);
     (0, _defineProperty2["default"])(this, "_screenShareObserver", {
       onPrepreScreenCapture: function onPrepreScreenCapture() {
-        var display = _this._renderer.getDisplayNearestPoint(_this.draggableArea);
+        var display = _this._renderer.getDisplayNearestPoint(_this._screenShareProvider.sharingDisplayBounds);
         var y = display.bounds.y,
           workAreaY = display.workArea.y;
         var topOffset = workAreaY - y;
         _this.titleHeight = (0, _platform.isWindows)() ? 0 : topOffset !== null && topOffset !== void 0 ? topOffset : 0;
         (0, _mobx.runInAction)(function () {
-          _this.currentShareDisplayId = _this._renderer.getDisplayNearestPoint(_this.draggableArea).id;
-          _this._mouseDetectProvider.setDisplayId(_this.currentShareDisplayId);
+          _this.currentShareDisplayId = display.id;
         });
+        _this._mouseDetectProvider.setDisplayId(_this.currentShareDisplayId);
         _this._mouseDetectProvider.setDetectionPositionOffset(display.bounds);
-        _this.updateWindowBounds();
+        var sharingDisplayBounds = _this._screenShareProvider.sharingDisplayBounds;
+        _this.updateWindowBounds(sharingDisplayBounds);
       },
       onShareSourceReplaced: function onShareSourceReplaced() {
         var display = _this._renderer.getDisplayNearestPoint(_this.draggableArea);
@@ -146,6 +148,20 @@ var ControlBarStore = exports["default"] = /*#__PURE__*/function () {
       },
       onScreenShareStopped: function onScreenShareStopped() {
         _this._mouseDetectProvider.deleteDetectArea(_struct.FcrUIDetectAreaID.ControlBar);
+      },
+      onSelectionBoundsChanged: function onSelectionBoundsChanged() {
+        var display = _this._renderer.getDisplayNearestPoint(_this._screenShareProvider.sharingDisplayBounds);
+        var y = display.bounds.y,
+          workAreaY = display.workArea.y;
+        var topOffset = workAreaY - y;
+        _this.titleHeight = (0, _platform.isWindows)() ? 0 : topOffset !== null && topOffset !== void 0 ? topOffset : 0;
+        (0, _mobx.runInAction)(function () {
+          _this.currentShareDisplayId = display.id;
+        });
+        _this._mouseDetectProvider.setDisplayId(_this.currentShareDisplayId);
+        _this._mouseDetectProvider.setDetectionPositionOffset(display.bounds);
+        var sharingDisplayBounds = _this._screenShareProvider.sharingDisplayBounds;
+        _this.updateWindowBounds(sharingDisplayBounds);
       }
     });
     (0, _defineProperty2["default"])(this, "_mouseDetectObserver", {
@@ -192,12 +208,14 @@ var ControlBarStore = exports["default"] = /*#__PURE__*/function () {
       x: 0,
       y: 0
     }));
+    _classPrivateFieldInitSpec(this, _O, _init_appActionbarPopoverVisible(this, false));
     _classPrivateFieldInitSpec(this, _A, void 0);
     _classPrivateFieldInitSpec(this, _B, void 0);
     _classPrivateFieldInitSpec(this, _C, '');
     _classPrivateFieldInitSpec(this, _D, '');
     _classPrivateFieldInitSpec(this, _E, 0);
     this._privilegeProvider = objectManager.getObject(_objectManager.FcrUIObjectKeys.P_PRIVILEGE_PROVIDER);
+    this._applistProvider = objectManager.getObject(_objectManager.FcrUIObjectKeys.P_APPLIST_PROVIDER);
     this._facilityProvider = objectManager.getObject(_objectManager.FcrUIObjectKeys.P_FACILITY_PROVIDER);
     this._sharedChatDataSource = objectManager.getObject(_objectManager.FcrUIObjectKeys.S_SHARED_CHAT_DATA_SOURCE);
     this._mainRoomControl = objectManager.getObject(_objectManager.FcrUIObjectKeys.P_MAIN_ROOM_CONTROL_PROVIDER).mainRoomControl;
@@ -322,6 +340,14 @@ var ControlBarStore = exports["default"] = /*#__PURE__*/function () {
     set: function set(v) {
       _classPrivateFieldSet(_N, this, v);
     }
+  }, {
+    key: "appActionbarPopoverVisible",
+    get: function get() {
+      return _classPrivateFieldGet(_O, this);
+    },
+    set: function set(v) {
+      _classPrivateFieldSet(_O, this, v);
+    }
   }, {
     key: "roomInfo",
     get: function get() {
@@ -375,7 +401,7 @@ var ControlBarStore = exports["default"] = /*#__PURE__*/function () {
   }, {
     key: "hasSecurityPermission",
     get: function get() {
-      return this._privilegeProvider.hasSecurityPermission;
+      return this._privilegeProvider.hasSecurityPermission();
     }
   }, {
     key: "hasEndRoomPermission",
@@ -432,6 +458,11 @@ var ControlBarStore = exports["default"] = /*#__PURE__*/function () {
     get: function get() {
       return this._abilityProvider.isRoomDetailSupported();
     }
+  }, {
+    key: "isRecordingSupported",
+    get: function get() {
+      return this._abilityProvider.isRecordingSupported();
+    }
   }, {
     key: "meetingTimeKey",
     get: function get() {
@@ -488,6 +519,11 @@ var ControlBarStore = exports["default"] = /*#__PURE__*/function () {
       var _this$_sharedChatData;
       return (_this$_sharedChatData = this._sharedChatDataSource.newMessageCount[_type2.FcrUIRoomType.MAIN_ROOM]) !== null && _this$_sharedChatData !== void 0 ? _this$_sharedChatData : 0;
     }
+  }, {
+    key: "appItemOptions",
+    get: function get() {
+      return this._applistProvider.appItemOptions;
+    }
   }, {
     key: "setCheckedStateMap",
     value: function setCheckedStateMap(val) {
@@ -708,20 +744,27 @@ var ControlBarStore = exports["default"] = /*#__PURE__*/function () {
             });
           });
           break;
+        case _enums.MoreAction.OPEN_APPS:
+          this.setAppActionbarPopoverVisible(true);
+          break;
         default:
           break;
       }
     }
   }, {
     key: "updateWindowBounds",
-    value: function updateWindowBounds() {
-      var sharingDisplayBounds = this._screenShareProvider.sharingDisplayBounds;
-      this._controlBarWindow.setBounds(sharingDisplayBounds);
+    value: function updateWindowBounds(bounds) {
+      this._controlBarWindow.setBounds(bounds);
+    }
+  }, {
+    key: "setAppActionbarPopoverVisible",
+    value: function setAppActionbarPopoverVisible(visible) {
+      this.appActionbarPopoverVisible = visible;
     }
   }]);
 }();
 _ControlBarStore = ControlBarStore;
-var _applyDecs$e = (0, _slicedToArray2["default"])(_applyDecs(_ControlBarStore, [[_mobx.observable, 1, "roomDuration"], [_mobx.observable, 1, "startTime"], [_mobx.observable, 1, "cloudRecordingState"], [_mobx.observable, 1, "playUrl"], [_mobx.observable, 1, "liveStreamingState"], [_mobx.observable, 1, "allApplicationWindows"], [_mobx.observable, 1, "boardOwnerUser"], [_mobx.observable, 1, "currentShareDisplayId"], [_mobx.observable, 1, "position"], [_mobx.computed, 3, "hasEndRoomPermission"], [_mobx.computed, 3, "hasGetLiveStreamingUrlPermission"], [_mobx.computed, 3, "hasStartCloudRecordingPermission"], [_mobx.computed, 3, "hasStartLiveStreamingPermission"], [_mobx.computed, 3, "hasChatPermission"], [_mobx.computed, 3, "liveStreamingButtonVisible"], [_mobx.computed, 3, "recordingButtonVisible"], [_mobx.computed, 3, "isConnecting"], [_setCheckedStateMapDecs, 18, "setCheckedStateMap"], [_decorator.bound, 2, "setShareWithAudioState"], [_decorator.bound, 2, "setShareInSmoothMode"], [_showLockedRoomToastDecs, 18, "showLockedRoomToast"], [_handleNewShareDecs, 18, "handleNewShare"], [_handlerStopShareDecs, 18, "handlerStopShare"], [_decorator.bound, 2, "handleMouseEnter"], [_decorator.bound, 2, "handleMouseLeave"], [_decorator.bound, 2, "openLiveStreamingDialog"], [_decorator.bound, 2, "setShareAudioMode"], [_pauseCloudRecordingDecs, 2, "pauseCloudRecording"], [_resumeCloudRecordingDecs, 2, "resumeCloudRecording"], [_stopCloudRecordingDecs, 2, "stopCloudRecording"], [_decorator.bound, 2, "startCloudRecording"], [_decorator.bound, 2, "startLiveStreaming"], [_decorator.bound, 2, "stopLiveStreaming"], [_showToastDecs, 18, "showToast"], [_decorator.bound, 2, "handleOpenParticipant"], [_decorator.bound, 2, "handleOpenLiveStreaming"], [_decorator.bound, 2, "setEnableWaitingRoom"], [_decorator.bound, 2, "getLocalMeetingTime"], [[_decorator.bound, _decorator.trace], 2, "setStateNavArea"], [[_decorator.bound, _decorator.trace], 2, "setControlBarContentArea"], [[_decorator.bound, _decorator.trace], 2, "setPopoverArea"], [_handleLeaveRoomDecs, 18, "handleLeaveRoom"], [_closeLeaveMeetingDialogDecs, 18, "closeLeaveMeetingDialog"], [_handleMoreClickDecs, 18, "handleMoreClick"], [[_decorator.trace, _decorator.bound], 2, "updateWindowBounds"]], []).e, 10);
+var _applyDecs$e = (0, _slicedToArray2["default"])(_applyDecs(_ControlBarStore, [[_mobx.observable, 1, "roomDuration"], [_mobx.observable, 1, "startTime"], [_mobx.observable, 1, "cloudRecordingState"], [_mobx.observable, 1, "playUrl"], [_mobx.observable, 1, "liveStreamingState"], [_mobx.observable, 1, "allApplicationWindows"], [_mobx.observable, 1, "boardOwnerUser"], [_mobx.observable, 1, "currentShareDisplayId"], [_mobx.observable, 1, "position"], [_mobx.observable, 1, "appActionbarPopoverVisible"], [_mobx.computed, 3, "hasEndRoomPermission"], [_mobx.computed, 3, "hasGetLiveStreamingUrlPermission"], [_mobx.computed, 3, "hasStartCloudRecordingPermission"], [_mobx.computed, 3, "hasStartLiveStreamingPermission"], [_mobx.computed, 3, "hasChatPermission"], [_mobx.computed, 3, "liveStreamingButtonVisible"], [_mobx.computed, 3, "recordingButtonVisible"], [_mobx.computed, 3, "isConnecting"], [_setCheckedStateMapDecs, 18, "setCheckedStateMap"], [_decorator.bound, 2, "setShareWithAudioState"], [_decorator.bound, 2, "setShareInSmoothMode"], [_showLockedRoomToastDecs, 18, "showLockedRoomToast"], [_handleNewShareDecs, 18, "handleNewShare"], [_handlerStopShareDecs, 18, "handlerStopShare"], [_decorator.bound, 2, "handleMouseEnter"], [_decorator.bound, 2, "handleMouseLeave"], [_decorator.bound, 2, "openLiveStreamingDialog"], [_decorator.bound, 2, "setShareAudioMode"], [_pauseCloudRecordingDecs, 2, "pauseCloudRecording"], [_resumeCloudRecordingDecs, 2, "resumeCloudRecording"], [_stopCloudRecordingDecs, 2, "stopCloudRecording"], [_decorator.bound, 2, "startCloudRecording"], [_decorator.bound, 2, "startLiveStreaming"], [_decorator.bound, 2, "stopLiveStreaming"], [_showToastDecs, 18, "showToast"], [_decorator.bound, 2, "handleOpenParticipant"], [_decorator.bound, 2, "handleOpenLiveStreaming"], [_decorator.bound, 2, "setEnableWaitingRoom"], [_decorator.bound, 2, "getLocalMeetingTime"], [[_decorator.bound, _decorator.trace], 2, "setStateNavArea"], [[_decorator.bound, _decorator.trace], 2, "setControlBarContentArea"], [[_decorator.bound, _decorator.trace], 2, "setPopoverArea"], [_handleLeaveRoomDecs, 18, "handleLeaveRoom"], [_closeLeaveMeetingDialogDecs, 18, "closeLeaveMeetingDialog"], [_handleMoreClickDecs, 18, "handleMoreClick"], [[_decorator.trace, _decorator.bound], 2, "updateWindowBounds"], [_setAppActionbarPopoverVisibleDecs, 18, "setAppActionbarPopoverVisible"]], []).e, 11);
 _init_roomDuration = _applyDecs$e[0];
 _init_startTime = _applyDecs$e[1];
 _init_cloudRecordingState = _applyDecs$e[2];
@@ -731,5 +774,6 @@ _init_allApplicationWindows = _applyDecs$e[5];
 _init_boardOwnerUser = _applyDecs$e[6];
 _init_currentShareDisplayId = _applyDecs$e[7];
 _init_position = _applyDecs$e[8];
-_initProto = _applyDecs$e[9];
+_init_appActionbarPopoverVisible = _applyDecs$e[9];
+_initProto = _applyDecs$e[10];
 var StoreContext = exports.StoreContext = /*#__PURE__*/(0, _react.createContext)(null);

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

@@ -56,6 +56,7 @@ var _schedule = require("agora-foundation/lib/schedule");
 var _microphone = require("./components/microphone");
 var _carmera = require("./components/carmera");
 var _boundaryDetector = require("./components/boundary-detector");
+var _appsPopover = require("./components/apps-popover");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 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; }
@@ -329,7 +330,7 @@ var ControlBar = (0, _mobxReact.observer)(function () {
   (0, _react.useLayoutEffect)(function () {
     if (visibility === 'hidden') {
       var timerId = setTimeout(function () {
-        updateWindowBounds();
+        updateWindowBounds(draggableArea);
         timerId = setTimeout(function () {
           if (!containerRef.current) return;
           var bounds = containerRef.current.getBoundingClientRect();
@@ -547,7 +548,8 @@ var MoreActionsSection = (0, _mobxReact.observer)(function () {
   var _useContext12 = (0, _react.useContext)(_store.StoreContext),
     newMessageCount = _useContext12.newMessageCount,
     hasChatPermission = _useContext12.hasChatPermission,
-    setPopoverArea = _useContext12.setPopoverArea;
+    setPopoverArea = _useContext12.setPopoverArea,
+    setAppActionbarPopoverVisible = _useContext12.setAppActionbarPopoverVisible;
   var _useContext13 = (0, _react.useContext)(_context.ControlBarCalculationContext),
     isShareActionNavHidden = _useContext13.isShareActionNavHidden;
   (0, _react.useEffect)(function () {
@@ -569,6 +571,7 @@ var MoreActionsSection = (0, _mobxReact.observer)(function () {
   }, []);
   var preventDefault = (0, _react.useCallback)(function (e) {
     e.stopPropagation();
+    setAppActionbarPopoverVisible(false);
   }, []);
   var handleBoundariesChanged = (0, _react.useCallback)(function (boundaries) {
     console.log('More boundaries changed');
@@ -592,15 +595,17 @@ var MoreActionsSection = (0, _mobxReact.observer)(function () {
     count: newMessageCount,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       onClick: preventDefault,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_more.More, {
-        visible: moreVisible,
-        onButtonClick: handleMoreButtonClick,
-        onVisibleChange: handlerVisibleChange,
-        morePopoverContent: isShowMeetingDetailPortal ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_meetingDetails.MeetingDetails, {}) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_boundaryDetector.BoundaryDetector, {
-          onBoundariesChanged: handleBoundariesChanged,
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_moreActions.MorePopoverContent, {
-            closePopover: handlePopoverClose,
-            hasChatPermission: hasChatPermission
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_appsPopover.AppsPopover, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_more.More, {
+          visible: moreVisible,
+          onButtonClick: handleMoreButtonClick,
+          onVisibleChange: handlerVisibleChange,
+          morePopoverContent: isShowMeetingDetailPortal ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_meetingDetails.MeetingDetails, {}) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_boundaryDetector.BoundaryDetector, {
+            onBoundariesChanged: handleBoundariesChanged,
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_moreActions.MorePopoverContent, {
+              closePopover: handlePopoverClose,
+              hasChatPermission: hasChatPermission
+            })
           })
         })
       })

package/lib/modules/dialog/components/dialog-container/component/body.d.ts

@@ -1,5 +1,6 @@
 import { FC, PropsWithChildren } from 'react';
 import '../index.css';
+import { FcrUIDialogKey } from '../../../../../utilities/constant';
 type DialogBodyProps = PropsWithChildren<{
     title: string | React.ReactNode;
     actions: React.ReactNode;
@@ -7,6 +8,13 @@ type DialogBodyProps = PropsWithChildren<{
     closable: boolean;
     onClose?: () => void;
     hasSystemShadow?: boolean;
+    showTopIcon?: boolean;
+    dialogKey: FcrUIDialogKey;
+    dialogId?: string;
 }>;
+export declare const TopButton: (props: {
+    dialogKey: FcrUIDialogKey;
+    dialogId?: string;
+}) => import("react/jsx-runtime").JSX.Element;
 export declare const DialogContainerBody: FC<DialogBodyProps>;
 export {};

package/lib/modules/dialog/components/dialog-container/component/body.js

@@ -1,13 +1,42 @@
 "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.DialogContainerBody = void 0;
+exports.TopButton = exports.DialogContainerBody = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = require("react");
 require("../index.css");
 var _env = require("agora-foundation/lib/utilities/env");
+var _store = require("../../../store.base");
+var _iconButton = require("agora-ui-foundation/lib/components/icon-button");
+var _type = require("agora-ui-foundation/lib/components/icon/type");
+var _classnames = _interopRequireDefault(require("classnames"));
 var _jsxRuntime = require("react/jsx-runtime");
+var TopButton = exports.TopButton = function TopButton(props) {
+  var dialogKey = props.dialogKey,
+    dialogId = props.dialogId;
+  var _useContext = (0, _react.useContext)(_store.StoreContext),
+    getDialogWindow = _useContext.getDialogWindow;
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    isAlwaysOnTop = _useState2[0],
+    setIsAlwaysOnTop = _useState2[1];
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_iconButton.FcrIconButton, {
+    onClick: function onClick() {
+      var browserWindow = getDialogWindow(dialogKey);
+      browserWindow.setAlwaysOnTop(!isAlwaysOnTop, 'screen-saver');
+      setIsAlwaysOnTop(!isAlwaysOnTop);
+    },
+    icon: isAlwaysOnTop ? _type.FcrIconType.FCR_UNTOP : _type.FcrIconType.FCR_TOP,
+    className: "frc-window-header__icon fcr-toggle-window-header__icon fcr-no-drag",
+    iconColors: {
+      iconPrimary: 'var(--fcr_ui_scene_icontext1)'
+    }
+  });
+};
 var DialogContainerBody = exports.DialogContainerBody = function DialogContainerBody(_ref) {
   var actions = _ref.actions,
     title = _ref.title,
@@ -15,7 +44,12 @@ var DialogContainerBody = exports.DialogContainerBody = function DialogContainer
     onClose = _ref.onClose,
     autoHeight = _ref.autoHeight,
     closable = _ref.closable,
-    hasSystemShadow = _ref.hasSystemShadow;
+    hasSystemShadow = _ref.hasSystemShadow,
+    _ref$showTopIcon = _ref.showTopIcon,
+    showTopIcon = _ref$showTopIcon === void 0 ? false : _ref$showTopIcon,
+    dialogKey = _ref.dialogKey,
+    _ref$dialogId = _ref.dialogId,
+    dialogId = _ref$dialogId === void 0 ? '' : _ref$dialogId;
   // const { bind } = useContext(DialogContainerStore);
 
   // const { resizable } = isElectron() ? useContext(DialogInstanceContext) : { resizable: false };
@@ -39,7 +73,9 @@ var DialogContainerBody = exports.DialogContainerBody = function DialogContainer
   } : {};
   var hasClose = closable;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-    className: "fcr-dialog-container ".concat(!hasSystemShadow && 'fcr-dialog-container_shadow'),
+    className: (0, _classnames["default"])('fcr-dialog-container', {
+      'fcr-dialog-container_shadow': (0, _env.isElectron)() && hasSystemShadow ? false : true
+    }),
     onClick: function onClick(e) {
       return e.stopPropagation();
     },
@@ -53,9 +89,12 @@ var DialogContainerBody = exports.DialogContainerBody = function DialogContainer
         }
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)("h2", {
         children: title
-      }), actions && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      }), actions && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
         className: "fcr-dialog-container-actions",
-        children: actions
+        children: [actions, showTopIcon && (0, _env.isElectron)() && /*#__PURE__*/(0, _jsxRuntime.jsx)(TopButton, {
+          dialogKey: dialogKey,
+          dialogId: dialogId
+        })]
       })]
     }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)("section", {
       className: "fcr-dialog-container-content",

package/lib/modules/dialog/components/dialog-container/index.css

@@ -64,7 +64,10 @@
   padding-right: 10px;
 }
 
-.fcr-dialog-container-content {
+.fcr-dialog-container-actions .frc-window-header__icon {
+  margin-left: 5px;
+}
+· .fcr-dialog-container-content {
   position: relative;
   border-bottom-left-radius: var(--fcr_cornerradius_xl);
   border-bottom-right-radius: var(--fcr_cornerradius_xl);

package/lib/modules/dialog/components/dialog-container/index.d.ts

@@ -12,6 +12,7 @@ type DialogContainerProps = PropsWithChildren<{
     dialogId?: string;
     closable?: boolean;
     autoHeight?: boolean;
+    showTopIcon?: boolean;
     style?: React.CSSProperties;
     maxWidth?: number;
     maxHeight?: number;

package/lib/modules/dialog/components/dialog-container/index.js

@@ -47,20 +47,26 @@ var DialogContainer = exports.DialogContainer = (0, _mobxReact.observer)(functio
     children = _ref.children,
     actions = _ref.actions,
     autoHeight = _ref.autoHeight,
+    showTopIcon = _ref.showTopIcon,
     closable = _ref.closable,
     style = _ref.style,
     maxWidth = _ref.maxWidth,
     maxHeight = _ref.maxHeight,
     minWidth = _ref.minWidth,
     minHeight = _ref.minHeight,
-    hasSystemShadow = _ref.hasSystemShadow;
+    hasSystemShadow = _ref.hasSystemShadow,
+    dialogKey = _ref.dialogKey,
+    dialogId = _ref.dialogId;
   var dialogBody = /*#__PURE__*/(0, _jsxRuntime.jsx)(_body.DialogContainerBody, {
     title: title,
     actions: actions,
     autoHeight: autoHeight !== null && autoHeight !== void 0 ? autoHeight : true,
     closable: closable !== null && closable !== void 0 ? closable : true,
+    showTopIcon: showTopIcon,
     onClose: _onClose,
     hasSystemShadow: hasSystemShadow,
+    dialogKey: dialogKey,
+    dialogId: dialogId,
     children: children
   });
   if ((0, _env.isElectron)()) return dialogBody;

package/lib/modules/dialog/components/normal-window/index.d.ts

@@ -18,6 +18,7 @@ type FcrUIDialogProps = {
     maxWidth?: number;
     maxHeight?: number;
     hasSystemShadow?: boolean;
+    showTopIcon?: boolean;
 };
 export declare const NormalWindow: FC<FcrUIDialogProps>;
 export {};

package/lib/modules/dialog/components/normal-window/index.js

@@ -27,7 +27,8 @@ var NormalWindow = exports.NormalWindow = (0, _mobxReact.observer)(function (_re
     minHeight = _ref.minHeight,
     maxWidth = _ref.maxWidth,
     maxHeight = _ref.maxHeight,
-    hasSystemShadow = _ref.hasSystemShadow;
+    hasSystemShadow = _ref.hasSystemShadow,
+    showTopIcon = _ref.showTopIcon;
   var _useContext = (0, _react.useContext)(_store.StoreContext),
     getDialogRootNode = _useContext.getDialogRootNode,
     handleDialogClose = _useContext.handleDialogClose;
@@ -48,6 +49,7 @@ var NormalWindow = exports.NormalWindow = (0, _mobxReact.observer)(function (_re
     maxHeight: maxHeight,
     autoHeight: autoHeight,
     hasSystemShadow: hasSystemShadow,
+    showTopIcon: showTopIcon,
     children: body
   });
   if ((0, _env.isElectron)()) {

package/lib/modules/dialog/dialogs/caption/index.d.ts

@@ -0,0 +1,21 @@
+import type { FC, PropsWithChildren } from 'react';
+import { FcrUIDialogProps } from '../../type';
+type CaptionDialogProps = PropsWithChildren<FcrUIDialogProps>;
+export declare const windowConfig: {
+    title: string;
+    frame: false;
+    maximizable: false;
+    minimizable: false;
+    fullscreenable: false;
+    trafficLightPosition: {
+        x: number;
+        y: number;
+    };
+    resizable: false;
+    width: number;
+    height: number;
+    maxHeight: number;
+    alwaysOnTop: true;
+};
+export declare const CaptionDialog: FC<CaptionDialogProps>;
+export {};

package/lib/modules/dialog/dialogs/caption/index.js

@@ -0,0 +1,42 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.windowConfig = exports.CaptionDialog = void 0;
+var _normalWindow = require("../../components/normal-window");
+var _jsxRuntime = require("react/jsx-runtime");
+var title = 'Caption Translation';
+var windowConfig = exports.windowConfig = {
+  title: title,
+  frame: false,
+  maximizable: false,
+  minimizable: false,
+  fullscreenable: false,
+  trafficLightPosition: {
+    x: 0,
+    y: 0
+  },
+  resizable: false,
+  width: 750,
+  height: 92,
+  maxHeight: 132,
+  alwaysOnTop: true
+};
+var CaptionDialog = exports.CaptionDialog = function CaptionDialog(props) {
+  var dialogKey = props.dialogKey,
+    dialogId = props.dialogId,
+    children = props.children;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_normalWindow.NormalWindow, {
+    width: windowConfig.width,
+    height: windowConfig.height,
+    dialogKey: dialogKey,
+    dialogId: dialogId,
+    showTopIcon: false,
+    closable: false,
+    body: children,
+    maxHeight: windowConfig.maxHeight,
+    hasSystemShadow: true
+  });
+};

package/lib/modules/dialog/dialogs/chat/components/actions.js

@@ -31,9 +31,9 @@ var ChatActions = exports.ChatActions = (0, _mobxReact.observer)(function (_ref)
     mouseEnterDelay: 0,
     trigger: "hover",
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_iconButton.FcrIconButton, {
-      icon: _type.FcrIconType.FCR_WINDOWPAGE_BIGGER,
+      icon: _type.FcrIconType.FCR_TOGGLE_DIALOG,
       onClick: handleChatWindowAttach,
-      className: "frc-window-header__icon fcr-no-drag",
+      className: "frc-window-header__icon fcr-toggle-window-header__icon fcr-no-drag",
       iconColors: {
         iconPrimary: 'var(--fcr_ui_scene_icontext1)'
       }

package/lib/modules/dialog/dialogs/confirm/index.js

@@ -47,7 +47,7 @@ var ConfirmDialog = exports.ConfirmDialog = (0, _mobxReact.observer)(function (_
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(_confirm.ConfirmWindow, {
         id: confirm.id,
         confirm: confirm.params
-      }, index);
+      }, confirm.id);
     })
   });
   if ((0, _env.isElectron)()) {

package/lib/modules/dialog/dialogs/participant/components/actions.js

@@ -19,9 +19,9 @@ var ParticipantActions = exports.ParticipantActions = function ParticipantAction
     mouseEnterDelay: 0,
     trigger: "hover",
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_iconButton.FcrIconButton, {
-      icon: _type.FcrIconType.FCR_WINDOWPAGE_BIGGER,
+      icon: _type.FcrIconType.FCR_TOGGLE_DIALOG,
       onClick: handleMergeView,
-      className: "frc-window-header__icon fcr-no-drag",
+      className: "frc-window-header__icon fcr-toggle-window-header__icon fcr-no-drag",
       iconColors: {
         iconPrimary: 'var(--fcr_ui_scene_icontext1)'
       }

package/lib/modules/dialog/dialogs/subtitles-history/index.d.ts

@@ -0,0 +1,27 @@
+import type { FC, PropsWithChildren } from 'react';
+import { FcrUIDialogProps } from '../../type';
+type SubtitlesHistoryDialogProps = PropsWithChildren<FcrUIDialogProps> & {
+    header: React.ReactNode;
+    actions: React.ReactNode;
+};
+export declare const windowConfig: {
+    title: string;
+    frame: false;
+    maximizable: false;
+    minimizable: false;
+    fullscreenable: false;
+    trafficLightPosition: {
+        x: number;
+        y: number;
+    };
+    resizable: true;
+    width: number;
+    height: number;
+    minWidth: number;
+    minHeight: number;
+    maxWidth: number;
+    maxHeight: number;
+    alwaysOnTop: false;
+};
+export declare const SubtitlesHistoryDialog: FC<SubtitlesHistoryDialogProps>;
+export {};

package/lib/modules/dialog/dialogs/subtitles-history/index.js

@@ -0,0 +1,51 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.windowConfig = exports.SubtitlesHistoryDialog = void 0;
+var _normalWindow = require("../../components/normal-window");
+var _jsxRuntime = require("react/jsx-runtime");
+var title = 'Subtitles History';
+var windowConfig = exports.windowConfig = {
+  title: title,
+  frame: false,
+  maximizable: false,
+  minimizable: false,
+  fullscreenable: false,
+  trafficLightPosition: {
+    x: 0,
+    y: 0
+  },
+  resizable: true,
+  width: 500,
+  height: 460,
+  minWidth: 320,
+  minHeight: 400,
+  maxWidth: 620,
+  maxHeight: 900,
+  alwaysOnTop: false
+};
+var SubtitlesHistoryDialog = exports.SubtitlesHistoryDialog = function SubtitlesHistoryDialog(props) {
+  var dialogKey = props.dialogKey,
+    dialogId = props.dialogId,
+    header = props.header,
+    actions = props.actions,
+    children = props.children;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_normalWindow.NormalWindow, {
+    width: windowConfig.width,
+    height: windowConfig.height,
+    dialogKey: dialogKey,
+    dialogId: dialogId,
+    header: header,
+    actions: actions,
+    body: children,
+    minWidth: windowConfig.minWidth,
+    minHeight: windowConfig.minHeight,
+    maxWidth: windowConfig.maxWidth,
+    maxHeight: windowConfig.maxHeight,
+    hasSystemShadow: true,
+    showTopIcon: true
+  });
+};

package/lib/modules/dialog/store.base.d.ts

@@ -29,7 +29,7 @@ export declare abstract class DialogStoreBase implements FcrUIManagedObject {
     release(): void;
     abstract getDialogRootNode(dialogKey: FcrUIDialogKey, dialogId: string): HTMLElement;
     abstract getDialogRendererWindow(dialogKey: FcrUIDialogKey, dialogId: string): HTMLElement;
-    abstract getDialogWindow(dialogKey: FcrUIDialogKey, dialogId: string): FcrUIWindow;
+    abstract getDialogWindow(dialogKey: FcrUIDialogKey, dialogId?: string): FcrUIWindow;
     abstract handleConfirmMouseover(): void;
     abstract handleConfirmMouseout(): void;
     abstract removeObserverWindow(id: string): void;

package/lib/modules/dialog/store.browser.d.ts

@@ -4,7 +4,7 @@ import { FcrUIWindow } from '../../providers/window/type';
 export default class DialogStore extends DialogStoreBase {
     getDialogRendererWindow(dialogKey: FcrUIDialogKey, dialogId: string): HTMLElement;
     getDialogRootNode(dialogKey: FcrUIDialogKey, dialogId: string): HTMLElement;
-    getDialogWindow(dialogKey: FcrUIDialogKey, dialogId: string): FcrUIWindow;
+    getDialogWindow(dialogKey: FcrUIDialogKey, dialogId?: string): FcrUIWindow;
     handleMouseover(): void;
     handleMouseout(): void;
     handleSceneMounted(): void;

package/lib/modules/dialog/store.electron.d.ts

@@ -8,9 +8,7 @@ export default class DialogStore extends DialogStoreBase {
     private _renderer;
     private _mouseDetectProvider;
     private _confirmWindow;
-    private _subWindow;
     private _mouseOverState;
-    private _subWindowObserver;
     private _confirmWindowObserver;
     private _detactObserver;
     protected _dialogInfoObserver: FcrUIDialogObserver;
@@ -19,7 +17,7 @@ export default class DialogStore extends DialogStoreBase {
     constructor(args: DialogStoreArgs);
     getDialogRootNode(dialogKey: FcrUIDialogKey, dialogId: string): HTMLElement;
     getDialogRendererWindow(dialogKey: FcrUIDialogKey, dialogId: string): HTMLElement;
-    getDialogWindow(dialogKey: FcrUIDialogKey, dialogId: string): FcrUIWindow;
+    getDialogWindow(dialogKey: FcrUIDialogKey, dialogId?: string): FcrUIWindow;
     handleConfirmMouseover(): void;
     handleConfirmMouseout(): void;
     handleSceneMounted(): void;