fcr-ui-scene 3.8.1-beta → 3.8.2

package/lib-es/modules/connection-gateway/types.js

@@ -0,0 +1 @@
+export {};

package/lib-es/modules/connection-gateway/view.js

@@ -0,0 +1,31 @@
+import "core-js/modules/es.array.concat.js";
+import { useContext } from 'react';
+import ConnectFromComputer from './components/computer';
+import ConnectFromPhone from './components/phone';
+import { observer } from 'mobx-react';
+import { StoreContext } from './store';
+import FcrTabFrame from '../components/tab-frame';
+import { useI18n } from 'agora-ui-foundation/lib/i18n';
+import { FcrUIConnectType } from '../../type';
+import { jsx as _jsx } from "react/jsx-runtime";
+export var View = observer(function () {
+  var _useContext = useContext(StoreContext),
+    activeTabKey = _useContext.activeTabKey,
+    connectType = _useContext.connectType,
+    hasOwnPstnStream = _useContext.hasOwnPstnStream,
+    onTabChange = _useContext.onTabChange;
+  var transI18n = useI18n();
+  return /*#__PURE__*/_jsx(FcrTabFrame, {
+    activeKey: activeTabKey,
+    onChange: onTabChange,
+    tabs: [{
+      label: "".concat(transI18n('fmt_PSTN_label_pcaudio')).concat(connectType === FcrUIConnectType.COMPUTER ? "-".concat(transI18n('fmt_PSTN_status_connected')) : ''),
+      key: 'computer',
+      content: /*#__PURE__*/_jsx(ConnectFromComputer, {})
+    }, {
+      label: "".concat(transI18n('fmt_pstn_options_phoneaudio')).concat(hasOwnPstnStream ? "-".concat(transI18n('fmt_PSTN_status_connected')) : ''),
+      key: 'phone',
+      content: /*#__PURE__*/_jsx(ConnectFromPhone, {})
+    }]
+  });
+});

package/lib-es/modules/control-bar/components/apps-popover/index.js

@@ -0,0 +1,34 @@
+import { FcrPopover } from 'agora-ui-foundation/lib/components/popover';
+import { AppList } from '../../../components/apps/app-list';
+import { StoreContext } from '../../store';
+import { useContext } from 'react';
+import { observer } from 'mobx-react';
+import { jsx as _jsx } from "react/jsx-runtime";
+export var AppsPopover = observer(function (props) {
+  var _useContext = useContext(StoreContext),
+    appItemOptions = _useContext.appItemOptions,
+    appActionbarPopoverVisible = _useContext.appActionbarPopoverVisible,
+    setAppActionbarPopoverVisible = _useContext.setAppActionbarPopoverVisible;
+  var children = props.children;
+  return /*#__PURE__*/_jsx(FcrPopover, {
+    trigger: "click",
+    showArrow: false,
+    content: /*#__PURE__*/_jsx(AppList, {
+      appItemProps: appItemOptions
+    }),
+    overlayInnerStyle: {
+      boxShadow: 'var(--fcr_web_light_dropup_m)',
+      border: 'none',
+      width: '374px',
+      height: 'auto'
+    },
+    onVisibleChange: function onVisibleChange(visible) {
+      setAppActionbarPopoverVisible(visible);
+    },
+    afterVisibleChange: function afterVisibleChange(visible) {
+      setAppActionbarPopoverVisible(visible);
+    },
+    visible: appActionbarPopoverVisible,
+    children: children
+  });
+});

package/lib-es/modules/control-bar/components/boundary-detector.js

@@ -0,0 +1,49 @@
+import { memo, useContext, useRef, useMemo, useEffect, forwardRef, useImperativeHandle } from 'react';
+import { DragContext } from '../context';
+import { useBoundaryDetect } from '../hooks';
+import { jsx as _jsx } from "react/jsx-runtime";
+export var BoundaryDetector = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function (_ref, ref) {
+  var children = _ref.children,
+    onBoundariesChanged = _ref.onBoundariesChanged;
+  var _useContext = useContext(DragContext),
+    position = _useContext.position,
+    isDragging = _useContext.isDragging;
+  var containerRef = useRef(null);
+  useImperativeHandle(ref, function () {
+    return {
+      getBoundaries: function getBoundaries() {
+        if (!containerRef.current) return {
+          x: 0,
+          y: 0,
+          width: 0,
+          height: 0
+        };
+        var bounds = containerRef.current.getBoundingClientRect();
+        return {
+          x: bounds.x,
+          y: bounds.y,
+          width: bounds.width,
+          height: bounds.height
+        };
+      }
+    };
+  }, []);
+  var boundaryCallbacks = useMemo(function () {
+    return {
+      onBoundariesChanged: onBoundariesChanged
+    };
+  }, [onBoundariesChanged]);
+  useBoundaryDetect(containerRef, boundaryCallbacks);
+  useEffect(function () {
+    if (!isDragging) {
+      if (!containerRef.current) return;
+      var bounds = containerRef.current.getBoundingClientRect();
+      boundaryCallbacks.onBoundariesChanged(bounds);
+    }
+  }, [position, isDragging]);
+  return /*#__PURE__*/_jsx("div", {
+    ref: containerRef,
+    className: "fcr-control-bar__sizer",
+    children: children
+  });
+}));

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

