fcr-ui-scene 3.8.1 → 3.9.0-alpha

package/lib-es/modules/setting/view.js

@@ -0,0 +1,147 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import "core-js/modules/es.array.map.js";
+import "core-js/modules/es.object.to-string.js";
+import { useContext, useEffect, useMemo } from 'react';
+import classNames from 'classnames';
+import { isElectron } from 'agora-foundation/lib/utilities/env';
+import { useI18n } from 'agora-ui-foundation/lib/i18n';
+import { FcrIcon } from 'agora-ui-foundation/lib/components/icon';
+import { FcrIconType } from 'agora-ui-foundation/lib/components/icon/type';
+import { observer } from 'mobx-react';
+import './index.css';
+import './state/index.css';
+import './video-settings/index.css';
+import './audio-settings/index.css';
+import './storage-settings/index.css';
+import State from './state';
+import AudioSettings from './audio-settings/audio-settings';
+import VideoSettings from './video-settings/video-settings';
+import GeneralSettings from './general-settings/general-settings';
+import { FcrToolTip } from 'agora-ui-foundation/lib/components/tooltip';
+import { DeviceSettingTab } from './type';
+import { StoreContext } from './store.base';
+import { useNamespace } from 'agora-ui-foundation/lib/utilities/use-namespace';
+import CaptionAndTranscribing from './caption_and_transcribing';
+// import StorageSettings from './storage-settings/storage-settings';
+// import TranslateSettings from './translate-settings/translate-settings';
+// import MinutesSettings from './minutes-settings/minutes-settings';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export var HelpQuestionIcon = function HelpQuestionIcon(_ref) {
+  var content = _ref.content,
+    placement = _ref.placement;
+  return /*#__PURE__*/_jsx(FcrToolTip, {
+    mouseEnterDelay: 0,
+    trigger: "hover",
+    content: content,
+    placement: placement,
+    children: /*#__PURE__*/_jsx("div", {
+      onClick: function onClick(e) {
+        e.stopPropagation();
+      },
+      children: /*#__PURE__*/_jsx(FcrIcon, {
+        type: FcrIconType.FCR_HELPQUESTION,
+        size: 16,
+        colors: {
+          iconPrimary: 'var(--fcr_ui_scene_icontext1)'
+        }
+      })
+    })
+  });
+};
+export var DeviceSettingsView = observer(function () {
+  var _useContext = useContext(StoreContext),
+    dialogConfig = _useContext.dialogConfig,
+    setDialogConfig = _useContext.setDialogConfig,
+    setSettingVideoOpened = _useContext.setSettingVideoOpened,
+    isHiddenMeetingTab = _useContext.isHiddenMeetingTab,
+    isMainRoom = _useContext.isMainRoom;
+  var t = useI18n();
+  var ns = useNamespace('device-settings');
+  var getListItemCls = function getListItemCls(tabKey) {
+    return classNames(ns.e('nav-list-item'), ns.is('active', dialogConfig.activeTab === tabKey));
+  };
+  var getSurroundingCls = function getSurroundingCls(color) {
+    return classNames(ns.e('surrounding'), ns.em('surrounding', color));
+  };
+  var tabClickHandler = function tabClickHandler(tabKey) {
+    return function () {
+      setDialogConfig({
+        activeTab: tabKey
+      });
+    };
+  };
+  useEffect(function () {
+    setSettingVideoOpened(true);
+    return function () {
+      setSettingVideoOpened(false);
+    };
+  }, []);
+  var tabContent = useMemo(function () {
+    var tabContents = _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, DeviceSettingTab.GENERAL, /*#__PURE__*/_jsx(GeneralSettings, {})), DeviceSettingTab.AUDIO, /*#__PURE__*/_jsx(AudioSettings, {})), DeviceSettingTab.VIDEO, /*#__PURE__*/_jsx(VideoSettings, {})), DeviceSettingTab.CAPTION_AND_TRANSCRIBING, /*#__PURE__*/_jsx(CaptionAndTranscribing, {})), DeviceSettingTab.STATE, /*#__PURE__*/_jsx(State, {}));
+    return tabContents[dialogConfig.activeTab];
+  }, [dialogConfig.activeTab]);
+  var deviceSettingItems = [{
+    tab: DeviceSettingTab.GENERAL,
+    color: 'orange',
+    icon: FcrIconType.FCR_SETTING,
+    label: t('fmt_settings_option_general')
+  }, {
+    tab: DeviceSettingTab.AUDIO,
+    color: 'green',
+    icon: FcrIconType.FCR_MUTE,
+    label: t('fmt_setting_option_Voice')
+  }, {
+    tab: DeviceSettingTab.VIDEO,
+    color: 'purple',
+    icon: FcrIconType.FCR_CAMERA,
+    label: t('fmt_setting_option_Video')
+  }, {
+    tab: DeviceSettingTab.CAPTION_AND_TRANSCRIBING,
+    color: 'storage',
+    icon: FcrIconType.FCR_MOBILE_SUBTITIES_ON,
+    label: t('fmt_ai_subtitles_setting_label_caption_transcripts'),
+    isHidden: isHiddenMeetingTab || !isMainRoom
+  }, {
+    tab: DeviceSettingTab.STATE,
+    color: 'blue',
+    icon: FcrIconType.FCR_COMPUTERDATA,
+    label: t('fmt_modules_labels_qualitystatistics'),
+    isHidden: isHiddenMeetingTab
+  }];
+  return /*#__PURE__*/_jsxs("div", {
+    className: ns.b(),
+    children: [/*#__PURE__*/_jsx("div", {
+      className: ns.e('nav'),
+      children: /*#__PURE__*/_jsx("ul", {
+        children: deviceSettingItems.map(function (_ref2) {
+          var tab = _ref2.tab,
+            color = _ref2.color,
+            icon = _ref2.icon,
+            label = _ref2.label,
+            isHidden = _ref2.isHidden;
+          return isHidden ? null : /*#__PURE__*/_jsxs("li", {
+            className: getListItemCls(tab),
+            onClick: tabClickHandler(tab),
+            children: [/*#__PURE__*/_jsx("div", {
+              className: getSurroundingCls(color),
+              children: /*#__PURE__*/_jsx(FcrIcon, {
+                type: icon,
+                colors: {
+                  iconPrimary: 'white'
+                },
+                size: 24
+              })
+            }), /*#__PURE__*/_jsx("div", {
+              children: label
+            })]
+          }, tab);
+        })
+      })
+    }), /*#__PURE__*/_jsx("div", {
+      className: classNames(ns.e('tab-content-wrapper'), ns.is('tab-content-video-wrapper', dialogConfig.activeTab === DeviceSettingTab.VIDEO), {
+        'is-electron': isElectron()
+      }),
+      children: tabContent
+    })]
+  });
+});

