fcr-ui-scene 1.0.40 → 3.1.0-2

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

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

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

@@ -0,0 +1,45 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.View = void 0;
+var _agoraEduCore = require("agora-edu-core");
+var _env = require("agora-foundation/lib/utilities/env");
+var _dialog = require("agora-ui-foundation/lib/components/dialog");
+var _i18n = require("agora-ui-foundation/lib/i18n");
+var _mobxReact = require("mobx-react");
+var _react = require("react");
+require("./index.css");
+var _shareStateBar = require("./share-state-bar");
+var _store = require("./store");
+var _jsxRuntime = require("react/jsx-runtime");
+var View = exports.View = (0, _mobxReact.observer)(function () {
+  var t = (0, _i18n.useI18n)();
+  var _useContext = (0, _react.useContext)(_store.StoreContext),
+    screenSharingState = _useContext.screenSharingState,
+    handleStopShare = _useContext.handleStopShare,
+    handleShareScreenResource = _useContext.handleShareScreenResource,
+    startPreview = _useContext.startPreview,
+    hasScreenCapturePermission = _useContext.hasScreenCapturePermission,
+    showConfirm = _useContext.showConfirm;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: "share-screen",
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      children: screenSharingState === _agoraEduCore.FcrMediaSourceState.STARTED && !(0, _env.isElectron)() && /*#__PURE__*/(0, _jsxRuntime.jsx)(_shareStateBar.ShareStateBar, {
+        ref: function ref(dom) {
+          return startPreview(dom);
+        },
+        onStopShare: handleStopShare
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_dialog.FcrBasicConfirmDialog, {
+      visible: showConfirm,
+      title: t('fmt_screenshare_options_allowshare'),
+      text: "Screen sharing is not available",
+      cancelText: "ignore",
+      okText: "setting",
+      onCancel: handleShareScreenResource
+    })]
+  });
+});

package/lib/modules/state-bar/assets/fcr_grid_big.svg

