agora-ui-foundation 1.0.0

package/lib/components/room-screen-share-state-bar/share-action-nav/index.js

@@ -0,0 +1,71 @@
+"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.ShareActionNav = void 0;
+var _i18n = require("../../../i18n");
+var _divider = _interopRequireDefault(require("../../divider"));
+var _type = require("../../icon/type");
+var _tooltipsButton = require("../../tooltips-button");
+var _device = require("../device");
+var _meetingSecurity = require("../meeting-security");
+var _more = require("../more");
+var _participants = require("../participants");
+var _shareAudio = require("../share-audio");
+require("./index.css");
+var _jsxRuntime = require("react/jsx-runtime");
+var ShareActionNav = exports.ShareActionNav = function ShareActionNav(props) {
+  var t = (0, _i18n.useI18n)();
+  var className = props.className,
+    _props$onMicrophoneDe = props.onMicrophoneDevicePopoverVisibleChange,
+    onMicrophoneDevicePopoverVisibleChange = _props$onMicrophoneDe === void 0 ? function () {} : _props$onMicrophoneDe,
+    _props$onCameraDevice = props.onCameraDevicePopoverVisibleChange,
+    onCameraDevicePopoverVisibleChange = _props$onCameraDevice === void 0 ? function () {} : _props$onCameraDevice;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: "share-action-nav share-action-nav__can-draggable ".concat(className),
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "share-action-nav__media-control-group",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_device.MicrophoneDevice, {
+        onMicrophoneDevicePopoverVisibleChange: onMicrophoneDevicePopoverVisibleChange
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_device.CameraDevice, {
+        onCameraDevicePopoverVisibleChange: onCameraDevicePopoverVisibleChange
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_divider["default"], {
+      style: {
+        marginRight: 24,
+        height: '20px',
+        marginLeft: 30
+      }
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "share-action-nav__meeting-control-group",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_meetingSecurity.MeetingSecurity, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_participants.ParticipantButton, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_divider["default"], {
+        style: {
+          margin: '0 8px',
+          height: '20px'
+        }
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltipsButton.FrcTooltipButton, {
+        tooltip: {
+          content: t('fmt_screenshare_controlbar_button_newScreenshare'),
+          icon: {
+            type: _type.FcrIconType.FCR_SCREENSHARING_1,
+            size: 32,
+            colors: {
+              iconPrimary: 'var(--fcr_web_ui_scene_mainicon1)'
+            }
+          }
+        },
+        withPopover: false
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_more.More, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_divider["default"], {
+        style: {
+          margin: '0 8px',
+          height: '20px'
+        }
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_shareAudio.ShareAudio, {
+        shareWithAudio: false
+      })]
+    })]
+  });
+};

package/lib/components/room-screen-share-state-bar/share-audio/index.css

@@ -0,0 +1,66 @@
+.share-audio-checkbox {
+  display: flex;
+  flex-direction: row;
+  gap: 0;
+}
+
+.share-audio-action-button {
+  height: 36px;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-items: center;
+  justify-content: center;
+}
+
+.share-selectrion .fcr-checkbox-label {
+  color: var(--fcr_ui_scene_icontext1);
+}
+.share-audio-popover {
+  /* background-color: var(--fcr_mobile_ui_scene_color_popup_fill2); */
+}
+.share-audio-popover .fcr-tooltip-content {
+  border: 0.5px solid var(--fcr_ui_scene_line1);
+  border-radius: var(--fcr_cornerradius_l);
+  background-color: var(--fcr_mobile_ui_scene_color_popup_fill2);
+}
+.share-audio-popover .fcr-radio:hover {
+  background-color: var(--fcr_web_ui_scene_hover);
+}
+.share-audio-popover .fcr-radio {
+  width: 100%;
+  border-radius: 4px;
+  height: 32px;
+  display: flex;
+  color: var(--fcr_ui_scene_icontext1);
+  align-items: center;
+  gap: 8px;
+  padding: 6px;
+  box-sizing: border-box;
+}
+
+.share-audio-popover .fcr-radio-transparent .fcr-radio-label {
+  color: var(--fcr_ui_scene_icontext1);
+}
+
+.share-audio-popover
+  .fcr-radio-transparent
+  .fcr-radio-input-wrapper:has(> input:checked)
+  ~ .fcr-radio-label {
+  color: var(--fcr_web_ui_scene_mainicon2);
+}
+
+.share-audio-popover
+  .fcr-radio-transparent
+  .fcr-radio-input-wrapper
+  > input:checked
+  ~ .fcr-radio-label {
+  color: var(--fcr_web_ui_scene_mainicon2);
+}
+
+/* .radio-label-active {
+  color: var(--fcr_web_ui_scene_mainicon2);
+}
+.radio-label-normal {
+  color: var(--fcr_ui_scene_icontext1);
+} */

