fcr-ui-scene 3.8.1 → 3.8.2

package/lib-es/modules/layout/index.css

@@ -0,0 +1,59 @@
+.layout-demo {
+  padding: 50px;
+}
+
+.layout-demo__meta {
+  padding: 0 10px 10px;
+  font-family: monospace;
+  font-size: 1rem;
+}
+
+.layout-demo__frame {
+  position: relative;
+  border: 1px solid rgba(127, 127, 127, 0.2);
+  height: 60vh;
+}
+
+.layout-demo__controls {
+  padding-top: 20px;
+  display: flex;
+  flex-flow: row wrap;
+  gap: 10px;
+}
+
+.fcr-layer {
+  position: absolute;
+  z-index: 1000;
+  height: 0;
+}
+
+.login-confirm-dialog-content {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  padding: 20px;
+}
+
+.login-confirm-dialog-content img {
+  margin-top: -36px;
+  margin-bottom: 24px;
+}
+
+.login-confirm-dialog-title {
+  font-weight: 600;
+  font-size: 16px;
+  margin-bottom: 10px;
+}
+
+.login-confirm-dialog-desc {
+  margin-bottom: 20px;
+}
+
+.login-confirm-dialog-btn {
+  width: 100%;
+}
+
+.login-confirm-dialog-content .fcr-button {
+  width: 100%;
+}

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

