fcr-ui-scene 3.8.1 → 3.8.2

package/lib-es/modules/layout/components/Aside.js

@@ -0,0 +1,208 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import "core-js/modules/es.array.concat.js";
+import classNames from 'classnames';
+import { observer } from 'mobx-react';
+import { useCallback, useContext, useState } from 'react';
+import { FcrIcon } from 'agora-ui-foundation/lib/components/icon';
+import { FcrIconType } from 'agora-ui-foundation/lib/components/icon/type';
+import { FcrWindowHeader, WindowType } from 'agora-ui-foundation/lib/components/window-header';
+import { useDelayedMeasure } from '../../../utilities/hooks';
+import { StoreContext } from '../store.base';
+import { clamp } from './utils';
+import { useI18n } from 'agora-ui-foundation/lib/i18n';
+import { FcrIconButton } from 'agora-ui-foundation/lib/components/icon-button';
+import { FcrChatRoomConnectionState } from 'fcr-core/lib/room-control/chatroom-control/type';
+import { FcrToolTip } from 'agora-ui-foundation/lib/components/tooltip';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+var minHeight = 350;
+var DividerHeight = 16;
+var ParticipantDialogHeader = observer(function () {
+  var store = useContext(StoreContext);
+  var transI18n = useI18n();
+  return /*#__PURE__*/_jsxs("div", {
+    children: [transI18n('fmt_participants_label_participants'), "(", /*#__PURE__*/_jsx("span", {
+      className: "participant-dialog-header-count",
+      children: store.participantCount
+    }), ")"]
+  });
+});
+export var Aside = observer(function (props) {
+  var width = props.width,
+    onDragHandler = props.onDragHandler,
+    chatAction = props.chatAction,
+    subtitlesHistorySettings = props.subtitlesHistorySettings;
+  var _useContext = useContext(StoreContext),
+    participant_ = _useContext.participant,
+    chat_ = _useContext.chat,
+    subtitlesHistory_ = _useContext.subtitlesHistory,
+    asideContent = _useContext.asideContent,
+    closeAsideChat = _useContext.closeAsideChat,
+    moveChatFromAsideToDialog = _useContext.moveChatFromAsideToDialog,
+    closeParticipantFromAside = _useContext.closeParticipantFromAside,
+    moveParticipantFromAsideToDialog = _useContext.moveParticipantFromAsideToDialog,
+    closeSubtitlesHistoryFromAside = _useContext.closeSubtitlesHistoryFromAside,
+    moveSubtitlesHistoryFromAsideToDialog = _useContext.moveSubtitlesHistoryFromAsideToDialog,
+    chatRoomState = _useContext.chatRoomState,
+    participantsRenderAt = _useContext.participantsRenderAt,
+    chatRenderAt = _useContext.chatRenderAt,
+    subtitlesHistoryRenderAt = _useContext.subtitlesHistoryRenderAt;
+  var participant = asideContent.participant && participantsRenderAt === 'aside' ? participant_ : null;
+  var chat = asideContent.chat && chatRenderAt === 'aside' ? chat_ : null;
+  var subtitlesHistory = asideContent.subtitlesHistory && subtitlesHistoryRenderAt === 'aside' ? subtitlesHistory_ : null;
+  var _useState = useState(50),
+    _useState2 = _slicedToArray(_useState, 2),
+    percent = _useState2[0],
+    setPercent = _useState2[1];
+  var _useDelayedMeasure = useDelayedMeasure(),
+    _useDelayedMeasure2 = _slicedToArray(_useDelayedMeasure, 2),
+    ref = _useDelayedMeasure2[0],
+    bounds = _useDelayedMeasure2[1];
+  var onDragDivider = useCallback(function (event) {
+    event.preventDefault();
+    var handler = event.currentTarget;
+    handler.setPointerCapture(event.pointerId);
+    var startY = event.clientY;
+    var startHeight = bounds.height * (percent / 100);
+    var onPointerMove = function onPointerMove(event) {
+      var delta = event.clientY - startY;
+      var targetHeight = startHeight + delta;
+      if (targetHeight < minHeight || bounds.height - targetHeight < minHeight) {
+        return;
+      }
+      setPercent(clamp(targetHeight / bounds.height * 100, 0, 100));
+    };
+    var onPointerUp = function onPointerUp() {
+      handler.onpointermove = handler.onpointerup = handler.onpointercancel = null;
+    };
+    handler.onpointermove = onPointerMove;
+    handler.onpointerup = handler.onpointercancel = onPointerUp;
+  }, [bounds.height, percent]);
+  var transI18n = useI18n();
+  return /*#__PURE__*/_jsxs("div", {
+    className: classNames('fcr-layout-aside', {
+      'fcr-layout-aside-active': participant || chat || subtitlesHistory
+    }),
+    style: {
+      width: width
+    },
+    children: [/*#__PURE__*/_jsxs("div", {
+      className: "fcr-layout-aside-body",
+      ref: ref,
+      children: [subtitlesHistory && /*#__PURE__*/_jsxs("div", {
+        className: "fcr-layout-aside-body-column fcr-layout-side-body-translate",
+        style: {
+          flexBasis: 320
+        },
+        children: [/*#__PURE__*/_jsx(FcrWindowHeader, {
+          showClose: false,
+          title: transI18n('fmt_ai_transcriptions_sidebar_label_realtime_translation'),
+          onTypeChange: moveSubtitlesHistoryFromAsideToDialog,
+          onClose: closeSubtitlesHistoryFromAside,
+          otherActions: subtitlesHistorySettings,
+          otherActionsAfter: /*#__PURE__*/_jsx(FcrToolTip, {
+            mouseEnterDelay: 0,
+            verticalOffset: -4,
+            isArrowAndTargetCenter: true,
+            content: transI18n('fmt_uimanager_button_close'),
+            trigger: "hover",
+            children: /*#__PURE__*/_jsx("div", {
+              children: /*#__PURE__*/_jsx(FcrIconButton, {
+                className: "frc-window-header__icon",
+                icon: FcrIconType.FCR_CLOSE,
+                iconColors: {
+                  iconPrimary: 'var(--fcr_ui_scene_icontext1)'
+                },
+                onClick: closeSubtitlesHistoryFromAside
+              })
+            })
+          }),
+          type: WindowType.MODAL
+        }), subtitlesHistory]
+      }), (participant || chat) && /*#__PURE__*/_jsxs("div", {
+        className: "fcr-layout-aside-body-column",
+        children: [participant && /*#__PURE__*/_jsxs("div", {
+          className: "fcr-layout-aside-body-up",
+          style: chat ? {
+            height: "".concat(percent, "%")
+          } : {
+            flex: 1
+          },
+          children: [/*#__PURE__*/_jsx(FcrWindowHeader, {
+            showClose: false // 在 Aside 中有自定义的按钮样式，不用 header 中的关闭按钮
+            ,
+            title: /*#__PURE__*/_jsx(ParticipantDialogHeader, {}),
+            type: WindowType.MODAL,
+            onTypeChange: moveParticipantFromAsideToDialog,
+            onClose: closeParticipantFromAside,
+            otherActionsAfter: /*#__PURE__*/_jsx(FcrToolTip, {
+              mouseEnterDelay: 0,
+              verticalOffset: -4,
+              isArrowAndTargetCenter: true,
+              content: transI18n('fmt_uimanager_button_close'),
+              trigger: "hover",
+              children: /*#__PURE__*/_jsx("div", {
+                children: /*#__PURE__*/_jsx(FcrIconButton, {
+                  className: "frc-window-header__icon",
+                  icon: FcrIconType.FCR_CLOSE,
+                  iconColors: {
+                    iconPrimary: 'var(--fcr_ui_scene_icontext1)'
+                  },
+                  onClick: closeParticipantFromAside
+                })
+              })
+            }),
+            rootClassName: 'can-draggable'
+          }), participant]
+        }), chat && /*#__PURE__*/_jsxs("div", {
+          className: "fcr-layout-aside-body-down",
+          style: participant ? {
+            height: "".concat(100 - percent, "%")
+          } : {
+            flex: 1
+          },
+          children: [/*#__PURE__*/_jsx(FcrWindowHeader, {
+            showClose: false,
+            title: chatRoomState === FcrChatRoomConnectionState.Connected ? transI18n('fmt_chat_label_chat') : transI18n('fmt_aside_status_connecting'),
+            onTypeChange: moveChatFromAsideToDialog,
+            onClose: closeAsideChat,
+            otherActions: chatAction,
+            otherActionsAfter: /*#__PURE__*/_jsx(FcrToolTip, {
+              mouseEnterDelay: 0,
+              verticalOffset: -4,
+              isArrowAndTargetCenter: true,
+              content: transI18n('fmt_uimanager_button_close'),
+              trigger: "hover",
+              children: /*#__PURE__*/_jsx("div", {
+                children: /*#__PURE__*/_jsx(FcrIconButton, {
+                  className: "frc-window-header__icon",
+                  icon: FcrIconType.FCR_CLOSE,
+                  iconColors: {
+                    iconPrimary: 'var(--fcr_ui_scene_icontext1)'
+                  },
+                  onClick: closeAsideChat
+                })
+              })
+            }),
+            type: WindowType.MODAL
+          }), chat]
+        }), participant && chat && /*#__PURE__*/_jsx("div", {
+          className: "fcr-layout-aside-body-divider",
+          style: {
+            top: "calc(".concat(percent, "% - ").concat(DividerHeight / 2, "px)"),
+            height: "".concat(DividerHeight, "px")
+          },
+          onPointerDown: onDragDivider
+        })]
+      })]
+    }), (participant || chat) && /*#__PURE__*/_jsx("div", {
+      className: "fcr-layout-aside-handler",
+      onPointerDown: onDragHandler,
+      children: /*#__PURE__*/_jsx(FcrIcon, {
+        type: FcrIconType.FCR_WEB_MOVE_PAGE,
+        colors: {
+          iconPrimary: 'currentColor'
+        }
+      })
+    })]
+  });
+});

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

