fcr-ui-scene 3.3.1 → 3.4.0

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

@@ -1,7 +1,6 @@
-import { FcrInterpreterUserInfo, FcrLanguage } from 'fcr-core/lib/room-control/interpreter-control/types';
+import { FcrLanguage } from 'fcr-core/lib/room-control/interpreter-control/types';
 import './index.css';
 interface SwitchInputLanguageRoomProps {
-    interpreter: FcrInterpreterUserInfo;
 }
 export declare enum OpeneStateType {
     CLOSE = 0,

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

@@ -6,12 +6,15 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.SwitchInputLanguageRoom = exports.OpeneStateType = void 0;
+require("core-js/modules/es.array.filter.js");
 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.filter.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.filter.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"));
@@ -21,11 +24,13 @@ 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 _store = require("../store");
+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");
+var _loadingWrapper = require("../../interpreter/loading-wrapper");
 require("./index.css");
+var _constant = require("../../interpreter/constant");
+var _i18n = require("agora-ui-foundation/lib/i18n");
 var _jsxRuntime = require("react/jsx-runtime");
 var OpeneStateType = exports.OpeneStateType = /*#__PURE__*/function (OpeneStateType) {
   OpeneStateType[OpeneStateType["CLOSE"] = 0] = "CLOSE";
@@ -33,14 +38,14 @@ var OpeneStateType = exports.OpeneStateType = /*#__PURE__*/function (OpeneStateT
   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 _useContext = (0, _react.useContext)(_store.ActionBarContext),
+    changeInputLanguage = _useContext.changeInputLanguage,
+    interpreter = _useContext.interpreter,
+    toggleLanguageRoom = _useContext.toggleLanguageRoom,
+    changeInputLanguageByMain = _useContext.changeInputLanguageByMain,
+    closeAllLanguageRoomInput = _useContext.closeAllLanguageRoomInput;
   var getLanguageConfig = (0, _useLanguageConfig.useLanguageConfig)();
-  var sourceLanguage = interpreter.sourceLanguage,
-    targetLanguage = interpreter.targetLanguage;
-  var sourceLanguageConfig = getLanguageConfig(sourceLanguage);
-  var targetLanguageConfig = getLanguageConfig(targetLanguage);
+  var transI18n = (0, _i18n.useI18n)();
   var position = (0, _react.useMemo)(function () {
     var windowWidth = window.innerWidth;
     var width = 210;
@@ -48,7 +53,7 @@ var SwitchInputLanguageRoom = exports.SwitchInputLanguageRoom = (0, _mobxReact.o
     var x = windowWidth / 2 - width / 2;
     return {
       x: x,
-      y: -66,
+      y: -86,
       width: width,
       height: height
     };
@@ -60,68 +65,154 @@ var SwitchInputLanguageRoom = exports.SwitchInputLanguageRoom = (0, _mobxReact.o
         className: "switch-language-channels-guide-content-icon",
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
           type: _type.FcrIconType.FCR_INTERPRETATION2,
-          size: 25
+          size: 25,
+          colors: {
+            iconPrimary: 'var(--fcr_ui_scene_white10)'
+          }
         })
       }), /*#__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"
+        children: transI18n('fmt_interpretation_interpreter_toast_label_change_channel')
       })]
     });
   }, []);
-  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
-    }]),
+  var _useState = (0, _react.useState)([]),
     _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
-    options = _useState2[0],
-    setOptions = _useState2[1];
+    languageRoomList = _useState2[0],
+    setLanguageRoomList = _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) {
+  var handleClick = function handleClick(value, _languageRoomList) {
     setLoading(true);
-    changeInputLanguage({
-      language: value,
-      options: options,
-      callback: function callback(options) {
-        setOptions(options);
-        setLoading(false);
+    try {
+      changeInputLanguage({
+        language: value,
+        options: _languageRoomList,
+        callback: function callback(languageRoomList) {
+          setLanguageRoomList(languageRoomList);
+          setLoading(false);
+        }
+      });
+    } catch (error) {
+      setLoading(false);
+    }
+  };
+  var outputLanguageRoom = (0, _react.useMemo)(function () {
+    var _languageRoomList$fin;
+    return (_languageRoomList$fin = languageRoomList.find(function (ele) {
+      return ele.openeState === OpeneStateType.OPEN;
+    })) === null || _languageRoomList$fin === void 0 ? void 0 : _languageRoomList$fin.value;
+  }, [languageRoomList]);
+  var mergeLanguageRoom = function mergeLanguageRoom() {
+    var _ref = interpreter || {},
+      sourceLanguage = _ref.sourceLanguage,
+      targetLanguage = _ref.targetLanguage;
+    return [sourceLanguage, targetLanguage].map(function (language) {
+      var languageConfig = getLanguageConfig(language);
+      var abbr = languageConfig.abbr,
+        imgSrc = languageConfig.imgSrc,
+        value = languageConfig.value;
+      var initOpeneState = value === sourceLanguage ? OpeneStateType.OPEN : OpeneStateType.CLOSE;
+      var preLanguageRoom = languageRoomList.find(function (languageRoom) {
+        return languageRoom.value === language;
+      });
+      return {
+        label: abbr,
+        imgSrc: imgSrc,
+        value: value,
+        openeState: preLanguageRoom ? preLanguageRoom.openeState : initOpeneState
+      };
+    });
+  };
+  (0, _react.useEffect)(function () {
+    setLoading(true);
+    try {
+      changeInputLanguageByMain({
+        close: true,
+        callback: function callback(res) {
+          if (res) {
+            var newLanguageRoomList = mergeLanguageRoom();
+            var leftRoomList = languageRoomList.filter(function (preRoom) {
+              return !newLanguageRoomList.find(function (room) {
+                return room.value === preRoom.value;
+              });
+            });
+            closeAllLanguageRoomInput({
+              options: leftRoomList,
+              callback: function callback() {
+                toggleLanguageRoom({
+                  actionType: _constant.UpdateType.LEFT,
+                  languageRoomList: leftRoomList,
+                  callback: function callback() {
+                    toggleLanguageRoom({
+                      actionType: _constant.UpdateType.JOIN,
+                      languageRoomList: newLanguageRoomList,
+                      callback: function callback() {
+                        handleClick(newLanguageRoomList[1].value, newLanguageRoomList);
+                      }
+                    });
+                  }
+                });
+              }
+            });
+          } else {
+            setLoading(false);
+          }
+        }
+      });
+    } catch (error) {
+      setLoading(false);
+    }
+  }, [interpreter]);
+  var unloadRef = (0, _react.useRef)();
+  unloadRef.current = function () {
+    changeInputLanguageByMain({
+      close: false,
+      callback: function callback() {
+        closeAllLanguageRoomInput({
+          options: languageRoomList,
+          callback: function callback() {
+            toggleLanguageRoom({
+              actionType: _constant.UpdateType.LEFT,
+              languageRoomList: languageRoomList
+            });
+          }
+        });
       }
     });
   };
   (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 function () {
+      unloadRef.current && unloadRef.current();
+    };
+  }, []);
+  var guideTooltip = (0, _react.useRef)();
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactRnd.Rnd, {
     "default": position,
     bounds: "window",
     enableResizing: false,
+    onDragStart: function onDragStart() {
+      if (guideTooltip.current) {
+        if (guideTooltip.current.show) {
+          guideTooltip.current.setShow(false);
+        }
+      }
+    },
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_loadingWrapper.LoadingWrapper, {
       maskClassName: "switch-language-loading",
       loading: loading,
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_guideTooltip.GuideTooltip, {
         content: "",
         guideContent: guideContent,
+        ref: guideTooltip,
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
           className: "switch-language-channels-bar",
-          children: options.map(function (ele) {
+          children: languageRoomList.map(function (ele) {
             return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
               onClick: function onClick() {
-                handleClick(ele.value);
+                handleClick(ele.value, languageRoomList);
               },
               className: (0, _classnames["default"])('switch-language-channels-action', {
                 'switch-language-channels-action__checked': outputLanguageRoom === ele.value

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

@@ -26,7 +26,7 @@ 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 _store = require("../store");
 var _react = require("react");
 var _checkbox = require("agora-ui-foundation/lib/components/checkbox");
 var _mobxReact = require("mobx-react");
@@ -35,7 +35,7 @@ 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),
+  var _useContext = (0, _react.useContext)(_store.ActionBarContext),
     isLockRoomEnabled = _useContext.isLockRoomEnabled,
     setLockRoomEnabled = _useContext.setLockRoomEnabled,
     allowChat = _useContext.allowChat,
@@ -159,7 +159,7 @@ var SecurityMenu = exports.SecurityMenu = (0, _mobxReact.observer)(function () {
     allActions.push({
       title: /*#__PURE__*/(0, _jsxRuntime.jsx)(_checkbox.FcrCheckbox, {
         checked: false,
-        label: transI18n('fmt_screenshare_controlbar_security_list_participant_changeName'),
+        label: transI18n('fmt_additional_label_change_name_self'),
         styleType: "white"
       }),
       key: 'rename',

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

@@ -1,8 +1,14 @@
 import { ToolTipProps } from 'agora-ui-foundation/lib/components/tooltip';
 import './index.css';
+export interface guideTooltipPropsRef {
+    setShow: React.Dispatch<React.SetStateAction<boolean>>;
+    show: boolean;
+}
 interface GuideTooltipProps extends ToolTipProps {
     children: React.ReactNode;
     guideContent: string | React.ReactNode;
+    initShowGuide?: boolean;
+    onClose?: (visible: boolean) => any;
 }
-export declare const GuideTooltip: (props: GuideTooltipProps) => import("react/jsx-runtime").JSX.Element;
+export declare const GuideTooltip: import("react").ForwardRefExoticComponent<GuideTooltipProps & import("react").RefAttributes<unknown>>;
 export {};

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

@@ -13,27 +13,28 @@ 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 GuideTooltip = exports.GuideTooltip = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var children = props.children,
     content = props.content,
-    guideContent = props.guideContent;
-  var _useState = (0, _react.useState)(true),
+    guideContent = props.guideContent,
+    _props$initShowGuide = props.initShowGuide,
+    initShowGuide = _props$initShowGuide === void 0 ? true : _props$initShowGuide,
+    onClose = props.onClose;
+  var _useState = (0, _react.useState)(initShowGuide),
     _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 showGuideRef = (0, _react.useRef)(initShowGuide);
+  (0, _react.useImperativeHandle)(ref, function () {
+    return {
+      setShow: setShow,
+      show: show
+    };
+  }, [show]);
   var close = function close() {
     setShow(false);
-    setIsFinishGuide(true);
+    showGuideRef.current = false;
+    onClose && onClose(false);
   };
   var guideContentDom = /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
     className: "fcr-guide-tooltip-close-container",
@@ -47,13 +48,25 @@ var GuideTooltip = exports.GuideTooltip = function GuideTooltip(props) {
       }
     })]
   });
-  var text = isFinishGuide ? content : guideContentDom;
+  (0, _react.useEffect)(function () {
+    if (initShowGuide) {
+      showGuideRef.current = true;
+      setShow(true);
+    }
+  }, [guideContent]);
+  var onVisibleChange = function onVisibleChange(visible) {
+    if (!showGuideRef.current) {
+      setShow(visible);
+    }
+  };
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip.FcrToolTip, {
     overlayClassName: "fcr-guide-tooltip",
     mouseEnterDelay: 0,
-    content: text,
-    onVisibleChange: onVisibleChange,
-    visible: text ? show : false,
+    onVisibleChange: onVisibleChange
+    // content={showGuideContetRef.current}
+    ,
+    content: showGuideRef.current ? guideContentDom : content,
+    visible: show,
     children: children
   });
-};
+});