fcr-ui-scene 3.3.1 → 3.4.1

package/lib/modules/control-bar/components/meeting-details/index.css

@@ -0,0 +1,133 @@
+.meeting-details {
+  display: flex;
+  flex-direction: column;
+  width: 290px;
+  padding: 20px 15px 15px 15px;
+  border-radius: var(--fcr_cornerradius_s);
+  background-color: var(--fcr_mobile_ui_scene_color_popup_fill2, #3c3c3c);
+  box-shadow: none;
+}
+
+.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-meeting-subject {
+  font-size: 15px;
+  font-weight: 500;
+  color: var(--fcr_ui_scene_icontext1, #ffffff);
+  word-break: break-all;
+  text-align: left;
+  min-height: 34px;
+  line-height: 34px;
+}
+
+.meeting-details__content-meeting-id,
+.meeting-details__content-code,
+.meeting-details__content-share-link {
+  display: flex;
+  align-items: center;
+  line-height: 34px;
+  font-size: 12px;
+  font-weight: 300;
+  color: var(--fcr_ui_scene_icontext1, #ffffff);
+}
+
+.meeting-details__content-meeting-id > span,
+.meeting-details__content-code > span,
+.meeting-details__content-share-link > 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;
+  border: 0.5px solid var(--fcr_ui_scene_line1);
+  border-radius: var(--fcr_cornerradius_xs);
+}
+
+.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);
+  border: none;
+}
+
+.meeting-details__content-meeting-id > div > svg:hover path,
+.meeting-details__content-code > div > svg:hover path,
+.meeting-details__content-share-link > div > svg:hover path {
+  fill: var(--fcr_web_ui_scene_mainicon2);
+}
+
+.meeting-details__content-meeting-duration span {
+  padding-right: 30px;
+}
+
+.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;
+}
+
+.meeting-details__reset-icon {
+  animation: rotate 1s linear infinite;
+}
+
+@keyframes rotate {
+  from {
+    transform: rotate(0deg);
+  }
+
+  to {
+    transform: rotate(360deg);
+  }
+}

package/lib/modules/control-bar/components/meeting-details/index.d.ts

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

package/lib/modules/control-bar/components/meeting-details/index.js

