fcr-ui-scene 3.3.0 → 3.4.0

package/lib/modules/dialog/components/system-preference/electron.js

@@ -0,0 +1,42 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _mobxReact = require("mobx-react");
+var _useElectron = require("../../hooks/useElectron");
+var _constant = require("../../../../utilities/constant");
+var DialogContent = (0, _mobxReact.observer)(function (_ref) {
+  var children = _ref.children,
+    params = _ref.params;
+  var config = {
+    frame: false,
+    fullscreen: false,
+    maximizable: false,
+    width: (params === null || params === void 0 ? void 0 : params.width) || 320,
+    height: (params === null || params === void 0 ? void 0 : params.height) || 168 + (params.closable || params.closable === undefined ? 16 : 0),
+    minWidth: 255,
+    minHeight: 160,
+    maxWidth: 620,
+    maxHeight: 700,
+    x: (params === null || params === void 0 ? void 0 : params.x) || 0,
+    y: (params === null || params === void 0 ? void 0 : params.y) || 0,
+    transparent: true
+  };
+  (0, _useElectron.useElectronDialog)({
+    dialogKey: _constant.DialogKey.SYSTEM_PREFERENCE,
+    config: config,
+    children: children,
+    onOpened: function onOpened(_ref2) {
+      var browserWindow = _ref2.browserWindow;
+      browserWindow.setBounds({
+        width: 280,
+        height: 355
+      });
+    }
+  });
+  return null;
+});
+var _default = exports["default"] = DialogContent;

package/lib/modules/dialog/components/system-preference/index.css

@@ -0,0 +1,49 @@
+.fcr-system-preference-dialog {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-start;
+  text-align: center;
+  background-color: white;
+  width: 100%;
+  height: 100%;
+}
+
+.fcr-system-preference-dialog img {
+  width: 90%;
+  margin-bottom: 10px;
+}
+
+.fcr-system-preference-dialog-title {
+  font-weight: 600;
+  font-size: 16px;
+  margin-bottom: 10px;
+  color: var(--fcr_ui_scene_icontext1);
+}
+
+.fcr-system-preference-dialog-desc {
+  font-weight: 400;
+  font-size: 13px;
+  margin-bottom: 10px;
+  color: var(--fcr_ui_scene_icontext1);
+  width: 90%;
+}
+
+.fcr-system-preference-dialog-button {
+  width: 90%;
+}
+
+.fcr-system-preference-dialog button {
+  width: 100%;
+  margin-bottom: 10px;
+}
+
+.fcr-system-preference-dialog .fcr-button-white {
+  background-color: var(--fcr_ui_scene_btn2);
+  color: var(--fcr_ui_scene_icontext2);
+}
+
+.fcr-system-preference-dialog .fcr-button-white:hover {
+  background-color: var(--fcr_ui_scene_btn2) !important;
+  color: var(--fcr_ui_scene_icontext2) !important;
+}

package/lib/modules/dialog/components/system-preference/index.d.ts

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

package/lib/modules/dialog/components/system-preference/index.js

