fcr-ui-scene 3.7.9-alpha → 3.8.0

package/lib/modules/components/caption-menu/translation-setting-options.js

@@ -0,0 +1,188 @@
+"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.useTranslationSettingOptions = exports.useTranslateLanguageOptions = exports.SourceLanguageMapGenerateI18nKey = exports.FcrUICaptionMenuType = void 0;
+require("core-js/modules/es.array.concat.js");
+require("core-js/modules/es.array.map.js");
+require("core-js/modules/es.function.name.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 _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _checkbox = require("agora-ui-foundation/lib/components/checkbox");
+var _switch = require("agora-ui-foundation/lib/components/switch");
+var _type = require("fcr-core/lib/type");
+var _react = require("react");
+var _ = require(".");
+var _type2 = require("../../../shared-data/stt-setting.ts/type");
+var _useLanguageConfig = require("../../interpreter/interpreter-list/interpreter-item/components/pick-language/useLanguageConfig");
+var _i18n = require("agora-ui-foundation/lib/i18n");
+var _jsxRuntime = require("react/jsx-runtime");
+var SourceLanguageMapGenerateI18nKey = exports.SourceLanguageMapGenerateI18nKey = (0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])({}, _type.FcrLanguage.ZH, 'fmt_ai_subtitles_source_language_options_chinese'), _type.FcrLanguage.EN, 'fmt_ai_subtitles_source_language_options_english'), _type.FcrLanguage.JP, 'fmt_ai_subtitles_source_language_options_japanese');
+var FcrUICaptionMenuType = exports.FcrUICaptionMenuType = /*#__PURE__*/function (FcrUICaptionMenuType) {
+  FcrUICaptionMenuType["CAPTION"] = "caption";
+  FcrUICaptionMenuType["TRANSCRIBING"] = "transcribing";
+  return FcrUICaptionMenuType;
+}({});
+var useTranslateLanguageOptions = exports.useTranslateLanguageOptions = function useTranslateLanguageOptions(languageOptions) {
+  var getLanguageConfig = (0, _useLanguageConfig.useLanguageConfig)();
+  var t = (0, _i18n.useI18n)();
+  var translateLanguageOptions = languageOptions.translateList.map(function (language) {
+    var languageConfig = getLanguageConfig(language);
+    var text = languageConfig.name;
+    if (language === _type.FcrLanguage.ZH) {
+      text = t('fmt_ai_subtitles_setting_options_chinese');
+    } else if (language === _type.FcrLanguage.EN) {
+      text = t('fmt_ai_subtitles_setting_options_english');
+    } else if (language === _type.FcrLanguage.JP) {
+      text = t('fmt_ai_subtitles_setting_options_japanese');
+    }
+    return {
+      text: text,
+      value: language
+    };
+  });
+  return [{
+    text: t('fmt_ai_subtitles_setting_options_not_translated'),
+    value: _type2.NONE
+  }].concat((0, _toConsumableArray2["default"])(translateLanguageOptions));
+};
+var useSourceLanguageMenuOptions = function useSourceLanguageMenuOptions() {
+  var _useContext = (0, _react.useContext)(_.CaptionMenuContext),
+    languageOptions = _useContext.languageOptions,
+    updateSourceLanguage = _useContext.updateSourceLanguage,
+    sourceLanguage = _useContext.sourceLanguage;
+  var getLanguageConfig = (0, _useLanguageConfig.useLanguageConfig)();
+  var transI18n = (0, _i18n.useI18n)();
+  var sourceLanguageOptions = languageOptions.sourceList.map(function (language) {
+    var languageConfig = getLanguageConfig(language);
+    var name = SourceLanguageMapGenerateI18nKey[language] ? transI18n(SourceLanguageMapGenerateI18nKey[language]) : languageConfig.name;
+    return {
+      key: language,
+      title: /*#__PURE__*/(0, _jsxRuntime.jsx)(_checkbox.FcrCheckbox, {
+        label: name,
+        styleType: "white",
+        checked: sourceLanguage === language,
+        checkIconAlignRight: true
+      }),
+      onButtonClick: function onButtonClick() {
+        updateSourceLanguage(language);
+      }
+    };
+  });
+  return [{
+    type: 'title',
+    title: transI18n('fmt_ai_subtitles_setting_label_source_language'),
+    key: 'source_language_title',
+    onButtonClick: function onButtonClick(e) {
+      e.stopPropagation();
+      e.preventDefault();
+    }
+  }, _.line].concat((0, _toConsumableArray2["default"])(sourceLanguageOptions));
+};
+var useTranslationMenuOptions = function useTranslationMenuOptions() {
+  var _useContext2 = (0, _react.useContext)(_.CaptionMenuContext),
+    languageOptions = _useContext2.languageOptions,
+    subscribeTranslateLanguage = _useContext2.subscribeTranslateLanguage,
+    translateLanguage = _useContext2.translateLanguage;
+  var transI18n = (0, _i18n.useI18n)();
+  var translateLanguageOptions = useTranslateLanguageOptions(languageOptions);
+  var translationLanguageOptions = translateLanguageOptions.map(function (item) {
+    var language = translateLanguage === null ? _type2.NONE : translateLanguage;
+    return {
+      title: /*#__PURE__*/(0, _jsxRuntime.jsx)(_checkbox.FcrCheckbox, {
+        label: item.text,
+        styleType: "white",
+        checked: language === item.value
+      }),
+      key: item.value,
+      onButtonClick: function onButtonClick(e) {
+        e.stopPropagation();
+        e.preventDefault();
+        var value = item.value === _type2.NONE ? null : item.value;
+        subscribeTranslateLanguage(value);
+      }
+    };
+  });
+  return [{
+    title: transI18n('fmt_ai_subtitles_setting_label_translation_setting'),
+    key: 'traslation_settings_title',
+    type: 'title',
+    onButtonClick: function onButtonClick(e) {
+      e.stopPropagation();
+      e.preventDefault();
+    }
+  }, _.line].concat((0, _toConsumableArray2["default"])(translationLanguageOptions));
+};
+var useTranslationSettingOptions = exports.useTranslationSettingOptions = function useTranslationSettingOptions() {
+  var _useContext3 = (0, _react.useContext)(_.CaptionMenuContext),
+    isTwoLineCaptionEnabled = _useContext3.isTwoLineCaptionEnabled,
+    toggleTwoLineCaptionEnabled = _useContext3.toggleTwoLineCaptionEnabled,
+    _useContext3$menuType = _useContext3.menuType,
+    menuType = _useContext3$menuType === void 0 ? FcrUICaptionMenuType.CAPTION : _useContext3$menuType,
+    isTwoLineTranscribingEnabled = _useContext3.isTwoLineTranscribingEnabled,
+    toggleTwoLineTranscribingEnabled = _useContext3.toggleTwoLineTranscribingEnabled,
+    hasSetSourceLanguagePermission = _useContext3.hasSetSourceLanguagePermission,
+    isSourceLanguageVisible = _useContext3.isSourceLanguageVisible,
+    setIsSourceLanguageVisible = _useContext3.setIsSourceLanguageVisible,
+    isTranslationVisible = _useContext3.isTranslationVisible,
+    setIsTranslationVisible = _useContext3.setIsTranslationVisible;
+  var transI18n = (0, _i18n.useI18n)();
+  var sourceLanguageOptions = useSourceLanguageMenuOptions();
+  var translationLanguageOptions = useTranslationMenuOptions();
+  var twoLineProps = menuType === FcrUICaptionMenuType.CAPTION ? {
+    value: isTwoLineCaptionEnabled,
+    onChange: toggleTwoLineCaptionEnabled
+  } : {
+    value: isTwoLineTranscribingEnabled,
+    onChange: toggleTwoLineTranscribingEnabled
+  };
+  return [{
+    key: 'translate_settings_title',
+    title: transI18n('fmt_ai_subtitles_setting_label_translation_setting'),
+    type: 'title'
+  }, {
+    title: transI18n('fmt_ai_subtitles_setting_label_source_language'),
+    key: 'source_language',
+    options: sourceLanguageOptions,
+    disabled: !hasSetSourceLanguagePermission,
+    onButtonClick: function onButtonClick(e) {
+      e.stopPropagation();
+      e.preventDefault();
+      setIsSourceLanguageVisible(true);
+      setIsTranslationVisible(false);
+    },
+    visible: isSourceLanguageVisible
+  }, {
+    title: transI18n('fmt_ai_subtitles_setting_label_translations_display'),
+    key: 'translate_display',
+    options: translationLanguageOptions,
+    onButtonClick: function onButtonClick(e) {
+      e.stopPropagation();
+      e.preventDefault();
+      setIsTranslationVisible(true);
+      setIsSourceLanguageVisible(false);
+    },
+    visible: isTranslationVisible
+  }, _.line, {
+    key: 'two_line_caption_enabled',
+    title: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "fcr-subtitles-menu-switch-container",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        children: transI18n('fmt_ai_subtitles_setting_label_bilingual_display')
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_switch.FcrSwitch, {
+        labels: {
+          on: 'ON',
+          off: 'OFF'
+        },
+        value: twoLineProps.value,
+        onChange: twoLineProps.onChange
+      })]
+    })
+  }];
+};

