fcr-ui-scene 3.2.0 → 3.3.0

package/lib/fragments/control-bar/device/index.js

@@ -71,7 +71,7 @@ var VideoDeviceListPopoverContent = function VideoDeviceListPopoverContent(props
               className: "color-dark-gray-icontext1",
               children: device.deviceName
             }),
-            iconColor: 'var(--fcr_ui_scene_ramp_brand6)',
+            iconColor: 'var(--fcr_ui_scene_icontext1)',
             styleType: 'transparent',
             checked: currentDevice === device.deviceId,
             value: device.deviceId
@@ -147,7 +147,8 @@ var AudioDeviceListPopoverContent = function AudioDeviceListPopoverContent(props
               className: "color-dark-gray-icontext1",
               children: device.deviceName
             }),
-            iconColor: 'var(--fcr_ui_scene_ramp_brand6)',
+            // iconColor: 'var(--fcr_ui_scene_ramp_brand6)',
+            iconColor: 'var(--fcr_ui_scene_icontext1)',
             styleType: 'transparent',
             checked: currentSpeakerDevice === device.deviceId,
             value: device.deviceId
@@ -174,7 +175,8 @@ var AudioDeviceListPopoverContent = function AudioDeviceListPopoverContent(props
               className: "color-dark-gray-icontext1",
               children: device.deviceName
             }),
-            iconColor: 'var(--fcr_ui_scene_ramp_brand6)',
+            // iconColor: 'var(--fcr_ui_scene_ramp_brand6)',
+            iconColor: 'var(--fcr_ui_scene_icontext1)',
             styleType: 'transparent',
             checked: currentMicrophoneDevice === device.deviceId,
             value: device.deviceId

package/lib/fragments/control-bar/index.css

@@ -76,7 +76,7 @@
 .share-action-nav__popover {
   color: var(--fcr_ui_scene_icontext1);
   border: 0.5px solid var(--fcr_ui_scene_line1);
-  box-shadow: 0px 0px 15px var(--fcr_web_light_dropup_m);
+  box-shadow: var(--fcr_web_light_dropup_m);
   border-radius: var(--fcr_cornerradius_l);
   background-color: var(--fcr_mobile_ui_scene_color_popup_fill2);
 }
@@ -106,6 +106,7 @@
   gap: 8px;
   padding: 6px;
   box-sizing: border-box;
+  padding-left: 38px;
 }
 
 .share-action-nav__popover-option:hover {
@@ -118,7 +119,16 @@
   flex-wrap: nowrap;
   align-items: center;
   gap: 8px;
-  padding: 0;
+  padding-left: 6px;
+}
+
+.share-action-nav__media-list-group .fcr-radio-transparent:hover span,
+.share-action-nav__popover-option:hover {
+  color: var(--fcr_web_ui_scene_mainicon2);
+}
+
+.share-action-nav__popover-option-media-setting:hover path {
+  fill: var(--fcr_ui_scene_ramp_brand6);
 }
 
 .share-action-nav__button .fcr-radio {
@@ -177,9 +187,10 @@
   transform: translateY(-54px);
 }
 
-.radio-label-active {
+/* .radio-label-active {
   color: var(--fcr_web_ui_scene_mainicon2);
-}
+} */
+
 .radio-label-normal {
   color: var(--fcr_ui_scene_icontext1);
 }
@@ -210,12 +221,6 @@
   flex-basis: 40px;
 }
 
