fcr-ui-scene 3.6.4-rc.1 → 3.7.0

package/lib/modules/dialog/{components/interpreter/electron.js → dialogs/interpreter/index.js}

@@ -1,14 +1,17 @@
 "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.InterpreterElectronDialog = void 0;
-var _constant = require("../../../../utilities/constant");
-var _useElectron = require("../../hooks/useElectron");
+exports["default"] = void 0;
 var _i18n = require("agora-ui-foundation/lib/i18n");
-var InterpreterElectronDialog = exports.InterpreterElectronDialog = function InterpreterElectronDialog(_ref) {
+require("./index.css");
+var _constant = require("../../../../utilities/constant");
+var _normalWindow = _interopRequireDefault(require("../../components/normal-window"));
+var _jsxRuntime = require("react/jsx-runtime");
+var InterpreterDialog = function InterpreterDialog(_ref) {
   var children = _ref.children;
   var transI18n = (0, _i18n.useI18n)();
   var config = {
@@ -25,13 +28,16 @@ var InterpreterElectronDialog = exports.InterpreterElectronDialog = function Int
     maxWidth: 1020,
     maxHeight: 900,
     title: transI18n('fmt_ai_transcriptions_setting_label_translator'),
-    resizable: true
+    resizable: true,
+    hasShadow: true
   };
-  (0, _useElectron.useElectronDialog)({
-    config: config,
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_normalWindow["default"], {
     dialogKey: _constant.FcrUIDialogKey.INTERPRETER,
-    children: children,
-    hasCustomShadow: false
+    config: config,
+    hooksConfig: {
+      hasCustomShadow: false
+    },
+    children: children
   });
-  return null;
-};
+};
+var _default = exports["default"] = InterpreterDialog;

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

@@ -0,0 +1,3 @@
+import { PropsWithChildren } from 'react';
+import '../../index.css';
+export declare const InviteDialog: ({ children }: PropsWithChildren<{}>) => import("react/jsx-runtime").JSX.Element;

package/lib/modules/dialog/{components → dialogs}/invite/index.js

@@ -6,15 +6,14 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.InviteDialog = void 0;
-var _env = require("agora-foundation/lib/utilities/env");
 var _constant = require("../../../../utilities/constant");
 var _useElectron = require("../../hooks/useElectron");
 require("../../index.css");
-var _dialogContainer = _interopRequireDefault(require("../dialog-container"));
-var _dialogs = require("../../dialogs");
 var _i18n = require("agora-ui-foundation/lib/i18n");
+var _normalWindow = _interopRequireDefault(require("../../components/normal-window"));
+var _store = require("../../store");
 var _jsxRuntime = require("react/jsx-runtime");
-var InviteElectronDialog = function InviteElectronDialog(_ref) {
+var InviteDialog = exports.InviteDialog = function InviteDialog(_ref) {
   var children = _ref.children;
   var transI18n = (0, _i18n.useI18n)();
   var config = {
@@ -22,25 +21,25 @@ var InviteElectronDialog = function InviteElectronDialog(_ref) {
     minimizable: false,
     fullscreenable: false,
     width: 400,
-    height: 400,
+    height: 600,
     trafficLightPosition: {
       x: 0,
       y: 0
     },
-    title: transI18n('fmt_participants_button_invite'),
     resizable: false
   };
-  (0, _useElectron.useElectronDialog)({
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_normalWindow["default"], {
+    title: false,
     dialogKey: _constant.FcrUIDialogKey.INVITE,
     config: config,
-    children: children,
+    autoHeight: true,
     onOpened: function onOpened(_ref2) {
       var _dialogWindows$get;
       var browserWindow = _ref2.browserWindow,
         nearDisplayBounds = _ref2.nearDisplayBounds;
       var _browserWindow$getBou = browserWindow.getBounds(),
         y = _browserWindow$getBou.y;
-      var _ref3 = ((_dialogWindows$get = _dialogs.dialogWindows.get(_constant.FcrUIDialogKey.PARTICIPANT)) === null || _dialogWindows$get === void 0 ? void 0 : _dialogWindows$get.getBounds()) || {
+      var _ref3 = ((_dialogWindows$get = _store.dialogWindows.get(_constant.FcrUIDialogKey.PARTICIPANT)) === null || _dialogWindows$get === void 0 ? void 0 : _dialogWindows$get.getBounds()) || {
           width: 0,
           x: 0
         },
@@ -53,22 +52,7 @@ var InviteElectronDialog = function InviteElectronDialog(_ref) {
         x: x,
         y: y
       });
-    }
-  });
-  return null;
-};
-var InviteDialog = exports.InviteDialog = function InviteDialog(_ref4) {
-  var children = _ref4.children;
-  var container = /*#__PURE__*/(0, _jsxRuntime.jsx)(_dialogContainer["default"], {
-    dialogKey: _constant.FcrUIDialogKey.INVITE,
-    width: 400,
-    height: 400,
+    },
     children: children
   });
-  if ((0, _env.isElectron)()) {
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(InviteElectronDialog, {
-      children: container
-    });
-  }
-  return container;
 };

package/lib/modules/dialog/dialogs/live-streaming/index.d.ts

@@ -0,0 +1,2 @@
+import { PropsWithChildren } from 'react';
+export declare const LiveStreamingDialog: ({ children }: PropsWithChildren<{}>) => import("react/jsx-runtime").JSX.Element;

package/lib/modules/dialog/{components → dialogs}/live-streaming/index.js

@@ -6,37 +6,12 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.LiveStreamingDialog = void 0;
-var _env = require("agora-foundation/lib/utilities/env");
 var _constant = require("../../../../utilities/constant");
-var _useElectron = require("../../hooks/useElectron");
-var _dialogContainer = _interopRequireDefault(require("../dialog-container"));
 var _i18n = require("agora-ui-foundation/lib/i18n");
+var _normalWindow = _interopRequireDefault(require("../../components/normal-window"));
 var _jsxRuntime = require("react/jsx-runtime");
 var LiveStreamingDialog = exports.LiveStreamingDialog = function LiveStreamingDialog(_ref) {
-  var children = _ref.children,
-    title = _ref.title;
-  var container = /*#__PURE__*/(0, _jsxRuntime.jsx)(_dialogContainer["default"], {
-    title: title,
-    dialogKey: _constant.FcrUIDialogKey.LIVE_STREAMING,
-    width: 440,
-    height: 434,
-    autoHeight: true,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      className: "fcr-livestreaming-dialog-content",
-      children: children
-    })
-  });
-  if ((0, _env.isElectron)()) {
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(LiveStreamingElectronDialog, {
-      title: title,
-      children: container
-    });
-  }
-  return container;
-};
-var LiveStreamingElectronDialog = function LiveStreamingElectronDialog(_ref2) {
-  var children = _ref2.children,
-    title = _ref2.title;
+  var children = _ref.children;
   var transI18n = (0, _i18n.useI18n)();
   var config = {
     fullscreen: false,
@@ -46,14 +21,16 @@ var LiveStreamingElectronDialog = function LiveStreamingElectronDialog(_ref2) {
     title: transI18n('fmt_actionbar__livestreaming_labels_live'),
     resizable: false
   };
-  (0, _useElectron.useElectronDialog)({
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_normalWindow["default"], {
+    title: transI18n('fmt_live_label_push_platform'),
     dialogKey: _constant.FcrUIDialogKey.LIVE_STREAMING,
     config: config,
-    onClose: function onClose(_ref3) {
-      var store = _ref3.store;
-      store.closeDialogByKey(_constant.FcrUIDialogKey.LIVE_STREAMING);
-    },
-    children: children
+    width: 440,
+    height: 434,
+    autoHeight: true,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "fcr-livestreaming-dialog-content",
+      children: children
+    })
   });
-  return null;
 };

package/lib/modules/dialog/dialogs/participant/components/actions.d.ts

@@ -0,0 +1 @@
+export declare const ParticipantActions: () => import("react/jsx-runtime").JSX.Element | null;

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

@@ -0,0 +1,32 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ParticipantActions = void 0;
+var _mobxReact = require("mobx-react");
+var _react = require("react");
+var _store = require("../../../store");
+var _tooltip = require("agora-ui-foundation/lib/components/tooltip");
+var _iconButton = require("agora-ui-foundation/lib/components/icon-button");
+var _type = require("agora-ui-foundation/lib/components/icon/type");
+var _i18n = require("agora-ui-foundation/lib/i18n");
+var _jsxRuntime = require("react/jsx-runtime");
+var ParticipantActions = exports.ParticipantActions = (0, _mobxReact.observer)(function () {
+  var transI18n = (0, _i18n.useI18n)();
+  var store = (0, _react.useContext)(_store.StoreContext);
+  return store.isSharingScreen && store.isSharingScreenOwner ? null : /*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip.FcrToolTip, {
+    content: transI18n('fmt_uimanager_option_mergeview'),
+    mouseEnterDelay: 0,
+    trigger: "hover",
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_iconButton.FcrIconButton, {
+      icon: _type.FcrIconType.FCR_WINDOWPAGE_BIGGER,
+      onClick: store.moveParticipantFromDialogToAside,
+      className: "frc-window-header__icon fcr-no-drag",
+      iconColors: {
+        iconPrimary: 'var(--fcr_ui_scene_icontext1)'
+      }
+    })
+  });
+});

package/lib/modules/dialog/dialogs/participant/components/title.d.ts

@@ -0,0 +1 @@
+export declare const ParticipantTitle: () => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,19 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ParticipantTitle = void 0;
+var _react = require("react");
+var _store = require("../../../store");
+var _mobxReact = require("mobx-react");
+var _i18n = require("agora-ui-foundation/lib/i18n");
+var _jsxRuntime = require("react/jsx-runtime");
+var ParticipantTitle = exports.ParticipantTitle = (0, _mobxReact.observer)(function () {
+  var store = (0, _react.useContext)(_store.StoreContext);
+  var transI18n = (0, _i18n.useI18n)();
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [transI18n('fmt_participants_label_participants'), "(", store.participantCount, ")"]
+  });
+});

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

@@ -0,0 +1,2 @@
+import { PropsWithChildren } from 'react';
+export declare const ParticipantDialog: ({ children }: PropsWithChildren<{}>) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,53 @@
+"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.ParticipantDialog = void 0;
+var _i18n = require("agora-ui-foundation/lib/i18n");
+var _react = require("react");
+var _store = require("../../store");
+var _constant = require("../../../../utilities/constant");
+var _normalWindow = _interopRequireDefault(require("../../components/normal-window"));
+var _actions = require("./components/actions");
+var _title = require("./components/title");
+var _jsxRuntime = require("react/jsx-runtime");
+var ParticipantDialog = exports.ParticipantDialog = function ParticipantDialog(_ref) {
+  var children = _ref.children;
+  var transI18n = (0, _i18n.useI18n)();
+  var store = (0, _react.useContext)(_store.StoreContext);
+  var config = {
+    fullscreen: false,
+    maximizable: false,
+    width: 320,
+    height: 560,
+    minWidth: 320,
+    minHeight: 400,
+    maxWidth: 620,
+    maxHeight: 900,
+    center: true,
+    title: transI18n('fmt_meeting_creatpage_label_join_attendee'),
+    resizable: true,
+    hasShadow: true
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_store.StoreContext.Provider, {
+    value: store,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_normalWindow["default"], {
+      title: /*#__PURE__*/(0, _jsxRuntime.jsx)(_title.ParticipantTitle, {}),
+      dialogKey: _constant.FcrUIDialogKey.PARTICIPANT,
+      config: config
+      // onClose={() => store.closeParticipantDialog()}
+      ,
+      hooksConfig: {
+        hasCustomShadow: false
+      },
+      actions: /*#__PURE__*/(0, _jsxRuntime.jsx)(_actions.ParticipantActions, {}),
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "fcr-participant-dialog-wrapper",
+        children: children
+      })
+    })
+  });
+};

