@azure/communication-react 1.4.3-alpha-202301140013.0 → 1.4.3-alpha-202301180013.0

package/dist/dist-esm/react-components/src/components/VideoGallery/PinnedParticipantsLayout.js

@@ -1,62 +0,0 @@
-// Copyright (c) Microsoft Corporation.
-// Licensed under the MIT license.
-import { LayerHost, mergeStyles, Stack } from '@fluentui/react';
-import { useId } from '@fluentui/react-hooks';
-import React from 'react';
-import { useTheme } from '../../theming';
-import { GridLayout } from '../GridLayout';
-import { isNarrowWidth } from '../utils/responsive';
-import { FloatingLocalVideo } from './FloatingLocalVideo';
-import { localVideoTileContainerStyle, localVideoTileWithControlsContainerStyle, LOCAL_VIDEO_TILE_ZINDEX } from './styles/FloatingLocalVideo.styles';
-import { innerLayoutStyle, layerHostStyle, rootLayoutStyle } from './styles/FloatingLocalVideoLayout.styles';
-import { usePinnedParticipantLayout } from './utils/videoGalleryLayoutUtils';
-import { VideoGalleryResponsiveHorizontalGallery } from './VideoGalleryResponsiveHorizontalGallery';
-/**
- * PinnedParticipantsLayout displays remote participants and a screen sharing component in
- * a grid and horizontal gallery while floating the local video
- *
- * @private
- */
-export const PinnedParticipantsLayout = (props) => {
-    const { remoteParticipants = [], pinnedParticipants = [], dominantSpeakers, localVideoComponent, screenShareComponent, onRenderRemoteParticipant, styles, maxRemoteVideoStreams, showCameraSwitcherInLocalPreview, parentWidth, parentHeight, isLocalVideoFloating } = props;
-    const theme = useTheme();
-    const isNarrow = parentWidth ? isNarrowWidth(parentWidth) : false;
-    const pinnedParticipantsLayout = usePinnedParticipantLayout({
-        remoteParticipants,
-        pinnedParticipantUserIds: pinnedParticipants,
-        dominantSpeakers,
-        maxRemoteVideoStreams,
-        isScreenShareActive: !!screenShareComponent
-    });
-    let activeVideoStreams = 0;
-    const shouldFloatLocalVideo = isLocalVideoFloating && remoteParticipants.length > 0;
-    const gridTiles = pinnedParticipantsLayout.gridParticipants.map((p) => {
-        var _a, _b;
-        return onRenderRemoteParticipant(p, maxRemoteVideoStreams && maxRemoteVideoStreams >= 0
-            ? ((_a = p.videoStream) === null || _a === void 0 ? void 0 : _a.isAvailable) && activeVideoStreams++ < maxRemoteVideoStreams
-            : (_b = p.videoStream) === null || _b === void 0 ? void 0 : _b.isAvailable);
-    });
-    if (localVideoComponent && !shouldFloatLocalVideo) {
-        gridTiles.push(localVideoComponent);
-    }
-    const horizontalGalleryTiles = pinnedParticipantsLayout.horizontalGalleryParticipants.map((p) => {
-        var _a, _b;
-        return onRenderRemoteParticipant(p, maxRemoteVideoStreams && maxRemoteVideoStreams >= 0
-            ? ((_a = p.videoStream) === null || _a === void 0 ? void 0 : _a.isAvailable) && activeVideoStreams++ < maxRemoteVideoStreams
-            : (_b = p.videoStream) === null || _b === void 0 ? void 0 : _b.isAvailable);
-    });
-    const layerHostId = useId('layerhost');
-    const wrappedLocalVideoComponent = localVideoComponent && shouldFloatLocalVideo ? (
-    // When we use showCameraSwitcherInLocalPreview it disables dragging to allow keyboard navigation.
-    showCameraSwitcherInLocalPreview ? (React.createElement(Stack, { className: mergeStyles(localVideoTileWithControlsContainerStyle(theme, isNarrow), {
-            boxShadow: theme.effects.elevation8,
-            zIndex: LOCAL_VIDEO_TILE_ZINDEX
-        }) }, localVideoComponent)) : horizontalGalleryTiles.length > 0 ? (React.createElement(Stack, { className: mergeStyles(localVideoTileContainerStyle(theme, isNarrow)) }, localVideoComponent)) : (React.createElement(FloatingLocalVideo, { localVideoComponent: localVideoComponent, layerHostId: layerHostId, isNarrow: isNarrow, parentWidth: parentWidth, parentHeight: parentHeight }))) : undefined;
-    return (React.createElement(Stack, { styles: rootLayoutStyle },
-        wrappedLocalVideoComponent,
-        React.createElement(Stack, { horizontal: false, styles: innerLayoutStyle },
-            screenShareComponent ? (screenShareComponent) : (React.createElement(GridLayout, { key: "grid-layout", styles: styles === null || styles === void 0 ? void 0 : styles.gridLayout }, gridTiles)),
-            horizontalGalleryTiles.length > 0 && (React.createElement(VideoGalleryResponsiveHorizontalGallery, { isNarrow: isNarrow, shouldFloatLocalVideo: true, horizontalGalleryElements: horizontalGalleryTiles, styles: styles === null || styles === void 0 ? void 0 : styles.horizontalGallery })),
-            React.createElement(LayerHost, { id: layerHostId, className: mergeStyles(layerHostStyle) }))));
-};
-//# sourceMappingURL=PinnedParticipantsLayout.js.map

