fcr-ui-scene 3.5.0 → 3.6.0

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

@@ -0,0 +1,214 @@
+"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.CommonVideoRenderer = void 0;
+require("core-js/modules/es.array.concat.js");
+require("core-js/modules/es.array.map.js");
+require("core-js/modules/esnext.async-iterator.map.js");
+require("core-js/modules/esnext.iterator.map.js");
+var _store = require("../store");
+var _type = require("../type");
+var _boardContext = _interopRequireDefault(require("../../../utilities/board-context"));
+var _imports = require("fcr-core/lib/imports");
+var _memberActions = require("../../components/member-window/components/member-actions");
+var _imports2 = require("agora-rte-sdk/lib/imports");
+var _memberWindow = require("../../components/member-window");
+var _screen = require("../../../utilities/screen");
+var _react = require("react");
+var _fcrCore = require("fcr-core");
+var _muteAction = require("../../../utilities/mute-action");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _mobxReact = require("mobx-react");
+var _Gallery = require("./Gallery");
+var _jsxRuntime = require("react/jsx-runtime");
+var useFormatWindowData = function useFormatWindowData() {
+  var _useContext = (0, _react.useContext)(_store.StoreContext),
+    hasMutePermission = _useContext.hasMutePermission,
+    hasUnmutePermission = _useContext.hasUnmutePermission,
+    hasRequestStartAudioPermission = _useContext.hasRequestStartAudioPermission,
+    userVolumeMap = _useContext.userVolumeMap,
+    getAllowedOperations = _useContext.getAllowedOperations;
+  return function (windowData) {
+    var isMySelf = windowData.isMySelf,
+      hasMicrophoneAudioStream = windowData.hasMicrophoneAudioStream,
+      ownerRoleType = windowData.ownerRoleType,
+      videoStreamId = windowData.videoStreamId,
+      audioStreamId = windowData.audioStreamId;
+    var targetRole = isMySelf ? _fcrCore.FcrPrivilegeUserRole.SELF : ownerRoleType;
+    var muteAudioPermission = hasMutePermission(targetRole);
+    var startAudioPermission = hasUnmutePermission(targetRole);
+    var requestStartAudioPermission = hasRequestStartAudioPermission(ownerRoleType);
+    var _actionMute = (0, _muteAction.actionMute)(isMySelf, hasMicrophoneAudioStream, muteAudioPermission, startAudioPermission, requestStartAudioPermission),
+      isShowActionAudio = _actionMute.isShowActionAudio,
+      actionAudioTag = _actionMute.actionAudioTag;
+    var id = isMySelf ? '0' : videoStreamId || audioStreamId;
+    var volume = userVolumeMap.get(id || '') || 0;
+    var allowedOperations = getAllowedOperations(ownerRoleType, isMySelf);
+    return {
+      isShowActionAudio: isShowActionAudio,
+      actionAudioTag: actionAudioTag,
+      volume: volume,
+      id: id,
+      allowedOperations: allowedOperations
+    };
+  };
+};
+var useCommonProps = function useCommonProps(layoutType) {
+  var _useContext2 = (0, _react.useContext)(_store.StoreContext),
+    galleryList = _useContext2.galleryList,
+    participantCount = _useContext2.participantCount,
+    carouselList = _useContext2.carouselList,
+    layout = _useContext2.layout;
+  var isMainWindow = galleryList.length === 1;
+  var isGridLayout = layoutType === _type.FcrUILayoutType.GALLERY;
+  var className = isGridLayout ? (0, _classnames["default"])('fcr-layout-content-gallery-row-item', {
+    'fcr-layout-content-gallery-row-noborder': participantCount === 1 && isMainWindow,
+    'fcr-layout-content-gallery-row-onlyone': isMainWindow
+  }) : 'fcr-layout-content-carousel-item';
+  var showToolbar = isGridLayout && isMainWindow;
+  var list = isGridLayout ? galleryList : carouselList;
+  var canShowSpeakerSpotlight = isGridLayout ? galleryList.length > 1 : true;
+  var isMask = isGridLayout ? !isMainWindow : true;
+  var isToggleMainStream = isGridLayout && layout === _type.FcrUIVideoWindowLayoutType.Speaker && isMainWindow;
+  var memberWindowPreviewType = isGridLayout ? _type.FcrUILayoutType.GALLERY : _type.FcrUILayoutType.CAROUSEL;
+  var videoStreamType = isGridLayout ? galleryList.length > 4 ? _imports.AgoraRtcVideoStreamType.LOW_STREAM : _imports.AgoraRtcVideoStreamType.HIGH_STREAM : _imports.AgoraRtcVideoStreamType.LOW_STREAM;
+  var iconSize = isGridLayout ? 24 : 16;
+  var windowSize = isGridLayout ? 'large' : 'normal';
+  return {
+    className: className,
+    showToolbar: showToolbar,
+    list: list,
+    canShowSpeakerSpotlight: canShowSpeakerSpotlight,
+    isMask: isMask,
+    isToggleMainStream: isToggleMainStream,
+    memberWindowPreviewType: memberWindowPreviewType,
+    videoStreamType: videoStreamType,
+    iconSize: iconSize,
+    windowSize: windowSize
+  };
+};
+var CommonVideoRenderer = exports.CommonVideoRenderer = (0, _mobxReact.observer)(function (_ref) {
+  var onPageChange = _ref.onPageChange,
+    dimensions = _ref.dimensions,
+    data = _ref.data,
+    layoutType = _ref.layoutType,
+    cols = _ref.cols;
+  var _useContext3 = (0, _react.useContext)(_store.StoreContext),
+    addPin = _useContext3.addPin,
+    openPrivateChat = _useContext3.openPrivateChat,
+    whiteboard = _useContext3.whiteboard,
+    localUserRole = _useContext3.localUserRole,
+    sendParticipantEvent = _useContext3.sendParticipantEvent,
+    muteAudio = _useContext3.muteAudio,
+    removePin = _useContext3.removePin,
+    toggleMainStream = _useContext3.toggleMainStream,
+    hasPinnedStream = _useContext3.hasPinnedStream,
+    setVideoOrientation = _useContext3.setVideoOrientation,
+    interpreterUserList = _useContext3.interpreterUserList,
+    isInterpreterEnabled = _useContext3.isInterpreterEnabled,
+    openRenameDialog = _useContext3.openRenameDialog,
+    isVideoSuspended = _useContext3.isVideoSuspended;
+  var getFormatWindowData = useFormatWindowData();
+  var commonProps = useCommonProps(layoutType);
+  var toggleFullScreen = function toggleFullScreen() {
+    (0, _screen.isFullScreen)() ? (0, _screen.exitFullScreen)() : (0, _screen.enterFullScreen)();
+  };
+  var renderBoardContent = function renderBoardContent(windowData, windowId) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_boardContext["default"].Provider, {
+      value: {
+        showToolbar: commonProps.showToolbar
+      },
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: (0, _classnames["default"])("fcr-member-board"),
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          onDoubleClick: function onDoubleClick() {
+            return commonProps.isToggleMainStream ? toggleFullScreen() : toggleMainStream(windowId);
+          },
+          className: (0, _classnames["default"])('fcr-member-board-mask', {
+            'fcr-member-board-mask-show': commonProps.isMask
+          })
+        }), commonProps.isMask && renderMemberWindowActions(windowData, true), whiteboard]
+      })
+    });
+  };
+  var renderMemberWindowActions = function renderMemberWindowActions(windowData, isBoard) {
+    var _getFormatWindowData = getFormatWindowData(windowData),
+      isShowActionAudio = _getFormatWindowData.isShowActionAudio,
+      actionAudioTag = _getFormatWindowData.actionAudioTag,
+      id = _getFormatWindowData.id,
+      volume = _getFormatWindowData.volume,
+      allowedOperations = _getFormatWindowData.allowedOperations;
+    var showActionBottomLabel = commonProps.list.length > 1 && windowData.isSpeakerSpotlight;
+    var iconSize = isBoard ? 24 : commonProps.iconSize;
+    var windowSize = isBoard ? 'large' : commonProps.windowSize;
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_memberActions.MemberWindowActions, {
+      isShowActionAudio: isShowActionAudio,
+      actionAudioTag: actionAudioTag,
+      showActionBottomLabel: showActionBottomLabel,
+      allowedOperations: allowedOperations,
+      setVideoOrientation: setVideoOrientation,
+      hasPinnedStream: hasPinnedStream,
+      localUserRole: localUserRole,
+      sendParticipantEvent: sendParticipantEvent,
+      muteAudio: muteAudio,
+      openPrivateChat: openPrivateChat,
+      windowData: windowData,
+      showRotation: (0, _imports2.isElectron)(),
+      interpreterUserList: interpreterUserList,
+      isInterpreterEnabled: isInterpreterEnabled,
+      handleRename: openRenameDialog,
+      id: id,
+      volume: volume,
+      iconSize: iconSize,
+      windowSize: windowSize
+    });
+  };
+  var handleDoubleClick = function handleDoubleClick(windowId, isScreenSharing, isPin) {
+    // if (commonProps.isToggleMainStream) {
+    //   toggleFullScreen();
+    // } else if (isScreenSharing || isPin) {
+    //   toggleMainStream(windowId);
+    // } else {
+    //   if (layoutType === FcrUILayoutType.CAROUSEL) {
+    //     onPageChange?.(0);
+    //   }
+    // }
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+    children: data.map(function (windowData) {
+      var windowId = windowData.windowId,
+        isPin = windowData.isPin,
+        type = windowData.type,
+        videoSourceType = windowData.videoSourceType;
+      var isBoard = type === _type.FcrUIWindowType.BOARD;
+      var isScreenSharing = videoSourceType === _fcrCore.FcrVideoSourceType.SCREEN;
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: commonProps.className,
+        style: {
+          width: cols && cols > 1 ? "calc(".concat(100 / cols, "% - ").concat(_Gallery.Gap * 2, "px)") : dimensions.width,
+          height: dimensions.height
+        },
+        children: isBoard ? renderBoardContent(windowData, windowId) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_memberWindow.MemberWindow, {
+          memberWindowPreviewType: commonProps.memberWindowPreviewType,
+          canShowSpeakerSpotlight: commonProps.canShowSpeakerSpotlight,
+          width: dimensions.width,
+          height: dimensions.height,
+          slot: renderMemberWindowActions(windowData, false),
+          videoRenderMode: _imports.AgoraRtcRenderMode.FIT,
+          videoStreamType: commonProps.videoStreamType,
+          windowData: windowData,
+          showAvatar: true,
+          onRemovePin: removePin,
+          onDoubleClick: function onDoubleClick() {
+            return handleDoubleClick(windowId, isScreenSharing, isPin);
+          },
+          isVideoSuspended: isVideoSuspended
+        }, windowId)
+      }, windowId);
+    })
+  });
+});

package/lib/modules/layout/components/Gallery.d.ts

@@ -1 +1,2 @@
+export declare const Gap = 5;
 export declare const Gallery: () => import("react/jsx-runtime").JSX.Element;

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

@@ -11,6 +11,7 @@ require("core-js/modules/es.array.iterator.js");
 require("core-js/modules/es.date.to-string.js");
 require("core-js/modules/es.function.name.js");
 require("core-js/modules/es.object.define-property.js");
+require("core-js/modules/es.object.to-string.js");
 require("core-js/modules/es.regexp.exec.js");
 require("core-js/modules/es.regexp.test.js");
 require("core-js/modules/es.regexp.to-string.js");
@@ -20,36 +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/es.object.to-string.js");
-require("core-js/modules/esnext.iterator.constructor.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]
         })]
       })]
     })]