fcr-ui-scene 3.4.5 → 3.5.0

package/lib/modules/participant/components/participants/components/footer/components/footer/index.js

@@ -0,0 +1,242 @@
+"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.FcrParticipantsFooterWithRevokeHost = exports.FcrParticipantsFooterRename = exports.FcrParticipantsFooter = void 0;
+require("core-js/modules/es.array.unshift.js");
+var _react = _interopRequireDefault(require("react"));
+var _i18n = require("agora-ui-foundation/lib/i18n");
+var _checkbox = require("agora-ui-foundation/lib/components/checkbox");
+var _dropMenu = require("agora-ui-foundation/lib/components/drop-menu");
+var _tooltip = require("agora-ui-foundation/lib/components/tooltip");
+var _button = require("agora-ui-foundation/lib/components/button");
+var _popover = require("agora-ui-foundation/lib/components/popover");
+var _type = require("agora-ui-foundation/lib/components/icon/type");
+require("./index.css");
+var _jsxRuntime = require("react/jsx-runtime");
+// 提取常量
+var ACTION_MUTE_ALL_AUDIO = 'MUTE_ALL_AUDIO';
+var ACTION_UNMUTE_ALL_AUDIO = 'UNMUTE_ALL_AUDIO';
+var ACTION_REVOKE_HOST = 'REVOKE_HOST';
+var ACTION_PLAY_JOIN_LEAVE_SOUND = 'PLAY_JOIN_LEAVE_SOUND';
+var ACTION_LOCK_ROOM = 'LOCK_ROOM';
+var ACTION_ENABLE_WAITING_ROOM = 'ENABLE_WAITING_ROOM';
+var ACTION_ALLOW_ATTENDEE_TO_UNMUTE = 'ALLOW_ATTENDEE_TO_UNMUTE';
+var ACTION_RENAME = 'RENAME';
+var ACTION_ALLOW_ATTENDEE_TO_OPEN_CAMERA = 'ALLOW_ATTENDEE_TO_OPEN_CAMERA';
+var ACTION_REVOKE_HOST_BY_TICKET = 'ACTION_REVOKE_HOST_BY_TICKET';
+var ACTION_CHANGE_NAME = 'ACTION_CHANGE_NAME';
+
+// 提取创建下拉菜单数据的函数
+var createAllActions = function createAllActions(t, onRoomControlClick, hasRevokeHostPermission) {
+  var allActions = [{
+    title: /*#__PURE__*/(0, _jsxRuntime.jsx)(_checkbox.FcrCheckbox, {
+      checked: false,
+      label: t('fmt_security_buttons_allhandsdown'),
+      styleType: "white"
+    }),
+    key: 'mute_all',
+    type: 'disabled',
+    onButtonClick: function onButtonClick() {},
+    classNames: 'room-control-drop-with-under-line'
+  }, {
+    title: /*#__PURE__*/(0, _jsxRuntime.jsx)(_checkbox.FcrCheckbox, {
+      checked: true,
+      label: t('fmt_security_options_silence'),
+      styleType: "white"
+    }),
+    key: 'join_room_with_mute',
+    type: 'primary',
+    onButtonClick: function onButtonClick() {
+      onRoomControlClick(ACTION_MUTE_ALL_AUDIO);
+    }
+  }, {
+    title: /*#__PURE__*/(0, _jsxRuntime.jsx)(_checkbox.FcrCheckbox, {
+      checked: false,
+      label: t('fmt_security_options_playnotification'),
+      styleType: "white"
+    }),
+    key: 'play_join_leave_sound',
+    type: 'disabled',
+    onButtonClick: function onButtonClick() {
+      onRoomControlClick(ACTION_PLAY_JOIN_LEAVE_SOUND);
+    }
+  }, {
+    title: /*#__PURE__*/(0, _jsxRuntime.jsx)(_checkbox.FcrCheckbox, {
+      checked: false,
+      label: t('fmt_screenshare_controlbar_security_list_lock'),
+      styleType: "white"
+    }),
+    key: 'lock_room',
+    type: 'disabled',
+    onButtonClick: function onButtonClick() {
+      onRoomControlClick(ACTION_LOCK_ROOM);
+    }
+  }, {
+    title: /*#__PURE__*/(0, _jsxRuntime.jsx)(_checkbox.FcrCheckbox, {
+      checked: false,
+      label: t('fmt_security_options_activatewaitingroom'),
+      styleType: "white"
+    }),
+    key: 'enable_waiting_room',
+    type: 'disabled',
+    onButtonClick: function onButtonClick() {
+      onRoomControlClick(ACTION_ENABLE_WAITING_ROOM);
+    },
+    classNames: 'room-control-drop-with-under-line'
+  }, {
+    title: t('fmt_screenshare_options_allow'),
+    key: 'allow_attendee_title',
+    type: 'title'
+  }, {
+    title: /*#__PURE__*/(0, _jsxRuntime.jsx)(_checkbox.FcrCheckbox, {
+      checked: false,
+      label: t('fmt_screenshare_controlbar_security_list_participant_unmute'),
+      styleType: "white"
+    }),
+    key: 'unmute_yourself',
+    type: 'primary',
+    onButtonClick: function onButtonClick() {
+      onRoomControlClick(ACTION_ALLOW_ATTENDEE_TO_UNMUTE);
+    }
+  }, {
+    title: /*#__PURE__*/(0, _jsxRuntime.jsx)(_checkbox.FcrCheckbox, {
+      checked: false,
+      label: t('fmt_screenshare_controlbar_security_list_participant_changeName'),
+      styleType: "white"
+    }),
+    key: 'rename',
+    type: 'disabled',
+    onButtonClick: function onButtonClick() {
+      onRoomControlClick(ACTION_RENAME);
+    }
+  }, {
+    title: /*#__PURE__*/(0, _jsxRuntime.jsx)(_checkbox.FcrCheckbox, {
+      checked: false,
+      label: t('fmt_security_start_video'),
+      styleType: "white"
+    }),
+    key: 'start_video',
+    type: 'primary',
+    onButtonClick: function onButtonClick() {
+      onRoomControlClick(ACTION_ALLOW_ATTENDEE_TO_OPEN_CAMERA);
+    },
+    classNames: 'room-control-drop-with-under-line'
+  }];
+  if (hasRevokeHostPermission) {
+    allActions.unshift({
+      title: /*#__PURE__*/(0, _jsxRuntime.jsx)(_checkbox.FcrCheckbox, {
+        checked: false,
+        label: t('fmt_security_options_restract'),
+        styleType: "white"
+      }),
+      key: 'revoke_host',
+      type: 'primary',
+      onButtonClick: function onButtonClick() {
+        onRoomControlClick(ACTION_REVOKE_HOST);
+      },
+      classNames: 'room-control-drop-with-under-line'
+    });
+  }
+  return allActions;
+};
+var FcrParticipantsFooter = exports.FcrParticipantsFooter = function FcrParticipantsFooter(props) {
+  var _props$onRoomControlC = props.onRoomControlClick,
+    onRoomControlClick = _props$onRoomControlC === void 0 ? function () {} : _props$onRoomControlC,
+    moreDropMenu = props.moreDropMenu,
+    hasRevokeHostPermission = props.hasRevokeHostPermission;
+  var t = (0, _i18n.useI18n)();
+  var ParticipantsFooterMore = function ParticipantsFooterMore() {
+    var allActions = createAllActions(t, onRoomControlClick, !!hasRevokeHostPermission);
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_dropMenu.FcrDropMenu, {
+      options: allActions
+    });
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: "fcr-participant__footer",
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip.FcrToolTip, {
+      content: t('fmt_participants_options_allmute'),
+      mouseEnterDelay: 0,
+      trigger: "hover",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.FcrButton, {
+        type: "secondary-bordered",
+        size: "XS",
+        onClick: function onClick() {
+          return onRoomControlClick(ACTION_MUTE_ALL_AUDIO);
+        },
+        children: t('fmt_participants_options_allmute')
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip.FcrToolTip, {
+      content: t('fmt_participants_options_allunmute'),
+      mouseEnterDelay: 0,
+      trigger: "hover",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.FcrButton, {
+        type: "secondary-bordered",
+        size: "XS",
+        onClick: function onClick() {
+          return onRoomControlClick(ACTION_UNMUTE_ALL_AUDIO);
+        },
+        children: t('fmt_participants_button_unmuteAll')
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_popover.FcrPopover, {
+      trigger: "click",
+      overlayClassName: "attendee__footer-more-actions",
+      mouseEnterDelay: 0,
+      overlayInnerStyle: {
+        boxShadow: 'none',
+        border: 'none',
+        minWidth: '256px',
+        width: 'auto',
+        maxWidth: '300px'
+      },
+      content: moreDropMenu ? moreDropMenu : /*#__PURE__*/(0, _jsxRuntime.jsx)(ParticipantsFooterMore, {}),
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.FcrButton, {
+        type: "secondary-bordered",
+        size: "XS",
+        postIcon: _type.FcrIconType.FCR_DROPDOWN,
+        children: t('fmt_participants_button_meetingManagement')
+      })
+    })]
+  });
+};
+var FcrParticipantsFooterRename = exports.FcrParticipantsFooterRename = function FcrParticipantsFooterRename(_ref) {
+  var onRoomControlClick = _ref.onRoomControlClick;
+  var t = (0, _i18n.useI18n)();
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip.FcrToolTip, {
+    content: t('fmt_additional_popup_label_change_nickname'),
+    mouseEnterDelay: 0,
+    trigger: "hover",
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.FcrButton, {
+      type: "secondary-bordered",
+      shape: "rounded",
+      size: "XS",
+      onClick: function onClick() {
+        return onRoomControlClick === null || onRoomControlClick === void 0 ? void 0 : onRoomControlClick(ACTION_CHANGE_NAME);
+      },
+      children: t('fmt_additional_popup_label_change_nickname')
+    })
+  });
+};
+
+// 如果当前不是host只是participant,并且有revoke的权限
+var FcrParticipantsFooterWithRevokeHost = exports.FcrParticipantsFooterWithRevokeHost = function FcrParticipantsFooterWithRevokeHost(_ref2) {
+  var type = _ref2.type,
+    onRoomControlClick = _ref2.onRoomControlClick;
+  var t = (0, _i18n.useI18n)();
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip.FcrToolTip, {
+    content: t(type === 'revoke' ? 'fmt_hostkey_participant_button_reclaim_host' : 'fmt_hostkey_participant_button_claim_host'),
+    mouseEnterDelay: 0,
+    trigger: "hover",
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.FcrButton, {
+      type: "secondary-bordered",
+      size: "XS",
+      onClick: function onClick() {
+        return onRoomControlClick === null || onRoomControlClick === void 0 ? void 0 : onRoomControlClick(type === 'revoke' ? ACTION_REVOKE_HOST : ACTION_REVOKE_HOST_BY_TICKET);
+      },
+      children: type === 'revoke' ? t('fmt_hostkey_participant_button_reclaim_host') : t('fmt_hostkey_participant_button_claim_host')
+    })
+  });
+};