@@ -0,0 +1,150 @@
+"use strict";
+
+require("core-js/modules/es.symbol.js");
+require("core-js/modules/es.array.filter.js");
+require("core-js/modules/es.array.for-each.js");
+require("core-js/modules/es.array.iterator.js");
+require("core-js/modules/es.array.push.js");
+require("core-js/modules/es.object.define-properties.js");
+require("core-js/modules/es.object.define-property.js");
+require("core-js/modules/es.object.get-own-property-descriptor.js");
+require("core-js/modules/es.object.get-own-property-descriptors.js");
+require("core-js/modules/es.object.keys.js");
+require("core-js/modules/es.object.to-string.js");
+require("core-js/modules/es.string.iterator.js");
+require("core-js/modules/es.weak-map.js");
+require("core-js/modules/esnext.async-iterator.filter.js");
+require("core-js/modules/esnext.async-iterator.for-each.js");
+require("core-js/modules/esnext.iterator.constructor.js");
+require("core-js/modules/esnext.iterator.filter.js");
+require("core-js/modules/esnext.iterator.for-each.js");
+require("core-js/modules/esnext.weak-map.delete-all.js");
+require("core-js/modules/esnext.weak-map.emplace.js");
+require("core-js/modules/web.dom-collections.for-each.js");
+require("core-js/modules/web.dom-collections.iterator.js");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SystemPreferenceDialog = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _mobxReact = require("mobx-react");
+var _react = _interopRequireWildcard(require("react"));
+var _store = require("../../store");
+var _reactRnd = require("react-rnd");
+var _electron = _interopRequireDefault(require("./electron"));
+var _platform = require("../../../../utilities/platform");
+var _i18n = require("agora-ui-foundation/lib/i18n");
+var _button = require("agora-ui-foundation/lib/components/button");
+var _env = require("agora-foundation/lib/utilities/env");
+require("./index.css");
+var _bg = _interopRequireDefault(require("./bg1.png"));
+var _bg2 = _interopRequireDefault(require("./bg2.png"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } // import { ConfirmContentProps } from 'agora-ui-foundation/lib/components/confirm-content';
+var SystemPreferenceDialogContent = function SystemPreferenceDialogContent(_ref) {
+  var params = _ref.params;
+  var t = (0, _i18n.useI18n)();
+  var _useContext = (0, _react.useContext)(_store.StoreContext),
+    closeSystemPreferenceDialog = _useContext.closeSystemPreferenceDialog;
+  var deviceMap = {
+    camera: {
+      title: t('fmt_camera_popup_label_restricted'),
+      desc: t('fmt_camera_popup_label_system_change'),
+      img: _bg["default"]
+    },
+    microphone: {
+      title: t('fmt_audio_popup_label_restricted'),
+      desc: t('fmt_audio_popup_label_system_change'),
+      img: _bg2["default"]
+    }
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: "fcr-system-preference-dialog",
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+      src: deviceMap[params].img,
+      alt: ""
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "fcr-system-preference-dialog-title",
+      children: deviceMap[params].title
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "fcr-system-preference-dialog-desc",
+      children: deviceMap[params].desc
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "fcr-system-preference-dialog-button",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.FcrButton, {
+        size: "S",
+        styleType: "normal",
+        shape: "rounded",
+        onClick: function onClick() {
+          closeSystemPreferenceDialog();
+          window.runtime.openSystemPreferences(params);
+        },
+        children: t('fmt_audio_popup_button_system_change')
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "fcr-system-preference-dialog-button",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.FcrButton, {
+        size: "S",
+        styleType: "white",
+        shape: "rounded",
+        onClick: closeSystemPreferenceDialog,
+        children: t('fmt_audio_popup_button_cancel')
+      })
+    })]
+  });
+};
+var SystemPreferenceDialog = exports.SystemPreferenceDialog = (0, _mobxReact.observer)(function (_ref2) {
+  var params = _ref2.params;
+  console.log('params', params);
+  var store = (0, _react.useContext)(_store.StoreContext);
+  var containerWidth = window.innerWidth;
+  var containerHeight = window.innerHeight;
+  var _ref3 = (0, _env.isElectron)() ? window.runtime.browserWindow.getBounds() : {
+      x: document.body.offsetLeft,
+      y: document.body.offsetTop
+    },
+    offsetX = _ref3.x,
+    offsetY = _ref3.y;
+  var width = (params === null || params === void 0 ? void 0 : params.width) || 280;
+  var height = (params === null || params === void 0 ? void 0 : params.height) || 387;
+  var x = containerWidth / 2 - width / 2 + ((0, _platform.isWindows)() ? offsetX : 0);
+  var y = containerHeight / 2 - height / 2 + ((0, _platform.isWindows)() ? offsetY : 0);
+  if ((0, _env.isElectron)()) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_electron["default"], {
+      params: _objectSpread(_objectSpread({}, params), {}, {
+        x: x,
+        y: y
+      }),
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(SystemPreferenceDialogContent, {
+        params: params
+      })
+    });
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_store.StoreContext.Provider, {
+    value: store,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactRnd.Rnd, {
+      "default": {
+        x: x,
+        y: y,
+        width: width,
+        height: height
+      },
+      maxHeight: 700,
+      maxWidth: width,
+      minWidth: width,
+      minHeight: height,
+      bounds: '.fcr-confirm-dialog-wrapper_web',
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "fcr-confirm-dialog-wrapper_web",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(SystemPreferenceDialogContent, {
+          params: params
+        })
+      })
+    })
+  });
+});

