fcr-ui-scene 3.8.1 → 3.9.0-alpha

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

@@ -0,0 +1,224 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import "core-js/modules/es.regexp.exec.js";
+import "core-js/modules/es.string.replace.js";
+import "core-js/modules/web.timers.js";
+import { FcrButton } from 'agora-ui-foundation/lib/components/button';
+import { FcrIcon } from 'agora-ui-foundation/lib/components/icon';
+import { FcrIconType } from 'agora-ui-foundation/lib/components/icon/type';
+import { useI18n } from 'agora-ui-foundation/lib/i18n';
+import { renderMeetingId } from 'agora-foundation/lib/utilities/tools';
+import { observer } from 'mobx-react';
+import { useContext, useEffect, useMemo, useState } from 'react';
+import './index.css';
+import classNames from 'classnames';
+import { StoreContext } from '../../store';
+import { CopyState } from '../../enums';
+import { copyText } from 'agora-ui-foundation/lib/utilities/copy-text';
+import { FcrUIToastKey } from '../../../../modules/toast-manager/type';
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export var MeetingDetails = observer(function () {
+  var t = useI18n();
+  var copyTimer = null;
+  var _useState = useState({
+      copyState: CopyState.COPYINIT,
+      copyIcon: FcrIconType.FCR_LINK,
+      copyText: t('fmt_popup_button_meetinginfor')
+    }),
+    _useState2 = _slicedToArray(_useState, 2),
+    copyInfoState = _useState2[0],
+    setCopyInfoState = _useState2[1];
+  var _useContext = useContext(StoreContext),
+    _useContext$roomInfo = _useContext.roomInfo,
+    inviteLink = _useContext$roomInfo.inviteLink,
+    password = _useContext$roomInfo.password,
+    roomId = _useContext$roomInfo.roomId,
+    roomName = _useContext$roomInfo.roomName,
+    localUserName = _useContext.localUserName,
+    showToast = _useContext.showToast,
+    meetingId = _useContext.meetingId,
+    meetingTime = _useContext.meetingTime,
+    roomDetailCopyText = _useContext.roomDetailCopyText;
+  var getShareLink = function getShareLink() {
+    var baseLink = "".concat(inviteLink);
+    return baseLink;
+  };
+  var shareLink = useMemo(function () {
+    return getShareLink();
+  }, []);
+  if (!roomName || !localUserName) return /*#__PURE__*/_jsx(_Fragment, {});
+  var displayMeetingId = renderMeetingId(meetingId, roomId);
+  function handleCopyMeetingId(copyContent) {
+    if (!copyContent) return;
+    var content = meetingId ? copyContent : copyContent.replace(/\s+/g, '');
+    copyText(content).then(function () {
+      showToast({
+        key: FcrUIToastKey.FMT_STATUSBAR_STATUS_COPPIED
+      });
+    })["catch"](function () {
+      showToast({
+        key: FcrUIToastKey.FMT_INFORMATION_TIPS_NUMBERCOPYFAILED
+      });
+    });
+  }
+  function handlerCopyMeetingShareLink(shareLink) {
+    copyText(shareLink).then(function () {
+      showToast({
+        key: FcrUIToastKey.FMT_ADDITIONAL_TIPS_INVITATION
+      });
+    })["catch"](function () {
+      showToast({
+        key: FcrUIToastKey.FMT_ADDITIONAL_TIPS_INVITATIONFAILED
+      });
+    });
+  }
+  function handleCopyMeetingPassword(password) {
+    copyText(password).then(function () {
+      showToast({
+        key: FcrUIToastKey.FMT_UIMANAGER_TIPS_PASSWORDCOPIED
+      });
+    })["catch"](function () {
+      showToast({
+        key: FcrUIToastKey.FMT_SETTINGS_TIPS_PASSWORDCOPYFAILED
+      });
+    });
+  }
+  function handlerCopyMeetingDetail() {
+    if (copyInfoState.copyState !== CopyState.COPYINIT) {
+      return;
+    }
+    if (copyTimer) {
+      clearTimeout(copyTimer);
+    }
+    setCopyInfoState({
+      copyState: CopyState.COPYING,
+      copyIcon: FcrIconType.FCR_RESET,
+      copyText: t('fmt_meeting_call_voice_call_button_copy_info')
+    });
+    copyText(roomDetailCopyText).then(function () {
+      copyTimer = setTimeout(function () {
+        setCopyInfoState({
+          copyState: CopyState.COPIED,
+          copyIcon: FcrIconType.FCR_CHOOSEIT,
+          copyText: t('fmt_statusbar_status_coppied')
+        });
+      }, 1500);
+    })["catch"](function () {
+      showToast({
+        key: FcrUIToastKey.FMT_SHARING_TIPS_COPYFULL_FAILED
+      });
+    });
+  }
+  useEffect(function () {
+    if (copyInfoState.copyState === CopyState.COPIED) {
+      if (copyTimer) {
+        clearTimeout(copyTimer);
+      }
+      copyTimer = setTimeout(function () {
+        setCopyInfoState({
+          copyState: CopyState.COPYINIT,
+          copyIcon: FcrIconType.FCR_LINK,
+          copyText: t('fmt_popup_button_meetinginfor')
+        });
+      }, 1000);
+    }
+  }, [copyInfoState.copyState]);
+  useEffect(function () {
+    return function () {
+      if (copyTimer) {
+        clearTimeout(copyTimer);
+      }
+    };
+  }, []);
+  return /*#__PURE__*/_jsxs("div", {
+    className: "meeting-details",
+    children: [/*#__PURE__*/_jsxs("div", {
+      className: "meeting-details__content",
+      children: [/*#__PURE__*/_jsx("div", {
+        className: "meeting-details__content-meeting-subject",
+        children: roomName
+      }), /*#__PURE__*/_jsxs("div", {
+        className: "meeting-details__content-meeting-id",
+        children: [/*#__PURE__*/_jsx("label", {
+          children: t('fmt_meetingInfo_window_info_meetingID')
+        }), /*#__PURE__*/_jsx("span", {
+          children: displayMeetingId
+        }), /*#__PURE__*/_jsx("div", {
+          onClick: function onClick() {
+            return handleCopyMeetingId(displayMeetingId);
+          },
+          children: /*#__PURE__*/_jsx(FcrIcon, {
+            type: FcrIconType.FCR_COPY_ICON,
+            size: 20,
+            colors: {
+              iconPrimary: 'var(--fcr_ui_scene_icontext1)'
+            }
+          })
+        })]
+      }), /*#__PURE__*/_jsxs("div", {
+        className: "meeting-details__content-share-link",
+        children: [/*#__PURE__*/_jsx("label", {
+          children: t('fmt_sharing_label_invitationlink')
+        }), /*#__PURE__*/_jsx("span", {
+          children: shareLink
+        }), /*#__PURE__*/_jsx("div", {
+          onClick: function onClick() {
+            return handlerCopyMeetingShareLink(shareLink);
+          },
+          children: /*#__PURE__*/_jsx(FcrIcon, {
+            type: FcrIconType.FCR_COPY_ICON,
+            size: 20,
+            colors: {
+              iconPrimary: 'var(--fcr_ui_scene_icontext1)'
+            }
+          })
+        })]
+      }), !!password && /*#__PURE__*/_jsxs("div", {
+        className: "meeting-details__content-share-link",
+        children: [/*#__PURE__*/_jsx("label", {
+          children: t('fmt_meeting_mainwindow_topbar_left_popup_label_meeting_password', {
+            reason1: ''
+          })
+        }), /*#__PURE__*/_jsx("span", {
+          children: password
+        }), /*#__PURE__*/_jsx("div", {
+          onClick: function onClick() {
+            return handleCopyMeetingPassword(password !== null && password !== void 0 ? password : '');
+          },
+          children: /*#__PURE__*/_jsx(FcrIcon, {
+            type: FcrIconType.FCR_COPY_ICON,
+            size: 20,
+            colors: {
+              iconPrimary: 'var(--fcr_ui_scene_icontext1)'
+            }
+          })
+        })]
+      }), /*#__PURE__*/_jsxs("div", {
+        className: "meeting-details__content-share-link meeting-details__content-meeting-duration",
+        children: [/*#__PURE__*/_jsx("label", {
+          children: t('fmt_premeeting_joinroom_mobile_label_duration')
+        }), /*#__PURE__*/_jsx("span", {
+          children: meetingTime
+        })]
+      })]
+    }), /*#__PURE__*/_jsx("div", {
+      className: "meeting-details__footer",
+      children: /*#__PURE__*/_jsxs(FcrButton, {
+        size: "XS",
+        shape: "rounded",
+        onClick: handlerCopyMeetingDetail,
+        children: [/*#__PURE__*/_jsx(FcrIcon, {
+          className: classNames({
+            'meeting-details__reset-icon': copyInfoState.copyState === CopyState.COPYING
+          }),
+          type: copyInfoState.copyIcon,
+          size: 20,
+          colors: {
+            iconPrimary: 'var(--fcr_ui_scene_white10)'
+          }
+        }), /*#__PURE__*/_jsx("span", {
+          children: copyInfoState.copyText
+        })]
+      })
+    })]
+  });
+});

