fcr-ui-scene 3.8.1 → 3.9.0-alpha

package/lib-es/modules/components/control-bar/index.js

@@ -0,0 +1,507 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { FcrIcon } from 'agora-ui-foundation/lib/components/icon';
+import { FcrIconType } from 'agora-ui-foundation/lib/components/icon/type';
+import WhiteboardSwitchTheme from './components/switch-theme';
+import { FcrToolTip } from 'agora-ui-foundation/lib/components/tooltip';
+import { FcrButton } from 'agora-ui-foundation/lib/components/button';
+import FcrDivider from 'agora-ui-foundation/lib/components/divider';
+import { useI18n } from 'agora-ui-foundation/lib/i18n';
+import { FcrBoardToolType } from 'fcr-core/lib/room-control/whiteboard-control-v2/enum';
+import './index.css';
+import debounce from 'lodash/debounce';
+import classNames from 'classnames';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+var initWidth = 1920;
+var initHeight = 1080;
+var ZOOM_MAX = 3;
+var ZOOM_STEP = 0.5;
+export var BaseControlBar = function BaseControlBar(_ref) {
+  var title = _ref.title,
+    _ref$canWriteBoard = _ref.canWriteBoard,
+    canWriteBoard = _ref$canWriteBoard === void 0 ? false : _ref$canWriteBoard,
+    onEnable = _ref.onEnable,
+    onClose = _ref.onClose,
+    _ref$showControlBar = _ref.showControlBar,
+    showControlBar = _ref$showControlBar === void 0 ? true : _ref$showControlBar,
+    _ref$showAudioIndicat = _ref.showAudioIndicator,
+    showAudioIndicator = _ref$showAudioIndicat === void 0 ? false : _ref$showAudioIndicat,
+    _ref$isSharingAudio = _ref.isSharingAudio,
+    isSharingAudio = _ref$isSharingAudio === void 0 ? false : _ref$isSharingAudio,
+    _ref$showThemeSwitch = _ref.showThemeSwitch,
+    showThemeSwitch = _ref$showThemeSwitch === void 0 ? false : _ref$showThemeSwitch,
+    setTheme = _ref.setTheme,
+    currentTheme = _ref.currentTheme,
+    _ref$showEnterBoardEd = _ref.showEnterBoardEdit,
+    showEnterBoardEdit = _ref$showEnterBoardEd === void 0 ? false : _ref$showEnterBoardEd,
+    _ref$showExitBoardEdi = _ref.showExitBoardEdit,
+    showExitBoardEdit = _ref$showExitBoardEdi === void 0 ? false : _ref$showExitBoardEdi,
+    _ref$showStopShare = _ref.showStopShare,
+    showStopShare = _ref$showStopShare === void 0 ? false : _ref$showStopShare,
+    onZoomOut = _ref.onZoomOut,
+    onZoomIn = _ref.onZoomIn,
+    onAdaptive = _ref.onAdaptive,
+    onOrigin = _ref.onOrigin,
+    _ref$isMinimum = _ref.isMinimum,
+    isMinimum = _ref$isMinimum === void 0 ? false : _ref$isMinimum,
+    _ref$isMaxmum = _ref.isMaxmum,
+    isMaxmum = _ref$isMaxmum === void 0 ? false : _ref$isMaxmum,
+    _ref$isAdaptived = _ref.isAdaptived,
+    isAdaptived = _ref$isAdaptived === void 0 ? false : _ref$isAdaptived,
+    _ref$isOriginal = _ref.isOriginal,
+    isOriginal = _ref$isOriginal === void 0 ? false : _ref$isOriginal,
+    style = _ref.style,
+    children = _ref.children,
+    className = _ref.className;
+  var transI18n = useI18n();
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    loading = _useState2[0],
+    setLoading = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    showSwitchTheme = _useState4[0],
+    setShowSwitchTheme = _useState4[1];
+  useEffect(function () {
+    return function () {
+      return setLoading(false);
+    };
+  }, []);
+  var clsn = classNames('fcr-whiteboard-controlbar', className);
+  return /*#__PURE__*/_jsxs("div", {
+    className: clsn,
+    id: "fcr-whiteboard-controlbar",
+    style: style,
+    children: [showControlBar && /*#__PURE__*/_jsxs("div", {
+      className: "fcr-whiteboard-controlbar-header",
+      children: [/*#__PURE__*/_jsx("div", {
+        className: "fcr-whiteboard-controlbar-left",
+        children: title
+      }), /*#__PURE__*/_jsxs("div", {
+        className: "fcr-whiteboard-controlbar-center",
+        children: [showAudioIndicator && /*#__PURE__*/_jsx(FcrIcon, {
+          type: isSharingAudio ? FcrIconType.FCR_DEVICEAUDIOON : FcrIconType.FCR_DEVICEAUDIOOFF,
+          size: 22,
+          colors: {
+            iconPrimary: 'var(--fcr_ui_scene_ramp_green6)'
+          }
+        }), /*#__PURE__*/_jsx(FcrToolTip, {
+          content: isMinimum ? transI18n('fmt_screenshare_whiteboard_tips_alreadyminumumsize') : transI18n('fmt_screenshare_whiteboard_button_narrow'),
+          children: /*#__PURE__*/_jsx("div", {
+            className: "fcr-whiteboard-controlbar-item",
+            onClick: onZoomOut,
+            children: /*#__PURE__*/_jsx(FcrIcon, {
+              type: FcrIconType.FCR_ZOOMIN,
+              size: 22,
+              colors: {
+                iconPrimary: isMinimum ? 'gray' : 'var(--fcr_ui_scene_icontext1)'
+              }
+            })
+          })
+        }), /*#__PURE__*/_jsx(FcrToolTip, {
+          content: isMaxmum ? transI18n('fmt_screenshare_whiteboard_tips_alreadymaximumsize') : transI18n('fmt_screenshare_whiteboard_button_enlarge'),
+          children: /*#__PURE__*/_jsx("div", {
+            className: "fcr-whiteboard-controlbar-item",
+            onClick: onZoomIn,
+            children: /*#__PURE__*/_jsx(FcrIcon, {
+              type: FcrIconType.FCR_ZOOMOUT,
+              size: 22,
+              colors: {
+                iconPrimary: isMaxmum ? 'gray' : 'var(--fcr_ui_scene_icontext1)'
+              }
+            })
+          })
+        }), /*#__PURE__*/_jsx(FcrToolTip, {
+          content: isAdaptived ? transI18n('fmt_screenshare_whiteboard_tips_alreadyadaptionsize') : transI18n('fmt_screenshare_lables_adaptionlsize'),
+          children: /*#__PURE__*/_jsx("div", {
+            className: "fcr-whiteboard-controlbar-item",
+            onClick: onAdaptive,
+            children: /*#__PURE__*/_jsx(FcrIcon, {
+              type: FcrIconType.FCR_FULLCOVERAGE,
+              size: 22,
+              colors: {
+                iconPrimary: isAdaptived ? 'gray' : 'var(--fcr_ui_scene_icontext1)'
+              }
+            })
+          })
+        }), /*#__PURE__*/_jsx(FcrToolTip, {
+          content: isOriginal ? transI18n('fmt_screenshare_tips_alreadyoriginalsize') : transI18n('fmt_screenshare_lables_originalsize'),
+          children: /*#__PURE__*/_jsx("div", {
+            className: "fcr-whiteboard-controlbar-item",
+            onClick: onOrigin,
+            children: /*#__PURE__*/_jsx(FcrIcon, {
+              type: FcrIconType.FCR_EQUALRATIO,
+              size: 22,
+              colors: {
+                iconPrimary: isOriginal ? 'gray' : 'var(--fcr_ui_scene_icontext1)'
+              }
+            })
+          })
+        }), showThemeSwitch && setTheme && currentTheme && /*#__PURE__*/_jsxs(_Fragment, {
+          children: [/*#__PURE__*/_jsx(FcrDivider, {
+            type: "vertical"
+          }), /*#__PURE__*/_jsx("div", {
+            className: "fcr-whiteboard-controlbar-item",
+            children: /*#__PURE__*/_jsx(WhiteboardSwitchTheme, {
+              whiteboardVisible: showSwitchTheme,
+              setWhiteboardVisible: setShowSwitchTheme,
+              currentThemeType: currentTheme,
+              setTheme: setTheme
+            })
+          })]
+        })]
+      }), showEnterBoardEdit && /*#__PURE__*/_jsx(FcrToolTip, {
+        content: canWriteBoard ? transI18n('fmt_screenshare_options_enableedit') : transI18n('fmt_screenshare_tips_unenabled'),
+        children: /*#__PURE__*/_jsx("div", {
+          className: "fcr-whiteboard-controlbar-item",
+          children: /*#__PURE__*/_jsx(FcrIcon, {
+            type: FcrIconType.FCR_WHITEBOARD2,
+            size: 22,
+            colors: {
+              iconPrimary: canWriteBoard ? 'var(--fcr_ui_scene_icontext1)' : 'gray'
+            },
+            onClick: function onClick() {
+              return canWriteBoard ? onEnable === null || onEnable === void 0 ? void 0 : onEnable(true) : null;
+            }
+          })
+        })
+      }), /*#__PURE__*/_jsxs("div", {
+        className: "fcr-whiteboard-controlbar-right",
+        children: [showStopShare && /*#__PURE__*/_jsx(FcrButton, {
+          loading: loading,
+          size: "XXS",
+          styleType: "danger",
+          shape: "rounded",
+          onClick: function onClick() {
+            onClose === null || onClose === void 0 || onClose();
+            setLoading(true);
+          },
+          children: transI18n('fmt_screenshare_controlbar_button_stop')
+        }), showExitBoardEdit && /*#__PURE__*/_jsx(FcrButton, {
+          loading: loading,
+          size: "XXS",
+          styleType: "normal",
+          shape: "rounded",
+          onClick: function onClick() {
+            return onEnable === null || onEnable === void 0 ? void 0 : onEnable(false);
+          },
+          children: transI18n('fmt_screenshare_whiteboard_button_exitdrawing')
+        })]
+      })]
+    }), children]
+  });
+};
+export var WhiteboardControlbar = function WhiteboardControlbar(_ref2) {
+  var onClose = _ref2.onClose,
+    onEnable = _ref2.onEnable,
+    setTheme = _ref2.setTheme,
+    canWriteBoard = _ref2.canWriteBoard,
+    controlEnabled = _ref2.controlEnabled,
+    isHost = _ref2.isHost,
+    currentTheme = _ref2.currentTheme,
+    currentTool = _ref2.currentTool,
+    onBoardDomLoaded = _ref2.onBoardDomLoaded,
+    onZoomIn = _ref2.onZoomIn,
+    onZoomOut = _ref2.onZoomOut,
+    onAdaptive = _ref2.onAdaptive,
+    onOrigin = _ref2.onOrigin,
+    ownerUserName = _ref2.ownerUserName,
+    isMyBoard = _ref2.isMyBoard,
+    _ref2$showControlBar = _ref2.showControlBar,
+    showControlBar = _ref2$showControlBar === void 0 ? true : _ref2$showControlBar,
+    children = _ref2.children;
+  var transI18n = useI18n();
+  var boardRef = useRef(null);
+  var _useState5 = useState(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    isMinimum = _useState6[0],
+    setIsMinimum = _useState6[1];
+  var _useState7 = useState(false),
+    _useState8 = _slicedToArray(_useState7, 2),
+    isMaxmum = _useState8[0],
+    setIsMaxmum = _useState8[1];
+  var _useState9 = useState(false),
+    _useState0 = _slicedToArray(_useState9, 2),
+    isAdaptived = _useState0[0],
+    setIsAdaptived = _useState0[1];
+  var _useState1 = useState(false),
+    _useState10 = _slicedToArray(_useState1, 2),
+    isOriginal = _useState10[0],
+    setIsOriginal = _useState10[1];
+  var _useState11 = useState(1),
+    _useState12 = _slicedToArray(_useState11, 2),
+    scaleValue = _useState12[0],
+    setScaleValue = _useState12[1];
+  var _useState13 = useState(0),
+    _useState14 = _slicedToArray(_useState13, 2),
+    containerHeight = _useState14[0],
+    setContainerHeight = _useState14[1];
+  var cursor = useMemo(function () {
+    return FcrBoardToolType[currentTool || FcrBoardToolType.NONE].toLowerCase();
+  }, [currentTool]);
+  var resetHeight = useCallback(function () {
+    var _boardRef$current;
+    setContainerHeight(((_boardRef$current = boardRef.current) === null || _boardRef$current === void 0 ? void 0 : _boardRef$current.clientHeight) || 0);
+  }, []);
+  var resetHeightDebounce = useCallback(debounce(resetHeight, 100), [resetHeight]);
+  var ratio = useMemo(function () {
+    return containerHeight / initHeight;
+  }, [containerHeight]);
+  useEffect(function () {
+    window.addEventListener('resize', resetHeightDebounce);
+    return function () {
+      window.removeEventListener('resize', resetHeightDebounce);
+      if (boardRef.current) {
+        boardRef.current.removeEventListener('transitionend', resetHeight);
+      }
+    };
+  }, [resetHeight, resetHeightDebounce]);
+  var handleBoardRef = function handleBoardRef(ref) {
+    boardRef.current = ref;
+    resetHeight();
+    if (boardRef.current) {
+      boardRef.current.addEventListener('transitionend', resetHeight);
+    }
+  };
+  var handleZoomIn = useCallback(function () {
+    setIsMinimum(false);
+    setIsAdaptived(false);
+    setIsOriginal(false);
+    if (onZoomIn) {
+      var result = onZoomIn();
+      setIsMaxmum(!result);
+      return;
+    }
+    setScaleValue(function (prev) {
+      if (prev < ZOOM_MAX) {
+        setIsMaxmum(false);
+        return prev + ZOOM_STEP;
+      }
+      setIsMaxmum(true);
+      return prev;
+    });
+  }, [onZoomIn]);
+  var handleZoomOut = useCallback(function () {
+    setIsMaxmum(false);
+    setIsAdaptived(false);
+    setIsOriginal(false);
+    if (onZoomOut) {
+      var result = onZoomOut();
+      setIsMinimum(!result);
+      return;
+    }
+    setScaleValue(function (prev) {
+      if (prev > 1) {
+        var zoomOut = prev - ZOOM_STEP;
+        var diff = zoomOut % ZOOM_STEP;
+        setIsMinimum(false);
+        return diff === 0 ? zoomOut : zoomOut - diff;
+      }
+      setIsMinimum(true);
+      return prev;
+    });
+  }, [onZoomOut]);
+  var handleOrigin = useCallback(function () {
+    setIsMinimum(false);
+    setIsMaxmum(false);
+    setIsAdaptived(false);
+    if (onOrigin) {
+      var result = onOrigin();
+      setIsOriginal(!result);
+      return;
+    }
+    var origin = ratio < 1 ? 1 + ratio : initHeight / containerHeight;
+    setIsOriginal(true);
+    setScaleValue(origin);
+  }, [onOrigin, ratio, containerHeight]);
+  var handleAdaptive = useCallback(function () {
+    setIsMinimum(false);
+    setIsMaxmum(false);
+    setIsOriginal(false);
+    if (onAdaptive) {
+      var result = onAdaptive();
+      setIsAdaptived(!result);
+      return;
+    }
+    setIsAdaptived(true);
+    setScaleValue(1);
+  }, [onAdaptive]);
+  var width = useMemo(function () {
+    if (scaleValue === ratio) return initWidth;
+    return initWidth * (containerHeight / initHeight) * scaleValue;
+  }, [containerHeight, scaleValue, ratio]);
+  var height = useMemo(function () {
+    if (scaleValue === ratio) return initHeight;
+    return initHeight * (containerHeight / initHeight) * scaleValue;
+  }, [containerHeight, scaleValue, ratio]);
+  var top = useMemo(function () {
+    if (containerHeight > height) return (containerHeight - height) / 2;
+    if (height === containerHeight || scaleValue === 1) return 0;
+    return "-".concat((height - containerHeight) / 2, "px");
+  }, [containerHeight, height, scaleValue]);
+  var preventAction = useMemo(function () {
+    if (!isHost && !isMyBoard && !controlEnabled) return true;
+    // if (isMyBoard || isHost) return false;
+    // if (canWriteBoard && controlEnabled) return false;
+    return false;
+  }, [canWriteBoard, controlEnabled, isHost, isMyBoard]);
+  var showChangeThemeButton = (canWriteBoard || isMyBoard || isHost) && !!setTheme && !!currentTheme;
+  var showEnterBoardEdit = !controlEnabled && !isMyBoard && !isHost;
+  var showExitBoardEdit = controlEnabled && !isMyBoard && canWriteBoard;
+  var showStopShare = isMyBoard;
+  var title = transI18n('fmt_screenshare_whiteboard_tips_someonesharing', {
+    reason1: isMyBoard ? transI18n('fmt_settings_labels_you') : ownerUserName
+  });
+  var baseStyle = useMemo(function () {
+    return {
+      height: '100%'
+    };
+  }, []);
+  return /*#__PURE__*/_jsx(BaseControlBar, {
+    className: "fcr-board-controlbar",
+    title: title,
+    canWriteBoard: canWriteBoard,
+    onEnable: onEnable,
+    onClose: onClose,
+    showControlBar: showControlBar,
+    showThemeSwitch: showChangeThemeButton,
+    currentTheme: currentTheme,
+    setTheme: setTheme,
+    showEnterBoardEdit: showEnterBoardEdit,
+    showExitBoardEdit: showExitBoardEdit,
+    showStopShare: showStopShare,
+    onZoomOut: handleZoomOut,
+    onZoomIn: handleZoomIn,
+    onAdaptive: handleAdaptive,
+    onOrigin: handleOrigin,
+    isMinimum: isMinimum,
+    isMaxmum: isMaxmum,
+    isAdaptived: isAdaptived,
+    isOriginal: isOriginal,
+    style: baseStyle,
+    children: /*#__PURE__*/_jsx("div", {
+      className: "fcr-whiteboard-controlbar-body",
+      ref: handleBoardRef,
+      style: {
+        backgroundColor: '#e5e7eb',
+        height: showControlBar ? 'calc(100% - 28px)' : '100%',
+        top: showControlBar ? '28px' : '0'
+      },
+      children: /*#__PURE__*/_jsxs("div", {
+        className: "fcr-whiteboard-controlbar-body-content",
+        style: {
+          width: "".concat(width, "px"),
+          height: "".concat(height, "px"),
+          position: 'absolute',
+          left: "-".concat(width / 2, "px"),
+          marginLeft: '50%',
+          top: top
+        },
+        children: [onBoardDomLoaded && preventAction && /*#__PURE__*/_jsx("div", {
+          className: "whiteboard-action-prevent"
+        }), onBoardDomLoaded ? /*#__PURE__*/_jsx("div", {
+          className: "fcr-whiteboard-view board-widget-cursor-".concat(cursor),
+          ref: onBoardDomLoaded
+        }) : children]
+      })
+    })
+  });
+};
+export var ScreenShareControlbar = function ScreenShareControlbar(_ref3) {
+  var onZoomIn = _ref3.onZoomIn,
+    onZoomOut = _ref3.onZoomOut,
+    onAdaptive = _ref3.onAdaptive,
+    onOrigin = _ref3.onOrigin,
+    _ref3$ownerUserName = _ref3.ownerUserName,
+    ownerUserName = _ref3$ownerUserName === void 0 ? '' : _ref3$ownerUserName,
+    _ref3$isSharingAudio = _ref3.isSharingAudio,
+    isSharingAudio = _ref3$isSharingAudio === void 0 ? false : _ref3$isSharingAudio,
+    _ref3$canWriteBoard = _ref3.canWriteBoard,
+    canWriteBoard = _ref3$canWriteBoard === void 0 ? true : _ref3$canWriteBoard,
+    _ref3$controlEnabled = _ref3.controlEnabled,
+    controlEnabled = _ref3$controlEnabled === void 0 ? false : _ref3$controlEnabled,
+    _ref3$isMyBoard = _ref3.isMyBoard,
+    isMyBoard = _ref3$isMyBoard === void 0 ? false : _ref3$isMyBoard,
+    onEnable = _ref3.onEnable,
+    onClose = _ref3.onClose,
+    _ref3$showControlBar = _ref3.showControlBar,
+    showControlBar = _ref3$showControlBar === void 0 ? true : _ref3$showControlBar,
+    _ref3$showEnterBoardE = _ref3.showEnterBoardEdit,
+    showEnterBoardEdit = _ref3$showEnterBoardE === void 0 ? false : _ref3$showEnterBoardE,
+    _ref3$showExitBoardEd = _ref3.showExitBoardEdit,
+    showExitBoardEdit = _ref3$showExitBoardEd === void 0 ? false : _ref3$showExitBoardEd;
+  var transI18n = useI18n();
+  var _useState15 = useState(false),
+    _useState16 = _slicedToArray(_useState15, 2),
+    isMinimum = _useState16[0],
+    setIsMinimum = _useState16[1];
+  var _useState17 = useState(false),
+    _useState18 = _slicedToArray(_useState17, 2),
+    isMaxmum = _useState18[0],
+    setIsMaxmum = _useState18[1];
+  var _useState19 = useState(false),
+    _useState20 = _slicedToArray(_useState19, 2),
+    isAdaptived = _useState20[0],
+    setIsAdaptived = _useState20[1];
+  var _useState21 = useState(false),
+    _useState22 = _slicedToArray(_useState21, 2),
+    isOriginal = _useState22[0],
+    setIsOriginal = _useState22[1];
+  var title = transI18n('fmt_screenshare_room_new_screen_share', {
+    reason1: isMyBoard ? transI18n('fmt_settings_labels_you') : ownerUserName
+  });
+  var resetFlags = function resetFlags() {
+    setIsMinimum(false);
+    setIsMaxmum(false);
+    setIsAdaptived(false);
+    setIsOriginal(false);
+  };
+  var handleZoomIn = function handleZoomIn() {
+    resetFlags();
+    var result = onZoomIn === null || onZoomIn === void 0 ? void 0 : onZoomIn();
+    setIsMaxmum(!(result !== null && result !== void 0 ? result : true));
+  };
+  var handleZoomOut = function handleZoomOut() {
+    resetFlags();
+    var result = onZoomOut === null || onZoomOut === void 0 ? void 0 : onZoomOut();
+    setIsMinimum(!(result !== null && result !== void 0 ? result : true));
+  };
+  var handleAdaptive = function handleAdaptive() {
+    resetFlags();
+    var result = onAdaptive === null || onAdaptive === void 0 ? void 0 : onAdaptive();
+    setIsAdaptived(!(result !== null && result !== void 0 ? result : true));
+  };
+  var handleOrigin = function handleOrigin() {
+    resetFlags();
+    var result = onOrigin === null || onOrigin === void 0 ? void 0 : onOrigin();
+    setIsOriginal(!(result !== null && result !== void 0 ? result : true));
+  };
+  var showStopShare = isMyBoard;
+  var baseStyle = useMemo(function () {
+    return {
+      height: 'auto'
+    };
+  }, []);
+  return /*#__PURE__*/_jsx(BaseControlBar, {
+    className: 'fcr-screen-controlbar',
+    title: title,
+    canWriteBoard: canWriteBoard,
+    onEnable: onEnable,
+    onClose: onClose,
+    showControlBar: showControlBar,
+    showAudioIndicator: true,
+    isSharingAudio: isSharingAudio,
+    showEnterBoardEdit: showEnterBoardEdit,
+    showExitBoardEdit: showExitBoardEdit,
+    showStopShare: showStopShare,
+    onZoomOut: handleZoomOut,
+    onZoomIn: handleZoomIn,
+    onAdaptive: handleAdaptive,
+    onOrigin: handleOrigin,
+    isMinimum: isMinimum,
+    isMaxmum: isMaxmum,
+    isAdaptived: isAdaptived,
+    isOriginal: isOriginal,
+    style: baseStyle
+  });
+};

package/lib-es/modules/components/device-control/components/audio-menu/index.js

@@ -0,0 +1,168 @@
+import "core-js/modules/es.array.map.js";
+import "core-js/modules/es.object.to-string.js";
+import "core-js/modules/esnext.iterator.constructor.js";
+import "core-js/modules/esnext.iterator.map.js";
+import { FcrRadio } from 'agora-ui-foundation/lib/components/radio';
+import { useI18n } from 'agora-ui-foundation/lib/i18n';
+import { observer } from 'mobx-react';
+import { useContext } from 'react';
+import { FcrIconType } from 'agora-ui-foundation/lib/components/icon/type';
+import { FcrIcon } from 'agora-ui-foundation/lib/components/icon';
+import { DeviceControlStoreContext } from '../../store.base';
+import '../../index.css';
+import { FcrUIConnectType } from '../../../../../type';
+import { DeviceSettingTab } from '../../../../setting/type';
+import { DEFAULT_DEVICE_ID } from '../../../../../providers/device-provider';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+var AudioMenu = observer(function (_ref) {
+  var onConnectClick = _ref.onConnectClick,
+    setPopoverOpened = _ref.setPopoverOpened;
+  var transI18n = useI18n();
+  var _useContext = useContext(DeviceControlStoreContext),
+    microphoneId = _useContext.microphoneId,
+    microphoneList = _useContext.microphoneList,
+    speakerId = _useContext.speakerId,
+    speakerList = _useContext.speakerList,
+    setMicrophoneId = _useContext.setMicrophoneId,
+    setSpeakerId = _useContext.setSpeakerId,
+    openDeviceSettingDialog = _useContext.openDeviceSettingDialog,
+    openConnection = _useContext.openConnection,
+    connectType = _useContext.connectType,
+    stopAudioByComputer = _useContext.stopAudioByComputer,
+    isCallOutAbilitySupported = _useContext.isCallOutAbilitySupported;
+  var microphoneOptions = microphoneList.map(function (device) {
+    if (device.deviceId === DEFAULT_DEVICE_ID) {
+      return {
+        text: transI18n('fmt_device_label_speaker_follow_system', {
+          reason1: transI18n('fmt_device_label_speaker_default')
+        }),
+        value: device.deviceId
+      };
+    }
+    return {
+      text: device.deviceName,
+      value: device.deviceId
+    };
+  });
+  var speakerOptions = speakerList.map(function (device) {
+    if (device.deviceId === DEFAULT_DEVICE_ID) {
+      return {
+        text: transI18n('fmt_device_label_speaker_follow_system', {
+          reason1: transI18n('fmt_device_label_speaker_default')
+        }),
+        value: device.deviceId
+      };
+    }
+    return {
+      text: device.deviceName,
+      value: device.deviceId
+    };
+  });
+  var openDeviceSetting = function openDeviceSetting() {
+    setPopoverOpened(false);
+    openDeviceSettingDialog({
+      activeTab: DeviceSettingTab.AUDIO
+    });
+  };
+  return /*#__PURE__*/_jsxs("div", {
+    className: "fcr-device-popover-content",
+    onClick: function onClick(e) {
+      e.stopPropagation();
+    },
+    children: [/*#__PURE__*/_jsxs("div", {
+      className: "fcr-device-popover-content-device-list",
+      children: [/*#__PURE__*/_jsxs("div", {
+        className: "fcr-device-popover-content-device",
+        children: [/*#__PURE__*/_jsx("div", {
+          className: "fcr-device-popover-content-device-label",
+          children: transI18n('fmt_device_label_audio_list_selectMicrophone')
+        }), /*#__PURE__*/_jsxs("div", {
+          className: "fcr-device-popover-content-device-options",
+          children: [microphoneOptions.length === 0 && /*#__PURE__*/_jsx("div", {
+            children: /*#__PURE__*/_jsx(FcrRadio, {
+              name: "No device",
+              styleType: "transparent",
+              checked: true,
+              label: transI18n('fmt_toolbar_tips_nodevice')
+            })
+          }), microphoneOptions.map(function (device) {
+            return /*#__PURE__*/_jsx("div", {
+              children: /*#__PURE__*/_jsx(FcrRadio, {
+                name: "mic",
+                styleType: "transparent",
+                checked: microphoneId === device.value,
+                label: device.text,
+                onChange: function onChange(v) {
+                  return v && setMicrophoneId(device.value);
+                }
+              })
+            }, device.value);
+          })]
+        })]
+      }), /*#__PURE__*/_jsxs("div", {
+        className: "fcr-device-popover-content-device",
+        children: [/*#__PURE__*/_jsx("div", {
+          className: "fcr-device-popover-content-device-label",
+          children: transI18n('fmt_device_label_audio_list_selectSpeaker')
+        }), /*#__PURE__*/_jsxs("div", {
+          className: "fcr-device-popover-content-device-options",
+          children: [speakerOptions.length === 0 && /*#__PURE__*/_jsx("div", {
+            children: /*#__PURE__*/_jsx(FcrRadio, {
+              name: "No device",
+              styleType: "transparent",
+              checked: true,
+              label: transI18n('fmt_toolbar_tips_nodevice')
+            })
+          }), speakerOptions.map(function (device) {
+            return /*#__PURE__*/_jsx("div", {
+              onClick: function onClick() {},
+              children: /*#__PURE__*/_jsx(FcrRadio, {
+                name: "speaker",
+                styleType: "transparent",
+                checked: speakerId === device.value,
+                label: device.text,
+                onChange: function onChange(v) {
+                  return v && setSpeakerId(device.value);
+                }
+              })
+            }, device.value);
+          })]
+        })]
+      })]
+    }), /*#__PURE__*/_jsxs("div", {
+      className: "fcr-device-popover-content-more",
+      children: [connectType === FcrUIConnectType.COMPUTER && /*#__PURE__*/_jsx("div", {
+        className: "fcr-device-popover-content-more-item fcr-device-popover-content-more-item--danger",
+        onClick: function onClick() {
+          onConnectClick();
+          stopAudioByComputer();
+        },
+        children: /*#__PURE__*/_jsx("span", {
+          children: transI18n('fmt_device_label_audio_list_leaveComputerAudio')
+        })
+      }), isCallOutAbilitySupported && /*#__PURE__*/_jsx("div", {
+        className: "fcr-device-popover-content-more-item",
+        onClick: function onClick() {
+          onConnectClick();
+          openConnection('phone');
+        },
+        children: /*#__PURE__*/_jsx("span", {
+          children: transI18n('fmt_device_label_audio_list_switchToPhoneCall')
+        })
+      })]
+    }), /*#__PURE__*/_jsx("div", {
+      className: "fcr-device-popover-content-more",
+      children: /*#__PURE__*/_jsxs("div", {
+        className: "fcr-device-popover-content-more-item contain-icon",
+        onClick: openDeviceSetting,
+        children: [/*#__PURE__*/_jsx(FcrIcon, {
+          type: FcrIconType.FCR_SETTING,
+          size: 24
+        }), /*#__PURE__*/_jsx("span", {
+          children: transI18n('fmt_device_label_audio_list_moreAudioSettings')
+        })]
+      })
+    })]
+  });
+});
+export default AudioMenu;