fcr-ui-scene 3.4.5 → 3.5.0

package/lib/fragments/control-bar/meeting-details/meeting-details.js

@@ -0,0 +1,280 @@
+"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.error.to-string.js");
+require("core-js/modules/es.array.concat.js");
+require("core-js/modules/es.array.includes.js");
+require("core-js/modules/es.date.to-json.js");
+require("core-js/modules/es.json.stringify.js");
+require("core-js/modules/es.regexp.exec.js");
+require("core-js/modules/es.string.includes.js");
+require("core-js/modules/es.string.replace.js");
+require("core-js/modules/web.btoa.js");
+require("core-js/modules/web.dom-exception.constructor.js");
+require("core-js/modules/web.dom-exception.stack.js");
+require("core-js/modules/web.dom-exception.to-string-tag.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 _toast = require("agora-ui-foundation/lib/components/toast");
+var _type = require("agora-ui-foundation/lib/components/icon/type");
+var _i18n = require("agora-ui-foundation/lib/i18n");
+var _copyText = require("../../../utilities/copyText");
+var _mobxReact = require("mobx-react");
+var _react = require("react");
+require("./meeting-detail.css");
+var _dayjs = _interopRequireDefault(require("dayjs"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _context = require("../context");
+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)(_context.StoreContext),
+    startTime = _useContext.startTime,
+    roomInfo = _useContext.roomInfo,
+    userName = _useContext.userName,
+    inviteLink = _useContext.inviteLink,
+    setShowMeetingDetailPortal = _useContext.setShowMeetingDetailPortal,
+    password = _useContext.password,
+    roomDuration = _useContext.roomDuration;
+  var _useMeetingTime = (0, _meetingTime.useMeetingTime)({
+      duration: roomDuration,
+      startTime: startTime
+    }),
+    meetingTime = _useMeetingTime.meetingTime;
+  var getShareLink = function getShareLink() {
+    var info = {
+      roomId: roomInfo === null || roomInfo === void 0 ? void 0 : roomInfo.roomId,
+      roomName: roomInfo === null || roomInfo === void 0 ? void 0 : roomInfo.roomName,
+      userName: userName
+    };
+    var strArgs = "info=".concat(btoa(encodeURIComponent(JSON.stringify(info))));
+    var baseLink = "".concat(inviteLink);
+    if (baseLink.includes('?')) {
+      return "".concat(baseLink, "&").concat(strArgs);
+    }
+    return "".concat(baseLink, "?").concat(strArgs);
+  };
+  var shareLink = (0, _react.useMemo)(function () {
+    return getShareLink();
+  }, []);
+  if (!roomInfo || !userName) return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {});
+  var displayMeetingId = roomInfo.roomId.replace(/(.{3})/g, '$1 ');
+  var detailText = t('fmt_sharing_label_invitationdetailed', {
+    reason1: userName,
+    reason2: roomInfo === null || roomInfo === void 0 ? void 0 : roomInfo.roomName,
+    reason3: (0, _dayjs["default"])(startTime !== null && startTime !== void 0 ? startTime : 0).format('YYYY-MM-DD HH:mm:ss'),
+    reason4: shareLink
+  });
+  function handleCopyMeetingId(meetingId) {
+    (0, _copyText.copyText)(meetingId).then(function () {
+      setShowMeetingDetailPortal(false);
+      _toast.FcrToastApi.open({
+        toastProps: {
+          type: 'info',
+          content: t('fmt_statusbar_status_coppied')
+        }
+      });
+    })["catch"](function () {
+      setShowMeetingDetailPortal(false);
+      _toast.FcrToastApi.open({
+        toastProps: {
+          type: 'warn',
+          content: t('fmt_information_tips_numbercopyfailed')
+        }
+      });
+    });
+  }
+  function handlerCopyMeetingShareLink(shareLink) {
+    (0, _copyText.copyText)(shareLink).then(function () {
+      setShowMeetingDetailPortal(false);
+      _toast.FcrToastApi.open({
+        toastProps: {
+          type: 'info',
+          content: t('fmt_additional_tips_invitation')
+        }
+      });
+    })["catch"](function () {
+      setShowMeetingDetailPortal(false);
+      _toast.FcrToastApi.open({
+        toastProps: {
+          type: 'warn',
+          content: t('fmt_additional_tips_invitationfailed')
+        }
+      });
+    });
+  }
+  function handleCopyMeetingPassword(password) {
+    (0, _copyText.copyText)(password).then(function () {
+      _toast.FcrToastApi.open({
+        toastProps: {
+          type: 'info',
+          content: t('fmt_uimanager_tips_passwordcopied')
+        }
+      });
+    })["catch"](function () {
+      _toast.FcrToastApi.open({
+        toastProps: {
+          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 () {
+      _toast.FcrToastApi.open({
+        toastProps: {
+          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: roomInfo.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(roomInfo.roomId);
+          },
+          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.jsxs)("div", {
+        className: "meeting-details__content-share-link meeting-details__content-meeting-duration",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
+          children: t('fmt_premeeting_joinroom_mobile_label_meeting_duration')
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          children: meetingTime
+        })]
+      })]
+    }), /*#__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/fragments/control-bar/more-actions/index.css

@@ -0,0 +1,72 @@
+.leave-room-dialog {
+}
+
+.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;
+}
+
+.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/fragments/control-bar/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/fragments/control-bar/more-actions/index.js

@@ -0,0 +1,299 @@
+"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 _button = require("agora-ui-foundation/lib/components/button");
+var _dialog = require("agora-ui-foundation/lib/components/dialog");
+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 _constant = require("../../../utilities/constant");
+var _context = require("../context");
+require("./index.css");
+var _type2 = require("fcr-core/lib/type");
+var _copyText = require("../../../utilities/copyText");
+var _toast = require("agora-ui-foundation/lib/components/toast");
+var _i18n = require("agora-ui-foundation/lib/i18n");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _leaveMeeting = require("../../../modules/action-bar/leave/leave-meeting");
+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)(_context.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,
+    hasStopLiveStreamingPermission = _useContext.hasStopLiveStreamingPermission,
+    setShowMeetingDetailPortal = _useContext.setShowMeetingDetailPortal,
+    setMeetingDetailPortalPosition = _useContext.setMeetingDetailPortalPosition,
+    localUserRole = _useContext.localUserRole,
+    hasAssignHostBeforeLeavingPermission = _useContext.hasAssignHostBeforeLeavingPermission,
+    isPstnUser = _useContext.isPstnUser,
+    remoteUsers = _useContext.remoteUsers,
+    hasEndRoomPermission = _useContext.hasEndRoomPermission,
+    sendLeave = _useContext.sendLeave,
+    sendEnd = _useContext.sendEnd,
+    keepPhoneAudioConnection = _useContext.keepPhoneAudioConnection,
+    sendAssign = _useContext.sendAssign;
+  var transI18n = (0, _i18n.useI18n)();
+  var onItemClick = function onItemClick(item) {
+    if (item.onClick) {
+      item.onClick();
+      return;
+    }
+    closePopover();
+    handleMoreClick(item.key);
+  };
+  var LeaveRoomContent = function LeaveRoomContent() {
+    closePopover();
+    if (isHost) {
+      return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "leave-room-dialog-content",
+        onMouseEnter: function onMouseEnter() {
+          window.runtime.browserWindow.setIgnoreMouseEvents(false);
+        },
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: "leave-room-dialog-title",
+          children: transI18n('fmt_popup_tips_endplenarymeeting')
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.FcrButton, {
+          styleType: "danger",
+          size: "S",
+          onClick: function onClick() {
+            _dialog.FcrDialogApi.close('leave-room');
+            window.runtime.browserWindow.setIgnoreMouseEvents(true, {
+              forward: true
+            });
+            handleMoreClick(_constant.RendererEventAction.END_ROOM);
+          },
+          children: transI18n('fmt_popup_button_endmeeting')
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.FcrButton, {
+          size: "S",
+          type: "secondary-bordered",
+          onClick: function onClick() {
+            _dialog.FcrDialogApi.close('leave-room');
+            window.runtime.browserWindow.setIgnoreMouseEvents(true, {
+              forward: true
+            });
+            handleMoreClick(_constant.RendererEventAction.LEAVE_ROOM);
+          },
+          children: transI18n('fmt_popup_button_leavemeeting')
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.FcrButton, {
+          size: "S",
+          type: "secondary-bordered",
+          onClick: function onClick() {
+            window.runtime.browserWindow.setIgnoreMouseEvents(true, {
+              forward: true
+            });
+            _dialog.FcrDialogApi.close('leave-room');
+          },
+          children: transI18n('fmt_security_buttons_cancel')
+        })]
+      });
+    }
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "leave-room-dialog-content",
+      onMouseEnter: function onMouseEnter() {
+        window.runtime.browserWindow.setIgnoreMouseEvents(false);
+      },
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "leave-room-dialog-title",
+        children: transI18n('fmt_popup_tips_leavenow')
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.FcrButton, {
+        styleType: "danger",
+        size: "S",
+        onClick: function onClick() {
+          _dialog.FcrDialogApi.close('leave-room');
+          handleMoreClick(_constant.RendererEventAction.LEAVE_ROOM);
+        },
+        children: transI18n('fmt_popup_button_leavemeeting')
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.FcrButton, {
+        type: "secondary-bordered",
+        size: "S",
+        onClick: function onClick() {
+          _dialog.FcrDialogApi.close('leave-room');
+        },
+        children: transI18n('fmt_security_buttons_cancel')
+      })]
+    });
+  };
+
+  // 分割线
+  var moreOptions = [{
+    icon: _type.FcrIconType.FCR_WEB_CHAT,
+    text: transI18n('fmt_chat_label_chat'),
+    displayWhenNoPermission: 'hidden',
+    key: _constant.RendererEventAction.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 ? _constant.RendererEventAction.CLOUD_RECORDING_START : _constant.RendererEventAction.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() {
+      window.runtime.browserWindow.setIgnoreMouseEvents(true, {
+        forward: true
+      });
+      handleMoreClick(_constant.RendererEventAction.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() {
+      closePopover();
+      var currentPopoverPosition = document.getElementsByClassName('share-action-nav__popover')[0].getBoundingClientRect();
+      setMeetingDetailPortalPosition(currentPopoverPosition.x || 0, currentPopoverPosition.y || 0);
+      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: _constant.RendererEventAction.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 () {
+        _toast.FcrToastApi.open({
+          toastProps: {
+            type: 'info',
+            content: transI18n('fmt_statusbar_status_coppied')
+          }
+        });
+      });
+    }
+  }, {
+    icon: _type.FcrIconType.FCR_ENDMEETING,
+    key: _constant.RendererEventAction.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() {
+      window.runtime.browserWindow.setIgnoreMouseEvents(false);
+      _dialog.FcrDialogApi.info({
+        id: 'leave-room',
+        dialogProps: {
+          content: /*#__PURE__*/(0, _jsxRuntime.jsx)(_leaveMeeting.LeaveMeeting, {
+            setPopoverOpened: function setPopoverOpened(value) {
+              if (!value) {
+                _dialog.FcrDialogApi.close('leave-room');
+              }
+            },
+            localUserRole: localUserRole,
+            leave: sendLeave,
+            isLocked: false,
+            hasAssignHostBeforeLeavingPermission: hasAssignHostBeforeLeavingPermission,
+            hasEndRoomPermission: hasEndRoomPermission,
+            keepPhoneAudioConnection: keepPhoneAudioConnection,
+            isPstnUser: isPstnUser,
+            remoteUsers: remoteUsers,
+            end: sendEnd,
+            assignHost: sendAssign
+          }),
+          width: 255,
+          closable: false,
+          rootClassName: 'leave-room-dialog'
+        }
+      });
+    }
+  }];
+  (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;
+  });
+  console.log('moreOptionsFilter', moreOptionsFilter);
+  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);
+    })
+  });
+});