fcr-ui-scene 3.4.0 → 3.4.1

package/lib/modules/action-bar/components/device/index.js

@@ -0,0 +1,611 @@
+"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.MicrophoneDevice = exports.CameraDevice = exports.AudioRecordinDeviceIcon = void 0;
+require("core-js/modules/es.array.map.js");
+require("core-js/modules/esnext.async-iterator.map.js");
+require("core-js/modules/esnext.iterator.map.js");
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = require("react");
+require("./index.css");
+var _type = require("agora-ui-foundation/lib/components/icon/type");
+var _i18n = require("agora-ui-foundation/lib/i18n");
+var _tooltip = require("agora-ui-foundation/lib/components/tooltip");
+var _icon = require("agora-ui-foundation/lib/components/icon");
+var _popover = require("agora-ui-foundation/lib/components/popover");
+var _radio = require("agora-ui-foundation/lib/components/radio");
+var _mobxReact = require("mobx-react");
+var _store = require("../../store");
+var _store2 = require("../../../setting/store");
+var _mic = require("agora-ui-foundation/lib/components/icon/mic");
+var _iconPhoneCall = require("agora-ui-foundation/lib/components/icon-phone-call");
+var _deviceStore = require("../../../../common/device-store");
+var _jsxRuntime = require("react/jsx-runtime");
+var AudioRecordinDeviceIcon = exports.AudioRecordinDeviceIcon = (0, _mobxReact.observer)(function (_ref) {
+  var _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 32 : _ref$size,
+    _ref$micEnabled = _ref.micEnabled,
+    micEnabled = _ref$micEnabled === void 0 ? false : _ref$micEnabled;
+  var _useContext = (0, _react.useContext)(_store.ActionBarContext),
+    microphoneVolumeLevel = _useContext.microphoneVolumeLevel;
+  var muteColor = {
+    iconPrimary: "var(--fcr_ui_scene_ramp_red6)",
+    iconSecondary: 'var(--fcr_ui_scene_ramp_red6)'
+  };
+  return !micEnabled ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+    type: _type.FcrIconType.FCR_NOMUTE,
+    colors: muteColor,
+    size: size
+  }) : /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_mic.FcrMicrophoneIndicator, {
+      size: size,
+      voicePercent: microphoneVolumeLevel
+    })
+  });
+});
+var MicrophoneDevice = exports.MicrophoneDevice = (0, _mobxReact.observer)(function () {
+  var _useContext2 = (0, _react.useContext)(_store.ActionBarContext),
+    microphoneEnabled = _useContext2.microphoneEnabled,
+    enableMicrophone = _useContext2.enableMicrophone,
+    toggleLayoutBarLock = _useContext2.toggleLayoutBarLock,
+    openConnection = _useContext2.openConnection,
+    connectType = _useContext2.connectType,
+    microphoneList = _useContext2.microphoneList,
+    phoneMicEnabled = _useContext2.phoneMicEnabled;
+  var _useDeviceTooltipVisi = useDeviceTooltipVisible(toggleLayoutBarLock),
+    tooltipVisible = _useDeviceTooltipVisi.tooltipVisible,
+    popoverOpened = _useDeviceTooltipVisi.popoverOpened,
+    setPopoverOpened = _useDeviceTooltipVisi.setPopoverOpened,
+    handlePopoverVisibleChanged = _useDeviceTooltipVisi.handlePopoverVisibleChanged,
+    handleTooltipVisibleChanged = _useDeviceTooltipVisi.handleTooltipVisibleChanged;
+  var transI18n = (0, _i18n.useI18n)();
+  var title = (0, _react.useMemo)(function () {
+    return microphoneEnabled ? transI18n('fmt_device_label_audio_mute') : transI18n('fmt_device_label_audio_unmute');
+  }, [microphoneEnabled]);
+  var tooltip = title;
+  var noMic = microphoneList.length === 0;
+  var noMicColor = {
+    iconPrimary: "var(--fcr_web_ui_scene_mainicon1)",
+    iconSecondary: 'var(--fcr_ui_scene_ramp_red6)'
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip.FcrToolTip, {
+    mouseEnterDelay: 0,
+    visible: tooltipVisible,
+    onVisibleChange: handleTooltipVisibleChanged,
+    content: tooltip,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "fcr-action-bar-item-wrapper",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "fcr-action-bar-device",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          className: "fcr-action-bar-device-inner",
+          children: [connectType === _deviceStore.ConnectType.NONE && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+            onClick: function onClick() {
+              return openConnection('computer');
+            },
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+              type: _type.FcrIconType.FCR_WEB_CONNECTSOUND,
+              size: 32,
+              colors: {
+                iconPrimary: "var(--fcr_web_ui_scene_mainicon1)",
+                iconSecondary: 'var(--fcr_ui_scene_ramp_green6)'
+              }
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+              className: "fcr-action-bar-device-text",
+              children: transI18n('fmt_toolbar_label_connectaudio')
+            })]
+          }), connectType === _deviceStore.ConnectType.COMPUTER && (!noMic ? /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+            onClick: function onClick() {
+              enableMicrophone(!microphoneEnabled);
+            },
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(AudioRecordinDeviceIcon, {
+              micEnabled: microphoneEnabled
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+              className: "fcr-action-bar-device-text",
+              children: title
+            })]
+          }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+              type: _type.FcrIconType.FCR_MUTECRASH,
+              colors: noMicColor,
+              size: 32
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+              className: "fcr-action-bar-device-text",
+              children: transI18n('fmt_internalsetting_status_nodevice')
+            })]
+          })), connectType === _deviceStore.ConnectType.PHONE && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_iconPhoneCall.FcrIconPhoneCall, {
+              isMuted: !phoneMicEnabled
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+              className: "fcr-action-bar-device-text",
+              children: transI18n('fmt_device_label_audio_unmute')
+            })]
+          })]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_popover.FcrPopover, {
+          overlayClassName: "fcr-action-bar--device-popover",
+          visible: popoverOpened,
+          onVisibleChange: handlePopoverVisibleChanged,
+          trigger: "click",
+          content: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+            children: [connectType === _deviceStore.ConnectType.NONE && /*#__PURE__*/(0, _jsxRuntime.jsx)(NoConnectionPopoverContent, {
+              onItemClick: function onItemClick() {
+                handlePopoverVisibleChanged(false);
+                setPopoverOpened(false);
+              }
+            }), connectType === _deviceStore.ConnectType.COMPUTER && /*#__PURE__*/(0, _jsxRuntime.jsx)(AudioDeviceListPopoverContent, {
+              setPopoverOpened: setPopoverOpened,
+              onConnectClick: function onConnectClick() {
+                handlePopoverVisibleChanged(false);
+              }
+            }), connectType === _deviceStore.ConnectType.PHONE && /*#__PURE__*/(0, _jsxRuntime.jsx)(PhonePopoverContent, {
+              onItemClick: function onItemClick() {
+                handlePopoverVisibleChanged(false);
+                setPopoverOpened(false);
+              }
+            })]
+          }),
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            onClick: function onClick(e) {
+              e.stopPropagation();
+            },
+            className: "fcr-action-bar-device-extra",
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+              type: _type.FcrIconType.FCR_DROPUP4,
+              colors: {
+                iconPrimary: 'var(--fcr_web_ui_scene_mainicon1)'
+              },
+              size: 24
+            })
+          })
+        })]
+      })
+    })
+  });
+});
+var CameraDevice = exports.CameraDevice = (0, _mobxReact.observer)(function () {
+  var transI18n = (0, _i18n.useI18n)();
+  var _useContext3 = (0, _react.useContext)(_store.ActionBarContext),
+    cameraEnabled = _useContext3.cameraEnabled,
+    enableCamera = _useContext3.enableCamera,
+    toggleLayoutBarLock = _useContext3.toggleLayoutBarLock,
+    cameraList = _useContext3.cameraList;
+  var _useDeviceTooltipVisi2 = useDeviceTooltipVisible(toggleLayoutBarLock),
+    tooltipVisible = _useDeviceTooltipVisi2.tooltipVisible,
+    popoverOpened = _useDeviceTooltipVisi2.popoverOpened,
+    handlePopoverVisibleChanged = _useDeviceTooltipVisi2.handlePopoverVisibleChanged,
+    handleTooltipVisibleChanged = _useDeviceTooltipVisi2.handleTooltipVisibleChanged,
+    setPopoverOpened = _useDeviceTooltipVisi2.setPopoverOpened;
+  var muteColor = {
+    iconPrimary: cameraEnabled ? "var(--fcr_web_ui_scene_mainicon1)" : 'var(--fcr_ui_scene_ramp_red6)',
+    iconSecondary: 'var(--fcr_ui_scene_ramp_red6)'
+  };
+  var icon = cameraEnabled ? _type.FcrIconType.FCR_CAMERA : _type.FcrIconType.FCR_CAMERAOFF;
+  var title = (0, _react.useMemo)(function () {
+    return cameraEnabled ? transI18n('fmt_toolbar_label_camera') : transI18n('fmt_toolbar_options_enablecamera');
+  }, [cameraEnabled]);
+  var tooltip = title;
+  var noCam = cameraList.length === 0;
+  var noCamColor = {
+    iconPrimary: "var(--fcr_web_ui_scene_mainicon1)",
+    iconSecondary: 'var(--fcr_ui_scene_ramp_red6)'
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip.FcrToolTip, {
+    mouseEnterDelay: 0,
+    onVisibleChange: handleTooltipVisibleChanged,
+    visible: tooltipVisible,
+    content: tooltip,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "fcr-action-bar-item-wrapper",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "fcr-action-bar-device",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: "fcr-action-bar-device-inner",
+          children: !noCam ? /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+            onClick: function onClick() {
+              enableCamera(!cameraEnabled);
+            },
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+              type: icon,
+              colors: muteColor,
+              size: 32
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+              className: "fcr-action-bar-device-text",
+              children: title
+            })]
+          }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+              type: _type.FcrIconType.FCR_CAMERACRASH,
+              colors: noCamColor,
+              size: 32
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+              className: "fcr-action-bar-device-text",
+              children: transI18n('fmt_internalsetting_status_nodevice')
+            })]
+          })
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_popover.FcrPopover, {
+          visible: popoverOpened,
+          onVisibleChange: handlePopoverVisibleChanged,
+          overlayClassName: "fcr-action-bar--device-popover",
+          content: /*#__PURE__*/(0, _jsxRuntime.jsx)(VideoDeviceListPopoverContent, {
+            setPopoverOpened: setPopoverOpened,
+            onMoreClick: function onMoreClick() {}
+          }),
+          trigger: "click",
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            onClick: function onClick(e) {
+              e.stopPropagation();
+            },
+            className: "fcr-action-bar-device-extra",
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+              type: _type.FcrIconType.FCR_DROPUP4,
+              colors: {
+                iconPrimary: 'var(--fcr_web_ui_scene_mainicon1)'
+              },
+              size: 24
+            })
+          })
+        })]
+      })
+    })
+  });
+});
+var useDeviceTooltipVisible = function useDeviceTooltipVisible(toggleLayoutBarLock) {
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    popoverOpened = _useState2[0],
+    setPopoverOpened = _useState2[1];
+  var _useState3 = (0, _react.useState)(false),
+    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+    tooltipVisible = _useState4[0],
+    setTooltipVisible = _useState4[1];
+  var handleTooltipVisibleChanged = function handleTooltipVisibleChanged(visible) {
+    if (popoverOpened) {
+      setTooltipVisible(false);
+    } else {
+      setTooltipVisible(visible);
+    }
+  };
+  var handlePopoverVisibleChanged = function handlePopoverVisibleChanged(visible) {
+    if (tooltipVisible) {
+      setTooltipVisible(false);
+      toggleLayoutBarLock(false);
+    }
+    setPopoverOpened(visible);
+    toggleLayoutBarLock(visible);
+  };
+  return {
+    popoverOpened: popoverOpened,
+    tooltipVisible: tooltipVisible,
+    handleTooltipVisibleChanged: handleTooltipVisibleChanged,
+    handlePopoverVisibleChanged: handlePopoverVisibleChanged,
+    setPopoverOpened: setPopoverOpened,
+    setTooltipVisible: setTooltipVisible
+  };
+};
+var VideoDeviceListPopoverContent = (0, _mobxReact.observer)(function (_ref2) {
+  var onMoreClick = _ref2.onMoreClick,
+    setPopoverOpened = _ref2.setPopoverOpened;
+  var transI18n = (0, _i18n.useI18n)();
+  var _useContext4 = (0, _react.useContext)(_store.ActionBarContext),
+    openDeviceSettingDialog = _useContext4.openDeviceSettingDialog,
+    cameraList = _useContext4.cameraList,
+    cameraId = _useContext4.cameraId,
+    setCameraId = _useContext4.setCameraId;
+  var cameraOptions = cameraList.map(function (device) {
+    return {
+      text: device.deviceName,
+      value: device.deviceId
+    };
+  });
+  var openDeviceSetting = function openDeviceSetting(videoActiveTab) {
+    setPopoverOpened(false);
+    openDeviceSettingDialog({
+      activeTab: _store2.DeviceSettingTab.VIDEO,
+      videoActiveTab: videoActiveTab
+    });
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: "fcr-device-popover-content",
+    onClick: function onClick(e) {
+      e.stopPropagation();
+    },
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "fcr-device-popover-content-device-list",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "fcr-device-popover-content-device",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: "fcr-device-popover-content-device-label",
+          children: transI18n('fmt_device_label_video_list_selectCamera')
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          className: "fcr-device-popover-content-device-options",
+          children: [cameraOptions.length === 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_radio.FcrRadio, {
+              name: "No device",
+              styleType: "transparent",
+              checked: true,
+              label: transI18n('fmt_toolbar_tips_nodevice')
+            })
+          }), cameraOptions.map(function (device) {
+            return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+              onClick: function onClick() {},
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_radio.FcrRadio, {
+                name: "video",
+                styleType: "transparent",
+                checked: cameraId === device.value,
+                onChange: function onChange(v) {
+                  return v && setCameraId(device.value);
+                },
+                label: device.text
+              })
+            }, device.value);
+          })]
+        })]
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "fcr-device-popover-content-more",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "fcr-device-popover-content-more-item",
+        onClick: function onClick() {
+          return openDeviceSetting('virtual-background');
+        },
+        children: transI18n('fmt_device_label_video_list_selectVirtualBackground')
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "fcr-device-popover-content-more-item",
+        onClick: function onClick() {
+          return openDeviceSetting('beauty-filter');
+        },
+        children: transI18n('fmt_device_label_video_list_selectVideoFilter')
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "fcr-device-popover-content-more",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: 'fcr-device-popover-content-more-item contain-icon',
+        onClick: function onClick() {
+          return openDeviceSetting('basic');
+        },
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+          type: _type.FcrIconType.FCR_SETTING,
+          size: 24
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          children: transI18n('fmt_device_label_video_list_moreVideoSettings')
+        })]
+      })
+    })]
+  });
+});
+var AudioDeviceListPopoverContent = (0, _mobxReact.observer)(function (_ref3) {
+  var onConnectClick = _ref3.onConnectClick,
+    setPopoverOpened = _ref3.setPopoverOpened;
+  var transI18n = (0, _i18n.useI18n)();
+  var _useContext5 = (0, _react.useContext)(_store.ActionBarContext),
+    openDeviceSettingDialog = _useContext5.openDeviceSettingDialog,
+    microphoneId = _useContext5.microphoneId,
+    setMicrophoneId = _useContext5.setMicrophoneId,
+    microphoneList = _useContext5.microphoneList,
+    speakerId = _useContext5.speakerId,
+    setSpeakerId = _useContext5.setSpeakerId,
+    speakerList = _useContext5.speakerList,
+    openConnection = _useContext5.openConnection,
+    connectType = _useContext5.connectType,
+    closeConnection = _useContext5.closeConnection;
+  var microphoneOptions = microphoneList.map(function (device) {
+    return {
+      text: device.deviceName,
+      value: device.deviceId
+    };
+  });
+  var speakerOptions = speakerList.map(function (device) {
+    return {
+      text: device.deviceName,
+      value: device.deviceId
+    };
+  });
+  var openDeviceSetting = function openDeviceSetting() {
+    setPopoverOpened(false);
+    openDeviceSettingDialog({
+      activeTab: _store2.DeviceSettingTab.AUDIO
+    });
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: "fcr-device-popover-content",
+    onClick: function onClick(e) {
+      e.stopPropagation();
+    },
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "fcr-device-popover-content-device-list",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "fcr-device-popover-content-device",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: "fcr-device-popover-content-device-label",
+          children: transI18n('fmt_device_label_audio_list_selectMicrophone')
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          className: "fcr-device-popover-content-device-options",
+          children: [microphoneOptions.length === 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_radio.FcrRadio, {
+              name: "No device",
+              styleType: "transparent",
+              checked: true,
+              label: transI18n('fmt_toolbar_tips_nodevice')
+            })
+          }), microphoneOptions.map(function (device) {
+            return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_radio.FcrRadio, {
+                name: "mic",
+                styleType: "transparent",
+                checked: microphoneId === device.value,
+                label: device.text,
+                onChange: function onChange(v) {
+                  return v && setMicrophoneId(device.value);
+                }
+              })
+            }, device.value);
+          })]
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "fcr-device-popover-content-device",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: "fcr-device-popover-content-device-label",
+          children: transI18n('fmt_device_label_audio_list_selectSpeaker')
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          className: "fcr-device-popover-content-device-options",
+          children: [speakerOptions.length === 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_radio.FcrRadio, {
+              name: "No device",
+              styleType: "transparent",
+              checked: true,
+              label: transI18n('fmt_toolbar_tips_nodevice')
+            })
+          }), speakerOptions.map(function (device) {
+            return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+              onClick: function onClick() {},
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_radio.FcrRadio, {
+                name: "speaker",
+                styleType: "transparent",
+                checked: speakerId === device.value,
+                label: device.text,
+                onChange: function onChange(v) {
+                  return v && setSpeakerId(device.value);
+                }
+              })
+            }, device.value);
+          })]
+        })]
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "fcr-device-popover-content-more",
+      children: [connectType === _deviceStore.ConnectType.COMPUTER && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "fcr-device-popover-content-more-item fcr-device-popover-content-more-item--danger",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          onClick: function onClick() {
+            setMicrophoneId('');
+            closeConnection();
+          },
+          children: transI18n('fmt_device_label_audio_list_leaveComputerAudio')
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "fcr-device-popover-content-more-item",
+        onClick: function onClick() {
+          setPopoverOpened(false);
+          onConnectClick();
+          openConnection('phone');
+        },
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          children: transI18n('fmt_device_label_audio_list_switchToPhoneCall')
+        })
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "fcr-device-popover-content-more",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "fcr-device-popover-content-more-item contain-icon",
+        onClick: openDeviceSetting,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+          type: _type.FcrIconType.FCR_SETTING,
+          size: 24
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          children: transI18n('fmt_device_label_audio_list_moreAudioSettings')
+        })]
+      })
+    })]
+  });
+});
+var NoConnectionPopoverContent = (0, _mobxReact.observer)(function (_ref4) {
+  var onItemClick = _ref4.onItemClick;
+  var transI18n = (0, _i18n.useI18n)();
+  var _useContext6 = (0, _react.useContext)(_store.ActionBarContext),
+    openDeviceSettingDialog = _useContext6.openDeviceSettingDialog,
+    openConnection = _useContext6.openConnection;
+  var openDeviceSetting = function openDeviceSetting() {
+    onItemClick();
+    openDeviceSettingDialog({
+      activeTab: _store2.DeviceSettingTab.AUDIO
+    });
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: "fcr-device-popover-content",
+    onClick: function onClick(e) {
+      e.stopPropagation();
+    },
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "fcr-device-popover-content-more",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "fcr-device-popover-content-device-label",
+        children: transI18n('fmt_pstn_label_accessmethod')
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "fcr-device-popover-content-more-item",
+        onClick: function onClick() {
+          onItemClick();
+          openConnection('computer');
+        },
+        children: [transI18n('fmt_pstn_options_PCaudioconnet'), "..."]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "fcr-device-popover-content-more-item",
+        onClick: function onClick() {
+          onItemClick();
+          openConnection('phone');
+        },
+        children: [transI18n('fmt_pstn_options_phoneaudioconnet'), "..."]
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "fcr-device-popover-content-more",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "fcr-device-popover-content-more-item contain-icon",
+        onClick: openDeviceSetting,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+          type: _type.FcrIconType.FCR_SETTING,
+          size: 24
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          children: transI18n('fmt_device_label_audio_list_moreAudioSettings')
+        })]
+      })
+    })]
+  });
+});
+var PhonePopoverContent = (0, _mobxReact.observer)(function (_ref5) {
+  var onItemClick = _ref5.onItemClick;
+  var transI18n = (0, _i18n.useI18n)();
+  var _useContext7 = (0, _react.useContext)(_store.ActionBarContext),
+    openDeviceSettingDialog = _useContext7.openDeviceSettingDialog,
+    openConnection = _useContext7.openConnection;
+  var openDeviceSetting = function openDeviceSetting() {
+    onItemClick();
+    openDeviceSettingDialog({
+      activeTab: _store2.DeviceSettingTab.AUDIO
+    });
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: "fcr-device-popover-content",
+    onClick: function onClick(e) {
+      e.stopPropagation();
+    },
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "fcr-device-popover-content-more",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "fcr-device-popover-content-device-label",
+        children: transI18n('fmt_pstn_label_accessmethod')
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "fcr-device-popover-content-more-item",
+        onClick: function onClick() {
+          onItemClick();
+          openConnection('computer');
+        },
+        children: transI18n('fmt_toolbar_options_switchaccessmode')
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "fcr-device-popover-content-more",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "fcr-device-popover-content-more-item contain-icon",
+        onClick: openDeviceSetting,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+          type: _type.FcrIconType.FCR_SETTING,
+          size: 24
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          children: transI18n('fmt_device_label_audio_list_moreAudioSettings')
+        })]
+      })
+    })]
+  });
+});

