fcr-ui-scene 3.3.0 → 3.4.0

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

@@ -0,0 +1,67 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CloudRecordingButtons = void 0;
+var _mobxReact = require("mobx-react");
+var _react = require("react");
+var _type = require("fcr-core/lib/type");
+var _icon = require("agora-ui-foundation/lib/components/icon");
+var _type2 = require("agora-ui-foundation/lib/components/icon/type");
+var _tooltip = require("agora-ui-foundation/lib/components/tooltip");
+var _store = require("../store");
+var _stopRecordDialog = require("../../action-bar/record/stop-record-dialog");
+var _i18n = require("agora-ui-foundation/lib/i18n");
+var _jsxRuntime = require("react/jsx-runtime");
+var CloudRecordingButtons = exports.CloudRecordingButtons = (0, _mobxReact.observer)(function () {
+  var _useContext = (0, _react.useContext)(_store.StoreContext),
+    cloudRecordingState = _useContext.cloudRecordingState,
+    pauseCloudRecording = _useContext.pauseCloudRecording,
+    resumeCloudRecording = _useContext.resumeCloudRecording,
+    stopCloudRecording = _useContext.stopCloudRecording;
+  var transI18n = (0, _i18n.useI18n)();
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: "fcr-control-bar-cloud-recording-buttons",
+    children: [cloudRecordingState === _type.FcrRecordingState.Paused ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip.FcrToolTip, {
+      content: transI18n('fmt_record_button_Cloudrecording_restore'),
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+        onClick: resumeCloudRecording,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+          type: _type2.FcrIconType.FCR_RECORDING_PLAY2,
+          size: 32,
+          colors: {
+            iconPrimary: 'var(--fcr_ui_scene_ramp_brand6)'
+          }
+        })
+      })
+    }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip.FcrToolTip, {
+      content: transI18n('fmt_settings_options_pausecloudrecording'),
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+        onClick: pauseCloudRecording,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+          type: _type2.FcrIconType.FCR_PAUSE2,
+          size: 32,
+          colors: {
+            iconPrimary: 'var(--fcr_ui_scene_ramp_purple6)'
+          }
+        })
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_stopRecordDialog.StopCloudRecording, {
+      stopCloudRecording: stopCloudRecording,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip.FcrToolTip, {
+        content: transI18n('fmt_record_button_Cloudrecording_stop'),
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+            type: _type2.FcrIconType.FCR_STOP3,
+            size: 32,
+            colors: {
+              iconPrimary: 'var(--fcr_ui_scene_ramp_red6)'
+            }
+          })
+        })
+      })
+    })]
+  });
+});

package/lib/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: 34px;
+}
+
+.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);
+  }
+}

package/lib/modules/control-bar/components/meeting-details/index.d.ts

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

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

