fcr-ui-scene 3.2.0 → 3.3.1

package/lib/modules/action-bar/switch-input-language-room/index.css

@@ -0,0 +1,86 @@
+.switch-language-channels-bar {
+  width: 100%;
+  height: 60px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background: var(--fcr_ui_scene_white8);
+  border-radius: 30px;
+  padding: 5px;
+}
+.switch-language-channels-action {
+  /* width: 50%; */
+  height: 100%;
+  padding: 3px;
+}
+.switch-language-channels-action-bg {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  height: 100%;
+  width: 100%;
+  padding: 8.5px 19.5px;
+}
+
+.switch-language-channels-action-icon {
+  width: 25px;
+  height: 25px;
+  border-radius: 50%;
+  background: rgba(63, 59, 83, 1);
+}
+
+.switch-language-channels-action__checked {
+  border-radius: 25px;
+  border: 1px solid var(--fcr_ui_scene_card3);
+  border-radius: 25px;
+}
+.switch-language-channels-action__checked .switch-language-channels-action-bg {
+  border-radius: 25px;
+  background: linear-gradient(
+    180deg,
+    #00cae0 0%,
+    #15d5ea 4.76%,
+    #6ae7f5 8.48%,
+    #64e8f7 25.6%,
+    #64e8f7 48%,
+    #00cae0 77.38%,
+    #00cae0 100%
+  );
+  box-shadow: 0px 4px 4px 0px rgba(4, 173, 191, 1) inset;
+}
+.switch-language-channels-action__checked .switch-language-channels-action-icon {
+  background: rgba(217, 217, 217, 1);
+}
+.switch-language-channels-action-text {
+  color: var(--fcr_ui_scene_black10);
+  font-size: 20px;
+  margin-left: 8px;
+}
+
+.switch-language-channels-action__checked .switch-language-channels-action-text {
+  color: var(--fcr_ui_scene_white10);
+}
+.switch-language-channels-guide-content {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.switch-language-channels-guide-content-icon {
+  height: 32px;
+  width: 32px;
+  border-radius: 16px;
+  background: var(--fcr_ui_scene_card3);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-right: 12px;
+}
+.switch-language-channels-guide-content-text {
+  width: 200px;
+  line-height: 19.5px;
+  font-size: 13px;
+}
+
+.switch-language-loading {
+  border-radius: 30px;
+}

package/lib/modules/action-bar/switch-input-language-room/index.d.ts

@@ -0,0 +1,17 @@
+import { FcrInterpreterUserInfo, FcrLanguage } from 'fcr-core/lib/room-control/interpreter-control/types';
+import './index.css';
+interface SwitchInputLanguageRoomProps {
+    interpreter: FcrInterpreterUserInfo;
+}
+export declare enum OpeneStateType {
+    CLOSE = 0,
+    OPEN = 1
+}
+export interface OptionsType {
+    label: string;
+    imgSrc: string;
+    value: FcrLanguage;
+    openeState: OpeneStateType;
+}
+export declare const SwitchInputLanguageRoom: (props: SwitchInputLanguageRoomProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/modules/action-bar/switch-input-language-room/index.js

@@ -0,0 +1,145 @@
+"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.SwitchInputLanguageRoom = exports.OpeneStateType = void 0;
+require("core-js/modules/es.array.find.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.find.js");
+require("core-js/modules/esnext.async-iterator.map.js");
+require("core-js/modules/esnext.iterator.constructor.js");
+require("core-js/modules/esnext.iterator.find.js");
+require("core-js/modules/esnext.iterator.map.js");
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = require("react");
+var _mobxReact = require("mobx-react");
+var _reactRnd = require("react-rnd");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _type = require("agora-ui-foundation/lib/components/icon/type");
+var _icon = require("agora-ui-foundation/lib/components/icon");
+var _context = require("../context");
+var _useLanguageConfig = require("../../Interpreter/interpreter-list/interpreter-item/components/pick-language/useLanguageConfig");
+var _guideTooltip = require("../switch-output-language-room/guide-tooltip");
+var _loadingWrapper = require("../../Interpreter/loading-wrapper");
+require("./index.css");
+var _jsxRuntime = require("react/jsx-runtime");
+var OpeneStateType = exports.OpeneStateType = /*#__PURE__*/function (OpeneStateType) {
+  OpeneStateType[OpeneStateType["CLOSE"] = 0] = "CLOSE";
+  OpeneStateType[OpeneStateType["OPEN"] = 1] = "OPEN";
+  return OpeneStateType;
+}({});
+var SwitchInputLanguageRoom = exports.SwitchInputLanguageRoom = (0, _mobxReact.observer)(function (props) {
+  var interpreter = props.interpreter;
+  var _useContext = (0, _react.useContext)(_context.ActionBarContext),
+    changeInputLanguage = _useContext.changeInputLanguage;
+  var getLanguageConfig = (0, _useLanguageConfig.useLanguageConfig)();
+  var sourceLanguage = interpreter.sourceLanguage,
+    targetLanguage = interpreter.targetLanguage;
+  var sourceLanguageConfig = getLanguageConfig(sourceLanguage);
+  var targetLanguageConfig = getLanguageConfig(targetLanguage);
+  var position = (0, _react.useMemo)(function () {
+    var windowWidth = window.innerWidth;
+    var width = 210;
+    var height = 60;
+    var x = windowWidth / 2 - width / 2;
+    return {
+      x: x,
+      y: -66,
+      width: width,
+      height: height
+    };
+  }, []);
+  var guideContent = (0, _react.useMemo)(function () {
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "switch-language-channels-guide-content",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "switch-language-channels-guide-content-icon",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+          type: _type.FcrIconType.FCR_INTERPRETATION2,
+          size: 25
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "switch-language-channels-guide-content-text",
+        children: "\u70B9\u51FB\u8FD9\u91CC\u53EF\u4EE5\u5207\u6362\u8981\u4F20\u8FBE\u7684\u8BED\u8A00\u9891\u9053\uFF0C\u5E76\u8BF7\u786E\u5B9A\u662F\u5426\u5DF2\u6253\u5F00\u9EA6\u514B\u98CE\u3002"
+      })]
+    });
+  }, []);
+  var _useState = (0, _react.useState)([{
+      label: sourceLanguageConfig.abbr,
+      imgSrc: sourceLanguageConfig.imgSrc,
+      value: sourceLanguageConfig.value,
+      openeState: OpeneStateType.OPEN
+    }, {
+      label: targetLanguageConfig.abbr,
+      imgSrc: targetLanguageConfig.imgSrc,
+      value: targetLanguageConfig.value,
+      openeState: OpeneStateType.CLOSE
+    }]),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    options = _useState2[0],
+    setOptions = _useState2[1];
+  var _useState3 = (0, _react.useState)(false),
+    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+    loading = _useState4[0],
+    setLoading = _useState4[1];
+  var handleClick = function handleClick(value) {
+    setLoading(true);
+    changeInputLanguage({
+      language: value,
+      options: options,
+      callback: function callback(options) {
+        setOptions(options);
+        setLoading(false);
+      }
+    });
+  };
+  (0, _react.useEffect)(function () {
+    handleClick(sourceLanguageConfig.value);
+  }, [sourceLanguageConfig]);
+  var outputLanguageRoom = (0, _react.useMemo)(function () {
+    var _options$find;
+    return (_options$find = options.find(function (ele) {
+      return ele.openeState === OpeneStateType.OPEN;
+    })) === null || _options$find === void 0 ? void 0 : _options$find.value;
+  }, [options]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactRnd.Rnd, {
+    "default": position,
+    bounds: "window",
+    enableResizing: false,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_loadingWrapper.LoadingWrapper, {
+      maskClassName: "switch-language-loading",
+      loading: loading,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_guideTooltip.GuideTooltip, {
+        content: "",
+        guideContent: guideContent,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: "switch-language-channels-bar",
+          children: options.map(function (ele) {
+            return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+              onClick: function onClick() {
+                handleClick(ele.value);
+              },
+              className: (0, _classnames["default"])('switch-language-channels-action', {
+                'switch-language-channels-action__checked': outputLanguageRoom === ele.value
+              }),
+              children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+                className: "switch-language-channels-action-bg",
+                children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+                  className: "switch-language-channels-action-icon",
+                  src: ele.imgSrc
+                }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+                  className: "switch-language-channels-action-text",
+                  children: ele.label
+                })]
+              })
+            }, ele.value);
+          })
+        })
+      })
+    })
+  });
+});

