fcr-ui-scene 1.0.40 → 3.1.0

package/lib/modules/setting/video-settings/video-settings.js

@@ -0,0 +1,191 @@
+"use strict";
+
+require("core-js/modules/es.array.iterator.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.to-string.js");
+require("core-js/modules/es.string.iterator.js");
+require("core-js/modules/es.weak-map.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["default"] = exports.VideoSettings = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _checkbox = require("agora-ui-foundation/lib/components/checkbox");
+var _dialog = require("agora-ui-foundation/lib/components/dialog");
+require("agora-ui-foundation/lib/components/local-video-player/index.css");
+var _mobxReact = require("mobx-react");
+var _react = require("react");
+var _useNamespace = require("../common/useNamespace");
+var _context = require("../context");
+require("./index.css");
+var _videoEffect = require("../../device-pretest/settings/video-effect");
+var _store = require("../store");
+var _localVideoPlayer = _interopRequireWildcard(require("agora-ui-foundation/lib/components/local-video-player"));
+var _virtualBackgroundSetting = require("../../device-pretest/settings/virtual-background-setting");
+var _beauty = require("../../device-pretest/settings/beauty");
+var _videoSettingsBasic = require("./video-settings-basic");
+var _i18n = require("agora-ui-foundation/lib/i18n");
+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; }
+var VideoSettings = exports.VideoSettings = (0, _mobxReact.observer)(function (props) {
+  var ns = (0, _useNamespace.useNamespace)('device-settings-video');
+  var containerRef = (0, _react.useRef)(null);
+  var transI18n = (0, _i18n.useI18n)();
+  var _useState = (0, _react.useState)(null),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    containerDom = _useState2[0],
+    setContainerDom = _useState2[1];
+  var _useContext = (0, _react.useContext)(_context.StoreContext),
+    config = _useContext.config,
+    toggleLocalMirror = _useContext.toggleLocalMirror,
+    isLocalMirrorEnabled = _useContext.isLocalMirrorEnabled,
+    isLocalEditBeautyOptions = _useContext.isLocalEditBeautyOptions,
+    setVideoOrientation = _useContext.setVideoOrientation,
+    setBeautyOptions = _useContext.setBeautyOptions,
+    currentBeautyKey = _useContext.currentBeautyKey,
+    beautyOptions = _useContext.beautyOptions,
+    toggleLocalMirrorPreview = _useContext.toggleLocalMirrorPreview,
+    cameraDeviceId = _useContext.cameraDeviceId,
+    cameraEnabled = _useContext.cameraEnabled,
+    startVideo = _useContext.startVideo,
+    stopVideo = _useContext.stopVideo,
+    showForceOpenEffectDialog = _useContext.showForceOpenEffectDialog,
+    handleForceOpenVideoEffect = _useContext.handleForceOpenVideoEffect,
+    handleCancelForceOpenVideoEffect = _useContext.handleCancelForceOpenVideoEffect,
+    currentVirtualBackgroundName = _useContext.currentVirtualBackgroundName,
+    enableVirtualBackground = _useContext.enableVirtualBackground,
+    setEditBeautyKey = _useContext.setEditBeautyKey,
+    enableBeautyEffect = _useContext.enableBeautyEffect,
+    setCameraDevice = _useContext.setCameraDevice,
+    cameraDeviceList = _useContext.cameraDeviceList,
+    enableBeauty = _useContext.enableBeauty,
+    virtualBackgroundList = _useContext.virtualBackgroundList,
+    startCameraTest = _useContext.startCameraTest,
+    stopCameraTest = _useContext.stopCameraTest,
+    currentIsMirror = _useContext.currentIsMirror;
+  var _useState3 = (0, _react.useState)(beautyOptions[currentBeautyKey] || _store.DEFAULT_BEAUTY_VALUE),
+    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+    currentEditValue = _useState4[0],
+    setCurrentEditValue = _useState4[1];
+  var _useState5 = (0, _react.useState)(currentIsMirror ? _localVideoPlayer.VideoViewType.SELFIE_VIEW : _localVideoPlayer.VideoViewType.CAMERA_VIEW),
+    _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
+    currentVideoViewType = _useState6[0],
+    setCurrentVideoViewType = _useState6[1];
+  var currentBeautyKeyRef = (0, _react.useRef)(currentBeautyKey);
+  (0, _react.useEffect)(function () {
+    if (!isLocalMirrorEnabled) {
+      setCurrentVideoViewType(_localVideoPlayer.VideoViewType.SELFIE_VIEW);
+    }
+  }, [isLocalMirrorEnabled]);
+  (0, _react.useEffect)(function () {
+    startCameraTest();
+  }, [cameraDeviceId]);
+  (0, _react.useEffect)(function () {
+    setContainerDom(containerRef.current);
+    return function () {
+      stopCameraTest();
+    };
+  }, []);
+  (0, _react.useEffect)(function () {
+    setCurrentEditValue(beautyOptions[currentBeautyKey] || _store.DEFAULT_BEAUTY_VALUE);
+    currentBeautyKeyRef.current = currentBeautyKey;
+  }, [currentBeautyKey]);
+  var handleBeautyValueChange = function handleBeautyValueChange(value) {
+    setCurrentEditValue(value);
+    setBeautyOptions((0, _defineProperty2["default"])({}, currentBeautyKeyRef.current, value));
+  };
+  var handleResetBeautyValueChange = function handleResetBeautyValueChange() {
+    setCurrentEditValue(_store.DEFAULT_BEAUTY_VALUE);
+    setBeautyOptions((0, _defineProperty2["default"])({}, currentBeautyKeyRef.current, _store.DEFAULT_BEAUTY_VALUE));
+  };
+  var handleVideoViewChange = function handleVideoViewChange(key) {
+    toggleLocalMirrorPreview(key === _localVideoPlayer.VideoViewType.SELFIE_VIEW);
+    setCurrentVideoViewType(key);
+  };
+  var _useState7 = (0, _react.useState)((props === null || props === void 0 ? void 0 : props.videoActiveTab) || 'basic'),
+    _useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
+    activeTab = _useState8[0],
+    setActiveTab = _useState8[1];
+  var handleActiveTab = function handleActiveTab(tabKey) {
+    setActiveTab(tabKey);
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: ns.b(),
+      ref: containerRef,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_localVideoPlayer["default"], {
+        isLocalMirrorEnabled: isLocalMirrorEnabled,
+        userName: (config === null || config === void 0 ? void 0 : config.userName) || '',
+        showSlider: activeTab === 'beauty-filter' && isLocalEditBeautyOptions,
+        handleResetBeautyValueChange: handleResetBeautyValueChange,
+        currentEditValue: currentEditValue,
+        containerDom: containerDom,
+        handleBeautyValueChange: handleBeautyValueChange,
+        setVideoOrientation: setVideoOrientation,
+        cameraDeviceId: cameraDeviceId,
+        showCameraPreview: true,
+        showTopTips: !cameraEnabled,
+        startLocalVideo: function startLocalVideo(view) {
+          startVideo(currentIsMirror, view);
+        },
+        stopLocalVideo: stopVideo,
+        currentVideoViewType: currentVideoViewType,
+        handleVideoViewChange: handleVideoViewChange
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_videoEffect.VideoEffect, {
+        currentTab: activeTab,
+        handleActiveTab: handleActiveTab,
+        tabContents: {
+          'basic': /*#__PURE__*/(0, _jsxRuntime.jsx)(_videoSettingsBasic.VideoSettingsBasic, {
+            cameraDeviceId: cameraDeviceId !== null && cameraDeviceId !== void 0 ? cameraDeviceId : '',
+            setCameraDevice: setCameraDevice,
+            cameraDeviceList: cameraDeviceList
+          }),
+          'virtual-background': /*#__PURE__*/(0, _jsxRuntime.jsx)(_virtualBackgroundSetting.VirtualBackgroundSetting, {
+            currentVirtualBackgroundName: currentVirtualBackgroundName,
+            enableVirtualBackground: enableVirtualBackground,
+            virtualBackgroundList: virtualBackgroundList
+          }),
+          'beauty-filter': /*#__PURE__*/(0, _jsxRuntime.jsx)(_beauty.Beauty, {
+            enableBeauty: enableBeauty,
+            setEditBeautyKey: setEditBeautyKey,
+            currentBeautyKey: currentBeautyKey,
+            enableBeautyEffect: enableBeautyEffect,
+            beautySettingOption: beautyOptions
+          })
+        }
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_dialog.FcrBasicConfirmDialog, {
+        visible: showForceOpenEffectDialog,
+        onOk: handleForceOpenVideoEffect,
+        getContainer: function getContainer() {
+          return containerRef.current;
+        },
+        onCancel: handleCancelForceOpenVideoEffect,
+        title: transI18n('fmt_device_remind_property_title'),
+        text: transI18n('fmt_device_remind_property_content'),
+        cancelText: transI18n('fmt_security_buttons_cancel'),
+        okText: transI18n('fmt_settings_tips_confirmactivate')
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: ns.e('mirror-video'),
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_checkbox.FcrCheckbox, {
+        label: transI18n('fmt_internalsetting_options_mirromyvideo'),
+        checked: isLocalMirrorEnabled,
+        onChange: function onChange(enable) {
+          toggleLocalMirror(enable);
+          if (enable) {
+            setCurrentVideoViewType(_localVideoPlayer.VideoViewType.SELFIE_VIEW);
+          } else {
+            setCurrentVideoViewType(_localVideoPlayer.VideoViewType.CAMERA_VIEW);
+          }
+        }
+      })
+    })]
+  });
+});
+var _default = exports["default"] = VideoSettings;