@@ -0,0 +1,251 @@
+"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.MeetingDetails = void 0;
+require("core-js/modules/es.regexp.exec.js");
+require("core-js/modules/es.string.replace.js");
+require("core-js/modules/web.timers.js");
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _button = require("agora-ui-foundation/lib/components/button");
+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 _copyText = require("../../../../utilities/copyText");
+var _tools = require("../../../../utilities/tools");
+var _mobxReact = require("mobx-react");
+var _react = require("react");
+require("./index.css");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _store = require("../../store");
+var _meetingTime = require("../../../../hooks/meeting-time");
+var _jsxRuntime = require("react/jsx-runtime");
+var CopyState = /*#__PURE__*/function (CopyState) {
+  CopyState[CopyState["COPYINIT"] = 1] = "COPYINIT";
+  CopyState[CopyState["COPYING"] = 2] = "COPYING";
+  CopyState[CopyState["COPIED"] = 3] = "COPIED";
+  CopyState[CopyState["FAILED"] = 4] = "FAILED";
+  return CopyState;
+}(CopyState || {});
+var MeetingDetails = exports.MeetingDetails = (0, _mobxReact.observer)(function () {
+  var t = (0, _i18n.useI18n)();
+  var copyTimer = null;
+  var _useState = (0, _react.useState)({
+      copyState: CopyState.COPYINIT,
+      copyIcon: _type.FcrIconType.FCR_LINK,
+      copyText: t('fmt_sharing_button_copydetailed')
+    }),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    copyInfoState = _useState2[0],
+    setCopyInfoState = _useState2[1];
+  var _useContext = (0, _react.useContext)(_store.StoreContext),
+    startTime = _useContext.startTime,
+    _useContext$roomInfo = _useContext.roomInfo,
+    inviteLink = _useContext$roomInfo.inviteLink,
+    password = _useContext$roomInfo.password,
+    roomId = _useContext$roomInfo.roomId,
+    roomName = _useContext$roomInfo.roomName,
+    userName = _useContext.localUser.userName,
+    setShowMeetingDetailPortal = _useContext.setShowMeetingDetailPortal,
+    roomDuration = _useContext.roomDuration,
+    showToast = _useContext.showToast,
+    meetingId = _useContext.meetingId;
+  var _useMeetingTime = (0, _meetingTime.useMeetingTime)({
+      duration: roomDuration,
+      startTime: startTime
+    }),
+    meetingTime = _useMeetingTime.meetingTime;
+  var getShareLink = function getShareLink() {
+    var info = {
+      roomId: roomId,
+      roomName: roomName,
+      userName: userName
+    };
+    var baseLink = "".concat(inviteLink);
+    return baseLink;
+  };
+  var shareLink = (0, _react.useMemo)(function () {
+    return getShareLink();
+  }, []);
+  if (!roomName || !userName) return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {});
+  var displayMeetingId = (0, _tools.renderMeetingId)(meetingId, roomId);
+  var detailText = t('fmt_sharing_label_invitationdetailed', {
+    reason1: userName,
+    reason2: roomName,
+    // reason3: dayjs(startTime ?? 0).format('YYYY-MM-DD HH:mm:ss'),
+    reason3: '',
+    reason4: shareLink
+  });
+  function handleCopyMeetingId(copyContent) {
+    if (!copyContent) return;
+    var content = meetingId ? copyContent : copyContent.replace(/\s+/g, '');
+    (0, _copyText.copyText)(content).then(function () {
+      setShowMeetingDetailPortal(false);
+      showToast({
+        type: 'info',
+        content: t('fmt_statusbar_status_coppied')
+      });
+    })["catch"](function () {
+      setShowMeetingDetailPortal(false);
+      showToast({
+        type: 'warn',
+        content: t('fmt_information_tips_numbercopyfailed')
+      });
+    });
+  }
+  function handlerCopyMeetingShareLink(shareLink) {
+    (0, _copyText.copyText)(shareLink).then(function () {
+      setShowMeetingDetailPortal(false);
+      showToast({
+        type: 'info',
+        content: t('fmt_additional_tips_invitation')
+      });
+    })["catch"](function () {
+      setShowMeetingDetailPortal(false);
+      showToast({
+        type: 'warn',
+        content: t('fmt_additional_tips_invitationfailed')
+      });
+    });
+  }
+  function handleCopyMeetingPassword(password) {
+    (0, _copyText.copyText)(password).then(function () {
+      showToast({
+        type: 'info',
+        content: t('fmt_uimanager_tips_passwordcopied')
+      });
+    })["catch"](function () {
+      showToast({
+        type: 'warn',
+        content: t('fmt_settings_tips_passwordcopyfailed')
+      });
+    });
+  }
+  function handlerCopyMeetingDetail(detailText) {
+    if (copyInfoState.copyState !== CopyState.COPYINIT) {
+      return;
+    }
+    if (copyTimer) {
+      clearTimeout(copyTimer);
+    }
+    setCopyInfoState({
+      copyState: CopyState.COPYING,
+      copyIcon: _type.FcrIconType.FCR_RESET,
+      copyText: t('fmt_meeting_call_voice_call_button_copy_info')
+    });
+    (0, _copyText.copyText)(detailText).then(function () {
+      copyTimer = setTimeout(function () {
+        setCopyInfoState({
+          copyState: CopyState.COPIED,
+          copyIcon: _type.FcrIconType.FCR_CHOOSEIT,
+          copyText: t('fmt_statusbar_status_coppied')
+        });
+      }, 1500);
+    })["catch"](function () {
+      showToast({
+        type: 'warn',
+        content: t('fmt_sharing_tips_copyfull_failed')
+      });
+    });
+  }
+  (0, _react.useEffect)(function () {
+    if (copyInfoState.copyState === CopyState.COPIED) {
+      if (copyTimer) {
+        clearTimeout(copyTimer);
+      }
+      copyTimer = setTimeout(function () {
+        setCopyInfoState({
+          copyState: CopyState.COPYINIT,
+          copyIcon: _type.FcrIconType.FCR_LINK,
+          copyText: t('fmt_sharing_button_copydetailed')
+        });
+      }, 1000);
+    }
+  }, [copyInfoState.copyState]);
+  (0, _react.useEffect)(function () {
+    return function () {
+      if (copyTimer) {
+        clearTimeout(copyTimer);
+      }
+    };
+  }, []);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: "meeting-details",
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "meeting-details__content",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "meeting-details__content-meeting-subject",
+        children: roomName
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "meeting-details__content-meeting-id",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
+          children: t('fmt_meetingInfo_window_info_meetingID')
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          children: displayMeetingId
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          onClick: function onClick() {
+            return handleCopyMeetingId(displayMeetingId);
+          },
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+            type: _type.FcrIconType.FCR_COPY_ICON,
+            size: 20
+          })
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "meeting-details__content-share-link",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
+          children: t('fmt_sharing_label_invitationlink')
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          children: shareLink
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          onClick: function onClick() {
+            return handlerCopyMeetingShareLink(shareLink);
+          },
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+            type: _type.FcrIconType.FCR_COPY_ICON,
+            size: 20
+          })
+        })]
+      }), !!password && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "meeting-details__content-share-link",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
+          children: t('fmt_meeting_creatpage_label_password')
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          children: password
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          onClick: function onClick() {
+            return handleCopyMeetingPassword(password !== null && password !== void 0 ? password : '');
+          },
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+            type: _type.FcrIconType.FCR_COPY_ICON,
+            size: 20
+          })
+        })]
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "meeting-details__footer",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_button.FcrButton, {
+        size: "XS",
+        shape: "rounded",
+        onClick: function onClick() {
+          return handlerCopyMeetingDetail(detailText);
+        },
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+          className: (0, _classnames["default"])({
+            'meeting-details__reset-icon': copyInfoState.copyState === CopyState.COPYING
+          }),
+          type: copyInfoState.copyIcon,
+          size: 20,
+          colors: {
+            iconPrimary: 'var(--fcr_ui_scene_white10)'
+          }
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          children: copyInfoState.copyText
+        })]
+      })
+    })]
+  });
+});

