fcr-ui-scene 3.4.5 → 3.5.0

package/lib/fragments/control-bar/security-content/index.css

@@ -0,0 +1,99 @@
+.security-content {
+}
+.security-content .fcr-checkbox-input-wrapper {
+  border: none;
+}
+.security-content .fcr-checkbox {
+  width: auto;
+}
+.security-content .fcr-drop-menu-title {
+  text-align: left;
+  font-size: 500;
+}
+.security-content .fcr-checkbox-inner {
+  background-color: transparent;
+  height: 24px;
+  width: 24px;
+}
+.security-content .fcr-drop-menu-option-text {
+  width: auto;
+}
+
+.security-content .fcr-checkbox-label {
+  display: inline-block;
+  flex: 1;
+  font-weight: 500;
+}
+
+.security-content .fcr-checkbox path {
+  fill: var(--fcr_ui_scene_mainicon1);
+}
+
+.fcr-drop-menu-option-primary:hover path {
+  fill: var(--fcr_ui_scene_ramp_brand6);
+}
+
+.room-control-options-box {
+  display: flex;
+  justify-content: space-between;
+}
+.room-control-options-box .fcr-checkbox {
+  width: fit-content;
+}
+
+.room-control-options-watermark-btns {
+  min-width: 104px;
+  height: 24px;
+  display: flex;
+  background-color: var(--fcr_mobile_ui_scene_fill1);
+  align-items: center;
+  padding: 2px;
+}
+
+.room-control-options-watermark-btn {
+  min-width: 50px;
+  height: 20px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: var(--fcr_ui_scene_icontext1);
+  font-size: 12px;
+  background-color: transparent;
+  padding: 0px 4px;
+  width: auto !important;
+}
+
+.security-content-more-dropdown .fcr-tooltip-inner {
+  min-width: 302px !important;
+  width: auto !important;
+}
+
+.security-content-more-dropdown .fcr-drop-menu-option {
+  width: auto !important;
+}
+
+.room-control-options-watermark-btn--active {
+  background-color: #ffffff;
+  color: var(--fcr_ui_scene_ramp_brand6);
+}
+
+.room-control-options-watermark-title-box {
+  display: flex;
+  align-items: center;
+  font-size: 13px;
+}
+
+.room-control-drop-with-under-line::after {
+  content: '';
+  position: absolute;
+  left: -10px;
+  right: -10px;
+  bottom: -12px;
+  border-top: 1px solid var(--fcr_ui_scene_line1);
+  margin: 8px 0;
+}
+
+.room-control-drop-disable {
+  opacity: 0.5;
+  cursor: not-allowed;
+}

package/lib/fragments/control-bar/security-content/index.d.ts

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

package/lib/fragments/control-bar/security-content/index.js

