fcr-ui-scene 3.8.1 → 3.8.2

package/lib-es/modules/action-bar/components/trigger-subscribe-language/guide-tooltip/index.js

@@ -0,0 +1,62 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import { FcrToolTip } from 'agora-ui-foundation/lib/components/tooltip';
+import { useState, useEffect, useRef, forwardRef, useImperativeHandle } from 'react';
+import './index.css';
+import { FcrIcon } from 'agora-ui-foundation/lib/components/icon';
+import { FcrIconType } from 'agora-ui-foundation/lib/components/icon/type';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export var GuideTooltip = /*#__PURE__*/forwardRef(function (props, ref) {
+  var children = props.children,
+    content = props.content,
+    guideContent = props.guideContent;
+  var _useState = useState(true),
+    _useState2 = _slicedToArray(_useState, 2),
+    show = _useState2[0],
+    setShow = _useState2[1];
+  var firstRender = useRef(true);
+  useImperativeHandle(ref, function () {
+    return {
+      setShow: setShow,
+      show: show
+    };
+  }, [show]);
+  var close = function close() {
+    setShow(false);
+    firstRender.current = false;
+  };
+  var guideContentDom = /*#__PURE__*/_jsxs("div", {
+    className: "fcr-guide-tooltip-close-container",
+    children: [/*#__PURE__*/_jsx("div", {
+      className: "fcr-guide-tooltip-close-text",
+      children: guideContent
+    }), /*#__PURE__*/_jsx(FcrIcon, {
+      className: "fcr-guide-tooltip-close-btn",
+      type: FcrIconType.FCR_CLOSED,
+      onClick: close,
+      size: 14,
+      colors: {
+        iconPrimary: 'var(--fcr_ui_scene_icontext3)'
+      }
+    })]
+  });
+  var guideContentRef = useRef(guideContent);
+  var onVisibleChange = function onVisibleChange(visible) {
+    if (!firstRender.current) {
+      setShow(visible);
+    }
+  };
+  useEffect(function () {
+    firstRender.current = true;
+    if (guideContentRef.current !== guideContent) {
+      setShow(true);
+    }
+  }, [guideContent]);
+  return /*#__PURE__*/_jsx(FcrToolTip, {
+    overlayClassName: "fcr-guide-tooltip",
+    mouseEnterDelay: 0,
+    onVisibleChange: onVisibleChange,
+    content: firstRender.current ? guideContentDom : content,
+    visible: show,
+    children: children
+  });
+});

package/lib-es/modules/action-bar/components/trigger-subscribe-language/index.js