@@ -0,0 +1,3 @@
+<svg width="68" height="38" viewBox="0 0 68 38" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path id="fcr_grid_big" fill-rule="evenodd" clipRule="evenodd" d="M2.72 0C1.21779 0 0 1.21523 0 2.71429V9.21213C0 9.84809 0.516635 10.3636 1.15394 10.3636H14.2797C14.917 10.3636 15.4336 9.84809 15.4336 9.21213V1.15152C15.4336 0.515551 14.917 0 14.2797 0H2.72ZM18.7373 0C18.1 0 17.5833 0.51555 17.5833 1.15152V9.21213C17.5833 9.84809 18.1 10.3636 18.7373 10.3636H31.863C32.5003 10.3636 33.0169 9.84809 33.0169 9.21213V1.15152C33.0169 0.515551 32.5003 0 31.863 0H18.7373ZM52.5664 1.15152C52.5664 0.51555 53.083 0 53.7203 0H65.28C66.7822 0 68 1.21523 68 2.71429V9.21213C68 9.84809 67.4834 10.3636 66.8461 10.3636H53.7203C53.083 10.3636 52.5664 9.84809 52.5664 9.21213V1.15152ZM36.2291 0C35.5918 0 35.0752 0.51555 35.0752 1.15152V9.21213C35.0752 9.84809 35.5918 10.3636 36.2291 10.3636H49.3549C49.9922 10.3636 50.5088 9.84809 50.5088 9.21213V1.15152C50.5088 0.515551 49.9922 0 49.3549 0H36.2291ZM17.5833 27.6364C17.5833 27.0004 18.1 26.4848 18.7373 26.4848H31.863C32.5003 26.4848 33.0169 27.0004 33.0169 27.6364V36.8485C33.0169 37.4845 32.5003 38 31.863 38H18.7373C18.1 38 17.5833 37.4845 17.5833 36.8485V27.6364ZM1.15394 26.4848C0.516636 26.4848 0 27.0004 0 27.6364V35.2857C0 36.7848 1.21778 38 2.72 38H14.2797C14.917 38 15.4336 37.4845 15.4336 36.8485V27.6364C15.4336 27.0004 14.917 26.4848 14.2797 26.4848H1.15394ZM52.5664 27.6364C52.5664 27.0004 53.083 26.4848 53.7203 26.4848H66.8461C67.4834 26.4848 68 27.0004 68 27.6364V35.2857C68 36.7848 66.7822 38 65.28 38H53.7203C53.083 38 52.5664 37.4845 52.5664 36.8485V27.6364ZM36.2291 26.4848C35.5918 26.4848 35.0752 27.0004 35.0752 27.6364V36.8485C35.0752 37.4845 35.5918 38 36.2291 38H49.3549C49.9922 38 50.5088 37.4845 50.5088 36.8485V27.6364C50.5088 27.0004 49.9922 26.4848 49.3549 26.4848H36.2291ZM17.5833 13.8184C17.5833 13.1824 18.1 12.6669 18.7373 12.6669H31.863C32.5003 12.6669 33.0169 13.1824 33.0169 13.8184V23.0305C33.0169 23.6665 32.5003 24.1821 31.863 24.1821H18.7373C18.1 24.1821 17.5833 23.6665 17.5833 23.0305V13.8184ZM1.15394 12.6669C0.516636 12.6669 0 13.1824 0 13.8184V23.0305C0 23.6665 0.516635 24.1821 1.15394 24.1821H14.2797C14.917 24.1821 15.4336 23.6665 15.4336 23.0305V13.8184C15.4336 13.1824 14.917 12.6669 14.2797 12.6669H1.15394ZM52.5664 13.8184C52.5664 13.1824 53.083 12.6669 53.7203 12.6669H66.8461C67.4834 12.6669 68 13.1824 68 13.8184V23.0305C68 23.6665 67.4834 24.1821 66.8461 24.1821H53.7203C53.083 24.1821 52.5664 23.6665 52.5664 23.0305V13.8184ZM36.2291 12.6669C35.5918 12.6669 35.0752 13.1824 35.0752 13.8184V23.0305C35.0752 23.6665 35.5918 24.1821 36.2291 24.1821H49.3549C49.9922 24.1821 50.5088 23.6665 50.5088 23.0305V13.8184C50.5088 13.1824 49.9922 12.6669 49.3549 12.6669H36.2291Z" fill="#E5EAF3" fillOpacity="0.9"/>
+</svg>

package/lib/modules/state-bar/assets/fcr_listontop_big.svg

@@ -0,0 +1,3 @@
+<svg width="68" height="38" viewBox="0 0 68 38" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path id="fcr_listontop_big" fill-rule="evenodd" clipRule="evenodd" d="M4.08 0C1.82668 0 0 1.82284 0 4.07143V6.84848C0 7.48445 0.516634 8 1.15394 8H11.3724C12.0097 8 12.5263 7.48445 12.5263 6.84848V1.15152C12.5263 0.515551 12.0097 0 11.3724 0H4.08ZM2.72 10C1.21779 10 0 11.2152 0 12.7143V33.9286C0 36.1772 1.82668 38 4.08 38H63.92C66.1733 38 68 36.1772 68 33.9286V12.7143C68 11.2152 66.7822 10 65.28 10H2.72ZM28.0352 1.15152C28.0352 0.515553 28.5518 0 29.1891 0H39.4076C40.0449 0 40.5615 0.515551 40.5615 1.15152V6.84848C40.5615 7.48445 40.0449 8 39.4076 8H29.1891C28.5518 8 28.0352 7.48445 28.0352 6.84848V1.15152ZM57.224 0C56.5867 0 56.07 0.515553 56.07 1.15152V6.84848C56.07 7.48445 56.5867 8 57.224 8H66.8459C67.4832 8 67.9998 7.48445 67.9998 6.84848V4.07143C67.9998 1.82284 66.1732 0 63.9198 0H57.224ZM14.3159 1.15152C14.3159 0.515553 14.8325 0 15.4699 0H25.0918C25.7291 0 26.2457 0.515551 26.2457 1.15152V6.84848C26.2457 7.48445 25.7291 8 25.0918 8H15.4699C14.8325 8 14.3159 7.48445 14.3159 6.84848V1.15152ZM43.5047 0C42.8674 0 42.3508 0.515553 42.3508 1.15152V6.84848C42.3508 7.48445 42.8674 8 43.5047 8H53.1266C53.7639 8 54.2806 7.48445 54.2806 6.84848V1.15152C54.2806 0.515551 53.7639 0 53.1266 0H43.5047Z" fill="#E5EAF3" fillOpacity="0.9"/>
+</svg>

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

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