package/lib/modules/control-bar/components/more-actions/index.css

@@ -0,0 +1,72 @@
+.leave-room-dialog .fcr-dialog-body {
+  padding: 20px;
+}
+
+.leave-room-dialog .fcr-button-secondary-bordered:hover {
+  color: var(--fcr_ui_scene_ramp_red6);
+  background: var(--fcr_ui_scene_ramp_red1);
+  border-color: var(--fcr_ui_scene_ramp_red6);
+}
+
+.leave-room-dialog-content {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  width: 100%;
+}
+
+.leave-room-dialog-title {
+  text-align: center;
+}
+
+.leave-room-dialog-content > button,
+.leave-room-dialog-content > div {
+  width: 100%;
+}
+
+.share-action-nav__popover-inner-content {
+  position: relative;
+}
+
+.share-action-nav__popover-inner-content
+  .share-action-nav__popover-inner-content-leave-option
+  path {
+  fill: var(--fcr_ui_scene_ramp_red6);
+}
+
+.share-action-nav__popover-inner-content
+  .share-action-nav__popover-inner-content-leave-option
+  .share-action-nav__popover-option {
+  color: var(--fcr_ui_scene_ramp_red6);
+}
+
+.share-action-nav__popover-inner-content
+  .share-action-nav__popover-inner-content-leave-option
+  .share-action-nav__popover-option:hover {
+  background: var(--fcr_ui_scene_ramp_red1);
+}
+
+.share-action-nav__media-list-group .share-action-nav__popover-option-media-setting {
+  padding-left: 6px;
+  margin: 0 10px;
+  cursor: pointer;
+}
+
+.share-action-nav__media-list-item-with-divider {
+  min-height: 32px;
+  height: auto;
+}
+
+.share-action-nav__media-list-item-with-divider:after {
+  content: '';
+  height: 1px;
+  border-bottom: 1px solid var(--fcr_ui_scene_line1);
+  width: calc(100% + 16px);
+  bottom: 0px;
+  left: 0px;
+  height: 1px;
+  display: block;
+  margin: 8px;
+  position: relative;
+  left: -16px;
+}

package/lib/modules/control-bar/components/more-actions/index.d.ts