package/lib/modules/setting/view.d.ts

@@ -0,0 +1,10 @@
+import { FC } from 'react';
+import './index.css';
+import './state/index.css';
+import './video-settings/index.css';
+import './audio-settings/index.css';
+import './storage-settings/index.css';
+import 'agora-ui-foundation/lib/components/tabs/index.css';
+import 'agora-ui-foundation/lib/components/volume-indicator/index.css';
+import 'agora-ui-foundation/lib/components/slider/index.css';
+export declare const DeviceSettingsView: FC;

package/lib/modules/setting/view.js

@@ -0,0 +1,139 @@
+"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.DeviceSettingsView = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = require("react");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _env = require("agora-foundation/lib/utilities/env");
+var _i18n = require("agora-ui-foundation/lib/i18n");
+var _icon = require("agora-ui-foundation/lib/components/icon");
+var _type = require("agora-ui-foundation/lib/components/icon/type");
+var _useNamespace = require("./common/useNamespace");
+var _mobxReact = require("mobx-react");
+var _context = require("./context");
+var _store = require("./store");
+require("./index.css");
+require("./state/index.css");
+require("./video-settings/index.css");
+require("./audio-settings/index.css");
+require("./storage-settings/index.css");
+require("agora-ui-foundation/lib/components/tabs/index.css");
+require("agora-ui-foundation/lib/components/volume-indicator/index.css");
+require("agora-ui-foundation/lib/components/slider/index.css");
+var _state = _interopRequireDefault(require("./state"));
+var _audioSettings = _interopRequireDefault(require("./audio-settings/audio-settings"));
+var _videoSettings = _interopRequireDefault(require("./video-settings/video-settings"));
+var _storageSettings = _interopRequireDefault(require("./storage-settings/storage-settings"));
+var _generalSettings = _interopRequireDefault(require("./general-settings/general-settings"));
+var _jsxRuntime = require("react/jsx-runtime");
+// import { State } from './state';
+
+var DeviceSettingsView = exports.DeviceSettingsView = (0, _mobxReact.observer)(function () {
+  var _useContext = (0, _react.useContext)(_context.StoreContext),
+    dialogConfig = _useContext.dialogConfig,
+    setDialogConfig = _useContext.setDialogConfig,
+    setSettingVideoOpened = _useContext.setSettingVideoOpened;
+  var t = (0, _i18n.useI18n)();
+  var tabContents = (0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])({}, _store.DeviceSettingTab.GENERAL, /*#__PURE__*/(0, _jsxRuntime.jsx)(_generalSettings["default"], {})), _store.DeviceSettingTab.AUDIO, /*#__PURE__*/(0, _jsxRuntime.jsx)(_audioSettings["default"], {})), _store.DeviceSettingTab.VIDEO, /*#__PURE__*/(0, _jsxRuntime.jsx)(_videoSettings["default"], {
+    videoActiveTab: dialogConfig.videoActiveTab
+  })), _store.DeviceSettingTab.STORAGE, /*#__PURE__*/(0, _jsxRuntime.jsx)(_storageSettings["default"], {})), _store.DeviceSettingTab.STATE, /*#__PURE__*/(0, _jsxRuntime.jsx)(_state["default"], {}));
+  var ns = (0, _useNamespace.useNamespace)('device-settings');
+  var getListItemCls = function getListItemCls(tabKey) {
+    return (0, _classnames["default"])(ns.e('nav-list-item'), ns.is('active', dialogConfig.activeTab === tabKey));
+  };
+  var getSurroundingCls = function getSurroundingCls(color) {
+    return (0, _classnames["default"])(ns.e('surrounding'), ns.em('surrounding', color));
+  };
+  var tabClickHandler = function tabClickHandler(tabKey) {
+    return function () {
+      setDialogConfig({
+        activeTab: tabKey
+      });
+    };
+  };
+  (0, _react.useEffect)(function () {
+    setSettingVideoOpened(true);
+    return function () {
+      setSettingVideoOpened(false);
+    };
+  }, []);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: ns.b(),
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: ns.e('nav'),
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("ul", {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("li", {
+          className: getListItemCls(_store.DeviceSettingTab.GENERAL),
+          onClick: tabClickHandler(_store.DeviceSettingTab.GENERAL),
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: getSurroundingCls('orange'),
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+              type: _type.FcrIconType.FCR_SETTING,
+              colors: {
+                iconPrimary: 'white'
+              },
+              size: 24
+            })
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            children: t('fmt_settings_option_general')
+          })]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("li", {
+          className: getListItemCls(_store.DeviceSettingTab.AUDIO),
+          onClick: tabClickHandler(_store.DeviceSettingTab.AUDIO),
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: getSurroundingCls('green'),
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+              type: _type.FcrIconType.FCR_MUTE,
+              colors: {
+                iconPrimary: 'white'
+              },
+              size: 24
+            })
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            children: t('fmt_setting_option_Voice')
+          })]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("li", {
+          className: getListItemCls(_store.DeviceSettingTab.VIDEO),
+          onClick: tabClickHandler(_store.DeviceSettingTab.VIDEO),
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: getSurroundingCls('purple'),
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+              type: _type.FcrIconType.FCR_CAMERA,
+              colors: {
+                iconPrimary: 'white'
+              },
+              size: 24
+            })
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            children: t('fmt_setting_option_Video')
+          })]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("li", {
+          className: getListItemCls(_store.DeviceSettingTab.STATE),
+          onClick: tabClickHandler(_store.DeviceSettingTab.STATE),
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: getSurroundingCls('blue'),
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+              type: _type.FcrIconType.FCR_COMPUTERDATA,
+              colors: {
+                iconPrimary: 'white'
+              },
+              size: 24
+            })
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            children: t('fmt_modules_labels_qualitystatistics')
+          })]
+        })]
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: (0, _classnames["default"])(ns.e('tab-content-wrapper'), ns.is('tab-content-video-wrapper', dialogConfig.activeTab === 'video'), {
+        'is-electron': (0, _env.isElectron)()
+      }),
+      children: tabContents[dialogConfig.activeTab]
+    })]
+  });
+});