package/lib/modules/dialog/components/toast/index.d.ts

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

package/lib/modules/dialog/components/toast/index.js

@@ -0,0 +1,62 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+require("core-js/modules/web.timers.js");
+var _constant = require("../../../../utilities/constant");
+var _useElectron = require("../../hooks/useElectron");
+var _store = require("../../store");
+var _react = require("react");
+var _env = require("agora-foundation/lib/utilities/env");
+var _mobxReact = require("mobx-react");
+var _jsxRuntime = require("react/jsx-runtime");
+var config = {
+  frame: false,
+  transparent: true,
+  maximizable: false,
+  backgroundColor: '#00000000',
+  hiddenInMissionControl: true,
+  hasShadow: false,
+  useContentSize: true,
+  minimizable: false,
+  title: 'Toast',
+  focusable: false,
+  scroll: false,
+  alwaysOnTop: true,
+  fullscreen: false,
+  show: false,
+  height: 0
+};
+var ToastElectron = (0, _mobxReact.observer)(function (_ref) {
+  var children = _ref.children;
+  var store = (0, _react.useContext)(_store.StoreContext);
+  (0, _useElectron.useElectronDialog)({
+    dialogKey: _constant.DialogKey.SHOW_TOAST,
+    config: config,
+    children: children,
+    ignoreMouseEvents: true,
+    fullScreen: true,
+    scroll: false,
+    alwaysOnTop: true,
+    polyfills: ['fix-toast-window-flash'],
+    onOpened: function onOpened(_ref2) {
+      var browserWindow = _ref2.browserWindow;
+      setTimeout(function () {
+        browserWindow.show();
+      }, 500);
+    }
+  });
+  return null;
+});
+var ToastDialog = (0, _mobxReact.observer)(function (_ref3) {
+  var children = _ref3.children;
+  return (0, _env.isElectron)() ? /*#__PURE__*/(0, _jsxRuntime.jsx)(ToastElectron, {
+    children: children
+  }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+    children: children
+  });
+});
+var _default = exports["default"] = ToastDialog;

package/lib/modules/dialog/components/whiteboard/index.js

@@ -9,11 +9,11 @@ var _mobxReact = require("mobx-react");
 var _react = require("react");
 var _dialogs = require("../../dialogs");
 var _constant = require("../../../../utilities/constant");