package/lib/modules/action-bar/switch-output-language-room/drop-menu.d.ts

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

package/lib/modules/action-bar/switch-output-language-room/drop-menu.js

@@ -0,0 +1,197 @@
+"use strict";
+
+require("core-js/modules/es.symbol.js");
+require("core-js/modules/es.array.for-each.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/esnext.async-iterator.filter.js");
+require("core-js/modules/esnext.async-iterator.for-each.js");
+require("core-js/modules/esnext.iterator.constructor.js");
+require("core-js/modules/esnext.iterator.filter.js");
+require("core-js/modules/esnext.iterator.for-each.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.SecurityMenu = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+require("core-js/modules/es.array.filter.js");
+require("core-js/modules/es.array.map.js");
+require("core-js/modules/es.array.push.js");
+require("core-js/modules/es.object.to-string.js");
+require("core-js/modules/esnext.async-iterator.map.js");
+require("core-js/modules/esnext.iterator.map.js");
+var _dropMenu = require("agora-ui-foundation/lib/components/drop-menu");
+var _context = require("../context");
+var _react = require("react");
+var _checkbox = require("agora-ui-foundation/lib/components/checkbox");
+var _mobxReact = require("mobx-react");
+var _i18n = require("agora-ui-foundation/lib/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 SecurityMenu = exports.SecurityMenu = (0, _mobxReact.observer)(function () {
+  var _useContext = (0, _react.useContext)(_context.ActionBarContext),
+    isLockRoomEnabled = _useContext.isLockRoomEnabled,
+    setLockRoomEnabled = _useContext.setLockRoomEnabled,
+    allowChat = _useContext.allowChat,
+    setAllowChat = _useContext.setAllowChat,
+    allowUnmuteSelfAudio = _useContext.allowUnmuteSelfAudio,
+    setAllowUnmuteSelfAudio = _useContext.setAllowUnmuteSelfAudio,
+    allowUnmuteSelfVideo = _useContext.allowUnmuteSelfVideo,
+    setAllowUnmuteSelfVideo = _useContext.setAllowUnmuteSelfVideo,
+    setAllowScreenShare = _useContext.setAllowScreenShare,
+    setAllowBoardWrite = _useContext.setAllowBoardWrite,
+    isBoardWriteEnabled = _useContext.isBoardWriteEnabled,
+    hasLockRoomPermission = _useContext.hasLockRoomPermission,
+    hasEnableStartSharePermission = _useContext.hasEnableStartSharePermission,
+    hasAllowChatPermission = _useContext.hasAllowChatPermission,
+    hasEnableStartAudioPermission = _useContext.hasEnableStartAudioPermission,
+    hasEnableStartVideoPermission = _useContext.hasEnableStartVideoPermission,
+    hasEnableChangeNamePermission = _useContext.hasEnableChangeNamePermission,
+    hasAllowWriteBoardPermission = _useContext.hasAllowWriteBoardPermission,
+    isScreenShareAndBoardEnabled = _useContext.isScreenShareAndBoardEnabled;
+  var transI18n = (0, _i18n.useI18n)();
+  var allActions = [];
+  if (hasLockRoomPermission) {
+    allActions.push({
+      title: /*#__PURE__*/(0, _jsxRuntime.jsx)(_checkbox.FcrCheckbox, {
+        checked: isLockRoomEnabled(),
+        label: transI18n('fmt_screenshare_controlbar_security_list_lock'),
+        styleType: "white"
+      }),
+      key: 'lock_room',
+      type: 'primary',
+      onButtonClick: function onButtonClick() {
+        setLockRoomEnabled(!isLockRoomEnabled());
+      }
+    });
+  }
+  allActions.push({
+    title: /*#__PURE__*/(0, _jsxRuntime.jsx)(_checkbox.FcrCheckbox, {
+      checked: false,
+      label: transI18n('fmt_security_options_activatewaitingroom'),
+      styleType: "white"
+    }),
+    key: 'enable_waiting_room',
+    type: 'disabled',
+    onButtonClick: function onButtonClick() {},
+    classNames: 'room-control-drop-with-under-line'
+  });
+  allActions.push({
+    title: transI18n('fmt_screenshare_options_allow'),
+    key: 'allow_attendee_title',
+    type: 'title'
+  });
+  if (hasEnableStartSharePermission) {
+    allActions.push({
+      title: /*#__PURE__*/(0, _jsxRuntime.jsx)(_checkbox.FcrCheckbox, {
+        checked: isScreenShareAndBoardEnabled,
+        label: transI18n('fmt_screenshare_screen_and_board'),
+        styleType: "white"
+      }),
+      key: 'share_screen',
+      type: 'primary',
+      onButtonClick: function onButtonClick() {
+        return setAllowScreenShare();
+      }
+    });
+  }
+  if (hasAllowWriteBoardPermission) {
+    allActions.push({
+      title: /*#__PURE__*/(0, _jsxRuntime.jsx)(_checkbox.FcrCheckbox, {
+        checked: isBoardWriteEnabled,
+        label: transI18n('fmt_screenshare_options_editable'),
+        styleType: "white"
+      }),
+      key: 'share_screen',
+      type: 'primary',
+      onButtonClick: setAllowBoardWrite
+    });
+  }
+  if (hasAllowChatPermission) {
+    allActions.push({
+      title: /*#__PURE__*/(0, _jsxRuntime.jsx)(_checkbox.FcrCheckbox, {
+        checked: allowChat(),
+        label: transI18n('fmt_chat_label_chat'),
+        styleType: "white"
+      }),
+      key: 'chat',
+      type: 'primary',
+      onButtonClick: function onButtonClick() {
+        setAllowChat(!allowChat());
+      }
+    });
+  }
+  if (hasEnableStartAudioPermission) {
+    allActions.push({
+      title: /*#__PURE__*/(0, _jsxRuntime.jsx)(_checkbox.FcrCheckbox, {
+        checked: allowUnmuteSelfAudio(),
+        label: transI18n('fmt_screenshare_controlbar_security_list_participant_unmute'),
+        styleType: "white"
+      }),
+      key: 'unmute_yourself',
+      type: 'primary',
+      onButtonClick: function onButtonClick() {
+        setAllowUnmuteSelfAudio(!allowUnmuteSelfAudio());
+      }
+    });
+  }
+  if (hasEnableStartVideoPermission) {
+    allActions.push({
+      title: /*#__PURE__*/(0, _jsxRuntime.jsx)(_checkbox.FcrCheckbox, {
+        checked: allowUnmuteSelfVideo(),
+        label: transI18n('fmt_security_options_openvideo'),
+        styleType: "white"
+      }),
+      key: 'start_video',
+      type: 'primary',
+      onButtonClick: function onButtonClick() {
+        setAllowUnmuteSelfVideo(!allowUnmuteSelfVideo());
+      }
+    });
+  }
+  if (hasEnableChangeNamePermission) {
+    allActions.push({
+      title: /*#__PURE__*/(0, _jsxRuntime.jsx)(_checkbox.FcrCheckbox, {
+        checked: false,
+        label: transI18n('fmt_screenshare_controlbar_security_list_participant_changeName'),
+        styleType: "white"
+      }),
+      key: 'rename',
+      type: 'disabled',
+      onButtonClick: function onButtonClick() {},
+      classNames: 'room-control-drop-with-under-line'
+    });
+  }
+  allActions.push({
+    title: /*#__PURE__*/(0, _jsxRuntime.jsx)(_checkbox.FcrCheckbox, {
+      checked: false,
+      label: transI18n('fmt_security_options_removemultiple'),
+      styleType: "white"
+    }),
+    key: 'remove_fcr-participants',
+    type: 'danger',
+    onButtonClick: function onButtonClick() {},
+    classNames: 'room-control-drop-disable'
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_dropMenu.FcrDropMenu, {
+    options: allActions.filter(function (v) {
+      return v.type !== 'disabled';
+    }).map(function (v) {
+      if (v.type === 'primary') {
+        return _objectSpread(_objectSpread({}, v), {}, {
+          title: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: "security-drop-menu-checkbox",
+            children: v.title
+          })
+        });
+      }
+      return _objectSpread({}, v);
+    })
+  });
+});

