fcr-ui-scene 1.0.20 → 3.1.0

package/lib/modules/state-bar/index.d.ts

@@ -0,0 +1,18 @@
+import { UIModule } from '../../base';
+import './index.css';
+import { FcrMainRoomControl } from 'agora-edu-core';
+import { FcrUIEventStore } from '../../common/event-store';
+import { FcrSecurityStore } from '../../common/security-store';
+import { FcrUISceneConfig } from '../../type';
+export declare class StateBarUIModule extends UIModule {
+    private _store;
+    constructor({ roomControl, uiEventStore, securityStore, config, }: {
+        roomControl: FcrMainRoomControl;
+        uiEventStore: FcrUIEventStore;
+        securityStore: FcrSecurityStore;
+        config: FcrUISceneConfig;
+    });
+    getComponent(): import("react/jsx-runtime").JSX.Element;
+    protected onProcessEvent(event: RendererCustomEvent): void;
+    onUnload(): void;
+}

package/lib/modules/state-bar/index.dev.d.ts

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

package/lib/modules/state-bar/index.dev.js

@@ -0,0 +1,82 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+require("core-js/modules/es.array.join.js");
+require("core-js/modules/web.timers.js");
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _ = require(".");
+var _reactDom = _interopRequireDefault(require("react-dom"));
+var _root = require("react-hot-loader/root");
+var _type = require("../../type");
+var _react = require("react");
+var _eventStore = require("../../common/event-store");
+var _securityStore = require("../../common/security-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'));
+var Layout = function Layout(props) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    style: {
+      padding: '100px 150px',
+      background: '#E3E7EF'
+    },
+    children: props.children
+  });
+};
+window.__DEV_ENGINE_IS_READY__.then( /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee() {
+  var engine, roomId, roomControl, uiEventStore, securityStore, 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);
+        _context.next = 7;
+        return roomControl.join({
+          userRole: _type.FcrUserRole.HOST,
+          userName: 'test-user',
+          streamLatency: _type.FcrStreamLatencyLevel.ULTRA_LOW,
+          createStreamConfigs: []
+        });
+      case 7:
+        setInterval(function () {
+          //@ts-ignore
+          roomControl._observable.notifyObservers('onNetworkStatsUpdated', roomId, {
+            txPacketLoss: Math.random() * 20,
+            rxPacketLoss: Math.random() * 20,
+            rtt: Math.random() * 300
+          });
+        }, 1000);
+        uiEventStore = new _eventStore.FcrUIEventStore();
+        securityStore = new _securityStore.FcrSecurityStore(roomControl.getPrivilegeControl(), roomControl.getUserControl(), roomControl.getStreamControl(), roomControl.getRoomSessionControl(), uiEventStore);
+        uiModule = new _.StateBarUIModule({
+          roomControl: roomControl,
+          uiEventStore: uiEventStore,
+          securityStore: securityStore,
+          config: {}
+        });
+        App = (0, _root.hot)(function () {
+          (0, _react.useEffect)(function () {
+            return function () {
+              uiModule.onUnload();
+              roomControl.leave();
+              engine.logout();
+            };
+          }, []);
+          return uiModule.getComponent();
+        });
+        _reactDom["default"].render( /*#__PURE__*/(0, _jsxRuntime.jsx)(Layout, {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(App, {})
+        }), document.querySelector('#root'));
+      case 13:
+      case "end":
+        return _context.stop();
+    }
+  }, _callee);
+})));

package/lib/modules/state-bar/index.js

