fcr-ui-scene 3.3.1 → 3.4.0

package/lib/modules/components/device-control/components/carmera/index.js

@@ -0,0 +1,111 @@
+"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.CameraControl = void 0;
+var _i18n = require("agora-ui-foundation/lib/i18n");
+var _hooks = _interopRequireDefault(require("../../hooks"));
+var _mobxReact = require("mobx-react");
+var _react = require("react");
+var _type = require("agora-ui-foundation/lib/components/icon/type");
+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 _videoMenu = _interopRequireDefault(require("../video-menu"));
+var _store = require("../../store");
+var _jsxRuntime = require("react/jsx-runtime");
+var CameraControl = exports.CameraControl = (0, _mobxReact.observer)(function (props) {
+  var _props$showTitle = props.showTitle,
+    showTitle = _props$showTitle === void 0 ? true : _props$showTitle;
+  var transI18n = (0, _i18n.useI18n)();
+  var _useContext = (0, _react.useContext)(_store.DeviceControlStoreContext),
+    cameraEnabled = _useContext.cameraEnabled,
+    enableCamera = _useContext.enableCamera,
+    cameraList = _useContext.cameraList,
+    checkMediaPermission = _useContext.checkMediaPermission;
+  var _useDeviceTooltipVisi = (0, _hooks["default"])(),
+    tooltipVisible = _useDeviceTooltipVisi.tooltipVisible,
+    popoverOpened = _useDeviceTooltipVisi.popoverOpened,
+    handlePopoverVisibleChanged = _useDeviceTooltipVisi.handlePopoverVisibleChanged,
+    handleTooltipVisibleChanged = _useDeviceTooltipVisi.handleTooltipVisibleChanged,
+    setPopoverOpened = _useDeviceTooltipVisi.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: "device-control-item-wrapper",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "device-control",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: "device-control-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
+            }), showTitle && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+              className: "device-control-text",
+              children: title
+            })]
+          }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+            onClick: function onClick() {
+              return checkMediaPermission('camera');
+            },
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+              type: _type.FcrIconType.FCR_CAMERACRASH,
+              colors: noCamColor,
+              size: 32
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+              className: "device-control-text",
+              children: transI18n('fmt_internalsetting_status_nodevice')
+            })]
+          })
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_popover.FcrPopover, {
+          visible: popoverOpened,
+          onVisibleChange: handlePopoverVisibleChanged,
+          overlayClassName: "device-control--device-popover",
+          content: /*#__PURE__*/(0, _jsxRuntime.jsx)(_videoMenu["default"], {
+            setPopoverOpened: setPopoverOpened,
+            onMoreClick: function onMoreClick() {}
+          }),
+          trigger: "click",
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            onClick: function onClick(e) {
+              e.stopPropagation();
+            },
+            className: "device-control-extra",
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+              type: _type.FcrIconType.FCR_DROPUP4,
+              colors: {
+                iconPrimary: 'var(--fcr_web_ui_scene_mainicon1)'
+              },
+              size: 24
+            })
+          })
+        })]
+      })
+    })
+  });
+});

package/lib/modules/components/device-control/components/microphone/index.d.ts