package/lib/components/room-screen-share-state-bar/share-audio/index.d.ts

@@ -0,0 +1,12 @@
+import './index.css';
+export declare enum AudioProcessingChannel {
+    MONO = "1",
+    STEREO = "2"
+}
+export interface ShareAudioProps {
+    shareWithAudio: boolean;
+    currentAudioChannel?: AudioProcessingChannel;
+    onSwitchAudioChannel?: (target: AudioProcessingChannel) => void;
+    toggleShareWithAudio?: (target: boolean) => void;
+}
+export declare const ShareAudio: (props: ShareAudioProps) => import("react/jsx-runtime").JSX.Element;

package/lib/components/room-screen-share-state-bar/share-audio/index.js

@@ -0,0 +1,149 @@
+"use strict";
+
+require("core-js/modules/es.symbol.js");
+require("core-js/modules/es.array.filter.js");
+require("core-js/modules/es.array.for-each.js");
+require("core-js/modules/es.array.iterator.js");
+require("core-js/modules/es.array.push.js");
+require("core-js/modules/es.object.define-properties.js");
+require("core-js/modules/es.object.define-property.js");
+require("core-js/modules/es.object.get-own-property-descriptor.js");
+require("core-js/modules/es.object.get-own-property-descriptors.js");
+require("core-js/modules/es.object.keys.js");
+require("core-js/modules/es.object.to-string.js");
+require("core-js/modules/es.string.iterator.js");
+require("core-js/modules/es.weak-map.js");
+require("core-js/modules/web.dom-collections.for-each.js");
+require("core-js/modules/web.dom-collections.iterator.js");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ShareAudio = exports.AudioProcessingChannel = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _i18n = require("../../../i18n");
+var _checkbox = require("../../checkbox");
+var _icon = require("../../icon");
+var _type = require("../../icon/type");
+var _popover = require("../../popover");
+var _radio = require("../../radio");
+var _tooltip = require("../../tooltip");
+require("./index.css");
+var _jsxRuntime = require("react/jsx-runtime");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+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) { (0, _defineProperty2["default"])(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; }
+var AudioProcessingChannel = exports.AudioProcessingChannel = /*#__PURE__*/function (AudioProcessingChannel) {
+  AudioProcessingChannel["MONO"] = "1";
+  AudioProcessingChannel["STEREO"] = "2";
+  return AudioProcessingChannel;
+}({});
+var ShareAudio = exports.ShareAudio = function ShareAudio(props) {
+  var t = (0, _i18n.useI18n)();
+  var shareWithAudio = props.shareWithAudio,
+    _props$currentAudioCh = props.currentAudioChannel,
+    currentAudioChannel = _props$currentAudioCh === void 0 ? AudioProcessingChannel.MONO : _props$currentAudioCh,
+    toggleShareWithAudio = props.toggleShareWithAudio;
+  var _React$useState = _react["default"].useState(false),
+    _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
+    popoverVisible = _React$useState2[0],
+    setVisible = _React$useState2[1];
+  var handlerVisibleChange = function handlerVisibleChange(visible) {
+    setVisible(visible);
+  };
+  (0, _react.useEffect)(function () {
+    function handleBlur(event) {
+      setVisible(false);
+    }
+    window.addEventListener('blur', handleBlur);
+    return function () {
+      window.removeEventListener('blur', handleBlur);
+    };
+  }, []);
+  var shareAudioTips = (0, _react.useMemo)(function () {
+    if (!shareWithAudio) {
+      return t('fmt_screenshare_window_checkbox_shareAudio');
+    }
+    if (currentAudioChannel === AudioProcessingChannel.STEREO) {
+      return t('fmt_uimanager_option_dualchannel');
+    }
+    return t('fmt_uimanager_option_Sharedmono');
+  }, [shareWithAudio, currentAudioChannel]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: "share-audio-checkbox",
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip.FcrToolTip, {
+      content: shareAudioTips,
+      trigger: "hover",
+      placement: "top",
+      mouseEnterDelay: 0,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "share-audio-action-button share-selectrion",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_checkbox.FcrCheckbox, {
+          checked: shareWithAudio,
+          label: t('fmt_screenshare_window_checkbox_shareAudio'),
+          styleType: "brand",
+          onChange: toggleShareWithAudio
+        })
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_popover.FcrPopover, {
+      overlayClassName: "share-audio-popover",
+      overlayInnerStyle: {
+        border: 0,
+        boxShadow: '0px 0px 15px var(--fcr_web_light_dropup_m)',
+        borderRadius: 'var(--fcr_cornerradius_l)',
+        padding: '4px 6px'
+      },
+      content: /*#__PURE__*/(0, _jsxRuntime.jsx)(ShareAudioOptions, _objectSpread({}, props)),
+      trigger: "click",
+      visible: popoverVisible,
+      onVisibleChange: handlerVisibleChange,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "share-audio-action-button share-selectrion",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+          type: _type.FcrIconType.FCR_DROPUP4,
+          size: 24,
+          colors: {
+            iconPrimary: 'var(--fcr_web_ui_scene_mainicon1)'
+          }
+        })
+      })
+    })]
+  });
+};
+var ShareAudioOptions = function ShareAudioOptions(props) {
+  var _props$onSwitchAudioC = props.onSwitchAudioChannel,
+    onSwitchAudioChannel = _props$onSwitchAudioC === void 0 ? function () {} : _props$onSwitchAudioC,
+    _props$currentAudioCh2 = props.currentAudioChannel,
+    currentAudioChannel = _props$currentAudioCh2 === void 0 ? AudioProcessingChannel.MONO : _props$currentAudioCh2;
+  var t = (0, _i18n.useI18n)();
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: "share-audio-options share-audio-not-draggable",
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_radio.FcrRadioGroup, {
+      defaultValue: currentAudioChannel,
+      options: [{
+        label: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: currentAudioChannel === AudioProcessingChannel.MONO ? 'radio-label-active' : 'radio-label-normal',
+          children: t('fmt_uimanager_option_Monochannel')
+        }),
+        value: AudioProcessingChannel.MONO,
+        iconColor: 'var(--fcr_ui_scene_ramp_brand6)',
+        styleType: 'transparent'
+      }, {
+        label: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: currentAudioChannel === AudioProcessingChannel.STEREO ? 'radio-label-active' : 'radio-label-normal',
+          children: t('fmt_uimanager_option_Stereo')
+        }),
+        value: AudioProcessingChannel.STEREO,
+        iconColor: 'var(--fcr_ui_scene_ramp_brand6)',
+        styleType: 'transparent'
+      }],
+      onChange: function onChange(value) {
+        onSwitchAudioChannel(value);
+      }
+    })
+  });
+};

