fcr-ui-scene 3.8.1 → 3.8.2

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

@@ -0,0 +1,266 @@
+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/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/web.dom-collections.for-each.js";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+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 "core-js/modules/web.timers.js";
+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 React, { useState, useEffect, useRef, useContext, useCallback } from 'react';
+import { observer } from 'mobx-react';
+import { FcrIcon } from 'agora-ui-foundation/lib/components/icon';
+import { FcrIconType } from 'agora-ui-foundation/lib/components/icon/type';
+import { FcrPopover } from 'agora-ui-foundation/lib/components/popover';
+import { FcrToolTip } from 'agora-ui-foundation/lib/components/tooltip';
+import { FcrAvatar } from 'agora-ui-foundation/lib/components/avatar';
+import { useI18n } from 'agora-ui-foundation/lib/i18n';
+import { CaptionMenu } from '../components/caption-menu';
+import { DraggableContainer } from './draggable-container';
+import { FcrUICaptionButtonHoverType } from './type';
+import { StoreContext } from './store';
+import './view.css';
+import classNames from 'classnames';
+import { useMouseMoveAnywhere } from 'agora-ui-foundation/lib/hooks/use-mouse-move-anywhere';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+var initialCaptionSettingVisible = _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, FcrUICaptionButtonHoverType.transcribing, false), FcrUICaptionButtonHoverType.caption, false), FcrUICaptionButtonHoverType.permission, false), FcrUICaptionButtonHoverType.close, false);
+var CaptionMessage = observer(function (_ref) {
+  var captionMessage = _ref.captionMessage,
+    isExiting = _ref.isExiting;
+  var _useContext = useContext(StoreContext),
+    captionStyle = _useContext.captionStyle,
+    isTwoLineCaptionEnabled = _useContext.isTwoLineCaptionEnabled,
+    sourceLanguage = _useContext.sourceLanguage,
+    translateLanguage = _useContext.translateLanguage;
+  if (!captionMessage) {
+    return null;
+  }
+  var isShowOriginalText = !isTwoLineCaptionEnabled && (!translateLanguage || translateLanguage === sourceLanguage);
+  var isSameLanguage = translateLanguage && translateLanguage != sourceLanguage;
+  return /*#__PURE__*/_jsxs("div", {
+    className: "fcr-caption-message-item ".concat(isExiting ? 'fcr-caption-exiting' : 'fcr-caption-entering'),
+    children: [/*#__PURE__*/_jsx("div", {
+      className: "fcr-caption-avatar-container",
+      children: /*#__PURE__*/_jsx(FcrAvatar, {
+        size: 30,
+        nickName: captionMessage.username,
+        textSize: 14,
+        avatarImage: captionMessage.avatarUrl
+      })
+    }), /*#__PURE__*/_jsxs("div", {
+      className: "fcr-caption-content-container",
+      children: [/*#__PURE__*/_jsx("div", {
+        className: "fcr-caption-username",
+        style: captionStyle.userName,
+        children: captionMessage.username
+      }), /*#__PURE__*/_jsxs("div", {
+        className: "fcr-caption-text-content",
+        children: [(isTwoLineCaptionEnabled || isShowOriginalText) && /*#__PURE__*/_jsx("div", {
+          className: "fcr-caption-original-text",
+          style: captionStyle.textStyle,
+          children: captionMessage.originalText
+        }), isSameLanguage && !isShowOriginalText && /*#__PURE__*/_jsx("div", {
+          className: "fcr-caption-translated-text",
+          style: captionStyle.textStyle,
+          children: captionMessage.translatedText
+        })]
+      })]
+    })]
+  });
+});
+var TooltipTips = observer(function () {
+  var _useContext2 = useContext(StoreContext),
+    isCaptionOpening = _useContext2.isCaptionOpening,
+    captionStyle = _useContext2.captionStyle,
+    isShowNoContentTips = _useContext2.isShowNoContentTips,
+    isShowListeningTips = _useContext2.isShowListeningTips;
+  var transI18n = useI18n();
+  return /*#__PURE__*/_jsxs("div", {
+    className: "fcr-caption-tips-container",
+    style: captionStyle.userName,
+    children: [isCaptionOpening && /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsx(FcrIcon, {
+        type: FcrIconType.FCR_LOADING,
+        size: 20,
+        colors: {
+          iconPrimary: 'var(--fcr_ui_scene_white8)'
+        },
+        className: "fcr-caption-loading-icon"
+      }), transI18n('fmt_ai_subtitles_setting_label_turnon_subtitles')]
+    }), isShowNoContentTips && transI18n('fmt_ai_subtitles_setting_label_listening_no_content'), isShowListeningTips && /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsx(FcrIcon, {
+        type: FcrIconType.FCR_VOLUME_HEAR,
+        size: 20,
+        colors: {
+          iconPrimary: 'var(--fcr_ui_scene_white8)'
+        }
+      }), transI18n('fmt_ai_subtitles_setting_label_listening')]
+    })]
+  });
+});
+var ActionButtons = observer(function () {
+  var _useContext3 = useContext(StoreContext),
+    stopCaption = _useContext3.stopCaption,
+    captionSettingProps = _useContext3.captionSettingProps,
+    openSubtitlesHistoryDialog = _useContext3.openSubtitlesHistoryDialog;
+  var transI18n = useI18n();
+  var _useState = useState({
+      transcribing: false,
+      permission: false,
+      close: false,
+      caption: false
+    }),
+    _useState2 = _slicedToArray(_useState, 2),
+    buttonHover = _useState2[0],
+    setButtonHover = _useState2[1];
+  var handleButtonHover = function handleButtonHover(button, isHovering) {
+    setButtonHover(function (prev) {
+      return _objectSpread(_objectSpread({}, prev), {}, _defineProperty({}, button, isHovering));
+    });
+  };
+  var captionMenuProps = _objectSpread(_objectSpread({}, captionSettingProps), {}, {
+    isPrivilegeControlOptionsVisible: false,
+    isFontSizeAdjustmentVisible: true
+  });
+  var captionPermissionMenuProps = _objectSpread(_objectSpread({}, captionSettingProps), {}, {
+    isFontSizeAdjustmentVisible: false,
+    isTranslationOptionsVisible: false
+  });
+  var topButtonList = [{
+    id: FcrUICaptionButtonHoverType.transcribing,
+    icon: FcrIconType.FCR_SUBTITIESHISTORY,
+    onClick: openSubtitlesHistoryDialog,
+    tooltip: transI18n('fmt_ai_transcriptions_toolbar_button_realtime_transcription')
+  }, {
+    id: FcrUICaptionButtonHoverType.caption,
+    icon: FcrIconType.FCR_TRANSLATE1,
+    tooltip: transI18n('fmt_ai_subtitles_setting_label_translation_setting'),
+    popoverContent: /*#__PURE__*/_jsx(CaptionMenu, _objectSpread({}, captionMenuProps))
+  }, {
+    id: FcrUICaptionButtonHoverType.permission,
+    icon: FcrIconType.FCR_SETTING2,
+    tooltip: transI18n('fmt_ai_subtitles_setting_label_subtitle_setting'),
+    popoverContent: /*#__PURE__*/_jsx(CaptionMenu, _objectSpread({}, captionPermissionMenuProps)),
+    isHidden: !captionPermissionMenuProps.isPrivilegeControlOptionsVisible
+  }, {
+    id: FcrUICaptionButtonHoverType.close,
+    icon: FcrIconType.FCR_CLOSE,
+    onClick: stopCaption
+  }];
+  var preventDragOnTarget = function preventDragOnTarget(e) {
+    e.stopPropagation();
+  };
+  var _useState3 = useState(initialCaptionSettingVisible),
+    _useState4 = _slicedToArray(_useState3, 2),
+    captionSettingVisible = _useState4[0],
+    setCaptionSettingVisible = _useState4[1];
+  var handleCaptionSettingVisible = function handleCaptionSettingVisible(id, visible) {
+    setCaptionSettingVisible(_objectSpread(_objectSpread({}, initialCaptionSettingVisible), {}, _defineProperty({}, id, visible)));
+  };
+  return /*#__PURE__*/_jsx("div", {
+    className: "fcr-caption-action-buttons",
+    onMouseDown: preventDragOnTarget,
+    onTouchStart: preventDragOnTarget,
+    onMouseMove: preventDragOnTarget,
+    children: topButtonList.map(function (item) {
+      return !item.isHidden && /*#__PURE__*/_jsx(FcrToolTip, {
+        mouseEnterDelay: 0,
+        content: item.tooltip,
+        disable: !item.tooltip,
+        children: /*#__PURE__*/_jsx(FcrPopover, {
+          showArrow: false,
+          trigger: "click",
+          content: item.popoverContent,
+          disable: !item.popoverContent,
+          visible: captionSettingVisible[item.id],
+          onVisibleChange: function onVisibleChange(visible) {
+            return handleCaptionSettingVisible(item.id, visible);
+          },
+          children: /*#__PURE__*/_jsx("div", {
+            children: /*#__PURE__*/_jsx("div", {
+              className: "fcr-caption-icon-button ".concat(buttonHover[item.id] ? 'fcr-caption-button-hovered' : ''),
+              onMouseEnter: function onMouseEnter() {
+                return handleButtonHover(item.id, true);
+              },
+              onMouseLeave: function onMouseLeave() {
+                return handleButtonHover(item.id, false);
+              },
+              onClick: item.onClick,
+              children: /*#__PURE__*/_jsx(FcrIcon, {
+                type: item.icon,
+                size: 24,
+                colors: {
+                  iconPrimary: 'var(--fcr_ui_scene_white8)'
+                }
+              })
+            })
+          })
+        })
+      }, item.id);
+    })
+  });
+});
+export var CaptionView = observer(function () {
+  var _useContext4 = useContext(StoreContext),
+    captionSentence = _useContext4.captionSentence,
+    clearCaptionSentence = _useContext4.clearCaptionSentence,
+    isCaptionVisible = _useContext4.isCaptionVisible,
+    isHovered = _useContext4.isHovered,
+    setIsHovered = _useContext4.setIsHovered;
+  var clearCaptionTimerRef = useRef(null);
+  var isShowMessage = captionSentence !== null;
+  useEffect(function () {
+    if (captionSentence) {
+      if (clearCaptionTimerRef.current) {
+        clearTimeout(clearCaptionTimerRef.current);
+        clearCaptionTimerRef.current = null;
+      }
+      clearCaptionTimerRef.current = setTimeout(function () {
+        clearCaptionTimerRef.current = null;
+        clearCaptionSentence();
+      }, 4500);
+    }
+    return function () {
+      if (clearCaptionTimerRef.current) {
+        clearTimeout(clearCaptionTimerRef.current);
+        clearCaptionTimerRef.current = null;
+      }
+    };
+  }, [captionSentence]);
+  var handleMouseEnter = useCallback(function () {
+    setIsHovered(false);
+  }, [setIsHovered]);
+  var mouseMoveRef = useMouseMoveAnywhere(handleMouseEnter, window);
+  if (!isCaptionVisible) {
+    return null;
+  }
+  return /*#__PURE__*/_jsxs("div", {
+    className: classNames('fcr-caption-viewport', {
+      'fcr-caption-hovered': isHovered
+    }),
+    onMouseEnter: function onMouseEnter() {
+      return setIsHovered(true);
+    },
+    ref: mouseMoveRef,
+    children: [isHovered && /*#__PURE__*/_jsx(ActionButtons, {}), !isShowMessage ? /*#__PURE__*/_jsx(TooltipTips, {}) : /*#__PURE__*/_jsx(CaptionMessage, {
+      captionMessage: captionSentence,
+      isExiting: false
+    })]
+  });
+});
+export var CaptionDraggableView = observer(function () {
+  return /*#__PURE__*/_jsx(DraggableContainer, {
+    children: /*#__PURE__*/_jsx(CaptionView, {})
+  });
+});