@azure/communication-react 1.24.0-alpha-202501310016 → 1.24.0-alpha-202502040016

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

@@ -1,23 +1,9 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 /* @conditional-compile-remove(together-mode) */
-import React, { useMemo, useRef, useState } from 'react';
+import React from 'react';
 /* @conditional-compile-remove(together-mode) */
-import { useId } from '@fluentui/react-hooks';
-/* @conditional-compile-remove(together-mode) */
-import { LayerHost, mergeStyles, Stack } from '@fluentui/react';
-/* @conditional-compile-remove(together-mode) */
-import { renderTiles, useOrganizedParticipants } from './utils/videoGalleryLayoutUtils';
-/* @conditional-compile-remove(together-mode) */
-import { OverflowGallery } from './OverflowGallery';
-/* @conditional-compile-remove(together-mode) */
-import { rootLayoutStyle } from './styles/DefaultLayout.styles';
-/* @conditional-compile-remove(together-mode) */
-import { isNarrowWidth, isShortHeight } from '../utils/responsive';
-/* @conditional-compile-remove(together-mode) */
-import { innerLayoutStyle, layerHostStyle } from './styles/FloatingLocalVideoLayout.styles';
-/* @conditional-compile-remove(together-mode) */
-import { videoGalleryLayoutGap } from './styles/Layout.styles';
+import { Stack } from '@fluentui/react';
 /* @conditional-compile-remove(together-mode) */
 /**
  * A memoized version of local screen share component. React.memo is used for a performance
@@ -25,61 +11,7 @@ import { videoGalleryLayoutGap } from './styles/Layout.styles';
  * https://reactjs.org/docs/react-api.html#reactmemo
  */
 export const TogetherModeLayout = (props) => {
-    const { remoteParticipants = [], dominantSpeakers, screenShareComponent, onRenderRemoteParticipant, styles, maxRemoteVideoStreams, parentWidth, parentHeight, overflowGalleryPosition = 'horizontalBottom', pinnedParticipantUserIds = [], togetherModeStreamComponent } = props;
-    const isNarrow = parentWidth ? isNarrowWidth(parentWidth) : false;
-    const isShort = parentHeight ? isShortHeight(parentHeight) : false;
-    const [indexesToRender, setIndexesToRender] = useState([]);
-    const childrenPerPage = useRef(4);
-    const { gridParticipants, overflowGalleryParticipants } = useOrganizedParticipants({
-        remoteParticipants,
-        dominantSpeakers,
-        maxGridParticipants: maxRemoteVideoStreams,
-        isScreenShareActive: !!screenShareComponent,
-        maxOverflowGalleryDominantSpeakers: screenShareComponent
-            ? childrenPerPage.current - (pinnedParticipantUserIds.length % childrenPerPage.current)
-            : childrenPerPage.current,
-        pinnedParticipantUserIds,
-        layout: 'floatingLocalVideo'
-    });
-    const { gridTiles, overflowGalleryTiles } = renderTiles(gridParticipants, onRenderRemoteParticipant, maxRemoteVideoStreams, indexesToRender, overflowGalleryParticipants, dominantSpeakers);
-    const layerHostId = useId('layerhost');
-    const togetherModeOverFlowGalleryTiles = useMemo(() => {
-        let newTiles = overflowGalleryTiles;
-        if (togetherModeStreamComponent) {
-            if (screenShareComponent) {
-                newTiles = gridTiles.concat(overflowGalleryTiles);
-            }
-        }
-        return newTiles;
-    }, [gridTiles, overflowGalleryTiles, screenShareComponent, togetherModeStreamComponent]);
-    const overflowGallery = useMemo(() => {
-        if (overflowGalleryTiles.length === 0 && !props.screenShareComponent) {
-            return null;
-        }
-        return (React.createElement(OverflowGallery, { isShort: isShort, onFetchTilesToRender: setIndexesToRender, isNarrow: isNarrow, shouldFloatLocalVideo: false, overflowGalleryElements: togetherModeOverFlowGalleryTiles, horizontalGalleryStyles: styles === null || styles === void 0 ? void 0 : styles.horizontalGallery, verticalGalleryStyles: styles === null || styles === void 0 ? void 0 : styles.verticalGallery, overflowGalleryPosition: overflowGalleryPosition, onChildrenPerPageChange: (n) => {
-                childrenPerPage.current = n;
-            }, parentWidth: parentWidth }));
-    }, [
-        overflowGalleryTiles.length,
-        props.screenShareComponent,
-        isShort,
-        isNarrow,
-        togetherModeOverFlowGalleryTiles,
-        styles === null || styles === void 0 ? void 0 : styles.horizontalGallery,
-        styles === null || styles === void 0 ? void 0 : styles.verticalGallery,
-        overflowGalleryPosition,
-        parentWidth
-    ]);
-    return screenShareComponent ? (React.createElement(Stack, { styles: rootLayoutStyle },
-        React.createElement(LayerHost, { id: layerHostId, className: mergeStyles(layerHostStyle) }),
-        React.createElement(Stack, { horizontal: overflowGalleryPosition === 'verticalRight', styles: innerLayoutStyle, tokens: videoGalleryLayoutGap },
-            props.overflowGalleryPosition === 'horizontalTop' ? overflowGallery : React.createElement(React.Fragment, null),
-            screenShareComponent,
-            overflowGalleryTrampoline(overflowGallery, props.overflowGalleryPosition)))) : (React.createElement(Stack, null, props.togetherModeStreamComponent));
-};
-/* @conditional-compile-remove(together-mode) */
-const overflowGalleryTrampoline = (gallery, galleryPosition) => {
-    return galleryPosition !== 'horizontalTop' ? gallery : React.createElement(React.Fragment, null);
-    return gallery;
+    const { togetherModeStreamComponent } = props;
+    return React.createElement(Stack, null, togetherModeStreamComponent);
 };
 //# sourceMappingURL=TogetherModeLayout.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"TogetherModeLayout.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/VideoGallery/TogetherModeLayout.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,gDAAgD;AAChD,OAAO,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACzD,gDAAgD;AAChD,OAAO,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAC;AAK9C,gDAAgD;AAChD,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AAChE,gDAAgD;AAChD,OAAO,EAAE,WAAW,EAAE,wBAAwB,EAAE,MAAM,iCAAiC,CAAC;AACxF,gDAAgD;AAChD,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,gDAAgD;AAChD,OAAO,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAC;AAChE,gDAAgD;AAChD,OAAO,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AACnE,gDAAgD;AAChD,OAAO,EAAE,gBAAgB,EAAE,cAAc,EAAE,MAAM,0CAA0C,CAAC;AAC5F,gDAAgD;AAChD,OAAO,EAAE,qBAAqB,EAAE,MAAM,wBAAwB,CAAC;AAE/D,gDAAgD;AAChD;;;;GAIG;AACH,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAAC,KAAkB,EAAe,EAAE;IACpE,MAAM,EACJ,kBAAkB,GAAG,EAAE,EACvB,gBAAgB,EAChB,oBAAoB,EACpB,yBAAyB,EACzB,MAAM,EACN,qBAAqB,EACrB,WAAW,EACX,YAAY,EACZ,uBAAuB,GAAG,kBAAkB,EAC5C,wBAAwB,GAAG,EAAE,EAC7B,2BAA2B,EAC5B,GAAG,KAAK,CAAC;IACV,MAAM,QAAQ,GAAG,WAAW,CAAC,CAAC,CAAC,aAAa,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC;IAElE,MAAM,OAAO,GAAG,YAAY,CAAC,CAAC,CAAC,aAAa,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC;IAEnE,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,QAAQ,CAAW,EAAE,CAAC,CAAC;IACrE,MAAM,eAAe,GAAG,MAAM,CAAC,CAAC,CAAC,CAAC;IAElC,MAAM,EAAE,gBAAgB,EAAE,2BAA2B,EAAE,GAAG,wBAAwB,CAAC;QACjF,kBAAkB;QAClB,gBAAgB;QAChB,mBAAmB,EAAE,qBAAqB;QAC1C,mBAAmB,EAAE,CAAC,CAAC,oBAAoB;QAC3C,kCAAkC,EAAE,oBAAoB;YACtD,CAAC,CAAC,eAAe,CAAC,OAAO,GAAG,CAAC,wBAAwB,CAAC,MAAM,GAAG,eAAe,CAAC,OAAO,CAAC;YACvF,CAAC,CAAC,eAAe,CAAC,OAAO;QAC3B,wBAAwB;QACxB,MAAM,EAAE,oBAAoB;KAC7B,CAAC,CAAC;IACH,MAAM,EAAE,SAAS,EAAE,oBAAoB,EAAE,GAAG,WAAW,CACrD,gBAAgB,EAChB,yBAAyB,EACzB,qBAAqB,EACrB,eAAe,EACf,2BAA2B,EAC3B,gBAAgB,CACjB,CAAC;IAEF,MAAM,WAAW,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC;IACvC,MAAM,gCAAgC,GAAG,OAAO,CAAC,GAAG,EAAE;QACpD,IAAI,QAAQ,GAAG,oBAAoB,CAAC;QACpC,IAAI,2BAA2B,EAAE,CAAC;YAChC,IAAI,oBAAoB,EAAE,CAAC;gBACzB,QAAQ,GAAG,SAAS,CAAC,MAAM,CAAC,oBAAoB,CAAC,CAAC;YACpD,CAAC;QACH,CAAC;QACD,OAAO,QAAQ,CAAC;IAClB,CAAC,EAAE,CAAC,SAAS,EAAE,oBAAoB,EAAE,oBAAoB,EAAE,2BAA2B,CAAC,CAAC,CAAC;IAEzF,MAAM,eAAe,GAAG,OAAO,CAAC,GAAG,EAAE;QACnC,IAAI,oBAAoB,CAAC,MAAM,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,oBAAoB,EAAE,CAAC;YACrE,OAAO,IAAI,CAAC;QACd,CAAC;QACD,OAAO,CACL,oBAAC,eAAe,IACd,OAAO,EAAE,OAAO,EAChB,oBAAoB,EAAE,kBAAkB,EACxC,QAAQ,EAAE,QAAQ,EAClB,qBAAqB,EAAE,KAAK,EAC5B,uBAAuB,EAAE,gCAAgC,EACzD,uBAAuB,EAAE,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,iBAAiB,EAClD,qBAAqB,EAAE,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,eAAe,EAC9C,uBAAuB,EAAE,uBAAuB,EAChD,uBAAuB,EAAE,CAAC,CAAS,EAAE,EAAE;gBACrC,eAAe,CAAC,OAAO,GAAG,CAAC,CAAC;YAC9B,CAAC,EACD,WAAW,EAAE,WAAW,GACxB,CACH,CAAC;IACJ,CAAC,EAAE;QACD,oBAAoB,CAAC,MAAM;QAC3B,KAAK,CAAC,oBAAoB;QAC1B,OAAO;QACP,QAAQ;QACR,gCAAgC;QAChC,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,iBAAiB;QACzB,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,eAAe;QACvB,uBAAuB;QACvB,WAAW;KACZ,CAAC,CAAC;IAEH,OAAO,oBAAoB,CAAC,CAAC,CAAC,CAC5B,oBAAC,KAAK,IAAC,MAAM,EAAE,eAAe;QAC5B,oBAAC,SAAS,IAAC,EAAE,EAAE,WAAW,EAAE,SAAS,EAAE,WAAW,CAAC,cAAc,CAAC,GAAI;QACtE,oBAAC,KAAK,IACJ,UAAU,EAAE,uBAAuB,KAAK,eAAe,EACvD,MAAM,EAAE,gBAAgB,EACxB,MAAM,EAAE,qBAAqB;YAE5B,KAAK,CAAC,uBAAuB,KAAK,eAAe,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,yCAAK;YAC3E,oBAAoB;YACpB,yBAAyB,CAAC,eAAe,EAAE,KAAK,CAAC,uBAAuB,CAAC,CACpE,CACF,CACT,CAAC,CAAC,CAAC,CACF,oBAAC,KAAK,QAAE,KAAK,CAAC,2BAA2B,CAAS,CACnD,CAAC;AACJ,CAAC,CAAC;AAEF,gDAAgD;AAChD,MAAM,yBAAyB,GAAG,CAChC,OAA2B,EAC3B,eAAwE,EACpD,EAAE;IACtB,OAAO,eAAe,KAAK,eAAe,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,yCAAK,CAAC;IAC7D,OAAO,OAAO,CAAC;AACjB,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\n/* @conditional-compile-remove(together-mode) */\nimport React, { useMemo, useRef, useState } from 'react';\n/* @conditional-compile-remove(together-mode) */\nimport { useId } from '@fluentui/react-hooks';\n/* @conditional-compile-remove(together-mode) */\nimport { _formatString } from '@internal/acs-ui-common';\n/* @conditional-compile-remove(together-mode) */\nimport { LayoutProps } from './Layout';\n/* @conditional-compile-remove(together-mode) */\nimport { LayerHost, mergeStyles, Stack } from '@fluentui/react';\n/* @conditional-compile-remove(together-mode) */\nimport { renderTiles, useOrganizedParticipants } from './utils/videoGalleryLayoutUtils';\n/* @conditional-compile-remove(together-mode) */\nimport { OverflowGallery } from './OverflowGallery';\n/* @conditional-compile-remove(together-mode) */\nimport { rootLayoutStyle } from './styles/DefaultLayout.styles';\n/* @conditional-compile-remove(together-mode) */\nimport { isNarrowWidth, isShortHeight } from '../utils/responsive';\n/* @conditional-compile-remove(together-mode) */\nimport { innerLayoutStyle, layerHostStyle } from './styles/FloatingLocalVideoLayout.styles';\n/* @conditional-compile-remove(together-mode) */\nimport { videoGalleryLayoutGap } from './styles/Layout.styles';\n\n/* @conditional-compile-remove(together-mode) */\n/**\n * A memoized version of local screen share component. React.memo is used for a performance\n * boost by memoizing the same rendered component to avoid rerendering this when the parent component rerenders.\n * https://reactjs.org/docs/react-api.html#reactmemo\n */\nexport const TogetherModeLayout = (props: LayoutProps): JSX.Element => {\n  const {\n    remoteParticipants = [],\n    dominantSpeakers,\n    screenShareComponent,\n    onRenderRemoteParticipant,\n    styles,\n    maxRemoteVideoStreams,\n    parentWidth,\n    parentHeight,\n    overflowGalleryPosition = 'horizontalBottom',\n    pinnedParticipantUserIds = [],\n    togetherModeStreamComponent\n  } = props;\n  const isNarrow = parentWidth ? isNarrowWidth(parentWidth) : false;\n\n  const isShort = parentHeight ? isShortHeight(parentHeight) : false;\n\n  const [indexesToRender, setIndexesToRender] = useState<number[]>([]);\n  const childrenPerPage = useRef(4);\n\n  const { gridParticipants, overflowGalleryParticipants } = useOrganizedParticipants({\n    remoteParticipants,\n    dominantSpeakers,\n    maxGridParticipants: maxRemoteVideoStreams,\n    isScreenShareActive: !!screenShareComponent,\n    maxOverflowGalleryDominantSpeakers: screenShareComponent\n      ? childrenPerPage.current - (pinnedParticipantUserIds.length % childrenPerPage.current)\n      : childrenPerPage.current,\n    pinnedParticipantUserIds,\n    layout: 'floatingLocalVideo'\n  });\n  const { gridTiles, overflowGalleryTiles } = renderTiles(\n    gridParticipants,\n    onRenderRemoteParticipant,\n    maxRemoteVideoStreams,\n    indexesToRender,\n    overflowGalleryParticipants,\n    dominantSpeakers\n  );\n\n  const layerHostId = useId('layerhost');\n  const togetherModeOverFlowGalleryTiles = useMemo(() => {\n    let newTiles = overflowGalleryTiles;\n    if (togetherModeStreamComponent) {\n      if (screenShareComponent) {\n        newTiles = gridTiles.concat(overflowGalleryTiles);\n      }\n    }\n    return newTiles;\n  }, [gridTiles, overflowGalleryTiles, screenShareComponent, togetherModeStreamComponent]);\n\n  const overflowGallery = useMemo(() => {\n    if (overflowGalleryTiles.length === 0 && !props.screenShareComponent) {\n      return null;\n    }\n    return (\n      <OverflowGallery\n        isShort={isShort}\n        onFetchTilesToRender={setIndexesToRender}\n        isNarrow={isNarrow}\n        shouldFloatLocalVideo={false}\n        overflowGalleryElements={togetherModeOverFlowGalleryTiles}\n        horizontalGalleryStyles={styles?.horizontalGallery}\n        verticalGalleryStyles={styles?.verticalGallery}\n        overflowGalleryPosition={overflowGalleryPosition}\n        onChildrenPerPageChange={(n: number) => {\n          childrenPerPage.current = n;\n        }}\n        parentWidth={parentWidth}\n      />\n    );\n  }, [\n    overflowGalleryTiles.length,\n    props.screenShareComponent,\n    isShort,\n    isNarrow,\n    togetherModeOverFlowGalleryTiles,\n    styles?.horizontalGallery,\n    styles?.verticalGallery,\n    overflowGalleryPosition,\n    parentWidth\n  ]);\n\n  return screenShareComponent ? (\n    <Stack styles={rootLayoutStyle}>\n      <LayerHost id={layerHostId} className={mergeStyles(layerHostStyle)} />\n      <Stack\n        horizontal={overflowGalleryPosition === 'verticalRight'}\n        styles={innerLayoutStyle}\n        tokens={videoGalleryLayoutGap}\n      >\n        {props.overflowGalleryPosition === 'horizontalTop' ? overflowGallery : <></>}\n        {screenShareComponent}\n        {overflowGalleryTrampoline(overflowGallery, props.overflowGalleryPosition)}\n      </Stack>\n    </Stack>\n  ) : (\n    <Stack>{props.togetherModeStreamComponent}</Stack>\n  );\n};\n\n/* @conditional-compile-remove(together-mode) */\nconst overflowGalleryTrampoline = (\n  gallery: JSX.Element | null,\n  galleryPosition?: 'horizontalBottom' | 'verticalRight' | 'horizontalTop'\n): JSX.Element | null => {\n  return galleryPosition !== 'horizontalTop' ? gallery : <></>;\n  return gallery;\n};\n"]}