@@ -0,0 +1,216 @@
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+import "core-js/modules/es.array.filter.js";
+import "core-js/modules/es.array.includes.js";
+import "core-js/modules/es.array.map.js";
+import "core-js/modules/es.array.some.js";
+import "core-js/modules/es.function.name.js";
+import "core-js/modules/es.object.to-string.js";
+import "core-js/modules/es.string.includes.js";
+import "core-js/modules/esnext.iterator.constructor.js";
+import "core-js/modules/esnext.iterator.filter.js";
+import "core-js/modules/esnext.iterator.map.js";
+import "core-js/modules/esnext.iterator.some.js";
+import { FcrIconType } from 'agora-ui-foundation/lib/components/icon/type';
+import { useContext, useMemo, useState } from 'react';
+import { ActionBarContext } from '../../main-scene/store.base';
+import { observer } from 'mobx-react';
+import { useI18n } from 'agora-ui-foundation/lib/i18n';
+import { GuideTooltip } from './guide-tooltip';
+import { ActionBarItemWithPopover } from '../item';
+import { LoadingWrapper } from '../../../interpreter/loading-wrapper';
+import { ORIGIN } from '../../../../shared-data/interpreter';
+import { useLanguageConfig } from '../../../interpreter/interpreter-list/interpreter-item/components/pick-language/useLanguageConfig';
+import { FcrRadio } from 'agora-ui-foundation/lib/components/radio';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+var useSubscribeLanguageOptionList = function useSubscribeLanguageOptionList() {
+  var _useContext = useContext(ActionBarContext),
+    subscribeLanguageOptionList = _useContext.subscribeLanguageOptionList;
+  var transI18n = useI18n();
+  var origin = {
+    label: transI18n('fmt_interpretation_mobile_attendnees_popup_option_off'),
+    value: ORIGIN
+  };
+  var getLanguageConfig = useLanguageConfig();
+  return useMemo(function () {
+    return subscribeLanguageOptionList.map(function (language) {
+      return {
+        label: language === ORIGIN ? origin.label : getLanguageConfig(language).name,
+        value: language
+      };
+    });
+  }, [subscribeLanguageOptionList]);
+};
+var usesSubscribeMainRoom = function usesSubscribeMainRoom() {
+  var _useContext2 = useContext(ActionBarContext),
+    hasSubscribedLanguageList = _useContext2.hasSubscribedLanguageList;
+  var transI18n = useI18n();
+  var label = transI18n('fmt_interpretation_mobile_attendnees_popup_label_original_aswell');
+  return useMemo(function () {
+    var checked = hasSubscribedLanguageList.includes(ORIGIN);
+    var languageList = hasSubscribedLanguageList.filter(function (language) {
+      return language !== ORIGIN;
+    });
+    var isShow = languageList.length > 0;
+    return {
+      checked: checked,
+      isShow: isShow,
+      label: label
+    };
+  }, [hasSubscribedLanguageList]);
+};
+export var TriggerSubscribeLanguagePopoverContent = observer(function () {
+  var _useContext3 = useContext(ActionBarContext),
+    subscribeLanguage = _useContext3.subscribeLanguage,
+    subscribeExtraOriginLanguage = _useContext3.subscribeExtraOriginLanguage,
+    hasSubscribedLanguageList = _useContext3.hasSubscribedLanguageList;
+  var optionList = useSubscribeLanguageOptionList();
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    loading = _useState2[0],
+    setLoading = _useState2[1];
+  var subscribeMainRoom = usesSubscribeMainRoom();
+  var clickSubscribeLanguageRoom = /*#__PURE__*/function () {
+    var _ref = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee(language) {
+      return _regeneratorRuntime.wrap(function (_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            setLoading(true);
+            _context.next = 1;
+            return subscribeLanguage(language);
+          case 1:
+            setLoading(false);
+          case 2:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee);
+    }));
+    return function clickSubscribeLanguageRoom(_x) {
+      return _ref.apply(this, arguments);
+    };
+  }();
+  var clickSubscribeMainRoom = /*#__PURE__*/function () {
+    var _ref2 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
+      return _regeneratorRuntime.wrap(function (_context2) {
+        while (1) switch (_context2.prev = _context2.next) {
+          case 0:
+            setLoading(true);
+            _context2.next = 1;
+            return subscribeExtraOriginLanguage(!subscribeMainRoom.checked);
+          case 1:
+            setLoading(false);
+          case 2:
+          case "end":
+            return _context2.stop();
+        }
+      }, _callee2);
+    }));
+    return function clickSubscribeMainRoom() {
+      return _ref2.apply(this, arguments);
+    };
+  }();
+  return /*#__PURE__*/_jsx("div", {
+    className: "fcr-device-popover-content",
+    onClick: function onClick(e) {
+      e.stopPropagation();
+    },
+    children: /*#__PURE__*/_jsx(LoadingWrapper, {
+      loading: loading,
+      children: /*#__PURE__*/_jsxs("div", {
+        className: "fcr-device-popover-content-device-list",
+        children: [/*#__PURE__*/_jsx("div", {
+          className: "fcr-device-popover-content-device",
+          children: /*#__PURE__*/_jsx("div", {
+            className: "fcr-device-popover-content-device-options",
+            children: optionList.map(function (option) {
+              var value = option.value,
+                label = option.label;
+              var checked = value === ORIGIN && hasSubscribedLanguageList.length > 1 ? false : hasSubscribedLanguageList.includes(value);
+              return /*#__PURE__*/_jsx(FcrRadio, {
+                name: "mic",
+                styleType: "transparent",
+                checked: checked,
+                label: label,
+                onChange: function onChange() {
+                  clickSubscribeLanguageRoom(value);
+                }
+              }, value);
+            })
+          })
+        }), subscribeMainRoom.isShow && /*#__PURE__*/_jsx("div", {
+          className: "fcr-device-popover-content-device",
+          children: /*#__PURE__*/_jsx("div", {
+            className: "fcr-device-popover-content-device-options",
+            onClick: clickSubscribeMainRoom,
+            children: /*#__PURE__*/_jsx(FcrRadio, {
+              name: "speaker",
+              styleType: "transparent",
+              checked: subscribeMainRoom.checked,
+              label: subscribeMainRoom.label
+            })
+          })
+        })]
+      })
+    })
+  });
+});
+var useGuideContent = function useGuideContent() {
+  var _useContext4 = useContext(ActionBarContext),
+    preHasSubscribedLanguageList = _useContext4.preHasSubscribedLanguageList,
+    subscribeLanguageOptionList = _useContext4.subscribeLanguageOptionList;
+  var transI18n = useI18n();
+  var content = transI18n('fmt_interpretation_sidebar_toast_hover_choose_language');
+  var guideContent = transI18n('fmt_interpretation_mobile_toast_controller_label_interpret_in_process');
+  var removeGuideContent = transI18n('fmt_interpretation_attendness_sidbar_popup_toast_label_channel_close');
+  var isRemove = preHasSubscribedLanguageList.some(function (ele) {
+    return !subscribeLanguageOptionList.includes(ele);
+  });
+  return useMemo(function () {
+    return {
+      content: content,
+      guideContent: !!isRemove ? removeGuideContent : guideContent
+    };
+  }, [preHasSubscribedLanguageList, subscribeLanguageOptionList]);
+};
+export var TriggerSubscribeLanguage = observer(function (_ref3) {
+  var id = _ref3.id,
+    order = _ref3.order;
+  var transI18n = useI18n();
+  var title = transI18n('fmt_interpretation_mobile_setting_controller_option_interpret');
+  var _useContext5 = useContext(ActionBarContext),
+    isInterpreterEnabled = _useContext5.isInterpreterEnabled;
+  var _useGuideContent = useGuideContent(),
+    content = _useGuideContent.content,
+    guideContent = _useGuideContent.guideContent;
+  if (!isInterpreterEnabled) {
+    return null;
+  }
+  return /*#__PURE__*/_jsx(GuideTooltip, {
+    content: content,
+    guideContent: guideContent,
+    children: /*#__PURE__*/_jsx("div", {
+      children: /*#__PURE__*/_jsx(ActionBarItemWithPopover, {
+        popoverProps: {
+          trigger: 'click',
+          content: /*#__PURE__*/_jsx(TriggerSubscribeLanguagePopoverContent, {}),
+          overlayClassName: 'attendee__footer-more-actions',
+          overlayInnerStyle: {
+            boxShadow: 'var(--fcr_web_light_dropup_m)',
+            border: 'none',
+            width: '256px'
+          },
+          showArrow: false
+        },
+        id: id,
+        order: order,
+        icon: FcrIconType.FCR_INTERPRETATION2,
+        title: title,
+        iconColors: {
+          iconPrimary: 'var(--fcr_web_ui_scene_mainicon1)'
+        }
+      })
+    })
+  });
+});

