fcr-ui-scene 3.3.1 → 3.4.1

package/lib/modules/control-bar/components/share-state-nav/index.css

@@ -0,0 +1,74 @@
+.share-state-nav {
+  height: 30px;
+  background-color: var(--fcr_ui_scene_ramp_green6);
+  width: fit-content;
+  margin: 0 auto;
+  padding-left: 8px;
+  gap: 6px;
+  box-sizing: border-box;
+  overflow: hidden;
+  font-size: 12px;
+  color: var(--fcr_ui_scene_black8);
+}
+
+.share-state-nav-top {
+  border-radius: 0 0 var(--fcr_cornerradius_xs) var(--fcr_cornerradius_xs);
+}
+
+.share-state-nav-bottom {
+  border-radius: var(--fcr_cornerradius_xs) var(--fcr_cornerradius_xs) 0 0;
+}
+
+.share-action-nav__hidden .share-state-nav-top,
+.share-action-nav__hidden .share-state-nav-bottom {
+  border-radius: var(--fcr_cornerradius_xs);
+}
+
+.share-state-nav__drag-icon {
+  transform: rotate(90deg);
+}
+
+.share-state-nav__drag-button,
+.share-state-nav__transfer-position {
+  border-radius: var(--fcr_cornerradius_xs);
+}
+
+.share-state-nav__drag-button:hover,
+.share-state-nav__transfer-position:hover {
+  background-color: var(--fcr_ui_scene_white4);
+}
+
+.share-state-nav__stop-share {
+  background-color: var(--fcr_ui_scene_ramp_red6);
+  height: 100%;
+  padding: 0 6px;
+  color: var(--fcr_ui_scene_white10);
+  font-size: 12px;
+  cursor: pointer;
+}
+
+.share-state-nav__stop-share:active {
+  background-color: var(--fcr_ui_scene_ramp_red8);
+}
+
+.share-state-nav__state-text {
+  margin-right: 28px;
+}
+
+.fcr-control-bar-recoding-on-icon {
+  animation: breath 1.5s linear infinite;
+}
+
+@keyframes breath {
+  from {
+    opacity: 1;
+  }
+
+  50% {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}

package/lib/modules/control-bar/components/share-state-nav/index.d.ts

@@ -0,0 +1,10 @@
+import { TransferPosition } from '../transfer-position-icon';
+import './index.css';
+interface IShareStateNav {
+    onShareStateNavTransferPosition: (targetPosition: TransferPosition) => void;
+    onStopShare: () => void;
+    currentPosition: TransferPosition;
+}
+export declare const DragIcon: () => import("react/jsx-runtime").JSX.Element;
+export declare const ShareStateNav: (props: IShareStateNav) => import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/modules/control-bar/components/share-state-nav/index.js

@@ -0,0 +1,116 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ShareStateNav = exports.DragIcon = void 0;
+var _icon = require("agora-ui-foundation/lib/components/icon");
+var _type = require("agora-ui-foundation/lib/components/icon/type");
+var _microphoneState = require("agora-ui-foundation/lib/components/room-screen-share-state-bar/microphone-state");
+var _tooltip = require("agora-ui-foundation/lib/components/tooltip");
+var _transferPositionIcon = require("../transfer-position-icon");
+require("./index.css");
+var _mobxReact = require("mobx-react");
+var _store = require("../../store");
+var _react = require("react");
+var _type2 = require("fcr-core/lib/type");
+var _i18n = require("agora-ui-foundation/lib/i18n");
+var _meetingTime = require("../../../../hooks/meeting-time");
+var _jsxRuntime = require("react/jsx-runtime");
+var DragIcon = exports.DragIcon = function DragIcon() {
+  var transI18n = (0, _i18n.useI18n)();
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip.FcrToolTip, {
+    content: transI18n('fmt_popup_button_drag'),
+    trigger: "hover",
+    mouseEnterDelay: 0,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "share-state-nav__drag-button",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+        type: _type.FcrIconType.FCR_WHITEBOARD_MOVE,
+        className: "share-state-nav__drag-icon",
+        colors: {
+          iconPrimary: 'var(--fcr_ui_scene_black8)'
+        },
+        size: 20
+      })
+    })
+  });
+};
+var ShareStateNav = exports.ShareStateNav = (0, _mobxReact.observer)(function (props) {
+  var onShareStateNavTransferPosition = props.onShareStateNavTransferPosition,
+    currentPosition = props.currentPosition;
+  var _useContext = (0, _react.useContext)(_store.StoreContext),
+    roomDuration = _useContext.roomDuration,
+    startTime = _useContext.startTime,
+    isMuteAudio = _useContext.isMuteAudio,
+    cloudRecordingState = _useContext.cloudRecordingState;
+  var _useMeetingTime = (0, _meetingTime.useMeetingTime)({
+      duration: roomDuration,
+      startTime: startTime
+    }),
+    meetingTime = _useMeetingTime.meetingTime,
+    totalHourText = _useMeetingTime.totalHourText,
+    totalMinuteText = _useMeetingTime.totalMinuteText;
+  var totalMins = (0, _react.useMemo)(function () {
+    return Math.floor(roomDuration / 1000 / 60);
+  }, [roomDuration]);
+  var transI18n = (0, _i18n.useI18n)();
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: "share-state-nav fcr-flex fcr-items-center \n                 fcr-justify-center share-action-nav__can-draggable \n                ".concat(currentPosition === _transferPositionIcon.TransferPosition.TOP ? 'share-state-nav-top' : 'share-state-nav-bottom'),
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(DragIcon, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_transferPositionIcon.TransferPositionIcon, {
+      onTransferPositionButtonClick: onShareStateNavTransferPosition,
+      currentPosition: currentPosition
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "share-state-nav__state-text",
+      children: transI18n('fmt_settings_tips_sharing')
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip.FcrToolTip, {
+      trigger: "hover",
+      mouseEnterDelay: 0,
+      content: isMuteAudio ? transI18n('fmt_popup_label_muted') : transI18n('fmt_popup_label_turnedon'),
+      placement: "bottom",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_microphoneState.MicrophoneState, {
+          isMicrophoneMuted: isMuteAudio
+        })
+      })
+    }), cloudRecordingState !== _type2.FcrRecordingState.Stopped && cloudRecordingState !== _type2.FcrRecordingState.Paused && /*#__PURE__*/(0, _jsxRuntime.jsx)(RecordingOn, {}), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "share-state-nav__stop-share fcr-flex fcr-items-center fcr-justify-center",
+      onClick: props.onStopShare,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+        type: _type.FcrIconType.FCR_RECORDING_STOP,
+        size: 20,
+        colors: {
+          iconPrimary: 'var(--fcr_ui_scene_white10)'
+        }
+      }), transI18n('fmt_screenshare_controlbar_button_stop')]
+    })]
+  });
+});
+var RecordingOn = /*#__PURE__*/(0, _react.memo)(function () {
+  var transI18n = (0, _i18n.useI18n)();
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip.FcrToolTip, {
+    content: transI18n('fmt_record_tips_Cloudrecording'),
+    placement: "bottom",
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+      className: "fcr-control-bar-recoding-on",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("svg", {
+        width: 20,
+        height: 20,
+        viewBox: "0 0 48 48",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+          fillRule: "evenodd",
+          clipRule: "evenodd",
+          d: "M36.3 24C36.3 30.7931 30.7931 36.3 24 36.3C17.2069 36.3 11.7 30.7931 11.7 24C11.7 17.2069 17.2069 11.7 24 11.7C30.7931 11.7 36.3 17.2069 36.3 24ZM39 24C39 32.2843 32.2843 39 24 39C15.7157 39 9 32.2843 9 24C9 15.7157 15.7157 9 24 9C32.2843 9 39 15.7157 39 24Z",
+          fill: "var(--fcr_ui_scene_black8)"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+          className: "fcr-control-bar-recoding-on-icon",
+          fillRule: "evenodd",
+          clipRule: "evenodd",
+          d: "M24 32C28.4183 32 32 28.4183 32 24C32 19.5817 28.4183 16 24 16C19.5817 16 16 19.5817 16 24C16 28.4183 19.5817 32 24 32Z",
+          fill: "var(--fcr_ui_scene_ramp_red6)"
+        })]
+      })
+    })
+  });
+});

