fcr-ui-scene 1.0.20 → 3.1.0

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

@@ -0,0 +1,271 @@
+"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.Carousel = void 0;
+require("core-js/modules/es.array.map.js");
+require("core-js/modules/es.array.slice.js");
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _mobxReact = require("mobx-react");
+var _react = require("react");
+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 _context = require("../context");
+var _type2 = require("../type");
+var _memberWindow = require("../member-window");
+var _utils = require("./utils");
+var _type3 = require("agora-rte-sdk/lib/core/rtc/type");
+var _agoraEduCore = require("agora-edu-core");
+var _boardContext = _interopRequireDefault(require("../../../utilities/board-context"));
+var _muteAction = require("../../../utilities/mute-action");
+var _jsxRuntime = require("react/jsx-runtime");
+// import { UserWindow, UserWindowActions } from './UserWindow';
+
+var Gap = 8;
+var CollapseHeight = 8;
+var HandlerHeight = 2;
+var ArrowWidth = 30;
+var MinVideoHeight = 114;
+var MaxVideoHeight = 172;
+var HandlerOverflowUp = -9999;
+var HandlerOverflowDown = 9999;
+var calcPages = function calcPages(n, pageSize) {
+  return Math.max(1, pageSize > 0 ? Math.ceil(n / pageSize) : 1);
+};
+var calcItems = function calcItems(bounds, videoWidth) {
+  return Math.max(0, Math.floor((bounds.width - (ArrowWidth + Gap) * 2 + Gap) / (videoWidth + Gap)));
+};
+var Carousel = exports.Carousel = (0, _mobxReact.observer)(function () {
+  var _useContext = (0, _react.useContext)(_context.StoreContext),
+    toggleLayout = _useContext.toggleLayout,
+    collapsed = _useContext.collapsed,
+    toggleCollapsed = _useContext.toggleCollapsed,
+    carouselList = _useContext.carouselList,
+    addPin = _useContext.addPin,
+    removePin = _useContext.removePin,
+    hasMutePermission = _useContext.hasMutePermission,
+    openPrivateChat = _useContext.openPrivateChat,
+    localUserRole = _useContext.localUserRole,
+    sendParticipantEvent = _useContext.sendParticipantEvent,
+    muteAudio = _useContext.muteAudio,
+    whiteboard = _useContext.whiteboard,
+    toggleMainStream = _useContext.toggleMainStream,
+    hasPinnedStream = _useContext.hasPinnedStream,
+    streamControl = _useContext.streamControl,
+    deviceStore = _useContext.deviceStore,
+    documentVisible = _useContext.documentVisible,
+    getAllowedOperations = _useContext.getAllowedOperations,
+    setVideoOrientation = _useContext.setVideoOrientation,
+    hasUnmutePermission = _useContext.hasUnmutePermission,
+    hasRequestStartAudioPermission = _useContext.hasRequestStartAudioPermission;
+  var _useState = (0, _react.useState)(MinVideoHeight),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    videoHeight = _useState2[0],
+    setVideoHeight = _useState2[1];
+  var _useDelayedMeasure = (0, _hooks.useDelayedMeasure)(),
+    _useDelayedMeasure2 = (0, _slicedToArray2["default"])(_useDelayedMeasure, 2),
+    ref = _useDelayedMeasure2[0],
+    bounds = _useDelayedMeasure2[1];
+  var _useState3 = (0, _react.useState)(0),
+    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+    page_ = _useState4[0],
+    setPage = _useState4[1];
+  var _useState5 = (0, _react.useState)(false),
+    _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
+    dragging = _useState6[0],
+    setDragging = _useState6[1];
+  var videoWidth = videoHeight / _type2.VideoRatio;
+  var itemsPerPage = calcItems(bounds, videoWidth);
+  var fullWidth = (videoWidth + Gap) * itemsPerPage - Gap;
+  var maxPages = calcPages(carouselList.length, itemsPerPage);
+  var page = (0, _utils.clamp)(page_, 0, maxPages - 1);
+  var navigate = (0, _react.useCallback)(function (direction) {
+    return setPage((0, _utils.clamp)(page + direction, 0, maxPages - 1));
+  }, [page, maxPages]);
+  var hasPrevPage = page > 0;
+  var hasNextPage = page < maxPages - 1;
+  var onDragHandler = (0, _react.useCallback)(function (event) {
+    event.preventDefault();
+    setDragging(true);
+    var handler = event.currentTarget;
+    handler.setPointerCapture(event.pointerId);
+    var startY = event.clientY;
+    var startHeight = collapsed ? 0 : videoHeight;
+    var onPointerMove = function onPointerMove(event) {
+      var delta = event.clientY - startY;
+      var target = startHeight + delta;
+      var clamped = (0, _utils.clamp)(target, MinVideoHeight, MaxVideoHeight);
+      var overflow = target - clamped;
+      if (overflow < HandlerOverflowUp) {
+        toggleCollapsed(true);
+      } else if (overflow > HandlerOverflowDown) {
+        toggleLayout(_type2.FcrUIVideoWindowLayoutType.Gallery);
+      } else {
+        toggleLayout(_type2.FcrUIVideoWindowLayoutType.Speaker);
+        toggleCollapsed(false);
+        setVideoHeight(clamped);
+      }
+    };
+    var onPointerUp = function onPointerUp() {
+      setDragging(false);
+      handler.onpointermove = handler.onpointerup = handler.onpointercancel = null;
+    };
+    handler.onpointermove = onPointerMove;
+    handler.onpointerup = handler.onpointercancel = onPointerUp;
+  }, [collapsed, videoHeight]);
+  var style = (0, _react.useMemo)(function () {
+    return {
+      width: videoWidth,
+      height: videoHeight
+    };
+  }, [videoWidth, videoHeight]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: (0, _classnames["default"])('fcr-layout-content-carousel', {
+      'fcr-layout-content-carousel-collapsed': collapsed,
+      'fcr-layout-content-carousel-dragging': dragging
+    }),
+    style: {
+      height: videoHeight + CollapseHeight + HandlerHeight
+    },
+    ref: ref,
+    children: !collapsed && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "fcr-layout-content-carousel-wrapper",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "fcr-layout-content-carousel-list",
+        style: {
+          height: videoHeight,
+          gap: Gap
+        },
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+          className: "fcr-layout-content-carousel-arrow",
+          disabled: !hasPrevPage,
+          style: {
+            width: ArrowWidth
+          },
+          onClick: function onClick() {
+            return navigate(-1);
+          },
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+            type: _type.FcrIconType.FCR_LEFT1,
+            colors: {
+              iconPrimary: 'currentColor'
+            }
+          })
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: "fcr-layout-content-carousel-items",
+          style: {
+            width: fullWidth,
+            gap: Gap
+          },
+          children: documentVisible && carouselList.slice(page * itemsPerPage, (page + 1) * itemsPerPage).map(function (windowData) {
+            var isScreenSharing = windowData.videoSourceType === _agoraEduCore.FcrVideoSourceType.SCREEN;
+            var isBoard = windowData.type === _type2.FcrUIWindowType.BOARD;
+            var showActionBottomLabel = carouselList.length > 1 && windowData.isSpeakerSpotlight;
+            var muteAudioPermission = hasMutePermission(windowData.isMySelf ? _agoraEduCore.FcrPrivilegeUserRole.SELF : windowData.ownerRoleType);
+            var startAudioPermission = hasUnmutePermission(windowData.isMySelf ? _agoraEduCore.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;
+            return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+              style: style,
+              className: "fcr-layout-content-carousel-item",
+              children: isBoard ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_boardContext["default"].Provider, {
+                value: {
+                  showToolbar: false
+                },
+                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_memberWindow.MemberBoard, {
+                  isShowActionAudio: isShowActionAudio,
+                  actionAudioTag: actionAudioTag,
+                  showActionBottomLabel: showActionBottomLabel,
+                  allowedOperations: getAllowedOperations(windowData.ownerRoleType, windowData.isMySelf),
+                  windowData: windowData,
+                  onMaskDoubleClick: function onMaskDoubleClick() {
+                    toggleMainStream(windowData.windowId);
+                  },
+                  isMask: true,
+                  slot: whiteboard
+                })
+              }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_memberWindow.MemberWindow, {
+                onRemovePin: removePin,
+                canShowSpeakerSpotlight: true,
+                width: videoWidth,
+                height: videoHeight,
+                memberWindowPreviewType: 'carousel',
+                slot: !isScreenSharing && /*#__PURE__*/(0, _jsxRuntime.jsx)(_memberWindow.MemberWindowActions, {
+                  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: "normal",
+                  windowData: windowData,
+                  iconSize: 16
+                }),
+                videoRenderMode: _type3.AgoraRtcRenderMode.FIT,
+                videoStreamType: _type3.AgoraRtcVideoStreamType.LOW_STREAM,
+                showAvatar: false,
+                windowData: windowData,
+                onDoubleClick: function onDoubleClick() {
+                  if (windowData.videoSourceType === _agoraEduCore.FcrVideoSourceType.SCREEN || windowData.isPin) {
+                    toggleMainStream(windowData.windowId);
+                  } else {
+                    addPin(windowData.windowId);
+                    setPage(0);
+                  }
+                }
+              }, windowData.windowId)
+            }, windowData.windowId);
+          })
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+          className: "fcr-layout-content-carousel-arrow",
+          disabled: !hasNextPage,
+          style: {
+            width: ArrowWidth
+          },
+          onClick: function onClick() {
+            return navigate(1);
+          },
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+            type: _type.FcrIconType.FCR_RIGHT2,
+            colors: {
+              iconPrimary: 'currentColor'
+            }
+          })
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+        className: "fcr-layout-content-carousel-collapse",
+        style: {
+          height: CollapseHeight
+        },
+        onClick: function onClick() {
+          return toggleCollapsed();
+        },
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+          type: _type.FcrIconType.FCR_UP2,
+          colors: {
+            iconPrimary: 'currentColor'
+          }
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: (0, _classnames["default"])('fcr-layout-content-carousel-handler', {
+          'fcr-layout-content-carousel-handler-dragging': dragging
+        }),
+        style: {
+          height: HandlerHeight
+        },
+        onPointerDown: onDragHandler
+      })]
+    })
+  });
+});

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

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

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