package/lib-es/modules/share-screen/components/control-bar/index.css

@@ -0,0 +1,75 @@
+.fcr-screen-share-controlbar {
+  /* position: absolute;
+  top: 0;
+  left: 0; */
+  width: 100%;
+  height: 28px;
+  background-color: var(--fcr_web_ui_scene_fill2);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+  border-top: 2px solid var(--fcr_web_ui_scene_border1);
+  border-bottom: 4px solid var(--fcr_web_ui_scene_border1);
+  padding: 10px;
+}
+
+.fcr-screen-share-controlbar-left {
+  flex: 1;
+  justify-content: flex-end;
+  align-items: center;
+  display: flex;
+  font-weight: 400;
+  color: var(--fcr_ui_scene_icontext1);
+  font-size: 12px;
+}
+
+.fcr-screen-share-controlbar-center {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  column-gap: 12px;
+  height: 20px;
+}
+
+.fcr-screen-share-controlbar-right {
+  flex: 1;
+}
+
+.fcr-screen-share-controlbar-right .fcr-button-XXS {
+  height: 20px;
+  padding: 0 5px;
+}
+
+.fcr-screen-share-controlbar-username {
+  margin-right: 10px;
+}
+
+.fcr-screen-share-annotation-exit-draw-btn {
+  margin-left: 12px;
+}
+
+.fcr-screen-share-annotation-exit-draw-btn p,
+.fcr-screen-share-annotation-exit-draw-btn div {
+  min-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.fcr-screen-share-controlbar-without-exit {
+  margin-left: 12px;
+  width: 20px;
+}
+
+.fcr-screen-share-annotation-toolbar-btn {
+  margin-left: 0px !important;
+  width: 80px !important;
+}
+
+.fcr-screen-share-annotation-toolbar-btn p {
+  width: 80px !important;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}

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

@@ -0,0 +1,6 @@
+import { observer } from 'mobx-react';
+import './index.css';
+var FcrScreenShareControlBar = observer(function (props) {
+  return null;
+});
+export default FcrScreenShareControlBar;

package/lib-es/modules/share-screen/components/control-bar/items/annotation-edit-btn/index.js

@@ -0,0 +1,38 @@
+import { FcrButton } from 'agora-ui-foundation/lib/components/button';
+import { FcrIcon } from 'agora-ui-foundation/lib/components/icon';
+import { FcrIconType } from 'agora-ui-foundation/lib/components/icon/type';
+import { FcrToolTip } from 'agora-ui-foundation/lib/components/tooltip';
+import { transI18n } from 'agora-ui-foundation/lib/i18n';
+import classNames from 'classnames';
+import { observer } from 'mobx-react';
+import { jsx as _jsx } from "react/jsx-runtime";
+var FcrScreenShareAnnotationBtn = observer(function (props) {
+  var visible = props.visible,
+    disable = props.disable,
+    clickFn = props.clickFn,
+    isShowToolbar = props.isShowToolbar;
+  return visible ? /*#__PURE__*/_jsx(FcrToolTip, {
+    content: !disable ? transI18n('fmt_screenshare_toast_host_enabled_annotations') : transI18n('fmt_screenshare_toast_host_disabled_annotations'),
+    children: /*#__PURE__*/_jsx("div", {
+      className: classNames('whiteboard-controlbar-item', 'fcr-screen-share-controlbar-without-exit', {
+        'fcr-screen-share-annotation-toolbar-btn': isShowToolbar
+      }),
+      children: isShowToolbar ? /*#__PURE__*/_jsx(FcrButton, {
+        size: "XXS",
+        styleType: "normal",
+        shape: "rounded",
+        className: "fcr-screen-share-annotation-exit-draw-btn",
+        onClick: clickFn,
+        children: transI18n('fmt_screenshare_whiteboard_button_exitdrawing')
+      }) : /*#__PURE__*/_jsx(FcrIcon, {
+        onClick: clickFn,
+        type: FcrIconType.FCR_WHITEBOARD2,
+        size: 22,
+        colors: {
+          iconPrimary: !disable ? 'var(--fcr_ui_scene_icontext1)' : 'gray'
+        }
+      })
+    })
+  }) : null;
+});
+export default FcrScreenShareAnnotationBtn;

package/lib-es/modules/share-screen/components/control-bar/items/full-container-btn/index.js

@@ -0,0 +1,25 @@
+import { FcrIcon } from 'agora-ui-foundation/lib/components/icon';
+import { FcrIconType } from 'agora-ui-foundation/lib/components/icon/type';
+import { FcrToolTip } from 'agora-ui-foundation/lib/components/tooltip';
+import { transI18n } from 'agora-ui-foundation/lib/i18n';
+import { observer } from 'mobx-react';
+import { jsx as _jsx } from "react/jsx-runtime";
+var FcrScreenShareFullContainerBtn = observer(function (props) {
+  var isAdaptived = props.isAdaptived,
+    fullContainer = props.fullContainer;
+  return /*#__PURE__*/_jsx(FcrToolTip, {
+    content: isAdaptived ? transI18n('fmt_screenshare_whiteboard_tips_alreadyadaptionsize') : transI18n('fmt_screenshare_lables_adaptionlsize'),
+    children: /*#__PURE__*/_jsx("div", {
+      className: "whiteboard-controlbar-item",
+      onClick: fullContainer,
+      children: /*#__PURE__*/_jsx(FcrIcon, {
+        type: FcrIconType.FCR_FULLCOVERAGE,
+        size: 22,
+        colors: {
+          iconPrimary: isAdaptived ? 'gray' : 'var(--fcr_ui_scene_icontext1)'
+        }
+      })
+    })
+  });
+});
+export default FcrScreenShareFullContainerBtn;

package/lib-es/modules/share-screen/components/control-bar/items/original-size-btn/index.js

@@ -0,0 +1,25 @@
+import { FcrIcon } from 'agora-ui-foundation/lib/components/icon';
+import { FcrIconType } from 'agora-ui-foundation/lib/components/icon/type';
+import { FcrToolTip } from 'agora-ui-foundation/lib/components/tooltip';
+import { transI18n } from 'agora-ui-foundation/lib/i18n';
+import { observer } from 'mobx-react';
+import { jsx as _jsx } from "react/jsx-runtime";
+var FcrScreenShareOrgSizeBtn = observer(function (props) {
+  var isOriginal = props.isOriginal,
+    setOriginScalc = props.setOriginScalc;
+  return /*#__PURE__*/_jsx(FcrToolTip, {
+    content: isOriginal ? transI18n('fmt_screenshare_tips_alreadyoriginalsize') : transI18n('fmt_screenshare_lables_originalsize'),
+    children: /*#__PURE__*/_jsx("div", {
+      className: "whiteboard-controlbar-item",
+      onClick: setOriginScalc,
+      children: /*#__PURE__*/_jsx(FcrIcon, {
+        type: FcrIconType.FCR_EQUALRATIO,
+        size: 22,
+        colors: {
+          iconPrimary: isOriginal ? 'gray' : 'var(--fcr_ui_scene_icontext1)'
+        }
+      })
+    })
+  });
+});
+export default FcrScreenShareOrgSizeBtn;

package/lib-es/modules/share-screen/components/control-bar/items/zoom-in-btn/index.js

@@ -0,0 +1,25 @@
+import { FcrIcon } from 'agora-ui-foundation/lib/components/icon';
+import { FcrIconType } from 'agora-ui-foundation/lib/components/icon/type';
+import { FcrToolTip } from 'agora-ui-foundation/lib/components/tooltip';
+import { transI18n } from 'agora-ui-foundation/lib/i18n';
+import { observer } from 'mobx-react';
+import { jsx as _jsx } from "react/jsx-runtime";
+var FcrScreenShareZoomInBtn = observer(function (props) {
+  var isMinimum = props.isMinimum,
+    zoomIn = props.zoomIn;
+  return /*#__PURE__*/_jsx(FcrToolTip, {
+    content: isMinimum ? transI18n('fmt_screenshare_whiteboard_tips_alreadyminumumsize') : transI18n('fmt_screenshare_whiteboard_button_narrow'),
+    children: /*#__PURE__*/_jsx("div", {
+      className: "whiteboard-controlbar-item",
+      onClick: zoomIn,
+      children: /*#__PURE__*/_jsx(FcrIcon, {
+        type: FcrIconType.FCR_ZOOMIN,
+        size: 22,
+        colors: {
+          iconPrimary: isMinimum ? 'gray' : 'var(--fcr_ui_scene_icontext1)'
+        }
+      })
+    })
+  });
+});
+export default FcrScreenShareZoomInBtn;

package/lib-es/modules/share-screen/components/control-bar/items/zoom-out-btn/index.js

@@ -0,0 +1,25 @@
+import { FcrIcon } from 'agora-ui-foundation/lib/components/icon';
+import { FcrIconType } from 'agora-ui-foundation/lib/components/icon/type';
+import { FcrToolTip } from 'agora-ui-foundation/lib/components/tooltip';
+import { transI18n } from 'agora-ui-foundation/lib/i18n';
+import { observer } from 'mobx-react';
+import { jsx as _jsx } from "react/jsx-runtime";
+var FcrScreenShareZoomOutBtn = observer(function (props) {
+  var isMaxmum = props.isMaxmum,
+    zoomOut = props.zoomOut;
+  return /*#__PURE__*/_jsx(FcrToolTip, {
+    content: isMaxmum ? transI18n('fmt_screenshare_whiteboard_tips_alreadymaximumsize') : transI18n('fmt_screenshare_whiteboard_button_enlarge'),
+    children: /*#__PURE__*/_jsx("div", {
+      className: "whiteboard-controlbar-item",
+      onClick: zoomOut,
+      children: /*#__PURE__*/_jsx(FcrIcon, {
+        type: FcrIconType.FCR_ZOOMOUT,
+        size: 22,
+        colors: {
+          iconPrimary: isMaxmum ? 'gray' : 'var(--fcr_ui_scene_icontext1)'
+        }
+      })
+    })
+  });
+});
+export default FcrScreenShareZoomOutBtn;

package/lib-es/modules/share-screen/components/selection/index.css

@@ -0,0 +1,73 @@
+.draggable {
+  -webkit-app-region: drag;
+}
+
+.share-selection-window-control {
+  width: 100%;
+  display: flex;
+  flex-direction: row-reverse;
+}
+
+.share-selection-window-control button {
+  -webkit-app-region: no-drag;
+}
+
+.share-selection-window {
+  width: 100%;
+  height: 500px;
+  overflow: hidden;
+  -webkit-app-region: no-drag;
+  background-color: #fff;
+  /* border-radius: var(--fcr_cornerradius_l); */
+  display: flex;
+  flex-direction: column;
+}
+
+.share-selection-window__share-content {
+  width: 100%;
+  height: 458px;
+  padding: 10px 20px;
+  overflow-y: scroll;
+  -webkit-app-region: no-drag;
+}
+
+.share-selection-window__share-content::--webkit-scrollbar {
+  display: none;
+}
+
+.share-selection-window__header {
+  height: 46px;
+}
+
+.share-selection-window__footer {
+  width: 100%;
+  border-top: 1px solid var(--fcr_ui_scene_line1);
+  background-color: var(--fcr_mobile_ui_scene_color_popup_fill2);
+  display: flex;
+  flex-direction: row;
+  gap: 30px;
+  align-items: center;
+  height: 46px;
+  padding: 0 10px 0 20px;
+}
+
+.share-selection-window__footer .share-selection-window__footer-action {
+  width: 100%;
+  background-color: var(--fcr_mobile_ui_scene_color_popup_fill2);
+  display: flex;
+  flex-direction: row;
+  gap: 30px;
+}
+
+.share-selection-window__footer-start-share-txt {
+  color: var(--fcr_ui_scene_white10);
+  font-size: 12px;
+}
+
+.share-selection-window__share-windows,
+.share-selection-window__share-application {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  gap: 8px;
+}

package/lib-es/modules/share-screen/components/selection/index.js

@@ -0,0 +1,222 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+import "core-js/modules/es.array.map.js";
+import "core-js/modules/es.symbol.js";
+import "core-js/modules/es.array.filter.js";
+import "core-js/modules/es.array.for-each.js";
+import "core-js/modules/es.array.push.js";
+import "core-js/modules/es.object.define-properties.js";
+import "core-js/modules/es.object.define-property.js";
+import "core-js/modules/es.object.get-own-property-descriptor.js";
+import "core-js/modules/es.object.get-own-property-descriptors.js";
+import "core-js/modules/es.object.keys.js";
+import "core-js/modules/es.object.to-string.js";
+import "core-js/modules/esnext.iterator.constructor.js";
+import "core-js/modules/esnext.iterator.filter.js";
+import "core-js/modules/esnext.iterator.for-each.js";
+import "core-js/modules/esnext.iterator.map.js";
+import "core-js/modules/web.dom-collections.for-each.js";
+import { FcrCard } from 'agora-ui-foundation/lib/components/card';
+import { FcrButton } from 'agora-ui-foundation/lib/components/button';
+import { observer } from 'mobx-react';
+import { useCallback, useContext, useEffect, useMemo } from 'react';
+import { uint8ArrayToImageData } from '../../../../utilities/tools';
+import { FcrToolTip } from 'agora-ui-foundation/lib/components/tooltip';
+import { useI18n } from 'agora-ui-foundation/lib/i18n';
+import { StoreContext } from '../../store.base';
+import { FcrIcon } from 'agora-ui-foundation/lib/components/icon';
+import { FcrShareScenario } from '../share-scenario';
+import { ShareAudio } from 'agora-ui-foundation/lib/components/room-screen-share-state-bar/share-audio';
+import './index.css';
+import { FcrUIShareType } from '../../type';
+import { FcrIconType } from 'agora-ui-foundation/lib/components/icon/type';
+import { isWindows } from 'agora-foundation/lib/utilities/env';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+export var ShareSelection = observer(function () {
+  var _useContext = useContext(StoreContext),
+    handleSelectionOpen = _useContext.handleSelectionOpen;
+  useEffect(function () {
+    handleSelectionOpen();
+  }, []);
+  return /*#__PURE__*/_jsxs("div", {
+    className: "share-selection-window",
+    children: [/*#__PURE__*/_jsx(ShareSelectionList, {}), /*#__PURE__*/_jsx(ShareSelectionFooter, {})]
+  });
+});
+var ShareSelectionList = observer(function () {
+  var _useContext2 = useContext(StoreContext),
+    displayList = _useContext2.displayList,
+    applicationList = _useContext2.applicationList;
+  var transI18n = useI18n();
+  var isApplicationListEmpty = applicationList.length === 0;
+  return /*#__PURE__*/_jsxs("div", {
+    className: "share-selection-window__share-content",
+    children: [/*#__PURE__*/_jsxs("div", {
+      className: "share-selection-window__share-windows share-selection-window__share-card",
+      children: [/*#__PURE__*/_jsx(WhiteboardCard, {
+        id: FcrUIShareType.WHITEBOARD
+      }), displayList.map(function (item) {
+        return /*#__PURE__*/_jsx(ScreenCard, _objectSpread({}, item), item.id);
+      })]
+    }), !isApplicationListEmpty && /*#__PURE__*/_jsxs("div", {
+      children: [/*#__PURE__*/_jsx("div", {
+        style: {
+          marginTop: '38px'
+        },
+        children: transI18n('fmt_uimanager_labels_Application')
+      }), /*#__PURE__*/_jsx("div", {
+        className: "share-selection-window__share-application share-selection-window__share-card",
+        children: applicationList.map(function (item) {
+          return /*#__PURE__*/_jsx(ScreenCard, _objectSpread({}, item), item.id);
+        })
+      })]
+    })]
+  });
+});
+var WhiteboardCard = observer(function (_ref) {
+  var id = _ref.id;
+  var _useContext3 = useContext(StoreContext),
+    startShareBoard = _useContext3.startShareBoard,
+    stopShareBoard = _useContext3.stopShareBoard,
+    selectedShareItem = _useContext3.selectedShareItem,
+    setSelectedItem = _useContext3.setSelectedItem,
+    isAlreadyOpened = _useContext3.isAlreadyOpened,
+    canStopOtherBoard = _useContext3.canStopOtherBoard;
+  var transI18n = useI18n();
+  var handleSetSelectedItem = useCallback(function () {
+    setSelectedItem({
+      id: id,
+      type: FcrUIShareType.WHITEBOARD
+    });
+  }, [id]);
+  return /*#__PURE__*/_jsx(FcrCard, {
+    title: transI18n('fmt_share_options_whiteboard'),
+    active: (selectedShareItem === null || selectedShareItem === void 0 ? void 0 : selectedShareItem.id) === id,
+    onCardClick: handleSetSelectedItem,
+    onDoubleClickCard: startShareBoard,
+    disabled: isAlreadyOpened,
+    content: canStopOtherBoard ? /*#__PURE__*/_jsx(FcrToolTip, {
+      trigger: "hover",
+      content: transI18n('fmt_screenshare_tips_alreadyopened'),
+      children: /*#__PURE__*/_jsx(FcrButton, {
+        styleType: "danger",
+        size: "XXS",
+        shape: "rounded",
+        onClick: stopShareBoard,
+        children: transI18n('fmt_screenshare_button_stopshare')
+      })
+    }) : /*#__PURE__*/_jsx(FcrIcon, {
+      type: FcrIconType.FCR_WHITEBOARD,
+      size: 48,
+      colors: {
+        iconPrimary: '#4262FF'
+      }
+    })
+  });
+});
+var ScreenCard = observer(function (_ref2) {
+  var title = _ref2.title,
+    id = _ref2.id,
+    image = _ref2.image,
+    imageWidth = _ref2.imageWidth,
+    imageHeight = _ref2.imageHeight,
+    type = _ref2.type,
+    bounds = _ref2.bounds;
+  var _useContext4 = useContext(StoreContext),
+    startShareScreen = _useContext4.startShareScreen,
+    selectedShareItem = _useContext4.selectedShareItem,
+    setSelectedItem = _useContext4.setSelectedItem;
+  var handleSetSelectedItem = useCallback(function () {
+    setSelectedItem({
+      id: id,
+      type: type,
+      bounds: bounds
+    });
+  }, [id, type, bounds]);
+  return /*#__PURE__*/_jsx(FcrCard, {
+    title: title,
+    active: (selectedShareItem === null || selectedShareItem === void 0 ? void 0 : selectedShareItem.id) === id,
+    onCardClick: handleSetSelectedItem,
+    onDoubleClickCard: startShareScreen,
+    content: /*#__PURE__*/_jsx(ThumbnailRender, {
+      image: image,
+      width: imageWidth,
+      height: imageHeight,
+      title: title
+    })
+  });
+});
+var ThumbnailRender = function ThumbnailRender(_ref3) {
+  var image = _ref3.image,
+    _ref3$width = _ref3.width,
+    width = _ref3$width === void 0 ? 100 : _ref3$width,
+    _ref3$height = _ref3.height,
+    height = _ref3$height === void 0 ? 100 : _ref3$height,
+    title = _ref3.title;
+  var data = useMemo(function () {
+    return uint8ArrayToImageData({
+      buffer: image,
+      width: width,
+      height: height,
+      isWindows: isWindows()
+    });
+  }, [image]);
+  return /*#__PURE__*/_jsx("img", {
+    src: data,
+    alt: title
+  });
+};
+var ShareSelectionFooter = observer(function () {
+  var _useContext5 = useContext(StoreContext),
+    startShareScreen = _useContext5.startShareScreen,
+    isSharingWithAudio = _useContext5.isSharingWithAudio,
+    isSharingInSmoothMode = _useContext5.isSharingInSmoothMode,
+    audioShareMode = _useContext5.audioShareMode,
+    setShareWithAudioState = _useContext5.setShareWithAudioState,
+    setShareInSmoothMode = _useContext5.setShareInSmoothMode,
+    setShareAudioMode = _useContext5.setShareAudioMode,
+    isWhiteboardSelected = _useContext5.isWhiteboardSelected,
+    startShareBoard = _useContext5.startShareBoard,
+    isAlreadyOpened = _useContext5.isAlreadyOpened;
+  var transI18n = useI18n();
+  var handleSwitchAudioType = function handleSwitchAudioType(mode) {
+    setShareAudioMode(mode);
+  };
+  var handleToggleShareAudio = function handleToggleShareAudio(enable) {
+    setShareWithAudioState(enable);
+  };
+  var handleToggleScenarioType = function handleToggleScenarioType(enable) {
+    setShareInSmoothMode(enable);
+  };
+  return /*#__PURE__*/_jsxs("div", {
+    className: "share-selection-window__footer",
+    children: [/*#__PURE__*/_jsx("div", {
+      className: "share-selection-window__footer-action",
+      children: !isWhiteboardSelected && /*#__PURE__*/_jsxs(_Fragment, {
+        children: [/*#__PURE__*/_jsx(ShareAudio, {
+          shareWithAudio: isSharingWithAudio,
+          toggleShareWithAudio: handleToggleShareAudio,
+          currentAudioChannel: audioShareMode,
+          onSwitchAudioChannel: handleSwitchAudioType
+        }), /*#__PURE__*/_jsx("div", {
+          className: "share-strategy-checkbox",
+          children: /*#__PURE__*/_jsx(FcrShareScenario, {
+            isSmoothMode: isSharingInSmoothMode,
+            toggleShareWithScenarioType: handleToggleScenarioType
+          })
+        })]
+      })
+    }), /*#__PURE__*/_jsx(FcrButton, {
+      type: "primary",
+      shape: "rounded",
+      size: "XS",
+      disabled: isWhiteboardSelected && isAlreadyOpened,
+      onClick: isWhiteboardSelected ? startShareBoard : startShareScreen,
+      children: /*#__PURE__*/_jsx("span", {
+        className: "share-selection-window__footer-start-share-txt",
+        children: transI18n('fmt_screenshare_window_button_start')
+      })
+    })]
+  });
+});