fcr-ui-scene 3.5.1 → 3.6.0

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

@@ -6,10 +6,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.Carousel = void 0;
-require("core-js/modules/es.array.map.js");
+require("core-js/modules/es.array.join.js");
 require("core-js/modules/es.array.slice.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 _classnames = _interopRequireDefault(require("classnames"));
 var _mobxReact = require("mobx-react");
@@ -19,15 +17,8 @@ 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 _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");
 var Gap = 8;
 var CollapseHeight = 8;
@@ -50,26 +41,7 @@ var Carousel = exports.Carousel = (0, _mobxReact.observer)(function () {
     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,
-    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;
+    carouselList = _useContext.carouselList;
   var _useState = (0, _react.useState)(MinVideoHeight),
     _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
     videoHeight = _useState2[0],
@@ -125,12 +97,19 @@ var Carousel = exports.Carousel = (0, _mobxReact.observer)(function () {
     handler.onpointermove = onPointerMove;
     handler.onpointerup = handler.onpointercancel = onPointerUp;
   }, [collapsed, videoHeight]);
-  var style = (0, _react.useMemo)(function () {
+  var keyOfGalleryUsers = carouselList.join('-');
+  var carouselListData = (0, _react.useMemo)(function () {
+    return carouselList.slice(page * itemsPerPage, (page + 1) * itemsPerPage);
+  }, [keyOfGalleryUsers, carouselList, page, itemsPerPage]);
+  var dimensions = (0, _react.useMemo)(function () {
     return {
       width: videoWidth,
       height: videoHeight
     };
   }, [videoWidth, videoHeight]);
+  if (carouselList.length === 0) {
+    return null;
+  }
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
     className: (0, _classnames["default"])('fcr-layout-content-carousel', {
       'fcr-layout-content-carousel-collapsed': collapsed,
@@ -169,92 +148,11 @@ var Carousel = exports.Carousel = (0, _mobxReact.observer)(function () {
             width: fullWidth,
             gap: Gap
           },
-          children: carouselList.slice(page * itemsPerPage, (page + 1) * itemsPerPage).map(function (windowData) {
-            var isBoard = windowData.type === _type2.FcrUIWindowType.BOARD;
-            var showActionBottomLabel = carouselList.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 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", {
-              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)(_memberBoard.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,
-                  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, {
-                onRemovePin: removePin,
-                canShowSpeakerSpotlight: true,
-                width: videoWidth,
-                height: videoHeight,
-                memberWindowPreviewType: 'carousel',
-                slot: /*#__PURE__*/(0, _jsxRuntime.jsx)(_memberActions.MemberWindowActions, {
-                  interpreterUserList: interpreterUserList,
-                  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,
-                  showRotation: (0, _env.isElectron)(),
-                  isInterpreterEnabled: isInterpreterEnabled,
-                  handleRename: openRenameDialog,
-                  id: id,
-                  volume: volume
-                }),
-                videoRenderMode: _type3.AgoraRtcRenderMode.FIT,
-                videoStreamType: _type3.AgoraRtcVideoStreamType.LOW_STREAM,
-                showAvatar: true,
-                windowData: windowData,
-                onDoubleClick: function onDoubleClick() {
-                  if (windowData.videoSourceType === _fcrCore.FcrVideoSourceType.SCREEN || windowData.isPin) {
-                    toggleMainStream(windowData.windowId);
-                  } else {
-                    addPin(windowData.windowId);
-                    setPage(0);
-                  }
-                },
-                isVideoSuspended: isVideoSuspended
-              }, windowData.windowId)
-            }, windowData.windowId);
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CommonVideoRenderer.CommonVideoRenderer, {
+            data: carouselListData,
+            dimensions: dimensions,
+            layoutType: _type2.FcrUILayoutType.CAROUSEL,
+            onPageChange: setPage
           })
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
           className: "fcr-layout-content-carousel-arrow",

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

@@ -0,0 +1,13 @@
+import { FcrUIVideoWindowData, FcrUILayoutType } from '../type';
+interface CommonVideoRendererProps {
+    data: FcrUIVideoWindowData[];
+    layoutType: FcrUILayoutType;
+    dimensions: {
+        width: number;
+        height: number;
+    };
+    onPageChange?: React.Dispatch<React.SetStateAction<number>>;
+    cols?: number;
+}
+declare const CommonVideoRenderer: ({ onPageChange, dimensions, data, layoutType, cols }: CommonVideoRendererProps) => import("react/jsx-runtime").JSX.Element;
+export { CommonVideoRenderer };

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;