package/lib/modules/dialog/dialogs/pre-setting/index.js

@@ -0,0 +1,62 @@
+"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["default"] = void 0;
+require("core-js/modules/web.timers.js");
+var _env = require("agora-foundation/lib/utilities/env");
+var _i18n = require("agora-ui-foundation/lib/i18n");
+var _constant = require("../../../../utilities/constant");
+var _normalWindow = _interopRequireDefault(require("../../components/normal-window"));
+require("./index.css");
+var _jsxRuntime = require("react/jsx-runtime");
+var ELECTRON_HEIGHT = 556;
+var WEB_HEIGHT = 600;
+var DeviceSettingDialog = function DeviceSettingDialog(_ref) {
+  var children = _ref.children,
+    onClose = _ref.onClose;
+  var t = (0, _i18n.useI18n)();
+  var height = (0, _env.isElectron)() ? ELECTRON_HEIGHT : WEB_HEIGHT;
+  var config = {
+    fullscreen: false,
+    maximizable: false,
+    trafficLightPosition: {
+      x: 10,
+      y: 60
+    },
+    width: 580,
+    height: 600,
+    minWidth: 580,
+    minHeight: 600,
+    maxWidth: 670,
+    maxHeight: 800,
+    title: t('fmt_settings_option_setting'),
+    resizable: false
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_normalWindow["default"], {
+    height: height,
+    dialogKey: _constant.FcrUIDialogKey.DEVICE_SETTINGS,
+    config: config,
+    style: {
+      zIndex: 10
+    },
+    onClose: onClose,
+    onOpened: function onOpened(_ref2) {
+      var browserWindow = _ref2.browserWindow;
+      if (browserWindow) {
+        browserWindow.setAlwaysOnTop(true);
+        setTimeout(function () {
+          browserWindow.show();
+          browserWindow.setAlwaysOnTop(false);
+          browserWindow.moveTop();
+          browserWindow.focus();
+        }, 600);
+      }
+    },
+    children: children
+  });
+};
+var _default = exports["default"] = DeviceSettingDialog;

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

