agora-ui-foundation 1.0.0

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

@@ -0,0 +1,207 @@
+"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.FcrParticipantsFooter = void 0;
+require("core-js/modules/es.array.unshift.js");
+var _react = _interopRequireDefault(require("react"));
+var _button = require("../../button");
+var _checkbox = require("../../checkbox");
+var _dropMenu = require("../../drop-menu");
+var _type = require("../../icon/type");
+var _popover = require("../../popover");
+require("./index.css");
+var _tooltip = require("../../tooltip");
+var _i18n = require("../../../i18n");
+var _jsxRuntime = require("react/jsx-runtime");
+var FcrParticipantsFooter = exports.FcrParticipantsFooter = function FcrParticipantsFooter(props) {
+  var _props$onRoomControlC = props.onRoomControlClick,
+    onRoomControlClick = _props$onRoomControlC === void 0 ? function () {} : _props$onRoomControlC,
+    moreDropMenu = props.moreDropMenu;
+  var t = (0, _i18n.useI18n)();
+  if (props.type === 'attendee') {
+    return props.hasRevokeHostPermission ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "fcr-participant__footer  fcr-participant__footer-creator",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.FcrButton, {
+        type: "secondary-bordered",
+        shape: "rounded",
+        size: "XS",
+        onClick: function onClick() {
+          return onRoomControlClick('REVOKE_HOST');
+        },
+        children: t('fmt_security_options_restract')
+      })
+    }) : /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {});
+  }
+  var ParticipantsFooterMore = function ParticipantsFooterMore() {
+    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('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('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('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('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('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('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('ALLOW_ATTENDEE_TO_OPEN_CAMERA');
+      },
+      classNames: 'room-control-drop-with-under-line'
+    }, {
+      title: /*#__PURE__*/(0, _jsxRuntime.jsx)(_checkbox.FcrCheckbox, {
+        checked: false,
+        label: t('fmt_security_options_removemultiple'),
+        styleType: "white"
+      }),
+      key: 'remove_fcr-participants',
+      type: 'danger',
+      onButtonClick: function onButtonClick() {},
+      classNames: 'room-control-drop-disable'
+    }];
+    if (props.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('REVOKE_HOST');
+        },
+        classNames: 'room-control-drop-with-under-line'
+      });
+    }
+    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('MUTE_ALL_AUDIO');
+        },
+        children: t('fmt_participants_button_muteAll')
+      })
+    }), /*#__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('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',
+        width: '256px'
+      },
+      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')
+      })
+    })]
+  });
+};

package/lib/components/participants/hover-perspective-attendee/index.d.ts

@@ -0,0 +1,5 @@
+export declare const AttendeeActions: (user: {
+    hasAudio: boolean;
+    isMe: boolean;
+    userId: string;
+}) => import("react/jsx-runtime").JSX.Element;

package/lib/components/participants/hover-perspective-attendee/index.js

@@ -0,0 +1,22 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.AttendeeActions = void 0;
+var _i18n = require("../../../i18n");
+var _action = require("../../button/action");
+var _jsxRuntime = require("react/jsx-runtime");
+var AttendeeActions = exports.AttendeeActions = function AttendeeActions(user) {
+  var t = (0, _i18n.useI18n)();
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    children: user.isMe ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_action.FcrActionButton, {
+      size: "small",
+      children: user.hasAudio ? t('fmt_device_label_audio_mute') : t('fmt_participants_member_button_unmute')
+    }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_action.FcrActionButton, {
+      size: "small",
+      children: t('fmt_chats_label_privatechat')
+    })
+  });
+};

package/lib/components/participants/index.css

@@ -0,0 +1,88 @@
+.fcr-participant {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  min-width: 320px;
+  min-height: 560px;
+}
+
+.fcr-participant__search-and-invite {
+  display: flex;
+  align-items: center;
+  /* margin-bottom: 15px; */
+  gap: 8px;
+  width: 100%;
+  padding: 5px 15px;
+}
+
+.fcr-participant__search-and-invite .fcr-input {
+  height: 32px;
+  flex: 1;
+}
+
+.fcr-participant__search-and-invite .fcr-button-secondary {
+  border: 0.5px solid var(--fcr_web_ui_scene_line4);
+  color: var(--fcr_ui_scene_icontext1);
+}
+
+.fcr-participant__list {
+  flex: 1;
+}
+
+.fcr-participant__list div:focus {
+  outline: none;
+}
+.fcr-participant__footer {
+  display: flex;
+  justify-content: space-between;
+  padding: 4px 15px 10px 15px;
+  gap: 8px;
+}
+
+.fcr-participant__footer button {
+  border-radius: var(--fcr_cornerradius_s);
+}
+
+.fcr-participant__footer .fcr-button-posticon {
+  width: 16px;
+}
+
+.fcr-participant__footer .fcr-button-posticon path {
+  fill: var(--fcr_ui_scene_icontext1);
+}
+
+.fcr-participant__footer .fcr-button:hover {
+  /* border-color: var(--fcr_ui_scene_ramp_brand6); */
+}
+.fcr-participant__footer .fcr-button:hover path {
+  fill: var(--fcr_web_ui_scene_mainicon2);
+}
+
+.fcr-participant__search-and-invite input {
+  border-radius: var(--fcr_cornerradius_s);
+}
+
+.attendee__more-actions,
+.attendee__footer-more-actions {
+  border: 0;
+  box-shadow: 0px 0px 15px var(--fcr_web_light_dropup_m);
+  border-radius: var(--fcr_cornerradius_l);
+  max-width: fit-content;
+}
+
+.attendee__more-actions .fcr-checkbox-input-wrapper,
+.attendee__footer-more-actions .fcr-checkbox-input-wrapper {
+  border: 0;
+}
+
+.attendee__more-actions .fcr-checkbox-input-wrapper .fcr-btn-click-effect,
+.attendee__footer-more-actions .fcr-checkbox-input-wrapper .fcr-btn-click-effect {
+  height: 24px;
+  width: 24px;
+  background: transparent;
+}
+
+.attendee__footer-more-actions .fcr-checkbox {
+  width: 100%;
+}