package/lib/modules/control-bar/components/stop-live-streaming/index.d.ts

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

package/lib/modules/control-bar/components/stop-live-streaming/index.js

@@ -0,0 +1,36 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StopLiveStreamingButton = void 0;
+var _type = require("agora-ui-foundation/lib/components/icon/type");
+var _tooltipsButton = require("agora-ui-foundation/lib/components/tooltips-button");
+var _react = require("react");
+var _store = require("../../store");
+var _mobxReact = require("mobx-react");
+var _i18n = require("agora-ui-foundation/lib/i18n");
+var _jsxRuntime = require("react/jsx-runtime");
+var StopLiveStreamingButton = exports.StopLiveStreamingButton = (0, _mobxReact.observer)(function () {
+  var _useContext = (0, _react.useContext)(_store.StoreContext),
+    openLiveStreamingDialog = _useContext.openLiveStreamingDialog;
+  var transI18n = (0, _i18n.useI18n)();
+  var handleTooltipButtonClick = function handleTooltipButtonClick() {
+    openLiveStreamingDialog();
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltipsButton.FrcTooltipButton, {
+    tooltip: {
+      content: transI18n('fmt_tips_button_Stopolive'),
+      icon: {
+        type: _type.FcrIconType.FCR_STOPLIVE,
+        size: 32,
+        colors: {
+          iconPrimary: 'var(--fcr_web_ui_scene_mainicon1)'
+        }
+      }
+    },
+    onTooltipButtonClick: handleTooltipButtonClick,
+    withPopover: false
+  });
+});

