agora-ui-foundation 1.0.0

package/lib/components/radio/index.js

@@ -0,0 +1,113 @@
+"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.FcrRadioGroup = exports.FcrRadio = void 0;
+require("core-js/modules/es.array.map.js");
+require("core-js/modules/es.function.name.js");
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = require("react");
+require("./index.css");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _uuid = require("uuid");
+var _icon = require("../icon");
+var _type = require("../icon/type");
+var _jsxRuntime = require("react/jsx-runtime");
+var _excluded = ["label", "onChange", "styleType", "name", "value", "checked", "onClick", "iconColor"];
+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 FcrRadio = exports.FcrRadio = function FcrRadio(props) {
+  var _groupContext$value;
+  var groupContext = (0, _react.useContext)(RadioGroupContext);
+  var label = props.label,
+    _onChange = props.onChange,
+    _props$styleType = props.styleType,
+    styleType = _props$styleType === void 0 ? 'brand' : _props$styleType,
+    name = props.name,
+    value = props.value,
+    checked = props.checked,
+    onClick = props.onClick,
+    _props$iconColor = props.iconColor,
+    iconColor = _props$iconColor === void 0 ? styleType !== 'white' ? 'var(--fcr_ui_scene_white10)' : 'var(--fcr_ui_scene_ramp_brand6)' : _props$iconColor,
+    inputProps = (0, _objectWithoutProperties2["default"])(props, _excluded);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("label", {
+    className: (0, _classnames["default"])('fcr-radio', "fcr-radio-".concat(styleType)),
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
+      className: "fcr-radio-input-wrapper",
+      onClick: onClick,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("input", _objectSpread(_objectSpread({
+        name: name
+      }, inputProps), {}, {
+        onClick: function onClick(e) {
+          e.stopPropagation();
+        },
+        checked: ((_groupContext$value = groupContext === null || groupContext === void 0 ? void 0 : groupContext.value) !== null && _groupContext$value !== void 0 ? _groupContext$value : null) === value || checked || false,
+        onChange: function onChange(e) {
+          var _groupContext$onChang;
+          groupContext === null || groupContext === void 0 || (_groupContext$onChang = groupContext.onChange) === null || _groupContext$onChang === void 0 || _groupContext$onChang.call(groupContext, value);
+          _onChange === null || _onChange === void 0 || _onChange(e.target.checked);
+        },
+        type: "radio"
+      })), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        className: (0, _classnames["default"])('fcr-radio-inner', {
+          'fcr-btn-click-effect': styleType !== 'transparent'
+        }),
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+          type: _type.FcrIconType.FCR_CHECKBOX_CHECK,
+          colors: {
+            iconPrimary: iconColor
+          },
+          size: 10
+        })
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+      className: "fcr-radio-label",
+      onClick: onClick,
+      children: label
+    })]
+  });
+};
+var RadioGroupContext = /*#__PURE__*/(0, _react.createContext)(null);
+var FcrRadioGroup = exports.FcrRadioGroup = function FcrRadioGroup(props) {
+  var children = props.children,
+    options = props.options,
+    defaultValue = props.defaultValue;
+  var _useState = (0, _react.useState)(defaultValue || props.value),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    value = _useState2[0],
+    setValue = _useState2[1];
+  (0, _react.useEffect)(function () {
+    props.value && setValue(props.value);
+  }, [props.value]);
+  var onRadioChange = function onRadioChange(value) {
+    var _props$onChange;
+    if (!props.value) {
+      value && setValue(value);
+    }
+    (_props$onChange = props.onChange) === null || _props$onChange === void 0 || _props$onChange.call(props, value);
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(RadioGroupContext.Provider, {
+    value: _objectSpread(_objectSpread({}, props), {}, {
+      value: value,
+      onChange: onRadioChange
+    }),
+    children: options ? options.map(function (props) {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(FcrRadio, _objectSpread({}, props), props.value || (0, _uuid.v4)());
+    }) : children
+  });
+};

package/lib/components/radio/index.stories.d.ts

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

package/lib/components/radio/index.stories.js

@@ -0,0 +1,39 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.Basic = void 0;
+var _ = require(".");
+var _jsxRuntime = require("react/jsx-runtime");
+var meta = {
+  title: 'Components/Radio',
+  tags: ['autodocs'],
+  args: {}
+};
+var Basic = exports.Basic = {
+  render: function render() {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_.FcrRadioGroup, {
+        defaultValue: 'a',
+        onChange: function onChange(value) {
+          console.log(value);
+        },
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_.FcrRadio, {
+          value: "a",
+          label: "Agree terms of service"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.FcrRadio, {
+          value: "b",
+          styleType: "white",
+          label: "Agree terms of service"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.FcrRadio, {
+          value: "b",
+          styleType: "transparent",
+          label: "Agree terms of service"
+        })]
+      })
+    });
+  }
+};
+var _default = exports["default"] = meta;

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