@@ -0,0 +1,251 @@
+"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.MeetingDetails = void 0;
+require("core-js/modules/es.regexp.exec.js");
+require("core-js/modules/es.string.replace.js");
+require("core-js/modules/web.timers.js");
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _button = require("agora-ui-foundation/lib/components/button");
+var _icon = require("agora-ui-foundation/lib/components/icon");
+var _type = require("agora-ui-foundation/lib/components/icon/type");
+var _i18n = require("agora-ui-foundation/lib/i18n");
+var _copyText = require("../../../../utilities/copyText");
+var _tools = require("../../../../utilities/tools");
+var _mobxReact = require("mobx-react");
+var _react = require("react");
+require("./index.css");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _store = require("../../store");
+var _meetingTime = require("../../../../hooks/meeting-time");
+var _jsxRuntime = require("react/jsx-runtime");
+var CopyState = /*#__PURE__*/function (CopyState) {
+  CopyState[CopyState["COPYINIT"] = 1] = "COPYINIT";
+  CopyState[CopyState["COPYING"] = 2] = "COPYING";
+  CopyState[CopyState["COPIED"] = 3] = "COPIED";
+  CopyState[CopyState["FAILED"] = 4] = "FAILED";
+  return CopyState;
+}(CopyState || {});
+var MeetingDetails = exports.MeetingDetails = (0, _mobxReact.observer)(function () {
+  var t = (0, _i18n.useI18n)();
+  var copyTimer = null;
+  var _useState = (0, _react.useState)({
+      copyState: CopyState.COPYINIT,
+      copyIcon: _type.FcrIconType.FCR_LINK,
+      copyText: t('fmt_sharing_button_copydetailed')
+    }),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    copyInfoState = _useState2[0],
+    setCopyInfoState = _useState2[1];
+  var _useContext = (0, _react.useContext)(_store.StoreContext),
+    startTime = _useContext.startTime,
+    _useContext$roomInfo = _useContext.roomInfo,
+    inviteLink = _useContext$roomInfo.inviteLink,
+    password = _useContext$roomInfo.password,
+    roomId = _useContext$roomInfo.roomId,
+    roomName = _useContext$roomInfo.roomName,
+    userName = _useContext.localUser.userName,
+    setShowMeetingDetailPortal = _useContext.setShowMeetingDetailPortal,
+    roomDuration = _useContext.roomDuration,
+    showToast = _useContext.showToast,
+    meetingId = _useContext.meetingId;
+  var _useMeetingTime = (0, _meetingTime.useMeetingTime)({
+      duration: roomDuration,
+      startTime: startTime
+    }),
+    meetingTime = _useMeetingTime.meetingTime;
+  var getShareLink = function getShareLink() {
+    var info = {
+      roomId: roomId,
+      roomName: roomName,
+      userName: userName
+    };
+    var baseLink = "".concat(inviteLink);
+    return baseLink;
+  };
+  var shareLink = (0, _react.useMemo)(function () {
+    return getShareLink();
+  }, []);
+  if (!roomName || !userName) return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {});
+  var displayMeetingId = (0, _tools.renderMeetingId)(meetingId, roomId);
+  var detailText = t('fmt_sharing_label_invitationdetailed', {
+    reason1: userName,
+    reason2: roomName,
+    // reason3: dayjs(startTime ?? 0).format('YYYY-MM-DD HH:mm:ss'),
+    reason3: '',
+    reason4: shareLink
+  });
+  function handleCopyMeetingId(copyContent) {
+    if (!copyContent) return;
+    var content = meetingId ? copyContent : copyContent.replace(/\s+/g, '');
+    (0, _copyText.copyText)(content).then(function () {
+      setShowMeetingDetailPortal(false);
+      showToast({
+        type: 'info',
+        content: t('fmt_statusbar_status_coppied')
+      });
+    })["catch"](function () {
+      setShowMeetingDetailPortal(false);
+      showToast({
+        type: 'warn',
+        content: t('fmt_information_tips_numbercopyfailed')
+      });
+    });
+  }
+  function handlerCopyMeetingShareLink(shareLink) {
+    (0, _copyText.copyText)(shareLink).then(function () {
+      setShowMeetingDetailPortal(false);
+      showToast({
+        type: 'info',
+        content: t('fmt_additional_tips_invitation')
+      });
+    })["catch"](function () {
+      setShowMeetingDetailPortal(false);
+      showToast({
+        type: 'warn',
+        content: t('fmt_additional_tips_invitationfailed')
+      });
+    });
+  }
+  function handleCopyMeetingPassword(password) {
+    (0, _copyText.copyText)(password).then(function () {
+      showToast({
+        type: 'info',
+        content: t('fmt_uimanager_tips_passwordcopied')
+      });
+    })["catch"](function () {
+      showToast({
+        type: 'warn',
+        content: t('fmt_settings_tips_passwordcopyfailed')
+      });
+    });
+  }
+  function handlerCopyMeetingDetail(detailText) {
+    if (copyInfoState.copyState !== CopyState.COPYINIT) {
+      return;
+    }
+    if (copyTimer) {
+      clearTimeout(copyTimer);
+    }
+    setCopyInfoState({
+      copyState: CopyState.COPYING,
+      copyIcon: _type.FcrIconType.FCR_RESET,
+      copyText: t('fmt_meeting_call_voice_call_button_copy_info')
+    });
+    (0, _copyText.copyText)(detailText).then(function () {
+      copyTimer = setTimeout(function () {
+        setCopyInfoState({
+          copyState: CopyState.COPIED,
+          copyIcon: _type.FcrIconType.FCR_CHOOSEIT,
+          copyText: t('fmt_statusbar_status_coppied')
+        });
+      }, 1500);
+    })["catch"](function () {
+      showToast({
+        type: 'warn',
+        content: t('fmt_sharing_tips_copyfull_failed')
+      });
+    });
+  }
+  (0, _react.useEffect)(function () {
+    if (copyInfoState.copyState === CopyState.COPIED) {
+      if (copyTimer) {
+        clearTimeout(copyTimer);
+      }
+      copyTimer = setTimeout(function () {
+        setCopyInfoState({
+          copyState: CopyState.COPYINIT,
+          copyIcon: _type.FcrIconType.FCR_LINK,
+          copyText: t('fmt_sharing_button_copydetailed')
+        });
+      }, 1000);
+    }
+  }, [copyInfoState.copyState]);
+  (0, _react.useEffect)(function () {
+    return function () {
+      if (copyTimer) {
+        clearTimeout(copyTimer);
+      }
+    };
+  }, []);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: "meeting-details",
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "meeting-details__content",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "meeting-details__content-meeting-subject",
+        children: roomName
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "meeting-details__content-meeting-id",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
+          children: t('fmt_meetingInfo_window_info_meetingID')
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          children: displayMeetingId
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          onClick: function onClick() {
+            return handleCopyMeetingId(displayMeetingId);
+          },
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+            type: _type.FcrIconType.FCR_COPY_ICON,
+            size: 20
+          })
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "meeting-details__content-share-link",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
+          children: t('fmt_sharing_label_invitationlink')
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          children: shareLink
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          onClick: function onClick() {
+            return handlerCopyMeetingShareLink(shareLink);
+          },
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+            type: _type.FcrIconType.FCR_COPY_ICON,
+            size: 20
+          })
+        })]
+      }), !!password && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "meeting-details__content-share-link",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
+          children: t('fmt_meeting_creatpage_label_password')
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          children: password
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          onClick: function onClick() {
+            return handleCopyMeetingPassword(password !== null && password !== void 0 ? password : '');
+          },
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+            type: _type.FcrIconType.FCR_COPY_ICON,
+            size: 20
+          })
+        })]
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "meeting-details__footer",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_button.FcrButton, {
+        size: "XS",
+        shape: "rounded",
+        onClick: function onClick() {
+          return handlerCopyMeetingDetail(detailText);
+        },
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+          className: (0, _classnames["default"])({
+            'meeting-details__reset-icon': copyInfoState.copyState === CopyState.COPYING
+          }),
+          type: copyInfoState.copyIcon,
+          size: 20,
+          colors: {
+            iconPrimary: 'var(--fcr_ui_scene_white10)'
+          }
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          children: copyInfoState.copyText
+        })]
+      })
+    })]
+  });
+});