+{"version":3,"file":"TogetherModeLayout.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/VideoGallery/TogetherModeLayout.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,gDAAgD;AAChD,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,gDAAgD;AAChD,OAAO,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AAExC,gDAAgD;AAChD;;;;GAIG;AACH,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAAC,KAAmD,EAAe,EAAE;IACrG,MAAM,EAAE,2BAA2B,EAAE,GAAG,KAAK,CAAC;IAC9C,OAAO,oBAAC,KAAK,QAAE,2BAA2B,CAAS,CAAC;AACtD,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\n/* @conditional-compile-remove(together-mode) */\nimport React from 'react';\n/* @conditional-compile-remove(together-mode) */\nimport { _formatString } from '@internal/acs-ui-common';\n/* @conditional-compile-remove(together-mode) */\nimport { Stack } from '@fluentui/react';\n\n/* @conditional-compile-remove(together-mode) */\n/**\n * A memoized version of local screen share component. React.memo is used for a performance\n * boost by memoizing the same rendered component to avoid rerendering this when the parent component rerenders.\n * https://reactjs.org/docs/react-api.html#reactmemo\n */\nexport const TogetherModeLayout = (props: { togetherModeStreamComponent: JSX.Element }): JSX.Element => {\n  const { togetherModeStreamComponent } = props;\n  return <Stack>{togetherModeStreamComponent}</Stack>;\n};\n"]}

package/dist/dist-esm/react-components/src/components/VideoGallery/TogetherModeStream.d.ts

@@ -17,7 +17,6 @@ export declare const TogetherModeStream: React.MemoExoticComponent<(props: {
     reactionResources?: ReactionResources;
     localParticipant?: VideoGalleryLocalParticipant;
     remoteParticipants?: VideoGalleryRemoteParticipant[];
-    screenShareComponent?: JSX.Element;
     containerWidth?: number;
     containerHeight?: number;
 }) => JSX.Element>;

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