package/lib/modules/control-bar/components/stop-live-streaming/stop-button.d.ts

@@ -0,0 +1,6 @@
+import { MoreAction } from '../../type';
+declare const StopLiveContent: (props: {
+    handleMoreClick: (type: MoreAction) => void;
+    onCancel: () => void;
+}) => import("react/jsx-runtime").JSX.Element;
+export default StopLiveContent;

package/lib/modules/control-bar/components/stop-live-streaming/stop-button.js

@@ -0,0 +1,35 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _button = require("agora-ui-foundation/lib/components/button");
+var _i18n = require("agora-ui-foundation/lib/i18n");
+var _type = require("../../type");
+var _jsxRuntime = require("react/jsx-runtime");
+var StopLiveContent = function StopLiveContent(props) {
+  var handleMoreClick = props.handleMoreClick,
+    onCancel = props.onCancel;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: "leave-room-dialog-content",
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "leave-room-dialog-title",
+      children: [(0, _i18n.transI18n)('fmt_popup_copywrite_stopstreamingnow'), "?"]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.FcrButton, {
+      styleType: "danger",
+      size: "S",
+      onClick: function onClick() {
+        handleMoreClick(_type.MoreAction.STOP_LIVE_STREAMING);
+      },
+      children: (0, _i18n.transI18n)('fmt_popup_options_confirmstop')
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.FcrButton, {
+      size: "S",
+      type: "secondary-bordered",
+      onClick: onCancel,
+      children: (0, _i18n.transI18n)('fmt_security_buttons_cancel')
+    })]
+  });
+};
+var _default = exports["default"] = StopLiveContent;

package/lib/modules/control-bar/components/transfer-position-icon/index.d.ts