@@ -0,0 +1,192 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import "core-js/modules/es.array.join.js";
+import "core-js/modules/es.array.slice.js";
+import classNames from 'classnames';
+import { observer } from 'mobx-react';
+import { useCallback, useContext, useMemo, useState } from 'react';
+import { FcrIcon } from 'agora-ui-foundation/lib/components/icon';
+import { FcrIconType } from 'agora-ui-foundation/lib/components/icon/type';
+import { useDelayedMeasure } from '../../../utilities/hooks';
+import { StoreContext } from '../store.base';
+import { FcrUILayoutType, FcrUIVideoWindowLayoutType, VideoRatio } from '../type';
+import { clamp } from './utils';
+import { CommonVideoRenderer } from './CommonVideoRenderer';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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) {
+  var val = Math.max(0, Math.floor((bounds.width - (ArrowWidth + Gap) * 2 + Gap) / (videoWidth + Gap)));
+  var maxVal = 7;
+  return Math.min(val, maxVal);
+};
+export var Carousel = observer(function () {
+  var _useContext = useContext(StoreContext),
+    toggleLayout = _useContext.toggleLayout,
+    collapsed = _useContext.collapsed,
+    toggleCollapsed = _useContext.toggleCollapsed,
+    carouselList = _useContext.carouselList;
+  var _useState = useState(MinVideoHeight),
+    _useState2 = _slicedToArray(_useState, 2),
+    videoHeight = _useState2[0],
+    setVideoHeight = _useState2[1];
+  var _useDelayedMeasure = useDelayedMeasure(),
+    _useDelayedMeasure2 = _slicedToArray(_useDelayedMeasure, 2),
+    ref = _useDelayedMeasure2[0],
+    bounds = _useDelayedMeasure2[1];
+  var _useState3 = useState(0),
+    _useState4 = _slicedToArray(_useState3, 2),
+    page_ = _useState4[0],
+    setPage = _useState4[1];
+  var _useState5 = useState(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    dragging = _useState6[0],
+    setDragging = _useState6[1];
+  var videoWidth = videoHeight / VideoRatio;
+  var itemsPerPage = calcItems(bounds, videoWidth);
+  var fullWidth = (videoWidth + Gap) * itemsPerPage - Gap;
+  var maxPages = calcPages(carouselList.length, itemsPerPage);
+  var page = clamp(page_, 0, maxPages - 1);
+  var navigate = useCallback(function (direction) {
+    return setPage(clamp(page + direction, 0, maxPages - 1));
+  }, [page, maxPages]);
+  var hasPrevPage = page > 0;
+  var hasNextPage = page < maxPages - 1;
+  var onDragHandler = 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 = clamp(target, MinVideoHeight, MaxVideoHeight);
+      var overflow = target - clamped;
+      if (overflow < HandlerOverflowUp) {
+        toggleCollapsed(true);
+      } else if (overflow > HandlerOverflowDown) {
+        toggleLayout(FcrUIVideoWindowLayoutType.Gallery);
+      } else {
+        toggleLayout(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 keyOfGalleryUsers = carouselList.join('-');
+  var carouselListData = useMemo(function () {
+    return carouselList.slice(page * itemsPerPage, (page + 1) * itemsPerPage);
+  }, [keyOfGalleryUsers, carouselList, page, itemsPerPage]);
+  var dimensions = useMemo(function () {
+    return {
+      width: videoWidth,
+      height: videoHeight
+    };
+  }, [videoWidth, videoHeight]);
+  if (carouselList.length === 0) {
+    return null;
+  }
+  return /*#__PURE__*/_jsx("div", {
+    className: classNames('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__*/_jsxs("div", {
+      className: "fcr-layout-content-carousel-wrapper",
+      children: [/*#__PURE__*/_jsxs("div", {
+        className: "fcr-layout-content-carousel-list",
+        style: {
+          height: videoHeight,
+          gap: Gap
+        },
+        children: [/*#__PURE__*/_jsx("button", {
+          className: "fcr-layout-content-carousel-arrow",
+          disabled: !hasPrevPage,
+          style: {
+            width: ArrowWidth
+          },
+          onClick: function onClick() {
+            return navigate(-1);
+          },
+          children: /*#__PURE__*/_jsx(FcrIcon, {
+            type: FcrIconType.FCR_LEFT1,
+            colors: {
+              iconPrimary: 'currentColor'
+            }
+          })
+        }), /*#__PURE__*/_jsx("div", {
+          className: "fcr-layout-content-carousel-items",
+          style: {
+            width: fullWidth,
+            gap: Gap
+          },
+          children: /*#__PURE__*/_jsx(CommonVideoRenderer, {
+            data: carouselListData,
+            dimensions: dimensions,
+            layoutType: FcrUILayoutType.CAROUSEL,
+            onPageChange: setPage,
+            isMainWindow: false,
+            isMainWindowInScreenSharing: false
+          })
+        }), /*#__PURE__*/_jsx("button", {
+          className: "fcr-layout-content-carousel-arrow",
+          disabled: !hasNextPage,
+          style: {
+            width: ArrowWidth
+          },
+          onClick: function onClick() {
+            return navigate(1);
+          },
+          children: /*#__PURE__*/_jsx(FcrIcon, {
+            type: FcrIconType.FCR_RIGHT2,
+            colors: {
+              iconPrimary: 'currentColor'
+            }
+          })
+        })]
+      }), /*#__PURE__*/_jsx("button", {
+        className: "fcr-layout-content-carousel-collapse",
+        style: {
+          height: CollapseHeight
+        },
+        onClick: function onClick() {
+          return toggleCollapsed();
+        },
+        children: /*#__PURE__*/_jsx(FcrIcon, {
+          type: FcrIconType.FCR_UP2,
+          colors: {
+            iconPrimary: 'currentColor'
+          }
+        })
+      }), /*#__PURE__*/_jsx("div", {
+        className: classNames('fcr-layout-content-carousel-handler', {
+          'fcr-layout-content-carousel-handler-dragging': dragging
+        }),
+        style: {
+          height: HandlerHeight
+        },
+        onPointerDown: onDragHandler
+      })]
+    })
+  });
+});

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

@@ -0,0 +1,265 @@
+import "core-js/modules/es.array.concat.js";
+import "core-js/modules/es.array.map.js";
+import "core-js/modules/es.object.to-string.js";
+import "core-js/modules/esnext.iterator.constructor.js";
+import "core-js/modules/esnext.iterator.map.js";
+import { StoreContext } from '../store.base';
+import { FcrUIWindowType, FcrUIVideoWindowLayoutType, FcrUILayoutType } from '../type';
+import BoardContext from '../../../shared-context/board-context';
+import { FcrVideoRenderMode, FcrVideoStreamType } from 'fcr-core/lib/type';
+import { MemberWindowActions } from '../../components/member-window/components/member-actions';
+import { isElectron } from 'agora-foundation/lib/utilities/env';
+import { MemberWindow } from '../../components/member-window';
+import { useCallback, useContext } from 'react';
+import { FcrVideoSourceType } from 'fcr-core';
+import classname from 'classnames';
+import { observer } from 'mobx-react';
+import classNames from 'classnames';
+import { Gap } from './Gallery';
+import { enterFullScreen, exitFullScreen, isFullScreen } from '../../../utilities/browser-api';
+import { WhiteboardControlbar } from '../../components/control-bar';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+var useFormatWindowData = function useFormatWindowData() {
+  var _useContext = useContext(StoreContext),
+    userVolumeMap = _useContext.userVolumeMap,
+    getAllowedOperations = _useContext.getAllowedOperations;
+  return function (windowData) {
+    var isMySelf = windowData.isMySelf,
+      ownerRoleType = windowData.ownerRoleType,
+      videoStreamId = windowData.videoStreamId,
+      audioStreamId = windowData.audioStreamId;
+    var id = isMySelf ? '0' : videoStreamId || audioStreamId;
+    var volume = userVolumeMap.get(id || '') || 0;
+    var allowedOperations = getAllowedOperations(ownerRoleType, isMySelf);
+    return {
+      volume: volume,
+      id: id,
+      allowedOperations: allowedOperations
+    };
+  };
+};
+var useCommonProps = function useCommonProps(layoutType) {
+  var _useContext2 = useContext(StoreContext),
+    galleryList = _useContext2.galleryList,
+    participantCount = _useContext2.participantCount,
+    carouselList = _useContext2.carouselList,
+    layout = _useContext2.layout;
+  var isMainWindow = galleryList.length === 1;
+  var isGridLayout = layoutType === FcrUILayoutType.GALLERY;
+  var className = isGridLayout ? classname('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 > 2 : true;
+  var isMask = isGridLayout ? !isMainWindow : true;
+  var isToggleMainStream = isGridLayout && layout === FcrUIVideoWindowLayoutType.Speaker && isMainWindow;
+  var memberWindowPreviewType = isGridLayout ? FcrUILayoutType.GALLERY : FcrUILayoutType.CAROUSEL;
+  var videoStreamType = isGridLayout ? galleryList.length > 4 ? FcrVideoStreamType.LOW_STREAM : FcrVideoStreamType.HIGH_STREAM : FcrVideoStreamType.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 = observer(function (_ref) {
+  var onPageChange = _ref.onPageChange,
+    dimensions = _ref.dimensions,
+    data = _ref.data,
+    layoutType = _ref.layoutType,
+    cols = _ref.cols,
+    isMainWindow = _ref.isMainWindow,
+    isMainWindowInScreenSharing = _ref.isMainWindowInScreenSharing;
+  var _useContext3 = useContext(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,
+    scalcValue = _useContext3.scalcValue,
+    setScaleValue = _useContext3.setScaleValue,
+    screenShareControl = _useContext3.screenShareControl,
+    annotation = _useContext3.annotation,
+    isLocalCameraInSecondaryWindow = _useContext3.isLocalCameraInSecondaryWindow,
+    microphoneEnabled = _useContext3.microphoneEnabled,
+    cameraEnabled = _useContext3.cameraEnabled,
+    localUser = _useContext3.localUser,
+    hasMutePermission = _useContext3.hasMutePermission,
+    hasUnmutePermission = _useContext3.hasUnmutePermission,
+    hasRequestStartAudioPermission = _useContext3.hasRequestStartAudioPermission;
+  var getFormatWindowData = useFormatWindowData();
+  var commonProps = useCommonProps(layoutType);
+  var toggleFullScreen = function toggleFullScreen() {
+    isFullScreen() ? exitFullScreen() : enterFullScreen();
+  };
+  var renderBoardContent = function renderBoardContent(windowData, windowId) {
+    return /*#__PURE__*/_jsx(BoardContext.Provider, {
+      value: {
+        videoWindowLayoutType: layoutType,
+        showToolbar: commonProps.showToolbar
+      },
+      children: /*#__PURE__*/_jsxs("div", {
+        className: classNames("fcr-member-board"),
+        children: [/*#__PURE__*/_jsx("div", {
+          onDoubleClick: function onDoubleClick() {
+            return commonProps.isToggleMainStream ? toggleFullScreen() : toggleMainStream(windowId);
+          },
+          className: classNames('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),
+      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__*/_jsx(MemberWindowActions, {
+      showActionBottomLabel: showActionBottomLabel,
+      allowedOperations: allowedOperations,
+      setVideoOrientation: setVideoOrientation,
+      hasPinnedStream: hasPinnedStream,
+      localUserRole: localUserRole,
+      sendParticipantEvent: sendParticipantEvent,
+      muteAudio: muteAudio,
+      openPrivateChat: openPrivateChat,
+      windowData: windowData,
+      showRotation: isElectron(),
+      interpreterUserList: interpreterUserList,
+      isInterpreterEnabled: isInterpreterEnabled,
+      handleRename: openRenameDialog,
+      id: id,
+      volume: volume,
+      iconSize: iconSize,
+      windowSize: windowSize,
+      isLocalCameraInSecondaryWindow: isLocalCameraInSecondaryWindow,
+      deviceMicrophoneEnabled: microphoneEnabled,
+      deviceCameraEnabled: cameraEnabled,
+      hasMutePermission: hasMutePermission,
+      hasUnmutePermission: hasUnmutePermission,
+      hasRequestStartAudioPermission: hasRequestStartAudioPermission
+    });
+  };
+  var handleDoubleClick = function handleDoubleClick(windowId, isScreenSharing, isPin) {
+    // if (commonProps.isToggleMainStream) {
+    //   toggleFullScreen();
+    // } else if (isScreenSharing || isPin) {
+    //   toggleMainStream(windowId);
+    // } else {
+    //   if (layoutType === FcrUILayoutType.CAROUSEL) {
+    //     onPageChange?.(0);
+    //   }
+    // }
+  };
+  var handleZoomIn = useCallback(function () {
+    if (scalcValue < 3) {
+      setScaleValue(scalcValue + 1);
+      return true;
+    }
+    return false;
+  }, [scalcValue]);
+  var handleZoomOut = useCallback(function () {
+    if (scalcValue > 1) {
+      setScaleValue(scalcValue - 1);
+      return true;
+    }
+    return false;
+  }, [scalcValue]);
+  var handleAdaptive = useCallback(function () {
+    setScaleValue(3);
+    return false;
+  }, [scalcValue]);
+  var handleOrigin = useCallback(function () {
+    setScaleValue(1);
+    return false;
+  }, [scalcValue]);
+  return /*#__PURE__*/_jsx(_Fragment, {
+    children: data.map(function (windowData) {
+      var windowId = windowData.windowId,
+        isPin = windowData.isPin,
+        type = windowData.type,
+        videoSourceType = windowData.videoSourceType;
+      var isBoard = type === FcrUIWindowType.BOARD;
+      var isScreenSharing = videoSourceType === FcrVideoSourceType.SCREEN;
+
+      /**
+       * 在共享时，主窗口会有一个额外的控制条，需要将视频内容减去这个高度（28px），所以增加一个class用来覆盖高度样式
+       */
+      var clsWithShareControlBar = classNames({
+        'fcr-member-window-with-share-controlbar': isMainWindowInScreenSharing
+      });
+      /**
+       * 在只有一个用户时，无法开启网格布局，所以可以通过 data.length 和 layoutType 判断是否是主窗口。
+       */
+      return /*#__PURE__*/_jsx("div", {
+        className: commonProps.className,
+        style: {
+          width: cols && cols > 1 ? "calc(".concat(100 / cols, "% - ").concat(Gap * 2, "px)") : dimensions.width,
+          height: dimensions.height
+        },
+        children: isBoard ? renderBoardContent(windowData, windowId) : /*#__PURE__*/_jsxs("div", {
+          style: {
+            width: dimensions.width,
+            height: dimensions.height
+          },
+          className: clsWithShareControlBar,
+          children: [isMainWindowInScreenSharing && screenShareControl, isMainWindowInScreenSharing && /*#__PURE__*/_jsx(WhiteboardControlbar, {
+            ownerUserName: windowData.userName,
+            sharingType: 'annotation',
+            onZoomIn: handleZoomIn,
+            onZoomOut: handleZoomOut,
+            onAdaptive: handleAdaptive,
+            onOrigin: handleOrigin,
+            isSharingAudio: windowData.hasLoopbackSharing && windowData.hasMicrophoneAudioStream
+          }), /*#__PURE__*/_jsx(MemberWindow, {
+            memberWindowPreviewType: commonProps.memberWindowPreviewType,
+            canShowSpeakerSpotlight: commonProps.canShowSpeakerSpotlight,
+            width: dimensions.width,
+            height: dimensions.height,
+            slot: !isMainWindowInScreenSharing && renderMemberWindowActions(windowData, false),
+            videoRenderMode: FcrVideoRenderMode.FIT,
+            videoStreamType: commonProps.videoStreamType,
+            windowData: windowData,
+            showAvatar: true,
+            onRemovePin: removePin,
+            onDoubleClick: function onDoubleClick() {
+              return handleDoubleClick(windowId, isScreenSharing, isPin);
+            },
+            isVideoSuspended: isVideoSuspended,
+            scalcValue: isMainWindow ? scalcValue : 1
+            // annotation={annotation}
+            ,
+            annotation: isMainWindow ? annotation : null,
+            onScaleChange: setScaleValue,
+            enableZoom: isMainWindow
+          }, windowId)]
+        })
+      }, windowId);
+    })
+  });
+});
+export { CommonVideoRenderer };