@@ -0,0 +1,35 @@
+"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.RenameDialog = void 0;
+var _i18n = require("agora-ui-foundation/lib/i18n");
+var _constant = require("../../../../utilities/constant");
+var _normalWindow = _interopRequireDefault(require("../../components/normal-window"));
+var _jsxRuntime = require("react/jsx-runtime");
+var RenameDialog = exports.RenameDialog = function RenameDialog(_ref) {
+  var children = _ref.children,
+    title = _ref.title;
+  var transI18n = (0, _i18n.useI18n)();
+  var config = {
+    fullscreen: false,
+    maximizable: false,
+    width: 320,
+    height: 168,
+    title: transI18n('fmt_additional_option_rename_in_meeting'),
+    resizable: false
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_normalWindow["default"], {
+    title: title,
+    dialogKey: _constant.FcrUIDialogKey.RENAME,
+    config: config,
+    autoHeight: true,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "fcr-rename-dialog-content",
+      children: children
+    })
+  });
+};

package/lib/modules/dialog/{components → dialogs}/share-screen-selection/index.js

@@ -9,7 +9,7 @@ exports.ShareScreenSelectronDialog = void 0;
 var _i18n = require("agora-ui-foundation/lib/i18n");
 var _constant = require("../../../../utilities/constant");
 var _useElectron = require("../../hooks/useElectron");
