fcr-ui-scene 1.0.20 → 3.1.0-1

package/lib/modules/layout/index.d.ts

@@ -0,0 +1,10 @@
+import { UIModule } from '../../base';
+import { FcrLayoutSlots, LayoutStoreParams } from './store';
+export declare class LayoutUIModule extends UIModule {
+    private _store;
+    constructor(args: LayoutStoreParams);
+    getComponent(slots?: Partial<FcrLayoutSlots>): import("react/jsx-runtime").JSX.Element;
+    getDevComponent(): import("react/jsx-runtime").JSX.Element;
+    protected onProcessEvent(event: RendererCustomEvent): void;
+    onUnload(): void;
+}

package/lib/modules/layout/index.dev.d.ts

@@ -0,0 +1 @@
+import './index.css';

package/lib/modules/layout/index.dev.js

@@ -0,0 +1,378 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+require("core-js/modules/es.error.to-string.js");
+require("core-js/modules/es.array.slice.js");
+require("core-js/modules/es.date.to-string.js");
+require("core-js/modules/es.object.to-string.js");
+require("core-js/modules/es.regexp.to-string.js");
+require("core-js/modules/web.timers.js");
+var _mobxReact = require("mobx-react");
+var _react = require("react");
+var _reactDom = _interopRequireDefault(require("react-dom"));
+var _root = require("react-hot-loader/root");
+var _button = require("agora-ui-foundation/lib/components/button");
+var _i18n = require("agora-ui-foundation/lib/i18n");
+var _type = require("../../type");
+var _hooks = require("../../utilities/hooks");
+var _context2 = require("./context");
+var _index = require("./index");
+var _store = _interopRequireDefault(require("./store"));
+var _type2 = require("./type");
+require("./index.css");
+var _type3 = require("agora-edu-core/lib/type");
+var _type4 = require("agora-rte-sdk/lib/core/scene/type");
+var _jsxRuntime = require("react/jsx-runtime");
+var copyRoomId = function copyRoomId() {
+  navigator.clipboard.writeText(window.__DEV_ROOM_ID__).then(function () {
+    return document.title = 'Copied!';
+  })["catch"](console.error);
+  setTimeout(function () {
+    document.title = 'Development HTML';
+  }, 1000);
+};
+var App = (0, _root.hot)(function () {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    children: "Loading..."
+  });
+});
+_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 addObserver, bool, sample, connectorTypes, params, layoutUIModule, store, mockUser, App;
+  return _regenerator["default"].wrap(function _callee$(_context) {
+    while (1) switch (_context.prev = _context.next) {
+      case 0:
+        // const engine = window.__DEV_ENGINE__;
+        // const roomId = window.__DEV_ROOM_ID__;
+        // await engine.login();
+        // const roomControl = engine.createRoomControl(roomId);
+        // await roomControl.join({
+        //   userRole: FcrUserRole.HOST,
+        //   userName: 'test-user',
+        //   streamLatency: FcrStreamLatencyLevel.ULTRA_LOW,
+        //   createStreamConfigs: [],
+        // });
+        // const uiEventStore = new FcrUIEventStore();
+        // const securityStore = new FcrSecurityStore(
+        //   roomControl.getPrivilegeControl(),
+        //   roomControl.getUserControl(),
+        //   roomControl.getStreamControl(),
+        //   roomControl.getRoomSessionControl(),
+        //   uiEventStore,
+        // );
+        // const params: LayoutStoreParams = {
+        //   deviceStore: new FcrDeviceStore({
+        //     roomControl: roomControl,
+        //     mediaControl: engine.getMediaControl(),
+        //     securityStore: securityStore,
+        //   }),
+        //   uiEventStore,
+        //   userControl: roomControl.getUserControl(),
+        //   streamControl: roomControl.getStreamControl(),
+        //   mediaControl: engine.getMediaControl(),
+        //   securityStore: securityStore,
+        // };
+        addObserver = function addObserver() {
+          return void 0;
+        };
+        bool = function bool() {
+          return Math.random() < 0.5;
+        };
+        sample = function sample(a) {
+          return a[Math.random() * a.length | 0];
+        };
+        connectorTypes = [_type3.FcrRoomConnectorType.NONE, _type3.FcrRoomConnectorType.PSTN, _type3.FcrRoomConnectorType.SIP, _type3.FcrRoomConnectorType.H323];
+        params = {
+          deviceStore: {
+            addObserver: addObserver
+          },
+          uiEventStore: {
+            addObserver: addObserver,
+            toggleLayout: bool,
+            updateAside: bool
+          },
+          userControl: {
+            addObserver: addObserver,
+            getLocalUser: function getLocalUser() {
+              return {
+                userId: '0',
+                userName: '0',
+                userRole: _type.FcrUserRole.HOST,
+                connectorType: sample(connectorTypes)
+              };
+            }
+          },
+          streamControl: {
+            addObserver: addObserver,
+            getStreams: function getStreams() {
+              return {};
+            }
+          },
+          mediaControl: {
+            addObserver: addObserver
+          },
+          securityStore: {
+            addObserver: addObserver,
+            allowChat: bool,
+            allowUnmuteSelfVideo: bool,
+            allowUnmuteSelfAudio: bool
+          }
+        };
+        layoutUIModule = new _index.LayoutUIModule(params);
+        store = new _store["default"](params);
+        store.updateSlots({
+          stateBar: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: "fcr-state-bar",
+            children: "StateBar"
+          }, "state-bar"),
+          actionBar: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: "fcr-action-bar",
+            children: "ActionBar"
+          }, "action-bar"),
+          chat: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: "fcr-chat",
+            children: "Chat Panel"
+          }, "chat")
+        });
+        store.updateAsideContent(false, false);
+        mockUser = function mockUser(id) {
+          return {
+            videoStreamId: id,
+            audioStreamId: bool() ? id : Math.random().toString(36).slice(2),
+            audioStreamConnectorType: sample(connectorTypes),
+            userId: id,
+            hasMicrophoneAudioStream: bool(),
+            hasLoopbackAudioStream: bool(),
+            hasVideoStream: bool(),
+            userName: id,
+            hasScreenSharing: false,
+            windowId: '',
+            type: _type2.FcrUIWindowType.VIDEO,
+            isMySelf: false,
+            isPin: false,
+            isSpeakerSpotlight: false,
+            videoSourceType: 1,
+            ownerRoleType: 1,
+            sortingPriority: 0,
+            videoStreamConnectorType: _type4.AgoraRteRoomConnectorType.NONE
+          };
+        };
+        window.__layout = store;
+        window.__add_user = function () {
+          var id = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : Math.random().toString(36).slice(2);
+        } // store.addOrUpdateStream(mockUser(id));
+        ;
+        window.__clear = function () {
+          // store._clearStreams();
+        };
+        window.__submit_user = function () {
+          var ref = mockUser('0');
+          var form = document.querySelector('#custom-user');
+          // store.update(store.streamIdsInOrder[0], (user) => {
+          //   for (const key in form.elements) {
+          //     if (key in ref) {
+          //       const el = form.elements[key];
+          //       let value: any = (el as HTMLInputElement).value;
+          //       if (typeof ref[key as keyof FcrUIVideoWindowData] === 'boolean')
+          //         value = (el as HTMLInputElement).checked;
+          //       if (typeof ref[key as keyof FcrUIVideoWindowData] === 'number') value = +value;
+
+          //       (user as any)[key] = value;
+          //     }
+          //   }
+          // });
+        };
+        App = (0, _root.hot)((0, _mobxReact.observer)(function () {
+          var t = (0, _i18n.useI18n)();
+          var _useTheme = (0, _hooks.useTheme)(),
+            _useTheme2 = (0, _slicedToArray2["default"])(_useTheme, 2),
+            theme = _useTheme2[0],
+            toggleTheme = _useTheme2[1];
+          var _useContext = (0, _react.useContext)(_context2.StoreContext),
+            layout = _useContext.layout,
+            collapsed = _useContext.collapsed,
+            aside = _useContext.aside;
+          (0, _react.useEffect)(function () {
+            window.__add_user();
+            setTimeout(function () {
+              var form = document.querySelector('#custom-user');
+              // store.update(store.streamIdsInOrder[0], (user) => {
+              //   for (let key in user) {
+              //     const el = form.elements[key as any] as HTMLInputElement;
+              //     const value = (user as any)[key];
+              //     if (typeof value === 'boolean') {
+              //       el.checked = value;
+              //     } else {
+              //       el.value = value;
+              //     }
+              //   }
+              // });
+              form.oninput = window.__submit_user;
+            });
+          }, []);
+          (0, _hooks.useUnmount)(function () {
+            layoutUIModule.release();
+            // roomControl.leave();
+            // engine.logout();
+          });
+          return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+            className: "layout-demo",
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+              className: "layout-demo__meta",
+              children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("button", {
+                onClick: copyRoomId,
+                children: ["Room: ", window.__DEV_ROOM_ID__]
+              })
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+              className: "layout-demo__frame",
+              children: layoutUIModule.getDevComponent()
+            }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+              className: "layout-demo__controls",
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_button.FcrButton, {
+                onClick: function onClick() {
+                  return (0, _i18n.changeLanguage)((0, _i18n.getLanguage)() === 'en' ? 'zh' : 'en');
+                },
+                children: _hooks.LanguageName[(0, _i18n.getLanguage)()] || 'English'
+              }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_button.FcrButton, {
+                onClick: toggleTheme,
+                children: [(0, _i18n.transI18n)('fmt_settings_labels_theme'), theme]
+              }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_button.FcrButton, {
+                onClick: function onClick() {
+                  // store.toggleLayout()
+                },
+                children: [(0, _i18n.transI18n)('fmt_statusbar_label_switchlayout'), layout === _type2.FcrUIVideoWindowLayoutType.Gallery ? (0, _i18n.transI18n)('fmt_layout_label_gallery') : (0, _i18n.transI18n)('fmt_layout_label_speaker')]
+              }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_button.FcrButton, {
+                onClick: function onClick() {
+                  return store.toggleCollapsed();
+                },
+                children: [(0, _i18n.transI18n)('fmt_settings_labels_fold'), String(collapsed)]
+              }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_button.FcrButton, {
+                onClick: function onClick() {
+                  return store.toggleAside();
+                },
+                children: [(0, _i18n.transI18n)('fmt_settings_labels_sidebar'), String(aside)]
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.FcrButton, {
+                onClick: function onClick() {
+                  return window.__add_user();
+                },
+                children: "+1"
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.FcrButton, {
+                onClick: function onClick() {
+                  return window.__clear();
+                },
+                children: (0, _i18n.transI18n)('fmt_screenshare_whiteboard_button_empty')
+              })]
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+              className: "layout-demo__controls",
+              children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("form", {
+                id: "custom-user",
+                style: {
+                  display: 'flex',
+                  flexFlow: 'column nowrap'
+                },
+                children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+                  children: "Note: Local user id = \"0\"."
+                }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("label", {
+                  children: ["videoStreamId: ", /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
+                    name: "videoStreamId"
+                  })]
+                }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("label", {
+                  children: ["audioStreamId: ", /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
+                    name: "audioStreamId"
+                  })]
+                }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("label", {
+                  children: ["audioStreamConnectorType:", ' ', /*#__PURE__*/(0, _jsxRuntime.jsxs)("select", {
+                    name: "audioStreamConnectorType",
+                    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("option", {
+                      value: _type3.FcrRoomConnectorType.NONE,
+                      children: "NONE"
+                    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("option", {
+                      value: _type3.FcrRoomConnectorType.PSTN,
+                      children: "PSTN"
+                    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("option", {
+                      value: _type3.FcrRoomConnectorType.H323,
+                      children: "H323"
+                    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("option", {
+                      value: _type3.FcrRoomConnectorType.SIP,
+                      children: "SIP"
+                    })]
+                  })]
+                }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("label", {
+                  children: ["userId: ", /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
+                    name: "userId"
+                  })]
+                }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("label", {
+                  children: ["isHost: ", /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
+                    name: "isHost",
+                    type: "checkbox"
+                  })]
+                }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("label", {
+                  children: ["hasMicrophoneAudioStream: ", /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
+                    name: "hasMicrophoneAudioStream",
+                    type: "checkbox"
+                  })]
+                }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("label", {
+                  children: ["hasLoopbackAudioStream: ", /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
+                    name: "hasLoopbackAudioStream",
+                    type: "checkbox"
+                  })]
+                }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("label", {
+                  children: ["hasVideoStream: ", /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
+                    name: "hasVideoStream",
+                    type: "checkbox"
+                  })]
+                }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("label", {
+                  children: ["isMyself: ", /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
+                    name: "isMyself",
+                    type: "checkbox"
+                  })]
+                }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("label", {
+                  children: ["userName: ", /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
+                    name: "userName"
+                  })]
+                }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("label", {
+                  children: ["hasScreenSharing: ", /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
+                    name: "hasScreenSharing",
+                    type: "checkbox"
+                  })]
+                }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("label", {
+                  children: ["canOperateAudioPublishPrivilege:", ' ', /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
+                    name: "canOperateAudioPublishPrivilege",
+                    type: "checkbox"
+                  })]
+                }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("label", {
+                  children: ["volume: ", /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
+                    name: "volume",
+                    type: "range",
+                    min: 0,
+                    max: 100,
+                    step: 1
+                  })]
+                }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("label", {
+                  children: ["isBroken: ", /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
+                    name: "isBroken",
+                    type: "checkbox"
+                  })]
+                }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("label", {
+                  children: ["isCamera: ", /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
+                    name: "isCamera",
+                    type: "checkbox"
+                  })]
+                })]
+              })
+            })]
+          });
+        }));
+        _reactDom["default"].render( /*#__PURE__*/(0, _jsxRuntime.jsx)(_context2.StoreContext.Provider, {
+          value: store,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(App, {})
+        }), document.getElementById('root'));
+      case 16:
+      case "end":
+        return _context.stop();
+    }
+  }, _callee);
+})));