package/lib-es/modules/control-bar/components/microphone/index.js

@@ -0,0 +1,185 @@
+import { observer } from 'mobx-react';
+import { useContext, useEffect, useMemo } from 'react';
+import { useI18n } from 'agora-ui-foundation/lib/i18n';
+import { FcrIcon } from 'agora-ui-foundation/lib/components/icon';
+import { FcrIconType } from 'agora-ui-foundation/lib/components/icon/type';
+import { FcrIconPhoneCall } from 'agora-ui-foundation/lib/components/icon-phone-call';
+import { FcrPopover } from 'agora-ui-foundation/lib/components/popover';
+import { FcrMicrophoneIndicator } from 'agora-ui-foundation/lib/components/icon/mic';
+import micLoadingGif from '../../../../assets/mic-loading.gif';
+import { FcrUIMicrophoneState, FcrUIConnectType } from '../../../../type';
+import AudioMenu from '../../../components/device-control/components/audio-menu';
+import NoneMenu from '../../../components/device-control/components/none-menu';
+import PhoneMenu from '../../../components/device-control/components/phone-menu';
+import useDeviceTooltipVisible from '../../../components/device-control/hooks';
+import { DeviceControlStoreContext } from '../../../components/device-control/store.base';
+import { ControlBarCalculationContext } from '../../context';
+import { FcrToolTip } from 'agora-ui-foundation/lib/components/tooltip';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export var AudioRecordinDeviceIcon = observer(function (_ref) {
+  var _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 32 : _ref$size,
+    _ref$state = _ref.state,
+    state = _ref$state === void 0 ? FcrUIMicrophoneState.MUTE : _ref$state;
+  var _useContext = useContext(DeviceControlStoreContext),
+    microphoneVolumeLevel = _useContext.microphoneVolumeLevel;
+  var muteColor = {
+    iconPrimary: "var(--fcr_ui_scene_ramp_red6)",
+    iconSecondary: 'var(--fcr_ui_scene_ramp_red6)'
+  };
+  if (state === FcrUIMicrophoneState.MUTE) {
+    return /*#__PURE__*/_jsx(FcrIcon, {
+      type: FcrIconType.FCR_NOMUTE,
+      colors: muteColor,
+      size: size
+    });
+  } else if (state === FcrUIMicrophoneState.UNMUTE) {
+    return /*#__PURE__*/_jsx(FcrMicrophoneIndicator, {
+      size: size,
+      voicePercent: microphoneVolumeLevel
+    });
+  } else {
+    return /*#__PURE__*/_jsx("img", {
+      src: micLoadingGif,
+      alt: "mic-loading",
+      width: size
+    });
+  }
+});
+export var MicrophoneControl = observer(function () {
+  var _useContext2 = useContext(DeviceControlStoreContext),
+    microphoneEnabled = _useContext2.microphoneEnabled,
+    enableMicrophone = _useContext2.enableMicrophone,
+    openConnection = _useContext2.openConnection,
+    microphoneList = _useContext2.microphoneList,
+    phoneMicEnabled = _useContext2.phoneMicEnabled,
+    checkMediaPermission = _useContext2.checkMediaPermission,
+    connectType = _useContext2.connectType,
+    microphoneState = _useContext2.microphoneState;
+  var _useContext3 = useContext(ControlBarCalculationContext),
+    isShareActionNavHidden = _useContext3.isShareActionNavHidden;
+  var _useDeviceTooltipVisi = useDeviceTooltipVisible(),
+    popoverOpened = _useDeviceTooltipVisi.popoverOpened,
+    _setPopoverOpened = _useDeviceTooltipVisi.setPopoverOpened,
+    handlePopoverVisibleChanged = _useDeviceTooltipVisi.handlePopoverVisibleChanged;
+  var transI18n = useI18n();
+  var microphoneStateMapToTitle = useMemo(function () {
+    if (microphoneState === FcrUIMicrophoneState.UNMUTE) {
+      return transI18n('fmt_device_label_audio_mute');
+    }
+    if (microphoneState === FcrUIMicrophoneState.MUTE) {
+      return transI18n('fmt_device_label_audio_unmute');
+    } else {
+      return transI18n('fmt_audio_popup_button_turning_on');
+    }
+  }, [microphoneState]);
+  var noMic = microphoneList.length === 0;
+  var noMicColor = {
+    iconPrimary: "var(--fcr_web_ui_scene_mainicon1)",
+    iconSecondary: 'var(--fcr_ui_scene_ramp_red6)'
+  };
+  useEffect(function () {
+    if (isShareActionNavHidden) {
+      _setPopoverOpened(false);
+    }
+  }, [isShareActionNavHidden]);
+  return /*#__PURE__*/_jsx("div", {
+    className: "device-control-item-wrapper",
+    children: /*#__PURE__*/_jsxs("div", {
+      className: "device-control ".concat(popoverOpened ? 'active' : ''),
+      children: [/*#__PURE__*/_jsxs("div", {
+        className: "device-control-inner",
+        children: [connectType === FcrUIConnectType.NONE && /*#__PURE__*/_jsx("div", {
+          onClick: function onClick() {
+            return openConnection('computer');
+          },
+          children: /*#__PURE__*/_jsx(FcrToolTip, {
+            content: transI18n('fmt_toolbar_label_connectaudio'),
+            children: /*#__PURE__*/_jsx("div", {
+              children: /*#__PURE__*/_jsx(FcrIcon, {
+                type: FcrIconType.FCR_WEB_CONNECTSOUND,
+                size: 32,
+                colors: {
+                  iconPrimary: "var(--fcr_web_ui_scene_mainicon1)",
+                  iconSecondary: 'var(--fcr_ui_scene_ramp_green6)'
+                }
+              })
+            })
+          })
+        }), connectType === FcrUIConnectType.COMPUTER && (!noMic ? /*#__PURE__*/_jsx("div", {
+          onClick: function onClick() {
+            enableMicrophone(!microphoneEnabled);
+          },
+          children: /*#__PURE__*/_jsx(FcrToolTip, {
+            content: microphoneStateMapToTitle,
+            children: /*#__PURE__*/_jsx("div", {
+              children: /*#__PURE__*/_jsx(AudioRecordinDeviceIcon, {
+                state: microphoneState
+              })
+            })
+          })
+        }) : /*#__PURE__*/_jsx("div", {
+          onClick: function onClick() {
+            return checkMediaPermission('microphone');
+          },
+          children: /*#__PURE__*/_jsx(FcrToolTip, {
+            content: transI18n('fmt_internalsetting_status_nodevice'),
+            children: /*#__PURE__*/_jsx("div", {
+              children: /*#__PURE__*/_jsx(FcrIcon, {
+                type: FcrIconType.FCR_MUTECRASH,
+                colors: noMicColor,
+                size: 32
+              })
+            })
+          })
+        })), connectType === FcrUIConnectType.PHONE && /*#__PURE__*/_jsx("div", {
+          children: /*#__PURE__*/_jsx(FcrToolTip, {
+            content: transI18n('fmt_device_label_audio_unmute'),
+            children: /*#__PURE__*/_jsx("div", {
+              children: /*#__PURE__*/_jsx(FcrIconPhoneCall, {
+                isMuted: !phoneMicEnabled
+              })
+            })
+          })
+        })]
+      }), /*#__PURE__*/_jsx(FcrPopover, {
+        showArrow: false,
+        overlayClassName: "device-control--device-popover",
+        visible: popoverOpened,
+        onVisibleChange: handlePopoverVisibleChanged,
+        trigger: "click",
+        content: /*#__PURE__*/_jsxs("div", {
+          children: [connectType === FcrUIConnectType.NONE && /*#__PURE__*/_jsx(NoneMenu, {
+            onItemClick: function onItemClick() {
+              handlePopoverVisibleChanged(false);
+            }
+          }), connectType === FcrUIConnectType.COMPUTER && /*#__PURE__*/_jsx(AudioMenu, {
+            setPopoverOpened: function setPopoverOpened(opened) {
+              _setPopoverOpened(opened);
+            },
+            onConnectClick: function onConnectClick() {
+              handlePopoverVisibleChanged(false);
+            }
+          }), connectType === FcrUIConnectType.PHONE && /*#__PURE__*/_jsx(PhoneMenu, {
+            onItemClick: function onItemClick() {
+              handlePopoverVisibleChanged(false);
+            }
+          })]
+        }),
+        children: /*#__PURE__*/_jsx("div", {
+          onClick: function onClick(e) {
+            e.stopPropagation();
+          },
+          className: "device-control-extra ".concat(popoverOpened ? 'active' : ''),
+          children: /*#__PURE__*/_jsx(FcrIcon, {
+            type: FcrIconType.FCR_DROPUP4,
+            colors: {
+              iconPrimary: 'var(--fcr_web_ui_scene_mainicon1)'
+            },
+            size: 24
+          })
+        })
+      })]
+    })
+  });
+});

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