package/lib/modules/components/control-bar/index.d.ts

@@ -1,6 +1,6 @@
 import { PropsWithChildren } from 'react';
 import { WhiteboardThemeType } from '../../whiteboard/type';
-import { FcrBoardToolType } from 'fcr-core/lib/room-control/whiteboard-control/enums';
+import { FcrBoardToolType } from 'fcr-core';
 import './index.css';
 type WhiteboardProps = {
     onClose: () => void;
@@ -17,12 +17,12 @@ type WhiteboardProps = {
     onAdaptive?: () => boolean;
     onOrigin?: () => boolean;
     onBoardDomLoaded?: (dom: HTMLDivElement) => void;
-    isSharingWithAudio?: boolean;
+    isSharingAudio?: boolean;
     ownerUserName: string;
     isMyBoard: boolean;
     showControlBar?: boolean;
 };
 type PickRequired<T extends object, K extends keyof T> = Required<Pick<T, K>> & Omit<T, K>;
-type SharingType<T extends 'whiteboard' | 'screenshare' | undefined> = T extends 'whiteboard' ? WhiteboardProps : PickRequired<Partial<WhiteboardProps>, 'onZoomIn' | 'onZoomOut' | 'onAdaptive' | 'onOrigin' | 'isSharingWithAudio'>;
+type SharingType<T extends 'whiteboard' | 'screenshare' | undefined> = T extends 'whiteboard' ? WhiteboardProps : PickRequired<Partial<WhiteboardProps>, 'onZoomIn' | 'onZoomOut' | 'onAdaptive' | 'onOrigin' | 'isSharingAudio'>;
 export declare const WhiteboardControlbar: <T extends "whiteboard" | "screenshare">(props: PropsWithChildren<SharingType<T>>) => import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -19,7 +19,7 @@ var _button = require("agora-ui-foundation/lib/components/button");
 var _divider = _interopRequireDefault(require("agora-ui-foundation/lib/components/divider"));
 var _i18n = require("agora-ui-foundation/lib/i18n");
 var _type2 = require("../../whiteboard/type");
-var _enums = require("fcr-core/lib/room-control/whiteboard-control/enums");
+var _fcrCore = require("fcr-core");
 require("./index.css");
 var _debounce = _interopRequireDefault(require("lodash/debounce"));
 var _jsxRuntime = require("react/jsx-runtime");
@@ -44,7 +44,7 @@ var WhiteboardControlbar = exports.WhiteboardControlbar = function WhiteboardCon
     onZoomOut = props.onZoomOut,
     onAdaptive = props.onAdaptive,
     onOrigin = props.onOrigin,
-    isSharingWithAudio = props.isSharingWithAudio,
+    isSharingAudio = props.isSharingAudio,
     _props$showControlBar = props.showControlBar,
     showControlBar = _props$showControlBar === void 0 ? true : _props$showControlBar;
   var boardRef = (0, _react.useRef)(undefined);
@@ -80,9 +80,9 @@ var WhiteboardControlbar = exports.WhiteboardControlbar = function WhiteboardCon
     _useState14 = (0, _slicedToArray2["default"])(_useState13, 2),
     contianHeight = _useState14[0],
     setContianHeight = _useState14[1];
-  var isWhiteboard = sharingType === 'whiteboard';
+  var isSharingWhiteboard = sharingType === 'whiteboard';
   var cursor = (0, _react.useMemo)(function () {
-    return _enums.FcrBoardToolType[currentTool || _enums.FcrBoardToolType.NONE].toLowerCase();
+    return _fcrCore.FcrBoardToolType[currentTool || _fcrCore.FcrBoardToolType.NONE].toLowerCase();
   }, [currentTool]);
   var resetHeight = (0, _react.useCallback)(function () {
     var _boardRef$current;
@@ -111,7 +111,7 @@ var WhiteboardControlbar = exports.WhiteboardControlbar = function WhiteboardCon
       boardRef.current.addEventListener('transitionend', resetHeight);
     }
   };
-  var showEditButton = !controlEnabled && !isMyBoard && !isHost && isWhiteboard;
+  var showEditButton = !controlEnabled && !isMyBoard && !isHost && isSharingWhiteboard;
   var showChangeThemeButton = (canWriteBoard || isMyBoard || isHost) && setTheme && currentTheme;
   function setCanvasBound(oprate) {
     if (!Object.values(_type2.WhiteboardControlbarEvents).includes(oprate) || oprate === _type2.WhiteboardControlbarEvents.ENABLE_CONTROL) {
@@ -207,19 +207,19 @@ var WhiteboardControlbar = exports.WhiteboardControlbar = function WhiteboardCon
     className: "fcr-whiteboard-controlbar",
     id: "fcr-whiteboard-controlbar",
     style: {
-      height: isWhiteboard ? '100%' : 'auto'
+      height: isSharingWhiteboard ? '100%' : 'auto'
     },
     children: [showControlBar && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       className: "fcr-whiteboard-controlbar-header",
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
         className: "fcr-whiteboard-controlbar-left",
-        children: transI18n(isWhiteboard ? 'fmt_screenshare_whiteboard_tips_someonesharing' : 'fmt_screenshare_room_new_screen_share', {
+        children: transI18n(isSharingWhiteboard ? 'fmt_screenshare_whiteboard_tips_someonesharing' : 'fmt_screenshare_room_new_screen_share', {
           reason1: isMyBoard ? transI18n('fmt_settings_labels_you') : ownerUserName
         })
       }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
         className: "fcr-whiteboard-controlbar-center",
-        children: [!isWhiteboard && /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
-          type: isSharingWithAudio ? _type.FcrIconType.FCR_DEVICEAUDIOON : _type.FcrIconType.FCR_DEVICEAUDIOOFF,
+        children: [!isSharingWhiteboard && /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+          type: isSharingAudio ? _type.FcrIconType.FCR_DEVICEAUDIOON : _type.FcrIconType.FCR_DEVICEAUDIOOFF,
           size: 22,
           colors: {
             iconPrimary: 'var(--fcr_ui_scene_ramp_green6)'
@@ -335,7 +335,7 @@ var WhiteboardControlbar = exports.WhiteboardControlbar = function WhiteboardCon
           children: transI18n('fmt_screenshare_whiteboard_button_exitdrawing')
         })]
       })]
-    }), isWhiteboard && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    }), isSharingWhiteboard && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       className: "fcr-whiteboard-controlbar-body",
       ref: handleBoardRef,
       style: {

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

@@ -19,6 +19,7 @@ var _store = require("../../store.base");
 require("../../index.css");
 var _type2 = require("../../../../../type");
 var _type3 = require("../../../../setting/type");
+var _deviceProvider = require("../../../../../providers/device-provider");
 var _jsxRuntime = require("react/jsx-runtime");
 var AudioMenu = (0, _mobxReact.observer)(function (_ref) {
   var onConnectClick = _ref.onConnectClick,
@@ -36,12 +37,28 @@ var AudioMenu = (0, _mobxReact.observer)(function (_ref) {
     connectType = _useContext.connectType,
     stopAudioByComputer = _useContext.stopAudioByComputer;
   var microphoneOptions = microphoneList.map(function (device) {
+    if (device.deviceId === _deviceProvider.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 === _deviceProvider.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

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

@@ -86,6 +86,9 @@ var CameraControl = exports.CameraControl = (0, _mobxReact.observer)(function (p
           onMoreClick: function onMoreClick() {}
         }),
         trigger: "click",
+        overlayInnerStyle: {
+          width: 'fit-content'
+        },
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
           onClick: function onClick(e) {
             e.stopPropagation();

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

@@ -79,7 +79,7 @@ var MicrophoneControl = exports.MicrophoneControl = (0, _mobxReact.observer)(fun
     } else {
       return transI18n('fmt_audio_popup_button_turning_on');
     }
-  }, [microphoneState]);
+  }, [microphoneState, transI18n]);
   var noMic = microphoneList.length === 0;
   var noMicColor = {
     iconPrimary: "var(--fcr_web_ui_scene_mainicon1)",
@@ -142,6 +142,9 @@ var MicrophoneControl = exports.MicrophoneControl = (0, _mobxReact.observer)(fun
         visible: popoverOpened,
         onVisibleChange: handlePopoverVisibleChanged,
         trigger: "click",
+        overlayInnerStyle: {
+          width: 'fit-content'
+        },
         content: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
           children: [connectType === _type2.FcrUIConnectType.NONE && /*#__PURE__*/(0, _jsxRuntime.jsx)(_noneMenu["default"], {
             onItemClick: function onItemClick() {

package/lib/modules/components/device-control/index.css

@@ -64,6 +64,8 @@
   box-shadow: var(--fcr_web_light_dropup_m) !important;
   text-align: left !important;
   margin-left: 10px;
+  max-width: 280px;
+  min-width: 200px;
 }
 
 .fcr-device-popover-content-device {
@@ -74,10 +76,12 @@
   border-top-style: solid;
 }
 .fcr-device-popover-content-device-label {
-  color: var(--fcr_ui_scene_icontext1);
   font-size: 12px;
+  color: var(--fcr_ui_scene_icontext1);
+  padding: 0 10px;
+  height: 32px;
   line-height: 32px;
-  padding-left: 13px;
+  font-weight: 700;
 }
 .fcr-device-popover-content-device-options {
   margin-top: 8px;
@@ -88,6 +92,8 @@
   width: 100%;
   padding: 0 6px;
   transition: all 0.2s ease;
+  flex-direction: row-reverse;
+  justify-content: space-between;
 }
 .fcr-device-popover-content-device-options .fcr-radio:hover {
   background: var(--fcr_web_ui_scene_hover);
@@ -111,7 +117,6 @@
   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%;
@@ -126,7 +131,7 @@
   border-radius: var(--fcr_cornerradius_xxs);
   height: 32px;
   width: 100%;
-  padding: 4px 6px 4px 36px;
+  padding: 4px 6px 4px 10px;
   font-size: 13px;
   line-height: 100%;
   color: var(--fcr_ui_scene_icontext1, #373c42);
@@ -138,6 +143,9 @@
 }
 .fcr-device-popover-content-more-item.contain-icon {
   padding: 4px 6px;
+  padding-left: 10px;
+  flex-direction: row-reverse;
+  justify-content: space-between;
 }
 .fcr-device-popover-content-more-item:hover {
   color: var(--fcr_web_ui_scene_mainicon2);

package/lib/modules/components/device-control/store.base.d.ts

@@ -7,6 +7,7 @@ export declare abstract class DeviceControlStoreBase {
     private _roomControl;
     private _dialogProvider;
     private _facilityProvider;
+    private _sharedSettingDataSource;
     private _streamControlObserver;
     accessor isPstnUser: boolean;
     accessor phoneMicEnabled: boolean;

package/lib/modules/components/device-control/store.base.js

@@ -89,6 +89,7 @@ var DeviceControlStoreBase = exports.DeviceControlStoreBase = /*#__PURE__*/funct
     this._deviceProvider = objectManager.getObject(_objectManager.FcrUIObjectKeys.P_DEVICE_PROVIDER);
     this._facilityProvider = objectManager.getObject(_objectManager.FcrUIObjectKeys.P_FACILITY_PROVIDER);
     var currentRoomProvider = objectManager.getObject(_objectManager.FcrUIObjectKeys.P_CURRENT_ROOM_CONTROL_PROVIDER);
+    this._sharedSettingDataSource = objectManager.getObject(_objectManager.FcrUIObjectKeys.S_SHARED_SETTING_DATA_SOURCE);
     this._roomControl = currentRoomProvider.currentRoomControl;
     this._roomControl.getStreamControl().addObserver(this._streamControlObserver);
   }
@@ -172,6 +173,7 @@ var DeviceControlStoreBase = exports.DeviceControlStoreBase = /*#__PURE__*/funct
     key: "openDeviceSettingDialog",
     value: function openDeviceSettingDialog(arg) {
       this._dialogProvider.openDialog(_constant.FcrUIDialogKey.SETTINGS, arg);
+      this._sharedSettingDataSource.setDialogConfig(arg);
     }
   }, {
     key: "openConnection",