fcr-ui-scene 3.5.1 → 3.6.0

package/lib/modules/layout/components/Gallery.js

@@ -21,35 +21,24 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Gallery = void 0;
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+exports.Gap = exports.Gallery = void 0;
 require("core-js/modules/es.array.join.js");
-require("core-js/modules/es.array.map.js");
 require("core-js/modules/es.array.push.js");
 require("core-js/modules/es.array.slice.js");
 require("core-js/modules/es.array.unshift.js");
-require("core-js/modules/esnext.async-iterator.map.js");
-require("core-js/modules/esnext.iterator.map.js");
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _mobxReact = require("mobx-react");
 var _react = require("react");
-var _classnames = _interopRequireDefault(require("classnames"));
 var _icon = require("agora-ui-foundation/lib/components/icon");
 var _type = require("agora-ui-foundation/lib/components/icon/type");
 var _hooks = require("../../../utilities/hooks");
 var _store = require("../store");
 var _type2 = require("../type");
-var _memberWindow = require("../../components/member-window");
 var _utils = require("./utils");
-var _type3 = require("agora-rte-sdk/lib/core/rtc/type");
 var _fcrCore = require("fcr-core");
-var _boardContext = _interopRequireDefault(require("../../../utilities/board-context"));
-var _screen = require("../../../utilities/screen");
 var _button = require("agora-ui-foundation/lib/components/button");
 var _i18n = require("agora-ui-foundation/lib/i18n");
-var _muteAction = require("../../../utilities/mute-action");
-var _env = require("agora-foundation/lib/utilities/env");
-var _memberBoard = require("../../components/member-window/components/member-board");
-var _memberActions = require("../../components/member-window/components/member-actions");
+var _CommonVideoRenderer = require("./CommonVideoRenderer");
 var _jsxRuntime = require("react/jsx-runtime");
 function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t["return"] || t["return"](); } finally { if (u) throw o; } } }; }
 function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
@@ -61,20 +50,13 @@ var PaddingY = 10;
 var PaddingY1 = 10 + 38;
 var PaddingY2 = 10 + 58;
 var PaddingYGallery = PaddingY1 + PaddingY2;
-var Gap = 5;
+var Gap = exports.Gap = 5;
 var ArrowWidth = 40;
 var PaddingArrow = 15;
 var getMaxRows = function getMaxRows(size) {
   return size === _type2.GalleryMaxSize.Large ? 5 : size === _type2.GalleryMaxSize.Normal ? 4 : 0;
 };
 var getMaxCols = getMaxRows;
-var eachSlice = function eachSlice(a, n) {
-  var result = [];
-  for (var i = 0; i < a.length; i += n) {
-    result.push(a.slice(i, i + n));
-  }
-  return result;
-};
 
 // prettier-ignore
 var GridSequence = [[1, 1], [1, 2], [2, 1], [2, 2], [1, 3], [3, 1], [2, 3], [3, 2], [3, 3], [1, 4], [4, 1], [2, 4], [4, 2], [3, 4], [4, 3], [4, 4], [1, 5], [5, 1], [2, 5], [5, 2], [3, 5], [5, 3], [4, 5], [5, 4], [5, 5]];
@@ -93,32 +75,33 @@ var iterate = function iterate(maxRows, maxCols) {
   }
   return result;
 };