@@ -0,0 +1,313 @@
+// import { observer } from 'mobx-react';
+// import { useContext, useEffect } from 'react';
+// import ReactDOM from 'react-dom';
+// import { hot } from 'react-hot-loader/root';
+// import { FcrButton } from 'agora-ui-foundation/lib/components/button';
+// import { changeLanguage, getLanguage, transI18n, useI18n } from 'agora-ui-foundation/lib/i18n';
+// import { FcrUserRole } from '../../type';
+// import { LanguageName, useTheme, useUnmount } from '../../utilities/hooks';
+// import { StoreContext } from './store';
+// import { LayoutUIModule } from './index';
+// import LayoutStore, { LayoutStoreParams } from './store';
+// import { FcrUIVideoWindowData, FcrUIVideoWindowLayoutType, FcrUIWindowType } from './type';
+// import './index.css';
+// import { AgoraRteRoomConnectorType } from 'agora-rte-sdk/lib/core/scene/type';
+// import { FcrRoomConnectorType } from 'fcr-core';
+
+// const copyRoomId = () => {
+//   navigator.clipboard
+//     .writeText(window.__DEV_ROOM_ID__)
+//     .then(() => (document.title = 'Copied!'))
+//     .catch(console.error);
+//   setTimeout(() => {
+//     document.title = 'Development HTML';
+//   }, 1000);
+// };
+
+// const App = hot(() => <div>Loading...</div>);
+// ReactDOM.render(<App />, document.querySelector('#root')!);
+
+// window.__DEV_ENGINE_IS_READY__.then(async () => {
+//   // 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 eventProvider = new FcreventProvider();
+//   // const privilegeProvider = new FcrprivilegeProvider(
+//   //   roomControl.getPrivilegeControl(),
+//   //   roomControl.getUserControl(),
+//   //   roomControl.getStreamControl(),
+//   //   roomControl.getRoomSessionControl(),
+//   //   eventProvider,
+//   // );
+
+//   // const params: LayoutStoreParams = {
+//   //   deviceStore: new FcrDeviceStore({
+//   //     roomControl: roomControl,
+//   //     mediaControl: engine.getMediaControl(),
+//   //     privilegeProvider: privilegeProvider,
+//   //   }),
+//   //   eventProvider,
+//   //   userControl: roomControl.getUserControl(),
+//   //   streamControl: roomControl.getStreamControl(),
+//   //   mediaControl: engine.getMediaControl(),
+//   //   privilegeProvider: privilegeProvider,
+//   // };
+
+//   const addObserver = () => void 0;
+
+//   const bool = () => Math.random() < 0.5;
+//   const sample = <T,>(a: T[]): T => a[(Math.random() * a.length) | 0];
+//   const connectorTypes = [
+//     FcrRoomConnectorType.NONE,
+//     FcrRoomConnectorType.PSTN,
+//     FcrRoomConnectorType.SIP,
+//     FcrRoomConnectorType.H323,
+//   ];
+
+//   const params: LayoutStoreParams = {
+//     deviceStore: { addObserver },
+//     eventProvider: { addObserver, toggleLayout: bool, updateAside: bool },
+//     userControl: {
+//       addObserver,
+//       getLocalUser() {
+//         return {
+//           userId: '0',
+//           userName: '0',
+//           userRole: FcrUserRole.HOST,
+//           connectorType: sample(connectorTypes),
+//         };
+//       },
+//     },
+//     streamControl: {
+//       addObserver,
+//       getStreams() {
+//         return {};
+//       },
+//     },
+//     mediaControl: { addObserver },
+//     privilegeProvider: {
+//       addObserver,
+//       allowChat: bool,
+//       allowUnmuteSelfVideo: bool,
+//       allowUnmuteSelfAudio: bool,
+//     },
+//   } as any;
+
+//   const layoutUIModule = new LayoutUIModule(params);
+//   const store = new LayoutStore(params);
+//   store.updateSlots({
+//     stateBar: (
+//       <div key="state-bar" className="fcr-state-bar">
+//         StateBar
+//       </div>
+//     ),
+//     actionBar: (
+//       <div key="action-bar" className="fcr-action-bar">
+//         ActionBar
+//       </div>
+//     ),
+//     chat: (
+//       <div key="chat" className="fcr-chat">
+//         Chat Panel
+//       </div>
+//     ),
+//   });
+//   store.updateAsideContent(false, false);
+
+//   const mockUser = (id: string): FcrUIVideoWindowData => ({
+//     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: FcrUIWindowType.VIDEO,
+//     isMySelf: false,
+//     isPin: false,
+//     isSpeakerSpotlight: false,
+//     videoSourceType: 1,
+//     ownerRoleType: 1,
+//     sortingPriority: 0,
+//     videoStreamConnectorType: AgoraRteRoomConnectorType.NONE,
+//   });
+
+//   (window as any).__layout = store;
+//   (window as any).__add_user = (id = Math.random().toString(36).slice(2)) => {
+//     // store.addOrUpdateStream(mockUser(id));
+//   };
+//   (window as any).__clear = () => {
+//     // store._clearStreams();
+//   };
+//   (window as any).__submit_user = () => {
+//     const ref = mockUser('0');
+//     const form = document.querySelector('#custom-user') as HTMLFormElement;
+//     // 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;
+//     //     }
+//     //   }
+//     // });
+//   };
+
+//   const App = hot(
+//     observer(() => {
+//       const t = useI18n();
+//       const [theme, toggleTheme] = useTheme();
+//       const { layout, collapsed, aside } = useContext(StoreContext);
+
+//       useEffect(() => {
+//         (window as any).__add_user();
+//         setTimeout(() => {
+//           const form = document.querySelector('#custom-user') as HTMLFormElement;
+//           // 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 as any).__submit_user;
+//         });
+//       }, []);
+
+//       useUnmount(() => {
+//         layoutUIModule.release();
+//         // roomControl.leave();
+//         // engine.logout();
+//       });
+
+//       return (
+//         <div className="layout-demo">
+//           <div className="layout-demo__meta">
+//             <button onClick={copyRoomId}>Room: {window.__DEV_ROOM_ID__}</button>
+//           </div>
+//           <div className="layout-demo__frame">{layoutUIModule.getDevComponent()}</div>
+//           <div className="layout-demo__controls">
+//             <FcrButton onClick={() => changeLanguage(getLanguage() === 'en' ? 'zh' : 'en')}>
+//               {LanguageName[getLanguage()] || 'English'}
+//             </FcrButton>
+//             <FcrButton onClick={toggleTheme}>
+//               {transI18n('fmt_settings_labels_theme')}
+//               {theme}
+//             </FcrButton>
+//             <FcrButton
+//               onClick={() => {
+//                 // store.toggleLayout()
+//               }}>
+//               {transI18n('fmt_statusbar_label_switchlayout')}
+//               {layout === FcrUIVideoWindowLayoutType.Gallery
+//                 ? transI18n('fmt_layout_label_gallery')
+//                 : transI18n('fmt_layout_label_speaker')}
+//             </FcrButton>
+//             <FcrButton onClick={() => store.toggleCollapsed()}>
+//               {transI18n('fmt_settings_labels_fold')}
+//               {String(collapsed)}
+//             </FcrButton>
+//             <FcrButton onClick={() => store.toggleAside()}>
+//               {transI18n('fmt_settings_labels_sidebar')}
+//               {String(aside)}
+//             </FcrButton>
+//             <FcrButton onClick={() => (window as any).__add_user()}>+1</FcrButton>
+//             <FcrButton onClick={() => (window as any).__clear()}>
+//               {transI18n('fmt_screenshare_whiteboard_button_empty')}
+//             </FcrButton>
+//           </div>
+//           <div className="layout-demo__controls">
+//             <form
+//               id="custom-user"
+//               style={{
+//                 display: 'flex',
+//                 flexFlow: 'column nowrap',
+//               }}>
+//               <p>Note: Local user id = "0".</p>
+//               <label>
+//                 videoStreamId: <input name="videoStreamId" />
+//               </label>
+//               <label>
+//                 audioStreamId: <input name="audioStreamId" />
+//               </label>
+//               <label>
+//                 audioStreamConnectorType:{' '}
+//                 <select name="audioStreamConnectorType">
+//                   <option value={FcrRoomConnectorType.NONE}>NONE</option>
+//                   <option value={FcrRoomConnectorType.PSTN}>PSTN</option>
+//                   <option value={FcrRoomConnectorType.H323}>H323</option>
+//                   <option value={FcrRoomConnectorType.SIP}>SIP</option>
+//                 </select>
+//               </label>
+//               <label>
+//                 userId: <input name="userId" />
+//               </label>
+//               <label>
+//                 isHost: <input name="isHost" type="checkbox" />
+//               </label>
+//               <label>
+//                 hasMicrophoneAudioStream: <input name="hasMicrophoneAudioStream" type="checkbox" />
+//               </label>
+//               <label>
+//                 hasLoopbackAudioStream: <input name="hasLoopbackAudioStream" type="checkbox" />
+//               </label>
+//               <label>
+//                 hasVideoStream: <input name="hasVideoStream" type="checkbox" />
+//               </label>
+//               <label>
+//                 isMyself: <input name="isMyself" type="checkbox" />
+//               </label>
+//               <label>
+//                 userName: <input name="userName" />
+//               </label>
+//               <label>
+//                 hasScreenSharing: <input name="hasScreenSharing" type="checkbox" />
+//               </label>
+//               <label>
+//                 canOperateAudioPublishPrivilege:{' '}
+//                 <input name="canOperateAudioPublishPrivilege" type="checkbox" />
+//               </label>
+//               <label>
+//                 volume: <input name="volume" type="range" min={0} max={100} step={1} />
+//               </label>
+//               <label>
+//                 isBroken: <input name="isBroken" type="checkbox" />
+//               </label>
+//               <label>
+//                 isCamera: <input name="isCamera" type="checkbox" />
+//               </label>
+//             </form>
+//           </div>
+//         </div>
+//       );
+//     }),
+//   );
+
+//   ReactDOM.render(
+//     <StoreContext.Provider value={store}>
+//       <App />
+//     </StoreContext.Provider>,
+//     document.getElementById('root'),
+//   );
+// });