package/lib/components/room-screen-share-state-bar/share-screen-button/index.d.ts

@@ -0,0 +1,5 @@
+interface ShareScreenProps {
+    onCreateNewShareButtonClick: () => void;
+}
+export declare const ShareScreenButton: (props: ShareScreenProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/components/room-screen-share-state-bar/share-screen-button/index.js

@@ -0,0 +1,28 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ShareScreenButton = void 0;
+var _i18n = require("../../../i18n");
+var _type = require("../../icon/type");
+var _tooltipsButton = require("../../tooltips-button");
+var _jsxRuntime = require("react/jsx-runtime");
+var ShareScreenButton = exports.ShareScreenButton = function ShareScreenButton(props) {
+  var t = (0, _i18n.useI18n)();
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltipsButton.FrcTooltipButton, {
+    tooltip: {
+      content: t('fmt_screenshare_controlbar_button_newScreenshare'),
+      icon: {
+        type: _type.FcrIconType.FCR_SCREENSHARING_1,
+        size: 32,
+        colors: {
+          iconPrimary: 'var(--fcr_web_ui_scene_mainicon1)'
+        }
+      }
+    },
+    onTooltipButtonClick: props.onCreateNewShareButtonClick,
+    withPopover: false
+  });
+};

package/lib/components/room-screen-share-state-bar/share-screen-content-hint/index.css

@@ -0,0 +1,23 @@
+.share-screen-content-hint {
+  display: flex;
+  flex-direction: row;
+  gap: 0;
+}
+
+.share-screen-content-hint:hover {
+  /* background-color: var(--fcr_ui_scene_line1); */
+}
+.share-screen-content-hint__action-button {
+  width: 100%;
+  height: 36px;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-items: center;
+  justify-content: center;
+}
+
+
+.share-screen-content-hint .fcr-checkbox-label{
+  color: var(--fcr_ui_scene_icontext1);
+}