-var Gallery = exports.Gallery = (0, _mobxReact.observer)(function () {
+var ReturnBar = (0, _mobxReact.observer)(function () {
   var _useContext = (0, _react.useContext)(_store.StoreContext),
     layout = _useContext.layout,
-    galleryMaxSize = _useContext.galleryMaxSize,
-    galleryList = _useContext.galleryList,
-    participantCount = _useContext.participantCount,
-    addPin = _useContext.addPin,
-    hasMutePermission = _useContext.hasMutePermission,
-    openPrivateChat = _useContext.openPrivateChat,
-    whiteboard = _useContext.whiteboard,
-    localUserRole = _useContext.localUserRole,
-    sendParticipantEvent = _useContext.sendParticipantEvent,
-    muteAudio = _useContext.muteAudio,
-    removePin = _useContext.removePin,
     toggleMainStream = _useContext.toggleMainStream,
-    hasPinnedStream = _useContext.hasPinnedStream,
     currentShareData = _useContext.currentShareData,
-    getAllowedOperations = _useContext.getAllowedOperations,
-    setVideoOrientation = _useContext.setVideoOrientation,
-    hasUnmutePermission = _useContext.hasUnmutePermission,
-    hasRequestStartAudioPermission = _useContext.hasRequestStartAudioPermission,
-    interpreterUserList = _useContext.interpreterUserList,
-    isInterpreterEnabled = _useContext.isInterpreterEnabled,
-    openRenameDialog = _useContext.openRenameDialog,
-    userVolumeMap = _useContext.userVolumeMap,
-    isVideoSuspended = _useContext.isVideoSuspended;
+    asideContent = _useContext.asideContent;
+  var returnShareingContent = function returnShareingContent() {
+    if (currentShareData) toggleMainStream(currentShareData === null || currentShareData === void 0 ? void 0 : currentShareData.windowId);
+  };
+  var transI18n = (0, _i18n.useI18n)();
+  return currentShareData && layout === _type2.FcrUIVideoWindowLayoutType.Gallery ? /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: "fcr-layout-content-gallery-return-bar",
+    children: [currentShareData.isMySelf ? transI18n('fmt_settings_labels_you') : currentShareData.userName, transI18n('fmt_uimanager_labels_sharing'), currentShareData.videoSourceType === _fcrCore.FcrVideoSourceType.SCREEN ? transI18n('fmt_uimanager_labels_screen') : transI18n('fmt_uimanager_labels_whiteboard'), /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.FcrButton, {
+      onClick: returnShareingContent,
+      size: "XXS",
+      styleType: "normal",
+      shape: "rounded",
+      children: transI18n('fmt_uimanager_button_returntocontent')
+    })]
+  }) : null;
+});
+var Gallery = exports.Gallery = (0, _mobxReact.observer)(function () {
+  var _useContext2 = (0, _react.useContext)(_store.StoreContext),
+    layout = _useContext2.layout,
+    galleryMaxSize = _useContext2.galleryMaxSize,
+    galleryList = _useContext2.galleryList,
+    participantCount = _useContext2.participantCount;
   var _useDelayedMeasure = (0, _hooks.useDelayedMeasure)(),
     _useDelayedMeasure2 = (0, _slicedToArray2["default"])(_useDelayedMeasure, 2),
     ref = _useDelayedMeasure2[0],
@@ -127,7 +110,6 @@ var Gallery = exports.Gallery = (0, _mobxReact.observer)(function () {
     _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
     page_ = _useState2[0],
     setPage = _useState2[1];
-  var videoStreamType = galleryList.length > 4 ? _type3.AgoraRtcVideoStreamType.LOW_STREAM : _type3.AgoraRtcVideoStreamType.HIGH_STREAM;
   var isGallery = layout === _type2.FcrUIVideoWindowLayoutType.Gallery;
   var paddingY = isGallery ? PaddingYGallery : PaddingY * 2;
   var grid = (0, _react.useMemo)(function () {
@@ -155,32 +137,15 @@ var Gallery = exports.Gallery = (0, _mobxReact.observer)(function () {
     }
     return null;
   }, [layout, bounds.width, bounds.height, galleryMaxSize, galleryList.slice()]);
-  var videoSize = (0, _react.useMemo)(function () {
-    if (grid) {
-      var width = (bounds.width - PaddingX * 2 - Gap * (grid.cols - 1)) / grid.cols;
-      var height = (bounds.height - paddingY - Gap * (grid.rows - 1)) / grid.rows;
-      height = Math.min(height, width * _type2.VideoRatio);
-      width = Math.min(width, height / _type2.VideoRatio);
-      return {
-        width: width,
-        height: height
-      };
-    } else {
-      return {
-        width: 0,
-        height: 0
-      };
-    }
-  }, [layout, bounds.width, bounds.height, grid]);
   var itemsPerPage = grid ? grid.rows * grid.cols : 0;
   var maxPages = itemsPerPage > 0 ? Math.ceil(galleryList.length / itemsPerPage) : 1;
   var page = (0, _utils.clamp)(page_, 0, maxPages - 1);
   var hasPrevPage = page > 0;
   var hasNextPage = page < maxPages - 1;
+  var keyOfGalleryUsers = galleryList.join('-');
   var navigate = (0, _react.useCallback)(function (direction) {
     return setPage((0, _utils.clamp)(page + direction, 0, maxPages - 1));
   }, [page, maxPages]);
-  var keyOfGalleryUsers = galleryList.join('-');
   var cells = (0, _react.useMemo)(function () {
     if (grid) {
       var items = galleryList.slice(page * itemsPerPage, (page + 1) * itemsPerPage);
@@ -192,30 +157,36 @@ var Gallery = exports.Gallery = (0, _mobxReact.observer)(function () {
           item && items.unshift(item);
         }
       }
-      return eachSlice(items, grid.cols);
+      return items;
     }
     return [];
   }, [keyOfGalleryUsers, page, itemsPerPage, grid && grid.cols, galleryList.slice()]);
-  var returnShareingContent = function returnShareingContent() {
-    if (currentShareData) toggleMainStream(currentShareData === null || currentShareData === void 0 ? void 0 : currentShareData.windowId);
-  };
-  var size = galleryList.length === 1 ? {
-    width: bounds.width,
-    height: bounds.height - paddingY + (participantCount > 1 ? 20 : 26)
-  } : videoSize;
-  var transI18n = (0, _i18n.useI18n)();
-  var returnBar = currentShareData && layout === _type2.FcrUIVideoWindowLayoutType.Gallery && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-    className: "fcr-layout-content-gallery-return-bar",
-    children: [currentShareData.isMySelf ? transI18n('fmt_settings_labels_you') : currentShareData.userName, transI18n('fmt_uimanager_labels_sharing'), currentShareData.videoSourceType === _fcrCore.FcrVideoSourceType.SCREEN ? transI18n('fmt_uimanager_labels_screen') : transI18n('fmt_uimanager_labels_whiteboard'), /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.FcrButton, {
-      onClick: returnShareingContent,
-      size: "XXS",
-      styleType: "normal",
-      shape: "rounded",
-      children: transI18n('fmt_uimanager_button_returntocontent')
-    })]
+  var size = (0, _react.useMemo)(function () {
+    var videoSize = {
+      width: 0,
+      height: 0
+    };
+    if (grid) {
+      var width = (bounds.width - PaddingX * 2 - Gap * (grid.cols - 1)) / grid.cols;
+      var height = (bounds.height - paddingY - Gap * (grid.rows - 1)) / grid.rows;
+      height = Math.min(height, width * _type2.VideoRatio);
+      width = Math.min(width, height / _type2.VideoRatio);
+      videoSize = {
+        width: width,
+        height: height
+      };
+    }
+    return galleryList.length === 1 ? {
+      width: bounds.width,
+      height: bounds.height - paddingY + (participantCount > 1 ? 20 : 26)
+    } : videoSize;
+  }, [layout, bounds.width, bounds.height, grid, galleryList, participantCount]);
+  var arrow = /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
+    className: "fcr-layout-content-gallery-arrow-content",
+    children: [page + 1, "/", maxPages]
   });
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-    children: [returnBar, /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(ReturnBar, {}), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       className: "fcr-layout-content-gallery",
       ref: ref,
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
@@ -223,122 +194,14 @@ var Gallery = exports.Gallery = (0, _mobxReact.observer)(function () {
         style: {
           gap: Gap,
           marginTop: isGallery ? PaddingY1 - PaddingY2 : 0,
-          position: isGallery ? 'inherit' : 'absolute'
+          position: isGallery ? 'inherit' : 'absolute',
+          width: grid ? (size.width + Gap * 2) * (grid === null || grid === void 0 ? void 0 : grid.cols) : 'auto'
         },
-        children: cells.map(function (row, i) {
-          return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-            className: "fcr-layout-content-gallery-row",
-            style: {
-              gap: Gap
-            },
-            children: row.map(function (windowData) {
-              var isSpeakerMode = layout === _type2.FcrUIVideoWindowLayoutType.Speaker;
-              var isMainWindow = galleryList.length === 1;
-              var showActionBottomLabel = galleryList.length > 1 && windowData.isSpeakerSpotlight;
-              var muteAudioPermission = hasMutePermission(windowData.isMySelf ? _fcrCore.FcrPrivilegeUserRole.SELF : windowData.ownerRoleType);
-              var startAudioPermission = hasUnmutePermission(windowData.isMySelf ? _fcrCore.FcrPrivilegeUserRole.SELF : windowData.ownerRoleType);
-              var requestStartAudioPermission = hasRequestStartAudioPermission(windowData.ownerRoleType);
-              var _actionMute = (0, _muteAction.actionMute)(windowData.isMySelf, windowData.hasMicrophoneAudioStream, muteAudioPermission, startAudioPermission, requestStartAudioPermission),
-                isShowActionAudio = _actionMute.isShowActionAudio,
-                actionAudioTag = _actionMute.actionAudioTag;
-              var cls = (0, _classnames["default"])('fcr-layout-content-gallery-row-item', {
-                'fcr-layout-content-gallery-row-noborder': participantCount == 1 && galleryList.length == 1,
-                'fcr-layout-content-gallery-row-onlyone': galleryList.length == 1
-              });
-              var isMySelf = windowData.isMySelf,
-                videoStreamId = windowData.videoStreamId,
-                audioStreamId = windowData.audioStreamId;
-              var id = isMySelf ? '0' : videoStreamId || audioStreamId;
-              var volume = userVolumeMap.get(id || '') || 0;
-              return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-                className: cls,
-                style: {
-                  width: size.width,
-                  height: size.height
-                },
-                children: windowData.type === _type2.FcrUIWindowType.BOARD ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_boardContext["default"].Provider, {
-                  value: {
-                    showToolbar: galleryList.length === 1
-                  },
-                  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_memberBoard.MemberBoard, {
-                    isShowActionAudio: isShowActionAudio,
-                    actionAudioTag: actionAudioTag,
-                    showActionBottomLabel: showActionBottomLabel,
-                    windowData: windowData,
-                    allowedOperations: getAllowedOperations(windowData.ownerRoleType, windowData.isMySelf),
-                    onMaskDoubleClick: function onMaskDoubleClick() {
-                      if (isSpeakerMode && isMainWindow) {
-                        (0, _screen.isFullScreen)() ? (0, _screen.exitFullScreen)() : (0, _screen.enterFullScreen)();
-                        return;
-                      }
-                      toggleMainStream(windowData.windowId);
-                    },
-                    isMask: galleryList.length !== 1,
-                    slot: whiteboard,
-                    hasPinnedStream: hasPinnedStream,
-                    localUserRole: localUserRole,
-                    sendParticipantEvent: sendParticipantEvent,
-                    muteAudio: muteAudio,
-                    openPrivateChat: openPrivateChat,
-                    setVideoOrientation: setVideoOrientation,
-                    interpreterUserList: interpreterUserList,
-                    isInterpreterEnabled: isInterpreterEnabled,
-                    openRenameDialog: openRenameDialog,
-                    id: id,
-                    volume: volume
-                  })
-                }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_memberWindow.MemberWindow, {
-                  canShowSpeakerSpotlight: galleryList.length > 1,
-                  memberWindowPreviewType: 'gallery',
-                  slot: /*#__PURE__*/(0, _jsxRuntime.jsx)(_memberActions.MemberWindowActions, {
-                    interpreterUserList: interpreterUserList,
-                    isInterpreterEnabled: isInterpreterEnabled,
-                    isShowActionAudio: isShowActionAudio,
-                    actionAudioTag: actionAudioTag,
-                    showActionBottomLabel: showActionBottomLabel,
-                    allowedOperations: getAllowedOperations(windowData.ownerRoleType, windowData.isMySelf),
-                    setVideoOrientation: setVideoOrientation,
-                    hasPinnedStream: hasPinnedStream,
-                    localUserRole: localUserRole,
-                    sendParticipantEvent: sendParticipantEvent,
-                    muteAudio: muteAudio,
-                    openPrivateChat: openPrivateChat,
-                    windowSize: "large",
-                    windowData: windowData,
-                    iconSize: 24,
-                    showRotation: (0, _env.isElectron)(),
-                    handleRename: openRenameDialog,
-                    renderListLength: galleryList.length,
-                    id: id,
-                    volume: volume
-                  }),
-                  videoRenderMode: _type3.AgoraRtcRenderMode.FIT,
-                  videoStreamType: videoStreamType,
-                  windowData: windowData,
-                  showAvatar: true,
-                  width: size.width,
-                  height: size.height,
-                  onRemovePin: removePin,
-                  onDoubleClick: function onDoubleClick() {
-                    if (isSpeakerMode && isMainWindow) {
-                      (0, _screen.isFullScreen)() ? (0, _screen.exitFullScreen)() : (0, _screen.enterFullScreen)();
-                      return;
-                    }
-                    if (windowData.videoSourceType === _fcrCore.FcrVideoSourceType.SCREEN || windowData.isPin) {
-                      toggleMainStream(windowData.windowId);
-                    } else {
-                      if (!windowData.isPin) {
-                        addPin(windowData.windowId);
-                      } else {
-                        toggleMainStream(windowData.windowId);
-                      }
-                    }
-                  },
-                  isVideoSuspended: isVideoSuspended
-                }, windowData.windowId)
-              }, windowData.windowId);
-            })
-          }, i);
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CommonVideoRenderer.CommonVideoRenderer, {
+          data: cells,
+          dimensions: size,
+          layoutType: _type2.FcrUILayoutType.GALLERY,
+          cols: grid === null || grid === void 0 ? void 0 : grid.cols
         })
       }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
         className: "fcr-layout-content-gallery-arrows",
