fcr-ui-scene 3.4.4 → 3.5.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,27 @@ 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;
+        case _constant.RendererEventAction.SET_IS_MULTI:
+          this._store.setIsMulti(payload);
+          break;
+        case _constant.RendererEventAction.SET_CONTRL_IS_WATERMARK_ENABLE:
+          this._store.setWaterMarkEnabled(payload);
+          break;
       }
     }
   }]);

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

@@ -1,8 +1,8 @@
 .meeting-details {
   display: flex;
   flex-direction: column;
-  width: 206px;
-  padding: 15px;
+  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: 0px 0px 15px 0px #8f8f8f26;
@@ -17,18 +17,14 @@
   user-select: none;
 }
 
-.meeting-details__content {
-  margin-top: 12px;
-}
-
 .meeting-details__content-meeting-subject {
-  font-size: 12px;
-  font-weight: 600;
+  font-size: 15px;
+  font-weight: 500;
   color: var(--fcr_ui_scene_icontext1, #ffffff);
   word-break: break-all;
   text-align: left;
-  min-height: 32px;
-  line-height: 32px;
+  min-height: 34px;
+  line-height: 34px;
 }
 
 .meeting-details__content-meeting-id,
@@ -36,14 +32,15 @@
 .meeting-details__content-share-link {
   display: flex;
   align-items: center;
-  line-height: 32px;
+  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-code > span,
+.meeting-details__content-share-link > span {
   font-weight: 600;
 }
 
@@ -75,14 +72,24 @@
   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;
@@ -107,3 +114,15 @@
 .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/fragments/control-bar/meeting-details/meeting-details.js

@@ -18,6 +18,8 @@ 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");
+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 _toast = require("agora-ui-foundation/lib/components/toast");
@@ -28,16 +30,41 @@ var _mobxReact = require("mobx-react");
 var _react = require("react");
 require("./meeting-detail.css");
 var _dayjs = _interopRequireDefault(require("dayjs"));
+var _classnames = _interopRequireDefault(require("classnames"));
 var _context = require("../context");
+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)(_context.StoreContext),
     startTime = _useContext.startTime,
     roomInfo = _useContext.roomInfo,
     userName = _useContext.userName,
     inviteLink = _useContext.inviteLink,
-    setShowMeetingDetailPortal = _useContext.setShowMeetingDetailPortal;
+    setShowMeetingDetailPortal = _useContext.setShowMeetingDetailPortal,
+    password = _useContext.password,
+    roomDuration = _useContext.roomDuration;
+  var _useMeetingTime = (0, _meetingTime.useMeetingTime)({
+      duration: roomDuration,
+      startTime: startTime
+    }),
+    meetingTime = _useMeetingTime.meetingTime;
   var getShareLink = function getShareLink() {
     var info = {
       roomId: roomInfo === null || roomInfo === void 0 ? void 0 : roomInfo.roomId,
@@ -100,15 +127,43 @@ var MeetingDetails = exports.MeetingDetails = (0, _mobxReact.observer)(function
       });
     });
   }
-  function handlerCopyMeetingDetail(detailText) {
-    (0, _copyText.copyText)(detailText).then(function () {
-      setShowMeetingDetailPortal(false);
+  function handleCopyMeetingPassword(password) {
+    (0, _copyText.copyText)(password).then(function () {
       _toast.FcrToastApi.open({
         toastProps: {
           type: 'info',
-          content: t('fmt_sharing_tips_copyto_clipboard')
+          content: t('fmt_uimanager_tips_passwordcopied')
+        }
+      });
+    })["catch"](function () {
+      _toast.FcrToastApi.open({
+        toastProps: {
+          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 () {
       _toast.FcrToastApi.open({
         toastProps: {
@@ -118,12 +173,30 @@ var MeetingDetails = exports.MeetingDetails = (0, _mobxReact.observer)(function
       });
     });
   }
+  (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.jsx)("div", {
-      className: "meeting-details__header",
-      children: t('fmt_information_label_sharemeetingnumber')
-    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       className: "meeting-details__content",
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
         className: "meeting-details__content-meeting-subject",
@@ -139,8 +212,8 @@ var MeetingDetails = exports.MeetingDetails = (0, _mobxReact.observer)(function
             return handleCopyMeetingId(roomInfo.roomId);
           },
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
-            type: _type.FcrIconType.FCR_COPY,
-            size: 22
+            type: _type.FcrIconType.FCR_COPY_ICON,
+            size: 20
           })
         })]
       }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
@@ -154,10 +227,32 @@ var MeetingDetails = exports.MeetingDetails = (0, _mobxReact.observer)(function
             return handlerCopyMeetingShareLink(shareLink);
           },
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
-            type: _type.FcrIconType.FCR_COPY,
-            size: 22
+            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.jsxs)("div", {
+        className: "meeting-details__content-share-link meeting-details__content-meeting-duration",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
+          children: t('fmt_premeeting_joinroom_mobile_label_meeting_duration')
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          children: meetingTime
+        })]
       })]
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       className: "meeting-details__footer",
@@ -168,10 +263,16 @@ var MeetingDetails = exports.MeetingDetails = (0, _mobxReact.observer)(function
           return handlerCopyMeetingDetail(detailText);
         },
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
-          type: _type.FcrIconType.FCR_LINK,
-          size: 20
+          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: t('fmt_sharing_button_copydetailed')
+          children: copyInfoState.copyText
         })]
       })
     })]

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;
+}