package/lib/modules/action-bar/switch-output-language-room/guide-tooltip/index.css

@@ -0,0 +1,18 @@
+.fcr-guide-tooltip {
+  max-width: none;
+}
+.fcr-guide-tooltip-close-btn {
+  margin-left: 10px;
+  /* float: left; */
+  display: inline;
+}
+
+.fcr-guide-tooltip-close-container {
+  position: relative;
+  padding-right: 20px;
+}
+.fcr-guide-tooltip-close-btn {
+  position: absolute;
+  top: 0px;
+  right: 0px;
+}

package/lib/modules/action-bar/switch-output-language-room/guide-tooltip/index.d.ts

@@ -0,0 +1,8 @@
+import { ToolTipProps } from 'agora-ui-foundation/lib/components/tooltip';
+import './index.css';
+interface GuideTooltipProps extends ToolTipProps {
+    children: React.ReactNode;
+    guideContent: string | React.ReactNode;
+}
+export declare const GuideTooltip: (props: GuideTooltipProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/modules/action-bar/switch-output-language-room/guide-tooltip/index.js

@@ -0,0 +1,59 @@
+"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.GuideTooltip = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _tooltip = require("agora-ui-foundation/lib/components/tooltip");
+var _react = require("react");
+require("./index.css");
+var _icon = require("agora-ui-foundation/lib/components/icon");
+var _type = require("agora-ui-foundation/lib/components/icon/type");
+var _jsxRuntime = require("react/jsx-runtime");
+var GuideTooltip = exports.GuideTooltip = function GuideTooltip(props) {
+  var children = props.children,
+    content = props.content,
+    guideContent = props.guideContent;
+  var _useState = (0, _react.useState)(true),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    show = _useState2[0],
+    setShow = _useState2[1];
+  var _useState3 = (0, _react.useState)(false),
+    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+    isFinishGuide = _useState4[0],
+    setIsFinishGuide = _useState4[1]; //是否关闭了引导功能
+
+  var onVisibleChange = function onVisibleChange(visible) {
+    if (isFinishGuide) {
+      setShow(visible);
+    }
+  };
+  var close = function close() {
+    setShow(false);
+    setIsFinishGuide(true);
+  };
+  var guideContentDom = /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: "fcr-guide-tooltip-close-container",
+    children: [guideContent, /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+      className: "fcr-guide-tooltip-close-btn",
+      type: _type.FcrIconType.FCR_CLOSED,
+      onClick: close,
+      size: 14,
+      colors: {
+        iconPrimary: 'var(--fcr_ui_scene_icontext3)'
+      }
+    })]
+  });
+  var text = isFinishGuide ? content : guideContentDom;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip.FcrToolTip, {
+    overlayClassName: "fcr-guide-tooltip",
+    mouseEnterDelay: 0,
+    content: text,
+    onVisibleChange: onVisibleChange,
+    visible: text ? show : false,
+    children: children
+  });
+};

package/lib/modules/action-bar/switch-output-language-room/index.d.ts

@@ -0,0 +1,12 @@
+import { FcrLanguage } from 'fcr-core/lib/room-control/interpreter-control/types';
+export type CloseAllLanguageRoomType = typeof CLOSE_ALL_LANGUAGE_ROOM;
+export type LanguageRoomOptionValue = FcrLanguage | CloseAllLanguageRoomType;
+export interface LanguageRoomOption {
+    text: string;
+    value: LanguageRoomOptionValue;
+}
+export declare const CLOSE_ALL_LANGUAGE_ROOM = "CLOSE_ALL_LANGUAGE_ROOM";
+export declare const SwitchOutputLanguageRoom: ({ id, order }: {
+    id: string;
+    order: number;
+}) => import("react/jsx-runtime").JSX.Element | null;