@@ -0,0 +1,234 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SecurityContent = void 0;
+require("core-js/modules/es.array.filter.js");
+require("core-js/modules/es.object.to-string.js");
+require("core-js/modules/esnext.async-iterator.filter.js");
+require("core-js/modules/esnext.iterator.constructor.js");
+require("core-js/modules/esnext.iterator.filter.js");
+var _dropMenu = require("agora-ui-foundation/lib/components/drop-menu");
+var _react = require("react");
+var _context = require("../context");
+var _checkbox = require("agora-ui-foundation/lib/components/checkbox");
+require("./index.css");
+var _mobxReact = require("mobx-react");
+var _i18n = require("agora-ui-foundation/lib/i18n");
+var _type = require("fcr-core/lib/type");
+var _icon = require("agora-ui-foundation/lib/components/icon");
+var _type2 = require("agora-ui-foundation/lib/components/icon/type");
+var _tooltip = require("agora-ui-foundation/lib/components/tooltip");
+var _jsxRuntime = require("react/jsx-runtime");
+var SecurityContent = exports.SecurityContent = (0, _mobxReact.observer)(function () {
+  var _useContext = (0, _react.useContext)(_context.StoreContext),
+    updateLockRoomEnabled = _useContext.updateLockRoomEnabled,
+    isLockRoomEnabled = _useContext.isLockRoomEnabled,
+    allowShareScreen = _useContext.allowShareScreen,
+    updateAllowShareScreen = _useContext.updateAllowShareScreen,
+    allowBoardWrite = _useContext.allowBoardWrite,
+    updateBoardWriteEnabled = _useContext.updateBoardWriteEnabled,
+    allowChat = _useContext.allowChat,
+    updateAllowChat = _useContext.updateAllowChat,
+    allowUnmuteSelfAudio = _useContext.allowUnmuteSelfAudio,
+    updateAllowUnmuteSelfAudio = _useContext.updateAllowUnmuteSelfAudio,
+    allowUnmuteSelfVideo = _useContext.allowUnmuteSelfVideo,
+    updateAllowUnmuteSelfVideo = _useContext.updateAllowUnmuteSelfVideo,
+    hasEnableStartScreenSharePermission = _useContext.hasEnableStartScreenSharePermission,
+    hasPermissionToControlAllowSendAll = _useContext.hasPermissionToControlAllowSendAll,
+    hasEnableStartAudioPermission = _useContext.hasEnableStartAudioPermission,
+    hasEnableChangeNamePermission = _useContext.hasEnableChangeNamePermission,
+    hasEnableStartVideoPermission = _useContext.hasEnableStartVideoPermission,
+    hasLockRoomPermission = _useContext.hasLockRoomPermission,
+    hasAllowWriteBoardPermission = _useContext.hasAllowWriteBoardPermission,
+    hasWaitingRoomPermission = _useContext.hasWaitingRoomPermission,
+    updateWaitingRoomEnabled = _useContext.updateWaitingRoomEnabled,
+    isWaitingRoomEnabled = _useContext.isWaitingRoomEnabled,
+    isWaterMarkEnabled = _useContext.isWaterMarkEnabled,
+    hasWatermarkEnablePermission = _useContext.hasWatermarkEnablePermission,
+    hasWatermarkDisablePermission = _useContext.hasWatermarkDisablePermission,
+    isMulti = _useContext.isMulti,
+    setWaterMarkLineType = _useContext.setWaterMarkLineType,
+    setAllowWaterMark = _useContext.setAllowWaterMark;
+  var transI18n = (0, _i18n.useI18n)();
+  var allActions = [{
+    title: transI18n('fmt_security_setting_label_security_setting'),
+    key: 'meeting_security_title',
+    type: 'title'
+  }, {
+    title: /*#__PURE__*/(0, _jsxRuntime.jsx)(_checkbox.FcrCheckbox, {
+      checked: isLockRoomEnabled,
+      label: transI18n('fmt_screenshare_controlbar_security_list_lock'),
+      styleType: "white"
+    }),
+    key: 'lock_room',
+    type: 'primary',
+    hasPermission: hasLockRoomPermission,
+    onButtonClick: function onButtonClick() {
+      updateLockRoomEnabled(!isLockRoomEnabled);
+    }
+  }, {
+    title: /*#__PURE__*/(0, _jsxRuntime.jsx)(_checkbox.FcrCheckbox, {
+      checked: isWaitingRoomEnabled,
+      label: transI18n('fmt_security_options_activatewaitingroom'),
+      styleType: "white"
+    }),
+    key: 'enable_waiting_room',
+    hasPermission: hasWaitingRoomPermission,
+    onButtonClick: function onButtonClick() {
+      return updateWaitingRoomEnabled(!isWaitingRoomEnabled);
+    },
+    classNames: 'room-control-drop-with-under-line'
+  }, {
+    title: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "room-control-options-box",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "room-control-options-watermark-title-box",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_checkbox.FcrCheckbox, {
+          checked: isWaterMarkEnabled,
+          label: transI18n('fmt_security_setting_mobile_label_watermark'),
+          styleType: "white"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip.FcrToolTip, {
+          mouseEnterDelay: 0,
+          trigger: "hover",
+          placement: "top",
+          content: transI18n('fmt_security_setting_popup_tip_watermark_voice_active_prioritized'),
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+            style: {
+              marginLeft: '6px'
+            },
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+              type: _type2.FcrIconType.FCR_HELPQUESTION,
+              size: 16
+            })
+          })
+        })]
+      }), isWaterMarkEnabled && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "room-control-options-watermark-btns",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: "room-control-options-watermark-btn ".concat(isMulti ? '' : 'room-control-options-watermark-btn--active'),
+          onClick: function onClick(e) {
+            e.stopPropagation();
+            setWaterMarkLineType(_type.FcrLineType.SINGLE_ROW);
+          },
+          children: transI18n('fmt_security_setting_mobile_option_watermark_style_single')
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: "room-control-options-watermark-btn ".concat(isMulti ? 'room-control-options-watermark-btn--active' : ''),
+          onClick: function onClick(e) {
+            e.stopPropagation();
+            setWaterMarkLineType(_type.FcrLineType.MULTI_ROW);
+          },
+          children: transI18n('fmt_security_setting_mobile_option_watermark_style_multi')
+        })]
+      })]
+    }),
+    key: 'enable_watermark',
+    type: 'primary',
+    hasPermission: hasWatermarkEnablePermission && hasWatermarkDisablePermission,
+    onButtonClick: function onButtonClick() {
+      setAllowWaterMark();
+    },
+    classNames: 'room-control-drop-with-under-line'
+  }, {
+    title: transI18n('fmt_screenshare_options_allow'),
+    key: 'allow_attendee_title',
+    type: 'title',
+    hasPermission: true
+  }, {
+    title: /*#__PURE__*/(0, _jsxRuntime.jsx)(_checkbox.FcrCheckbox, {
+      checked: allowShareScreen,
+      label: transI18n('fmt_screenshare_screen_and_board'),
+      styleType: "white"
+    }),
+    key: 'share_screen',
+    type: 'primary',
+    hasPermission: hasEnableStartScreenSharePermission,
+    onButtonClick: function onButtonClick() {
+      updateAllowShareScreen(!allowShareScreen);
+    }
+  }, {
+    title: /*#__PURE__*/(0, _jsxRuntime.jsx)(_checkbox.FcrCheckbox, {
+      checked: allowBoardWrite,
+      label: transI18n('fmt_screenshare_options_editable'),
+      styleType: "white"
+    }),
+    key: 'enable_whiteboard',
+    type: 'primary',
+    hasPermission: hasAllowWriteBoardPermission,
+    onButtonClick: updateBoardWriteEnabled
+  }, {
+    title: /*#__PURE__*/(0, _jsxRuntime.jsx)(_checkbox.FcrCheckbox, {
+      checked: allowChat,
+      label: transI18n('fmt_chat_label_chat'),
+      styleType: "white"
+    }),
+    key: 'chat',
+    type: 'primary',
+    hasPermission: hasPermissionToControlAllowSendAll,
+    onButtonClick: function onButtonClick() {
+      updateAllowChat(!allowChat);
+    }
+  }, {
+    title: /*#__PURE__*/(0, _jsxRuntime.jsx)(_checkbox.FcrCheckbox, {
+      checked: allowUnmuteSelfAudio,
+      label: transI18n('fmt_screenshare_controlbar_security_list_participant_unmute'),
+      styleType: "white"
+    }),
+    key: 'unmute_yourself',
+    type: 'primary',
+    hasPermission: hasEnableStartAudioPermission,
+    onButtonClick: function onButtonClick() {
+      updateAllowUnmuteSelfAudio(!allowUnmuteSelfAudio);
+    }
+  }, {
+    title: /*#__PURE__*/(0, _jsxRuntime.jsx)(_checkbox.FcrCheckbox, {
+      checked: false,
+      label: transI18n('fmt_screenshare_controlbar_security_list_participant_changeName'),
+      styleType: "white"
+    }),
+    key: 'rename',
+    type: 'disabled',
+    hasPermission: hasEnableChangeNamePermission,
+    onButtonClick: function onButtonClick() {}
+  }, {
+    title: /*#__PURE__*/(0, _jsxRuntime.jsx)(_checkbox.FcrCheckbox, {
+      checked: allowUnmuteSelfVideo,
+      label: transI18n('fmt_security_options_openvideo'),
+      styleType: "white"
+    }),
+    key: 'start_video',
+    type: 'primary',
+    hasPermission: hasEnableStartVideoPermission,
+    onButtonClick: function onButtonClick() {
+      updateAllowUnmuteSelfVideo(!allowUnmuteSelfVideo);
+    },
+    classNames: 'room-control-drop-with-under-line'
+  }
+  // 功能没实现，暂时注释
+  // {
+  //   title: (
+  //     <FcrCheckbox
+  //       checked={false}
+  //       label={transI18n('fmt_security_options_removemultiple')}
+  //       styleType="white"
+  //     />
+  //   ),
+  //   key: 'remove_fcr-participants',
+  //   type: 'danger',
+  //   hasPermission: true,
+  //   onButtonClick: () => {},
+  //   classNames: 'room-control-drop-disable',
+  // },
+  ];
+  var securityHasPermissionActions = allActions.filter(function (item) {
+    return item.hasPermission || item.type === 'title';
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: "security-content",
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_dropMenu.FcrDropMenu, {
+      options: securityHasPermissionActions
+    })
+  });
+});

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