package/lib/modules/participant/components/participants/components/footer/index.d.ts

@@ -0,0 +1,5 @@
+declare const ParticipantFooter: ({ handlerRoomControlClick, isLocalUserHost, }: {
+    handlerRoomControlClick: (action: string, userId?: string) => void;
+    isLocalUserHost: boolean;
+}) => import("react/jsx-runtime").JSX.Element;
+export default ParticipantFooter;

package/lib/modules/participant/components/participants/components/footer/index.js

@@ -0,0 +1,48 @@
+"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["default"] = void 0;
+var _mobxReact = require("mobx-react");
+var _react = require("react");
+var _buttons = _interopRequireDefault(require("./components/buttons"));
+var _dropMenu = require("./components/drop-menu");
+var _store = require("../../../../store");
+var _footer = require("./components/footer");
+var _type = require("../../../../../../type");
+var _jsxRuntime = require("react/jsx-runtime");
+var ParticipantFooter = (0, _mobxReact.observer)(function (_ref) {
+  var handlerRoomControlClick = _ref.handlerRoomControlClick,
+    isLocalUserHost = _ref.isLocalUserHost;
+  var _useContext = (0, _react.useContext)(_store.StoreContext),
+    activeTab = _useContext.activeTab,
+    hasRevokeHostPermission = _useContext.hasRevokeHostPermission,
+    openRemoveAdmitWaitingRoomDialog = _useContext.openRemoveAdmitWaitingRoomDialog,
+    showBecomeHostButton = _useContext.showBecomeHostButton,
+    isHostKeyEnabled = _useContext.isHostKeyEnabled,
+    allowChangeSelfName = _useContext.allowChangeSelfName;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+    children: activeTab === _type.FcrUIRoomType.MAIN_ROOM ? isLocalUserHost ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_footer.FcrParticipantsFooter, {
+      hasRevokeHostPermission: hasRevokeHostPermission,
+      onRoomControlClick: handlerRoomControlClick,
+      moreDropMenu: /*#__PURE__*/(0, _jsxRuntime.jsx)(_dropMenu.RoomControlDropMenu, {})
+    }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "fcr-participant__footer fcr-participant__footer-creator",
+      children: [hasRevokeHostPermission && /*#__PURE__*/(0, _jsxRuntime.jsx)(_footer.FcrParticipantsFooterWithRevokeHost, {
+        type: "revoke",
+        onRoomControlClick: handlerRoomControlClick
+      }), showBecomeHostButton && isHostKeyEnabled && /*#__PURE__*/(0, _jsxRuntime.jsx)(_footer.FcrParticipantsFooterWithRevokeHost, {
+        type: "become",
+        onRoomControlClick: handlerRoomControlClick
+      }), allowChangeSelfName && /*#__PURE__*/(0, _jsxRuntime.jsx)(_footer.FcrParticipantsFooterRename, {
+        onRoomControlClick: handlerRoomControlClick
+      })]
+    }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_buttons["default"], {
+      openRemoveAdmitWaitingRoomDialog: openRemoveAdmitWaitingRoomDialog
+    })
+  });
+});
+var _default = exports["default"] = ParticipantFooter;