package/lib/components/participants/index.d.ts

@@ -0,0 +1,17 @@
+/// <reference types="react" />
+import './index.css';
+import { User } from './attendee';
+export interface ParticipantProps {
+    type: 'window' | 'modal';
+    userList: User[];
+    header?: React.ReactNode;
+    footer?: React.ReactNode;
+    perspectiveType?: 'host' | 'attendee' | 'cohost';
+    userRenderer?: (user: User) => React.ReactNode;
+    toggleParticipantAction?: (action: string, userId?: string, data?: any) => void;
+    toggleRoomControlAction?: (action: string, userId?: string) => void;
+    onSearch: (value: string) => void;
+    searchText?: string;
+    onInvite?: () => void;
+}
+export declare const FcrParticipants: (props: ParticipantProps) => import("react/jsx-runtime").JSX.Element;

package/lib/components/participants/index.js

@@ -0,0 +1,120 @@
+"use strict";
+
+require("core-js/modules/es.symbol.js");
+require("core-js/modules/es.array.filter.js");
+require("core-js/modules/es.array.for-each.js");
+require("core-js/modules/es.array.push.js");
+require("core-js/modules/es.object.define-properties.js");
+require("core-js/modules/es.object.define-property.js");
+require("core-js/modules/es.object.get-own-property-descriptor.js");
+require("core-js/modules/es.object.get-own-property-descriptors.js");
+require("core-js/modules/es.object.keys.js");
+require("core-js/modules/es.object.to-string.js");
+require("core-js/modules/web.dom-collections.for-each.js");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FcrParticipants = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _button = require("../button");
+var _reactVirtualized = require("react-virtualized");
+var _input = require("../input");
+require("./index.css");
+var _attendee = require("./attendee");
+var _footer = require("./footer");
+var _type = require("../icon/type");
+var _react = require("react");
+var _i18n = require("../../i18n");
+var _jsxRuntime = require("react/jsx-runtime");
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var FcrParticipants = exports.FcrParticipants = function FcrParticipants(props) {
+  var _useState = (0, _react.useState)(props.searchText || ''),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    value = _useState2[0],
+    setValue = _useState2[1];
+  var t = (0, _i18n.useI18n)();
+  var handleChange = function handleChange(val) {
+    setValue(val);
+    props.onSearch(val);
+  };
+  var userList = props.userList,
+    _props$perspectiveTyp = props.perspectiveType,
+    perspectiveType = _props$perspectiveTyp === void 0 ? 'host' : _props$perspectiveTyp,
+    userRenderer = props.userRenderer,
+    onInvite = props.onInvite;
+  var userRowRenderer = function userRowRenderer(renderProps) {
+    var key = renderProps.key,
+      parent = renderProps.parent,
+      index = renderProps.index,
+      style = renderProps.style;
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactVirtualized.CellMeasurer, {
+      cache: cache,
+      parent: parent,
+      columnIndex: 0,
+      rowIndex: index,
+      children: function children(_ref) {
+        var measure = _ref.measure;
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          style: style,
+          onLoad: measure,
+          children: userRenderer ? userRenderer(userList[index]) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_attendee.FcrParticipant, _objectSpread(_objectSpread({}, userList[index]), {}, {
+            perspectiveType: perspectiveType,
+            onParticipantsButtonClick: props.toggleParticipantAction
+          }))
+        });
+      }
+    }, key);
+  };
+  var cache = new _reactVirtualized.CellMeasurerCache({
+    fixedWidth: true,
+    defaultHeight: 52
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: "fcr-participant",
+    children: [props.header, /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "fcr-participant__search-and-invite",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_input.FcrInput, {
+        size: "medium",
+        placeholder: t('fmt_attendies_button_serach'),
+        value: value,
+        shape: "rounded",
+        onChange: handleChange,
+        maxLength: 21,
+        autoFocus: true,
+        iconPrefix: {
+          type: _type.FcrIconType.FCR_V2_SEARCH,
+          colors: {
+            iconPrimary: 'var(--fcr_ui_scene_icontext1)'
+          }
+        }
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.FcrButton, {
+        type: "secondary-bordered",
+        shape: "rounded",
+        size: "XS",
+        onClick: onInvite,
+        children: t('fmt_participants_button_invite')
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "fcr-participant__list",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactVirtualized.AutoSizer, {
+        children: function children(_ref2) {
+          var height = _ref2.height,
+            width = _ref2.width;
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactVirtualized.List, {
+            width: width,
+            height: height,
+            rowCount: userList.length,
+            rowHeight: cache.rowHeight,
+            rowRenderer: userRowRenderer
+          });
+        }
+      })
+    }), props.footer ? props.footer : /*#__PURE__*/(0, _jsxRuntime.jsx)(_footer.FcrParticipantsFooter, {
+      type: perspectiveType,
+      onRoomControlClick: props.toggleRoomControlAction
+    })]
+  });
+};