package/lib/modules/action-bar/components/interpreter/index.d.ts

@@ -0,0 +1,6 @@
+interface InterpreterPropsType {
+    id: string;
+    order: number;
+}
+export declare const Interpreter: (props: InterpreterPropsType) => import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/modules/action-bar/components/interpreter/index.js

@@ -0,0 +1,41 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Interpreter = void 0;
+var _item = require("../item");
+var _tooltip = require("agora-ui-foundation/lib/components/tooltip");
+var _type = require("agora-ui-foundation/lib/components/icon/type");
+var _react = require("react");
+var _store = require("../../store");
+var _mobxReact = require("mobx-react");
+var _i18n = require("agora-ui-foundation/lib/i18n");
+var _jsxRuntime = require("react/jsx-runtime");
+var Interpreter = exports.Interpreter = (0, _mobxReact.observer)(function (props) {
+  var id = props.id,
+    order = props.order;
+  var actionStore = (0, _react.useContext)(_store.ActionBarContext);
+  var openInterpreterDialog = actionStore.openInterpreterDialog,
+    interpreterState = actionStore.interpreterState;
+  var transI18n = (0, _i18n.useI18n)();
+  var content = interpreterState ? transI18n('fmt_interpretation_mobile_setting_controller_button_turn_off_interpretation') : transI18n('fmt_interpretation_mobile_setting_controller_button_turn_on_interpretation');
+  var icon = interpreterState ? _type.FcrIconType.FCR_SIMULTANEOUSINTERPRETATION_OFF : _type.FcrIconType.FCR_SIMULTANEOUSINTERPRETATION_ON;
+  var title = transI18n('fmt_interpretation_mobile_setting_controller_option_interpret');
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip.FcrToolTip, {
+    content: content,
+    mouseEnterDelay: 0,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_item.ActionBarItem, {
+      id: id,
+      order: order,
+      onClick: openInterpreterDialog,
+      className: "fcr-action-bar-item-wrapper-apps-item",
+      icon: icon,
+      title: title,
+      iconColors: {
+        iconPrimary: 'var(--fcr_web_ui_scene_mainicon1)'
+      }
+    })
+  });
+});