@@ -0,0 +1,70 @@
+.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/fragments/control-bar/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/fragments/control-bar/share-state-nav/index.js

@@ -0,0 +1,134 @@
+"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.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 _context = require("../context");
+var _react = require("react");
+var _classnames = _interopRequireDefault(require("classnames"));
+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)(_context.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__meeting-elapsed-time",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        className: (0, _classnames["default"])(),
+        children: meetingTime
+      }), roomDuration > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip.FcrToolTip, {
+        trigger: "hover",
+        mouseEnterDelay: 0,
+        content: transI18n('fmt_popup_label_meetingduration', {
+          reason1: totalMins
+        }),
+        placement: "bottom",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
+          children: ["(", totalHourText, totalMinuteText, ")"]
+        })
+      })]
+    }), /*#__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/fragments/control-bar/stop-live-streaming/index.d.ts

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

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

@@ -0,0 +1,82 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StopLiveStreamingButton = void 0;
+var _button = require("agora-ui-foundation/lib/components/button");
+var _dialog = require("agora-ui-foundation/lib/components/dialog");
+var _type = require("agora-ui-foundation/lib/components/icon/type");
+var _tooltipsButton = require("agora-ui-foundation/lib/components/tooltips-button");
+var _constant = require("../../../utilities/constant");
+var _react = require("react");
+var _context = require("../context");
+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)(_context.StoreContext),
+    handleMoreClick = _useContext.handleMoreClick,
+    liveStreamingState = _useContext.liveStreamingState,
+    playUrl = _useContext.playUrl;
+  var transI18n = (0, _i18n.useI18n)();
+  var StopLiveContent = function StopLiveContent() {
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "leave-room-dialog-content",
+      onMouseEnter: function onMouseEnter() {
+        window.runtime.browserWindow.setIgnoreMouseEvents(false);
+      },
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "leave-room-dialog-title",
+        children: [transI18n('fmt_popup_copywrite_stopstreamingnow'), "?"]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.FcrButton, {
+        styleType: "danger",
+        size: "S",
+        onClick: function onClick() {
+          _dialog.FcrDialogApi.close('stop-live');
+          window.runtime.browserWindow.setIgnoreMouseEvents(true, {
+            forward: true
+          });
+          handleMoreClick(_constant.RendererEventAction.STOP_LIVE_STREAMING);
+        },
+        children: transI18n('fmt_popup_options_confirmstop')
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.FcrButton, {
+        size: "S",
+        type: "secondary-bordered",
+        onClick: function onClick() {
+          window.runtime.browserWindow.setIgnoreMouseEvents(true, {
+            forward: true
+          });
+          _dialog.FcrDialogApi.close('stop-live');
+        },
+        children: transI18n('fmt_security_buttons_cancel')
+      })]
+    });
+  };
+  var handleTooltipButtonClick = function handleTooltipButtonClick() {
+    _dialog.FcrDialogApi.open({
+      id: 'stop-live',
+      dialogProps: {
+        content: /*#__PURE__*/(0, _jsxRuntime.jsx)(StopLiveContent, {}),
+        width: 256,
+        closable: false,
+        rootClassName: 'leave-room-dialog'
+      }
+    });
+  };
+  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/fragments/control-bar/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 {};