package/lib/components/participants/index.stories.d.ts

@@ -0,0 +1,6 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { FcrParticipants } from '.';
+declare const meta: Meta;
+type Story = StoryObj<typeof FcrParticipants>;
+export declare const Basic: Story;
+export default meta;

package/lib/components/participants/index.stories.js

@@ -0,0 +1,66 @@
+"use strict";
+
+require("core-js/modules/es.symbol.js");
+require("core-js/modules/es.array.filter.js");
+require("core-js/modules/es.array.for-each.js");
+require("core-js/modules/es.array.push.js");
+require("core-js/modules/es.object.define-properties.js");
+require("core-js/modules/es.object.define-property.js");
+require("core-js/modules/es.object.get-own-property-descriptor.js");
+require("core-js/modules/es.object.get-own-property-descriptors.js");
+require("core-js/modules/es.object.keys.js");
+require("core-js/modules/es.object.to-string.js");
+require("core-js/modules/web.dom-collections.for-each.js");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.Basic = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _ = require(".");
+var _data = require("./data");
+var _windowHeader = require("../window-header");
+var _i18n = require("../../i18n");
+var _jsxRuntime = require("react/jsx-runtime");
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var meta = {
+  title: 'Components/Participants',
+  tags: ['autodocs'],
+  argTypes: {
+    userList: {
+      description: 'List of users to display',
+      control: {
+        type: 'object'
+      }
+    },
+    type: {
+      description: 'Type of participant list',
+      control: {
+        type: 'select',
+        options: ['window', 'modal']
+      }
+    },
+    footer: {
+      description: 'Footer content',
+      control: {
+        type: 'object'
+      }
+    }
+  }
+};
+var Basic = exports.Basic = {
+  args: {
+    userList: _data.userList,
+    type: 'window',
+    perspectiveType: 'attendee',
+    header: /*#__PURE__*/(0, _jsxRuntime.jsx)(_windowHeader.FcrWindowHeader, {
+      title: (0, _i18n.transI18n)('fmt_role_participant'),
+      type: _windowHeader.WindowType.WINDOW
+    })
+  },
+  render: function render(props) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_.FcrParticipants, _objectSpread({}, props));
+  }
+};
+var _default = exports["default"] = meta;

package/lib/components/participants/participants-more/index.css

@@ -0,0 +1,17 @@
+
+.fcr-drop-menu-option-with-under-line{
+  position: relative;
+
+}
+.fcr-drop-menu-option-with-under-line::after {
+  content: "";
+  position: absolute;
+  left: 20px;
+  right: -20px;
+  bottom: -10px;
+  border-top: 1px solid var(--fcr_ui_scene_line1);
+  margin: 5px 10px;
+}
+.fcr-drop-menu-option-with-under-line:last-child:after {
+  border: 0;
+}

package/lib/components/participants/participants-more/index.d.ts

@@ -0,0 +1,4 @@
+import { FC } from 'react';
+import { IFcrParticipantProps } from '../attendee';
+import './index.css';
+export declare const FcrParticipantsMoreActions: FC<IFcrParticipantProps>;