@@ -0,0 +1,7 @@
+export declare const AudioRecordinDeviceIcon: ({ size, micEnabled }: {
+    size?: number;
+    micEnabled?: boolean;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const MicrophoneControl: (props: {
+    showTitle: boolean;
+}) => import("react/jsx-runtime").JSX.Element;

package/lib/modules/components/device-control/components/microphone/index.js

@@ -0,0 +1,170 @@
+"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.MicrophoneControl = exports.AudioRecordinDeviceIcon = void 0;
+var _mobxReact = require("mobx-react");
+var _react = require("react");
+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 _type = require("agora-ui-foundation/lib/components/icon/type");
+var _iconPhoneCall = require("agora-ui-foundation/lib/components/icon-phone-call");
+var _popover = require("agora-ui-foundation/lib/components/popover");
+var _noneMenu = _interopRequireDefault(require("../none-menu"));
+var _audioMenu = _interopRequireDefault(require("../audio-menu"));
+var _phoneMenu = _interopRequireDefault(require("../phone-menu"));
+var _hooks = _interopRequireDefault(require("../../hooks"));
+var _mic = require("agora-ui-foundation/lib/components/icon/mic");
+var _store = require("../../store");
+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.DeviceControlStoreContext),
+    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 MicrophoneControl = exports.MicrophoneControl = (0, _mobxReact.observer)(function (props) {
+  var _props$showTitle = props.showTitle,
+    showTitle = _props$showTitle === void 0 ? true : _props$showTitle;
+  var _useContext2 = (0, _react.useContext)(_store.DeviceControlStoreContext),
+    microphoneEnabled = _useContext2.microphoneEnabled,
+    enableMicrophone = _useContext2.enableMicrophone,
+    openConnection = _useContext2.openConnection,
+    microphoneList = _useContext2.microphoneList,
+    phoneMicEnabled = _useContext2.phoneMicEnabled,
+    checkMediaPermission = _useContext2.checkMediaPermission,
+    connectType = _useContext2.connectType;
+  var _useDeviceTooltipVisi = (0, _hooks["default"])(),
+    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: "device-control-item-wrapper",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "device-control",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          className: "device-control-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)'
+              }
+            }), showTitle && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+              className: "device-control-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
+            }), showTitle && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+              className: "device-control-text",
+              children: title
+            })]
+          }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+            onClick: function onClick() {
+              return checkMediaPermission('microphone');
+            },
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+              type: _type.FcrIconType.FCR_MUTECRASH,
+              colors: noMicColor,
+              size: 32
+            }), showTitle && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+              className: "device-control-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
+            }), showTitle && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+              className: "device-control-text",
+              children: transI18n('fmt_device_label_audio_unmute')
+            })]
+          })]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_popover.FcrPopover, {
+          overlayClassName: "device-control--device-popover",
+          visible: popoverOpened,
+          onVisibleChange: handlePopoverVisibleChanged,
+          trigger: "click",
+          content: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+            children: [connectType === _deviceStore.ConnectType.NONE && /*#__PURE__*/(0, _jsxRuntime.jsx)(_noneMenu["default"], {
+              onItemClick: function onItemClick() {
+                handlePopoverVisibleChanged(false);
+                setPopoverOpened(false);
+              }
+            }), connectType === _deviceStore.ConnectType.COMPUTER && /*#__PURE__*/(0, _jsxRuntime.jsx)(_audioMenu["default"], {
+              setPopoverOpened: setPopoverOpened,
+              onConnectClick: function onConnectClick() {
+                handlePopoverVisibleChanged(false);
+              }
+            }), connectType === _deviceStore.ConnectType.PHONE && /*#__PURE__*/(0, _jsxRuntime.jsx)(_phoneMenu["default"], {
+              onItemClick: function onItemClick() {
+                handlePopoverVisibleChanged(false);
+                setPopoverOpened(false);
+              }
+            })]
+          }),
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            onClick: function onClick(e) {
+              e.stopPropagation();
+            },
+            className: "device-control-extra",
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+              type: _type.FcrIconType.FCR_DROPUP4,
+              colors: {
+                iconPrimary: 'var(--fcr_web_ui_scene_mainicon1)'
+              },
+              size: 24
+            })
+          })
+        })]
+      })
+    })
+  });
+});

package/lib/modules/components/device-control/components/none-menu/index.d.ts

@@ -0,0 +1,4 @@
+declare const NoneMenu: ({ onItemClick, }: {
+    onItemClick: () => void;
+}) => import("react/jsx-runtime").JSX.Element;
+export default NoneMenu;

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