@@ -0,0 +1,69 @@
+"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.StateBarUIModule = 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 _view = require("./view");
+var _store = _interopRequireDefault(require("./store"));
+var _context = require("./context");
+require("./index.css");
+var _constant = require("../../utilities/constant");
+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 StateBarUIModule = exports.StateBarUIModule = /*#__PURE__*/function (_UIModule) {
+  function StateBarUIModule(_ref) {
+    var _this;
+    var roomControl = _ref.roomControl,
+      uiEventStore = _ref.uiEventStore,
+      securityStore = _ref.securityStore,
+      config = _ref.config;
+    (0, _classCallCheck2["default"])(this, StateBarUIModule);
+    _this = _callSuper(this, StateBarUIModule);
+    _this._store = new _store["default"]({
+      roomControl: roomControl,
+      uiEventStore: uiEventStore,
+      securityStore: securityStore,
+      config: config
+    });
+    return _this;
+  }
+  (0, _inherits2["default"])(StateBarUIModule, _UIModule);
+  return (0, _createClass2["default"])(StateBarUIModule, [{
+    key: "getComponent",
+    value: function getComponent() {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_context.StoreContext.Provider, {
+        value: this._store,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_view.View, {})
+      });
+    }
+  }, {
+    key: "onProcessEvent",
+    value: function onProcessEvent(event) {
+      if (event.action === _constant.RendererEventAction.CLOUD_RECORDING_START) {
+        this._store.startCloudRecording();
+      } else if (event.action === _constant.RendererEventAction.CLOUD_RECORDING_PAUSE) {
+        this._store.pauseCloudRecording();
+      } else if (event.action === _constant.RendererEventAction.CLOUD_RECORDING_RESUME) {
+        this._store.resumeCloudRecording();
+      } else if (event.action === _constant.RendererEventAction.CLOUD_RECORDING_STOP) {
+        this._store.stopCloudRecording();
+      }
+    }
+  }, {
+    key: "onUnload",
+    value: function onUnload() {
+      this._store.release();
+    }
+  }]);
+}(_base.UIModule);

package/lib/modules/state-bar/layout-config.d.ts

@@ -0,0 +1,5 @@
+import './index.css';
+interface LayoutConfigProps {
+}
+export declare const LayoutConfig: (props: LayoutConfigProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/modules/state-bar/layout-config.js

@@ -0,0 +1,151 @@
+"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.LayoutConfig = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+require("core-js/modules/es.array.map.js");
+var _i18n = require("agora-ui-foundation/lib/i18n");
+var _mobxReact = require("mobx-react");
+var _useNamespace = require("../../utilities/useNamespace");
+require("./index.css");
+var _view = require("./view");
+var _icon = require("agora-ui-foundation/lib/components/icon");
+var _type = require("agora-ui-foundation/lib/components/icon/type");
+var _react = require("react");
+var _popover = require("agora-ui-foundation/lib/components/popover");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _fcr_listontop_big = _interopRequireDefault(require("../../../public/assets/fcr_listontop_big.svg"));
+var _fcr_grid_big = _interopRequireDefault(require("../../../public/assets/fcr_grid_big.svg"));
+var _context = require("./context");
+var _store = require("../setting/store");
+var _store2 = require("./store");
+var _jsxRuntime = require("react/jsx-runtime");
+var LayoutPanel = (0, _mobxReact.observer)(function (props) {
+  var ns = (0, _useNamespace.useNamespace)('layout-config-panel');
+  var _useContext = (0, _react.useContext)(_context.StoreContext),
+    openDeviceSettingDialog = _useContext.openDeviceSettingDialog;
+  var transI18n = (0, _i18n.useI18n)();
+  var options = (0, _react.useMemo)(function () {
+    return [{
+      type: 'speaker',
+      img: _fcr_listontop_big["default"],
+      text: transI18n('fmt_statusbar_opions_listontop')
+    }, {
+      type: 'gallery',
+      img: _fcr_grid_big["default"],
+      text: transI18n('fmt_statusbar_label_grid', {
+        reason1: props.gridViews
+      })
+    }];
+  }, [props.gridViews]);
+  var openDeviceSetting = function openDeviceSetting() {
+    props.setIsOpen(false);
+    openDeviceSettingDialog({
+      activeTab: _store.DeviceSettingTab.VIDEO
+    });
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: ns.b(),
+    children: [options.map(function (item) {
+      return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: (0, _classnames["default"])(ns.e('option'), ns.is('active', props.layoutView === item.type)),
+        onClick: function onClick() {
+          return props.setLayoutView(item.type);
+        },
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: ns.e('option-layout'),
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: ns.e('option-layout-inner'),
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+              className: ns.e('option-layout-img-wrapper'),
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+                className: ns.e('option-layout-img'),
+                src: item.img,
+                referrerPolicy: "no-referrer"
+              })
+            })
+          })
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: ns.e('option-text'),
+          children: item.text
+        })]
+      }, item.type);
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: ns.e('divider')
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: ns.e('setting'),
+      onClick: openDeviceSetting,
+      children: transI18n('fmt_statusbar_label_layoutsetting')
+    })]
+  });
+});
+var LayoutConfig = exports.LayoutConfig = (0, _mobxReact.observer)(function (props) {
+  var t = (0, _i18n.useI18n)();
+  var ns = (0, _useNamespace.useNamespace)('layout-config');
+  var _useContext2 = (0, _react.useContext)(_context.StoreContext),
+    toggleLayout = _useContext2.toggleLayout,
+    layoutSize = _useContext2.layoutSize,
+    layoutView = _useContext2.layoutView,
+    toggleLayoutBarLock = _useContext2.toggleLayoutBarLock,
+    galleryWidth = _useContext2.galleryWidth;
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    isOpen = _useState2[0],
+    _setIsOpen = _useState2[1];
+  var layoutIconType = (0, _react.useMemo)(function () {
+    switch (layoutView) {
+      case 'speaker':
+        return _type.FcrIconType.FCR_TOPWINDOWS;
+      case 'gallery':
+        return _type.FcrIconType.FCR_FOURWINDOWS;
+      default:
+        return _type.FcrIconType.FCR_TOPWINDOWS;
+    }
+  }, [layoutView]);
+  var handleSetLayoutView = function handleSetLayoutView(view) {
+    _setIsOpen(false);
+    toggleLayout(view);
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_view.MyFcrToolTip, {
+    content: t('fmt_uimanager_labels_Switchview'),
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_popover.FcrPopover, {
+      trigger: "click",
+      content: /*#__PURE__*/(0, _jsxRuntime.jsx)(LayoutPanel, {
+        gridViews: layoutSize,
+        layoutView: layoutView,
+        setLayoutView: handleSetLayoutView,
+        setIsOpen: function setIsOpen(visible) {
+          _setIsOpen(visible);
+          toggleLayoutBarLock(visible);
+        }
+      }),
+      visible: isOpen,
+      onVisibleChange: function onVisibleChange(visible) {
+        _setIsOpen(visible);
+        toggleLayoutBarLock(visible);
+      },
+      placement: "bottom",
+      overlayClassName: ns.e('popover'),
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: ns.b(),
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+          type: layoutIconType,
+          className: ns.e('layout-icon'),
+          size: 22
+        }), galleryWidth >= _store2.GALLERY_MIN_SIZE && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            children: t('fmt_statusbar_label_layout')
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+            type: _type.FcrIconType.FCR_DROPDOWN,
+            className: (0, _classnames["default"])(ns.e('dropdown-icon'), ns.is('open', isOpen)),
+            size: 18
+          })]
+        })]
+      })
+    })
+  });
+});