-.leave-container {
-  position: relative;
-  padding: 20px;
-  max-height: 368px;
-}
-
 .leave-title {
   width: 100%;
   height: 39px;

package/lib/fragments/control-bar/index.js

@@ -121,6 +121,9 @@ var ControlBar = exports.ControlBar = /*#__PURE__*/function (_BaseFragment) {
         case _constant.RendererEventAction.MAIN_SET_ALLOW_SHARE_SCREEN:
           this._store.setAllowShareScreen(payload.allow);
           break;
+        case _constant.RendererEventAction.MAIN_SET_ALLOW_BOARD_WRITE:
+          this._store.setBoardWriteEnabled(payload.allow);
+          break;
         case _constant.RendererEventAction.MAIN_SET_ALLOW_UNMUTE_SELF_VIDEO:
           this._store.setAllowUnmuteSelfVideo(payload.allow);
           break;
@@ -197,6 +200,21 @@ var ControlBar = exports.ControlBar = /*#__PURE__*/function (_BaseFragment) {
         case _constant.RendererEventAction.SET_SHARE_WITH_AUDIO_CONTROL_BAR:
           this._store.setShareWithAudioStateOnly(payload.withAudio);
           break;
+        case _constant.RendererEventAction.SET_REMOTE_USERS:
+          this._store.setRemoteUsers(payload);
+          break;
+        case _constant.RendererEventAction.SET_HAS_ASSIGN_HOST_BEFORE_LEAVING_PERMISSION:
+          this._store.setHasAssignHostBeforeLeavingPermission(payload);
+          break;
+        case _constant.RendererEventAction.SET_HAS_END_ROOM_PERMISSION:
+          this._store.setHasEndRoomPermission(payload);
+          break;
+        case _constant.RendererEventAction.SET_IS_LOCKED:
+          this._store.setIsLocked(payload);
+          break;
+        case _constant.RendererEventAction.SET_IS_PSTN_USER:
+          this._store.setIsPstnUser(payload);
+          break;
       }
     }
   }]);

package/lib/fragments/control-bar/meeting-details/meeting-detail.css

@@ -0,0 +1,109 @@
+.meeting-details {
+  display: flex;
+  flex-direction: column;
+  width: 206px;
+  padding: 15px;
+  border-radius: var(--fcr_cornerradius_s);
+  background-color: var(--fcr_mobile_ui_scene_color_popup_fill2, #3c3c3c);
+  box-shadow: 0px 0px 15px 0px #8f8f8f26;
+}
+
+.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 {
+  margin-top: 12px;
+}
+
+.meeting-details__content-meeting-subject {
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--fcr_ui_scene_icontext1, #ffffff);
+  word-break: break-all;
+  text-align: left;
+  min-height: 32px;
+  line-height: 32px;
+}
+
+.meeting-details__content-meeting-id,
+.meeting-details__content-code,
+.meeting-details__content-share-link {
+  display: flex;
+  align-items: center;
+  line-height: 32px;
+  font-size: 12px;
+  font-weight: 300;
+  color: var(--fcr_ui_scene_icontext1, #ffffff);
+}
+
+.meeting-details__content-meeting-id > span,
+.meeting-details__content-code > 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;
+}
+
+.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);
+  fill: var(--fcr_web_ui_scene_mainicon2);
+}
+
+.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;
+}

package/lib/fragments/control-bar/meeting-details/meeting-details-portal.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const MeetingDetailsPortal: () => React.ReactPortal | null;
+export default MeetingDetailsPortal;

package/lib/fragments/control-bar/meeting-details/meeting-details-portal.js

