fcr-ui-scene 3.4.5 → 3.5.0

package/lib/modules/action-bar/components/trigger-output-language/index.js

@@ -1,17 +1,30 @@
 "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/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.TriggerOutputLanguage = void 0;
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
-var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 require("core-js/modules/es.array.map.js");
-require("core-js/modules/esnext.async-iterator.map.js");
+require("core-js/modules/es.object.to-string.js");
+require("core-js/modules/esnext.iterator.constructor.js");
 require("core-js/modules/esnext.iterator.map.js");
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = require("react");
 var _mobxReact = require("mobx-react");
 var _reactRnd = require("react-rnd");
@@ -25,8 +38,10 @@ var _loadingWrapper = require("../../../interpreter/loading-wrapper");
 var _i18n = require("agora-ui-foundation/lib/i18n");
 require("./index.css");
 var _jsxRuntime = require("react/jsx-runtime");
-var useDefaultPosition = function useDefaultPosition() {
-  var position = (0, _react.useMemo)(function () {
+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 useRndProps = function useRndProps() {
+  var defaultPosition = (0, _react.useMemo)(function () {
     var windowWidth = window.innerWidth;
     var width = 210;
     var height = 60;
@@ -38,7 +53,26 @@ var useDefaultPosition = function useDefaultPosition() {
       height: height
     };
   }, []);
-  return position;
+  var _useState = (0, _react.useState)(defaultPosition.x),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    currentCoordinateX = _useState2[0],
+    setCurrentCoordinateX = _useState2[1];
+  var _useState3 = (0, _react.useState)(defaultPosition.y),
+    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+    currentCoordinateY = _useState4[0],
+    setCurrentCoordinateY = _useState4[1];
+  var onDrag = function onDrag(_, data) {
+    setCurrentCoordinateX(data.x);
+    setCurrentCoordinateY(data.y > -60 ? -60 : data.y);
+  };
+  return {
+    "default": defaultPosition,
+    position: {
+      x: currentCoordinateX,
+      y: currentCoordinateY
+    },
+    onDrag: onDrag
+  };
 };
 var useGuideContent = function useGuideContent() {
   var transI18n = (0, _i18n.useI18n)();
@@ -64,15 +98,9 @@ var useGuideContent = function useGuideContent() {
 var useOutputLanguageOptionList = function useOutputLanguageOptionList() {
   var getLanguageConfig = (0, _useLanguageConfig.useLanguageConfig)();
   var _useContext = (0, _react.useContext)(_store.ActionBarContext),
-    interpreter = _useContext.interpreter;
+    supportedLanguages = _useContext.supportedLanguages;
   return (0, _react.useMemo)(function () {
-    var outputLanguageOptionList = [];
-    if (interpreter) {
-      var sourceLanguage = interpreter.sourceLanguage,
-        targetLanguage = interpreter.targetLanguage;
-      outputLanguageOptionList = [sourceLanguage, targetLanguage];
-    }
-    return outputLanguageOptionList.map(function (language) {
+    return supportedLanguages.map(function (language) {
       var languageConfig = getLanguageConfig(language);
       var abbr = languageConfig.abbr,
         imgSrc = languageConfig.imgSrc,
@@ -83,17 +111,17 @@ var useOutputLanguageOptionList = function useOutputLanguageOptionList() {
         value: value
       };
     });
-  }, [interpreter]);
+  }, [supportedLanguages]);
 };
 var usePosition = function usePosition() {
-  var _useState = (0, _react.useState)(0),
-    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
-    startX = _useState2[0],
-    setStartX = _useState2[1];
-  var _useState3 = (0, _react.useState)(0),
-    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
-    startY = _useState4[0],
-    setStartY = _useState4[1];
+  var _useState5 = (0, _react.useState)(0),
+    _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
+    startX = _useState6[0],
+    setStartX = _useState6[1];
+  var _useState7 = (0, _react.useState)(0),
+    _useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
+    startY = _useState8[0],
+    setStartY = _useState8[1];
   var handleMouseDown = function handleMouseDown(e) {
     setStartX(e.clientX);
     setStartY(e.clientY);
@@ -109,12 +137,19 @@ var TriggerOutputLanguage = exports.TriggerOutputLanguage = (0, _mobxReact.obser
     setOutputLanguage = _useContext2.setOutputLanguage,
     outputLanguage = _useContext2.outputLanguage;
   var position = usePosition();
+  var guideContent = useGuideContent();
+  var rndProps = useRndProps();
   var outputLanguageOptionList = useOutputLanguageOptionList();
-  var _useState5 = (0, _react.useState)(false),
-    _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
-    loading = _useState6[0],
-    setLoading = _useState6[1];
-  var guideTooltip = (0, _react.useRef)();
+  var _useState9 = (0, _react.useState)(false),
+    _useState10 = (0, _slicedToArray2["default"])(_useState9, 2),
+    loading = _useState10[0],
+    setLoading = _useState10[1];
+  var guideToolTipRef = (0, _react.useRef)();
+  var onDragStart = function onDragStart() {
+    if (guideToolTipRef.current) {
+      guideToolTipRef.current.setShow(false);
+    }
+  };
   var handleSetOutputLanguage = /*#__PURE__*/function () {
     var _ref = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee(language) {
       return _regenerator["default"].wrap(function _callee$(_context) {
@@ -158,42 +193,17 @@ var TriggerOutputLanguage = exports.TriggerOutputLanguage = (0, _mobxReact.obser
       return _ref2.apply(this, arguments);
     };
   }();
-  var onDragStart = function onDragStart() {
-    if (guideTooltip.current) {
-      guideTooltip.current.setShow(false);
-    }
-  };
-  var guideContent = useGuideContent();
-  var defaultPosition = useDefaultPosition();
-  var _useState7 = (0, _react.useState)(defaultPosition.x),
-    _useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
-    currentCoordinateX = _useState8[0],
-    setCurrentCoordinateX = _useState8[1];
-  var _useState9 = (0, _react.useState)(defaultPosition.y),
-    _useState10 = (0, _slicedToArray2["default"])(_useState9, 2),
-    currentCoordinateY = _useState10[0],
-    setCurrentCoordinateY = _useState10[1];
-  var onDrag = function onDrag(_, data) {
-    setCurrentCoordinateX(data.x);
-    setCurrentCoordinateY(data.y > -60 ? -60 : data.y);
-  };
   if (!outputLanguage) {
     return null;
   }
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactRnd.Rnd, {
-    "default": defaultPosition,
-    onDrag: onDrag,
-    position: {
-      x: currentCoordinateX,
-      y: currentCoordinateY
-    },
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactRnd.Rnd, _objectSpread(_objectSpread({}, rndProps), {}, {
     bounds: "window",
     enableResizing: false,
     onDragStart: onDragStart,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_guideTooltip.GuideTooltip, {
       content: "",
       guideContent: guideContent,
-      ref: guideTooltip,
+      ref: guideToolTipRef,
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_loadingWrapper.LoadingWrapper, {
         maskClassName: "switch-language-loading",
         loading: loading,
@@ -226,5 +236,5 @@ var TriggerOutputLanguage = exports.TriggerOutputLanguage = (0, _mobxReact.obser
         })
       })
     })
-  });
+  }));
 });

package/lib/modules/action-bar/components/trigger-subscribe-language/index.js

@@ -16,9 +16,6 @@ require("core-js/modules/es.array.some.js");
 require("core-js/modules/es.function.name.js");
 require("core-js/modules/es.object.to-string.js");
 require("core-js/modules/es.string.includes.js");
-require("core-js/modules/esnext.async-iterator.filter.js");
-require("core-js/modules/esnext.async-iterator.map.js");
-require("core-js/modules/esnext.async-iterator.some.js");
 require("core-js/modules/esnext.iterator.constructor.js");
 require("core-js/modules/esnext.iterator.filter.js");
 require("core-js/modules/esnext.iterator.map.js");
@@ -55,12 +52,12 @@ var useSubscribeLanguageOptionList = function useSubscribeLanguageOptionList() {
 };
 var usesSubscribeMainRoom = function usesSubscribeMainRoom() {
   var _useContext2 = (0, _react.useContext)(_store.ActionBarContext),
-    subscribeLanguageList = _useContext2.subscribeLanguageList;
+    hasSubscribedLanguageList = _useContext2.hasSubscribedLanguageList;
   var transI18n = (0, _i18n.useI18n)();
   var label = transI18n('fmt_interpretation_mobile_attendnees_popup_label_original_aswell');
   return (0, _react.useMemo)(function () {
-    var checked = subscribeLanguageList.includes(_interpreter.ORIGIN);
-    var languageList = subscribeLanguageList.filter(function (language) {
+    var checked = hasSubscribedLanguageList.includes(_interpreter.ORIGIN);
+    var languageList = hasSubscribedLanguageList.filter(function (language) {
       return language !== _interpreter.ORIGIN;
     });
     var isShow = languageList.length > 0;
@@ -69,13 +66,13 @@ var usesSubscribeMainRoom = function usesSubscribeMainRoom() {
       isShow: isShow,
       label: label
     };
-  }, [subscribeLanguageList]);
+  }, [hasSubscribedLanguageList]);
 };
 var TriggerSubscribeLanguagePopoverContent = exports.TriggerSubscribeLanguagePopoverContent = (0, _mobxReact.observer)(function () {
   var _useContext3 = (0, _react.useContext)(_store.ActionBarContext),
     subscribeLanguage = _useContext3.subscribeLanguage,
-    setSubscribeMainRoom = _useContext3.setSubscribeMainRoom,
-    subscribeLanguageList = _useContext3.subscribeLanguageList;
+    subscribeExtraOriginLanguage = _useContext3.subscribeExtraOriginLanguage,
+    hasSubscribedLanguageList = _useContext3.hasSubscribedLanguageList;
   var optionList = useSubscribeLanguageOptionList();
   var _useState = (0, _react.useState)(false),
     _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
@@ -102,9 +99,26 @@ var TriggerSubscribeLanguagePopoverContent = exports.TriggerSubscribeLanguagePop
       return _ref.apply(this, arguments);
     };
   }();
-  var clickSubscribeMainRoom = function clickSubscribeMainRoom() {
-    setSubscribeMainRoom(!subscribeMainRoom.checked);
-  };
+  var clickSubscribeMainRoom = /*#__PURE__*/function () {
+    var _ref2 = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee2() {
+      return _regenerator["default"].wrap(function _callee2$(_context2) {
+        while (1) switch (_context2.prev = _context2.next) {
+          case 0:
+            setLoading(true);
+            _context2.next = 3;
+            return subscribeExtraOriginLanguage(!subscribeMainRoom.checked);
+          case 3:
+            setLoading(false);
+          case 4:
+          case "end":
+            return _context2.stop();
+        }
+      }, _callee2);
+    }));
+    return function clickSubscribeMainRoom() {
+      return _ref2.apply(this, arguments);
+    };
+  }();
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
     className: "fcr-device-popover-content",
     onClick: function onClick(e) {
@@ -121,7 +135,7 @@ var TriggerSubscribeLanguagePopoverContent = exports.TriggerSubscribeLanguagePop
             children: optionList.map(function (option) {
               var value = option.value,
                 label = option.label;
-              var checked = value === _interpreter.ORIGIN && subscribeLanguageList.length > 1 ? false : subscribeLanguageList.includes(value);
+              var checked = value === _interpreter.ORIGIN && hasSubscribedLanguageList.length > 1 ? false : hasSubscribedLanguageList.includes(value);
               return /*#__PURE__*/(0, _jsxRuntime.jsx)(_radio.FcrRadio, {
                 name: "mic",
                 styleType: "transparent",
@@ -152,13 +166,13 @@ var TriggerSubscribeLanguagePopoverContent = exports.TriggerSubscribeLanguagePop
 });
 var useGuideContent = function useGuideContent() {
   var _useContext4 = (0, _react.useContext)(_store.ActionBarContext),
-    preSubscribeLanguageList = _useContext4.preSubscribeLanguageList,
+    preHasSubscribedLanguageList = _useContext4.preHasSubscribedLanguageList,
     subscribeLanguageOptionList = _useContext4.subscribeLanguageOptionList;
   var transI18n = (0, _i18n.useI18n)();
   var content = transI18n('fmt_interpretation_sidebar_toast_hover_choose_language');
   var guideContent = transI18n('fmt_interpretation_mobile_toast_controller_label_interpret_in_process');
   var removeGuideContent = transI18n('fmt_interpretation_attendness_sidbar_popup_toast_label_channel_close');
-  var isRemove = preSubscribeLanguageList.some(function (ele) {
+  var isRemove = preHasSubscribedLanguageList.some(function (ele) {
     return !subscribeLanguageOptionList.includes(ele);
   });
   return (0, _react.useMemo)(function () {
@@ -166,19 +180,19 @@ var useGuideContent = function useGuideContent() {
       content: content,
       guideContent: !!isRemove ? removeGuideContent : guideContent
     };
-  }, [preSubscribeLanguageList, subscribeLanguageOptionList]);
+  }, [preHasSubscribedLanguageList, subscribeLanguageOptionList]);
 };
-var TriggerSubscribeLanguage = exports.TriggerSubscribeLanguage = (0, _mobxReact.observer)(function (_ref2) {
-  var id = _ref2.id,
-    order = _ref2.order;
+var TriggerSubscribeLanguage = exports.TriggerSubscribeLanguage = (0, _mobxReact.observer)(function (_ref3) {
+  var id = _ref3.id,
+    order = _ref3.order;
   var transI18n = (0, _i18n.useI18n)();
   var title = transI18n('fmt_interpretation_mobile_setting_controller_option_interpret');
   var _useContext5 = (0, _react.useContext)(_store.ActionBarContext),
-    interpreterState = _useContext5.interpreterState;
+    isInterpreterEnabled = _useContext5.isInterpreterEnabled;
   var _useGuideContent = useGuideContent(),
     content = _useGuideContent.content,
     guideContent = _useGuideContent.guideContent;
-  if (!interpreterState) {
+  if (!isInterpreterEnabled) {
     return null;
   }
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_guideTooltip.GuideTooltip, {

package/lib/modules/action-bar/context.d.ts

@@ -0,0 +1,2 @@
+import ActionBarStore from './store';
+export declare const ActionBarContext: import("react").Context<ActionBarStore>;

package/lib/modules/action-bar/context.js

@@ -0,0 +1,9 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ActionBarContext = void 0;
+var _react = require("react");
+var ActionBarContext = exports.ActionBarContext = /*#__PURE__*/(0, _react.createContext)(null);

package/lib/modules/action-bar/device/index.css

@@ -0,0 +1,162 @@
+.fcr-action-bar-device {
+  border-radius: var(--fcr_cornerradius_s);
+  position: relative;
+  min-width: 71px;
+  cursor: pointer;
+}
+.fcr-action-bar-device:hover {
+  background: var(--fcr_web_ui_scene_hover2);
+}
+.fcr-action-bar-device-inner {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.fcr-action-bar-device-inner > div {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.fcr-action-bar-device-inner .fcr-microphone path:first-of-type {
+  fill: var(--fcr_web_ui_scene_mainicon1);
+}
+.fcr-action-bar-device-inner .fcr-microphone stop:nth-of-type(1),
+.fcr-action-bar-device-inner .fcr-microphone stop:nth-of-type(2) {
+  stop-color: var(--fcr_web_ui_scene_mainicon1);
+}
+.fcr-action-bar-device-text {
+  color: var(--fcr_ui_scene_icontext2);
+  line-height: 12px;
+  font-size: 12px;
+  text-align: center;
+  font-weight: 400;
+}
+.fcr-action-bar-device-extra,
+.fcr-action-bar-extra {
+  border-radius: var(--fcr_cornerradius_xs);
+  position: absolute;
+  right: 3px;
+  top: 3px;
+  width: 18px;
+  height: 30px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.fcr-action-bar-device-extra:hover,
+.fcr-action-bar-extra:hover {
+  background: var(--fcr_web_ui_scene_hover2);
+}
+.fcr-action-bar-device-extra:hover svg,
+.fcr-action-bar-extra:hover svg {
+  transform: translateY(-3px);
+  transition: all 0.2s;
+}
+
+.fcr-action-bar--device-popover .fcr-tooltip-inner {
+  border-radius: var(--fcr_cornerradius_l);
+  border: 0.5px solid var(--fcr_ui_scene_line1);
+  background: var(--fcr_mobile_ui_scene_color_popup_fill2);
+  box-shadow: var(--fcr_web_light_dropup_m) !important;
+  text-align: left !important;
+  margin-left: 10px;
+}
+
+.fcr-device-popover-content-device {
+  padding: 8px 10px;
+}
+.fcr-device-popover-content-device:not(:first-child) {
+  border-top-width: 1px;
+  border-top-style: solid;
+}
+.fcr-device-popover-content-device-label {
+  color: var(--fcr_ui_scene_icontext1);
+  font-size: 12px;
+  line-height: 32px;
+  padding-left: 13px;
+}
+.fcr-device-popover-content-device-options {
+  margin-top: 8px;
+}
+.fcr-device-popover-content-device-options .fcr-radio {
+  border-radius: var(--fcr_cornerradius_xxs);
+  height: 32px;
+  width: 100%;
+  padding: 0 6px;
+  transition: all 0.2s ease;
+}
+.fcr-device-popover-content-device-options .fcr-radio:hover {
+  background: var(--fcr_web_ui_scene_hover);
+}
+.fcr-device-popover-content-device-options .fcr-radio:hover .fcr-radio-label {
+  color: var(--fcr_web_ui_scene_mainicon2);
+}
+.fcr-device-popover-content-device-options .fcr-radio:hover .fcr-radio-inner svg path {
+  fill: var(--fcr_web_ui_scene_mainicon2);
+}
+.fcr-device-popover-content-device-options .fcr-radio-inner {
+  width: 14px;
+  height: 14px;
+}
+.fcr-device-popover-content-device-options .fcr-radio-inner svg {
+  width: 14px;
+  height: 14px;
+}
+.fcr-device-popover-content-device-options .fcr-radio-inner svg path {
+  fill: var(--fcr_ui_scene_icontext1);
+  transition: all 0.1s ease;
+}
+.fcr-device-popover-content-device-options .fcr-radio-label {
+  padding-left: 8px;
+  color: var(--fcr_ui_scene_icontext1);
+  font-size: 13px;
+  line-height: 100%;
+  transition: all 0.1s ease;
+}
+.fcr-device-popover-content-more {
+  border-top-width: 1px;
+  border-top-style: solid;
+  padding: 8px 10px;
+}
+.fcr-device-popover-content-more-item {
+  border-radius: var(--fcr_cornerradius_xxs);
+  height: 32px;
+  width: 100%;
+  padding: 4px 6px 4px 36px;
+  font-size: 13px;
+  line-height: 100%;
+  color: var(--fcr_ui_scene_icontext1, #373c42);
+  cursor: pointer;
+  transition: all 0.2s ease;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.fcr-device-popover-content-more-item.contain-icon {
+  padding: 4px 6px;
+}
+.fcr-device-popover-content-more-item:hover {
+  color: var(--fcr_web_ui_scene_mainicon2);
+  background: var(--fcr_web_ui_scene_hover);
+}
+.fcr-device-popover-content-more-item:hover path {
+  fill: var(--fcr_web_ui_scene_mainicon2);
+}
+.fcr-device-popover-content-more-item svg {
+  flex-shrink: 0;
+}
+.fcr-device-popover-content-more-item path {
+  fill: var(--fcr_ui_scene_icontext5);
+  transition: all 0.2s ease;
+}
+.fcr-device-popover-content-more-item span {
+  min-width: 0;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.fcr-device-popover-content-more-item--danger:hover {
+  color: var(--fcr_ui_scene_ramp_red6);
+  background: var(--fcr_ui_scene_ramp_red1);
+}

package/lib/modules/action-bar/device/index.d.ts

@@ -0,0 +1,8 @@
+import { FC } from 'react';
+import './index.css';
+export declare const AudioRecordinDeviceIcon: ({ size, micEnabled }: {
+    size?: number;
+    micEnabled?: boolean;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const MicrophoneDevice: FC;
+export declare const CameraDevice: FC;