@@ -1 +1 @@
-{"version":3,"file":"TogetherModeStream.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/VideoGallery/TogetherModeStream.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\n/* @conditional-compile-remove(together-mode) */\nimport React, { useEffect, useMemo, memo } from 'react';\n/* @conditional-compile-remove(together-mode) */\nimport { _formatString, _pxToRem } from '@internal/acs-ui-common';\n/* @conditional-compile-remove(together-mode) */\nimport {\n  ReactionResources,\n  VideoGalleryTogetherModeParticipantPosition,\n  VideoGalleryTogetherModeStreams,\n  TogetherModeStreamViewResult,\n  VideoGalleryLocalParticipant,\n  VideoGalleryRemoteParticipant,\n  VideoStreamOptions\n} from '../../types';\n/* @conditional-compile-remove(together-mode) */\nimport { StreamMedia } from '../StreamMedia';\n/* @conditional-compile-remove(together-mode) */\nimport { MeetingReactionOverlay } from '../MeetingReactionOverlay';\n/* @conditional-compile-remove(together-mode) */\nimport { Stack } from '@fluentui/react';\n/* @conditional-compile-remove(together-mode) */\nimport { togetherModeStreamRootStyle } from '../styles/TogetherMode.styles';\n/* @conditional-compile-remove(together-mode) */\n/**\n * A memoized version of local screen share component. React.memo is used for a performance\n * boost by memoizing the same rendered component to avoid rerendering this when the parent component rerenders.\n * https://reactjs.org/docs/react-api.html#reactmemo\n */\nexport const TogetherModeStream = memo(\n  (props: {\n    startTogetherModeEnabled?: boolean;\n    isTogetherModeActive?: boolean;\n    onCreateTogetherModeStreamView?: (options?: VideoStreamOptions) => Promise<void | TogetherModeStreamViewResult>;\n    onStartTogetherMode?: (options?: VideoStreamOptions) => Promise<void | TogetherModeStreamViewResult>;\n    onDisposeTogetherModeStreamView?: () => Promise<void>;\n    onSetTogetherModeSceneSize?: (width: number, height: number) => void;\n    togetherModeStreams?: VideoGalleryTogetherModeStreams;\n    seatingCoordinates?: VideoGalleryTogetherModeParticipantPosition;\n    reactionResources?: ReactionResources;\n    localParticipant?: VideoGalleryLocalParticipant;\n    remoteParticipants?: VideoGalleryRemoteParticipant[];\n    screenShareComponent?: JSX.Element;\n    containerWidth?: number;\n    containerHeight?: number;\n  }): JSX.Element => {\n    const {\n      startTogetherModeEnabled,\n      isTogetherModeActive,\n      onCreateTogetherModeStreamView,\n      onStartTogetherMode,\n      onSetTogetherModeSceneSize,\n      onDisposeTogetherModeStreamView,\n      togetherModeStreams,\n      containerWidth,\n      containerHeight\n    } = props;\n\n    useEffect(() => {\n      return () => {\n        // TODO: Isolate disposing behaviors for screenShare and videoStream\n        onDisposeTogetherModeStreamView && onDisposeTogetherModeStreamView();\n      };\n    }, [onDisposeTogetherModeStreamView]);\n\n    // Trigger startTogetherMode only when needed\n    useEffect(() => {\n      if (startTogetherModeEnabled && !isTogetherModeActive) {\n        onStartTogetherMode?.();\n      }\n    }, [startTogetherModeEnabled, isTogetherModeActive, onStartTogetherMode]);\n\n    // Create stream view if not already created\n    useEffect(() => {\n      if (!togetherModeStreams?.mainVideoStream?.renderElement) {\n        onCreateTogetherModeStreamView?.();\n      }\n    }, [togetherModeStreams?.mainVideoStream?.renderElement, onCreateTogetherModeStreamView]);\n\n    // Update scene size only when container dimensions change\n    useMemo(() => {\n      if (onSetTogetherModeSceneSize && containerWidth && containerHeight) {\n        onSetTogetherModeSceneSize(containerWidth, containerHeight);\n      }\n    }, [onSetTogetherModeSceneSize, containerWidth, containerHeight]);\n\n    const stream = props.togetherModeStreams?.mainVideoStream;\n    const showLoadingIndicator = !(stream && stream.isAvailable && stream.isReceiving);\n\n    return containerWidth && containerHeight ? (\n      <Stack styles={togetherModeStreamRootStyle} horizontalAlign=\"center\" verticalAlign=\"center\">\n        <StreamMedia\n          videoStreamElement={stream?.renderElement || null}\n          isMirrored={true}\n          loadingState={showLoadingIndicator ? 'loading' : 'none'}\n        />\n        <MeetingReactionOverlay\n          reactionResources={props.reactionResources || ({} as ReactionResources)}\n          localParticipant={props.localParticipant}\n          remoteParticipants={props.remoteParticipants}\n          togetherModeSeatPositions={props.seatingCoordinates}\n          overlayMode=\"together-mode\"\n        />\n      </Stack>\n    ) : (\n      <></>\n    );\n  }\n);\n"]}
+{"version":3,"file":"TogetherModeStream.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/VideoGallery/TogetherModeStream.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\n/* @conditional-compile-remove(together-mode) */\nimport React, { useEffect, useMemo, memo } from 'react';\n/* @conditional-compile-remove(together-mode) */\nimport { _formatString, _pxToRem } from '@internal/acs-ui-common';\n/* @conditional-compile-remove(together-mode) */\nimport {\n  ReactionResources,\n  VideoGalleryTogetherModeParticipantPosition,\n  VideoGalleryTogetherModeStreams,\n  TogetherModeStreamViewResult,\n  VideoGalleryLocalParticipant,\n  VideoGalleryRemoteParticipant,\n  VideoStreamOptions\n} from '../../types';\n/* @conditional-compile-remove(together-mode) */\nimport { StreamMedia } from '../StreamMedia';\n/* @conditional-compile-remove(together-mode) */\nimport { MeetingReactionOverlay } from '../MeetingReactionOverlay';\n/* @conditional-compile-remove(together-mode) */\nimport { Stack } from '@fluentui/react';\n/* @conditional-compile-remove(together-mode) */\nimport { togetherModeStreamRootStyle } from '../styles/TogetherMode.styles';\n/* @conditional-compile-remove(together-mode) */\n/**\n * A memoized version of local screen share component. React.memo is used for a performance\n * boost by memoizing the same rendered component to avoid rerendering this when the parent component rerenders.\n * https://reactjs.org/docs/react-api.html#reactmemo\n */\nexport const TogetherModeStream = memo(\n  (props: {\n    startTogetherModeEnabled?: boolean;\n    isTogetherModeActive?: boolean;\n    onCreateTogetherModeStreamView?: (options?: VideoStreamOptions) => Promise<void | TogetherModeStreamViewResult>;\n    onStartTogetherMode?: (options?: VideoStreamOptions) => Promise<void | TogetherModeStreamViewResult>;\n    onDisposeTogetherModeStreamView?: () => Promise<void>;\n    onSetTogetherModeSceneSize?: (width: number, height: number) => void;\n    togetherModeStreams?: VideoGalleryTogetherModeStreams;\n    seatingCoordinates?: VideoGalleryTogetherModeParticipantPosition;\n    reactionResources?: ReactionResources;\n    localParticipant?: VideoGalleryLocalParticipant;\n    remoteParticipants?: VideoGalleryRemoteParticipant[];\n    containerWidth?: number;\n    containerHeight?: number;\n  }): JSX.Element => {\n    const {\n      startTogetherModeEnabled,\n      isTogetherModeActive,\n      onCreateTogetherModeStreamView,\n      onStartTogetherMode,\n      onSetTogetherModeSceneSize,\n      onDisposeTogetherModeStreamView,\n      togetherModeStreams,\n      containerWidth,\n      containerHeight\n    } = props;\n\n    useEffect(() => {\n      return () => {\n        // TODO: Isolate disposing behaviors for screenShare and videoStream\n        onDisposeTogetherModeStreamView && onDisposeTogetherModeStreamView();\n      };\n    }, [onDisposeTogetherModeStreamView]);\n\n    // Trigger startTogetherMode only when needed\n    useEffect(() => {\n      if (startTogetherModeEnabled && !isTogetherModeActive) {\n        onStartTogetherMode?.();\n      }\n    }, [startTogetherModeEnabled, isTogetherModeActive, onStartTogetherMode]);\n\n    // Create stream view if not already created\n    useEffect(() => {\n      if (!togetherModeStreams?.mainVideoStream?.renderElement) {\n        onCreateTogetherModeStreamView?.();\n      }\n    }, [togetherModeStreams?.mainVideoStream?.renderElement, onCreateTogetherModeStreamView]);\n\n    // Update scene size only when container dimensions change\n    useMemo(() => {\n      if (onSetTogetherModeSceneSize && containerWidth && containerHeight) {\n        onSetTogetherModeSceneSize(containerWidth, containerHeight);\n      }\n    }, [onSetTogetherModeSceneSize, containerWidth, containerHeight]);\n\n    const stream = props.togetherModeStreams?.mainVideoStream;\n    const showLoadingIndicator = !(stream && stream.isAvailable && stream.isReceiving);\n\n    return containerWidth && containerHeight ? (\n      <Stack styles={togetherModeStreamRootStyle} horizontalAlign=\"center\" verticalAlign=\"center\">\n        <StreamMedia\n          videoStreamElement={stream?.renderElement || null}\n          isMirrored={true}\n          loadingState={showLoadingIndicator ? 'loading' : 'none'}\n        />\n        <MeetingReactionOverlay\n          reactionResources={props.reactionResources || ({} as ReactionResources)}\n          localParticipant={props.localParticipant}\n          remoteParticipants={props.remoteParticipants}\n          togetherModeSeatPositions={props.seatingCoordinates}\n          overlayMode=\"together-mode\"\n        />\n      </Stack>\n    ) : (\n      <></>\n    );\n  }\n);\n"]}

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