@@ -0,0 +1,6 @@
+interface CameraStateProps {
+    isCameraMuted: boolean;
+    size?: number;
+}
+export declare const CameraState: (props: CameraStateProps) => import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,24 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CameraState = void 0;
+var _icon = require("../../icon");
+var _type = require("../../icon/type");
+var _jsxRuntime = require("react/jsx-runtime");
+var CameraState = exports.CameraState = function CameraState(props) {
+  var isCameraMuted = props.isCameraMuted,
+    _props$size = props.size,
+    size = _props$size === void 0 ? 20 : _props$size;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+      type: isCameraMuted ? _type.FcrIconType.FCR_CAMERAOFF : _type.FcrIconType.FCR_CAMERA,
+      colors: {
+        iconPrimary: isCameraMuted ? 'var(--fcr_ui_scene_ramp_red6)' : 'var(--fcr_ui_scene_black8)'
+      },
+      size: size
+    })
+  });
+};

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

@@ -0,0 +1,27 @@
+.share-action-nav__media-list-group {
+  padding: 0 10px;
+  cursor: pointer;
+}
+
+.share-action-nav__media-list-group .fcr-radio {
+  width: 100%;
+  height: 32px;
+  border-radius: var(--fcr_cornerradius_xxs);
+}
+.share-action-nav__media-title {
+  font-size: 12px;
+  font-weight: 400;
+  color: var(--fcr_ui_scene_icontext1);
+  text-align: left;
+}
+.share-action-nav__media-list-group .fcr-radio:hover {
+  background-color: var(--fcr_web_ui_scene_hover);
+}
+
+.share-action-nav__media-list-group .fcr-radio-label {
+  font-weight: 500;
+}
+
+.share-action-nav__device-setting {
+  font-size: 12px;
+}

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