package/lib/modules/layout/index.js

@@ -0,0 +1,72 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+require("core-js/modules/es.reflect.construct.js");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.LayoutUIModule = void 0;
+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");
+var _context = require("./context");
+var _store = _interopRequireDefault(require("./store"));
+var _view = require("./view");
+var _jsxRuntime = require("react/jsx-runtime");
+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 LayoutUIModule = exports.LayoutUIModule = /*#__PURE__*/function (_UIModule) {
+  function LayoutUIModule(args) {
+    var _this;
+    (0, _classCallCheck2["default"])(this, LayoutUIModule);
+    _this = _callSuper(this, LayoutUIModule);
+    _this._store = new _store["default"](args);
+    return _this;
+  }
+  (0, _inherits2["default"])(LayoutUIModule, _UIModule);
+  return (0, _createClass2["default"])(LayoutUIModule, [{
+    key: "getComponent",
+    value: function getComponent() {
+      var slots = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+      this._store.updateSlots(slots);
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_context.StoreContext.Provider, {
+        value: this._store,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_view.View, {})
+      });
+    }
+  }, {
+    key: "getDevComponent",
+    value: function getDevComponent() {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_view.View, {});
+    }
+  }, {
+    key: "onProcessEvent",
+    value: function onProcessEvent(event) {
+      var action = event.action;
+      switch (action) {
+        case _constant.RendererEventAction.OPEN_CHAT:
+          this._store.moveChatFromAsideToDialog();
+          break;
+        case _constant.RendererEventAction.OPEN_PARTICIPANTS:
+          this._store.moveParticipantFromAsideToDialog();
+          break;
+        case _constant.RendererEventAction.CALL_HIDE:
+          this._store.setDocumentVisibility(false);
+          break;
+        case _constant.RendererEventAction.CALL_SHOW:
+          this._store.setDocumentVisibility(true);
+          break;
+      }
+    }
+  }, {
+    key: "onUnload",
+    value: function onUnload() {
+      this._store.release();
+    }
+  }]);
+}(_base.UIModule);