-var _context = require("../../context");
+var _store = require("../../store");
 var _reactDom = require("react-dom");
 var WhiteboardElectronDialog = exports.WhiteboardElectronDialog = (0, _mobxReact.observer)(function (_ref) {
   var module = _ref.module;
-  var store = (0, _react.useContext)(_context.StoreContext);
+  var store = (0, _react.useContext)(_store.StoreContext);
   (0, _react.useEffect)(function () {
     var node;
     window.runtime.openRendererWindow('whiteboard', function (dom, browserWindow) {

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

@@ -1,9 +1,5 @@
-import { FC, PropsWithChildren } from 'react';
+import { PropsWithChildren } from 'react';
 import { DialogKey } from '../../utilities/constant';
 export declare let dialogWindows: Map<DialogKey, Electron.BrowserWindow>;
 export declare const setDialogBounds: (browserWindow: Electron.BrowserWindow, currentDialogBounds: Partial<Electron.Rectangle>) => void;
-export declare const LiveStreamingDialog: FC<PropsWithChildren<{
-    title: string;
-}>>;
-export declare const InviteDialog: FC<PropsWithChildren<{}>>;
 export declare const VideoWindowDialog: ({ children }: PropsWithChildren<{}>) => import("react/jsx-runtime").JSX.Element | null;

package/lib/modules/dialog/dialogs.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.setDialogBounds = exports.dialogWindows = exports.VideoWindowDialog = exports.LiveStreamingDialog = exports.InviteDialog = void 0;
+exports.setDialogBounds = exports.dialogWindows = exports.VideoWindowDialog = void 0;
 require("core-js/modules/es.array.iterator.js");
 require("core-js/modules/es.map.js");
 require("core-js/modules/es.object.to-string.js");
@@ -25,16 +25,12 @@ require("core-js/modules/esnext.map.reduce.js");
 require("core-js/modules/esnext.map.some.js");
 require("core-js/modules/esnext.map.update.js");
 require("core-js/modules/web.dom-collections.iterator.js");
-var _windowHeader = require("agora-ui-foundation/lib/components/window-header");
 var _react = require("react");
-var _context = require("./context");
-var _reactRnd = require("react-rnd");
+var _store = require("./store");
 var _mobxReact = require("mobx-react");
 var _env = require("agora-foundation/lib/utilities/env");
-var _draggableDialog = require("agora-ui-foundation/lib/components/dialog/draggable-dialog");
 var _reactDom = require("react-dom");
 var _debounce = _interopRequireDefault(require("lodash/debounce"));
-var _classnames = _interopRequireDefault(require("classnames"));
 var _constant = require("../../utilities/constant");
 var _renderer = require("../../utilities/renderer");
 var _videoTrackRenderContext = require("../../utilities/video-track-render-context");
@@ -50,165 +46,9 @@ var setDialogBounds = exports.setDialogBounds = function setDialogBounds(browser
   });
   browserWindow.setSkipTaskbar(false);
 };
-var LiveStreamingDialogContent = (0, _mobxReact.observer)(function (_ref) {
-  var children = _ref.children,
-    title = _ref.title;
-  var _useContext = (0, _react.useContext)(_context.StoreContext),
-    closeLiveStreamingDialog = _useContext.closeLiveStreamingDialog;
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-    className: "fcr-livestreaming-dialog-wrapper",
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_windowHeader.FcrWindowHeader, {
-      showClose: true,
-      title: title,
-      type: _windowHeader.WindowType.WINDOW,
-      onClose: closeLiveStreamingDialog,
-      withWindowPopUpButton: false
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      className: "fcr-livestreaming-dialog-content",
-      children: children
-    })]
-  });
-});
-var LiveStreamingDialog = exports.LiveStreamingDialog = function LiveStreamingDialog(_ref2) {
-  var children = _ref2.children,
-    title = _ref2.title;
-  var defaultSize = {
-    x: (document.body.clientWidth - 440) / 2,
-    y: (document.body.clientHeight - 434) / 2,
-    width: 440,
-    height: 434
-  };
-  if ((0, _env.isElectron)()) {
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(LiveStreamingElectronDialog, {
-      title: title,
-      children: children
-    });
-  }
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactRnd.Rnd, {
-    "default": defaultSize,
-    maxHeight: 700,
-    maxWidth: 620,
-    minWidth: 440,
-    minHeight: 434,
-    bounds: '.fcr-layout-content',
-    dragHandleClassName: "frc-window-header",
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(LiveStreamingDialogContent, {
-      title: title,
-      children: children
-    })
-  });
-};
-var LiveStreamingElectronDialog = (0, _mobxReact.observer)(function (_ref3) {
-  var children = _ref3.children,
-    title = _ref3.title;
-  var store = (0, _react.useContext)(_context.StoreContext);
-  (0, _react.useEffect)(function () {
-    var node;
-    window.runtime.openRendererWindow('live-streaming', function (dom, browserWindow) {
-      node = dom;
-      dialogWindows.set(_constant.DialogKey.LIVE_STREAMING, browserWindow);
-      if (store.currentDialogBounds.height) {
-        setDialogBounds(browserWindow, {
-          y: store.currentDialogBounds.y
-        });
-      }
-      (0, _renderer.handleWillClose)(browserWindow, function () {
-        (0, _reactDom.unmountComponentAtNode)(dom);
-        dialogWindows["delete"](_constant.DialogKey.LIVE_STREAMING);
-        store.closeLiveStreamingDialog();
-      });
-      (0, _reactDom.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_context.StoreContext.Provider, {
-        value: store,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(LiveStreamingDialogContent, {
-          title: title,
-          children: children
-        })
-      }), dom);
-    }, {
-      frame: false,
-      fullscreen: false,
-      maximizable: false,
-      width: 440,
-      height: 434,
-      y: store.currentDialogBounds.y,
-      transparent: true
-    });
-    return function () {
-      node && (0, _reactDom.unmountComponentAtNode)(node);
-      window.runtime.closeRendererWindow('live-streaming');
-    };
-  }, []);
-  return null;
-});
-var InviteDialog = exports.InviteDialog = function InviteDialog(_ref4) {
-  var children = _ref4.children;
-  var _useContext2 = (0, _react.useContext)(_context.StoreContext),
-    closeInviteDialog = _useContext2.closeInviteDialog;
-  if ((0, _env.isElectron)()) {
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(InviteElectronDialog, {
-      children: children
-    });
-  }
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_draggableDialog.FcrDraggableModal, {
-    title: '',
-    onClose: closeInviteDialog,
-    width: 400,
-    height: 350,
-    rootClassName: "invite-dialog",
-    children: children
-  });
-};
-var InviteElectronDialog = function InviteElectronDialog(_ref5) {
-  var children = _ref5.children;
-  var _useContext3 = (0, _react.useContext)(_context.StoreContext),
-    closeInviteDialog = _useContext3.closeInviteDialog;
-  (0, _react.useEffect)(function () {
-    var node;
-    window.runtime.openRendererWindow('invite', function (dom, browserWindow) {
-      node = dom;
-      dialogWindows.set(_constant.DialogKey.INVITE, browserWindow);
-      (0, _renderer.handleWillClose)(browserWindow, function () {
-        (0, _reactDom.unmountComponentAtNode)(dom);
-        dialogWindows["delete"](_constant.DialogKey.INVITE);
-        closeInviteDialog();
-      });
-      (0, _reactDom.render)(/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-        className: (0, _classnames["default"])('invite-dialog'),
-        children: [(0, _env.getPlatform)() === _env.FcrApplicationPlatform.WINDOWS && /*#__PURE__*/(0, _jsxRuntime.jsx)(_windowHeader.FcrWindowHeader, {
-          type: _windowHeader.WindowType.WINDOW,
-          enableMaximize: false,
-          enableMinimize: false,
-          withWindowPopUpButton: false,
-          onClose: closeInviteDialog,
-          showClose: true
-        }), children]
-      }), dom);
-    }, {
-      titleBarStyle: 'hidden',
-      trafficLightPosition: {
-        x: 10,
-        y: 40
-      },
-      transparent: true,
-      maximizable: false,
-      minimizable: false,
-      fullscreenable: false,
-      // resizable: false,
-      width: 420,
-      height: 420
-      // maxHeight: 420,
-      // maxWidth: 420,
-    });
-    return function () {
-      node && (0, _reactDom.unmountComponentAtNode)(node);
-      window.runtime.closeRendererWindow('invite');
-    };
-  }, []);
-  return null;
-};
-var VideoWindowElectronDialog = (0, _mobxReact.observer)(function (_ref6) {
-  var children = _ref6.children;
-  var store = (0, _react.useContext)(_context.StoreContext);
+var VideoWindowElectronDialog = (0, _mobxReact.observer)(function (_ref) {
+  var children = _ref.children;
+  var store = (0, _react.useContext)(_store.StoreContext);
   var _store$videoWindowBou = store.videoWindowBounds,
     videoWindowHeight = _store$videoWindowBou.videoWindowHeight,
     videoWindowPreviewType = _store$videoWindowBou.videoWindowPreviewType,
@@ -228,9 +68,17 @@ var VideoWindowElectronDialog = (0, _mobxReact.observer)(function (_ref6) {
       node = dom;
       videoWindowRef.current = browserWindow;
       browserWindow.setTitle('Video Window');
+      var initVideoWindow = function initVideoWindow() {
+        browserWindow.setResizable(true);
+        browserWindow.setAspectRatio(_type.VideoWindowRadio);
+        browserWindow.setMinimumSize(_type.DefaultVideoWindowWidth, _type.DefaultVideoWindowSmallTypeHeight);
+        browserWindow.setMaximumSize(_type.VideoWindowZoomMaxWidth, _type.VideoWindowZoomMaxHeight);
+      };
+      initVideoWindow();
       browserWindow.setBackgroundColor('#00000000');
       browserWindow.setVisibleOnAllWorkspaces(true, {
-        visibleOnFullScreen: true
+        visibleOnFullScreen: true,
+        skipTransformProcessType: true
       });
       browserWindow.setAlwaysOnTop(true, 'screen-saver');
       dialogWindows.set(_constant.DialogKey.VIDEO_WINDOW, browserWindow);
@@ -240,15 +88,12 @@ var VideoWindowElectronDialog = (0, _mobxReact.observer)(function (_ref6) {
         if (!browserWindow.isDestroyed()) {
           browserWindow.removeAllListeners('will-resize');
           browserWindow.removeAllListeners('show');
-          browserWindow.setResizable(false);
-          browserWindow.setAspectRatio(0);
-          browserWindow.setMinimumSize(0, 0);
-          browserWindow.setMaximumSize(0, 0);
+          initVideoWindow();
           browserWindow.setBounds({
             x: workareaX + workareaWidth - _type.DefaultVideoWindowWidth - 168,
             y: workareaY + 80,
             width: _type.DefaultVideoWindowWidth,
-            height: _type.DefaultVideoWindowHeight
+            height: _type.DefaultVideoWindowSmallTypeHeight
           });
         }
       });
@@ -266,26 +111,27 @@ var VideoWindowElectronDialog = (0, _mobxReact.observer)(function (_ref6) {
       (0, _reactDom.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_videoTrackRenderContext.FcrVideoTrackRenderContext.Provider, {
         value: {
           deviceStore: store.deviceStore,
-          streamControl: store.streamControl
+          remoteVideoRenderManager: store.remoteVideoRenderManager
         },
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_context.StoreContext.Provider, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_store.StoreContext.Provider, {
           value: store,
           children: children
         })
       }), dom);
     }, {
+      type: 'panel',
       frame: false,
       fullscreen: false,
       maximizable: false,
       x: workareaX + workareaWidth - _type.DefaultVideoWindowWidth - 168,
       y: workareaY + 80,
       width: _type.DefaultVideoWindowWidth,
-      height: _type.DefaultVideoWindowHeight,
+      height: _type.DefaultVideoWindowSmallTypeHeight,
       minWidth: _type.DefaultVideoWindowWidth,
       transparent: true,
       alwaysOnTop: true,
       hasShadow: false,
-      resizable: false
+      resizable: true
     });
     return function () {
       node && (0, _reactDom.unmountComponentAtNode)(node);
@@ -324,8 +170,8 @@ var VideoWindowElectronDialog = (0, _mobxReact.observer)(function (_ref6) {
   }, [videoWindowHeight, videoWindowPreviewType]);
   return null;
 });
-var VideoWindowDialog = exports.VideoWindowDialog = (0, _mobxReact.observer)(function (_ref7) {
-  var children = _ref7.children;
+var VideoWindowDialog = exports.VideoWindowDialog = (0, _mobxReact.observer)(function (_ref2) {
+  var children = _ref2.children;
   if ((0, _env.isElectron)()) {
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(VideoWindowElectronDialog, {
       children: children

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

@@ -0,0 +1,26 @@
+import { DialogKey } from '../../../utilities/constant';
+import DialogStore from '../store';
+export declare const DialogInstanceContext: import("react").Context<{
+    browserWindow: Electron.BrowserWindow;
+    newRendererWindow: Window;
+}>;
+export declare function useElectronDialog(props: {
+    dialogKey: DialogKey;
+    config: Electron.BrowserWindowConstructorOptions;
+    onClose?: (store: DialogStore) => void;
+    onOpened?: (props: {
+        browserWindow: Electron.BrowserWindow;
+        store: DialogStore;
+    }) => void;
+    onUnmounted?: (store: DialogStore) => void;
+    children: React.ReactNode;
+    scroll?: boolean;
+    focus?: boolean;
+    ignoreMouseEvents?: boolean | Electron.IgnoreMouseEventsOptions;
+    alwaysOnTop?: boolean;
+    fullScreen?: boolean;
+    polyfills?: string[];
+}): {
+    store: DialogStore;
+    browserWindow: Electron.BrowserWindow | undefined;
+};