@@ -0,0 +1,7 @@
+import './index.css';
+interface MorePopoverContentProps {
+    hasChatPermission: boolean;
+    closePopover?: () => void;
+}
+export declare const MorePopoverContent: (props: MorePopoverContentProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/modules/control-bar/components/more-actions/index.js

@@ -0,0 +1,182 @@
+"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.MorePopoverContent = void 0;
+require("core-js/modules/es.array.filter.js");
+require("core-js/modules/es.array.map.js");
+require("core-js/modules/es.object.to-string.js");
+require("core-js/modules/esnext.async-iterator.filter.js");
+require("core-js/modules/esnext.async-iterator.map.js");
+require("core-js/modules/esnext.iterator.constructor.js");
+require("core-js/modules/esnext.iterator.filter.js");
+require("core-js/modules/esnext.iterator.map.js");
+var _icon = require("agora-ui-foundation/lib/components/icon");
+var _type = require("agora-ui-foundation/lib/components/icon/type");
+var _mobxReact = require("mobx-react");
+var _react = require("react");
+var _store = require("../../store");
+require("./index.css");
+var _type2 = require("fcr-core/lib/type");
+var _copyText = require("../../../../utilities/copyText");
+var _i18n = require("agora-ui-foundation/lib/i18n");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _type3 = require("../../type");
+var _jsxRuntime = require("react/jsx-runtime");
+var MorePopoverContent = exports.MorePopoverContent = (0, _mobxReact.observer)(function (props) {
+  var ref = (0, _react.useRef)(null);
+  var hasChatPermission = props.hasChatPermission,
+    _props$closePopover = props.closePopover,
+    closePopover = _props$closePopover === void 0 ? function () {} : _props$closePopover;
+  var _useContext = (0, _react.useContext)(_store.StoreContext),
+    isHost = _useContext.isHost,
+    handleMoreClick = _useContext.handleMoreClick,
+    liveStreamingState = _useContext.liveStreamingState,
+    playUrl = _useContext.playUrl,
+    cloudRecordingState = _useContext.cloudRecordingState,
+    hasStartCloudRecordingPermission = _useContext.hasStartCloudRecordingPermission,
+    hasStartLiveStreamingPermission = _useContext.hasStartLiveStreamingPermission,
+    hasGetLiveStreamingUrlPermission = _useContext.hasGetLiveStreamingUrlPermission,
+    setShowMeetingDetailPortal = _useContext.setShowMeetingDetailPortal,
+    handleLeaveRoom = _useContext.handleLeaveRoom,
+    showToast = _useContext.showToast;
+  var transI18n = (0, _i18n.useI18n)();
+  var onItemClick = function onItemClick(item) {
+    if (item.onClick) {
+      item.onClick();
+      return;
+    }
+    closePopover();
+    handleMoreClick(item.key);
+  };
+
+  // 分割线
+  var moreOptions = [{
+    icon: _type.FcrIconType.FCR_WEB_CHAT,
+    text: transI18n('fmt_chat_label_chat'),
+    displayWhenNoPermission: 'hidden',
+    key: _type3.MoreAction.OPEN_CHAT,
+    hasPermission: hasChatPermission,
+    classNames: 'share-action-nav__media-list-item-with-divider'
+  }, {
+    icon: _type.FcrIconType.FCR_EMO,
+    text: transI18n('fmt_popup_label_expression'),
+    displayWhenNoPermission: 'hidden',
+    key: 'emoji',
+    hasPermission: false
+  }, {
+    icon: _type.FcrIconType.FCR_CLOUDRECORD,
+    classNames: 'share-action-nav__media-list-item-with-divider',
+    text: transI18n('fmt_screenshare_controlbar_button_more_cloudRecord'),
+    displayWhenNoPermission: 'hidden',
+    key: cloudRecordingState === _type2.FcrRecordingState.Stopped ? _type3.MoreAction.CLOUD_RECORDING_START : _type3.MoreAction.CLOUD_RECORDING_STOP,
+    hasPermission: hasStartCloudRecordingPermission && cloudRecordingState === _type2.FcrRecordingState.Stopped
+  },
+  // {
+  //   icon: null,
+  //   text: transI18n('fmt_record_button_Localrecording'),
+  //   displayWhenNoPermission: 'hidden',
+  //   key: 'localRecord',
+  //   hasPermission:
+  //     hasStartCloudRecordingPermission && cloudRecordingState === FcrRecordingState.Stopped,
+  // },
+  {
+    classNames: 'share-action-nav__media-list-item-with-divider',
+    icon: _type.FcrIconType.FCR_LIVE,
+    text: transI18n('fmt_screenshare_controlbar_button_more_live'),
+    displayWhenNoPermission: 'hidden',
+    key: 'liveStreaming',
+    hasPermission: hasStartLiveStreamingPermission && liveStreamingState === _type2.FcrLiveStreamingState.STOPPED,
+    onClick: function onClick() {
+      handleMoreClick(_type3.MoreAction.OPEN_LIVE_STEAMING_DIALOG);
+    }
+  }, {
+    icon: _type.FcrIconType.FCR_EXCLAMATIONMASK,
+    text: transI18n('fmt_popup_button_meetinginfor'),
+    classNames: 'share-action-nav__media-list-item-with-divider',
+    displayWhenNoPermission: 'hidden',
+    key: 'copyMeetingInfo',
+    hasPermission: true,
+    onClick: function onClick() {
+      setShowMeetingDetailPortal(true);
+    }
+  }, {
+    icon: _type.FcrIconType.FCR_SETTING,
+    classNames: 'share-action-nav__media-list-item-with-divider',
+    text: transI18n('fmt_screenshare_controlbar_button_more_setting'),
+    displayWhenNoPermission: 'hidden',
+    key: _type3.MoreAction.OPEN_SETTING,
+    hasPermission: true
+  }, {
+    icon: _type.FcrIconType.FCR_ATTACH,
+    classNames: 'share-action-nav__media-list-item-with-divider',
+    text: transI18n('fmt_live_label_copylink'),
+    displayWhenNoPermission: 'hidden',
+    key: 'copyLiveLink',
+    hasPermission: liveStreamingState === _type2.FcrLiveStreamingState.STARTED && hasGetLiveStreamingUrlPermission,
+    onClick: function onClick() {
+      closePopover();
+      (0, _copyText.copyText)(playUrl).then(function () {
+        showToast({
+          type: 'info',
+          content: transI18n('fmt_statusbar_status_coppied')
+        });
+      });
+    }
+  }, {
+    icon: _type.FcrIconType.FCR_ENDMEETING,
+    key: _type3.MoreAction.LEAVE_ROOM,
+    classNames: 'share-action-nav__popover-inner-content-leave-option',
+    text: isHost ? transI18n('fmt_popup_button_endmeeting') : transI18n('fmt_popup_button_leavemeeting'),
+    hasPermission: true,
+    onClick: function onClick() {
+      var _window$runtime$brows;
+      (_window$runtime$brows = window.runtime.browserWindow) === null || _window$runtime$brows === void 0 || _window$runtime$brows.setIgnoreMouseEvents(false);
+      handleLeaveRoom();
+    }
+  }];
+  (0, _react.useEffect)(function () {
+    function handleClickOutside(event) {
+      if (ref.current && !ref.current.contains(event.target)) {
+        closePopover();
+      }
+    }
+    document.addEventListener('mousedown', handleClickOutside);
+    return function () {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, [ref.current]);
+  var moreOptionsFilter = moreOptions.filter(function (item) {
+    return item.hasPermission;
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    ref: ref,
+    className: "share-action-nav__popover-inner-content share-action-nav__not-draggable",
+    children: moreOptionsFilter.map(function (item, index) {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: (0, _classnames["default"])('share-action-nav__media-list-group', item.classNames),
+        onClick: function onClick(e) {
+          e.stopPropagation();
+          onItemClick(item);
+        },
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          className: "fcr-flex fcr-items-center share-action-nav__popover-option-media-setting share-action-nav__popover-option",
+          children: [item.icon ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+            type: item.icon,
+            size: 24,
+            colors: {
+              iconPrimary: 'var(--fcr_ui_scene_icontext5)'
+            }
+          }, item.key) : /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: "icon-placeholder-symbol"
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+            children: item.text
+          })]
+        })
+      }, item.key);
+    })
+  });
+});