package/lib/modules/share-screen/context.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import ShareScreenStore from './store';
+export declare const StoreContext: import("react").Context<ShareScreenStore>;

package/lib/modules/share-screen/context.js

@@ -0,0 +1,9 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StoreContext = void 0;
+var _react = require("react");
+var StoreContext = exports.StoreContext = /*#__PURE__*/(0, _react.createContext)(null);

package/lib/modules/share-screen/index.d.ts

@@ -0,0 +1,26 @@
+import { FcrDesktopMediaControl, FcrMainRoomControl } from 'agora-edu-core';
+import { UIModule } from '../../base';
+import './index.css';
+import { FcrDeviceStore } from '../../common/device-store';
+import { FcrSecurityStore } from '../../common/security-store';
+import { FcrUIEventStore } from '../../common/event-store';
+import { FcrDeviceStreamStore } from '../../common/device-stream-store';
+export declare class ShareScreenUIModule extends UIModule {
+    private _store;
+    constructor(args: {
+        roomControl: FcrMainRoomControl;
+        mediaControl: FcrDesktopMediaControl;
+        deviceStore: FcrDeviceStore;
+        securityStore: FcrSecurityStore;
+        uiEventStore: FcrUIEventStore;
+        deviceStreamStore: FcrDeviceStreamStore;
+    });
+    getShareState(): void;
+    startShareScreen(): void;
+    stopShareScreen(): void;
+    replaceScreen(): void;
+    getComponent(): import("react/jsx-runtime").JSX.Element;
+    getSelectionComponent(): import("react/jsx-runtime").JSX.Element;
+    onUnload(): void;
+    onProcessEvent(event: RendererCustomEvent): void;
+}