@@ -0,0 +1,68 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _i18n = require("agora-ui-foundation/lib/i18n");
+var _mobxReact = require("mobx-react");
+var _react = require("react");
+var _store = require("../../../../setting/store");
+var _type = require("agora-ui-foundation/lib/components/icon/type");
+var _icon = require("agora-ui-foundation/lib/components/icon");
+var _store2 = require("../../store");
+var _jsxRuntime = require("react/jsx-runtime");
+var NoneMenu = (0, _mobxReact.observer)(function (_ref) {
+  var onItemClick = _ref.onItemClick;
+  var transI18n = (0, _i18n.useI18n)();
+  var _useContext = (0, _react.useContext)(_store2.DeviceControlStoreContext),
+    openDeviceSettingDialog = _useContext.openDeviceSettingDialog,
+    openConnection = _useContext.openConnection;
+  var openDeviceSetting = function openDeviceSetting() {
+    onItemClick();
+    openDeviceSettingDialog({
+      activeTab: _store.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 _default = exports["default"] = NoneMenu;

package/lib/modules/components/device-control/components/phone-menu/index.d.ts

@@ -0,0 +1,4 @@
+declare const PhoneMenu: ({ onItemClick, }: {
+    onItemClick: () => void;
+}) => import("react/jsx-runtime").JSX.Element;
+export default PhoneMenu;

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

@@ -0,0 +1,61 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _i18n = require("agora-ui-foundation/lib/i18n");
+var _mobxReact = require("mobx-react");
+var _react = require("react");
+var _store = require("../../../../setting/store");
+var _type = require("agora-ui-foundation/lib/components/icon/type");
+var _icon = require("agora-ui-foundation/lib/components/icon");
+var _store2 = require("../../store");
+var _jsxRuntime = require("react/jsx-runtime");
+var PhoneMenu = (0, _mobxReact.observer)(function (_ref) {
+  var onItemClick = _ref.onItemClick;
+  var transI18n = (0, _i18n.useI18n)();
+  var _useContext = (0, _react.useContext)(_store2.DeviceControlStoreContext),
+    openDeviceSettingDialog = _useContext.openDeviceSettingDialog,
+    openConnection = _useContext.openConnection;
+  var openDeviceSetting = function openDeviceSetting() {
+    onItemClick();
+    openDeviceSettingDialog({
+      activeTab: _store.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')
+        })]
+      })
+    })]
+  });
+});
+var _default = exports["default"] = PhoneMenu;

package/lib/modules/components/device-control/components/video-menu/index.d.ts

@@ -0,0 +1,5 @@
+declare const VideoMenu: ({ onMoreClick, setPopoverOpened, }: {
+    onMoreClick: () => void;
+    setPopoverOpened: React.Dispatch<React.SetStateAction<boolean>>;
+}) => import("react/jsx-runtime").JSX.Element;
+export default VideoMenu;

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

@@ -0,0 +1,111 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = 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 _i18n = require("agora-ui-foundation/lib/i18n");
+var _mobxReact = require("mobx-react");
+var _store = require("../../../../setting/store");
+var _radio = require("agora-ui-foundation/lib/components/radio");
+var _icon = require("agora-ui-foundation/lib/components/icon");
+var _type = require("agora-ui-foundation/lib/components/icon/type");
+var _react = require("react");
+var _store2 = require("../../store");
+var _jsxRuntime = require("react/jsx-runtime");
+var VideoMenu = (0, _mobxReact.observer)(function (_ref) {
+  var onMoreClick = _ref.onMoreClick,
+    setPopoverOpened = _ref.setPopoverOpened;
+  var transI18n = (0, _i18n.useI18n)();
+  var _useContext = (0, _react.useContext)(_store2.DeviceControlStoreContext),
+    openDeviceSettingDialog = _useContext.openDeviceSettingDialog,
+    cameraList = _useContext.cameraList,
+    cameraId = _useContext.cameraId,
+    setCameraId = _useContext.setCameraId;
+  var cameraOptions = cameraList.map(function (device) {
+    return {
+      text: device.deviceName,
+      value: device.deviceId
+    };
+  });
+  var openDeviceSetting = function openDeviceSetting(videoActiveTab) {
+    setPopoverOpened(false);
+    openDeviceSettingDialog({
+      activeTab: _store.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 _default = exports["default"] = VideoMenu;

package/lib/modules/components/device-control/hooks/index.d.ts

@@ -0,0 +1,9 @@
+declare const useDeviceTooltipVisible: () => {
+    popoverOpened: boolean;
+    tooltipVisible: boolean;
+    handleTooltipVisibleChanged: (visible: boolean) => void;
+    handlePopoverVisibleChanged: (visible: boolean) => void;
+    setPopoverOpened: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+    setTooltipVisible: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+};
+export default useDeviceTooltipVisible;

package/lib/modules/components/device-control/hooks/index.js

@@ -0,0 +1,42 @@
+"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["default"] = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = require("react");
+var useDeviceTooltipVisible = function useDeviceTooltipVisible() {
+  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);
+    }
+    setPopoverOpened(visible);
+  };
+  return {
+    popoverOpened: popoverOpened,
+    tooltipVisible: tooltipVisible,
+    handleTooltipVisibleChanged: handleTooltipVisibleChanged,
+    handlePopoverVisibleChanged: handlePopoverVisibleChanged,
+    setPopoverOpened: setPopoverOpened,
+    setTooltipVisible: setTooltipVisible
+  };
+};
+var _default = exports["default"] = useDeviceTooltipVisible;