@@ -0,0 +1,107 @@
+import { useI18n } from 'agora-ui-foundation/lib/i18n';
+import { observer } from 'mobx-react';
+import { useContext, useEffect } from 'react';
+import { FcrIconType } from 'agora-ui-foundation/lib/components/icon/type';
+import { FcrIcon } from 'agora-ui-foundation/lib/components/icon';
+import { FcrPopover } from 'agora-ui-foundation/lib/components/popover';
+import VideoMenu from '../../../components/device-control/components/video-menu';
+import useDeviceTooltipVisible from '../../../components/device-control/hooks';
+import { DeviceControlStoreContext } from '../../../components/device-control/store.base';
+import { ControlBarCalculationContext } from '../../context';
+import { FcrToolTip } from 'agora-ui-foundation/lib/components/tooltip';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export var CameraControl = observer(function () {
+  var transI18n = useI18n();
+  var _useContext = useContext(DeviceControlStoreContext),
+    cameraEnabled = _useContext.cameraEnabled,
+    enableCamera = _useContext.enableCamera,
+    cameraList = _useContext.cameraList,
+    checkMediaPermission = _useContext.checkMediaPermission;
+  var _useContext2 = useContext(ControlBarCalculationContext),
+    isShareActionNavHidden = _useContext2.isShareActionNavHidden;
+  var _useDeviceTooltipVisi = useDeviceTooltipVisible(),
+    popoverOpened = _useDeviceTooltipVisi.popoverOpened,
+    handlePopoverVisibleChanged = _useDeviceTooltipVisi.handlePopoverVisibleChanged,
+    _setPopoverOpened = _useDeviceTooltipVisi.setPopoverOpened;
+  var muteColor = {
+    iconPrimary: cameraEnabled ? "var(--fcr_web_ui_scene_mainicon1)" : 'var(--fcr_ui_scene_ramp_red6)',
+    iconSecondary: 'var(--fcr_ui_scene_ramp_red6)'
+  };
+  var icon = cameraEnabled ? FcrIconType.FCR_CAMERA : FcrIconType.FCR_CAMERAOFF;
+  var title = cameraEnabled ? transI18n('fmt_device_label_video_start') : transI18n('fmt_device_label_video_stop');
+  var noCam = cameraList.length === 0;
+  var noCamColor = {
+    iconPrimary: "var(--fcr_web_ui_scene_mainicon1)",
+    iconSecondary: 'var(--fcr_ui_scene_ramp_red6)'
+  };
+  useEffect(function () {
+    if (isShareActionNavHidden) {
+      _setPopoverOpened(false);
+    }
+  }, [isShareActionNavHidden]);
+  return /*#__PURE__*/_jsx("div", {
+    className: "device-control-item-wrapper",
+    children: /*#__PURE__*/_jsxs("div", {
+      className: "device-control ".concat(popoverOpened ? 'active' : ''),
+      children: [/*#__PURE__*/_jsx("div", {
+        className: "device-control-inner",
+        children: !noCam ? /*#__PURE__*/_jsx("div", {
+          onClick: function onClick() {
+            enableCamera(!cameraEnabled);
+          },
+          children: /*#__PURE__*/_jsx(FcrToolTip, {
+            content: title,
+            children: /*#__PURE__*/_jsx("div", {
+              children: /*#__PURE__*/_jsx(FcrIcon, {
+                type: icon,
+                colors: muteColor,
+                size: 32
+              })
+            })
+          })
+        }) : /*#__PURE__*/_jsx("div", {
+          onClick: function onClick() {
+            return checkMediaPermission('camera');
+          },
+          children: /*#__PURE__*/_jsx(FcrToolTip, {
+            content: transI18n('fmt_internalsetting_status_nodevice'),
+            children: /*#__PURE__*/_jsx("div", {
+              children: /*#__PURE__*/_jsx(FcrIcon, {
+                type: FcrIconType.FCR_CAMERACRASH,
+                colors: noCamColor,
+                size: 32
+              })
+            })
+          })
+        })
+      }), /*#__PURE__*/_jsx(FcrPopover, {
+        showArrow: false,
+        visible: popoverOpened,
+        onVisibleChange: function onVisibleChange(visible) {
+          handlePopoverVisibleChanged(visible);
+        },
+        overlayClassName: "device-control--device-popover",
+        content: /*#__PURE__*/_jsx(VideoMenu, {
+          setPopoverOpened: function setPopoverOpened(opened) {
+            _setPopoverOpened(opened);
+          },
+          onMoreClick: function onMoreClick() {}
+        }),
+        trigger: "click",
+        children: /*#__PURE__*/_jsx("div", {
+          onClick: function onClick(e) {
+            e.stopPropagation();
+          },
+          className: "device-control-extra ".concat(popoverOpened ? 'active' : ''),
+          children: /*#__PURE__*/_jsx(FcrIcon, {
+            type: FcrIconType.FCR_DROPUP4,
+            colors: {
+              iconPrimary: 'var(--fcr_web_ui_scene_mainicon1)'
+            },
+            size: 24
+          })
+        })
+      })]
+    })
+  });
+});