package/lib/components/room-screen-share-state-bar/share-screen-content-hint/index.d.ts

@@ -0,0 +1,6 @@
+import './index.css';
+export interface ShareScreenContentHintProps {
+    isFluent: boolean;
+    onChangeHint: (checked: boolean) => void;
+}
+export declare const ShareScreenContentHint: (props: ShareScreenContentHintProps) => import("react/jsx-runtime").JSX.Element;

package/lib/components/room-screen-share-state-bar/share-screen-content-hint/index.js

@@ -0,0 +1,35 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ShareScreenContentHint = void 0;
+var _i18n = require("../../../i18n");
+var _checkbox = require("../../checkbox");
+var _tooltip = require("../../tooltip");
+require("./index.css");
+var _jsxRuntime = require("react/jsx-runtime");
+var ShareScreenContentHint = exports.ShareScreenContentHint = function ShareScreenContentHint(props) {
+  var isFluent = props.isFluent,
+    onChangeHint = props.onChangeHint;
+  var t = (0, _i18n.useI18n)();
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: "share-screen-content-hint",
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip.FcrToolTip, {
+      content: t('fmt_uimanager_option_Improvefluency'),
+      trigger: "hover",
+      placement: "top",
+      mouseEnterDelay: 0,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "share-screen-content-hint__action-button share-audio-button",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_checkbox.FcrCheckbox, {
+          onChange: onChangeHint,
+          label: t('fmt_uimanager_option_Fluencypriority'),
+          styleType: "brand",
+          checked: isFluent
+        })
+      })
+    })
+  });
+};

package/lib/components/room-screen-share-state-bar/share-screen-content-hint/index.stories.d.ts

@@ -0,0 +1,6 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { ShareScreenContentHint } from './index';
+declare const meta: Meta;
+type Story = StoryObj<typeof ShareScreenContentHint>;
+export declare const Basic: Story;
+export default meta;

package/lib/components/room-screen-share-state-bar/share-screen-content-hint/index.stories.js

@@ -0,0 +1,49 @@
+"use strict";
+
+require("core-js/modules/es.symbol.js");
+require("core-js/modules/es.array.filter.js");
+require("core-js/modules/es.array.for-each.js");
+require("core-js/modules/es.array.push.js");
+require("core-js/modules/es.object.define-properties.js");
+require("core-js/modules/es.object.define-property.js");
+require("core-js/modules/es.object.get-own-property-descriptor.js");
+require("core-js/modules/es.object.get-own-property-descriptors.js");
+require("core-js/modules/es.object.keys.js");
+require("core-js/modules/es.object.to-string.js");
+require("core-js/modules/web.dom-collections.for-each.js");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.Basic = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _index = require("./index");
+var _jsxRuntime = require("react/jsx-runtime");
+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) { (0, _defineProperty2["default"])(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; }
+var meta = {
+  title: 'Components/ShareScreenContentHint',
+  tags: ['autodocs'],
+  argTypes: {
+    isFluent: {
+      control: {
+        type: 'boolean'
+      }
+    },
+    onChangeHint: {
+      action: 'onChangeHint'
+    }
+  }
+};
+var Basic = exports.Basic = {
+  args: {
+    isFluent: true,
+    onChangeHint: function onChangeHint(checked) {
+      console.log(checked);
+    }
+  },
+  render: function render(props) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.ShareScreenContentHint, _objectSpread({}, props));
+  }
+};
+var _default = exports["default"] = meta;

package/lib/components/room-screen-share-state-bar/share-state-bar/drag-icon.css

@@ -0,0 +1,3 @@
+.drag-icon {
+  transform: rotate(90deg);
+}

package/lib/components/room-screen-share-state-bar/share-state-bar/drag-icon.d.ts

@@ -0,0 +1,2 @@
+import './drag-icon.css';
+export declare const DragIcon: () => import("react/jsx-runtime").JSX.Element;

package/lib/components/room-screen-share-state-bar/share-state-bar/drag-icon.js