@@ -1,6 +1,6 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import { callingComponentLogger } from '../utils/Logger';
 /**
  * Helper hook to maintain the video stream lifecycle. This calls onCreateStreamView and onDisposeStreamView
@@ -21,26 +21,15 @@ import { callingComponentLogger } from '../utils/Logger';
  * @private
  */
 const useVideoStreamLifecycleMaintainer = (props) => {
-    const { isMirrored, isScreenSharingOn, isStreamAvailable, onCreateStreamView, onDisposeStreamView, renderElementExists, scalingMode, streamId, 
-    /* @conditional-compile-remove(media-access) */
-    isVideoPermitted } = props;
+    const { isMirrored, isScreenSharingOn, isStreamAvailable, onCreateStreamView, onDisposeStreamView, renderElementExists, scalingMode, streamId, isVideoPermitted } = props;
     const [videoStreamViewResult, setVideoStreamViewResult] = useState();
-    const createStreamViewTrampoline = useCallback((isStreamAvailable, renderElementExists, 
-    /* @conditional-compile-remove(media-access) */ isVideoPermitted) => {
+    useEffect(() => {
         var _a;
-        /* @conditional-compile-remove(media-access) */
-        if (isVideoPermitted === false) {
-            return;
-        }
-        if (isStreamAvailable && !renderElementExists) {
+        if (isVideoPermitted !== false && isStreamAvailable && !renderElementExists) {
             (_a = onCreateStreamView === null || onCreateStreamView === void 0 ? void 0 : onCreateStreamView({ isMirrored, scalingMode })) === null || _a === void 0 ? void 0 : _a.then((result) => {
                 result && setVideoStreamViewResult(result);
             });
         }
-    }, [isMirrored, onCreateStreamView, scalingMode]);
-    useEffect(() => {
-        createStreamViewTrampoline(isStreamAvailable, renderElementExists, 
-        /* @conditional-compile-remove(media-access) */ isVideoPermitted);
         // Always clean up element to make tile up to date and be able to dispose correctly
         return () => {
             if (renderElementExists) {
@@ -62,8 +51,6 @@ const useVideoStreamLifecycleMaintainer = (props) => {
         renderElementExists,
         scalingMode,
         streamId,
-        createStreamViewTrampoline,
-        /* @conditional-compile-remove(media-access) */
         isVideoPermitted
     ]);
     // The execution order for above useEffect is onCreateRemoteStreamView =>(async time gap) RenderElement generated => element disposed => onDisposeRemoteStreamView

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

@@ -1 +1 @@
-{"version":3,"file":"useVideoStreamLifecycleMaintainer.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/VideoGallery/useVideoStreamLifecycleMaintainer.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { useCallback, useEffect, useMemo, useState } from 'react';\nimport { VideoStreamOptions, CreateVideoStreamViewResult, ViewScalingMode } from '../../types';\nimport { callingComponentLogger } from '../utils/Logger';\n\n/** @private */\nexport interface VideoStreamLifecycleMaintainerExtendableProps {\n  isStreamAvailable?: boolean;\n  renderElementExists?: boolean;\n  isMirrored?: boolean;\n  scalingMode?: ViewScalingMode;\n  isScreenSharingOn?: boolean;\n  streamId?: number;\n  isVideoPermitted?: boolean;\n}\n\ninterface VideoStreamLifecycleMaintainerProps extends VideoStreamLifecycleMaintainerExtendableProps {\n  onCreateStreamView: (options?: VideoStreamOptions) => Promise<void | CreateVideoStreamViewResult> | undefined;\n  onDisposeStreamView: () => void | undefined;\n}\n\n/**\n * Helper hook to maintain the video stream lifecycle. This calls onCreateStreamView and onDisposeStreamView\n * appropriately based on react lifecycle events and prop changes.\n *\n * @remarks\n *\n * Notes on handling changes to scaling mode:\n *\n * Ideally we have access to the original StreamRenderView and can call view.updateScalingMode() and do not need to recreate the stream view.\n * However, to support backwards compat we cannot guarantee this. If we don't have access to the original StreamRenderView we need to dispose\n * the old view and create a new one.\n *\n * Supporting both of these scenarios became too complex and fragile. When we introduce a breaking change this should be update to ensure that\n * onCreateStreamView _must_ return a view object with updateScalingMode and update logic in this hook to call view.updateScalingMode instead\n * of recreating the stream.\n *\n * @private\n */\nconst useVideoStreamLifecycleMaintainer = (\n  props: VideoStreamLifecycleMaintainerProps\n): CreateVideoStreamViewResult | undefined => {\n  const {\n    isMirrored,\n    isScreenSharingOn,\n    isStreamAvailable,\n    onCreateStreamView,\n    onDisposeStreamView,\n    renderElementExists,\n    scalingMode,\n    streamId,\n    /* @conditional-compile-remove(media-access) */\n    isVideoPermitted\n  } = props;\n\n  const [videoStreamViewResult, setVideoStreamViewResult] = useState<CreateVideoStreamViewResult | undefined>();\n\n  const createStreamViewTrampoline = useCallback(\n    (\n      isStreamAvailable?: boolean,\n      renderElementExists?: boolean,\n      /* @conditional-compile-remove(media-access) */ isVideoPermitted?: boolean\n    ) => {\n      /* @conditional-compile-remove(media-access) */\n      if (isVideoPermitted === false) {\n        return;\n      }\n\n      if (isStreamAvailable && !renderElementExists) {\n        onCreateStreamView?.({ isMirrored, scalingMode })?.then((result) => {\n          result && setVideoStreamViewResult(result);\n        });\n      }\n    },\n    [isMirrored, onCreateStreamView, scalingMode]\n  );\n\n  useEffect(() => {\n    createStreamViewTrampoline(\n      isStreamAvailable,\n      renderElementExists,\n      /* @conditional-compile-remove(media-access) */ isVideoPermitted\n    );\n\n    // Always clean up element to make tile up to date and be able to dispose correctly\n    return () => {\n      if (renderElementExists) {\n        // TODO: Remove `if isScreenSharingOn` when we isolate dispose behavior for screen share\n        if (!isScreenSharingOn) {\n          onDisposeStreamView?.();\n        }\n      } else {\n        callingComponentLogger.warning('Stream view element does not exist when disposing stream view');\n      }\n    };\n  }, [\n    isMirrored,\n    isScreenSharingOn,\n    isStreamAvailable,\n    onCreateStreamView,\n    onDisposeStreamView,\n    renderElementExists,\n    scalingMode,\n    streamId,\n    createStreamViewTrampoline,\n    /* @conditional-compile-remove(media-access) */\n    isVideoPermitted\n  ]);\n\n  // The execution order for above useEffect is onCreateRemoteStreamView =>(async time gap) RenderElement generated => element disposed => onDisposeRemoteStreamView\n  // Element disposed could happen during async time gap, which still cause leaks for unused renderElement.\n  // Need to do an entire cleanup when remoteTile gets disposed and make sure element gets correctly disposed\n  useEffect(() => {\n    return () => {\n      // TODO: Remove `if isScreenSharingOn` when we isolate dispose behavior for screen share\n      if (!isScreenSharingOn) {\n        onDisposeStreamView?.();\n      }\n    };\n  }, [isScreenSharingOn, onDisposeStreamView]);\n\n  return videoStreamViewResult;\n};\n\n/** @private */\nexport interface LocalVideoStreamLifecycleMaintainerProps extends VideoStreamLifecycleMaintainerExtendableProps {\n  onCreateLocalStreamView?: (options?: VideoStreamOptions) => Promise<void | CreateVideoStreamViewResult>;\n  onDisposeLocalStreamView?: () => void;\n}\n\n/**\n * Extension of {@link useVideoStreamLifecycleMaintainer} specifically for local video streams\n *\n * @private\n */\nexport const useLocalVideoStreamLifecycleMaintainer = (\n  props: LocalVideoStreamLifecycleMaintainerProps\n): CreateVideoStreamViewResult | undefined => {\n  const { onCreateLocalStreamView, onDisposeLocalStreamView } = props;\n  const onCreateStreamView = useMemo(\n    () => (options?: VideoStreamOptions) => {\n      return onCreateLocalStreamView?.(options);\n    },\n    [onCreateLocalStreamView]\n  );\n  const onDisposeStreamView = useMemo(\n    () => () => {\n      onDisposeLocalStreamView?.();\n    },\n    [onDisposeLocalStreamView]\n  );\n  return useVideoStreamLifecycleMaintainer({\n    ...props,\n    onCreateStreamView,\n    onDisposeStreamView\n  });\n};\n\n/** @private */\nexport interface RemoteVideoStreamLifecycleMaintainerProps extends VideoStreamLifecycleMaintainerExtendableProps {\n  onCreateRemoteStreamView?: (\n    userId: string,\n    options?: VideoStreamOptions\n  ) => Promise<void | CreateVideoStreamViewResult>;\n  onDisposeRemoteStreamView?: (userId: string) => Promise<void>;\n  remoteParticipantId: string;\n}\n\n/**\n * Extension of {@link useVideoStreamLifecycleMaintainer} specifically for remote video streams\n *\n * @private\n */\nexport const useRemoteVideoStreamLifecycleMaintainer = (\n  props: RemoteVideoStreamLifecycleMaintainerProps\n): CreateVideoStreamViewResult | undefined => {\n  const { remoteParticipantId, onCreateRemoteStreamView, onDisposeRemoteStreamView } = props;\n  const onCreateStreamView = useMemo(\n    () => (options?: VideoStreamOptions) => {\n      return onCreateRemoteStreamView?.(remoteParticipantId, options);\n    },\n    [onCreateRemoteStreamView, remoteParticipantId]\n  );\n  const onDisposeStreamView = useMemo(\n    () => () => {\n      onDisposeRemoteStreamView?.(remoteParticipantId);\n    },\n    [onDisposeRemoteStreamView, remoteParticipantId]\n  );\n\n  return useVideoStreamLifecycleMaintainer({\n    ...props,\n    onCreateStreamView,\n    onDisposeStreamView\n  });\n};\n"]}
+{"version":3,"file":"useVideoStreamLifecycleMaintainer.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/VideoGallery/useVideoStreamLifecycleMaintainer.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { useEffect, useMemo, useState } from 'react';\nimport { VideoStreamOptions, CreateVideoStreamViewResult, ViewScalingMode } from '../../types';\nimport { callingComponentLogger } from '../utils/Logger';\n\n/** @private */\nexport interface VideoStreamLifecycleMaintainerExtendableProps {\n  isStreamAvailable?: boolean;\n  renderElementExists?: boolean;\n  isMirrored?: boolean;\n  scalingMode?: ViewScalingMode;\n  isScreenSharingOn?: boolean;\n  streamId?: number;\n  isVideoPermitted?: boolean;\n}\n\ninterface VideoStreamLifecycleMaintainerProps extends VideoStreamLifecycleMaintainerExtendableProps {\n  onCreateStreamView: (options?: VideoStreamOptions) => Promise<void | CreateVideoStreamViewResult> | undefined;\n  onDisposeStreamView: () => void | undefined;\n}\n\n/**\n * Helper hook to maintain the video stream lifecycle. This calls onCreateStreamView and onDisposeStreamView\n * appropriately based on react lifecycle events and prop changes.\n *\n * @remarks\n *\n * Notes on handling changes to scaling mode:\n *\n * Ideally we have access to the original StreamRenderView and can call view.updateScalingMode() and do not need to recreate the stream view.\n * However, to support backwards compat we cannot guarantee this. If we don't have access to the original StreamRenderView we need to dispose\n * the old view and create a new one.\n *\n * Supporting both of these scenarios became too complex and fragile. When we introduce a breaking change this should be update to ensure that\n * onCreateStreamView _must_ return a view object with updateScalingMode and update logic in this hook to call view.updateScalingMode instead\n * of recreating the stream.\n *\n * @private\n */\nconst useVideoStreamLifecycleMaintainer = (\n  props: VideoStreamLifecycleMaintainerProps\n): CreateVideoStreamViewResult | undefined => {\n  const {\n    isMirrored,\n    isScreenSharingOn,\n    isStreamAvailable,\n    onCreateStreamView,\n    onDisposeStreamView,\n    renderElementExists,\n    scalingMode,\n    streamId,\n    isVideoPermitted\n  } = props;\n\n  const [videoStreamViewResult, setVideoStreamViewResult] = useState<CreateVideoStreamViewResult | undefined>();\n\n  useEffect(() => {\n    if (isVideoPermitted !== false && isStreamAvailable && !renderElementExists) {\n      onCreateStreamView?.({ isMirrored, scalingMode })?.then((result) => {\n        result && setVideoStreamViewResult(result);\n      });\n    }\n\n    // Always clean up element to make tile up to date and be able to dispose correctly\n    return () => {\n      if (renderElementExists) {\n        // TODO: Remove `if isScreenSharingOn` when we isolate dispose behavior for screen share\n        if (!isScreenSharingOn) {\n          onDisposeStreamView?.();\n        }\n      } else {\n        callingComponentLogger.warning('Stream view element does not exist when disposing stream view');\n      }\n    };\n  }, [\n    isMirrored,\n    isScreenSharingOn,\n    isStreamAvailable,\n    onCreateStreamView,\n    onDisposeStreamView,\n    renderElementExists,\n    scalingMode,\n    streamId,\n    isVideoPermitted\n  ]);\n\n  // The execution order for above useEffect is onCreateRemoteStreamView =>(async time gap) RenderElement generated => element disposed => onDisposeRemoteStreamView\n  // Element disposed could happen during async time gap, which still cause leaks for unused renderElement.\n  // Need to do an entire cleanup when remoteTile gets disposed and make sure element gets correctly disposed\n  useEffect(() => {\n    return () => {\n      // TODO: Remove `if isScreenSharingOn` when we isolate dispose behavior for screen share\n      if (!isScreenSharingOn) {\n        onDisposeStreamView?.();\n      }\n    };\n  }, [isScreenSharingOn, onDisposeStreamView]);\n\n  return videoStreamViewResult;\n};\n\n/** @private */\nexport interface LocalVideoStreamLifecycleMaintainerProps extends VideoStreamLifecycleMaintainerExtendableProps {\n  onCreateLocalStreamView?: (options?: VideoStreamOptions) => Promise<void | CreateVideoStreamViewResult>;\n  onDisposeLocalStreamView?: () => void;\n}\n\n/**\n * Extension of {@link useVideoStreamLifecycleMaintainer} specifically for local video streams\n *\n * @private\n */\nexport const useLocalVideoStreamLifecycleMaintainer = (\n  props: LocalVideoStreamLifecycleMaintainerProps\n): CreateVideoStreamViewResult | undefined => {\n  const { onCreateLocalStreamView, onDisposeLocalStreamView } = props;\n  const onCreateStreamView = useMemo(\n    () => (options?: VideoStreamOptions) => {\n      return onCreateLocalStreamView?.(options);\n    },\n    [onCreateLocalStreamView]\n  );\n  const onDisposeStreamView = useMemo(\n    () => () => {\n      onDisposeLocalStreamView?.();\n    },\n    [onDisposeLocalStreamView]\n  );\n  return useVideoStreamLifecycleMaintainer({\n    ...props,\n    onCreateStreamView,\n    onDisposeStreamView\n  });\n};\n\n/** @private */\nexport interface RemoteVideoStreamLifecycleMaintainerProps extends VideoStreamLifecycleMaintainerExtendableProps {\n  onCreateRemoteStreamView?: (\n    userId: string,\n    options?: VideoStreamOptions\n  ) => Promise<void | CreateVideoStreamViewResult>;\n  onDisposeRemoteStreamView?: (userId: string) => Promise<void>;\n  remoteParticipantId: string;\n}\n\n/**\n * Extension of {@link useVideoStreamLifecycleMaintainer} specifically for remote video streams\n *\n * @private\n */\nexport const useRemoteVideoStreamLifecycleMaintainer = (\n  props: RemoteVideoStreamLifecycleMaintainerProps\n): CreateVideoStreamViewResult | undefined => {\n  const { remoteParticipantId, onCreateRemoteStreamView, onDisposeRemoteStreamView } = props;\n  const onCreateStreamView = useMemo(\n    () => (options?: VideoStreamOptions) => {\n      return onCreateRemoteStreamView?.(remoteParticipantId, options);\n    },\n    [onCreateRemoteStreamView, remoteParticipantId]\n  );\n  const onDisposeStreamView = useMemo(\n    () => () => {\n      onDisposeRemoteStreamView?.(remoteParticipantId);\n    },\n    [onDisposeRemoteStreamView, remoteParticipantId]\n  );\n\n  return useVideoStreamLifecycleMaintainer({\n    ...props,\n    onCreateStreamView,\n    onDisposeStreamView\n  });\n};\n"]}

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

@@ -8,15 +8,7 @@ import { _preventDismissOnEvent as preventDismissOnEvent } from "../../../../acs
  */
 export const useVideoTileContextualMenuProps = (props) => {
     var _a;
-    const { participant, view, strings, isPinned, onPinParticipant, onUnpinParticipant, onUpdateScalingMode, disablePinMenuItem, toggleAnnouncerString, spotlightedParticipantUserIds = [], isSpotlighted, onStartSpotlight, onStopSpotlight, maxParticipantsToSpotlight, myUserId, onMuteParticipant, 
-    /* @conditional-compile-remove(media-access) */
-    onForbidAudio, 
-    /* @conditional-compile-remove(media-access) */
-    onPermitAudio, 
-    /* @conditional-compile-remove(media-access) */
-    onForbidVideo, 
-    /* @conditional-compile-remove(media-access) */
-    onPermitVideo } = props;
+    const { participant, view, strings, isPinned, onPinParticipant, onUnpinParticipant, onUpdateScalingMode, disablePinMenuItem, toggleAnnouncerString, spotlightedParticipantUserIds = [], isSpotlighted, onStartSpotlight, onStopSpotlight, maxParticipantsToSpotlight, myUserId, onMuteParticipant, onForbidAudio, onPermitAudio, onForbidVideo, onPermitVideo } = props;
     const scalingMode = useMemo(() => {
         var _a;
         return (_a = props.participant.videoStream) === null || _a === void 0 ? void 0 : _a.scalingMode;
@@ -38,7 +30,6 @@ export const useVideoTileContextualMenuProps = (props) => {
                 disabled: participant.isMuted
             });
         }
-        /* @conditional-compile-remove(media-access) */
         if (participant.canAudioBeForbidden &&
             participant.mediaAccess &&
             !participant.mediaAccess.isAudioPermitted &&
@@ -55,7 +46,6 @@ export const useVideoTileContextualMenuProps = (props) => {
                 ariaLabel: strings === null || strings === void 0 ? void 0 : strings.permitAudioTileMenuLabel
             });
         }
-        /* @conditional-compile-remove(media-access) */
         if (participant.canAudioBeForbidden && ((_a = participant.mediaAccess) === null || _a === void 0 ? void 0 : _a.isAudioPermitted) && onForbidAudio) {
             items.push({
                 key: 'forbidAudio',
@@ -69,7 +59,6 @@ export const useVideoTileContextualMenuProps = (props) => {
                 ariaLabel: strings === null || strings === void 0 ? void 0 : strings.forbidAudioTileMenuLabel
             });
         }
-        /* @conditional-compile-remove(media-access) */
         if (participant.canVideoBeForbidden &&
             participant.mediaAccess &&
             !participant.mediaAccess.isVideoPermitted &&
@@ -86,7 +75,6 @@ export const useVideoTileContextualMenuProps = (props) => {
                 ariaLabel: strings === null || strings === void 0 ? void 0 : strings.permitVideoTileMenuLabel
             });
         }
-        /* @conditional-compile-remove(media-access) */
         if (participant.canVideoBeForbidden && ((_b = participant.mediaAccess) === null || _b === void 0 ? void 0 : _b.isVideoPermitted) && onForbidVideo) {
             items.push({
                 key: 'forbidVideo',
@@ -244,19 +232,12 @@ export const useVideoTileContextualMenuProps = (props) => {
         onStartSpotlight,
         onUpdateScalingMode,
         view,
-        /* @conditional-compile-remove(media-access) */
         participant.canAudioBeForbidden,
-        /* @conditional-compile-remove(media-access) */
         participant.canVideoBeForbidden,
-        /* @conditional-compile-remove(media-access) */
         participant.mediaAccess,
-        /* @conditional-compile-remove(media-access) */
         onPermitAudio,
-        /* @conditional-compile-remove(media-access) */
         onForbidAudio,
-        /* @conditional-compile-remove(media-access) */
         onPermitVideo,
-        /* @conditional-compile-remove(media-access) */
         onForbidVideo
     ]);
     return contextualMenuProps;

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

@@ -1 +1 @@
-{"version":3,"file":"useVideoTileContextualMenuProps.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/VideoGallery/useVideoTileContextualMenuProps.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { IContextualMenuItem, IContextualMenuProps } from '@fluentui/react';\nimport { _formatString } from '@internal/acs-ui-common';\nimport { useMemo } from 'react';\nimport { VideoGalleryParticipant, ViewScalingMode } from '../../types';\nimport { _preventDismissOnEvent as preventDismissOnEvent } from '@internal/acs-ui-common';\n\n/**\n * @private\n */\nexport const useVideoTileContextualMenuProps = (props: {\n  participant: VideoGalleryParticipant;\n  strings?: {\n    fitRemoteParticipantToFrame?: string;\n    fillRemoteParticipantFrame?: string;\n    pinParticipantForMe?: string;\n    pinParticipantForMeLimitReached?: string;\n    unpinParticipantForMe?: string;\n    pinParticipantMenuItemAriaLabel?: string;\n    unpinParticipantMenuItemAriaLabel?: string;\n    pinnedParticipantAnnouncementAriaLabel?: string;\n    unpinnedParticipantAnnouncementAriaLabel?: string;\n    startSpotlightVideoTileMenuLabel?: string;\n    addSpotlightVideoTileMenuLabel?: string;\n    stopSpotlightVideoTileMenuLabel?: string;\n    stopSpotlightOnSelfVideoTileMenuLabel?: string;\n    spotlightLimitReachedMenuTitle?: string;\n    muteParticipantMenuItemLabel?: string;\n    /* @conditional-compile-remove(media-access) */\n    forbidAudioTileMenuLabel?: string;\n    /* @conditional-compile-remove(media-access) */\n    permitAudioTileMenuLabel?: string;\n    /* @conditional-compile-remove(media-access) */\n    forbidVideoTileMenuLabel?: string;\n    /* @conditional-compile-remove(media-access) */\n    permitVideoTileMenuLabel?: string;\n  };\n  view?: { updateScalingMode: (scalingMode: ViewScalingMode) => Promise<void> };\n  isPinned?: boolean;\n  onPinParticipant?: (userId: string) => void;\n  onUnpinParticipant?: (userId: string) => void;\n  onUpdateScalingMode?: (userId: string, scalingMode: ViewScalingMode) => void;\n  disablePinMenuItem?: boolean;\n  toggleAnnouncerString?: (announcerString: string) => void;\n  isSpotlighted?: boolean;\n  spotlightedParticipantUserIds?: string[];\n  onStartSpotlight?: (userIds: string[]) => void;\n  onStopSpotlight?: (userIds: string[]) => void;\n  maxParticipantsToSpotlight?: number;\n  myUserId?: string;\n  onMuteParticipant?: (userId: string) => void;\n  /* @conditional-compile-remove(media-access) */\n  onForbidAudio?: (userIds: string[]) => void;\n  /* @conditional-compile-remove(media-access) */\n  onPermitAudio?: (userIds: string[]) => void;\n  /* @conditional-compile-remove(media-access) */\n  onForbidVideo?: (userIds: string[]) => void;\n  /* @conditional-compile-remove(media-access) */\n  onPermitVideo?: (userIds: string[]) => void;\n}): IContextualMenuProps | undefined => {\n  const {\n    participant,\n    view,\n    strings,\n    isPinned,\n    onPinParticipant,\n    onUnpinParticipant,\n    onUpdateScalingMode,\n    disablePinMenuItem,\n    toggleAnnouncerString,\n    spotlightedParticipantUserIds = [],\n    isSpotlighted,\n    onStartSpotlight,\n    onStopSpotlight,\n    maxParticipantsToSpotlight,\n    myUserId,\n    onMuteParticipant,\n    /* @conditional-compile-remove(media-access) */\n    onForbidAudio,\n    /* @conditional-compile-remove(media-access) */\n    onPermitAudio,\n    /* @conditional-compile-remove(media-access) */\n    onForbidVideo,\n    /* @conditional-compile-remove(media-access) */\n    onPermitVideo\n  } = props;\n  const scalingMode = useMemo(() => {\n    return props.participant.videoStream?.scalingMode;\n  }, [props.participant.videoStream?.scalingMode]);\n\n  const contextualMenuProps: IContextualMenuProps | undefined = useMemo(() => {\n    const items: IContextualMenuItem[] = [];\n    if (onMuteParticipant && strings?.muteParticipantMenuItemLabel) {\n      items.push({\n        key: 'mute',\n        text: strings?.muteParticipantMenuItemLabel,\n        iconProps: {\n          iconName: 'ContextualMenuMicMutedIcon',\n          styles: { root: { lineHeight: 0 } }\n        },\n        onClick: () => onMuteParticipant(participant.userId),\n        'data-ui-id': 'video-tile-mute-participant',\n        ariaLabel: strings?.muteParticipantMenuItemLabel,\n        disabled: participant.isMuted\n      });\n    }\n\n    /* @conditional-compile-remove(media-access) */\n    if (\n      participant.canAudioBeForbidden &&\n      participant.mediaAccess &&\n      !participant.mediaAccess.isAudioPermitted &&\n      onPermitAudio\n    ) {\n      items.push({\n        key: 'permitAudio',\n        text: strings?.permitAudioTileMenuLabel,\n        iconProps: {\n          iconName: 'ControlButtonMicOn',\n          styles: { root: { lineHeight: 0 } }\n        },\n        onClick: () => onPermitAudio([participant.userId]),\n        'data-ui-id': 'video-tile-permit-audio',\n        ariaLabel: strings?.permitAudioTileMenuLabel\n      });\n    }\n    /* @conditional-compile-remove(media-access) */\n    if (participant.canAudioBeForbidden && participant.mediaAccess?.isAudioPermitted && onForbidAudio) {\n      items.push({\n        key: 'forbidAudio',\n        text: strings?.forbidAudioTileMenuLabel,\n        iconProps: {\n          iconName: 'ControlButtonMicProhibited',\n          styles: { root: { lineHeight: 0 } }\n        },\n        onClick: () => onForbidAudio([participant.userId]),\n        'data-ui-id': 'video-tile-forbid-audio',\n        ariaLabel: strings?.forbidAudioTileMenuLabel\n      });\n    }\n\n    /* @conditional-compile-remove(media-access) */\n    if (\n      participant.canVideoBeForbidden &&\n      participant.mediaAccess &&\n      !participant.mediaAccess.isVideoPermitted &&\n      onPermitVideo\n    ) {\n      items.push({\n        key: 'permitVideo',\n        text: strings?.permitVideoTileMenuLabel,\n        iconProps: {\n          iconName: 'ControlButtonCameraOn',\n          styles: { root: { lineHeight: 0 } }\n        },\n        onClick: () => onPermitVideo([participant.userId]),\n        'data-ui-id': 'video-tile-permit-video',\n        ariaLabel: strings?.permitVideoTileMenuLabel\n      });\n    }\n    /* @conditional-compile-remove(media-access) */\n    if (participant.canVideoBeForbidden && participant.mediaAccess?.isVideoPermitted && onForbidVideo) {\n      items.push({\n        key: 'forbidVideo',\n        text: strings?.forbidVideoTileMenuLabel,\n        iconProps: {\n          iconName: 'ControlButtonCameraProhibited',\n          styles: { root: { lineHeight: 0 } }\n        },\n        onClick: () => onForbidVideo([participant.userId]),\n        'data-ui-id': 'video-tile-forbid-video',\n        ariaLabel: strings?.forbidVideoTileMenuLabel\n      });\n    }\n\n    if (isPinned !== undefined) {\n      if (isPinned && onUnpinParticipant && strings?.unpinParticipantForMe) {\n        let unpinActionString: string | undefined = undefined;\n        if (toggleAnnouncerString && strings.unpinParticipantMenuItemAriaLabel && participant.displayName) {\n          unpinActionString = _formatString(strings?.unpinParticipantMenuItemAriaLabel, {\n            participantName: participant.displayName\n          });\n        }\n        items.push({\n          key: 'unpin',\n          text: strings.unpinParticipantForMe,\n          iconProps: {\n            iconName: 'UnpinParticipant',\n            styles: { root: { lineHeight: '1rem', textAlign: 'center' } }\n          },\n          onClick: () => {\n            onUnpinParticipant(participant.userId);\n            unpinActionString && toggleAnnouncerString?.(unpinActionString);\n          },\n          'data-ui-id': 'video-tile-unpin-participant-button',\n          ariaLabel: unpinActionString\n        });\n      }\n      if (!isPinned && onPinParticipant && strings?.pinParticipantForMe) {\n        let pinActionString: string | undefined = undefined;\n        if (toggleAnnouncerString && strings.pinnedParticipantAnnouncementAriaLabel && participant.displayName) {\n          pinActionString = _formatString(strings?.pinnedParticipantAnnouncementAriaLabel, {\n            participantName: participant.displayName\n          });\n        }\n        items.push({\n          key: 'pin',\n          text: disablePinMenuItem ? strings.pinParticipantForMeLimitReached : strings.pinParticipantForMe,\n          iconProps: {\n            iconName: 'PinParticipant',\n            styles: { root: { lineHeight: '1rem', textAlign: 'center' } }\n          },\n          onClick: () => {\n            onPinParticipant(participant.userId);\n            pinActionString && toggleAnnouncerString?.(pinActionString);\n          },\n          'data-ui-id': 'video-tile-pin-participant-button',\n          disabled: disablePinMenuItem || isSpotlighted,\n          ariaLabel: strings.pinParticipantForMe\n        });\n      }\n    }\n\n    if (isSpotlighted) {\n      const stopSpotlightMenuLabel =\n        myUserId === participant.userId\n          ? strings?.stopSpotlightOnSelfVideoTileMenuLabel\n          : strings?.stopSpotlightVideoTileMenuLabel;\n      if (onStopSpotlight && participant.userId && strings?.stopSpotlightVideoTileMenuLabel) {\n        items.push({\n          key: 'stopSpotlight',\n          text: stopSpotlightMenuLabel,\n          iconProps: {\n            iconName: 'StopSpotlightContextualMenuItem',\n            styles: { root: { lineHeight: 0 } }\n          },\n          onClick: () => onStopSpotlight([participant.userId]),\n          ariaLabel: strings.stopSpotlightVideoTileMenuLabel\n        });\n      }\n    } else {\n      const startSpotlightMenuLabel =\n        spotlightedParticipantUserIds && spotlightedParticipantUserIds.length > 0\n          ? strings?.addSpotlightVideoTileMenuLabel\n          : strings?.startSpotlightVideoTileMenuLabel;\n      const maxSpotlightedParticipantsReached = maxParticipantsToSpotlight\n        ? spotlightedParticipantUserIds.length >= maxParticipantsToSpotlight\n        : false;\n      if (onStartSpotlight && participant.userId && startSpotlightMenuLabel) {\n        items.push({\n          key: 'startSpotlight',\n          text: startSpotlightMenuLabel,\n          iconProps: {\n            iconName: 'StartSpotlightContextualMenuItem',\n            styles: { root: { lineHeight: 0 } }\n          },\n          onClick: () => onStartSpotlight([participant.userId]),\n          ariaLabel: startSpotlightMenuLabel,\n          disabled: maxSpotlightedParticipantsReached,\n          title: maxSpotlightedParticipantsReached ? strings?.spotlightLimitReachedMenuTitle : undefined\n        });\n      }\n    }\n    if (scalingMode) {\n      if (scalingMode === 'Crop' && strings?.fitRemoteParticipantToFrame) {\n        items.push({\n          key: 'fitRemoteParticipantToFrame',\n          text: strings.fitRemoteParticipantToFrame,\n          iconProps: {\n            iconName: 'VideoTileScaleFit',\n            styles: { root: { lineHeight: '1rem', textAlign: 'center' } }\n          },\n          onClick: () => {\n            onUpdateScalingMode?.(participant.userId, 'Fit');\n            view?.updateScalingMode('Fit');\n          },\n          'data-ui-id': 'video-tile-fit-to-frame',\n          ariaLabel: strings.fitRemoteParticipantToFrame\n        });\n      } else if (scalingMode === 'Fit' && strings?.fillRemoteParticipantFrame) {\n        items.push({\n          key: 'fillRemoteParticipantFrame',\n          text: strings.fillRemoteParticipantFrame,\n          iconProps: {\n            iconName: 'VideoTileScaleFill',\n            styles: { root: { lineHeight: '1rem', textAlign: 'center' } }\n          },\n          onClick: () => {\n            onUpdateScalingMode?.(participant.userId, 'Crop');\n            view?.updateScalingMode('Crop');\n          },\n          'data-ui-id': 'video-tile-fill-frame',\n          ariaLabel: strings.fillRemoteParticipantFrame\n        });\n      }\n    }\n    if (items.length === 0) {\n      return undefined;\n    }\n\n    return { items, styles: {}, calloutProps: { preventDismissOnEvent }, shouldFocusOnContainer: false };\n  }, [\n    onMuteParticipant,\n    strings,\n    participant.isMuted,\n    participant.userId,\n    participant.displayName,\n    isPinned,\n    isSpotlighted,\n    scalingMode,\n    onUnpinParticipant,\n    onPinParticipant,\n    toggleAnnouncerString,\n    disablePinMenuItem,\n    myUserId,\n    onStopSpotlight,\n    spotlightedParticipantUserIds,\n    maxParticipantsToSpotlight,\n    onStartSpotlight,\n    onUpdateScalingMode,\n    view,\n    /* @conditional-compile-remove(media-access) */\n    participant.canAudioBeForbidden,\n    /* @conditional-compile-remove(media-access) */\n    participant.canVideoBeForbidden,\n    /* @conditional-compile-remove(media-access) */\n    participant.mediaAccess,\n    /* @conditional-compile-remove(media-access) */\n    onPermitAudio,\n    /* @conditional-compile-remove(media-access) */\n    onForbidAudio,\n    /* @conditional-compile-remove(media-access) */\n    onPermitVideo,\n    /* @conditional-compile-remove(media-access) */\n    onForbidVideo\n  ]);\n\n  return contextualMenuProps;\n};\n"]}
+{"version":3,"file":"useVideoTileContextualMenuProps.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/VideoGallery/useVideoTileContextualMenuProps.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { IContextualMenuItem, IContextualMenuProps } from '@fluentui/react';\nimport { _formatString } from '@internal/acs-ui-common';\nimport { useMemo } from 'react';\nimport { VideoGalleryParticipant, ViewScalingMode } from '../../types';\nimport { _preventDismissOnEvent as preventDismissOnEvent } from '@internal/acs-ui-common';\n\n/**\n * @private\n */\nexport const useVideoTileContextualMenuProps = (props: {\n  participant: VideoGalleryParticipant;\n  strings?: {\n    fitRemoteParticipantToFrame?: string;\n    fillRemoteParticipantFrame?: string;\n    pinParticipantForMe?: string;\n    pinParticipantForMeLimitReached?: string;\n    unpinParticipantForMe?: string;\n    pinParticipantMenuItemAriaLabel?: string;\n    unpinParticipantMenuItemAriaLabel?: string;\n    pinnedParticipantAnnouncementAriaLabel?: string;\n    unpinnedParticipantAnnouncementAriaLabel?: string;\n    startSpotlightVideoTileMenuLabel?: string;\n    addSpotlightVideoTileMenuLabel?: string;\n    stopSpotlightVideoTileMenuLabel?: string;\n    stopSpotlightOnSelfVideoTileMenuLabel?: string;\n    spotlightLimitReachedMenuTitle?: string;\n    muteParticipantMenuItemLabel?: string;\n    forbidAudioTileMenuLabel?: string;\n    permitAudioTileMenuLabel?: string;\n    forbidVideoTileMenuLabel?: string;\n    permitVideoTileMenuLabel?: string;\n  };\n  view?: { updateScalingMode: (scalingMode: ViewScalingMode) => Promise<void> };\n  isPinned?: boolean;\n  onPinParticipant?: (userId: string) => void;\n  onUnpinParticipant?: (userId: string) => void;\n  onUpdateScalingMode?: (userId: string, scalingMode: ViewScalingMode) => void;\n  disablePinMenuItem?: boolean;\n  toggleAnnouncerString?: (announcerString: string) => void;\n  isSpotlighted?: boolean;\n  spotlightedParticipantUserIds?: string[];\n  onStartSpotlight?: (userIds: string[]) => void;\n  onStopSpotlight?: (userIds: string[]) => void;\n  maxParticipantsToSpotlight?: number;\n  myUserId?: string;\n  onMuteParticipant?: (userId: string) => void;\n  onForbidAudio?: (userIds: string[]) => void;\n  onPermitAudio?: (userIds: string[]) => void;\n  onForbidVideo?: (userIds: string[]) => void;\n  onPermitVideo?: (userIds: string[]) => void;\n}): IContextualMenuProps | undefined => {\n  const {\n    participant,\n    view,\n    strings,\n    isPinned,\n    onPinParticipant,\n    onUnpinParticipant,\n    onUpdateScalingMode,\n    disablePinMenuItem,\n    toggleAnnouncerString,\n    spotlightedParticipantUserIds = [],\n    isSpotlighted,\n    onStartSpotlight,\n    onStopSpotlight,\n    maxParticipantsToSpotlight,\n    myUserId,\n    onMuteParticipant,\n    onForbidAudio,\n    onPermitAudio,\n    onForbidVideo,\n    onPermitVideo\n  } = props;\n  const scalingMode = useMemo(() => {\n    return props.participant.videoStream?.scalingMode;\n  }, [props.participant.videoStream?.scalingMode]);\n\n  const contextualMenuProps: IContextualMenuProps | undefined = useMemo(() => {\n    const items: IContextualMenuItem[] = [];\n    if (onMuteParticipant && strings?.muteParticipantMenuItemLabel) {\n      items.push({\n        key: 'mute',\n        text: strings?.muteParticipantMenuItemLabel,\n        iconProps: {\n          iconName: 'ContextualMenuMicMutedIcon',\n          styles: { root: { lineHeight: 0 } }\n        },\n        onClick: () => onMuteParticipant(participant.userId),\n        'data-ui-id': 'video-tile-mute-participant',\n        ariaLabel: strings?.muteParticipantMenuItemLabel,\n        disabled: participant.isMuted\n      });\n    }\n\n    if (\n      participant.canAudioBeForbidden &&\n      participant.mediaAccess &&\n      !participant.mediaAccess.isAudioPermitted &&\n      onPermitAudio\n    ) {\n      items.push({\n        key: 'permitAudio',\n        text: strings?.permitAudioTileMenuLabel,\n        iconProps: {\n          iconName: 'ControlButtonMicOn',\n          styles: { root: { lineHeight: 0 } }\n        },\n        onClick: () => onPermitAudio([participant.userId]),\n        'data-ui-id': 'video-tile-permit-audio',\n        ariaLabel: strings?.permitAudioTileMenuLabel\n      });\n    }\n\n    if (participant.canAudioBeForbidden && participant.mediaAccess?.isAudioPermitted && onForbidAudio) {\n      items.push({\n        key: 'forbidAudio',\n        text: strings?.forbidAudioTileMenuLabel,\n        iconProps: {\n          iconName: 'ControlButtonMicProhibited',\n          styles: { root: { lineHeight: 0 } }\n        },\n        onClick: () => onForbidAudio([participant.userId]),\n        'data-ui-id': 'video-tile-forbid-audio',\n        ariaLabel: strings?.forbidAudioTileMenuLabel\n      });\n    }\n\n    if (\n      participant.canVideoBeForbidden &&\n      participant.mediaAccess &&\n      !participant.mediaAccess.isVideoPermitted &&\n      onPermitVideo\n    ) {\n      items.push({\n        key: 'permitVideo',\n        text: strings?.permitVideoTileMenuLabel,\n        iconProps: {\n          iconName: 'ControlButtonCameraOn',\n          styles: { root: { lineHeight: 0 } }\n        },\n        onClick: () => onPermitVideo([participant.userId]),\n        'data-ui-id': 'video-tile-permit-video',\n        ariaLabel: strings?.permitVideoTileMenuLabel\n      });\n    }\n\n    if (participant.canVideoBeForbidden && participant.mediaAccess?.isVideoPermitted && onForbidVideo) {\n      items.push({\n        key: 'forbidVideo',\n        text: strings?.forbidVideoTileMenuLabel,\n        iconProps: {\n          iconName: 'ControlButtonCameraProhibited',\n          styles: { root: { lineHeight: 0 } }\n        },\n        onClick: () => onForbidVideo([participant.userId]),\n        'data-ui-id': 'video-tile-forbid-video',\n        ariaLabel: strings?.forbidVideoTileMenuLabel\n      });\n    }\n\n    if (isPinned !== undefined) {\n      if (isPinned && onUnpinParticipant && strings?.unpinParticipantForMe) {\n        let unpinActionString: string | undefined = undefined;\n        if (toggleAnnouncerString && strings.unpinParticipantMenuItemAriaLabel && participant.displayName) {\n          unpinActionString = _formatString(strings?.unpinParticipantMenuItemAriaLabel, {\n            participantName: participant.displayName\n          });\n        }\n        items.push({\n          key: 'unpin',\n          text: strings.unpinParticipantForMe,\n          iconProps: {\n            iconName: 'UnpinParticipant',\n            styles: { root: { lineHeight: '1rem', textAlign: 'center' } }\n          },\n          onClick: () => {\n            onUnpinParticipant(participant.userId);\n            unpinActionString && toggleAnnouncerString?.(unpinActionString);\n          },\n          'data-ui-id': 'video-tile-unpin-participant-button',\n          ariaLabel: unpinActionString\n        });\n      }\n      if (!isPinned && onPinParticipant && strings?.pinParticipantForMe) {\n        let pinActionString: string | undefined = undefined;\n        if (toggleAnnouncerString && strings.pinnedParticipantAnnouncementAriaLabel && participant.displayName) {\n          pinActionString = _formatString(strings?.pinnedParticipantAnnouncementAriaLabel, {\n            participantName: participant.displayName\n          });\n        }\n        items.push({\n          key: 'pin',\n          text: disablePinMenuItem ? strings.pinParticipantForMeLimitReached : strings.pinParticipantForMe,\n          iconProps: {\n            iconName: 'PinParticipant',\n            styles: { root: { lineHeight: '1rem', textAlign: 'center' } }\n          },\n          onClick: () => {\n            onPinParticipant(participant.userId);\n            pinActionString && toggleAnnouncerString?.(pinActionString);\n          },\n          'data-ui-id': 'video-tile-pin-participant-button',\n          disabled: disablePinMenuItem || isSpotlighted,\n          ariaLabel: strings.pinParticipantForMe\n        });\n      }\n    }\n\n    if (isSpotlighted) {\n      const stopSpotlightMenuLabel =\n        myUserId === participant.userId\n          ? strings?.stopSpotlightOnSelfVideoTileMenuLabel\n          : strings?.stopSpotlightVideoTileMenuLabel;\n      if (onStopSpotlight && participant.userId && strings?.stopSpotlightVideoTileMenuLabel) {\n        items.push({\n          key: 'stopSpotlight',\n          text: stopSpotlightMenuLabel,\n          iconProps: {\n            iconName: 'StopSpotlightContextualMenuItem',\n            styles: { root: { lineHeight: 0 } }\n          },\n          onClick: () => onStopSpotlight([participant.userId]),\n          ariaLabel: strings.stopSpotlightVideoTileMenuLabel\n        });\n      }\n    } else {\n      const startSpotlightMenuLabel =\n        spotlightedParticipantUserIds && spotlightedParticipantUserIds.length > 0\n          ? strings?.addSpotlightVideoTileMenuLabel\n          : strings?.startSpotlightVideoTileMenuLabel;\n      const maxSpotlightedParticipantsReached = maxParticipantsToSpotlight\n        ? spotlightedParticipantUserIds.length >= maxParticipantsToSpotlight\n        : false;\n      if (onStartSpotlight && participant.userId && startSpotlightMenuLabel) {\n        items.push({\n          key: 'startSpotlight',\n          text: startSpotlightMenuLabel,\n          iconProps: {\n            iconName: 'StartSpotlightContextualMenuItem',\n            styles: { root: { lineHeight: 0 } }\n          },\n          onClick: () => onStartSpotlight([participant.userId]),\n          ariaLabel: startSpotlightMenuLabel,\n          disabled: maxSpotlightedParticipantsReached,\n          title: maxSpotlightedParticipantsReached ? strings?.spotlightLimitReachedMenuTitle : undefined\n        });\n      }\n    }\n    if (scalingMode) {\n      if (scalingMode === 'Crop' && strings?.fitRemoteParticipantToFrame) {\n        items.push({\n          key: 'fitRemoteParticipantToFrame',\n          text: strings.fitRemoteParticipantToFrame,\n          iconProps: {\n            iconName: 'VideoTileScaleFit',\n            styles: { root: { lineHeight: '1rem', textAlign: 'center' } }\n          },\n          onClick: () => {\n            onUpdateScalingMode?.(participant.userId, 'Fit');\n            view?.updateScalingMode('Fit');\n          },\n          'data-ui-id': 'video-tile-fit-to-frame',\n          ariaLabel: strings.fitRemoteParticipantToFrame\n        });\n      } else if (scalingMode === 'Fit' && strings?.fillRemoteParticipantFrame) {\n        items.push({\n          key: 'fillRemoteParticipantFrame',\n          text: strings.fillRemoteParticipantFrame,\n          iconProps: {\n            iconName: 'VideoTileScaleFill',\n            styles: { root: { lineHeight: '1rem', textAlign: 'center' } }\n          },\n          onClick: () => {\n            onUpdateScalingMode?.(participant.userId, 'Crop');\n            view?.updateScalingMode('Crop');\n          },\n          'data-ui-id': 'video-tile-fill-frame',\n          ariaLabel: strings.fillRemoteParticipantFrame\n        });\n      }\n    }\n    if (items.length === 0) {\n      return undefined;\n    }\n\n    return { items, styles: {}, calloutProps: { preventDismissOnEvent }, shouldFocusOnContainer: false };\n  }, [\n    onMuteParticipant,\n    strings,\n    participant.isMuted,\n    participant.userId,\n    participant.displayName,\n    isPinned,\n    isSpotlighted,\n    scalingMode,\n    onUnpinParticipant,\n    onPinParticipant,\n    toggleAnnouncerString,\n    disablePinMenuItem,\n    myUserId,\n    onStopSpotlight,\n    spotlightedParticipantUserIds,\n    maxParticipantsToSpotlight,\n    onStartSpotlight,\n    onUpdateScalingMode,\n    view,\n    participant.canAudioBeForbidden,\n    participant.canVideoBeForbidden,\n    participant.mediaAccess,\n    onPermitAudio,\n    onForbidAudio,\n    onPermitVideo,\n    onForbidVideo\n  ]);\n\n  return contextualMenuProps;\n};\n"]}

package/dist/dist-esm/react-components/src/components/VideoGallery.d.ts

@@ -2,7 +2,7 @@
 import { IStyle } from '@fluentui/react';
 import { GridLayoutStyles } from '.';
 import { BaseCustomStyles, OnRenderAvatarCallback, VideoGalleryLocalParticipant, VideoGalleryRemoteParticipant, VideoStreamOptions, CreateVideoStreamViewResult } from '../types';
-import { VideoGalleryTogetherModeParticipantPosition, VideoGalleryTogetherModeStreams, TogetherModeStreamViewResult } from '../types/TogetherModeTypes';
+import { VideoGalleryTogetherModeParticipantPosition, VideoGalleryTogetherModeStreams, TogetherModeStreamViewResult, TogetherModeStreamOptions } from '../types/TogetherModeTypes';
 import { HorizontalGalleryStyles } from './HorizontalGallery';
 import { LocalVideoCameraCycleButtonProps } from './LocalVideoCameraButton';
 import { VerticalGalleryStyles } from './VerticalGallery';
@@ -264,14 +264,37 @@ export interface VideoGalleryProps {
      * This callback is to mute a remote participant
      */
     onMuteParticipant?: (userId: string) => Promise<void>;
+    /**
+     * Indicates if the local participant can start together mode
+     */
     startTogetherModeEnabled?: boolean;
+    /**
+     * Indicates if together mode is active
+     */
     isTogetherModeActive?: boolean;
-    onCreateTogetherModeStreamView?: (options?: VideoStreamOptions) => Promise<void | TogetherModeStreamViewResult>;
-    /** Callback to create the local video stream view */
+    /**
+     * Callback to create a together mode stream view
+     */
+    onCreateTogetherModeStreamView?: (options?: TogetherModeStreamOptions) => Promise<void | TogetherModeStreamViewResult>;
+    /**
+     * This callback is to start together mode
+     */
     onStartTogetherMode?: () => Promise<void>;
+    /**
+     * This callback is to set the scene size for together mode
+     */
     onSetTogetherModeSceneSize?: (width: number, height: number) => void;
+    /**
+     * Together mode video streams
+     */
     togetherModeStreams?: VideoGalleryTogetherModeStreams;
+    /**
+     * Seating position of participants in together mode
+     */
     togetherModeSeatingCoordinates?: VideoGalleryTogetherModeParticipantPosition;
+    /**
+     * Callback to dispose a together mode stream view
+     */
     onDisposeTogetherModeStreamView?: () => Promise<void>;
     /**
      * This callback is to forbid audio for remote participant(s)

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

@@ -84,15 +84,7 @@ export const VideoGallery = (props) => {
     /* @conditional-compile-remove(together-mode) */
     togetherModeSeatingCoordinates, 
     /* @conditional-compile-remove(together-mode) */
-    onDisposeTogetherModeStreamView, 
-    /* @conditional-compile-remove(media-access) */
-    onForbidAudio, 
-    /* @conditional-compile-remove(media-access) */
-    onPermitAudio, 
-    /* @conditional-compile-remove(media-access) */
-    onForbidVideo, 
-    /* @conditional-compile-remove(media-access) */
-    onPermitVideo } = props;
+    onDisposeTogetherModeStreamView, onForbidAudio, onPermitAudio, onForbidVideo, onPermitVideo } = props;
     const ids = useIdentifiers();
     const theme = useTheme();
     const localeStrings = useLocale().strings.videoGallery;
@@ -150,9 +142,7 @@ export const VideoGallery = (props) => {
             return layout === 'default' ? strings.localVideoLabel : isNarrow ? '' : strings.localVideoLabel;
         };
         return (React.createElement(Stack, { styles: localVideoTileContainerStyles, key: "local-video-tile-key" },
-            React.createElement(_LocalVideoTile, { alwaysShowLabelBackground: videoTilesOptions === null || videoTilesOptions === void 0 ? void 0 : videoTilesOptions.alwaysShowLabelBackground, userId: localParticipant.userId, onCreateLocalStreamView: onCreateLocalStreamView, onDisposeLocalStreamView: onDisposeLocalStreamView, isAvailable: (_a = localParticipant === null || localParticipant === void 0 ? void 0 : localParticipant.videoStream) === null || _a === void 0 ? void 0 : _a.isAvailable, isMuted: localParticipant.isMuted, renderElement: (_b = localParticipant === null || localParticipant === void 0 ? void 0 : localParticipant.videoStream) === null || _b === void 0 ? void 0 : _b.renderElement, displayName: showDisplayNameTrampoline(), initialsName: initialsName, localVideoViewOptions: localVideoViewOptions, onRenderAvatar: onRenderAvatar, showLabel: showLocalVideoTileLabel, showMuteIndicator: showMuteIndicator, showCameraSwitcherInLocalPreview: showCameraSwitcherInLocalPreview, localVideoCameraCycleButtonProps: localVideoCameraCycleButtonProps, localVideoCameraSwitcherLabel: strings.localVideoCameraSwitcherLabel, localVideoSelectedDescription: strings.localVideoSelectedDescription, styles: localVideoTileStyles, raisedHand: localParticipant.raisedHand, reaction: localParticipant.reaction, spotlightedParticipantUserIds: spotlightedParticipants, isSpotlighted: isSpotlighted, onStartSpotlight: onStartLocalSpotlight, onStopSpotlight: onStopLocalSpotlight, maxParticipantsToSpotlight: maxParticipantsToSpotlight, menuKind: remoteVideoTileMenu ? (remoteVideoTileMenu.kind === 'drawer' ? 'drawer' : 'contextual') : undefined, drawerMenuHostId: drawerMenuHostId, strings: strings, reactionResources: reactionResources, participantsCount: remoteParticipants.length + 1, isScreenSharingOn: localParticipant.isScreenSharingOn, 
-                /* @conditional-compile-remove(media-access) */
-                mediaAccess: localParticipant.mediaAccess })));
+            React.createElement(_LocalVideoTile, { alwaysShowLabelBackground: videoTilesOptions === null || videoTilesOptions === void 0 ? void 0 : videoTilesOptions.alwaysShowLabelBackground, userId: localParticipant.userId, onCreateLocalStreamView: onCreateLocalStreamView, onDisposeLocalStreamView: onDisposeLocalStreamView, isAvailable: (_a = localParticipant === null || localParticipant === void 0 ? void 0 : localParticipant.videoStream) === null || _a === void 0 ? void 0 : _a.isAvailable, isMuted: localParticipant.isMuted, renderElement: (_b = localParticipant === null || localParticipant === void 0 ? void 0 : localParticipant.videoStream) === null || _b === void 0 ? void 0 : _b.renderElement, displayName: showDisplayNameTrampoline(), initialsName: initialsName, localVideoViewOptions: localVideoViewOptions, onRenderAvatar: onRenderAvatar, showLabel: showLocalVideoTileLabel, showMuteIndicator: showMuteIndicator, showCameraSwitcherInLocalPreview: showCameraSwitcherInLocalPreview, localVideoCameraCycleButtonProps: localVideoCameraCycleButtonProps, localVideoCameraSwitcherLabel: strings.localVideoCameraSwitcherLabel, localVideoSelectedDescription: strings.localVideoSelectedDescription, styles: localVideoTileStyles, raisedHand: localParticipant.raisedHand, reaction: localParticipant.reaction, spotlightedParticipantUserIds: spotlightedParticipants, isSpotlighted: isSpotlighted, onStartSpotlight: onStartLocalSpotlight, onStopSpotlight: onStopLocalSpotlight, maxParticipantsToSpotlight: maxParticipantsToSpotlight, menuKind: remoteVideoTileMenu ? (remoteVideoTileMenu.kind === 'drawer' ? 'drawer' : 'contextual') : undefined, drawerMenuHostId: drawerMenuHostId, strings: strings, reactionResources: reactionResources, participantsCount: remoteParticipants.length + 1, isScreenSharingOn: localParticipant.isScreenSharingOn, mediaAccess: localParticipant.mediaAccess })));
     }, [
         isNarrow,
         localParticipant,
@@ -232,15 +222,7 @@ export const VideoGallery = (props) => {
                     ? remoteVideoTileMenu.kind === 'drawer'
                         ? 'drawer'
                         : 'contextual'
-                    : undefined, drawerMenuHostId: drawerMenuHostId, onPinParticipant: onPinParticipant, onUnpinParticipant: onUnpinParticipant, onUpdateScalingMode: onUpdateScalingMode, isPinned: isPinned, disablePinMenuItem: pinnedParticipants.length >= MAX_PINNED_REMOTE_VIDEO_TILES, toggleAnnouncerString: toggleAnnouncerString, spotlightedParticipantUserIds: spotlightedParticipants, isSpotlighted: isSpotlighted, onStartSpotlight: onStartRemoteSpotlight, onStopSpotlight: onStopRemoteSpotlight, maxParticipantsToSpotlight: maxParticipantsToSpotlight, reactionResources: reactionResources, onMuteParticipant: onMuteParticipant, 
-            /* @conditional-compile-remove(media-access) */
-            onForbidAudio: onForbidAudio, 
-            /* @conditional-compile-remove(media-access) */
-            onPermitAudio: onPermitAudio, 
-            /* @conditional-compile-remove(media-access) */
-            onForbidVideo: onForbidVideo, 
-            /* @conditional-compile-remove(media-access) */
-            onPermitVideo: onPermitVideo }));
+                    : undefined, drawerMenuHostId: drawerMenuHostId, onPinParticipant: onPinParticipant, onUnpinParticipant: onUnpinParticipant, onUpdateScalingMode: onUpdateScalingMode, isPinned: isPinned, disablePinMenuItem: pinnedParticipants.length >= MAX_PINNED_REMOTE_VIDEO_TILES, toggleAnnouncerString: toggleAnnouncerString, spotlightedParticipantUserIds: spotlightedParticipants, isSpotlighted: isSpotlighted, onStartSpotlight: onStartRemoteSpotlight, onStopSpotlight: onStopRemoteSpotlight, maxParticipantsToSpotlight: maxParticipantsToSpotlight, reactionResources: reactionResources, onMuteParticipant: onMuteParticipant, onForbidAudio: onForbidAudio, onPermitAudio: onPermitAudio, onForbidVideo: onForbidVideo, onPermitVideo: onPermitVideo }));
     }, [
         selectedScalingModeState,
         pinnedParticipants,
@@ -263,13 +245,9 @@ export const VideoGallery = (props) => {
         maxParticipantsToSpotlight,
         reactionResources,
         onMuteParticipant,
-        /* @conditional-compile-remove(media-access) */
         onForbidAudio,
-        /* @conditional-compile-remove(media-access) */
         onPermitAudio,
-        /* @conditional-compile-remove(media-access) */
         onForbidVideo,
-        /* @conditional-compile-remove(media-access) */
         onPermitVideo,
         remoteVideoViewOptions
     ]);