@@ -0,0 +1,360 @@
+"use strict";
+
+require("core-js/modules/es.symbol.js");
+require("core-js/modules/es.symbol.description.js");
+require("core-js/modules/es.symbol.iterator.js");
+require("core-js/modules/es.error.cause.js");
+require("core-js/modules/es.error.to-string.js");
+require("core-js/modules/es.array.from.js");
+require("core-js/modules/es.array.is-array.js");
+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");
+require("core-js/modules/es.string.iterator.js");
+require("core-js/modules/web.dom-collections.iterator.js");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Gallery = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+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");
+var _mobxReact = require("mobx-react");
+var _react = require("react");
+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 _context = require("../context");
+var _type2 = require("../type");
+var _memberWindow = require("../member-window");
+var _utils = require("./utils");
+var _type3 = require("agora-rte-sdk/lib/core/rtc/type");
+var _agoraEduCore = require("agora-edu-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 _jsxRuntime = require("react/jsx-runtime");
+function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, 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 normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it["return"] != null) it["return"](); } finally { if (didErr) throw err; } } }; }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+var MinVideoWidth = 192;
+var MinVideoHeight = 114;
+var PaddingX = 25;
+var PaddingY = 10;
+var PaddingY1 = 10 + 34;
+var PaddingY2 = 10 + 58;
+var PaddingYGallery = PaddingY1 + PaddingY2;
+var 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]];
+var iterate = function iterate(maxRows, maxCols) {
+  var result = [];
+  for (var _i = 0, _GridSequence = GridSequence; _i < _GridSequence.length; _i++) {
+    var _GridSequence$_i = (0, _slicedToArray2["default"])(_GridSequence[_i], 2),
+      rows = _GridSequence$_i[0],
+      cols = _GridSequence$_i[1];
+    if (rows <= maxRows && cols <= maxCols) {
+      result.push({
+        rows: rows,
+        cols: cols
+      });
+    }
+  }
+  return result;
+};
+var Gallery = exports.Gallery = (0, _mobxReact.observer)(function () {
+  var _useContext = (0, _react.useContext)(_context.StoreContext),
+    layout = _useContext.layout,
+    galleryMaxSize = _useContext.galleryMaxSize,
+    galleryList = _useContext.galleryList,
+    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,
+    streamControl = _useContext.streamControl,
+    deviceStore = _useContext.deviceStore,
+    documentVisible = _useContext.documentVisible,
+    getAllowedOperations = _useContext.getAllowedOperations,
+    setVideoOrientation = _useContext.setVideoOrientation,
+    hasUnmutePermission = _useContext.hasUnmutePermission,
+    hasRequestStartAudioPermission = _useContext.hasRequestStartAudioPermission;
+  var _useDelayedMeasure = (0, _hooks.useDelayedMeasure)(),
+    _useDelayedMeasure2 = (0, _slicedToArray2["default"])(_useDelayedMeasure, 2),
+    ref = _useDelayedMeasure2[0],
+    bounds = _useDelayedMeasure2[1];
+  var _useState = (0, _react.useState)(0),
+    _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 () {
+    if (bounds.width > 0 && bounds.height > 0) {
+      var maxRows = Math.min(getMaxRows(galleryMaxSize), Math.floor((bounds.height + Gap - PaddingX * 2) / (MinVideoHeight + Gap)));
+      var maxCols = Math.min(getMaxCols(galleryMaxSize), Math.floor((bounds.width + Gap - paddingY) / (MinVideoWidth + Gap)));
+      var _iterator = _createForOfIteratorHelper(iterate(maxRows, maxCols)),
+        _step;
+      try {
+        for (_iterator.s(); !(_step = _iterator.n()).done;) {
+          var candidate = _step.value;
+          if (candidate.rows * candidate.cols >= galleryList.length) {
+            return candidate;
+          }
+        }
+      } catch (err) {
+        _iterator.e(err);
+      } finally {
+        _iterator.f();
+      }
+      return {
+        rows: maxRows,
+        cols: maxCols
+      };
+    }
+    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 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);
+      // Fill last page if not full.
+      if (page > 0 && items.length < itemsPerPage) {
+        var prevPage = galleryList.slice((page - 1) * itemsPerPage, page * itemsPerPage);
+        while (items.length < itemsPerPage) {
+          var item = prevPage.pop();
+          item && items.unshift(item);
+        }
+      }
+      return eachSlice(items, grid.cols);
+    }
+    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 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 === _agoraEduCore.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')
+    })]
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [returnBar, /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "fcr-layout-content-gallery",
+      ref: ref,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "fcr-layout-content-gallery-wrapper",
+        style: {
+          gap: Gap,
+          marginTop: isGallery ? PaddingY1 - PaddingY2 : 0
+        },
+        children: cells.map(function (row, i) {
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: "fcr-layout-content-gallery-row",
+            style: {
+              gap: Gap
+            },
+            children: documentVisible && row.map(function (windowData) {
+              var size = galleryList.length === 1 ? {
+                width: bounds.width,
+                height: bounds.height - paddingY + 20
+              } : videoSize;
+              var isScreenSharing = windowData.videoSourceType === _agoraEduCore.FcrVideoSourceType.SCREEN;
+              var isSpeakerMode = layout === _type2.FcrUIVideoWindowLayoutType.Speaker;
+              var isMainWindow = galleryList.length === 1;
+              var showActionBottomLabel = galleryList.length > 1 && windowData.isSpeakerSpotlight;
+              var muteAudioPermission = hasMutePermission(windowData.isMySelf ? _agoraEduCore.FcrPrivilegeUserRole.SELF : windowData.ownerRoleType);
+              var startAudioPermission = hasUnmutePermission(windowData.isMySelf ? _agoraEduCore.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;
+              return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+                className: "fcr-layout-content-gallery-row-item",
+                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)(_memberWindow.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
+                  })
+                }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_memberWindow.MemberWindow, {
+                  canShowSpeakerSpotlight: galleryList.length > 1,
+                  memberWindowPreviewType: 'gallery',
+                  slot: !isScreenSharing && /*#__PURE__*/(0, _jsxRuntime.jsx)(_memberWindow.MemberWindowActions, {
+                    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
+                  }),
+                  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 === _agoraEduCore.FcrVideoSourceType.SCREEN || windowData.isPin) {
+                      toggleMainStream(windowData.windowId);
+                    } else {
+                      if (!windowData.isPin) {
+                        addPin(windowData.windowId);
+                      } else {
+                        toggleMainStream(windowData.windowId);
+                      }
+                    }
+                  }
+                }, windowData.windowId)
+              }, windowData.windowId);
+            })
+          }, i);
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "fcr-layout-content-gallery-arrows",
+        children: [hasPrevPage && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          className: "fcr-layout-content-gallery-arrow fcr-layout-content-gallery-arrow-left",
+          style: {
+            left: PaddingArrow
+          },
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+            style: {
+              width: ArrowWidth,
+              height: ArrowWidth
+            },
+            disabled: !hasPrevPage,
+            onClick: function onClick() {
+              return navigate(-1);
+            },
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+              type: _type.FcrIconType.FCR_LEFT3,
+              colors: {
+                iconPrimary: 'currentColor'
+              }
+            })
+          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
+            className: "fcr-layout-content-gallery-arrow-content",
+            children: [page + 1, "/", maxPages]
+          })]
+        }), hasNextPage && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          className: "fcr-layout-content-gallery-arrow fcr-layout-content-gallery-arrow-left",
+          style: {
+            right: PaddingArrow
+          },
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+            style: {
+              width: ArrowWidth,
+              height: ArrowWidth
+            },
+            disabled: !hasNextPage,
+            onClick: function onClick() {
+              return navigate(1);
+            },
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+              type: _type.FcrIconType.FCR_RIGHT3,
+              colors: {
+                iconPrimary: 'currentColor'
+              }
+            })
+          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
+            className: "fcr-layout-content-gallery-arrow-content",
+            children: [page + 1, "/", maxPages]
+          })]
+        })]
+      })]
+    })]
+  });
+});

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

@@ -0,0 +1,2 @@
+export declare const MinAsideWidth = 320;
+export declare const Layout: () => import("react/jsx-runtime").JSX.Element;