package/lib/modules/control-bar/components/more-actions/index.css

@@ -0,0 +1,72 @@
+.leave-room-dialog .fcr-dialog-body {
+  padding: 20px;
+}
+
+.leave-room-dialog .fcr-button-secondary-bordered:hover {
+  color: var(--fcr_ui_scene_ramp_red6);
+  background: var(--fcr_ui_scene_ramp_red1);
+  border-color: var(--fcr_ui_scene_ramp_red6);
+}
+
+.leave-room-dialog-content {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  width: 100%;
+}
+
+.leave-room-dialog-title {
+  text-align: center;
+}
+
+.leave-room-dialog-content > button,
+.leave-room-dialog-content > div {
+  width: 100%;
+}
+
+.share-action-nav__popover-inner-content {
+  position: relative;
+}
+
+.share-action-nav__popover-inner-content
+  .share-action-nav__popover-inner-content-leave-option
+  path {
+  fill: var(--fcr_ui_scene_ramp_red6);
+}
+
+.share-action-nav__popover-inner-content
+  .share-action-nav__popover-inner-content-leave-option
+  .share-action-nav__popover-option {
+  color: var(--fcr_ui_scene_ramp_red6);
+}
+
+.share-action-nav__popover-inner-content
+  .share-action-nav__popover-inner-content-leave-option
+  .share-action-nav__popover-option:hover {
+  background: var(--fcr_ui_scene_ramp_red1);
+}
+
+.share-action-nav__media-list-group .share-action-nav__popover-option-media-setting {
+  padding-left: 6px;
+  margin: 0 10px;
+  cursor: pointer;
+}
+
+.share-action-nav__media-list-item-with-divider {
+  min-height: 32px;
+  height: auto;
+}
+
+.share-action-nav__media-list-item-with-divider:after {
+  content: '';
+  height: 1px;
+  border-bottom: 1px solid var(--fcr_ui_scene_line1);
+  width: calc(100% + 16px);
+  bottom: 0px;
+  left: 0px;
+  height: 1px;
+  display: block;
+  margin: 8px;
+  position: relative;
+  left: -16px;
+}

package/lib/modules/control-bar/components/more-actions/index.d.ts

@@ -0,0 +1,7 @@
+import './index.css';
+interface MorePopoverContentProps {
+    hasChatPermission: boolean;
+    closePopover?: () => void;
+}
+export declare const MorePopoverContent: (props: MorePopoverContentProps) => import("react/jsx-runtime").JSX.Element;
+export {};