package/lib-es/modules/layout/index.js

@@ -0,0 +1,74 @@
+import "core-js/modules/es.reflect.construct.js";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
+import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
+import _inherits from "@babel/runtime/helpers/inherits";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+var _excluded = ["globalToast", "confirm"];
+import "core-js/modules/es.error.cause.js";
+import "core-js/modules/es.error.to-string.js";
+import "core-js/modules/es.array.concat.js";
+function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(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; })(); }
+import { UIModule } from '../../base';
+import { StoreContext } from './store.base';
+import { View } from './view';
+import { isElectron } from 'agora-foundation/lib/utilities/env';
+import LayoutStoreElectron from './store.electron';
+import LayoutStoreBrowser from './store.browser';
+import { jsx as _jsx } from "react/jsx-runtime";
+export var LayoutUIModule = /*#__PURE__*/function (_UIModule) {
+  function LayoutUIModule() {
+    var _this;
+    _classCallCheck(this, LayoutUIModule);
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    _this = _callSuper(this, LayoutUIModule, [].concat(args));
+    _defineProperty(_this, "_store", null);
+    return _this;
+  }
+  _inherits(LayoutUIModule, _UIModule);
+  return _createClass(LayoutUIModule, [{
+    key: "store",
+    get: function get() {
+      if (!this._store) {
+        throw new Error('LayoutStore is not initialized');
+      }
+      return this._store;
+    }
+  }, {
+    key: "onNodeWillActive",
+    value: function onNodeWillActive() {
+      var args = {
+        objectManager: this.objectManager
+      };
+      this._store = isElectron() ? new LayoutStoreElectron(args) : new LayoutStoreBrowser(args);
+    }
+  }, {
+    key: "onNodeWillInactive",
+    value: function onNodeWillInactive() {
+      this.store.release();
+    }
+  }, {
+    key: "getComponent",
+    value: function getComponent() {
+      var slots = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+      var globalToast = slots.globalToast,
+        confirm = slots.confirm,
+        restSlots = _objectWithoutProperties(slots, _excluded);
+      this.store.updateSlots(restSlots);
+      return /*#__PURE__*/_jsx(StoreContext.Provider, {
+        value: this.store,
+        children: /*#__PURE__*/_jsx(View, {})
+      });
+    }
+  }, {
+    key: "getDevComponent",
+    value: function getDevComponent() {
+      return /*#__PURE__*/_jsx(View, {});
+    }
+  }]);
+}(UIModule);