@@ -0,0 +1,103 @@
+.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%;
+}
+
+.leave-room-dialog-content > button {
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+.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
+  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: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;
+  position: relative;
+}
+
+.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;
+}
+
+.share-action-nav__popover-inner-content-chat-count {
+  border-radius: var(--fcr_cornerradius_xs);
+  height: 14px;
+  min-width: 18px;
+  background: var(--fcr_ui_scene_ramp_red6);
+  color: var(--fcr_ui_scene_white10);
+  font-size: 10px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.share-action-nav__popover-inner-content-text {
+  flex: 1;
+  text-align: left;
+}

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

@@ -0,0 +1,158 @@
+import "core-js/modules/es.array.filter.js";
+import "core-js/modules/es.array.map.js";
+import "core-js/modules/es.object.to-string.js";
+import "core-js/modules/esnext.iterator.constructor.js";
+import "core-js/modules/esnext.iterator.map.js";
+import { FcrIcon } from 'agora-ui-foundation/lib/components/icon';
+import { FcrIconType } from 'agora-ui-foundation/lib/components/icon/type';
+import { observer } from 'mobx-react';
+import { useContext, useEffect, useRef } from 'react';
+import { StoreContext } from '../../store';
+import './index.css';
+import { FcrLiveStreamingState, FcrRecordingState } from 'fcr-core/lib/type';
+import { useI18n } from 'agora-ui-foundation/lib/i18n';
+import classNames from 'classnames';
+import { MoreAction } from '../../enums';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export var MorePopoverContent = observer(function (props) {
+  var ref = useRef(null);
+  var hasChatPermission = props.hasChatPermission,
+    _props$closePopover = props.closePopover,
+    closePopover = _props$closePopover === void 0 ? function () {} : _props$closePopover;
+  var _useContext = useContext(StoreContext),
+    handleMoreClick = _useContext.handleMoreClick,
+    liveStreamingState = _useContext.liveStreamingState,
+    cloudRecordingState = _useContext.cloudRecordingState,
+    hasStartCloudRecordingPermission = _useContext.hasStartCloudRecordingPermission,
+    hasStartLiveStreamingPermission = _useContext.hasStartLiveStreamingPermission,
+    hasGetLiveStreamingUrlPermission = _useContext.hasGetLiveStreamingUrlPermission,
+    hasEndRoomPermission = _useContext.hasEndRoomPermission,
+    isRecordingSupported = _useContext.isRecordingSupported,
+    newMessageCount = _useContext.newMessageCount,
+    isRoomDetailSupported = _useContext.isRoomDetailSupported;
+  var transI18n = useI18n();
+  var onItemClick = function onItemClick(item) {
+    closePopover();
+    handleMoreClick(item.key);
+  };
+
+  // 分割线
+  var moreOptions = [{
+    icon: FcrIconType.FCR_WEB_CHAT,
+    text: transI18n('fmt_chat_label_chat'),
+    displayWhenNoPermission: 'hidden',
+    key: MoreAction.OPEN_CHAT,
+    hasPermission: hasChatPermission,
+    classNames: 'share-action-nav__media-list-item-with-divider'
+  },
+  // {
+  //   icon: FcrIconType.FCR_EMO,
+  //   text: transI18n('fmt_popup_label_expression'),
+  //   displayWhenNoPermission: 'hidden',
+  //   key: 'emoji',
+  //   hasPermission: false,
+  // },
+  {
+    icon: FcrIconType.FCR_CLOUDRECORD,
+    classNames: 'share-action-nav__media-list-item-with-divider',
+    text: transI18n('fmt_screenshare_controlbar_button_more_cloudRecord'),
+    displayWhenNoPermission: 'hidden',
+    key: cloudRecordingState === FcrRecordingState.Stopped ? MoreAction.CLOUD_RECORDING_START : MoreAction.CLOUD_RECORDING_STOP,
+    hasPermission: isRecordingSupported && hasStartCloudRecordingPermission && cloudRecordingState === FcrRecordingState.Stopped
+  }, {
+    icon: FcrIconType.FCR_MOREAPP,
+    text: 'Apps',
+    displayWhenNoPermission: 'hidden',
+    key: MoreAction.OPEN_APPS,
+    hasPermission: true,
+    classNames: 'share-action-nav__media-list-item-with-divider'
+  },
+  // {
+  //   icon: null,
+  //   text: transI18n('fmt_record_button_Localrecording'),
+  //   displayWhenNoPermission: 'hidden',
+  //   key: 'localRecord',
+  //   hasPermission:
+  //     hasStartCloudRecordingPermission && cloudRecordingState === FcrRecordingState.Stopped,
+  // },
+  {
+    icon: FcrIconType.FCR_LIVE,
+    classNames: 'share-action-nav__media-list-item-with-divider',
+    text: transI18n('fmt_screenshare_controlbar_button_more_live'),
+    displayWhenNoPermission: 'hidden',
+    key: MoreAction.OPEN_LIVE_STEAMING_DIALOG,
+    hasPermission: hasStartLiveStreamingPermission && liveStreamingState === FcrLiveStreamingState.STOPPED
+  }, {
+    icon: FcrIconType.FCR_EXCLAMATIONMASK,
+    text: transI18n('fmt_popup_button_meetinginfor'),
+    classNames: 'share-action-nav__media-list-item-with-divider',
+    displayWhenNoPermission: 'hidden',
+    key: MoreAction.COPY_MEETING_INFO,
+    hasPermission: isRoomDetailSupported
+  }, {
+    icon: FcrIconType.FCR_SETTING,
+    classNames: 'share-action-nav__media-list-item-with-divider',
+    text: transI18n('fmt_screenshare_controlbar_button_more_setting'),
+    displayWhenNoPermission: 'hidden',
+    key: MoreAction.OPEN_SETTING,
+    hasPermission: true
+  }, {
+    icon: FcrIconType.FCR_ATTACH,
+    classNames: 'share-action-nav__media-list-item-with-divider',
+    text: transI18n('fmt_live_label_copylink'),
+    displayWhenNoPermission: 'hidden',
+    key: MoreAction.COPY_INVITE_LINK,
+    hasPermission: liveStreamingState === FcrLiveStreamingState.STARTED && hasGetLiveStreamingUrlPermission
+  }, {
+    icon: FcrIconType.FCR_ENDMEETING,
+    key: MoreAction.LEAVE_ROOM,
+    classNames: 'share-action-nav__popover-inner-content-leave-option',
+    text: hasEndRoomPermission ? transI18n('fmt_popup_button_endmeeting') : transI18n('fmt_popup_button_leavemeeting'),
+    hasPermission: true
+  }];
+  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__*/_jsx("div", {
+    ref: ref,
+    className: "share-action-nav__popover-inner-content share-action-nav__not-draggable",
+    children: moreOptionsFilter.map(function (item, index) {
+      return /*#__PURE__*/_jsx("div", {
+        className: classNames('share-action-nav__media-list-group', item.classNames),
+        onClick: function onClick(e) {
+          e.stopPropagation();
+          onItemClick(item);
+        },
+        children: /*#__PURE__*/_jsxs("div", {
+          className: "fcr-flex fcr-items-center share-action-nav__popover-option-media-setting share-action-nav__popover-option",
+          children: [item.icon ? /*#__PURE__*/_jsx(FcrIcon, {
+            type: item.icon,
+            size: 24,
+            colors: {
+              iconPrimary: 'var(--fcr_ui_scene_icontext5)'
+            }
+          }, item.key) : /*#__PURE__*/_jsx("div", {
+            className: "icon-placeholder-symbol"
+          }), /*#__PURE__*/_jsx("span", {
+            className: "share-action-nav__popover-inner-content-text",
+            children: item.text
+          }), item.key === MoreAction.OPEN_CHAT && newMessageCount > 0 && /*#__PURE__*/_jsx("span", {
+            className: "share-action-nav__popover-inner-content-chat-count",
+            children: newMessageCount > 0 ? newMessageCount : newMessageCount > 99 ? '99+' : newMessageCount
+          })]
+        })
+      }, item.key);
+    })
+  });
+});