package/lib/modules/share-screen/index.dev.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/modules/share-screen/index.dev.js

@@ -0,0 +1,96 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+require("core-js/modules/es.array.join.js");
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _reactDom = _interopRequireDefault(require("react-dom"));
+var _root = require("react-hot-loader/root");
+var _ = require(".");
+var _type = require("../../type");
+var _hooks = require("../../utilities/hooks");
+var _deviceStreamStore = require("../../common/device-stream-store");
+var _securityStore = require("../../common/security-store");
+var _eventStore = require("../../common/event-store");
+var _dialog = require("../dialog");
+var _button = require("agora-ui-foundation/lib/components/button");
+var _deviceStore = require("../../common/device-store");
+var _jsxRuntime = require("react/jsx-runtime");
+var App = (0, _root.hot)(function () {
+  return null;
+});
+_reactDom["default"].render( /*#__PURE__*/(0, _jsxRuntime.jsx)(App, {}), document.querySelector('#root'));
+window.__DEV_ENGINE_IS_READY__.then( /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee() {
+  var engine, roomId, roomControl, userName, deviceStore, uiEventStore, securityStore, dialogModule, uiModule, App;
+  return _regenerator["default"].wrap(function _callee$(_context) {
+    while (1) switch (_context.prev = _context.next) {
+      case 0:
+        engine = window.__DEV_ENGINE__;
+        roomId = window.__DEV_ROOM_ID__;
+        _context.next = 4;
+        return engine.login();
+      case 4:
+        roomControl = engine.createRoomControl(roomId);
+        userName = 'test-user';
+        deviceStore = new _deviceStore.FcrDeviceStore(userName, engine.getMediaControl());
+        _context.next = 9;
+        return roomControl.join({
+          userRole: _type.FcrUserRole.HOST,
+          userName: userName,
+          streamLatency: _type.FcrStreamLatencyLevel.ULTRA_LOW,
+          createStreamConfigs: []
+        });
+      case 9:
+        uiEventStore = new _eventStore.FcrUIEventStore();
+        securityStore = new _securityStore.FcrSecurityStore(roomControl.getPrivilegeControl(), roomControl.getUserControl(), roomControl.getStreamControl(), roomControl.getRoomSessionControl(), uiEventStore);
+        dialogModule = new _dialog.DialogUIModule({
+          uiEventStore: uiEventStore,
+          userInfo: roomControl.getUserControl().getLocalUser(),
+          securityStore: securityStore,
+          userControl: roomControl.getUserControl(),
+          chatRoomControl: roomControl.getChatRoomControl(),
+          deviceStore: deviceStore,
+          streamControl: roomControl.getStreamControl()
+        });
+        uiModule = new _.ShareScreenUIModule({
+          roomControl: roomControl,
+          mediaControl: engine.getMediaControl(),
+          deviceStore: deviceStore,
+          deviceStreamStore: new _deviceStreamStore.FcrDeviceStreamStore({
+            mediaControl: engine.getMediaControl(),
+            roomControl: roomControl,
+            securityStore: securityStore,
+            deviceStore: deviceStore,
+            uiEventStore: uiEventStore
+          }),
+          securityStore: securityStore,
+          uiEventStore: uiEventStore
+        });
+        App = (0, _root.hot)(function () {
+          (0, _hooks.useUnmount)(function () {
+            uiModule.onUnload();
+            roomControl.leave();
+            engine.logout();
+          });
+          return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+              children: uiModule.getShareState()
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.FcrButton, {
+              onClick: uiModule.replaceScreen,
+              children: "Replace"
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.FcrButton, {
+              onClick: uiModule.startShareScreen,
+              children: "Start"
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.FcrButton, {
+              onClick: uiModule.stopShareScreen,
+              children: "Stop"
+            }), uiModule.getComponent(), dialogModule.getComponent()]
+          });
+        });
+        _reactDom["default"].render( /*#__PURE__*/(0, _jsxRuntime.jsx)(App, {}), document.querySelector('#root'));
+      case 15:
+      case "end":
+        return _context.stop();
+    }
+  }, _callee);
+})));