@@ -362,10 +225,7 @@ var Gallery = exports.Gallery = (0, _mobxReact.observer)(function () {
                 iconPrimary: 'currentColor'
               }
             })
-          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
-            className: "fcr-layout-content-gallery-arrow-content",
-            children: [page + 1, "/", maxPages]
-          })]
+          }), arrow]
         }), hasNextPage && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
           className: "fcr-layout-content-gallery-arrow fcr-layout-content-gallery-arrow-left",
           style: {
@@ -386,10 +246,7 @@ var Gallery = exports.Gallery = (0, _mobxReact.observer)(function () {
                 iconPrimary: 'currentColor'
               }
             })
-          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
-            className: "fcr-layout-content-gallery-arrow-content",
-            children: [page + 1, "/", maxPages]
-          })]
+          }), arrow]
         })]
       })]
     })]

package/lib/modules/layout/components/index.css

@@ -6,6 +6,8 @@
   background-color: var(--fcr_web_ui_scene_fill3);
   height: 100%;
   overflow: hidden;
+  min-width: 825px;
+  min-height: 600px;
 }
 
 .fcr-layout-aside {
@@ -29,6 +31,7 @@
   align-items: center;
   justify-content: center;
   cursor: ew-resize;
+  /* background-color: var(--fcr_ui_scene_video); */
 }
 
 .fcr-layout-aside-body {
@@ -267,10 +270,11 @@
 
 .fcr-layout-content-gallery-wrapper {
   display: flex;
-  flex-flow: column nowrap;
+  /* flex-flow: column nowrap; */
   justify-content: center;
   font-size: 0;
   top: 0;
+  flex-wrap: wrap;
 }
 
 .fcr-layout-content-gallery-return-bar {
@@ -296,16 +300,18 @@
   font-size: 1rem;
 }
 
-.fcr-layout-content-gallery-row .fcr-layout-content-gallery-row-item {
+.fcr-layout-content-gallery-wrapper .fcr-layout-content-gallery-row-item {
   border-radius: var(--fcr_cornerradius_s);
   overflow: hidden;
 }
 
-.fcr-layout-content-gallery-row .fcr-layout-content-gallery-row-noborder {
+.fcr-layout-content-gallery-wrapper .fcr-layout-content-gallery-row-noborder {
   border-radius: 0px;
 }
 
-.fcr-layout-content-gallery-row .fcr-layout-content-gallery-row-item .fcr-member-window-excitation {
+.fcr-layout-content-gallery-wrapper
+  .fcr-layout-content-gallery-row-item
+  .fcr-member-window-excitation {
   border-radius: var(--fcr_cornerradius_s);
 }
 
@@ -327,7 +333,7 @@
   flex-flow: column nowrap;
   align-items: center;
   font-size: 12px;
-  z-index: 1080;
+  z-index: 10;
 }
 
 .fcr-layout-content-gallery-arrow:has(button:disabled) {
@@ -427,25 +433,10 @@
   pointer-events: auto;
 }
 
-.fcr-user-window-actions-bottom {
-  position: absolute;
-  inset: auto auto 4px 4px;
-  color: var(--fcr_ui_scene_icontext1);
-  border-radius: var(--fcr_cornerradius_xxs);
-  /* background-color: var(--fcr_ui_scene_view_toast); */
-  backdrop-filter: blur(25px);
-  font-weight: var(--fcr_font_weight_m);
-  font-size: 10px;
-  display: inline-flex;
-  align-items: center;
-  max-width: calc(100% - 8px);
-  height: 18px;
-  overflow: hidden;
-}
-
 .fcr-user-window-actions-middle {
   inset: auto auto 26px 4px;
   font-size: 12px;
+  position: absolute;
 }
 
 .fcr-user-window-gallery .fcr-user-window-actions-bottom {
@@ -536,7 +527,7 @@
 .fcr-user-window-actions-name {
   padding: 0 8px;
   font-weight: var(--fcr_font_weight_s);
-  line-height: 1;
+  line-height: 1.5;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -546,18 +537,6 @@
   padding: 0 10px;
 }
 
-.fcr-user-window-actions-top {
-  height: 26px;
-  position: absolute;
-  inset: 3px 3px auto;
-  display: flex;
-  flex-flow: row-reverse nowrap;
-  gap: 5px;
-  font-size: 12px;
-  opacity: 0;
-  transition: opacity 0.2s;
-}
-
 .fcr-user-window:hover .fcr-user-window-actions-top {
   opacity: 1;
 }
@@ -655,3 +634,7 @@
 .participant-dialog-header-count {
   font-weight: 400;
 }
+
+.fcr-layout-content-gallery-row-onlyone {
+  border-radius: 0px !important;
+}

package/lib/modules/layout/index.d.ts

@@ -14,6 +14,7 @@ import { FcrUIVideoWindowDataSource } from '../../shared-data-source/video-windo
 import { FcrUIMemberSharedDataSource } from '../../shared-data-source/member-data';
 import { FcrUIScreenShareProvider } from '../../providers/screen-share-provider';
 import { FcrUISharedPinDataSource } from '../../shared-data-source/pin-data';
+import { FcrUIInterpreterProvider } from '../../providers/interpreter-provider';
 export declare class LayoutUIModule extends UIModule {
     private _store?;
     eventProvider?: FcrUIEventProvider;
@@ -30,6 +31,7 @@ export declare class LayoutUIModule extends UIModule {
     sharedMemberDataSource?: FcrUIMemberSharedDataSource;
     screenShareProvider?: FcrUIScreenShareProvider;
     sharedPinDataSource?: FcrUISharedPinDataSource;
+    interpreterProvider?: FcrUIInterpreterProvider;
     onNodeWillActive(): void;
     onNodeWillInactive(): void;
     getComponent(slots?: Partial<FcrLayoutSlots & {

package/lib/modules/layout/index.js

@@ -56,7 +56,8 @@ var LayoutUIModule = exports.LayoutUIModule = /*#__PURE__*/function (_UIModule)
         sharedVideoWindowDataSource: this.sharedVideoWindowDataSource,
         sharedMemberDataSource: this.sharedMemberDataSource,
         screenShareProvider: this.screenShareProvider,
-        sharedPinDataSource: this.sharedPinDataSource
+        sharedPinDataSource: this.sharedPinDataSource,
+        interpreterProvider: this.interpreterProvider
       });
     }
   }, {

package/lib/modules/layout/store.d.ts

@@ -19,6 +19,7 @@ import { FcrUIVideoWindowDataSource } from '../../shared-data-source/video-windo
 import { FcrUIMemberSharedDataSource } from '../../shared-data-source/member-data';
 import { FcrUIScreenShareProvider } from '../../providers/screen-share-provider';
 import { FcrUISharedPinDataSource } from '../../shared-data-source/pin-data';
+import { FcrUIInterpreterProvider } from '../../providers/interpreter-provider';
 export interface FcrLayoutSlots {
     participant: React.ReactNode;
     chat: React.ReactNode;
@@ -47,6 +48,7 @@ export interface LayoutStoreParams {
     sharedMemberDataSource: FcrUIMemberSharedDataSource;
     screenShareProvider: FcrUIScreenShareProvider;
     sharedPinDataSource: FcrUISharedPinDataSource;
+    interpreterProvider: FcrUIInterpreterProvider;
 }
 export default class LayoutStore implements FcrLayoutSlots, FcrUIEventObserver {
     private readonly logger;
@@ -72,6 +74,7 @@ export default class LayoutStore implements FcrLayoutSlots, FcrUIEventObserver {
     private _chatProvider;
     private _screenShareProvider;
     private _pinDataSource;
+    private _interpreterProvider;
     accessor participant: React.ReactNode;
     accessor chat: React.ReactNode;
     accessor chatAction: React.ReactNode;
@@ -88,12 +91,12 @@ export default class LayoutStore implements FcrLayoutSlots, FcrUIEventObserver {
     accessor userVolumeMap: Map<string, number>;
     accessor chatRoomState: FcrChatRoomConnectionState;
     accessor whiteboardActive: boolean;
-    accessor participantCount: number;
     accessor ownerUser: FcrUserInfo | undefined;
     get streamControl(): FcrStreamControl;
     get localUserRole(): FcrUserRole;
     get localUser(): FcrUserInfo;
     get shouldHideNonVideoParticipants(): boolean;
+    get shouldHideMyVideo(): boolean;
     get enableSpotlight(): boolean;
     get isWaterMarkEnabled(): boolean;
     get isMulti(): boolean;
@@ -127,6 +130,7 @@ export default class LayoutStore implements FcrLayoutSlots, FcrUIEventObserver {
     get interpreterUserList(): import("fcr-core/lib/room-control/interpreter-control/types").FcrInterpreterUserInfo[] | null;
     get isInterpreterEnabled(): boolean;
     constructor(params: LayoutStoreParams);
+    get participantCount(): number;
     get isVideoSuspended(): boolean;
     get asideContent(): import("../../type").FcrUIUpdateAsideParams;
     get participantsRenderAt(): "aside" | "dialog";
@@ -188,7 +192,6 @@ export default class LayoutStore implements FcrLayoutSlots, FcrUIEventObserver {
     private _switchToSpeaker;
     private _switchToGallery;
     private _setBarHovering;
-    private _onAllUserCountUpdated;
     private _initStream;
     private _isSetSpotlightEnable;
     private _handleConnectionUpdated;