@@ -0,0 +1,11 @@
+export declare enum TransferPosition {
+    TOP = 0,
+    BOTTOM = 1,
+    CENTER = 2
+}
+interface ITransferPositionIconProps {
+    currentPosition: TransferPosition;
+    onTransferPositionButtonClick: (targetPosition: TransferPosition) => void;
+}
+export declare const TransferPositionIcon: (props: ITransferPositionIconProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/modules/control-bar/components/transfer-position-icon/index.js

@@ -0,0 +1,46 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TransferPositionIcon = exports.TransferPosition = void 0;
+var _icon = require("agora-ui-foundation/lib/components/icon");
+var _type = require("agora-ui-foundation/lib/components/icon/type");
+var _tooltip = require("agora-ui-foundation/lib/components/tooltip");
+var _i18n = require("agora-ui-foundation/lib/i18n");
+var _jsxRuntime = require("react/jsx-runtime");
+var TransferPosition = exports.TransferPosition = /*#__PURE__*/function (TransferPosition) {
+  TransferPosition[TransferPosition["TOP"] = 0] = "TOP";
+  TransferPosition[TransferPosition["BOTTOM"] = 1] = "BOTTOM";
+  TransferPosition[TransferPosition["CENTER"] = 2] = "CENTER";
+  return TransferPosition;
+}({});
+var TransferPositionIcon = exports.TransferPositionIcon = function TransferPositionIcon(props) {
+  var currentPosition = props.currentPosition,
+    onTransferPositionButtonClick = props.onTransferPositionButtonClick;
+  var handlerTransferPositionClick = function handlerTransferPositionClick() {
+    if (currentPosition === TransferPosition.BOTTOM) {
+      onTransferPositionButtonClick(TransferPosition.TOP);
+      return;
+    }
+    onTransferPositionButtonClick(TransferPosition.BOTTOM);
+  };
+  var transI18n = (0, _i18n.useI18n)();
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip.FcrToolTip, {
+    content: currentPosition === TransferPosition.TOP ? transI18n('fmt_popup_options_placedbottom') : transI18n('fmt_popup_options_placedtop'),
+    mouseEnterDelay: 0,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "share-action-nav__not-draggable  share-state-nav__transfer-position",
+      onClick: handlerTransferPositionClick,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+        type: currentPosition === TransferPosition.TOP ? _type.FcrIconType.FCR_SHARINGBAR_DOWN : _type.FcrIconType.FCR_SHARINGBAR_UP,
+        className: "share-state-nav__transfer-position-button ",
+        colors: {
+          iconPrimary: 'var(--fcr_ui_scene_black8)'
+        },
+        size: 20
+      })
+    })
+  });
+};

package/lib/modules/control-bar/index.css