@@ -282,7 +260,7 @@ export const VideoGallery = (props) => {
             ? localScreenShareStreamComponent
             : undefined;
     /* @conditional-compile-remove(together-mode) */
-    const togetherModeStreamComponent = useMemo(() => (React.createElement(TogetherModeStream, { startTogetherModeEnabled: startTogetherModeEnabled, isTogetherModeActive: isTogetherModeActive, onCreateTogetherModeStreamView: onCreateTogetherModeStreamView, onStartTogetherMode: onStartTogetherMode, onDisposeTogetherModeStreamView: onDisposeTogetherModeStreamView, onSetTogetherModeSceneSize: onSetTogetherModeSceneSize, togetherModeStreams: togetherModeStreams, seatingCoordinates: togetherModeSeatingCoordinates, localParticipant: localParticipant, remoteParticipants: remoteParticipants, reactionResources: reactionResources, screenShareComponent: screenShareComponent, containerWidth: containerWidth, containerHeight: containerHeight })), [
+    const togetherModeStreamComponent = useMemo(() => (React.createElement(TogetherModeStream, { startTogetherModeEnabled: startTogetherModeEnabled, isTogetherModeActive: isTogetherModeActive, onCreateTogetherModeStreamView: onCreateTogetherModeStreamView, onStartTogetherMode: onStartTogetherMode, onDisposeTogetherModeStreamView: onDisposeTogetherModeStreamView, onSetTogetherModeSceneSize: onSetTogetherModeSceneSize, togetherModeStreams: togetherModeStreams, seatingCoordinates: togetherModeSeatingCoordinates, localParticipant: localParticipant, remoteParticipants: remoteParticipants, reactionResources: reactionResources, containerWidth: containerWidth, containerHeight: containerHeight })), [
         startTogetherModeEnabled,
         isTogetherModeActive,
         onCreateTogetherModeStreamView,
@@ -294,7 +272,6 @@ export const VideoGallery = (props) => {
         localParticipant,
         remoteParticipants,
         reactionResources,
-        screenShareComponent,
         containerWidth,
         containerHeight
     ]);
@@ -317,9 +294,7 @@ export const VideoGallery = (props) => {
         pinnedParticipantUserIds: pinnedParticipants,
         overflowGalleryPosition,
         localVideoTileSize,
-        spotlightedParticipantUserIds: spotlightedParticipants,
-        /* @conditional-compile-remove(together-mode) */
-        togetherModeStreamComponent
+        spotlightedParticipantUserIds: spotlightedParticipants
     }), [
         remoteParticipants,
         localParticipant,
@@ -336,9 +311,7 @@ export const VideoGallery = (props) => {
         pinnedParticipants,
         overflowGalleryPosition,
         localVideoTileSize,
-        spotlightedParticipants,
-        /* @conditional-compile-remove(together-mode) */
-        togetherModeStreamComponent
+        spotlightedParticipants
     ]);
     const videoGalleryLayout = useMemo(() => {
         if (screenShareParticipant && layout === 'focusedContent') {
@@ -357,15 +330,17 @@ export const VideoGallery = (props) => {
         /* @conditional-compile-remove(together-mode) */
         // Teams users can switch to Together mode layout only if they have the capability,
         // while ACS users can do so only if Together mode is enabled.
-        if (layout === 'togetherMode' && canSwitchToTogetherModeLayout) {
-            return React.createElement(TogetherModeLayout, Object.assign({}, layoutProps));
+        if (!screenShareComponent && layout === 'togetherMode' && canSwitchToTogetherModeLayout) {
+            return React.createElement(TogetherModeLayout, { togetherModeStreamComponent: togetherModeStreamComponent });
         }
         return React.createElement(DefaultLayout, Object.assign({}, layoutProps));
     }, [
         /* @conditional-compile-remove(together-mode) */ canSwitchToTogetherModeLayout,
         layout,
         layoutProps,
-        screenShareParticipant
+        screenShareComponent,
+        screenShareParticipant,
+        /* @conditional-compile-remove(together-mode) */ togetherModeStreamComponent
     ]);
     return (React.createElement("div", { 
         // We don't assign an drawer menu host id to the VideoGallery when a drawerMenuHostId is assigned from props