package/lib/modules/participant/components/participants/components/merge/index.d.ts

@@ -0,0 +1,11 @@
+declare const MergeConfrimDialog: ({ getContainer, showMergeConfirmDialog, onClose, onOk, mergeUserInfo, }: {
+    getContainer?: () => HTMLElement;
+    showMergeConfirmDialog: boolean;
+    onClose: () => void;
+    onOk: () => void;
+    mergeUserInfo: {
+        userName: string;
+        userId: string;
+    } | undefined;
+}) => import("react/jsx-runtime").JSX.Element;
+export default MergeConfrimDialog;

package/lib/modules/participant/components/participants/components/merge/index.js

@@ -0,0 +1,49 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _dialog = require("agora-ui-foundation/lib/components/dialog");
+var _i18n = require("agora-ui-foundation/lib/i18n");
+var _jsxRuntime = require("react/jsx-runtime");
+var MergeConfrimDialog = function MergeConfrimDialog(_ref) {
+  var getContainer = _ref.getContainer,
+    showMergeConfirmDialog = _ref.showMergeConfirmDialog,
+    onClose = _ref.onClose,
+    onOk = _ref.onOk,
+    mergeUserInfo = _ref.mergeUserInfo;
+  var t = (0, _i18n.useI18n)();
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_dialog.FcrConfirmDialog, {
+    getContainer: getContainer,
+    visible: showMergeConfirmDialog,
+    footer: null,
+    okButtonVisible: false,
+    cancelButtonVisible: false,
+    width: 280,
+    onClose: onClose,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "participants-container-merge-content",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "participants-container-merge-title",
+        children: t('fmt_broadcast_livestream_merge', {
+          reason1: mergeUserInfo === null || mergeUserInfo === void 0 ? void 0 : mergeUserInfo.userName
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        onClick: function onClick() {
+          onOk();
+        },
+        className: "participants-container-merge-button participants-container-merge-confirm",
+        children: t('fmt_pstn_button_merge')
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        onClick: function onClick() {
+          onClose();
+        },
+        className: "participants-container-merge-button participants-container-merge-cancel",
+        children: t('fmt_attendies_button_cancel')
+      })]
+    })
+  });
+};
+var _default = exports["default"] = MergeConfrimDialog;