@@ -0,0 +1,341 @@
+.share-action-nav__container {
+  width: fit-content;
+}
+
+.share-action-nav {
+  height: 54px;
+  border-radius: var(--fcr_cornerradius_m);
+  border: 1px solid var(--fcr_ui_scene_line1);
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  gap: 0px;
+  padding: 8px 12px;
+  box-sizing: border-box;
+  align-items: center;
+  background-color: var(--fcr_mobile_ui_scene_color_popup_fill2);
+  width: fit-content;
+}
+
+.draggable {
+  -webkit-app-region: drag;
+}
+
+.not-draggable {
+  -webkit-app-region: no-drag;
+}
+
+.share-action-nav__media-control-group {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  gap: 30px;
+  box-sizing: border-box;
+  align-items: center;
+}
+
+.share-action-nav__button {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-items: center;
+  border-radius: var(--fcr_cornerradius_xs);
+  cursor: pointer;
+  box-sizing: border-box;
+  overflow: hidden;
+}
+
+.share-action-nav__button:hover {
+  background-color: var(--fcr_ui_scene_line1);
+}
+
+.share-action-nav__action-button {
+  width: 100%;
+  height: 36px;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-items: center;
+  justify-content: center;
+}
+
+.share-action-nav__action-button:hover {
+  background-color: var(--fcr_web_ui_scene_hover2);
+}
+
+.share-action-nav__single-button {
+  width: 46px;
+}
+
+.share-action-nav__meeting-control-group {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  gap: 16px;
+  box-sizing: border-box;
+  align-items: center;
+}
+
+.share-action-nav__popover {
+  color: var(--fcr_ui_scene_icontext1);
+  border: 0.5px solid var(--fcr_ui_scene_line1);
+  box-shadow: var(--fcr_web_light_dropup_m);
+  border-radius: var(--fcr_cornerradius_l);
+  background-color: var(--fcr_mobile_ui_scene_color_popup_fill2);
+  max-width: 300px;
+}
+
+.share-action-nav__popover .fcr-tooltip-inner {
+  width: 300px !important;
+}
+
+.share-action-nav__popover-inner-content {
+  padding: 10px 0;
+  color: var(--fcr_ui_scene_icontext1);
+  background-color: var(--fcr_mobile_ui_scene_color_popup_fill2);
+}
+
+.color-dark-gray-icontext1 {
+  color: var(--fcr_ui_scene_icontext1);
+}
+
+.share-action-nav__media-title {
+  padding-left: 14px;
+  color: var(--fcr_ui_scene_icontext1);
+  font-size: 12px;
+}
+
+.share-action-nav__popover-option {
+  border-radius: 4px;
+  height: 32px;
+  display: flex;
+  color: var(--fcr_ui_scene_icontext1);
+  align-items: center;
+  gap: 8px;
+  padding: 6px;
+  box-sizing: border-box;
+  padding-left: 38px;
+}
+
+.share-action-nav__popover-option:hover {
+  background-color: var(--fcr_web_ui_scene_hover);
+}
+
+.share-action-nav__popover-option-media-setting {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-items: center;
+  gap: 8px;
+  padding-left: 6px;
+}
+
+.share-action-nav__media-list-group .fcr-radio-transparent:hover span,
+.share-action-nav__popover-option:hover {
+  color: var(--fcr_web_ui_scene_mainicon2);
+}
+
+.share-action-nav__popover-option-media-setting:hover path {
+  fill: var(--fcr_ui_scene_ramp_brand6);
+}
+
+.share-action-nav__button .fcr-radio {
+  color: var(--fcr_ui_scene_icontext1);
+}
+
+.share-action-nav__popover .fcr-radio {
+  width: 100%;
+  border-radius: 4px;
+  height: 32px;
+  display: flex;
+  color: var(--fcr_ui_scene_icontext1);
+  align-items: center;
+  gap: 8px;
+  padding: 6px;
+  box-sizing: border-box;
+}
+
+.share-action-nav__popover .fcr-radio:hover {
+  background-color: var(--fcr_web_ui_scene_hover);
+}
+
+.share-audio-button .fcr-checkbox-label {
+  color: var(--fcr_ui_scene_icontext1);
+}
+
+.room-screen-share-state-bar {
+  display: flex;
+}
+
+.share-action-nav__can-draggable {
+  cursor: pointer;
+  /* -webkit-app-region: drag; */
+}
+
+.share-action-nav__move_to_top {
+  flex-direction: column;
+  transition: all 0.3s ease;
+}
+
+.share-action-nav__move_to_bottom {
+  flex-direction: column-reverse;
+  transition: all 0.3s ease;
+}
+
+.invisible {
+  opacity: 0;
+}
+
+.completely-hidden-in-bottom {
+  transition: all 0.3s ease;
+  transform: translateY(54px);
+}
+
+.completely-hidden-in-top {
+  transition: all 0.3s ease;
+  transform: translateY(-54px);
+}
+
+/* .radio-label-active {
+  color: var(--fcr_web_ui_scene_mainicon2);
+} */
+
+.radio-label-normal {
+  color: var(--fcr_ui_scene_icontext1);
+}
+
+.fcr-control-bar-cloud-recording-buttons {
+  width: 78px;
+  height: 36px;
+  overflow: hidden;
+  border-radius: var(--fcr_cornerradius_xs);
+  display: inline-flex;
+  align-items: stretch;
+}
+
+.fcr-control-bar-cloud-recording-buttons > button {
+  flex: 1 0 38px;
+  font-size: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.fcr-control-bar-cloud-recording-buttons:hover,
+.fcr-control-bar-cloud-recording-buttons > button:hover {
+  background-color: var(--fcr_web_ui_scene_hover2);
+}
+
+.fcr-control-bar-cloud-recording-buttons > button:first-child {
+  flex-basis: 40px;
+}
+
+.leave-title {
+  width: 100%;
+  height: 39px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  font-family: Verdana;
+  font-size: 14px;
+  font-weight: 700;
+  line-height: 18.2px;
+  text-align: center;
+
+  color: var(--fcr_ui_scene_icontext1, rgba(255, 255, 255, 1));
+}
+
+.leave-confirm {
+  width: 100%;
+  height: 36px;
+  margin-top: 15px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--fcr_ui_scene_white10);
+  background: var(--fcr_ui_scene_ramp_red6);
+  border-radius: var(--fcr_cornerradius_l);
+
+  font-family: Helvetica Neue;
+  font-size: 13px;
+  font-weight: 400;
+  line-height: 24px;
+
+  cursor: pointer;
+}
+
+.leave-cancel {
+  width: 100%;
+  height: 36px;
+  margin-top: 15px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--fcr_ui_scene_ramp_red6, rgba(251, 88, 78, 1));
+  border-radius: var(--fcr_cornerradius_l);
+  border: 1px solid var(--fcr_ui_scene_ramp_red6);
+
+  font-family: Verdana;
+  font-size: 13px;
+  font-weight: 400;
+  line-height: 24px;
+  text-align: center;
+
+  cursor: pointer;
+}
+
+.fcr-button {
+  -webkit-app-region: no-drag;
+}
+
+/* overide the default device control style for control bar */
+.share-action-nav__media-control-group .device-control {
+  width: 54px;
+  max-width: 54px;
+  min-width: 54px;
+  display: flex;
+}
+
+.share-action-nav__media-control-group .device-control-inner {
+  width: 36px;
+  height: 36px;
+  border-radius: none;
+  border-top-left-radius: var(--fcr_cornerradius_xs);
+  border-bottom-left-radius: var(--fcr_cornerradius_xs);
+  align-items: center;
+  flex-direction: row;
+  cursor: pointer;
+}
+
+.share-action-nav__media-control-group .device-control-inner:hover {
+  background: var(--fcr_web_ui_scene_hover2);
+}
+
+.share-action-nav__media-control-group .device-control-extra {
+  width: calc(54px - 34px);
+  height: 36px;
+  border-radius: 0;
+  border-top-right-radius: var(--fcr_cornerradius_xs);
+  border-bottom-right-radius: var(--fcr_cornerradius_xs);
+  position: initial;
+  cursor: pointer;
+}
+
+.share-action-nav__media-control-group .device-control-extra:hover svg {
+  transition: none;
+  transform: none;
+}
+
+.fcr-confirm-container .leave-container {
+  padding: 0;
+  width: 100%;
+  height: 100%;
+}
+.fcr-confirm-container .leave-title {
+  height: auto;
+}
+
+.fcr-control-bar .fcr-tooltip {
+  max-width: 300px;
+}

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

@@ -0,0 +1,15 @@
+import { UIAction } from '../../utilities/constant';
+import { UIModule } from '../../base';
+import './index.css';
+import { StoreConfig } from '../../type';
+export declare class ControlBarUIModule extends UIModule {
+    private _store;
+    private _securityStore;
+    private _deviceControlStore;
+    constructor(args: StoreConfig);
+    getComponent(props: {
+        params: any;
+        browserWindow: Electron.BrowserWindow;
+    }): import("react/jsx-runtime").JSX.Element;
+    onUiEvent(event: UIAction, payload: any): void;
+}