fcr-ui-scene 3.4.5 → 3.5.0

package/lib/modules/layout/components/Layout.js

@@ -0,0 +1,190 @@
+"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/esnext.weak-map.delete-all.js");
+require("core-js/modules/esnext.weak-map.emplace.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.MinAsideWidth = exports.Layout = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _mobxReact = require("mobx-react");
+var _react = _interopRequireWildcard(require("react"));
+var _icon = require("agora-ui-foundation/lib/components/icon");
+var _type = require("agora-ui-foundation/lib/components/icon/type");
+var _i18n = require("agora-ui-foundation/lib/i18n");
+var _hooks = require("../../../utilities/hooks");
+var _store = require("../store");
+var _type2 = require("../type");
+var _Aside = require("./Aside");
+var _Carousel = require("./Carousel");
+var _Gallery = require("./Gallery");
+var _utils = require("./utils");
+var _watermark = require("agora-ui-foundation/lib/components/watermark");
+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 MinAsideWidth = exports.MinAsideWidth = 320;
+var MaxAsideWidth = 460; // 20240620 设计同步
+var AsideOverflow = 100;
+var Layout = exports.Layout = (0, _mobxReact.observer)(function () {
+  var layoutStore = (0, _react.useContext)(_store.StoreContext);
+  var stateBar = layoutStore.stateBar,
+    actionBar = layoutStore.actionBar,
+    layers = layoutStore.layers,
+    layout = layoutStore.layout,
+    aside = layoutStore.aside,
+    barHovering = layoutStore.barHovering,
+    setHoveringHandler = layoutStore.setHoveringHandler,
+    resetLockTimer = layoutStore.resetLockTimer,
+    setHoveringLeaveHandler = layoutStore.setHoveringLeaveHandler,
+    asideWidth = layoutStore.asideWidth,
+    chatAction = layoutStore.chatAction,
+    barHidden = layoutStore.barHidden,
+    isRobot = layoutStore.isRobot,
+    getWaterMarkContent = layoutStore.getWaterMarkContent,
+    isMulti = layoutStore.isMulti,
+    isWaterMarkEnabled = layoutStore.isWaterMarkEnabled,
+    localUser = layoutStore.localUser;
+  var _useDelayedMeasure = (0, _hooks.useDelayedMeasure)(),
+    _useDelayedMeasure2 = (0, _slicedToArray2["default"])(_useDelayedMeasure, 2),
+    _ref = _useDelayedMeasure2[0],
+    bounds = _useDelayedMeasure2[1];
+  var getContainer;
+  var onDragHandler = (0, _react.useCallback)(function (event) {
+    event.preventDefault();
+    var handler = event.currentTarget;
+    handler.setPointerCapture(event.pointerId);
+    var startX = event.clientX;
+    var startWidth = aside ? asideWidth : 0;
+    var onPointerMove = function onPointerMove(event) {
+      var delta = event.clientX - startX;
+      var target = startWidth - delta;
+      var clamped = (0, _utils.clamp)(target, MinAsideWidth, MaxAsideWidth);
+      if (target > AsideOverflow) {
+        // setAsideWidth(() => {
+        //   // storage.set(ASIDE_WIDTH, String(clamped));
+        //   asideWidthChanged(clamped);
+        //   !aside && toggleAside(true);
+        //   return clamped;
+        // });
+        // setAsideWidth(clamped);
+      } else {
+        // aside && toggleAside(false);
+        // asideWidthChanged(0);
+      }
+    };
+    var onPointerUp = function onPointerUp() {
+      handler.onpointermove = handler.onpointerup = handler.onpointercancel = null;
+    };
+    handler.onpointermove = onPointerMove;
+    handler.onpointerup = handler.onpointercancel = onPointerUp;
+  }, [aside, bounds.width, asideWidth]);
+  var cls = (0, _classnames["default"])('fcr-layout-content-bar fcr-layout-content-bottom', {
+    'fcr-layout-content-bar--hidden': barHidden
+  });
+  var waterMarkRenderContent = (0, _react.useMemo)(function () {
+    var remoteWaterMark = getWaterMarkContent();
+    return isWaterMarkEnabled ? [remoteWaterMark] : [];
+  }, [isWaterMarkEnabled, localUser]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_watermark.WaterMark, {
+    content: waterMarkRenderContent,
+    width: isMulti ? 120 : bounds.width,
+    height: isMulti ? 64 : bounds.height,
+    multiLine: Boolean(isMulti),
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: (0, _classnames["default"])('fcr-layout', "fcr-layout-".concat(layout), {
+        'fcr-layout-hovering': barHovering
+      }),
+      onMouseEnter: setHoveringHandler,
+      onMouseLeave: setHoveringLeaveHandler,
+      onMouseMove: setHoveringHandler,
+      ref: function ref(node) {
+        getContainer = node;
+        _ref(node);
+      },
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "fcr-layout-content",
+        style: {
+          width: bounds.width - asideWidth
+        },
+        children: [!isRobot && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: "fcr-layout-content-bar fcr-layout-content-top",
+          onMouseEnter: resetLockTimer,
+          onMouseLeave: setHoveringHandler,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: "fcr-layout-content-bar-body",
+            children: stateBar
+          })
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Carousel.Carousel, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(CarouselExpandButton, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(WhoIsSpeaking, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Gallery.Gallery, {}), !isRobot && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: cls,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: "fcr-layout-content-bar-body",
+            onMouseEnter: resetLockTimer,
+            onMouseLeave: setHoveringHandler,
+            children: actionBar
+          })
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Aside.Aside, {
+        width: aside ? asideWidth : 0,
+        onDragHandler: onDragHandler,
+        chatAction: chatAction
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "fcr-layer",
+        children: layers
+      })]
+    })
+  });
+});
+var CarouselExpandButton = (0, _mobxReact.observer)(function () {
+  var _useContext = (0, _react.useContext)(_store.StoreContext),
+    collapsed = _useContext.collapsed,
+    toggleCollapsed = _useContext.toggleCollapsed;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: (0, _classnames["default"])('fcr-layout-content-expand', {
+      'fcr-layout-content-collapsed': collapsed
+    }),
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+      className: "fcr-layout-content-expand-btn",
+      onClick: function onClick() {
+        return toggleCollapsed();
+      },
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+        type: _type.FcrIconType.FCR_UP2,
+        size: 48,
+        colors: {
+          iconPrimary: 'currentColor'
+        }
+      })
+    })
+  });
+});
+var WhoIsSpeaking = (0, _mobxReact.observer)(function () {
+  var t = (0, _i18n.useI18n)();
+  var _useContext2 = (0, _react.useContext)(_store.StoreContext),
+    layout = _useContext2.layout,
+    collapsed = _useContext2.collapsed,
+    findSpotlightUser = _useContext2.findSpotlightUser;
+  var userName = findSpotlightUser === null || findSpotlightUser === void 0 ? void 0 : findSpotlightUser.userName;
+  var active = userName && layout === _type2.FcrUIVideoWindowLayoutType.Speaker && collapsed;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: (0, _classnames["default"])('fcr-layout-speaking', {
+      'fcr-layout-speaking-active': active
+    }),
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "fcr-layout-speaking-content",
+      children: t('fmt_modules_status_nowspeaking', {
+        reason1: userName
+      })
+    })
+  });
+});

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