package/lib/modules/participant/components/participants/components/participants/components/attendee/index.css

@@ -0,0 +1,191 @@
+.attendee {
+  border-radius: var(--fcr_cornerradius_s);
+  display: flex;
+  align-items: center;
+  flex-direction: row;
+  max-width: 100%;
+  justify-content: space-between;
+  min-height: 52px;
+  padding: 10px 10px 10px 6px;
+  margin: 0 10px;
+  position: relative;
+}
+
+.attendee::after {
+  content: '';
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0%;
+  margin: 0 10px;
+}
+
+.attendee:hover,
+.attendee-active {
+  background-color: var(--fcr_web_ui_scene_hover);
+}
+
+.attendee:hover::after {
+  border-top: none;
+}
+
+.attendee__user-info {
+  display: flex;
+  align-items: center;
+  flex-direction: row;
+  gap: 10px;
+  flex: 1;
+}
+.attendee__user-info .fcr-avatar {
+  background-color: var(--for_head2);
+}
+
+.attendee__user-info-identity {
+  max-width: 80%;
+  width: 80%;
+}
+
+.attendee__name {
+  color: var(--for_head2);
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  word-wrap: break-word;
+  word-break: break-all;
+  font-size: 12px;
+}
+
+.attendee__host-badge {
+  color: var(--fcr_ui_scene_inverse);
+  background-color: var(--fcr_ui_scene_icontext5);
+  width: fit-content;
+  padding: 2px 4px;
+  border-radius: var(--fcr_cornerradius_xxxxs);
+  font-size: 12px;
+  height: 16px;
+  display: flex;
+  align-items: center;
+  line-height: 16px;
+}
+
+.attendee__tag-group {
+  display: flex;
+  justify-content: center;
+  justify-content: left;
+}
+
+.attendee__cohost-tag-bg {
+  /* zxq-TODO: 颜色未定义 */
+  /* background-color: var(--fcr_card_green); */
+  background: #83bc53;
+}
+
+.attendee__interpreter-tag-bg {
+  font-weight: 400;
+  background: rgba(0, 0, 0, 1);
+  padding-left: 0;
+  margin-left: 8px;
+  border-radius: 8px;
+  background: var(--fcr_mobile_ui_scene_color_popup_fill3);
+}
+.attendee__interpreter-tag-user {
+  padding-left: 4px;
+  padding-right: 4px;
+  font-size: 12px;
+  background: var(--fcr_ui_scene_ramp_purple6);
+  border-radius: var(--fcr_cornerradius_xxxs) 0px var(--fcr_cornerradius_m)
+    var(--fcr_cornerradius_xxxs);
+}
+.attendee__interpreter-tag-language {
+  padding: 0px 5px 0 5px;
+  color: var(--fcr_ui_scene_icontext7);
+}
+
+.attendee .fcr-button-posticon {
+  width: 24px;
+}
+
+.fcr-participant__footer button:not(:last-child) {
+  flex: 1;
+  min-width: 30%;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.fcr-participant__footer button {
+  padding: 0;
+}
+
+.fcr-participant__footer button:last-child {
+  width: fit-content;
+  padding: 0;
+}
+
+.attendee__user-media,
+.attendee__user-action {
+  display: flex;
+  align-items: center;
+  flex-direction: row;
+  gap: 8px;
+}
+
+.attendee__user-action {
+  position: absolute;
+  right: 14px;
+  opacity: 0;
+}
+
+.attendee:hover .attendee__user-action {
+  /* background-color: var(--fcr_web_ui_scene_hover); */
+  opacity: 1;
+}
+.attendee__footer-more-actions .fcr-tooltip-inner {
+  max-width: 364px !important;
+  min-width: 302px !important;
+  width: auto !important;
+}
+
+.attendee__footer-more-actions .fcr-drop-menu-option {
+  width: auto !important;
+}
+.attendee__footer-more-actions .fcr-checkbox-label {
+  font-size: 13px;
+}
+
+.attendee__more-actions .fcr-drop-menu-title,
+.attendee__footer-more-actions .fcr-drop-menu-title {
+  color: var(--fcr_ui_scene_icontext1);
+  font-size: 12px;
+  text-align: left;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-weight: 700;
+}
+
+.attendee__more-actions {
+  width: fit-content;
+}
+
+.attendee__more-actions .fcr-drop-menu-option-primary {
+  color: var(--fcr_ui_scene_icontext1);
+}
+
+.attendee__more-actions .fcr-drop-menu-option-primary:hover {
+  color: var(--fcr_web_ui_scene_mainicon2);
+}
+
+.attendee__more-actions .fcr-drop-menu-option-primary:hover ~ .attendee__user-action,
+.attendee__user-action-hovered {
+  opacity: 1;
+}
+
+.attendee__danger-operate {
+  color: var(--fcr_web_ui_scene_mainicon3_red);
+}
+
+.attendee__more-actions button {
+}

package/lib/modules/participant/components/participants/components/participants/components/attendee/index.d.ts

@@ -0,0 +1,4 @@
+import { FC } from 'react';
+import './index.css';
+import { IFcrParticipantItemProps } from 'agora-ui-foundation/lib/components/participants/attendee';
+export declare const FcrParticipant: FC<IFcrParticipantItemProps>;