package/lib/modules/state-bar/live-streaming-state.d.ts

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

package/lib/modules/state-bar/live-streaming-state.js

@@ -0,0 +1,199 @@
+"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.LiveStreamingState = void 0;
+require("core-js/modules/es.array.filter.js");
+require("core-js/modules/es.object.to-string.js");
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _icon = require("agora-ui-foundation/lib/components/icon");
+var _type = require("agora-ui-foundation/lib/components/icon/type");
+var _popover = require("agora-ui-foundation/lib/components/popover");
+var _mobxReact = require("mobx-react");
+var _view = require("./view");
+var _dropMenu = require("agora-ui-foundation/lib/components/drop-menu");
+var _toast = require("agora-ui-foundation/lib/components/toast");
+var _react = require("react");
+var _copyText = require("../../utilities/copyText");
+var _context = require("./context");
+var _liveStreaming = _interopRequireDefault(require("./assets/live-streaming.gif"));
+var _useNamespace = require("../../utilities/useNamespace");
+var _rendererEvent = require("../../utilities/renderer-event");
+var _store = require("./store");
+var _i18n = require("agora-ui-foundation/lib/i18n");
+var _jsxRuntime = require("react/jsx-runtime");
+var LiveStreamingState = exports.LiveStreamingState = (0, _mobxReact.observer)(function () {
+  var _useContext = (0, _react.useContext)(_context.StoreContext),
+    isUserHost = _useContext.isUserHost,
+    liveStreamingPlayUrl = _useContext.liveStreamingPlayUrl,
+    stopLiveStreamingDialog = _useContext.stopLiveStreamingDialog,
+    hasStopLiveStreamingPermission = _useContext.hasStopLiveStreamingPermission,
+    hasGetLiveStreamingLinkPermission = _useContext.hasGetLiveStreamingLinkPermission,
+    toggleLayoutBarLock = _useContext.toggleLayoutBarLock,
+    galleryWidth = _useContext.galleryWidth;
+  var transI18n = (0, _i18n.useI18n)();
+  var ns = (0, _useNamespace.useNamespace)('state-bar');
+  var textRef = (0, _react.useRef)(null);
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    hideLiveStreamingInfoOnOverflow = _useState2[0],
+    setHideLiveStreamingInfoOnOverflow = _useState2[1];
+  var _useState3 = (0, _react.useState)(false),
+    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+    visible = _useState4[0],
+    setVisible = _useState4[1];
+  var popoverRef = (0, _react.useRef)(null);
+  (0, _react.useEffect)(function () {
+    var _textRef$current, _textRef$current2;
+    var MIN_WIDTH = 84;
+    var textWidth = (_textRef$current = textRef.current) === null || _textRef$current === void 0 ? void 0 : _textRef$current.offsetWidth;
+    var parentWidth = (_textRef$current2 = textRef.current) === null || _textRef$current2 === void 0 || (_textRef$current2 = _textRef$current2.parentNode) === null || _textRef$current2 === void 0 ? void 0 : _textRef$current2.offsetWidth;
+    console.log(textWidth, parentWidth);
+    if (textWidth > parentWidth || parentWidth < MIN_WIDTH || galleryWidth < _store.GALLERY_MIN_SIZE) {
+      setHideLiveStreamingInfoOnOverflow(true);
+    } else {
+      setHideLiveStreamingInfoOnOverflow(false);
+    }
+  }, [galleryWidth]);
+  (0, _react.useEffect)(function () {
+    function handleClickOutside(event) {
+      if (popoverRef.current && !popoverRef.current.contains(event.target)) {
+        setVisible(false);
+        toggleLayoutBarLock(false);
+      }
+    }
+    document.addEventListener('mousedown', handleClickOutside);
+    return function () {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, [popoverRef]);
+  var actions = [{
+    title: transI18n('fmt_statusbar_label_customwating'),
+    key: 'watchTheLiveStreamingOnACustomLiveStreamingServer',
+    hasPermission: hasGetLiveStreamingLinkPermission,
+    icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+      type: _type.FcrIconType.FCR_SHARE,
+      size: 20,
+      colors: {
+        iconPrimary: 'var(--fcr_web_ui_scene_mainicon1)'
+      }
+    }),
+    onButtonClick: function onButtonClick() {
+      setVisible(false);
+      (0, _rendererEvent.openLinkInDefaultBrowser)(liveStreamingPlayUrl);
+      toggleLayoutBarLock(false);
+    }
+  }, {
+    title: transI18n('fmt_live_label_copylink'),
+    key: 'copyLiveLink',
+    hasPermission: hasGetLiveStreamingLinkPermission,
+    icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+      type: _type.FcrIconType.FCR_ATTACH,
+      size: 20,
+      colors: {
+        iconPrimary: 'var(--fcr_web_ui_scene_mainicon1)'
+      }
+    }),
+    onButtonClick: function onButtonClick() {
+      setVisible(false);
+      toggleLayoutBarLock(false);
+      (0, _copyText.copyText)(liveStreamingPlayUrl).then(function () {
+        _toast.FcrToastApi.open({
+          toastProps: {
+            type: 'info',
+            content: transI18n('fmt_statusbar_status_coppied')
+          }
+        });
+      })["catch"](function () {
+        _toast.FcrToastApi.open({
+          toastProps: {
+            type: 'error',
+            content: transI18n('fmt_statusbar_tips_copyfailed')
+          }
+        });
+      });
+    }
+  }, {
+    title: transI18n('fmt_tips_button_Stopolive'),
+    key: 'stopLiveStreaming',
+    type: 'danger',
+    hasPermission: hasStopLiveStreamingPermission,
+    icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+      type: _type.FcrIconType.FCR_SCREENSHARING_ON,
+      size: 20,
+      colors: {
+        iconPrimary: 'var(--fcr_ui_scene_ramp_red6)'
+      }
+    }),
+    onButtonClick: function onButtonClick() {
+      setVisible(false);
+      toggleLayoutBarLock(false);
+      stopLiveStreamingDialog();
+    }
+  }];
+  var PopoverContent = function PopoverContent() {
+    var options = actions.filter(function (item) {
+      return item.hasPermission;
+    });
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: ns.e('meeting-info-drop'),
+      ref: popoverRef,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_dropMenu.FcrDropMenu, {
+        options: options
+      })
+    });
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_popover.FcrPopover, {
+    content: /*#__PURE__*/(0, _jsxRuntime.jsx)(PopoverContent, {}),
+    placement: "bottomRight",
+    visible: visible,
+    overlayInnerStyle: {
+      width: '300px',
+      boxShadow: 'none',
+      border: 'none'
+    },
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: ns.e('live-streaming'),
+      onClick: function onClick() {
+        setVisible(true);
+        toggleLayoutBarLock(true);
+      },
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_view.MyFcrToolTip, {
+        content: transI18n('fmt_statusbar_tips_onstreaming'),
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          className: ns.e('live-streaming-info'),
+          style: hideLiveStreamingInfoOnOverflow ? {
+            padding: 0
+          } : {},
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+            className: hideLiveStreamingInfoOnOverflow ? 'fcr-state-bar__live-streaming-info-live-icon small' : ns.e('live-streaming-info-live-icon'),
+            children: [!hideLiveStreamingInfoOnOverflow && /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+              src: _liveStreaming["default"],
+              alt: "live-streaming",
+              width: 20
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+              type: _type.FcrIconType.FCR_LIVEICON,
+              size: 39
+            })]
+          }), !hideLiveStreamingInfoOnOverflow && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: ns.e('live-streaming-info-text'),
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+              ref: textRef,
+              children: transI18n('fmt_live_label_customizedlive')
+            })
+          }), !hideLiveStreamingInfoOnOverflow && /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+            type: _type.FcrIconType.FCR_DROPUP4,
+            className: ns.e('live-streaming-info-icon'),
+            size: 24,
+            colors: {
+              iconPrimary: 'var(--fcr_web_ui_scene_mainicon1)'
+            }
+          })]
+        })
+      })
+    })
+  });
+});