package/lib/modules/state-bar/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/state-bar/index.css

@@ -0,0 +1,630 @@
+.fcr-state-bar {
+  width: 100%;
+  height: 34px;
+  padding: 0 15px;
+  background: var(--fcr_web_ui_scene_fill2);
+  backdrop-filter: blur(25px);
+  display: flex;
+  justify-content: space-between;
+  column-gap: 24px;
+}
+
+/* left state-bar */
+.fcr-state-bar__left-nav {
+  height: 100%;
+  display: flex;
+  align-items: center;
+  column-gap: 5px;
+}
+
+.fcr-state-bar__logo {
+  --logo_height: 28px;
+  height: var(--logo_height);
+  width: auto;
+  min-width: var(--logo_height);
+  max-width: calc(var(--logo_height) * 3.5);
+}
+
+.fcr-state-bar__meeting-lock {
+  border-radius: var(--fcr_cornerradius_xxs);
+  border: 1px solid var(--fcr_ui_scene_line1);
+  height: 28px;
+  padding: 0 6px 0 4px;
+  font-size: 12px;
+  line-height: 1;
+  color: var(--fcr_web_ui_scene_mainicon1);
+  background: var(--fcr_web_ui_scene_fill2);
+  cursor: pointer;
+  transition: all 0.2s ease;
+  display: flex;
+  align-items: center;
+}
+
+.fcr-state-bar__meeting-lock:hover {
+  background: var(--fcr_web_ui_scene_hover);
+}
+
+.fcr-state-bar__meeting-lock-icon path {
+  fill: var(--fcr_web_ui_scene_mainicon1);
+}
+
+.fcr-state-bar__meeting-info {
+  border-radius: var(--fcr_cornerradius_xxs);
+  border: 1px solid var(--fcr_ui_scene_line1);
+  height: 28px;
+  overflow: hidden;
+  background: var(--fcr_web_ui_scene_fill2);
+  display: flex;
+  align-items: center;
+}
+
+.fcr-state-bar__info-network {
+  height: 100%;
+  padding: 4px;
+  transition: all 0.2s ease;
+  cursor: pointer;
+}
+
+.fcr-state-bar__info-network:hover {
+  background: var(--fcr_web_ui_scene_hover);
+}
+
+.fcr-state-bar__step-divider {
+}
+
+.fcr-state-bar__info-detail {
+  margin-left: 6px;
+  height: 100%;
+  padding: 0 4px 0 3px;
+  font-size: 12px;
+  line-height: 1;
+  color: var(--fcr_web_ui_scene_mainicon1);
+  background: var(--fcr_web_ui_scene_fill2);
+  cursor: pointer;
+  transition: all 0.2s ease;
+  display: flex;
+  align-items: center;
+}
+
+.fcr-state-bar__info-detail:hover {
+  background: var(--fcr_web_ui_scene_hover);
+}
+
+.fcr-state-bar__info-detail-icon path {
+  fill: var(--fcr_web_ui_scene_mainicon1);
+}
+
+.fcr-state-bar__info-meeting-id {
+  height: 100%;
+  padding: 0 6px 0 4px;
+  font-size: 12px;
+  line-height: 1;
+  color: var(--fcr_web_ui_scene_mainicon1);
+  background: var(--fcr_web_ui_scene_fill2);
+  cursor: pointer;
+  transition: all 0.2s ease;
+  display: flex;
+  align-items: center;
+}
+
+.fcr-state-bar__info-meeting-id:hover {
+  background: var(--fcr_web_ui_scene_hover);
+}
+
+/* right state-bar */
+.fcr-state-bar__right-nav {
+  height: 100%;
+  display: flex;
+  align-items: center;
+  column-gap: 5px;
+}
+
+.fcr-state-bar__record {
+  height: 28px;
+  border-radius: 4px;
+  display: inline-flex;
+  flex-flow: row nowrap;
+  align-items: stretch;
+  color: var(--fcr_ui_scene_icontext1);
+  background-color: var(--fcr_web_ui_scene_fill2);
+  border: 0.5px solid var(--fcr_ui_scene_line1);
+  position: relative;
+  overflow: hidden;
+}
+
+.fcr-state-bar__record-tag {
+  padding: 0 0 0 4px;
+  display: inline-flex;
+  flex-flow: row nowrap;
+  align-items: center;
+  white-space: nowrap;
+  font-size: 12px;
+  line-height: 1;
+  font-weight: 400;
+}
+.fcr-state-bar__record-tag.recording-min {
+  padding: 0 4px;
+}
+
+.fcr-state-bar__record-tag > svg {
+  width: 22px;
+  color: var(--fcr_ui_scene_ramp_red6);
+}
+
+.fcr-state-bar__record-tag.recording-starting > svg {
+  animation: breath 2s linear infinite;
+}
+
+@keyframes breath {
+  from {
+    opacity: 0.2;
+  }
+  50% {
+    opacity: 1;
+  }
+  to {
+    opacity: 0.2;
+  }
+}
+
+.fcr-state-bar__record-tag.recording-paused {
+  background-color: var(--fcr_ui_scene_ramp_red6);
+}
+
+.fcr-state-bar__record-tag.recording-paused {
+  padding: 0 6px;
+}
+
+.fcr-state-bar__record-tag.recording-paused > svg {
+  display: none;
+}
+
+.fcr-state-bar__record-tag.recording-paused .fcr-state-bar__record-text {
+  color: var(--fcr_ui_scene_white10);
+}
+
+.fcr-state-bar__record-text {
+  padding: 0 6px 0 3px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.fcr-state-bar__record-buttons {
+  height: 28px;
+  display: inline-flex;
+  align-items: center;
+  position: relative;
+}
+
+.fcr-state-bar__record-buttons button {
+  outline: 0;
+}
+
+.fcr-state-bar__record-buttons.recording-paused > .fcr-state-bar__record-split:first-child {
+  display: none;
+}
+
+.fcr-state-bar__record-split {
+  display: inline-block;
+  width: 1px;
+  height: 100%;
+  background: linear-gradient(transparent, var(--fcr_ui_scene_icontext1), transparent);
+}
+
+.fcr-state-bar__record-btn {
+  padding: 3px 6px;
+}
+
+.fcr-state-bar__record-btn:hover {
+  background-color: var(--fcr_web_ui_scene_hover);
+}
+
+@media (max-width: 575px) {
+  .fcr-state-bar__record-tag {
+    padding-right: 4px;
+  }
+  .fcr-state-bar__record-text {
+    display: none;
+  }
+  .fcr-state-bar__record-buttons {
+    display: none;
+  }
+  .fcr-state-bar__record-tag.recording-paused > svg {
+    display: inline-block;
+    color: var(--fcr_ui_scene_icontext1);
+  }
+  .fcr-layout-config__dropdown-icon {
+    display: none;
+  }
+  .fcr-layout-config div {
+    display: none;
+  }
+}
+
+.fcr-state-bar__time {
+}
+
+.fcr-state-bar__layout {
+}
+
+.fcr-state-bar__full-screen {
+  border-radius: var(--fcr_cornerradius_xxs);
+  border: 1px solid var(--fcr_ui_scene_line1);
+  padding: 2px;
+  cursor: pointer;
+  background: var(--fcr_web_ui_scene_fill2);
+}
+.fcr-state-bar__full-screen:hover {
+  background: var(--fcr_web_ui_scene_hover);
+}
+.fcr-state-bar__full-screen:hover .fcr-state-bar__full-screen-icon path {
+  fill: var(--fcr_web_ui_scene_mainicon2);
+}
+
+.fcr-state-bar__full-screen-icon path {
+  fill: var(--fcr_web_ui_scene_mainicon1);
+}
+
+/* network-quality */
+.fcr-network-quality {
+}
+
+/* meeting-time */
+.fcr-meeting-time {
+  border-radius: var(--fcr_cornerradius_xxs);
+  height: 28px;
+  padding: 0 10px;
+  font-size: 12px;
+  line-height: 100%;
+  font-weight: 700;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  display: flex;
+  align-items: center;
+  column-gap: 5px;
+}
+.fcr-meeting-time__icon path {
+  transition: all 0.2s ease;
+}
+
+.fcr-meeting-time--normal {
+  border: 1px solid var(--fcr_ui_scene_line2);
+  color: var(--fcr_web_ui_scene_mainicon1);
+  background: var(--fcr_web_ui_scene_fill2);
+}
+.fcr-meeting-time--normal .fcr-meeting-time__icon path {
+  fill: var(--fcr_web_ui_scene_mainicon1);
+}
+.fcr-meeting-time--normal:hover {
+  border: 1px solid var(--fcr_web_ui_scene_hover);
+  background: var(--fcr_web_ui_scene_hover);
+  color: var(--fcr_web_ui_scene_mainicon2);
+}
+.fcr-meeting-time--normal:hover .fcr-meeting-time__icon path {
+  fill: var(--fcr_web_ui_scene_mainicon2);
+}
+
+.fcr-meeting-time--soon2end {
+  border: 1px solid var(--fcr_ui_scene_ramp_yellow6);
+  color: var(--fcr_ui_scene_ramp_yellow6);
+  background: var(--fcr_web_ui_scene_fill2);
+}
+.fcr-meeting-time--soon2end .fcr-meeting-time__icon path {
+  fill: var(--fcr_ui_scene_ramp_yellow6);
+}
+.fcr-meeting-time--soon2end:hover {
+  border: 1px solid var(--fcr_ui_scene_ramp_yellow6);
+  background: var(--fcr_ui_scene_ramp_yellow6);
+  color: var(--fcr_ui_scene_white10);
+}
+.fcr-meeting-time--soon2end:hover .fcr-meeting-time__icon path {
+  fill: var(--fcr_ui_scene_white10);
+}
+
+.fcr-meeting-time--overtime {
+  border: 1px solid var(--fcr_ui_scene_ramp_red6);
+  color: var(--fcr_ui_scene_ramp_red6);
+  background: var(--fcr_web_ui_scene_fill2);
+}
+.fcr-meeting-time--overtime .fcr-meeting-time__icon path {
+  fill: var(--fcr_ui_scene_ramp_red6);
+}
+.fcr-meeting-time--overtime:hover {
+  border: 1px solid var(--fcr_ui_scene_ramp_red6);
+  background: var(--fcr_ui_scene_ramp_red6);
+  color: var(--fcr_ui_scene_white10);
+}
+.fcr-meeting-time--overtime:hover .fcr-meeting-time__icon path {
+  fill: var(--fcr_ui_scene_white10);
+}
+
+/* layout-config */
+.fcr-layout-config {
+  border-radius: var(--fcr_cornerradius_xxs);
+  border: 1px solid var(--fcr_ui_scene_line2);
+  height: 28px;
+  padding: 0 4px;
+  font-size: 12px;
+  line-height: 100%;
+  font-weight: 700;
+  color: var(--fcr_web_ui_scene_mainicon1);
+  cursor: pointer;
+  background: var(--fcr_web_ui_scene_fill2);
+  transition: all 0.2s ease;
+  display: flex;
+  align-items: center;
+}
+
+.fcr-layout-config:hover {
+  color: var(--fcr_web_ui_scene_mainicon2);
+  background: var(--fcr_web_ui_scene_hover);
+}
+
+.fcr-layout-config:hover .fcr-layout-config__layout-icon path,
+.fcr-layout-config:hover .fcr-layout-config__dropdown-icon path {
+  fill: var(--fcr_web_ui_scene_mainicon2);
+}
+
+.fcr-layout-config__layout-icon path {
+  fill: var(--fcr_web_ui_scene_mainicon1);
+  transition: all 0.2s ease;
+}
+
+.fcr-layout-config__dropdown-icon {
+  transition: all 0.2s ease;
+  transform-origin: center;
+  transform: rotate(0deg);
+}
+
+.fcr-layout-config__dropdown-icon.is-open {
+  transform: rotate(180deg);
+}
+
+.fcr-layout-config__dropdown-icon path {
+  fill: var(--fcr_web_ui_scene_mainicon1);
+  transition: all 0.2s ease;
+}
+
+.fcr-layout-config__popover .fcr-tooltip-inner {
+  border-radius: var(--fcr_cornerradius_l);
+  border: 1px solid var(--fcr_ui_scene_line1);
+  background: var(--fcr_mobile_ui_scene_color_popup_fill2);
+  box-shadow: var(--fcr_web_light_dropup_m) !important;
+  width: 120px !important;
+}
+
+.fcr-layout-config-panel {
+  padding: 0 12px;
+}
+
+.fcr-layout-config-panel__option {
+  margin-top: 15px;
+}
+.fcr-layout-config-panel__option.is-active .fcr-layout-config-panel__option-layout-inner {
+  border-color: var(--fcr_ui_scene_ramp_brand6);
+}
+
+.fcr-layout-config-panel__option-layout {
+  border-radius: var(--fcr_cornerradius_m);
+  border: 1px solid transparent;
+  padding: 2px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.fcr-layout-config-panel__option:not(.is-active) .fcr-layout-config-panel__option-layout:hover {
+  border-color: var(--fcr_ui_scene_ramp_brand6);
+}
+
+.fcr-layout-config-panel__option-layout-inner {
+  border-radius: var(--fcr_cornerradius_s);
+  border: 5px solid var(--fcr_web_ui_scene_fill4_popup);
+  transition: all 0.2s ease;
+}
+
+.fcr-layout-config-panel__option-layout-img-wrapper {
+  border-radius: var(--fcr_cornerradius_xs);
+  padding: 6px 0;
+  background: var(--fcr_web_ui_scene_fill2);
+  display: flex;
+  justify-content: center;
+}
+
+.fcr-layout-config-panel__option-layout-img {
+  width: 68px;
+  height: 38px;
+}
+
+.fcr-layout-config-panel__option-text {
+  margin-top: 3px;
+  font-size: 12px;
+  line-height: 100%;
+  font-weight: 400;
+  color: var(--fcr_ui_scene_icontext1);
+}
+
+.fcr-layout-config-panel__divider {
+  margin-top: 17px;
+  margin-bottom: 8px;
+  width: 100%;
+  height: 1px;
+  background: var(--fcr_ui_scene_line1, #e3e7ef);
+}
+
+.fcr-layout-config-panel__setting {
+  margin-bottom: 10px;
+  border-radius: var(--fcr_cornerradius_xxs);
+  padding: 9px 0;
+  font-size: 12px;
+  line-height: 100%;
+  font-weight: 400;
+  color: var(--fcr_ui_scene_icontext1);
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.fcr-layout-config-panel__setting:hover {
+  background: var(--fcr_web_ui_scene_hover);
+  color: var(--fcr_web_ui_scene_mainicon2);
+}
+
+/*  */
+.fcr-state-bar__popover .fcr-tooltip-inner {
+  border-radius: var(--fcr_cornerradius_l);
+  border: 1px solid var(--fcr_ui_scene_line1);
+  background: var(--fcr_mobile_ui_scene_color_popup_fill2);
+  box-shadow: var(--fcr_web_light_dropup_m) !important;
+  width: fit-content !important;
+}
+
+.fcr-state-bar__meeting-info {
+  font-size: 12px;
+  color: var(--fcr_ui_scene_icontext1);
+}
+
+.fcr-state-bar__meeting-info-drop .fcr-drop-menu {
+  width: 100%;
+  border: 1px solid var(--fcr_ui_scene_line1);
+  box-shadow: 0 0 15px 0 var(--fcr_web_light_dropup_m);
+}
+.fcr-state-bar__meeting-info-drop .fcr-drop-menu-option-text {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.fcr-state-bar__live-streaming-info {
+  font-size: 12px;
+  color: var(--fcr_ui_scene_icontext1);
+  display: flex;
+  align-items: center;
+  border: 1px solid var(--fcr_ui_scene_line1);
+  background-color: var(--fcr_web_ui_scene_fill2);
+  border-radius: var(--fcr_cornerradius_xxs);
+  padding-right: 4px;
+  height: 28px;
+  overflow: hidden;
+}
+.fcr-state-bar__live-streaming-info-live-icon {
+  background-color: var(--fcr_ui_scene_ramp_red6);
+  border-radius: var(--fcr_cornerradius_xxs);
+  min-width: 74px;
+  height: 28px;
+  display: flex;
+  align-items: center;
+  padding: 4px;
+}
+.fcr-state-bar__live-streaming-info-live-icon.small {
+  min-width: 51px;
+  justify-content: center;
+}
+
+.fcr-state-bar__meeting-info {
+  font-size: 12px;
+  color: var(--fcr_ui_scene_icontext1);
+}
+
+.fcr-state-bar__meeting-info-drop .fcr-drop-menu {
+  width: 100%;
+  border: 1px solid var(--fcr_ui_scene_line1);
+  box-shadow: 0 0 15px 0 var(--fcr_web_light_dropup_m);
+}
+.fcr-state-bar__meeting-info-drop .fcr-drop-menu-option-text {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.fcr-state-bar__live-streaming-info {
+  font-size: 12px;
+  color: var(--fcr_ui_scene_icontext1);
+  display: flex;
+  align-items: center;
+  border: 1px solid var(--fcr_ui_scene_line1);
+  background-color: var(--fcr_web_ui_scene_fill2);
+  border-radius: var(--fcr_cornerradius_xxs);
+  padding-right: 4px;
+  height: 28px;
+  overflow: hidden;
+}
+.fcr-state-bar__live-streaming-info-live-icon {
+  background-color: var(--fcr_ui_scene_ramp_red6);
+  border-radius: var(--fcr_cornerradius_xxs);
+  min-width: 74px;
+  height: 28px;
+  display: flex;
+  align-items: center;
+  padding: 4px;
+}
+.fcr-state-bar__live-streaming-info-text {
+  max-width: 230px;
+  white-space: nowrap;
+  margin-left: 6px;
+  overflow: hidden;
+}
+.fcr-state-bar__live-streaming-info-icon {
+  transform: rotate(180deg);
+}
+.fcr-state-bar__info-detail:hover .fcr-state-bar__lock-meeting-text,
+.fcr-state-bar__info-meeting-id:hover {
+  color: var(--fcr_web_ui_scene_mainicon2);
+}
+.fcr-state-bar__info-detail:hover .fcr-state-bar__info-detail-icon path {
+  fill: var(--fcr_web_ui_scene_mainicon2);
+}
+.fcr-state-bar__lock-meeting-text {
+  min-width: 50px;
+}
+.fcr-state-bar__meeting-info {
+  min-width: 120px;
+}
+.fcr-state-bar__lock-meeting-text {
+  min-width: 50px;
+}
+
+@media (max-width: 825px) {
+  .fcr-state-bar__record-tag {
+    padding-right: 4px;
+  }
+
+  .fcr-state-bar__record-text {
+    display: none;
+  }
+
+  .fcr-state-bar__record-buttons {
+    display: none;
+  }
+
+  .fcr-state-bar__record-tag.recording-paused > svg {
+    display: inline-block;
+    color: var(--fcr_ui_scene_icontext1);
+  }
+
+  .fcr-layout-config__dropdown-icon {
+    display: none;
+  }
+
+  .fcr-layout-config div {
+    display: none;
+  }
+  .fcr-state-bar__info-meeting-id {
+    display: none;
+  }
+  .fcr-meeting-time {
+    display: none;
+  }
+  /* .fcr-state-bar__live-streaming {
+    display: none;
+  } */
+  .fcr-state-bar__live-streaming-info {
+    padding: 0;
+  }
+  .fcr-state-bar__live-streaming-info-live-icon {
+    min-width: 51px;
+    justify-content: center;
+  }
+  .fcr-state-bar__live-streaming-info img,
+  .fcr-state-bar__live-streaming-info [data-label='fcr_dropup4'],
+  .fcr-state-bar__live-streaming-info-text {
+    display: none;
+  }
+}