package/lib-es/modules/control-bar/components/cloud-recording-buttons.js

@@ -0,0 +1,109 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import { observer } from 'mobx-react';
+import { useContext, useEffect, useState } from 'react';
+import { FcrRecordingState } from 'fcr-core/lib/type';
+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 { StoreContext } from '../store';
+import { useI18n } from 'agora-ui-foundation/lib/i18n';
+import { FcrPopover } from 'agora-ui-foundation/lib/components/popover';
+import { ControlBarCalculationContext } from '../context';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export var CloudRecordingButtons = observer(function () {
+  var _useContext = useContext(StoreContext),
+    cloudRecordingState = _useContext.cloudRecordingState,
+    pauseCloudRecording = _useContext.pauseCloudRecording,
+    resumeCloudRecording = _useContext.resumeCloudRecording,
+    stopCloudRecording = _useContext.stopCloudRecording;
+  var transI18n = useI18n();
+  return /*#__PURE__*/_jsxs("div", {
+    className: "fcr-control-bar-cloud-recording-buttons",
+    children: [cloudRecordingState === FcrRecordingState.Paused ? /*#__PURE__*/_jsx(FcrToolTip, {
+      mouseEnterDelay: 0,
+      content: transI18n('fmt_record_button_Cloudrecording_restore'),
+      children: /*#__PURE__*/_jsx("button", {
+        onClick: resumeCloudRecording,
+        children: /*#__PURE__*/_jsx(FcrIcon, {
+          type: FcrIconType.FCR_RECORDING_PLAY2,
+          size: 32,
+          colors: {
+            iconPrimary: 'var(--fcr_ui_scene_ramp_brand6)'
+          }
+        })
+      })
+    }) : /*#__PURE__*/_jsx(FcrToolTip, {
+      mouseEnterDelay: 0,
+      content: transI18n('fmt_settings_options_pausecloudrecording'),
+      children: /*#__PURE__*/_jsx("button", {
+        onClick: pauseCloudRecording,
+        children: /*#__PURE__*/_jsx(FcrIcon, {
+          type: FcrIconType.FCR_PAUSE2,
+          size: 32,
+          colors: {
+            iconPrimary: 'var(--fcr_ui_scene_ramp_purple6)'
+          }
+        })
+      })
+    }), /*#__PURE__*/_jsx(StopCloudRecording, {
+      stopCloudRecording: stopCloudRecording,
+      children: /*#__PURE__*/_jsx(FcrToolTip, {
+        mouseEnterDelay: 0,
+        content: transI18n('fmt_record_button_Cloudrecording_stop'),
+        children: /*#__PURE__*/_jsx("button", {
+          children: /*#__PURE__*/_jsx(FcrIcon, {
+            type: FcrIconType.FCR_STOP3,
+            size: 32,
+            colors: {
+              iconPrimary: 'var(--fcr_ui_scene_ramp_red6)'
+            }
+          })
+        })
+      })
+    })]
+  });
+});
+
+// TODO: 删除重复的 StopCloudRecording 组件
+export var StopCloudRecording = observer(function (_ref) {
+  var stopCloudRecording = _ref.stopCloudRecording,
+    children = _ref.children;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    visible = _useState2[0],
+    setVisible = _useState2[1];
+  var transI18n = useI18n();
+  var _useContext2 = useContext(ControlBarCalculationContext),
+    isShareActionNavHidden = _useContext2.isShareActionNavHidden;
+  useEffect(function () {
+    if (isShareActionNavHidden) {
+      setVisible(false);
+    }
+  }, [isShareActionNavHidden]);
+  var content = /*#__PURE__*/_jsxs("div", {
+    className: "leave-container",
+    children: [/*#__PURE__*/_jsx("div", {
+      className: "leave-title",
+      children: transI18n('fmt_actionbar_record_tips_stoprecord')
+    }), /*#__PURE__*/_jsx("div", {
+      className: "leave-confirm",
+      onClick: stopCloudRecording,
+      children: transI18n('fmt_actionbar_record_option_stoprecord')
+    }), /*#__PURE__*/_jsx("div", {
+      className: "leave-cancel",
+      onClick: function onClick() {
+        return setVisible(false);
+      },
+      children: transI18n('fmt_security_buttons_cancel')
+    })]
+  });
+  return /*#__PURE__*/_jsx(FcrPopover, {
+    showArrow: false,
+    overlayClassName: "fcr-stop-cloud-recording-popover",
+    visible: visible,
+    onVisibleChange: setVisible,
+    trigger: "click",
+    content: content,
+    children: children
+  });
+});