package/lib-es/modules/action-bar/constants.js

@@ -0,0 +1 @@
+export var actionBarClassName = 'fcr-action-bar';

package/lib-es/modules/action-bar/enums.js

@@ -0,0 +1,28 @@
+export var OpeneStateType = /*#__PURE__*/function (OpeneStateType) {
+  OpeneStateType[OpeneStateType["CLOSE"] = 0] = "CLOSE";
+  OpeneStateType[OpeneStateType["OPEN"] = 1] = "OPEN";
+  return OpeneStateType;
+}({});
+export var EventType = /*#__PURE__*/function (EventType) {
+  EventType["START"] = "start";
+  EventType["STOP"] = "stop";
+  return EventType;
+}({});
+export var MoreMenuType = /*#__PURE__*/function (MoreMenuType) {
+  MoreMenuType[MoreMenuType["DEFAULT"] = 0] = "DEFAULT";
+  MoreMenuType[MoreMenuType["SECURITY"] = 1] = "SECURITY";
+  MoreMenuType[MoreMenuType["APPS"] = 2] = "APPS";
+  MoreMenuType[MoreMenuType["TRIGGER_OUTPUT_LANGUAGE_ROOM"] = 3] = "TRIGGER_OUTPUT_LANGUAGE_ROOM";
+  return MoreMenuType;
+}({});
+export var AudioConnectType = /*#__PURE__*/function (AudioConnectType) {
+  AudioConnectType[AudioConnectType["NONE"] = 0] = "NONE";
+  AudioConnectType[AudioConnectType["COMPUTER"] = 1] = "COMPUTER";
+  AudioConnectType[AudioConnectType["PHONE"] = 2] = "PHONE";
+  return AudioConnectType;
+}({});
+export var MidActionOrderMapKey = /*#__PURE__*/function (MidActionOrderMapKey) {
+  MidActionOrderMapKey["TriggerSubscribeLanguage"] = "TriggerSubscribeLanguage";
+  MidActionOrderMapKey["Apps"] = "Apps";
+  return MidActionOrderMapKey;
+}({});