@@ -0,0 +1,60 @@
+"use strict";
+
+require("core-js/modules/es.array.iterator.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.to-string.js");
+require("core-js/modules/es.string.iterator.js");
+require("core-js/modules/es.weak-map.js");
+require("core-js/modules/esnext.weak-map.delete-all.js");
+require("core-js/modules/esnext.weak-map.emplace.js");
+require("core-js/modules/web.dom-collections.iterator.js");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactDom = _interopRequireDefault(require("react-dom"));
+var _mobxReact = require("mobx-react");
+var _meetingDetails = require("./meeting-details");
+var _context = require("../context");
+var _jsxRuntime = require("react/jsx-runtime");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+var MeetingDetailsPortal = (0, _mobxReact.observer)(function () {
+  var container = document.createElement('div');
+  var _useContext = (0, _react.useContext)(_context.StoreContext),
+    startTime = _useContext.startTime,
+    roomInfo = _useContext.roomInfo,
+    userName = _useContext.userName,
+    inviteLink = _useContext.inviteLink,
+    isShowMeetingDetailPortal = _useContext.isShowMeetingDetailPortal,
+    meetingDetailPortalLeft = _useContext.meetingDetailPortalLeft,
+    meetingDetailPortalTop = _useContext.meetingDetailPortalTop,
+    setShowMeetingDetailPortal = _useContext.setShowMeetingDetailPortal;
+  (0, _react.useEffect)(function () {
+    if (isShowMeetingDetailPortal) {
+      container.style.position = 'absolute';
+      container.style.left = "".concat(meetingDetailPortalLeft, "px");
+      container.style.top = "".concat(meetingDetailPortalTop, "px");
+      document.body.appendChild(container);
+      var handleClickOutside = function handleClickOutside(event) {
+        if (!container.contains(event.target)) {
+          setShowMeetingDetailPortal(false);
+        }
+      };
+      document.addEventListener('mousedown', handleClickOutside);
+      return function () {
+        document.body.removeChild(container);
+        document.removeEventListener('mousedown', handleClickOutside);
+      };
+    }
+  }, [isShowMeetingDetailPortal, container, meetingDetailPortalLeft, meetingDetailPortalTop, setShowMeetingDetailPortal]);
+  if (!isShowMeetingDetailPortal) {
+    return null;
+  }
+  return /*#__PURE__*/_reactDom["default"].createPortal(/*#__PURE__*/(0, _jsxRuntime.jsx)(_meetingDetails.MeetingDetails, {}), container);
+});
+var _default = exports["default"] = MeetingDetailsPortal;

package/lib/fragments/control-bar/meeting-details/meeting-details.d.ts

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

package/lib/fragments/control-bar/meeting-details/meeting-details.js