@@ -0,0 +1,31 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DragIcon = void 0;
+var _i18n = require("../../../i18n");
+var _icon = require("../../icon");
+var _type = require("../../icon/type");
+var _tooltip = require("../../tooltip");
+require("./drag-icon.css");
+var _jsxRuntime = require("react/jsx-runtime");
+var DragIcon = exports.DragIcon = function DragIcon() {
+  var t = (0, _i18n.useI18n)();
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip.FcrToolTip, {
+    content: t('fmt_popup_button_drag'),
+    trigger: "hover",
+    mouseEnterDelay: 0,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+        type: _type.FcrIconType.FCR_WHITEBOARD_MOVE,
+        className: "drag-icon",
+        colors: {
+          iconPrimary: 'var(--fcr_ui_scene_black8)'
+        },
+        size: 20
+      })
+    })
+  });
+};

package/lib/components/room-screen-share-state-bar/share-state-bar/index.css

@@ -0,0 +1,39 @@
+.share-state-bar {
+  background-color: var(--fcr_web_ui_scene_fill2);
+  border-radius: var(--fcr_cornerradius_s);
+  gap: 10px;
+  height: 34px;
+  width: fit-content;
+  padding: 10px;
+}
+
+.share-state-bar,
+.share-state-bar__state {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-items: center;
+}
+
+.share-state-bar__state {
+  gap: 10px;
+}
+
+.share-state-bar__share_screen_preview {
+  width: 58px;
+  height: 34px;
+}
+
+.share-state-bar__stop-share {
+  /* background-color: var(--fcr_ui_scene_ramp_red6); */
+  height: 24px;
+  color: var(--fcr_ui_scene_white10);
+  font-size: 12px;
+  border-radius: var(--fcr_cornerradius_xs);
+  cursor: pointer;
+}
+
+.share-state-bar__share_screen_preview {
+  background-color: #d9d9d9;
+}
+

package/lib/components/room-screen-share-state-bar/share-state-bar/index.d.ts

@@ -0,0 +1,4 @@
+import './index.css';
+export interface ShareStateBarProps {
+}
+export declare const ShareStateBar: () => import("react/jsx-runtime").JSX.Element;

package/lib/components/room-screen-share-state-bar/share-state-bar/index.js

@@ -0,0 +1,53 @@
+"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.ShareStateBar = void 0;
+var _i18n = require("../../../i18n");
+var _button = require("../../button");
+var _divider = _interopRequireDefault(require("../../divider"));
+var _icon = require("../../icon");
+var _type = require("../../icon/type");
+var _dragIcon = require("./drag-icon");
+require("./index.css");
+var _jsxRuntime = require("react/jsx-runtime");
+var ShareStateBar = exports.ShareStateBar = function ShareStateBar() {
+  var t = (0, _i18n.useI18n)();
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: "share-state-bar",
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_dragIcon.DragIcon, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_divider["default"], {
+      type: "vertical"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "share-state-bar__state",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+        type: _type.FcrIconType.FCR_VIDEO_SHARESCREEN,
+        size: 22,
+        colors: {
+          iconPrimary: 'var(--fcr_ui_scene_ramp_green6)'
+        }
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        children: t('fmt_modules_labels_sharing')
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "share-state-bar__share_screen_preview"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.FcrButton, {
+        type: "primary",
+        styleType: "danger",
+        size: "XXS",
+        shape: "rounded",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          className: "share-state-bar__stop-share fcr-flex fcr-items-center fcr-justify-center",
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+            type: _type.FcrIconType.FCR_RECORDING_STOP,
+            size: 20,
+            colors: {
+              iconPrimary: 'var(--fcr_ui_scene_white10)'
+            }
+          }), t('fmt_screenshare_controlbar_button_stop')]
+        })
+      })]
+    })]
+  });
+};

package/lib/components/room-screen-share-state-bar/share-state-bar/index.stories.d.ts

@@ -0,0 +1,6 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { ShareStateBar } from './index';
+declare const meta: Meta;
+type Story = StoryObj<typeof ShareStateBar>;
+export declare const Basic: Story;
+export default meta;

package/lib/components/room-screen-share-state-bar/share-state-bar/index.stories.js

@@ -0,0 +1,22 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.Basic = void 0;
+var _index = require("./index");
+var _jsxRuntime = require("react/jsx-runtime");
+var meta = {
+  title: 'Components/ShareStateBarWeb',
+  tags: ['autodocs'],
+  argTypes: {}
+};
+var Basic = exports.Basic = {
+  args: {},
+  // render: (props: PropsWithChildren<ShareSelectionWindowProps>) =>
+  render: function render() {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.ShareStateBar, {});
+  }
+};
+var _default = exports["default"] = meta;