package/lib-es/modules/action-bar/index.css

@@ -0,0 +1,358 @@
+html {
+  --fcr-action-bar-height: 58px;
+}
+
+.fcr-action-bar {
+  background: var(--fcr_web_ui_scene_fill2);
+  width: 100%;
+  height: var(--fcr-action-bar-height);
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  transition: all 0.2s;
+  pointer-events: all;
+  border-top-width: 1px;
+  border-top-style: solid;
+  z-index: 3;
+}
+
+.fcr-action-bar-hide {
+  transform: translateY(var(--fcr-action-bar-height));
+}
+
+.fcr-action-bar-left,
+.fcr-action-bar-mid,
+.fcr-action-bar-right {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+.fcr-action-bar-right {
+  padding-right: 12px;
+}
+
+.fcr-action-bar-mid {
+  flex: 1;
+  flex-shrink: 1;
+  overflow: hidden;
+  padding: 0 10px;
+  justify-content: center;
+}
+
+.fcr-action-bar-collapse {
+  display: flex;
+  flex-flow: row nowrap;
+  align-items: center;
+  overflow: hidden;
+  flex: 1;
+}
+
+.fcr-action-bar-item-wrapper {
+  background: transparent;
+  width: fit-content;
+  height: 52px;
+  user-select: none;
+  min-width: 80px;
+  display: flex;
+  flex-direction: row;
+  align-items: stretch;
+  justify-content: stretch;
+  flex-shrink: 0;
+  position: relative;
+}
+
+.fcr-action-bar-device-extra,
+.fcr-action-bar-extra {
+  border-radius: var(--fcr_cornerradius_xs);
+  position: absolute;
+  right: 3px;
+  top: 3px;
+  width: 18px;
+  height: 30px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+}
+
+.fcr-action-bar-device-extra:hover,
+.fcr-action-bar-extra:hover,
+.fcr-action-bar-extra.active {
+  background: var(--fcr_web_ui_scene_hover2);
+}
+
+@media screen and (max-width: 430px) {
+  .fcr-action-bar-item-wrapper {
+    min-width: 55px;
+  }
+}
+
+.fcr-action-bar-item-wrapper button:focus {
+  outline: 0;
+}
+
+.fcr-action-bar-item-wrapper:hover .fcr-action-bar-item {
+  background: var(--fcr_web_ui_scene_hover2);
+  border-radius: var(--fcr_cornerradius_s);
+}
+
+.fcr-action-bar-item-active {
+  background: var(--fcr_web_ui_scene_hover2);
+  border-radius: var(--fcr_cornerradius_s);
+}
+
+.fcr-action-bar-item {
+  flex: 1;
+  display: inline-flex;
+  flex-direction: column;
+  align-items: center;
+  max-width: 100%;
+  height: 100%;
+}
+
+.fcr-icon-green path,
+.fcr-icon-green-when-hover:hover path {
+  fill: var(--fcr_ui_scene_ramp_green6);
+}
+
+.fcr-icon-blue path {
+  fill: var(--fcr_ui_scene_ramp_brand6);
+}
+
+.fcr-checkbox-overlay-style svg path {
+  fill: var(--fcr_ui_scene_icontext1);
+  transition: all 0.1s ease;
+}
+
+.fcr-checkbox-overlay-style .fcr-checkbox-inner {
+  width: 14px;
+  height: 14px;
+  background: transparent;
+}
+
+.fcr-checkbox-overlay-style .fcr-checkbox-inner svg {
+  width: 14px;
+  height: 14px;
+}
+
+.fcr-action-bar-item-disabled {
+  cursor: not-allowed;
+}
+
+.fcr-action-bar-item-disabled .fcr-action-bar-item-icon,
+.fcr-action-bar-item-disabled .fcr-action-bar-item-text {
+  opacity: 0.5;
+}
+
+.fcr-action-bar-item-text {
+  color: var(--fcr_ui_scene_icontext2);
+  font-weight: 400;
+  font-size: 12px;
+  line-height: 12px;
+  padding: 0 8px;
+  max-width: 100px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.fcr-action-bar-item-text span {
+  white-space: nowrap;
+}
+
+.fcr-action-bar-cancel-leave {
+  margin-right: 15px;
+  margin-left: auto;
+  text-align: center;
+  cursor: pointer;
+  align-self: center;
+  height: 100%;
+  display: flex;
+  align-items: center;
+}
+
+.fcr-action-bar--popover {
+  max-width: none;
+}
+
+.fcr-action-bar--popover .fcr-drop-menu {
+  text-align: left;
+}
+
+.fcr-tooltip-arrow {
+  z-index: 1;
+}
+
+.fcr-action-bar--popover .fcr-checkbox-input-wrapper {
+  border-color: transparent;
+}
+
+.fcr-action-bar--popover .fcr-tooltip-inner {
+  border: none !important;
+  box-shadow: var(--fcr_web_light_dropup_m) !important;
+}
+.fcr-screen-share--popover .fcr-button > p {
+  max-width: 140px;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.fcr-action-bar--fold-wrap {
+  width: 50%;
+  display: flex;
+  position: absolute;
+  top: -21px;
+  justify-content: center;
+  z-index: 4;
+  /* position: absolute;
+  inset: auto auto 0px 0px; */
+}
+
+.fcr-action-bar--fold-btn {
+  width: 70px;
+  height: 22px;
+}
+
+.fcr-action-bar--fold {
+  width: 70px;
+  height: 22px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-top-left-radius: 8px;
+  border-top-right-radius: 8px;
+  border: 1px solid var(--fcr_ui_scene_line1);
+  border-bottom: none;
+  background-color: var(--fcr_web_ui_scene_fill2);
+  cursor: pointer;
+}
+
+.fcr-action-bar--fold-hotarea {
+  width: 100%;
+  /* height: 22px; */
+  display: flex;
+}
+
+.fcr-action-bar--fold svg {
+  width: 30px;
+  height: 30px;
+}
+
+.fcr-action-bar--unfold {
+  width: 52px;
+  height: 50px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+}
+
+.fcr-action-bar--unfold svg {
+  transform: rotate(90deg);
+  width: 40px;
+  height: 40px;
+}
+
+.fcr-action-bar-fold-style {
+  width: 110px;
+  height: 50px;
+  position: absolute;
+  right: 15px;
+  bottom: 15px;
+  border: none;
+  background-color: transparent;
+}
+
+.fcr-action-bar-smaller {
+  width: 110px;
+  height: 50px;
+  border-radius: var(--fcr_cornerradius_s);
+  background: var(--fcr_web_ui_scene_fill2);
+  box-shadow: var(--fcr_web_light_dropup);
+  /* position: absolute;
+  right: 15px;
+  bottom: 15px; */
+  z-index: 1000;
+  display: flex;
+}
+
+.fcr-action-bar-smaller-micphone {
+  width: 58px;
+  height: 50px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  box-shadow: var(--fcr_web_light_dropup_m);
+  border-radius: var(--fcr_cornerradius_s);
+}
+
+.fcr-action-bar-smaller-micphone .device-control-extra {
+  display: none;
+}
+.fcr-action-bar-smaller-micphone .device-control {
+  min-width: none;
+}
+.fcr-action-bar-smaller-micphone .device-control:hover {
+  background: none;
+}
+
+.security-menu .fcr-drop-menu-title {
+  line-height: 32px;
+  display: block;
+}
+
+.security-drop-menu-checkbox .fcr-checkbox {
+  width: 100%;
+  flex-direction: row-reverse;
+  justify-content: space-between;
+}
+
+.security-drop-menu-checkbox .fcr-checkbox-label {
+  color: inherit;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.room-control-options-watermark-title-box .fcr-checkbox-label {
+  display: flex;
+  align-items: center;
+}
+
+.fcr-action-bar-small-end {
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: 0;
+  border: none;
+  background-color: transparent;
+  overflow: hidden;
+}
+
+.fcr-secuirty-tooltip {
+  max-width: unset !important;
+}
+
+.share-screen-menu .fcr-drop-menu-title {
+  font-weight: 700;
+}
+
+.share-screen-menu .fcr-checkbox {
+  width: 100%;
+  flex-direction: row-reverse;
+  justify-content: space-between;
+}
+
+.fcr-drop-menu-option-primary-no-hover:hover {
+  background: transparent;
+}
+
+.fcr-screenshare-continue-share p {
+  min-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}