package/dist/dist-esm/react-components/src/components/VideoGallery/PinnedParticipantsLayout.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"PinnedParticipantsLayout.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/VideoGallery/PinnedParticipantsLayout.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { LayerHost, mergeStyles, Stack } from '@fluentui/react';\nimport { useId } from '@fluentui/react-hooks';\nimport React from 'react';\nimport { useTheme } from '../../theming';\nimport { GridLayout } from '../GridLayout';\nimport { isNarrowWidth } from '../utils/responsive';\nimport { FloatingLocalVideo } from './FloatingLocalVideo';\nimport { FloatingLocalVideoLayoutProps } from './FloatingLocalVideoLayout';\nimport {\n  localVideoTileContainerStyle,\n  localVideoTileWithControlsContainerStyle,\n  LOCAL_VIDEO_TILE_ZINDEX\n} from './styles/FloatingLocalVideo.styles';\nimport { innerLayoutStyle, layerHostStyle, rootLayoutStyle } from './styles/FloatingLocalVideoLayout.styles';\nimport { usePinnedParticipantLayout } from './utils/videoGalleryLayoutUtils';\nimport { VideoGalleryResponsiveHorizontalGallery } from './VideoGalleryResponsiveHorizontalGallery';\n\n/**\n * Props for {@link PinnedParticipantsLayout}.\n *\n * @private\n */\nexport interface PinnedParticipantsLayoutProps extends FloatingLocalVideoLayoutProps {\n  /**\n   * List of pinned participant userIds\n   */\n  pinnedParticipants?: string[];\n  /**\n   * Whether local video should be floating\n   */\n  isLocalVideoFloating?: boolean;\n}\n\n/**\n * PinnedParticipantsLayout displays remote participants and a screen sharing component in\n * a grid and horizontal gallery while floating the local video\n *\n * @private\n */\nexport const PinnedParticipantsLayout = (props: PinnedParticipantsLayoutProps): JSX.Element => {\n  const {\n    remoteParticipants = [],\n    pinnedParticipants = [],\n    dominantSpeakers,\n    localVideoComponent,\n    screenShareComponent,\n    onRenderRemoteParticipant,\n    styles,\n    maxRemoteVideoStreams,\n    showCameraSwitcherInLocalPreview,\n    parentWidth,\n    parentHeight,\n    isLocalVideoFloating\n  } = props;\n\n  const theme = useTheme();\n\n  const isNarrow = parentWidth ? isNarrowWidth(parentWidth) : false;\n\n  const pinnedParticipantsLayout = usePinnedParticipantLayout({\n    remoteParticipants,\n    pinnedParticipantUserIds: pinnedParticipants,\n    dominantSpeakers,\n    maxRemoteVideoStreams,\n    isScreenShareActive: !!screenShareComponent\n  });\n\n  let activeVideoStreams = 0;\n\n  const shouldFloatLocalVideo = isLocalVideoFloating && remoteParticipants.length > 0;\n\n  const gridTiles = pinnedParticipantsLayout.gridParticipants.map((p) => {\n    return onRenderRemoteParticipant(\n      p,\n      maxRemoteVideoStreams && maxRemoteVideoStreams >= 0\n        ? p.videoStream?.isAvailable && activeVideoStreams++ < maxRemoteVideoStreams\n        : p.videoStream?.isAvailable\n    );\n  });\n\n  if (localVideoComponent && !shouldFloatLocalVideo) {\n    gridTiles.push(localVideoComponent);\n  }\n\n  const horizontalGalleryTiles = pinnedParticipantsLayout.horizontalGalleryParticipants.map((p) => {\n    return onRenderRemoteParticipant(\n      p,\n      maxRemoteVideoStreams && maxRemoteVideoStreams >= 0\n        ? p.videoStream?.isAvailable && activeVideoStreams++ < maxRemoteVideoStreams\n        : p.videoStream?.isAvailable\n    );\n  });\n\n  const layerHostId = useId('layerhost');\n\n  const wrappedLocalVideoComponent =\n    localVideoComponent && shouldFloatLocalVideo ? (\n      // When we use showCameraSwitcherInLocalPreview it disables dragging to allow keyboard navigation.\n      showCameraSwitcherInLocalPreview ? (\n        <Stack\n          className={mergeStyles(localVideoTileWithControlsContainerStyle(theme, isNarrow), {\n            boxShadow: theme.effects.elevation8,\n            zIndex: LOCAL_VIDEO_TILE_ZINDEX\n          })}\n        >\n          {localVideoComponent}\n        </Stack>\n      ) : horizontalGalleryTiles.length > 0 ? (\n        <Stack className={mergeStyles(localVideoTileContainerStyle(theme, isNarrow))}>{localVideoComponent}</Stack>\n      ) : (\n        <FloatingLocalVideo\n          localVideoComponent={localVideoComponent}\n          layerHostId={layerHostId}\n          isNarrow={isNarrow}\n          parentWidth={parentWidth}\n          parentHeight={parentHeight}\n        />\n      )\n    ) : undefined;\n\n  return (\n    <Stack styles={rootLayoutStyle}>\n      {wrappedLocalVideoComponent}\n      <Stack horizontal={false} styles={innerLayoutStyle}>\n        {screenShareComponent ? (\n          screenShareComponent\n        ) : (\n          <GridLayout key=\"grid-layout\" styles={styles?.gridLayout}>\n            {gridTiles}\n          </GridLayout>\n        )}\n        {horizontalGalleryTiles.length > 0 && (\n          <VideoGalleryResponsiveHorizontalGallery\n            isNarrow={isNarrow}\n            shouldFloatLocalVideo={true}\n            horizontalGalleryElements={horizontalGalleryTiles}\n            styles={styles?.horizontalGallery}\n          />\n        )}\n        <LayerHost id={layerHostId} className={mergeStyles(layerHostStyle)} />\n      </Stack>\n    </Stack>\n  );\n};\n"]}