@@ -0,0 +1,179 @@
+"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.error.to-string.js");
+require("core-js/modules/es.array.concat.js");
+require("core-js/modules/es.array.includes.js");
+require("core-js/modules/es.date.to-json.js");
+require("core-js/modules/es.json.stringify.js");
+require("core-js/modules/es.regexp.exec.js");
+require("core-js/modules/es.string.includes.js");
+require("core-js/modules/es.string.replace.js");
+require("core-js/modules/web.btoa.js");
+require("core-js/modules/web.dom-exception.constructor.js");
+require("core-js/modules/web.dom-exception.stack.js");
+require("core-js/modules/web.dom-exception.to-string-tag.js");
+var _button = require("agora-ui-foundation/lib/components/button");
+var _icon = require("agora-ui-foundation/lib/components/icon");
+var _toast = require("agora-ui-foundation/lib/components/toast");
+var _type = require("agora-ui-foundation/lib/components/icon/type");
+var _i18n = require("agora-ui-foundation/lib/i18n");
+var _copyText = require("../../../utilities/copyText");
+var _mobxReact = require("mobx-react");
+var _react = require("react");
+require("./meeting-detail.css");
+var _dayjs = _interopRequireDefault(require("dayjs"));
+var _context = require("../context");
+var _jsxRuntime = require("react/jsx-runtime");
+var MeetingDetails = exports.MeetingDetails = (0, _mobxReact.observer)(function () {
+  var t = (0, _i18n.useI18n)();
+  var _useContext = (0, _react.useContext)(_context.StoreContext),
+    startTime = _useContext.startTime,
+    roomInfo = _useContext.roomInfo,
+    userName = _useContext.userName,
+    inviteLink = _useContext.inviteLink,
+    setShowMeetingDetailPortal = _useContext.setShowMeetingDetailPortal;
+  var getShareLink = function getShareLink() {
+    var info = {
+      roomId: roomInfo === null || roomInfo === void 0 ? void 0 : roomInfo.roomId,
+      roomName: roomInfo === null || roomInfo === void 0 ? void 0 : roomInfo.roomName,
+      userName: userName
+    };
+    var strArgs = "info=".concat(btoa(encodeURIComponent(JSON.stringify(info))));
+    var baseLink = "".concat(inviteLink);
+    if (baseLink.includes('?')) {
+      return "".concat(baseLink, "&").concat(strArgs);
+    }
+    return "".concat(baseLink, "?").concat(strArgs);
+  };
+  var shareLink = (0, _react.useMemo)(function () {
+    return getShareLink();
+  }, []);
+  if (!roomInfo || !userName) return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {});
+  var displayMeetingId = roomInfo.roomId.replace(/(.{3})/g, '$1 ');
+  var detailText = t('fmt_sharing_label_invitationdetailed', {
+    reason1: userName,
+    reason2: roomInfo === null || roomInfo === void 0 ? void 0 : roomInfo.roomName,
+    reason3: (0, _dayjs["default"])(startTime !== null && startTime !== void 0 ? startTime : 0).format('YYYY-MM-DD HH:mm:ss'),
+    reason4: shareLink
+  });
+  function handleCopyMeetingId(meetingId) {
+    (0, _copyText.copyText)(meetingId).then(function () {
+      setShowMeetingDetailPortal(false);
+      _toast.FcrToastApi.open({
+        toastProps: {
+          type: 'info',
+          content: t('fmt_statusbar_status_coppied')
+        }
+      });
+    })["catch"](function () {
+      setShowMeetingDetailPortal(false);
+      _toast.FcrToastApi.open({
+        toastProps: {
+          type: 'warn',
+          content: t('fmt_information_tips_numbercopyfailed')
+        }
+      });
+    });
+  }
+  function handlerCopyMeetingShareLink(shareLink) {
+    (0, _copyText.copyText)(shareLink).then(function () {
+      setShowMeetingDetailPortal(false);
+      _toast.FcrToastApi.open({
+        toastProps: {
+          type: 'info',
+          content: t('fmt_additional_tips_invitation')
+        }
+      });
+    })["catch"](function () {
+      setShowMeetingDetailPortal(false);
+      _toast.FcrToastApi.open({
+        toastProps: {
+          type: 'warn',
+          content: t('fmt_additional_tips_invitationfailed')
+        }
+      });
+    });
+  }
+  function handlerCopyMeetingDetail(detailText) {
+    (0, _copyText.copyText)(detailText).then(function () {
+      setShowMeetingDetailPortal(false);
+      _toast.FcrToastApi.open({
+        toastProps: {
+          type: 'info',
+          content: t('fmt_sharing_tips_copyto_clipboard')
+        }
+      });
+    })["catch"](function () {
+      _toast.FcrToastApi.open({
+        toastProps: {
+          type: 'warn',
+          content: t('fmt_sharing_tips_copyfull_failed')
+        }
+      });
+    });
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: "meeting-details",
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "meeting-details__header",
+      children: t('fmt_information_label_sharemeetingnumber')
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "meeting-details__content",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "meeting-details__content-meeting-subject",
+        children: roomInfo.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(roomInfo.roomId);
+          },
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+            type: _type.FcrIconType.FCR_COPY,
+            size: 22
+          })
+        })]
+      }), /*#__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,
+            size: 22
+          })
+        })]
+      })]
+    }), /*#__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, {
+          type: _type.FcrIconType.FCR_LINK,
+          size: 20
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          children: t('fmt_sharing_button_copydetailed')
+        })]
+      })
+    })]
+  });
+});

package/lib/fragments/control-bar/more-actions/index.css

@@ -1,14 +1,23 @@
 .leave-room-dialog {
 }
+
 .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;
 }
@@ -17,3 +26,47 @@
 .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;
+}
+
+.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;
+}