-var _dialogContainer = _interopRequireDefault(require("../dialog-container"));
+var _dialogContainer = _interopRequireDefault(require("../../components/dialog-container"));
 var _jsxRuntime = require("react/jsx-runtime");
 var ShareScreenSelectronDialog = exports.ShareScreenSelectronDialog = function ShareScreenSelectronDialog(props) {
   var children = props.children;

package/lib/modules/dialog/{components → dialogs}/video-window/index.js

@@ -103,7 +103,6 @@ var VideoWindowDialog = exports.VideoWindowDialog = (0, _mobxReact.observer)(fun
       dialogKey: _constant.FcrUIDialogKey.VIDEO_WINDOW,
       config: config,
       hasCustomShadow: false,
-      alwaysOnTop: _useElectron.diffPlatformTopLevelLayer,
       disableShortcutClose: true,
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_videoTrackRenderContext.FcrVideoTrackRenderContext.Provider, {
         value: {
@@ -117,19 +116,23 @@ var VideoWindowDialog = exports.VideoWindowDialog = (0, _mobxReact.observer)(fun
           newRendererWindow = _ref2.newRendererWindow;
         browserWindow.setBounds(initalBounds);
         function reCalculate() {
-          var shareBounds = store.recordCurrentSharingScreenBounds();
-          var _window$runtime$scree2 = window.runtime.screen.getDisplayNearestPoint(shareBounds).bounds,
-            x = _window$runtime$scree2.x,
-            y = _window$runtime$scree2.y,
-            width = _window$runtime$scree2.width;
-          browserWindow.setBounds(setCalcBounds(x, y, width));
-          store.log("[VideoWindowDialog]: [onOpened],  x: ".concat(x, ", y: ").concat(y, ", width: ").concat(width));
+          if (!browserWindow.isDestroyed()) {
+            var shareBounds = store.recordCurrentSharingScreenBounds();
+            var _window$runtime$scree2 = window.runtime.screen.getDisplayNearestPoint(shareBounds).bounds,
+              _x = _window$runtime$scree2.x,
+              _y = _window$runtime$scree2.y,
+              _width = _window$runtime$scree2.width;
+            browserWindow.setBounds(setCalcBounds(_x, _y, _width));
+            store.log("[VideoWindowDialog]: [onOpened],  x: ".concat(_x, ", y: ").concat(_y, ", width: ").concat(_width));
+          }
         }
         reCalculate();
         calculateRef.current = reCalculate;
 
         // @ts-ignore
         window.runtime.screen.addListener('display-metrics-changed', calculateRef.current);
+        window.runtime.screen.addListener('display-removed', reCalculate);
+        window.runtime.screen.addListener('display-added', reCalculate);
         // browserWindow.on(
         //   'move',
         //   debounce(() => {

package/lib/modules/dialog/{components → dialogs}/whiteboard/index.js

@@ -7,7 +7,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.WhiteboardElectronDialog = void 0;
 var _mobxReact = require("mobx-react");
 var _react = require("react");
-var _dialogs = require("../../dialogs");
 var _constant = require("../../../../utilities/constant");
 var _store = require("../../store");
 var _reactDom = require("react-dom");
@@ -48,7 +47,7 @@ var WhiteboardElectronDialog = exports.WhiteboardElectronDialog = (0, _mobxReact
         //   // });
         // }
 
-        _dialogs.dialogWindows.set(_constant.FcrUIDialogKey.WHITEBOARD, browserWindow);
+        _store.dialogWindows.set(_constant.FcrUIDialogKey.WHITEBOARD, browserWindow);
       }
       module.getComponent(dom);
       // render(<div className="fcr-whiteboard-wrapper">{children}</div>, dom);
@@ -66,7 +65,7 @@ var WhiteboardElectronDialog = exports.WhiteboardElectronDialog = (0, _mobxReact
       transparent: true
     });
     return function () {
-      _dialogs.dialogWindows["delete"](_constant.FcrUIDialogKey.WHITEBOARD);
+      _store.dialogWindows["delete"](_constant.FcrUIDialogKey.WHITEBOARD);
       node && (0, _reactDom.unmountComponentAtNode)(node);
       window.runtime.closeRendererWindow('whiteboard');
     };

package/lib/modules/dialog/{components → dialogs}/widget/electron.js

@@ -27,7 +27,7 @@ var WidgetElectronDialog = exports.WidgetElectronDialog = function WidgetElectro
     title: params.name,
     resizable: false
   };
-  (0, _useElectron.useElectronDialogByDialogId)({
+  (0, _useElectron.useElectronDialog)({
     config: config,
     dialogKey: _constant.FcrUIDialogKey.WIDGET,
     dialogId: dialogId,

package/lib/modules/dialog/{components → dialogs}/widget/index.js

@@ -10,7 +10,7 @@ require("core-js/modules/es.function.name.js");
 var _env = require("agora-foundation/lib/utilities/env");
 var _electron = require("./electron");
 var _i18n = require("agora-ui-foundation/lib/i18n");
-var _dialogContainer = _interopRequireDefault(require("../dialog-container"));
+var _dialogContainer = _interopRequireDefault(require("../../components/dialog-container"));
 var _constant = require("../../../../utilities/constant");
 var _jsxRuntime = require("react/jsx-runtime");
 var WidgetDialog = function WidgetDialog(_ref) {

package/lib/modules/dialog/hooks/use-web-drag.d.ts

@@ -0,0 +1,8 @@
+export declare const DialogContainerStore: import("react").Context<{
+    bind: () => object;
+}>;
+export default function useWebDrag(props: {
+    width?: number;
+    height?: number;
+    container: React.ReactNode;
+}): import("react/jsx-runtime").JSX.Element;

package/lib/modules/dialog/hooks/use-web-drag.js

@@ -0,0 +1,73 @@
+"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.DialogContainerStore = void 0;
+exports["default"] = useWebDrag;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = require("@use-gesture/react");
+var _react2 = require("react");
+var _jsxRuntime = require("react/jsx-runtime");
+var DialogContainerStore = exports.DialogContainerStore = /*#__PURE__*/(0, _react2.createContext)({});
+function useWebDrag(props) {
+  var rndRef = (0, _react2.useRef)(null);
+  var size = (0, _react2.useMemo)(function () {
+    var _rndRef$current;
+    return {
+      width: props.width || 400,
+      height: props.height ? props.height : ((_rndRef$current = rndRef.current) === null || _rndRef$current === void 0 ? void 0 : _rndRef$current.getBoundingClientRect().height) || 160
+    };
+  }, [props.height]);
+  var windowWidth = window.innerWidth;
+  var height = window.innerHeight;
+  var x = windowWidth / 2 - size.width / 2;
+  var y = height / 2 - size.height / 2;
+  var windowBounds = {
+    x: x,
+    y: y,
+    width: window.innerWidth,
+    height: window.innerHeight
+  };
+  var _useState = (0, _react2.useState)({
+      x: x,
+      y: y
+    }),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    bounds = _useState2[0],
+    setBounds = _useState2[1];
+  var bind = (0, _react.useDrag)(function (_ref) {
+    var _ref$delta = (0, _slicedToArray2["default"])(_ref.delta, 2),
+      dx = _ref$delta[0],
+      dy = _ref$delta[1];
+    var x = bounds.x + dx;
+    var y = bounds.y + dy;
+    var maxX = windowBounds.width - size.width;
+    var maxY = windowBounds.height - size.height;
+    var coord = {
+      x: Math.max(0, Math.min(maxX, x)),
+      y: Math.max(0, Math.min(maxY, y))
+    };
+    setBounds(coord);
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    style: {
+      width: size.width,
+      height: size.height,
+      left: "".concat(bounds.x, "px"),
+      top: "".concat(bounds.y, "px"),
+      position: 'absolute',
+      touchAction: 'none',
+      display: 'flex',
+      flexDirection: 'column'
+    },
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(DialogContainerStore.Provider, {
+      value: {
+        bind: bind
+      },
+      children: props.container
+    })
+  });
+}

package/lib/modules/dialog/hooks/useElectron.d.ts

@@ -6,15 +6,10 @@ export declare const DialogInstanceContext: import("react").Context<{
     closeDialog: () => void;
 }>;
 export declare const shadowOffset: number;
-export declare const diffPlatformHighLevelLayer: string;
-export declare const diffPlatformTopLevelLayer: string;
+export declare const enterFullScreenHandler: () => void;
+export declare const leaveFullScreenHandler: () => void;
 export declare function useElectronDialog(props: FcrUIDialogHooksProps): {
     store: import("../store").default;
     browserWindow: Electron.BrowserWindow | undefined;
     newRendererWindow: Window | undefined;
 };
-export declare function useElectronDialogByDialogId(props: FcrUIDialogHooksProps): {
-    store: import("../store").default;
-    browserWindow: Electron.BrowserWindow | undefined;
-    newRendererWindow: Window | undefined;
-};