package/lib/modules/state-bar/meeting-detail.css

@@ -0,0 +1,107 @@
+.meeting-details {
+  display: flex;
+  flex-direction: column;
+  width: 206px;
+  padding: 15px;
+  border-radius: var(--fcr_cornerradius_s);
+  background-color: var(--fcr_mobile_ui_scene_color_popup_fill2, #3c3c3c);
+  box-shadow: 0px 0px 15px 0px #8f8f8f26;
+}
+
+.meeting-details__header {
+  display: flex;
+  align-items: center;
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--fcr_ui_scene_icontext1, #ffffff);
+  user-select: none;
+}
+
+.meeting-details__content {
+  margin-top: 10px;
+}
+
+.meeting-details__content-meeting-subject {
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--fcr_ui_scene_icontext1, #ffffff);
+  word-break: break-all;
+  text-align: left;
+}
+
+.meeting-details__content-meeting-id,
+.meeting-details__content-code,
+.meeting-details__content-share-link {
+  display: flex;
+  align-items: center;
+  line-height: 32px;
+  font-size: 12px;
+  font-weight: 300;
+  color: var(--fcr_ui_scene_icontext1, #ffffff);
+}
+
+.meeting-details__content-meeting-id > span,
+.meeting-details__content-code > span {
+  font-weight: 600;
+}
+
+.meeting-details__content-meeting-id > label,
+.meeting-details__content-code > label,
+.meeting-details__content-share-link > label {
+  user-select: none;
+  flex-shrink: 0;
+}
+.meeting-details__content-meeting-id > span,
+.meeting-details__content-code > span,
+.meeting-details__content-share-link > span {
+  margin-left: 10px;
+  flex-grow: 1;
+  text-align: right;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+.meeting-details__content-code > span.none {
+  font-weight: 400 !important;
+}
+
+.meeting-details__content-meeting-id > div > svg,
+.meeting-details__content-code > div > svg,
+.meeting-details__content-share-link > div > svg {
+  flex-shrink: 0;
+  margin-left: 8px;
+  border-radius: var(--fcr_cornerradius_s, 4px);
+  cursor: pointer;
+}
+
+.meeting-details__content-meeting-id > div > svg:hover,
+.meeting-details__content-code > div > svg:hover,
+.meeting-details__content-share-link > div > svg:hover {
+  background-color: var(--fcr_web_ui_scene_hover, #c9cfe04d);
+  fill: var(--fcr_web_ui_scene_hover, #c9cfe04d);
+}
+
+.meeting-details__footer {
+  margin-top: 4px;
+  display: flex;
+}
+
+.meeting-details__footer > button {
+  flex: 1;
+}
+
+.meeting-details__footer > button > p {
+  display: flex;
+  align-items: center;
+  position: relative;
+}
+
+.meeting-details__footer > button > p > svg {
+  position: absolute;
+  left: -18px;
+}
+
+.meeting-details__footer > button > p > span {
+  margin-left: 8px;
+}

package/lib/modules/state-bar/meeting-details.d.ts

@@ -0,0 +1,2 @@
+import './meeting-detail.css';
+export declare const MeetingDetails: () => import("react/jsx-runtime").JSX.Element;