@@ -4,7 +4,6 @@ require("core-js/modules/es.array.for-each.js");
 require("core-js/modules/es.object.define-property.js");
 require("core-js/modules/es.object.keys.js");
 require("core-js/modules/es.object.to-string.js");
-require("core-js/modules/esnext.async-iterator.for-each.js");
 require("core-js/modules/esnext.iterator.constructor.js");
 require("core-js/modules/esnext.iterator.for-each.js");
 require("core-js/modules/web.dom-collections.for-each.js");

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

@@ -0,0 +1,2 @@
+import LayoutStore from './store';
+export declare const StoreContext: import("react").Context<LayoutStore>;

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

@@ -36,7 +36,7 @@
 
 .login-confirm-dialog-content img {
   margin-top: -36px;
-  margin-bottom: 10px;
+  margin-bottom: 24px;
 }
 
 .login-confirm-dialog-title {
@@ -46,7 +46,7 @@
 }
 
 .login-confirm-dialog-desc {
-  margin-bottom: 10px;
+  margin-bottom: 20px;
 }
 
 .login-confirm-dialog-btn {

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

@@ -11,6 +11,9 @@ import { FcrUISharedInterpreterDataSource } from '../../shared-data-source/inter
 import { FcrUISharedSettingDataSource } from '../../shared-data-source/setting';
 import { FcrUIChatProvider } from '../../providers/chat-provider';
 import { FcrUIVideoWindowDataSource } from '../../shared-data-source/video-window';
+import { FcrUIMemberSharedDataSource } from '../../shared-data-source/member-data';
+import { FcrUIScreenShareProvider } from '../../providers/screen-share-provider';
+import { FcrUISharedPinDataSource } from '../../shared-data-source/pin-data';
 export declare class LayoutUIModule extends UIModule {
     private _store?;
     eventProvider?: FcrUIEventProvider;
@@ -24,6 +27,9 @@ export declare class LayoutUIModule extends UIModule {
     sharedSettingDataSource?: FcrUISharedSettingDataSource;
     chatProvider?: FcrUIChatProvider;
     sharedVideoWindowDataSource?: FcrUIVideoWindowDataSource;
+    sharedMemberDataSource?: FcrUIMemberSharedDataSource;
+    screenShareProvider?: FcrUIScreenShareProvider;
+    sharedPinDataSource?: FcrUISharedPinDataSource;
     onNodeWillActive(): void;
     onNodeWillInactive(): void;
     getComponent(slots?: Partial<FcrLayoutSlots & {

package/lib/modules/layout/index.js

@@ -53,7 +53,10 @@ var LayoutUIModule = exports.LayoutUIModule = /*#__PURE__*/function (_UIModule)
         sharedInterpreterDataSource: this.sharedInterpreterDataSource,
         sharedSettingDataSource: this.sharedSettingDataSource,
         chatProvider: this.chatProvider,
-        sharedVideoWindowDataSource: this.sharedVideoWindowDataSource
+        sharedVideoWindowDataSource: this.sharedVideoWindowDataSource,
+        sharedMemberDataSource: this.sharedMemberDataSource,
+        screenShareProvider: this.screenShareProvider,
+        sharedPinDataSource: this.sharedPinDataSource
       });
     }
   }, {

package/lib/modules/layout/member-window/index.css

@@ -0,0 +1,406 @@
+/* fcr member-window */
+.fcr-member-window {
+  width: 100%;
+  height: 100%;
+  color: var(--fcr_ui_scene_icontext1);
+  background-color: var(--fcr_ui_scene_video);
+  font-size: 12px;
+  line-height: 1;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  user-select: none;
+  position: relative;
+  overflow: hidden;
+}
+.fcr-member-window button,
+.fcr-member-board button {
+  border: none;
+  outline: none;
+}
+.fcr-member-window button:focus,
+.fcr-member-board button:focus {
+  border: none;
+  outline: none;
+}
+.fcr-member-board {
+  width: 100%;
+  height: 100%;
+  position: relative;
+}
+.fcr-member-board-mask {
+  display: none;
+  position: absolute;
+  inset: 0;
+  z-index: 2;
+}
+.fcr-member-board-mask-show {
+  display: block;
+}
+/* .fcr-member-window.fcr-member-window-suspend {
+  background-color: var(--fcr_ui_scene_video_s);
+  border-radius: 0;
+} */
+.fcr-member-window-background {
+  position: absolute;
+  inset: 0;
+  color: var(--fcr_ui_scene_icontext3);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  pointer-events: none;
+  visibility: hidden;
+}
+.fcr-member-window-is-broken {
+  visibility: visible;
+}
+
+.fcr-member-window-background svg {
+  opacity: 0.3;
+}
+
+.fcr-member-window-avatar {
+  padding: 0 20px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  position: relative;
+}
+
+.fcr-member-window-body {
+  position: absolute;
+  inset: 0;
+  font-size: 0;
+}
+.fcr-member-window-body-render-video-loading {
+  border-radius: 10px;
+  position: absolute;
+  z-index: 999;
+  display: flex;
+  top: 10px;
+  right: 13px;
+  max-width: 447px;
+  height: fit-content;
+  transition: all 0.2s;
+  padding: 6px 8px;
+  gap: 14px;
+  background: #748bff;
+  align-items: center;
+  justify-content: center;
+}
+.fcr-member-window-body-render-video-loading span {
+  color: #fff;
+  font-size: 14px;
+  line-height: 18px;
+  font-weight: 600;
+  text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.4);
+  white-space: pre-wrap;
+}
+.fcr-member-window-body-render-video-loading .render-video-loading-icon {
+  animation: loading-rotate 1s linear infinite;
+}
+
+@keyframes loading-rotate {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+.fcr-member-window-body.fcr-member-window-body-video-remote {
+  visibility: hidden;
+}
+.fcr-member-window-body.fcr-member-window-body-video-remote-render {
+  visibility: visible;
+}
+.fcr-member-window-excitation {
+  position: absolute;
+  inset: 0;
+  font-size: 0;
+  border: 2px solid var(--fcr_ui_scene_ramp_green6);
+  opacity: 0;
+}
+.fcr-member-window-excitation-show {
+  opacity: 1;
+}
+.fcr-member-window-pin {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: absolute;
+  left: 4px;
+  top: 4px;
+  width: 26px;
+  height: 26px;
+  border-radius: var(--fcr_cornerradius_xs);
+  background-color: var(--fcr_ui_scene_view_toast);
+  opacity: 0;
+  transition: opacity 0.2s;
+  z-index: 3;
+}
+.fcr-member-window-pin-show {
+  opacity: 1;
+}
+.fcr-member-board:hover .fcr-user-window-actions-top,
+.fcr-member-window:hover .fcr-user-window-actions-top {
+  opacity: 1;
+}
+.fcr-member-window-members-sharebtn {
+  display: none;
+  align-items: center;
+  justify-content: center;
+  background-color: var(--fcr_ui_scene_ramp_green6);
+  border-radius: var(--fcr_cornerradius_xxs);
+  /* padding: 0 1px; */
+  height: 18px;
+  margin-right: 2px;
+}
+.fcr-member-window-members-sharebtn-show {
+  margin-left: 0px;
+  display: flex;
+}
+/* fcr-member-window-action start */
+
+.fcr-user-window-actions {
+  position: absolute;
+  inset: 0;
+  pointer-events: auto !important;
+  transition: opacity 0.2s;
+  overflow: hidden;
+  z-index: 2;
+}
+
+.fcr-user-window-actions-hide {
+  opacity: 0;
+}
+
+.fcr-user-window-actions button {
+  pointer-events: auto;
+}
+
+.fcr-user-window-actions-bottom {
+  position: absolute;
+  inset: auto auto 4px 4px;
+  z-index: 1;
+  max-width: calc(100% - 8px);
+  height: 18px;
+  transition: opacity 0.2s;
+  opacity: 1;
+}
+
+.fcr-user-window-actions-bottom-layout {
+  color: var(--fcr_ui_scene_icontext1);
+  font-weight: var(--fcr_font_weight_m);
+  font-size: 12px;
+  backdrop-filter: blur(25px);
+  display: inline-flex;
+  align-items: center;
+  overflow: hidden;
+}
+.fcr-user-window-actions-bottom-layout-info {
+  border-radius: var(--fcr_cornerradius_xxs);
+  background-color: var(--fcr_ui_scene_view_toast);
+  display: inline-flex;
+  align-items: center;
+  overflow: hidden;
+}
+.fcr-user-window-actions-bottom-interpreter-tag {
+  margin-left: 8px;
+}
+.fcr-member-board .fcr-user-window-actions-bottom-show,
+.fcr-member-window .fcr-user-window-actions-bottom-show {
+  opacity: 1;
+}
+.fcr-member-board:hover .fcr-user-window-actions-bottom,
+.fcr-member-window:hover .fcr-user-window-actions-bottom {
+  opacity: 1;
+}
+.fcr-member-window-gallery .fcr-user-window-actions-bottom {
+  height: 24px;
+  border-radius: var(--fcr_cornerradius_s);
+  font-size: 12px;
+}
+
+.fcr-user-window-actions-tag {
+  height: 18px;
+  border-radius: var(--fcr_cornerradius_xxs);
+  display: inline-flex;
+  align-items: center;
+  white-space: nowrap;
+}
+
+.fcr-member-window-gallery .fcr-user-window-actions-tag {
+  height: 24px;
+  border-radius: var(--fcr_cornerradius_s);
+}
+
+.fcr-user-window-actions-tag-host {
+  color: var(--fcr_ui_scene_white10);
+  background: linear-gradient(90deg, #4262ff, #7c79ff);
+  padding: 0 8px;
+  margin-right: 10px;
+}
+
+.fcr-user-window-actions-tag-host:has(svg) {
+  padding-left: 4px;
+}
+
+.fcr-user-window-actions-volume {
+  color: var(--fcr_ui_scene_icontext1);
+  --fcr-volume-icon-color: var(--fcr_ui_scene_icontext1);
+}
+
+.fcr-user-window-actions-tag-host .fcr-user-window-actions-volume {
+  color: var(--fcr_ui_scene_white10);
+  --fcr-volume-icon-color: var(--fcr_ui_scene_white10);
+}
+
+.fcr-member-window-gallery .fcr-user-window-actions-tag-host {
+  padding: 0 13px;
+}
+
+.fcr-member-window-gallery .fcr-user-window-actions-tag-host:has(svg) {
+  padding-left: 6px;
+}
+
+.fcr-user-window-actions-microphone {
+  padding: 1px;
+  align-self: stretch;
+  display: inline-flex;
+  align-items: center;
+  color: var(--fcr_ui_scene_icontext1);
+  border-radius: var(--fcr_cornerradius_xxs);
+  background-color: var(--fcr_ui_scene_view_toast);
+  cursor: default;
+}
+
+.fcr-user-window-actions-tag-host .fcr-user-window-actions-microphone {
+  color: var(--fcr_ui_scene_white10);
+}
+
+.fcr-user-window-has-audio .fcr-user-window-actions-microphone {
+  display: none;
+}
+
+.fcr-member-window-gallery .fcr-user-window-actions-microphone {
+  padding: 0;
+  background-color: transparent;
+}
+
+.fcr-user-window-actions-tag ~ .fcr-user-window-actions-microphone {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+.fcr-user-window-actions-tag:has(~ .fcr-user-window-actions-microphone) {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+.fcr-user-window-actions-bottom .fcr-user-window-actions-name {
+  padding: 0 2px;
+  font-weight: var(--fcr_font_weight_s);
+  line-height: 1;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.fcr-user-window-actions-name-isme {
+  font-weight: normal;
+}
+
+.fcr-user-window-actions-bottom .fcr-user-window-actions-name-rename {
+  width: 20px;
+  height: 20px;
+  cursor: pointer;
+  display: none;
+}
+
+.fcr-user-window-actions-bottom:hover .fcr-user-window-actions-name-rename {
+  display: block;
+}
+
+/* .fcr-member-window-gallery .fcr-user-window-actions-name {
+  padding: 0 4px;
+} */
+
+.fcr-user-window-actions-name-doing {
+  line-height: 1;
+  font-weight: var(--fcr_font_weight_s);
+  white-space: nowrap;
+  padding-right: 6px;
+}
+
+.fcr-user-window-actions-top {
+  height: 26px;
+  position: absolute;
+  inset: 3px 3px auto;
+  display: flex;
+  flex-flow: row-reverse nowrap;
+  gap: 5px;
+  font-size: 12px;
+  opacity: 0;
+  transition: opacity 0.2s;
+  z-index: 1;
+}
+.fcr-member-window .fcr-user-window-actions-top-active {
+  opacity: 1;
+}
+.fcr-user-window-actions-more {
+  padding: 3px;
+  border-radius: var(--fcr_cornerradius_xxs);
+  background-color: var(--fcr_web_ui_scene_hover3);
+}
+
+.fcr-user-window-actions-mute {
+  padding: 0 6px;
+  border-radius: var(--fcr_cornerradius_xxs);
+  background-color: var(--fcr_web_ui_scene_hover3);
+}
+
+.fcr-user-window-actions-mute:disabled {
+  display: none;
+}
+
+.fcr-layout-content-bar {
+  position: absolute;
+  height: 0px;
+  width: 100%;
+  transition: height 0s;
+  z-index: 1;
+}
+
+.fcr-layout-speaker .fcr-layout-content-bar {
+  position: relative;
+}
+
+.fcr-layout-content-top {
+  top: 0;
+  display: flex;
+  flex-flow: column-reverse nowrap;
+  justify-content: flex-end;
+}
+
+.fcr-layout-content-top .fcr-layout-content-bar-body {
+  display: flex;
+  flex-flow: column-reverse nowrap;
+}
+
+.fcr-user-window-actions-tag_large {
+  margin-bottom: 10px;
+}
+.fcr-user-window-actions-bottom .fcr-device-settings-video__video-flip-container {
+  position: static;
+  margin-left: 2px;
+}
+.fcr-user-window-actions-bottom .fcr-device-settings-video__video-flip-container:hover {
+  background: var(--fcr_ui_scene_white10);
+}
+.fcr-user-window-actions-bottom
+  .fcr-device-settings-video__video-flip-container
+  .fcr-clickable-icon-small {
+  width: 24px;
+  height: 24px;
+  border-radius: var(--fcr_cornerradius_xs);
+}