package/lib-es/modules/control-bar/components/meeting-details/index.css

@@ -0,0 +1,133 @@
+.meeting-details {
+  display: flex;
+  flex-direction: column;
+  width: 290px;
+  padding: 20px 15px 15px 15px;
+  border-radius: var(--fcr_cornerradius_s);
+  background-color: var(--fcr_mobile_ui_scene_color_popup_fill2, #3c3c3c);
+  box-shadow: none;
+}
+
+.meeting-details__header {
+  display: flex;
+  align-items: center;
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--fcr_ui_scene_icontext1, #ffffff);
+  user-select: none;
+}
+
+.meeting-details__content-meeting-subject {
+  font-size: 15px;
+  font-weight: 500;
+  color: var(--fcr_ui_scene_icontext1, #ffffff);
+  word-break: break-all;
+  text-align: left;
+  min-height: 34px;
+  line-height: 23px;
+}
+
+.meeting-details__content-meeting-id,
+.meeting-details__content-code,
+.meeting-details__content-share-link {
+  display: flex;
+  align-items: center;
+  line-height: 34px;
+  font-size: 12px;
+  font-weight: 300;
+  color: var(--fcr_ui_scene_icontext1, #ffffff);
+}
+
+.meeting-details__content-meeting-id > span,
+.meeting-details__content-code > span,
+.meeting-details__content-share-link > span {
+  font-weight: 600;
+}
+
+.meeting-details__content-meeting-id > label,
+.meeting-details__content-code > label,
+.meeting-details__content-share-link > label {
+  user-select: none;
+  flex-shrink: 0;
+}
+
+.meeting-details__content-meeting-id > span,
+.meeting-details__content-code > span,
+.meeting-details__content-share-link > span {
+  margin-left: 10px;
+  flex-grow: 1;
+  text-align: right;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+.meeting-details__content-code > span.none {
+  font-weight: 400 !important;
+}
+
+.meeting-details__content-meeting-id > div > svg,
+.meeting-details__content-code > div > svg,
+.meeting-details__content-share-link > div > svg {
+  flex-shrink: 0;
+  margin-left: 8px;
+  border-radius: var(--fcr_cornerradius_s, 4px);
+  cursor: pointer;
+  border: 0.5px solid var(--fcr_ui_scene_line1);
+  border-radius: var(--fcr_cornerradius_xs);
+}
+
+.meeting-details__content-meeting-id > div > svg:hover,
+.meeting-details__content-code > div > svg:hover,
+.meeting-details__content-share-link > div > svg:hover {
+  background-color: var(--fcr_web_ui_scene_hover);
+  border: none;
+}
+
+.meeting-details__content-meeting-id > div > svg:hover path,
+.meeting-details__content-code > div > svg:hover path,
+.meeting-details__content-share-link > div > svg:hover path {
+  fill: var(--fcr_web_ui_scene_mainicon2);
+}
+
+.meeting-details__content-meeting-duration span {
+  padding-right: 30px;
+}
+
+.meeting-details__footer {
+  margin-top: 4px;
+  display: flex;
+}
+
+.meeting-details__footer > button {
+  flex: 1;
+}
+
+.meeting-details__footer > button > p {
+  display: flex;
+  align-items: center;
+  position: relative;
+}
+
+.meeting-details__footer > button > p > svg {
+  position: absolute;
+  left: -18px;
+}
+
+.meeting-details__footer > button > p > span {
+  margin-left: 8px;
+}
+
+.meeting-details__reset-icon {
+  animation: rotate 1s linear infinite;
+}
+
+@keyframes rotate {
+  from {
+    transform: rotate(0deg);
+  }
+
+  to {
+    transform: rotate(360deg);
+  }
+}