package/lib/modules/share-screen/index.js

@@ -0,0 +1,171 @@
+"use strict";
+
+require("core-js/modules/es.array.iterator.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.to-string.js");
+require("core-js/modules/es.reflect.construct.js");
+require("core-js/modules/es.string.iterator.js");
+require("core-js/modules/es.weak-map.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.ShareScreenUIModule = void 0;
+require("core-js/modules/es.function.bind.js");
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+var _base = require("../../base");
+var _constant = require("../../utilities/constant");
+require("./index.css");
+var _store = _interopRequireWildcard(require("./store"));
+var _view = require("./view");
+var _selection = require("./selection");
+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 _callSuper(t, o, e) { return o = (0, _getPrototypeOf2["default"])(o), (0, _possibleConstructorReturn2["default"])(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2["default"])(t).constructor) : o.apply(t, e)); }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
+var ShareScreenUIModule = exports.ShareScreenUIModule = /*#__PURE__*/function (_UIModule) {
+  function ShareScreenUIModule(args) {
+    var _this;
+    (0, _classCallCheck2["default"])(this, ShareScreenUIModule);
+    _this = _callSuper(this, ShareScreenUIModule);
+    _this._store = new _store["default"](args);
+    _this.getShareState = _this.getShareState.bind(_this);
+    _this.startShareScreen = _this.startShareScreen.bind(_this);
+    _this.stopShareScreen = _this.stopShareScreen.bind(_this);
+    _this.replaceScreen = _this.replaceScreen.bind(_this);
+    return _this;
+  }
+  (0, _inherits2["default"])(ShareScreenUIModule, _UIModule);
+  return (0, _createClass2["default"])(ShareScreenUIModule, [{
+    key: "getShareState",
+    value: function getShareState() {
+      this._store.screenSharingState;
+    }
+  }, {
+    key: "startShareScreen",
+    value: function startShareScreen() {
+      this._store.handleShareScreenResource();
+    }
+  }, {
+    key: "stopShareScreen",
+    value: function stopShareScreen() {
+      this._store.handleStopShare();
+    }
+  }, {
+    key: "replaceScreen",
+    value: function replaceScreen() {
+      this._store.handleShareScreenResource();
+    }
+  }, {
+    key: "getComponent",
+    value: function getComponent() {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_store.StoreContext.Provider, {
+        value: this._store,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_view.View, {})
+      });
+    }
+  }, {
+    key: "getSelectionComponent",
+    value: function getSelectionComponent() {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_store.StoreContext.Provider, {
+        value: this._store,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_selection.ShareSelection, {})
+      });
+    }
+  }, {
+    key: "onUnload",
+    value: function onUnload() {
+      this._store.release();
+    }
+  }, {
+    key: "onProcessEvent",
+    value: function onProcessEvent(event) {
+      var _ref = event,
+        action = _ref.action,
+        payload = _ref.payload;
+      switch (action) {
+        case _constant.RendererEventAction.FRAGMENT_LOADED:
+          if (payload === 'control-bar') {
+            this._store.setShareControlBarActive(true);
+          }
+          break;
+        case _constant.RendererEventAction.FRAGMENT_CLOSED:
+          if (payload === 'control-bar') {
+            this._store.setShareControlBarActive(false);
+            this._store.handleStopShare();
+            window.runtime.browserWindow.setFullScreen(false);
+            window.runtime.browserWindow.show();
+          }
+          break;
+        case _constant.RendererEventAction.START_NEW_SHARE_SCREEN:
+          this._store.handleReplaceScreen(payload.id, payload.type, payload.withAudio);
+          break;
+        case _constant.RendererEventAction.CLOSE_SHARE_SCREEN_SELECTION:
+          this._store.closeShareScreenSelection();
+          break;
+        case _constant.RendererEventAction.OPEN_CONTROL_BAR:
+          this._store.openControlBar();
+          break;
+        case _constant.RendererEventAction.SET_CONTROL_BAR_WINDOW_ID:
+          this._store.setControlBarWindowId(payload.controlBarWindowId);
+          break;
+        case _constant.RendererEventAction.CLOSE_CONTROL_BAR:
+          this._store.closeControlBar();
+          break;
+        case _constant.RendererEventAction.STOP_SHARE_SCREEN:
+        case _constant.RendererEventAction.POWER_MONITOR_LOCK_SCREEN:
+        case _constant.RendererEventAction.POWER_MONITOR_SUSPEND:
+          this._store.handleStopShare();
+          this._store.closeDialog(_constant.DialogKey.PARTICIPANT);
+          break;
+        case _constant.RendererEventAction.CHOOSE_NEW_CONTENT_TO_SHARE:
+          this._store.handleShareScreenResource();
+          break;
+        case _constant.RendererEventAction.SET_SHARE_WITH_AUDIO:
+          this._store.setShareWithAudio(payload.withAudio);
+          break;
+
+        // Room control actions
+        case _constant.RendererEventAction.SET_MICROPHONE_DEVICE:
+          this._store.setCurrentMicrophoneId(payload.deviceId);
+          break;
+        case _constant.RendererEventAction.SET_CAMERA_DEVICE:
+          this._store.setCurrentCameraId(payload.deviceId);
+          break;
+        case _constant.RendererEventAction.SET_SPEAKER_DEVICE:
+          this._store.setCurrentSpeakerId(payload.deviceId);
+          break;
+        case _constant.RendererEventAction.MUTE_LOCAL_AUDIO:
+          this._store.muteLocalAudio(true, payload === null || payload === void 0 ? void 0 : payload.confirmAudioShareWhileMicOff);
+          break;
+        case _constant.RendererEventAction.UNMUTE_LOCAL_AUDIO:
+          this._store.muteLocalAudio(false);
+          break;
+        case _constant.RendererEventAction.MUTE_LOCAL_VIDEO:
+          this._store.muteLocalVideo(true);
+          break;
+        case _constant.RendererEventAction.UNMUTE_LOCAL_VIDEO:
+          this._store.muteLocalVideo(false);
+          break;
+
+        // more actions
+        case _constant.RendererEventAction.OPEN_SETTING:
+          this._store.openDialog(_constant.DialogKey.DEVICE_SETTINGS);
+          break;
+        case _constant.RendererEventAction.OPEN_LIVE_STEAMING_DIALOG:
+          this._store.openLiveStreamingDialog();
+          break;
+        default:
+          break;
+      }
+    }
+  }]);
+}(_base.UIModule);