@@ -0,0 +1,24 @@
+import { ReactNode } from 'react';
+import './index.css';
+interface CameraDeviceProps {
+    onCameraDevicePopoverVisibleChange?: (visible: boolean) => void;
+    onTooltipButtonClick?: () => void;
+    popoverContent?: ReactNode;
+    isMuted?: boolean;
+}
+export declare const CameraDevice: (props: CameraDeviceProps) => import("react/jsx-runtime").JSX.Element;
+declare enum ConnectType {
+    NONE = 0,
+    COMPUTER = 1,
+    PHONE = 2
+}
+interface MicrophoneDeviceProps {
+    onMicrophoneDevicePopoverVisibleChange?: (visible: boolean) => void;
+    onTooltipButtonClick?: () => void;
+    popoverContent?: ReactNode;
+    isMuted?: boolean;
+    voicePercent?: number;
+    connectType?: ConnectType;
+}
+export declare const MicrophoneDevice: (props: MicrophoneDeviceProps) => import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,256 @@
+"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.MicrophoneDevice = exports.CameraDevice = void 0;
+var _i18n = require("../../../i18n");
+var _divider = _interopRequireDefault(require("../../divider"));
+var _icon = require("../../icon");
+var _type = require("../../icon/type");
+var _radio = require("../../radio");
+var _tooltipsButton = require("../../tooltips-button");
+var _microphoneState = require("../microphone-state");
+require("./index.css");
+var _iconPhoneCall = require("../../icon-phone-call");
+var _jsxRuntime = require("react/jsx-runtime");
+var CameraDevice = exports.CameraDevice = function CameraDevice(props) {
+  var t = (0, _i18n.useI18n)();
+  var _props$onCameraDevice = props.onCameraDevicePopoverVisibleChange,
+    onCameraDevicePopoverVisibleChange = _props$onCameraDevice === void 0 ? function () {} : _props$onCameraDevice,
+    popoverContent = props.popoverContent,
+    isMuted = props.isMuted;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: "share-action-nav__button fcr-divider-vertical share-action-nav__not-draggable",
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltipsButton.FrcTooltipButton, {
+      tooltip: {
+        icon: {
+          type: isMuted ? _type.FcrIconType.FCR_CAMERAOFF : _type.FcrIconType.FCR_CAMERA,
+          colors: {
+            iconPrimary: 'var(--fcr_web_ui_scene_mainicon1)'
+          },
+          size: 32
+        },
+        content: t('fmt_toolbar_label_camera')
+      },
+      withPopover: true,
+      onTooltipButtonClick: props.onTooltipButtonClick,
+      popover: {
+        content: popoverContent ? popoverContent : /*#__PURE__*/(0, _jsxRuntime.jsx)(VideoDeviceListPopoverContent, {}),
+        onVisibleChange: onCameraDevicePopoverVisibleChange
+      }
+    })
+  });
+};
+var ConnectType = /*#__PURE__*/function (ConnectType) {
+  ConnectType[ConnectType["NONE"] = 0] = "NONE";
+  ConnectType[ConnectType["COMPUTER"] = 1] = "COMPUTER";
+  ConnectType[ConnectType["PHONE"] = 2] = "PHONE";
+  return ConnectType;
+}(ConnectType || {});
+var MicrophoneDevice = exports.MicrophoneDevice = function MicrophoneDevice(props) {
+  var t = (0, _i18n.useI18n)();
+  var _props$isMuted = props.isMuted,
+    isMuted = _props$isMuted === void 0 ? true : _props$isMuted,
+    _props$voicePercent = props.voicePercent,
+    voicePercent = _props$voicePercent === void 0 ? 0 : _props$voicePercent,
+    _props$connectType = props.connectType,
+    connectType = _props$connectType === void 0 ? ConnectType.NONE : _props$connectType;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: "share-action-nav__button share-action-nav__not-draggable",
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltipsButton.FrcTooltipButton, {
+      tooltip: {
+        content: t('fmt_setting_label_Mic')
+      },
+      onTooltipButtonClick: props.onTooltipButtonClick,
+      withPopover: true,
+      popover: {
+        content: props.popoverContent ? props.popoverContent : /*#__PURE__*/(0, _jsxRuntime.jsx)(AudioDeviceListPopoverContent, {}),
+        onVisibleChange: props.onMicrophoneDevicePopoverVisibleChange
+      },
+      children: connectType === ConnectType.COMPUTER ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_microphoneState.MicrophoneState, {
+        isMicrophoneMuted: isMuted,
+        voicePercent: voicePercent,
+        size: 32
+      }) : connectType === ConnectType.NONE ? /*#__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)'
+        }
+      }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_iconPhoneCall.FcrIconPhoneCall, {
+        isMuted: isMuted
+      })
+    })
+  });
+};
+var VideoDeviceListPopoverContent = function VideoDeviceListPopoverContent() {
+  var t = (0, _i18n.useI18n)();
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: "share-action-nav__popover-inner-content share-action-nav__not-draggable",
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "share-action-nav__media-list-group",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "share-action-nav__media-title",
+        children: t('fmt_toolbar_label_camera')
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_radio.FcrRadioGroup, {
+        options: [{
+          label: /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
+            className: "color-dark-gray-icontext1",
+            children: [t('fmt_toolbar_label_camera'), "1"]
+          }),
+          iconColor: 'var(--fcr_ui_scene_ramp_brand6)',
+          styleType: 'transparent',
+          checked: true
+        }, {
+          label: /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
+            className: "color-dark-gray-icontext1",
+            children: [t('fmt_toolbar_label_camera'), "2"]
+          }),
+          iconColor: 'var(--fcr_ui_scene_ramp_brand6)',
+          styleType: 'transparent'
+        }],
+        onChange: function onChange(value) {
+          console.log(value);
+        }
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_divider["default"], {
+      type: "horizontal",
+      style: {
+        margin: '8px 0'
+      }
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "share-action-nav__media-list-group",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "share-action-nav__media-title",
+        children: t('fmt_setting_label_Mic')
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_radio.FcrRadioGroup, {
+        options: [{
+          label: /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
+            className: "color-dark-gray-icontext1",
+            children: [t('fmt_setting_label_Mic'), "1"]
+          }),
+          iconColor: 'var(--fcr_ui_scene_ramp_brand6)',
+          styleType: 'transparent',
+          checked: true
+        }, {
+          label: /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
+            className: "color-dark-gray-icontext1",
+            children: [t('fmt_setting_label_Mic'), "2"]
+          }),
+          iconColor: 'var(--fcr_ui_scene_ramp_brand6)',
+          styleType: 'transparent'
+        }],
+        onChange: function onChange(value) {
+          console.log(value);
+        }
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_divider["default"], {
+      type: "horizontal",
+      style: {
+        margin: '8px 0'
+      }
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "share-action-nav__media-list-group",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "fcr-flex fcr-items-center share-action-nav__popover-option-media-setting share-action-nav__popover-option",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+          type: _type.FcrIconType.FCR_SETTING,
+          size: 24,
+          colors: {
+            iconPrimary: 'var(--fcr_ui_scene_icontext5)'
+          }
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          children: t('fmt_setting_option_Video')
+        })]
+      })
+    })]
+  });
+};
+var AudioDeviceListPopoverContent = function AudioDeviceListPopoverContent() {
+  var t = (0, _i18n.useI18n)();
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: "share-action-nav__popover-inner-content share-action-nav__not-draggable",
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "share-action-nav__media-list-group",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "share-action-nav__media-title",
+        children: t('fmt_setting_label_Speaker')
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_radio.FcrRadioGroup, {
+        options: [{
+          label: /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
+            className: "color-dark-gray-icontext1",
+            children: [t('fmt_setting_label_Speaker'), "1"]
+          }),
+          iconColor: 'var(--fcr_ui_scene_ramp_brand6)',
+          styleType: 'transparent',
+          checked: true
+        }, {
+          label: /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
+            className: "color-dark-gray-icontext1",
+            children: [t('fmt_setting_label_Speaker'), "1"]
+          }),
+          iconColor: 'var(--fcr_ui_scene_ramp_brand6)',
+          styleType: 'transparent'
+        }],
+        onChange: function onChange(value) {
+          console.log(value);
+        }
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_divider["default"], {
+      type: "horizontal",
+      style: {
+        margin: '8px 0'
+      }
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "share-action-nav__media-list-group",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "share-action-nav__media-title",
+        children: t('fmt_setting_label_Mic')
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_radio.FcrRadioGroup, {
+        options: [{
+          label: /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
+            className: "color-dark-gray-icontext1",
+            children: [t('fmt_setting_label_Mic'), "1"]
+          }),
+          iconColor: 'var(--fcr_ui_scene_ramp_brand6)',
+          styleType: 'transparent',
+          checked: true
+        }, {
+          label: /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
+            className: "color-dark-gray-icontext1",
+            children: [t('fmt_setting_label_Mic'), "2"]
+          }),
+          iconColor: 'var(--fcr_ui_scene_ramp_brand6)',
+          styleType: 'transparent'
+        }],
+        onChange: function onChange(value) {
+          console.log(value);
+        }
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_divider["default"], {
+      type: "horizontal",
+      style: {
+        margin: '8px 0'
+      }
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "share-action-nav__media-list-group ",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "fcr-flex fcr-items-center share-action-nav__popover-option-media-setting share-action-nav__popover-option",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+          type: _type.FcrIconType.FCR_SETTING,
+          size: 24,
+          colors: {
+            iconPrimary: 'var(--fcr_ui_scene_icontext5)'
+          }
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          className: "share-action-nav__device-setting",
+          children: t('fmt_setting_label_setting')
+        })]
+      })
+    })]
+  });
+};

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

@@ -0,0 +1,30 @@
+.room-screen-share-state-bar{
+  display: flex;
+}
+
+.share-action-nav__can-draggable {
+  cursor: pointer;
+}
+
+.share-action-nav__move_to_top {
+  flex-direction: column;
+  transition: all 0.3s ease;
+}
+
+.share-action-nav__move_to_bottom {
+  flex-direction: column-reverse;
+  transition: all 0.3s ease;
+}
+
+.invisible {
+  opacity: 0;
+}
+
+.completely-hidden-in-bottom {
+  transition: all 0.3s ease;
+  transform: translateY(54px);
+}
+.completely-hidden-in-top {
+  transition: all 0.3s ease;
+  transform: translateY(-54px);
+}

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

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

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

@@ -0,0 +1,118 @@
+"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.RoomScreenShareStateBar = void 0;
+require("core-js/modules/es.array.concat.js");
+require("core-js/modules/web.timers.js");
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _reactRnd = require("react-rnd");
+var _react = require("react");
+var _transferPositionIcon = require("./transfer-position-icon");
+var _shareActionNav = require("./share-action-nav");
+var _shareStateNav = require("./share-state-nav");
+require("./index.css");
+var _jsxRuntime = require("react/jsx-runtime");
+var RoomScreenShareStateBar = exports.RoomScreenShareStateBar = function RoomScreenShareStateBar() {
+  var NAV_HEIGHT = 84;
+  var HIDDEN_TIMEOUT = 3000;
+  var MAX_Y = window.innerHeight - NAV_HEIGHT;
+  var _useState = (0, _react.useState)(_transferPositionIcon.TransferPosition.TOP),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    navCurrentPosition = _useState2[0],
+    setNavCurrentPosition = _useState2[1];
+  var _useState3 = (0, _react.useState)(0),
+    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+    currentCoordinateX = _useState4[0],
+    setCurrentCoordinateX = _useState4[1];
+  var _useState5 = (0, _react.useState)(0),
+    _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
+    currentCoordinateY = _useState6[0],
+    setCurrentCoordinateY = _useState6[1];
+  var _useState7 = (0, _react.useState)(false),
+    _useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
+    showTransferAnimation = _useState8[0],
+    setShowTransferAnimation = _useState8[1];
+  var _useState9 = (0, _react.useState)(false),
+    _useState10 = (0, _slicedToArray2["default"])(_useState9, 2),
+    hiddenShareActionNav = _useState10[0],
+    setHiddenShareActionNav = _useState10[1];
+  var rndRef = (0, _react.useRef)(null);
+  var hideTimeout = (0, _react.useRef)(0);
+  var handlerShareNavTransferPosition = function handlerShareNavTransferPosition(targetPosition) {
+    setShowTransferAnimation(true);
+    setNavCurrentPosition(targetPosition);
+    setCurrentCoordinateY(targetPosition === _transferPositionIcon.TransferPosition.TOP ? 0 : MAX_Y);
+  };
+  var handleDragStop = function handleDragStop(_, data) {
+    setShowTransferAnimation(false);
+    setCurrentCoordinateX(data.x);
+    setCurrentCoordinateY(data.y);
+    if (data.y === MAX_Y || data.y > MAX_Y) {
+      setNavCurrentPosition(_transferPositionIcon.TransferPosition.BOTTOM);
+    } else if (data.y === 0 || data.y < 0) {
+      setNavCurrentPosition(_transferPositionIcon.TransferPosition.TOP);
+    }
+  };
+  var handleMouseEnter = function handleMouseEnter() {
+    console.log('handleMouseEnter');
+    clearTimeout(hideTimeout.current);
+    setHiddenShareActionNav(false);
+  };
+  var handleMouseLeave = function handleMouseLeave() {
+    hideTimeout.current = window.setTimeout(function () {
+      setHiddenShareActionNav(true);
+    }, HIDDEN_TIMEOUT);
+  };
+  (0, _react.useEffect)(function () {
+    if (rndRef.current) {
+      var width = rndRef.current.offsetWidth;
+      var x = window.innerWidth / 2 - width / 2;
+      setCurrentCoordinateX(x);
+    }
+  }, [rndRef]);
+  console.log('useEffect', currentCoordinateX, currentCoordinateY, 'innerHeight', window.innerHeight, 'MAX_Y', MAX_Y);
+  (0, _react.useEffect)(function () {
+    handleMouseLeave();
+    return function () {
+      clearTimeout(hideTimeout.current);
+    };
+  }, []);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactRnd.Rnd, {
+    style: {
+      transition: showTransferAnimation ? '0.2s' : '0s'
+    },
+    bounds: "window",
+    allowAnyClick: false,
+    cancel: ".share-action-nav__not-draggable",
+    dragHandleClassName: "share-action-nav__can-draggable",
+    enableUserSelectHack: true,
+    enableResizing: false,
+    "default": {
+      x: currentCoordinateX,
+      y: currentCoordinateY,
+      width: 'auto',
+      height: NAV_HEIGHT
+    },
+    onDragStop: handleDragStop,
+    position: {
+      x: currentCoordinateX,
+      y: currentCoordinateY
+    },
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      ref: rndRef,
+      onMouseEnter: handleMouseEnter,
+      onMouseLeave: handleMouseLeave,
+      className: "fcr-flex  ".concat(navCurrentPosition === _transferPositionIcon.TransferPosition.BOTTOM ? 'share-action-nav__move_to_bottom' : 'share-action-nav__move_to_top', "\n    ").concat(hiddenShareActionNav && currentCoordinateY === MAX_Y && 'completely-hidden-in-bottom', "\n    ").concat(hiddenShareActionNav && currentCoordinateY === 0 && 'completely-hidden-in-top', "\n    "),
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_shareActionNav.ShareActionNav, {
+        className: "".concat(hiddenShareActionNav ? 'invisible' : '')
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_shareStateNav.ShareStateNav, {
+        onShareStateNavTransferPosition: handlerShareNavTransferPosition,
+        currentPosition: navCurrentPosition
+      })]
+    })
+  });
+};

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

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