@azure/communication-react 1.4.3-alpha-202212170012.0 → 1.4.3-alpha-202212180014.0

package/dist/dist-esm/acs-ui-common/src/telemetryVersion.js

@@ -2,5 +2,5 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
 // GENERATED FILE. DO NOT EDIT MANUALLY.
-module.exports = '1.4.3-alpha-202212170012.0';
+module.exports = '1.4.3-alpha-202212180014.0';
 //# sourceMappingURL=telemetryVersion.js.map

package/dist/dist-esm/acs-ui-common/src/telemetryVersion.js.map

@@ -1 +1 @@
-{"version":3,"file":"telemetryVersion.js","sourceRoot":"","sources":["../../../../../acs-ui-common/src/telemetryVersion.js"],"names":[],"mappings":";AAAA,uCAAuC;AACvC,kCAAkC;AAElC,wCAAwC;AAExC,MAAM,CAAC,OAAO,GAAG,4BAA4B,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\n// GENERATED FILE. DO NOT EDIT MANUALLY.\n\nmodule.exports = '1.4.3-alpha-202212170012.0';\n"]}
+{"version":3,"file":"telemetryVersion.js","sourceRoot":"","sources":["../../../../../acs-ui-common/src/telemetryVersion.js"],"names":[],"mappings":";AAAA,uCAAuC;AACvC,kCAAkC;AAElC,wCAAwC;AAExC,MAAM,CAAC,OAAO,GAAG,4BAA4B,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\n// GENERATED FILE. DO NOT EDIT MANUALLY.\n\nmodule.exports = '1.4.3-alpha-202212180014.0';\n"]}

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

@@ -25,5 +25,8 @@ export declare const _RemoteVideoTile: React.MemoExoticComponent<(props: {
     strings?: VideoGalleryStrings | undefined;
     participantState?: ParticipantState | undefined;
     showRemoteVideoTileContextualMenu?: boolean | undefined;
+    onPinParticipant?: ((userId: string) => void) | undefined;
+    onUnpinParticipant?: ((userId: string) => void) | undefined;
+    isPinned?: boolean | undefined;
 }) => JSX.Element>;
 //# sourceMappingURL=RemoteVideoTile.d.ts.map

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

@@ -14,7 +14,7 @@ import { VideoTile } from './VideoTile';
  */
 export const _RemoteVideoTile = React.memo((props) => {
     const { isAvailable, isReceiving = true, // default to true to prevent any breaking change
-    isScreenSharingOn, onCreateRemoteStreamView, onDisposeRemoteStreamView, remoteVideoViewOptions, renderElement, userId, onRenderAvatar, showMuteIndicator, remoteParticipant, participantState, showRemoteVideoTileContextualMenu = true } = props;
+    isScreenSharingOn, onCreateRemoteStreamView, onDisposeRemoteStreamView, remoteVideoViewOptions, renderElement, userId, onRenderAvatar, showMuteIndicator, remoteParticipant, participantState, showRemoteVideoTileContextualMenu = true, isPinned, onPinParticipant, onUnpinParticipant } = props;
     const remoteVideoStreamProps = useMemo(() => ({
         isMirrored: remoteVideoViewOptions === null || remoteVideoViewOptions === void 0 ? void 0 : remoteVideoViewOptions.isMirrored,
         isScreenSharingOn,
@@ -42,7 +42,10 @@ export const _RemoteVideoTile = React.memo((props) => {
         remoteParticipant,
         view: createVideoStreamResult === null || createVideoStreamResult === void 0 ? void 0 : createVideoStreamResult.view,
         /* @conditional-compile-remove(pinned-participants) */
-        strings: Object.assign({}, props.strings)
+        strings: Object.assign({}, props.strings),
+        isPinned,
+        onPinParticipant,
+        onUnpinParticipant
     });
     const videoTileContextualMenuProps = useMemo(() => {
         if (!showRemoteVideoTileContextualMenu) {
@@ -63,7 +66,9 @@ export const _RemoteVideoTile = React.memo((props) => {
     return (React.createElement(VideoTile, Object.assign({ key: userId, userId: userId, renderElement: renderVideoStreamElement, displayName: remoteParticipant.displayName, onRenderPlaceholder: onRenderAvatar, isMuted: remoteParticipant.isMuted, isSpeaking: remoteParticipant.isSpeaking, showMuteIndicator: showMuteIndicator, personaMinSize: props.personaMinSize, showLabel: props.showLabel, 
         /* @conditional-compile-remove(one-to-n-calling) */
         /* @conditional-compile-remove(PSTN-calls) */
-        participantState: participantState }, videoTileContextualMenuProps)));
+        participantState: participantState }, videoTileContextualMenuProps, { 
+        /* @conditional-compile-remove(pinned-participants) */
+        isPinned: props.isPinned })));
 });
 const videoTileContextualMenuPropsTrampoline = (contextualMenuProps) => {
     if (!contextualMenuProps) {

package/dist/dist-esm/react-components/src/components/RemoteVideoTile.js.map

@@ -1 +1 @@
-{"version":3,"file":"RemoteVideoTile.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/RemoteVideoTile.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { IContextualMenuProps } from '@fluentui/react';\nimport React, { useMemo } from 'react';\nimport {\n  CreateVideoStreamViewResult,\n  OnRenderAvatarCallback,\n  ParticipantState,\n  VideoGalleryRemoteParticipant,\n  VideoStreamOptions\n} from '../types';\nimport { StreamMedia } from './StreamMedia';\nimport { VideoGalleryStrings } from './VideoGallery';\nimport {\n  RemoteVideoStreamLifecycleMaintainerProps,\n  useRemoteVideoStreamLifecycleMaintainer\n} from './VideoGallery/useVideoStreamLifecycleMaintainer';\nimport { useVideoTileContextualMenuProps } from './VideoGallery/useVideoTileContextualMenuProps';\nimport { VideoTile } from './VideoTile';\n\n/**\n * A memoized version of VideoTile for rendering remote participants. React.memo is used for a performance\n * boost by memoizing the same rendered component to avoid rerendering a VideoTile when its position in the\n * array changes causing a rerender in the parent component. https://reactjs.org/docs/react-api.html#reactmemo\n *\n * @internal\n */\nexport const _RemoteVideoTile = React.memo(\n  (props: {\n    userId: string;\n    remoteParticipant: VideoGalleryRemoteParticipant;\n    onCreateRemoteStreamView?: (\n      userId: string,\n      options?: VideoStreamOptions\n    ) => Promise<void | CreateVideoStreamViewResult>;\n    onDisposeRemoteStreamView?: (userId: string) => Promise<void>;\n    isAvailable?: boolean;\n    isReceiving?: boolean;\n    isScreenSharingOn?: boolean; // TODO: Remove this once onDisposeRemoteStreamView no longer disposes of screen share stream\n    renderElement?: HTMLElement;\n    remoteVideoViewOptions?: VideoStreamOptions;\n    onRenderAvatar?: OnRenderAvatarCallback;\n    showMuteIndicator?: boolean;\n    showLabel?: boolean;\n    personaMinSize?: number;\n    strings?: VideoGalleryStrings;\n    participantState?: ParticipantState;\n    showRemoteVideoTileContextualMenu?: boolean;\n  }) => {\n    const {\n      isAvailable,\n      isReceiving = true, // default to true to prevent any breaking change\n      isScreenSharingOn,\n      onCreateRemoteStreamView,\n      onDisposeRemoteStreamView,\n      remoteVideoViewOptions,\n      renderElement,\n      userId,\n      onRenderAvatar,\n      showMuteIndicator,\n      remoteParticipant,\n      participantState,\n      showRemoteVideoTileContextualMenu = true\n    } = props;\n\n    const remoteVideoStreamProps: RemoteVideoStreamLifecycleMaintainerProps = useMemo(\n      () => ({\n        isMirrored: remoteVideoViewOptions?.isMirrored,\n        isScreenSharingOn,\n        isStreamAvailable: isAvailable,\n        isStreamReceiving: isReceiving,\n        onCreateRemoteStreamView,\n        onDisposeRemoteStreamView,\n        remoteParticipantId: userId,\n        renderElementExists: !!renderElement,\n        scalingMode: remoteVideoViewOptions?.scalingMode\n      }),\n      [\n        isAvailable,\n        isReceiving,\n        isScreenSharingOn,\n        onCreateRemoteStreamView,\n        onDisposeRemoteStreamView,\n        remoteVideoViewOptions?.isMirrored,\n        remoteVideoViewOptions?.scalingMode,\n        renderElement,\n        userId\n      ]\n    );\n\n    // Handle creating, destroying and updating the video stream as necessary\n    const createVideoStreamResult = useRemoteVideoStreamLifecycleMaintainer(remoteVideoStreamProps);\n\n    const contextualMenuProps = useVideoTileContextualMenuProps({\n      remoteParticipant,\n      view: createVideoStreamResult?.view,\n      /* @conditional-compile-remove(pinned-participants) */\n      strings: { ...props.strings }\n    });\n\n    const videoTileContextualMenuProps = useMemo(() => {\n      if (!showRemoteVideoTileContextualMenu) {\n        return {};\n      }\n      return videoTileContextualMenuPropsTrampoline(contextualMenuProps);\n    }, [contextualMenuProps, showRemoteVideoTileContextualMenu]);\n\n    const showLoadingIndicator = isAvailable && isReceiving === false && participantState !== 'Disconnected';\n\n    const renderVideoStreamElement = useMemo(() => {\n      // Checking if renderElement is well defined or not as calling SDK has a number of video streams limitation which\n      // implies that, after their threshold, all streams have no child (blank video)\n      if (!renderElement || !renderElement.childElementCount) {\n        // Returning `undefined` results in the placeholder with avatar being shown\n        return undefined;\n      }\n\n      return (\n        <StreamMedia videoStreamElement={renderElement} loadingState={showLoadingIndicator ? 'loading' : 'none'} />\n      );\n    }, [renderElement, showLoadingIndicator]);\n\n    return (\n      <VideoTile\n        key={userId}\n        userId={userId}\n        renderElement={renderVideoStreamElement}\n        displayName={remoteParticipant.displayName}\n        onRenderPlaceholder={onRenderAvatar}\n        isMuted={remoteParticipant.isMuted}\n        isSpeaking={remoteParticipant.isSpeaking}\n        showMuteIndicator={showMuteIndicator}\n        personaMinSize={props.personaMinSize}\n        showLabel={props.showLabel}\n        /* @conditional-compile-remove(one-to-n-calling) */\n        /* @conditional-compile-remove(PSTN-calls) */\n        participantState={participantState}\n        {...videoTileContextualMenuProps}\n      />\n    );\n  }\n);\n\nconst videoTileContextualMenuPropsTrampoline = (\n  contextualMenuProps?: IContextualMenuProps\n): { contextualMenu?: IContextualMenuProps } => {\n  if (!contextualMenuProps) {\n    return {};\n  }\n  /* @conditional-compile-remove(pinned-participants) */\n  return {\n    contextualMenu: contextualMenuProps\n  };\n\n  return {};\n};\n"]}
+{"version":3,"file":"RemoteVideoTile.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/RemoteVideoTile.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { IContextualMenuProps } from '@fluentui/react';\nimport React, { useMemo } from 'react';\nimport {\n  CreateVideoStreamViewResult,\n  OnRenderAvatarCallback,\n  ParticipantState,\n  VideoGalleryRemoteParticipant,\n  VideoStreamOptions\n} from '../types';\nimport { StreamMedia } from './StreamMedia';\nimport { VideoGalleryStrings } from './VideoGallery';\nimport {\n  RemoteVideoStreamLifecycleMaintainerProps,\n  useRemoteVideoStreamLifecycleMaintainer\n} from './VideoGallery/useVideoStreamLifecycleMaintainer';\nimport { useVideoTileContextualMenuProps } from './VideoGallery/useVideoTileContextualMenuProps';\nimport { VideoTile } from './VideoTile';\n\n/**\n * A memoized version of VideoTile for rendering remote participants. React.memo is used for a performance\n * boost by memoizing the same rendered component to avoid rerendering a VideoTile when its position in the\n * array changes causing a rerender in the parent component. https://reactjs.org/docs/react-api.html#reactmemo\n *\n * @internal\n */\nexport const _RemoteVideoTile = React.memo(\n  (props: {\n    userId: string;\n    remoteParticipant: VideoGalleryRemoteParticipant;\n    onCreateRemoteStreamView?: (\n      userId: string,\n      options?: VideoStreamOptions\n    ) => Promise<void | CreateVideoStreamViewResult>;\n    onDisposeRemoteStreamView?: (userId: string) => Promise<void>;\n    isAvailable?: boolean;\n    isReceiving?: boolean;\n    isScreenSharingOn?: boolean; // TODO: Remove this once onDisposeRemoteStreamView no longer disposes of screen share stream\n    renderElement?: HTMLElement;\n    remoteVideoViewOptions?: VideoStreamOptions;\n    onRenderAvatar?: OnRenderAvatarCallback;\n    showMuteIndicator?: boolean;\n    showLabel?: boolean;\n    personaMinSize?: number;\n    strings?: VideoGalleryStrings;\n    participantState?: ParticipantState;\n    showRemoteVideoTileContextualMenu?: boolean;\n    onPinParticipant?: (userId: string) => void;\n    onUnpinParticipant?: (userId: string) => void;\n    isPinned?: boolean;\n  }) => {\n    const {\n      isAvailable,\n      isReceiving = true, // default to true to prevent any breaking change\n      isScreenSharingOn,\n      onCreateRemoteStreamView,\n      onDisposeRemoteStreamView,\n      remoteVideoViewOptions,\n      renderElement,\n      userId,\n      onRenderAvatar,\n      showMuteIndicator,\n      remoteParticipant,\n      participantState,\n      showRemoteVideoTileContextualMenu = true,\n      isPinned,\n      onPinParticipant,\n      onUnpinParticipant\n    } = props;\n\n    const remoteVideoStreamProps: RemoteVideoStreamLifecycleMaintainerProps = useMemo(\n      () => ({\n        isMirrored: remoteVideoViewOptions?.isMirrored,\n        isScreenSharingOn,\n        isStreamAvailable: isAvailable,\n        isStreamReceiving: isReceiving,\n        onCreateRemoteStreamView,\n        onDisposeRemoteStreamView,\n        remoteParticipantId: userId,\n        renderElementExists: !!renderElement,\n        scalingMode: remoteVideoViewOptions?.scalingMode\n      }),\n      [\n        isAvailable,\n        isReceiving,\n        isScreenSharingOn,\n        onCreateRemoteStreamView,\n        onDisposeRemoteStreamView,\n        remoteVideoViewOptions?.isMirrored,\n        remoteVideoViewOptions?.scalingMode,\n        renderElement,\n        userId\n      ]\n    );\n\n    // Handle creating, destroying and updating the video stream as necessary\n    const createVideoStreamResult = useRemoteVideoStreamLifecycleMaintainer(remoteVideoStreamProps);\n\n    const contextualMenuProps = useVideoTileContextualMenuProps({\n      remoteParticipant,\n      view: createVideoStreamResult?.view,\n      /* @conditional-compile-remove(pinned-participants) */\n      strings: { ...props.strings },\n      isPinned,\n      onPinParticipant,\n      onUnpinParticipant\n    });\n\n    const videoTileContextualMenuProps = useMemo(() => {\n      if (!showRemoteVideoTileContextualMenu) {\n        return {};\n      }\n      return videoTileContextualMenuPropsTrampoline(contextualMenuProps);\n    }, [contextualMenuProps, showRemoteVideoTileContextualMenu]);\n\n    const showLoadingIndicator = isAvailable && isReceiving === false && participantState !== 'Disconnected';\n\n    const renderVideoStreamElement = useMemo(() => {\n      // Checking if renderElement is well defined or not as calling SDK has a number of video streams limitation which\n      // implies that, after their threshold, all streams have no child (blank video)\n      if (!renderElement || !renderElement.childElementCount) {\n        // Returning `undefined` results in the placeholder with avatar being shown\n        return undefined;\n      }\n\n      return (\n        <StreamMedia videoStreamElement={renderElement} loadingState={showLoadingIndicator ? 'loading' : 'none'} />\n      );\n    }, [renderElement, showLoadingIndicator]);\n\n    return (\n      <VideoTile\n        key={userId}\n        userId={userId}\n        renderElement={renderVideoStreamElement}\n        displayName={remoteParticipant.displayName}\n        onRenderPlaceholder={onRenderAvatar}\n        isMuted={remoteParticipant.isMuted}\n        isSpeaking={remoteParticipant.isSpeaking}\n        showMuteIndicator={showMuteIndicator}\n        personaMinSize={props.personaMinSize}\n        showLabel={props.showLabel}\n        /* @conditional-compile-remove(one-to-n-calling) */\n        /* @conditional-compile-remove(PSTN-calls) */\n        participantState={participantState}\n        {...videoTileContextualMenuProps}\n        /* @conditional-compile-remove(pinned-participants) */\n        isPinned={props.isPinned}\n      />\n    );\n  }\n);\n\nconst videoTileContextualMenuPropsTrampoline = (\n  contextualMenuProps?: IContextualMenuProps\n): { contextualMenu?: IContextualMenuProps } => {\n  if (!contextualMenuProps) {\n    return {};\n  }\n  /* @conditional-compile-remove(pinned-participants) */\n  return {\n    contextualMenu: contextualMenuProps\n  };\n\n  return {};\n};\n"]}

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

@@ -8,9 +8,14 @@ export declare const useVideoTileContextualMenuProps: (props: {
     strings?: {
         fitRemoteParticipantToFrame?: string | undefined;
         fillRemoteParticipantFrame?: string | undefined;
+        pinParticipantForMe?: string | undefined;
+        unpinParticipantForMe?: string | undefined;
     } | undefined;
     view?: {
         updateScalingMode: (scalingMode: ViewScalingMode) => Promise<void>;
     } | undefined;
+    isPinned?: boolean | undefined;
+    onPinParticipant?: ((userId: string) => void) | undefined;
+    onUnpinParticipant?: ((userId: string) => void) | undefined;
 }) => IContextualMenuProps | undefined;
 //# sourceMappingURL=useVideoTileContextualMenuProps.d.ts.map

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

@@ -6,7 +6,7 @@ import { useMemo } from 'react';
  */
 export const useVideoTileContextualMenuProps = (props) => {
     var _a;
-    const { view, strings } = props;
+    const { view, strings, isPinned, onPinParticipant, onUnpinParticipant } = props;
     const scalingMode = useMemo(() => {
         var _a;
         /* @conditional-compile-remove(pinned-participants) */
@@ -18,6 +18,26 @@ export const useVideoTileContextualMenuProps = (props) => {
     ]);
     const contextualMenuProps = useMemo(() => {
         const items = [];
+        if (isPinned !== undefined) {
+            if (isPinned && onUnpinParticipant && (strings === null || strings === void 0 ? void 0 : strings.unpinParticipantForMe)) {
+                items.push({
+                    key: 'unpin',
+                    text: strings.unpinParticipantForMe,
+                    iconProps: { iconName: 'UnpinParticipant', styles: { root: { lineHeight: '1rem' } } },
+                    onClick: () => onUnpinParticipant === null || onUnpinParticipant === void 0 ? void 0 : onUnpinParticipant(props.remoteParticipant.userId),
+                    'data-ui-id': 'video-tile-unpin-participant-button'
+                });
+            }
+            if (!isPinned && onPinParticipant && (strings === null || strings === void 0 ? void 0 : strings.pinParticipantForMe)) {
+                items.push({
+                    key: 'pin',
+                    text: strings.pinParticipantForMe,
+                    iconProps: { iconName: 'PinParticipant', styles: { root: { lineHeight: '1rem' } } },
+                    onClick: () => onPinParticipant === null || onPinParticipant === void 0 ? void 0 : onPinParticipant(props.remoteParticipant.userId),
+                    'data-ui-id': 'video-tile-pin-participant-button'
+                });
+            }
+        }
         if (scalingMode) {
             if (scalingMode === 'Crop' && (strings === null || strings === void 0 ? void 0 : strings.fitRemoteParticipantToFrame)) {
                 items.push({
@@ -46,7 +66,7 @@ export const useVideoTileContextualMenuProps = (props) => {
             return undefined;
         }
         return { items };
-    }, [scalingMode, strings, view]);
+    }, [scalingMode, strings, view, isPinned, onPinParticipant, onUnpinParticipant, props.remoteParticipant.userId]);
     return contextualMenuProps;
 };
 //# sourceMappingURL=useVideoTileContextualMenuProps.js.map

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":"AAAA,uCAAuC;AACvC,kCAAkC;AAGlC,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAGhC;;GAEG;AACH,MAAM,CAAC,MAAM,+BAA+B,GAAG,CAAC,KAO/C,EAAoC,EAAE;;IACrC,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,GAAG,KAAK,CAAC;IAChC,MAAM,WAAW,GAAG,OAAO,CAAC,GAAG,EAAE;;QAC/B,sDAAsD;QACtD,OAAO,MAAA,KAAK,CAAC,iBAAiB,CAAC,WAAW,0CAAE,WAAW,CAAC;QACxD,OAAO,SAAS,CAAC;IACnB,CAAC,EAAE;QACD,sDAAsD;QACtD,MAAA,KAAK,CAAC,iBAAiB,CAAC,WAAW,0CAAE,WAAW;KACjD,CAAC,CAAC;IAEH,MAAM,mBAAmB,GAAqC,OAAO,CAAC,GAAG,EAAE;QACzE,MAAM,KAAK,GAA0B,EAAE,CAAC;QACxC,IAAI,WAAW,EAAE;YACf,IAAI,WAAW,KAAK,MAAM,KAAI,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,2BAA2B,CAAA,EAAE;gBAClE,KAAK,CAAC,IAAI,CAAC;oBACT,GAAG,EAAE,6BAA6B;oBAClC,IAAI,EAAE,OAAO,CAAC,2BAA2B;oBACzC,SAAS,EAAE,EAAE,QAAQ,EAAE,mBAAmB,EAAE,MAAM,EAAE,EAAE,IAAI,EAAE,EAAE,UAAU,EAAE,MAAM,EAAE,EAAE,EAAE;oBACtF,OAAO,EAAE,GAAG,EAAE;wBACZ,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,iBAAiB,CAAC,KAAK,CAAC,CAAC;oBACjC,CAAC;iBACF,CAAC,CAAC;aACJ;iBAAM,IAAI,WAAW,KAAK,KAAK,KAAI,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,0BAA0B,CAAA,EAAE;gBACvE;oBACE,KAAK,CAAC,IAAI,CAAC;wBACT,GAAG,EAAE,4BAA4B;wBACjC,IAAI,EAAE,OAAO,CAAC,0BAA0B;wBACxC,SAAS,EAAE,EAAE,QAAQ,EAAE,oBAAoB,EAAE,MAAM,EAAE,EAAE,IAAI,EAAE,EAAE,UAAU,EAAE,MAAM,EAAE,EAAE,EAAE;wBACvF,OAAO,EAAE,GAAG,EAAE;4BACZ,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,iBAAiB,CAAC,MAAM,CAAC,CAAC;wBAClC,CAAC;qBACF,CAAC,CAAC;iBACJ;aACF;SACF;QACD,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC,EAAE;YACtB,OAAO,SAAS,CAAC;SAClB;QAED,OAAO,EAAE,KAAK,EAAE,CAAC;IACnB,CAAC,EAAE,CAAC,WAAW,EAAE,OAAO,EAAE,IAAI,CAAC,CAAC,CAAC;IAEjC,OAAO,mBAAmB,CAAC;AAC7B,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { IContextualMenuItem, IContextualMenuProps } from '@fluentui/react';\nimport { useMemo } from 'react';\nimport { VideoGalleryRemoteParticipant, ViewScalingMode } from '../../types';\n\n/**\n * @private\n */\nexport const useVideoTileContextualMenuProps = (props: {\n  remoteParticipant: VideoGalleryRemoteParticipant;\n  strings?: {\n    fitRemoteParticipantToFrame?: string;\n    fillRemoteParticipantFrame?: string;\n  };\n  view?: { updateScalingMode: (scalingMode: ViewScalingMode) => Promise<void> };\n}): IContextualMenuProps | undefined => {\n  const { view, strings } = props;\n  const scalingMode = useMemo(() => {\n    /* @conditional-compile-remove(pinned-participants) */\n    return props.remoteParticipant.videoStream?.scalingMode;\n    return undefined;\n  }, [\n    /* @conditional-compile-remove(pinned-participants) */\n    props.remoteParticipant.videoStream?.scalingMode\n  ]);\n\n  const contextualMenuProps: IContextualMenuProps | undefined = useMemo(() => {\n    const items: IContextualMenuItem[] = [];\n    if (scalingMode) {\n      if (scalingMode === 'Crop' && strings?.fitRemoteParticipantToFrame) {\n        items.push({\n          key: 'fitRemoteParticipantToFrame',\n          text: strings.fitRemoteParticipantToFrame,\n          iconProps: { iconName: 'VideoTileScaleFit', styles: { root: { lineHeight: '1rem' } } },\n          onClick: () => {\n            view?.updateScalingMode('Fit');\n          }\n        });\n      } else if (scalingMode === 'Fit' && strings?.fillRemoteParticipantFrame) {\n        {\n          items.push({\n            key: 'fillRemoteParticipantFrame',\n            text: strings.fillRemoteParticipantFrame,\n            iconProps: { iconName: 'VideoTileScaleFill', styles: { root: { lineHeight: '1rem' } } },\n            onClick: () => {\n              view?.updateScalingMode('Crop');\n            }\n          });\n        }\n      }\n    }\n    if (items.length === 0) {\n      return undefined;\n    }\n\n    return { items };\n  }, [scalingMode, strings, view]);\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 { useMemo } from 'react';\nimport { VideoGalleryRemoteParticipant, ViewScalingMode } from '../../types';\n\n/**\n * @private\n */\nexport const useVideoTileContextualMenuProps = (props: {\n  remoteParticipant: VideoGalleryRemoteParticipant;\n  strings?: {\n    fitRemoteParticipantToFrame?: string;\n    fillRemoteParticipantFrame?: string;\n    pinParticipantForMe?: string;\n    unpinParticipantForMe?: string;\n  };\n  view?: { updateScalingMode: (scalingMode: ViewScalingMode) => Promise<void> };\n  isPinned?: boolean;\n  onPinParticipant?: (userId: string) => void;\n  onUnpinParticipant?: (userId: string) => void;\n}): IContextualMenuProps | undefined => {\n  const { view, strings, isPinned, onPinParticipant, onUnpinParticipant } = props;\n  const scalingMode = useMemo(() => {\n    /* @conditional-compile-remove(pinned-participants) */\n    return props.remoteParticipant.videoStream?.scalingMode;\n    return undefined;\n  }, [\n    /* @conditional-compile-remove(pinned-participants) */\n    props.remoteParticipant.videoStream?.scalingMode\n  ]);\n\n  const contextualMenuProps: IContextualMenuProps | undefined = useMemo(() => {\n    const items: IContextualMenuItem[] = [];\n\n    if (isPinned !== undefined) {\n      if (isPinned && onUnpinParticipant && strings?.unpinParticipantForMe) {\n        items.push({\n          key: 'unpin',\n          text: strings.unpinParticipantForMe,\n          iconProps: { iconName: 'UnpinParticipant', styles: { root: { lineHeight: '1rem' } } },\n          onClick: () => onUnpinParticipant?.(props.remoteParticipant.userId),\n          'data-ui-id': 'video-tile-unpin-participant-button'\n        });\n      }\n      if (!isPinned && onPinParticipant && strings?.pinParticipantForMe) {\n        items.push({\n          key: 'pin',\n          text: strings.pinParticipantForMe,\n          iconProps: { iconName: 'PinParticipant', styles: { root: { lineHeight: '1rem' } } },\n          onClick: () => onPinParticipant?.(props.remoteParticipant.userId),\n          'data-ui-id': 'video-tile-pin-participant-button'\n        });\n      }\n    }\n    if (scalingMode) {\n      if (scalingMode === 'Crop' && strings?.fitRemoteParticipantToFrame) {\n        items.push({\n          key: 'fitRemoteParticipantToFrame',\n          text: strings.fitRemoteParticipantToFrame,\n          iconProps: { iconName: 'VideoTileScaleFit', styles: { root: { lineHeight: '1rem' } } },\n          onClick: () => {\n            view?.updateScalingMode('Fit');\n          }\n        });\n      } else if (scalingMode === 'Fit' && strings?.fillRemoteParticipantFrame) {\n        {\n          items.push({\n            key: 'fillRemoteParticipantFrame',\n            text: strings.fillRemoteParticipantFrame,\n            iconProps: { iconName: 'VideoTileScaleFill', styles: { root: { lineHeight: '1rem' } } },\n            onClick: () => {\n              view?.updateScalingMode('Crop');\n            }\n          });\n        }\n      }\n    }\n    if (items.length === 0) {\n      return undefined;\n    }\n\n    return { items };\n  }, [scalingMode, strings, view, isPinned, onPinParticipant, onUnpinParticipant, props.remoteParticipant.userId]);\n\n  return contextualMenuProps;\n};\n"]}

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

@@ -38,6 +38,10 @@ export interface VideoGalleryStrings {
     fitRemoteParticipantToFrame: string;
     /** Menu text shown in Video Tile contextual menu for setting a remote participants video to fill the frame */
     fillRemoteParticipantFrame: string;
+    /** Menu text shown in Video Tile contextual menu for pinning a remote participant's video tile */
+    pinParticipantForMe: string;
+    /** Menu text shown in Video Tile contextual menu for setting a remote participant's video tile */
+    unpinParticipantForMe: string;
 }
 /**
  * @public
@@ -125,6 +129,14 @@ export interface VideoGalleryProps {
      * @defaultValue `true`
      */
     showRemoteVideoTileContextualMenu?: boolean;
+    /**
+     * This callback will be called when a participant video tile is pinned
+     */
+    onPinParticipant?: (userId: string) => void;
+    /**
+     * This callback will be called when a participant video tile is un-pinned
+     */
+    onUnpinParticipant?: (userId: string) => void;
 }
 /**
  * VideoGallery represents a layout of video tiles for a specific call.

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

@@ -36,7 +36,11 @@ export const MAX_AUDIO_DOMINANT_SPEAKERS = 6;
  */
 export const VideoGallery = (props) => {
     var _a, _b, _c;
-    const { localParticipant, remoteParticipants = [], localVideoViewOptions, remoteVideoViewOptions, dominantSpeakers, onRenderLocalVideoTile, onRenderRemoteVideoTile, onCreateLocalStreamView, onDisposeLocalStreamView, onCreateRemoteStreamView, onDisposeRemoteStreamView, styles, layout, onRenderAvatar, showMuteIndicator, maxRemoteVideoStreams = DEFAULT_MAX_REMOTE_VIDEO_STREAMS, showCameraSwitcherInLocalPreview, localVideoCameraCycleButtonProps } = props;
+    const { localParticipant, remoteParticipants = [], localVideoViewOptions, remoteVideoViewOptions, dominantSpeakers, onRenderLocalVideoTile, onRenderRemoteVideoTile, onCreateLocalStreamView, onDisposeLocalStreamView, onCreateRemoteStreamView, onDisposeRemoteStreamView, styles, layout, onRenderAvatar, showMuteIndicator, maxRemoteVideoStreams = DEFAULT_MAX_REMOTE_VIDEO_STREAMS, showCameraSwitcherInLocalPreview, localVideoCameraCycleButtonProps, 
+    /* @conditional-compile-remove(pinned-participants) */
+    onPinParticipant: onPinParticipantHandler, 
+    /* @conditional-compile-remove(pinned-participants) */
+    onUnpinParticipant: onUnpinParticipantHandler } = props;
     const ids = useIdentifiers();
     const theme = useTheme();
     const localeStrings = useLocale().strings.videoGallery;
@@ -47,7 +51,7 @@ export const VideoGallery = (props) => {
     const containerHeight = _useContainerHeight(containerRef);
     const isNarrow = containerWidth ? isNarrowWidth(containerWidth) : false;
     /* @conditional-compile-remove(pinned-participants) */
-    const [pinnedParticipantsState, _] = React.useState([]);
+    const [pinnedParticipantsState, setPinnedParticipantsState] = React.useState([]);
     /* @conditional-compile-remove(pinned-participants) */
     // Use pinnedParticipants from props but if it is not defined use the maintained state of pinned participants
     const pinnedParticipants = (_a = props.pinnedParticipants) !== null && _a !== void 0 ? _a : pinnedParticipantsState;
@@ -92,13 +96,33 @@ export const VideoGallery = (props) => {
         theme.effects.roundedCorner4,
         /* @conditional-compile-remove(rooms) */ permissions.cameraButton
     ]);
+    /* @conditional-compile-remove(pinned-participants) */
+    const onPinParticipant = useCallback((userId) => {
+        if (!pinnedParticipantsState.includes(userId)) {
+            setPinnedParticipantsState(pinnedParticipantsState.concat(userId));
+        }
+        onPinParticipantHandler === null || onPinParticipantHandler === void 0 ? void 0 : onPinParticipantHandler(userId);
+    }, [pinnedParticipantsState, setPinnedParticipantsState, onPinParticipantHandler]);
+    /* @conditional-compile-remove(pinned-participants) */
+    const onUnpinParticipant = useCallback((userId) => {
+        setPinnedParticipantsState(pinnedParticipantsState.filter((p) => p !== userId));
+        onUnpinParticipantHandler === null || onUnpinParticipantHandler === void 0 ? void 0 : onUnpinParticipantHandler(userId);
+    }, [pinnedParticipantsState, setPinnedParticipantsState, onUnpinParticipantHandler]);
     const defaultOnRenderVideoTile = useCallback((participant, isVideoParticipant) => {
         const remoteVideoStream = participant.videoStream;
+        /* @conditional-compile-remove(pinned-participants) */
+        const isPinned = pinnedParticipants === null || pinnedParticipants === void 0 ? void 0 : pinnedParticipants.includes(participant.userId);
         return (React.createElement(_RemoteVideoTile, { key: participant.userId, userId: participant.userId, remoteParticipant: participant, onCreateRemoteStreamView: isVideoParticipant ? onCreateRemoteStreamView : undefined, onDisposeRemoteStreamView: isVideoParticipant ? onDisposeRemoteStreamView : undefined, isAvailable: isVideoParticipant ? remoteVideoStream === null || remoteVideoStream === void 0 ? void 0 : remoteVideoStream.isAvailable : false, isReceiving: isVideoParticipant ? remoteVideoStream === null || remoteVideoStream === void 0 ? void 0 : remoteVideoStream.isReceiving : false, renderElement: isVideoParticipant ? remoteVideoStream === null || remoteVideoStream === void 0 ? void 0 : remoteVideoStream.renderElement : undefined, remoteVideoViewOptions: isVideoParticipant ? remoteVideoViewOptions : undefined, onRenderAvatar: onRenderAvatar, showMuteIndicator: showMuteIndicator, strings: strings, 
             /* @conditional-compile-remove(PSTN-calls) */
             participantState: participant.state, 
             /* @conditional-compile-remove(pinned-participants) */
-            showRemoteVideoTileContextualMenu: props.showRemoteVideoTileContextualMenu }));
+            showRemoteVideoTileContextualMenu: props.showRemoteVideoTileContextualMenu, 
+            /* @conditional-compile-remove(pinned-participants) */
+            onPinParticipant: onPinParticipant, 
+            /* @conditional-compile-remove(pinned-participants) */
+            onUnpinParticipant: onUnpinParticipant, 
+            /* @conditional-compile-remove(pinned-participants) */
+            isPinned: isPinned }));
     }, [
         onCreateRemoteStreamView,
         onDisposeRemoteStreamView,
@@ -106,8 +130,10 @@ export const VideoGallery = (props) => {
         onRenderAvatar,
         showMuteIndicator,
         strings,
-        /* @conditional-compile-remove(pinned-participants) */
-        props.showRemoteVideoTileContextualMenu
+        /* @conditional-compile-remove(pinned-participants) */ props.showRemoteVideoTileContextualMenu,
+        /* @conditional-compile-remove(pinned-participants) */ pinnedParticipants,
+        /* @conditional-compile-remove(pinned-participants) */ onPinParticipant,
+        /* @conditional-compile-remove(pinned-participants) */ onUnpinParticipant
     ]);
     const screenShareParticipant = remoteParticipants.find((participant) => { var _a; return (_a = participant.screenShareStream) === null || _a === void 0 ? void 0 : _a.isAvailable; });
     const localScreenShareStreamComponent = React.createElement(LocalScreenShare, { localParticipant: localParticipant });

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

@@ -1 +1 @@
-{"version":3,"file":"VideoGallery.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/VideoGallery.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { concatStyleSets, IStyle, mergeStyles, Stack } from '@fluentui/react';\nimport React, { useCallback, useMemo, useRef } from 'react';\nimport { GridLayoutStyles } from '.';\nimport { useLocale } from '../localization';\nimport { useTheme } from '../theming';\nimport {\n  BaseCustomStyles,\n  OnRenderAvatarCallback,\n  VideoGalleryLocalParticipant,\n  VideoGalleryRemoteParticipant,\n  VideoStreamOptions,\n  CreateVideoStreamViewResult\n} from '../types';\nimport { HorizontalGalleryStyles } from './HorizontalGallery';\nimport { _RemoteVideoTile } from './RemoteVideoTile';\nimport { isNarrowWidth, _useContainerHeight, _useContainerWidth } from './utils/responsive';\nimport { LocalScreenShare } from './VideoGallery/LocalScreenShare';\nimport { RemoteScreenShare } from './VideoGallery/RemoteScreenShare';\nimport { LocalVideoCameraCycleButtonProps } from './LocalVideoCameraButton';\nimport { _ICoordinates, _ModalClone } from './ModalClone/ModalClone';\nimport { _formatString } from '@internal/acs-ui-common';\nimport { _LocalVideoTile } from './LocalVideoTile';\n/* @conditional-compile-remove(rooms) */\nimport { _usePermissions } from '../permissions';\nimport { DefaultLayout } from './VideoGallery/DefaultLayout';\nimport { FloatingLocalVideoLayout } from './VideoGallery/FloatingLocalVideoLayout';\nimport { useIdentifiers } from '../identifiers';\nimport { videoGalleryOuterDivStyle } from './styles/VideoGallery.styles';\nimport { floatingLocalVideoTileStyle } from './VideoGallery/styles/FloatingLocalVideo.styles';\n/* @conditional-compile-remove(pinned-participants) */\nimport { PinnedParticipantsLayout } from './VideoGallery/PinnedParticipantsLayout';\n\n/**\n * @private\n * Currently the Calling JS SDK supports up to 4 remote video streams\n */\nexport const DEFAULT_MAX_REMOTE_VIDEO_STREAMS = 4;\n/**\n * @private\n * Set aside only 6 dominant speakers for remaining audio participants\n */\nexport const MAX_AUDIO_DOMINANT_SPEAKERS = 6;\n\n/**\n * All strings that may be shown on the UI in the {@link VideoGallery}.\n *\n * @public\n */\nexport interface VideoGalleryStrings {\n  /** String to notify that local user is sharing their screen */\n  screenIsBeingSharedMessage: string;\n  /** String to show when remote screen share stream is loading */\n  screenShareLoadingMessage: string;\n  /** String for local video label. Default is \"You\" */\n  localVideoLabel: string;\n  /** String for local video camera switcher */\n  localVideoCameraSwitcherLabel: string;\n  /** String for announcing the local video tile can be moved by keyboard controls */\n  localVideoMovementLabel: string;\n  /** String for announcing the selected camera */\n  localVideoSelectedDescription: string;\n  /** placeholder text for participants who does not have a display name*/\n  displayNamePlaceholder: string;\n  /* @conditional-compile-remove(pinned-participants) */\n  /** Menu text shown in Video Tile contextual menu for setting a remote participants video to fit in frame */\n  fitRemoteParticipantToFrame: string;\n  /* @conditional-compile-remove(pinned-participants) */\n  /** Menu text shown in Video Tile contextual menu for setting a remote participants video to fill the frame */\n  fillRemoteParticipantFrame: string;\n}\n\n/**\n * @public\n */\nexport type VideoGalleryLayout = 'default' | 'floatingLocalVideo';\n\n/**\n * {@link VideoGallery} Component Styles.\n * @public\n */\nexport interface VideoGalleryStyles extends BaseCustomStyles {\n  /** Styles for the grid layout */\n  gridLayout?: GridLayoutStyles;\n  /** Styles for the horizontal gallery  */\n  horizontalGallery?: HorizontalGalleryStyles;\n  /** Styles for the local video  */\n  localVideo?: IStyle;\n}\n\n/**\n * Props for {@link VideoGallery}.\n *\n * @public\n */\nexport interface VideoGalleryProps {\n  /**\n   * Allows users to pass an object containing custom CSS styles for the gallery container.\n   *\n   * @Example\n   * ```\n   * <VideoGallery styles={{ root: { border: 'solid 1px red' } }} />\n   * ```\n   */\n  styles?: VideoGalleryStyles;\n  /** Layout of the video tiles. */\n  layout?: VideoGalleryLayout;\n  /** Local video particpant */\n  localParticipant: VideoGalleryLocalParticipant;\n  /** List of remote video particpants */\n  remoteParticipants?: VideoGalleryRemoteParticipant[];\n  /** List of dominant speaker userIds in the order of their dominance. 0th index is the most dominant. */\n  dominantSpeakers?: string[];\n  /** Local video view options */\n  localVideoViewOptions?: VideoStreamOptions;\n  /** Remote videos view options */\n  remoteVideoViewOptions?: VideoStreamOptions;\n  /** Callback to create the local video stream view */\n  onCreateLocalStreamView?: (options?: VideoStreamOptions) => Promise<void | CreateVideoStreamViewResult>;\n  /** Callback to dispose of the local video stream view */\n  onDisposeLocalStreamView?: () => void;\n  /** Callback to render the local video tile*/\n  onRenderLocalVideoTile?: (localParticipant: VideoGalleryLocalParticipant) => JSX.Element;\n  /** Callback to create a remote video stream view */\n  onCreateRemoteStreamView?: (\n    userId: string,\n    options?: VideoStreamOptions\n  ) => Promise<void | CreateVideoStreamViewResult>;\n  /** Callback to render a remote video tile */\n  onRenderRemoteVideoTile?: (remoteParticipant: VideoGalleryRemoteParticipant) => JSX.Element;\n  /** Callback to dispose a remote video stream view */\n  onDisposeRemoteStreamView?: (userId: string) => Promise<void>;\n  /** Callback to render a particpant avatar */\n  onRenderAvatar?: OnRenderAvatarCallback;\n  /**\n   * Whether to display the local video camera switcher button\n   */\n  showCameraSwitcherInLocalPreview?: boolean;\n  /**\n   * Whether to display a mute icon beside the user's display name.\n   * @defaultValue `true`\n   */\n  showMuteIndicator?: boolean;\n  /** Optional strings to override in component  */\n  strings?: Partial<VideoGalleryStrings>;\n  /**\n   * Maximum number of participant remote video streams that is rendered.\n   * @defaultValue 4\n   */\n  maxRemoteVideoStreams?: number;\n  /**\n   * Camera control information for button to switch cameras.\n   */\n  localVideoCameraCycleButtonProps?: LocalVideoCameraCycleButtonProps;\n  /* @conditional-compile-remove(pinned-participants) */\n  /**\n   * List of pinned participant userIds\n   */\n  pinnedParticipants?: string[];\n  /* @conditional-compile-remove(pinned-participants) */\n  /**\n   * Whether to show the remote video tile contextual menu.\n   * @defaultValue `true`\n   */\n  showRemoteVideoTileContextualMenu?: boolean;\n}\n\n/**\n * VideoGallery represents a layout of video tiles for a specific call.\n * It displays a {@link VideoTile} for the local user as well as for each remote participant who has joined the call.\n *\n * @public\n */\nexport const VideoGallery = (props: VideoGalleryProps): JSX.Element => {\n  const {\n    localParticipant,\n    remoteParticipants = [],\n    localVideoViewOptions,\n    remoteVideoViewOptions,\n    dominantSpeakers,\n    onRenderLocalVideoTile,\n    onRenderRemoteVideoTile,\n    onCreateLocalStreamView,\n    onDisposeLocalStreamView,\n    onCreateRemoteStreamView,\n    onDisposeRemoteStreamView,\n    styles,\n    layout,\n    onRenderAvatar,\n    showMuteIndicator,\n    maxRemoteVideoStreams = DEFAULT_MAX_REMOTE_VIDEO_STREAMS,\n    showCameraSwitcherInLocalPreview,\n    localVideoCameraCycleButtonProps\n  } = props;\n\n  const ids = useIdentifiers();\n  const theme = useTheme();\n  const localeStrings = useLocale().strings.videoGallery;\n  const strings = useMemo(() => ({ ...localeStrings, ...props.strings }), [localeStrings, props.strings]);\n\n  const shouldFloatLocalVideo = !!(layout === 'floatingLocalVideo' && remoteParticipants.length > 0);\n\n  const containerRef = useRef<HTMLDivElement>(null);\n  const containerWidth = _useContainerWidth(containerRef);\n  const containerHeight = _useContainerHeight(containerRef);\n  const isNarrow = containerWidth ? isNarrowWidth(containerWidth) : false;\n\n  /* @conditional-compile-remove(pinned-participants) */\n  const [pinnedParticipantsState, _] = React.useState<string[]>([]);\n  /* @conditional-compile-remove(pinned-participants) */\n  // Use pinnedParticipants from props but if it is not defined use the maintained state of pinned participants\n  const pinnedParticipants = props.pinnedParticipants ?? pinnedParticipantsState;\n\n  /* @conditional-compile-remove(rooms) */\n  const permissions = _usePermissions();\n\n  /**\n   * Utility function for memoized rendering of LocalParticipant.\n   */\n  const localVideoTile = useMemo((): JSX.Element /* @conditional-compile-remove(rooms) */ | undefined => {\n    /* @conditional-compile-remove(rooms) */\n    if (!permissions.cameraButton) {\n      return undefined;\n    }\n    if (onRenderLocalVideoTile) {\n      return onRenderLocalVideoTile(localParticipant);\n    }\n\n    const localVideoTileStyles = concatStyleSets(\n      shouldFloatLocalVideo ? floatingLocalVideoTileStyle : {},\n      {\n        root: { borderRadius: theme.effects.roundedCorner4 }\n      },\n      styles?.localVideo\n    );\n\n    const initialsName = !localParticipant.displayName ? strings.displayNamePlaceholder : localParticipant.displayName;\n\n    return (\n      <Stack key=\"local-video-tile-key\" tabIndex={0} aria-label={strings.localVideoMovementLabel} role={'dialog'}>\n        <_LocalVideoTile\n          userId={localParticipant.userId}\n          onCreateLocalStreamView={onCreateLocalStreamView}\n          onDisposeLocalStreamView={onDisposeLocalStreamView}\n          isAvailable={localParticipant?.videoStream?.isAvailable}\n          isMuted={localParticipant.isMuted}\n          renderElement={localParticipant?.videoStream?.renderElement}\n          displayName={isNarrow ? '' : strings.localVideoLabel}\n          initialsName={initialsName}\n          localVideoViewOptions={localVideoViewOptions}\n          onRenderAvatar={onRenderAvatar}\n          showLabel={!(shouldFloatLocalVideo && isNarrow)}\n          showMuteIndicator={showMuteIndicator}\n          showCameraSwitcherInLocalPreview={showCameraSwitcherInLocalPreview}\n          localVideoCameraCycleButtonProps={localVideoCameraCycleButtonProps}\n          localVideoCameraSwitcherLabel={strings.localVideoCameraSwitcherLabel}\n          localVideoSelectedDescription={strings.localVideoSelectedDescription}\n          styles={localVideoTileStyles}\n        />\n      </Stack>\n    );\n  }, [\n    isNarrow,\n    localParticipant,\n    localVideoCameraCycleButtonProps,\n    localVideoViewOptions,\n    onCreateLocalStreamView,\n    onDisposeLocalStreamView,\n    onRenderAvatar,\n    onRenderLocalVideoTile,\n    shouldFloatLocalVideo,\n    showCameraSwitcherInLocalPreview,\n    showMuteIndicator,\n    strings.localVideoCameraSwitcherLabel,\n    strings.localVideoLabel,\n    strings.localVideoMovementLabel,\n    strings.localVideoSelectedDescription,\n    strings.displayNamePlaceholder,\n    styles?.localVideo,\n    theme.effects.roundedCorner4,\n    /* @conditional-compile-remove(rooms) */ permissions.cameraButton\n  ]);\n\n  const defaultOnRenderVideoTile = useCallback(\n    (participant: VideoGalleryRemoteParticipant, isVideoParticipant?: boolean) => {\n      const remoteVideoStream = participant.videoStream;\n      return (\n        <_RemoteVideoTile\n          key={participant.userId}\n          userId={participant.userId}\n          remoteParticipant={participant}\n          onCreateRemoteStreamView={isVideoParticipant ? onCreateRemoteStreamView : undefined}\n          onDisposeRemoteStreamView={isVideoParticipant ? onDisposeRemoteStreamView : undefined}\n          isAvailable={isVideoParticipant ? remoteVideoStream?.isAvailable : false}\n          isReceiving={isVideoParticipant ? remoteVideoStream?.isReceiving : false}\n          renderElement={isVideoParticipant ? remoteVideoStream?.renderElement : undefined}\n          remoteVideoViewOptions={isVideoParticipant ? remoteVideoViewOptions : undefined}\n          onRenderAvatar={onRenderAvatar}\n          showMuteIndicator={showMuteIndicator}\n          strings={strings}\n          /* @conditional-compile-remove(PSTN-calls) */\n          participantState={participant.state}\n          /* @conditional-compile-remove(pinned-participants) */\n          showRemoteVideoTileContextualMenu={props.showRemoteVideoTileContextualMenu}\n        />\n      );\n    },\n    [\n      onCreateRemoteStreamView,\n      onDisposeRemoteStreamView,\n      remoteVideoViewOptions,\n      onRenderAvatar,\n      showMuteIndicator,\n      strings,\n      /* @conditional-compile-remove(pinned-participants) */\n      props.showRemoteVideoTileContextualMenu\n    ]\n  );\n\n  const screenShareParticipant = remoteParticipants.find((participant) => participant.screenShareStream?.isAvailable);\n\n  const localScreenShareStreamComponent = <LocalScreenShare localParticipant={localParticipant} />;\n\n  const remoteScreenShareComponent = screenShareParticipant && (\n    <RemoteScreenShare\n      {...screenShareParticipant}\n      renderElement={screenShareParticipant.screenShareStream?.renderElement}\n      onCreateRemoteStreamView={onCreateRemoteStreamView}\n      onDisposeRemoteStreamView={onDisposeRemoteStreamView}\n      isReceiving={screenShareParticipant.screenShareStream?.isReceiving}\n    />\n  );\n\n  const screenShareComponent = remoteScreenShareComponent\n    ? remoteScreenShareComponent\n    : localParticipant.isScreenSharingOn\n    ? localScreenShareStreamComponent\n    : undefined;\n\n  const layoutProps = useMemo(\n    () => ({\n      remoteParticipants,\n      /* @conditional-compile-remove(pinned-participants) */ pinnedParticipants,\n      screenShareComponent,\n      showCameraSwitcherInLocalPreview,\n      maxRemoteVideoStreams,\n      dominantSpeakers,\n      styles,\n      onRenderRemoteParticipant: onRenderRemoteVideoTile ?? defaultOnRenderVideoTile,\n      localVideoComponent: localVideoTile,\n      parentWidth: containerWidth,\n      parentHeight: containerHeight,\n      isLocalVideoFloating: layout === 'floatingLocalVideo'\n    }),\n    [\n      remoteParticipants,\n      screenShareComponent,\n      showCameraSwitcherInLocalPreview,\n      maxRemoteVideoStreams,\n      dominantSpeakers,\n      styles,\n      localVideoTile,\n      containerWidth,\n      containerHeight,\n      onRenderRemoteVideoTile,\n      defaultOnRenderVideoTile,\n      layout,\n      /* @conditional-compile-remove(pinned-participants) */ pinnedParticipants\n    ]\n  );\n\n  const videoGalleryLayout = useMemo(() => {\n    /* @conditional-compile-remove(pinned-participants) */\n    if (layoutProps.pinnedParticipants.length > 0) {\n      return <PinnedParticipantsLayout {...layoutProps} />;\n    }\n    if (layout === 'floatingLocalVideo') {\n      return <FloatingLocalVideoLayout {...layoutProps} />;\n    }\n    return <DefaultLayout {...layoutProps} />;\n  }, [layout, layoutProps]);\n\n  return (\n    <div\n      data-ui-id={ids.videoGallery}\n      ref={containerRef}\n      className={mergeStyles(videoGalleryOuterDivStyle, styles?.root)}\n    >\n      {videoGalleryLayout}\n    </div>\n  );\n};\n\"../../../acs-ui-common/src\""]}
+{"version":3,"file":"VideoGallery.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/VideoGallery.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { concatStyleSets, IStyle, mergeStyles, Stack } from '@fluentui/react';\nimport React, { useCallback, useMemo, useRef } from 'react';\nimport { GridLayoutStyles } from '.';\nimport { useLocale } from '../localization';\nimport { useTheme } from '../theming';\nimport {\n  BaseCustomStyles,\n  OnRenderAvatarCallback,\n  VideoGalleryLocalParticipant,\n  VideoGalleryRemoteParticipant,\n  VideoStreamOptions,\n  CreateVideoStreamViewResult\n} from '../types';\nimport { HorizontalGalleryStyles } from './HorizontalGallery';\nimport { _RemoteVideoTile } from './RemoteVideoTile';\nimport { isNarrowWidth, _useContainerHeight, _useContainerWidth } from './utils/responsive';\nimport { LocalScreenShare } from './VideoGallery/LocalScreenShare';\nimport { RemoteScreenShare } from './VideoGallery/RemoteScreenShare';\nimport { LocalVideoCameraCycleButtonProps } from './LocalVideoCameraButton';\nimport { _ICoordinates, _ModalClone } from './ModalClone/ModalClone';\nimport { _formatString } from '@internal/acs-ui-common';\nimport { _LocalVideoTile } from './LocalVideoTile';\n/* @conditional-compile-remove(rooms) */\nimport { _usePermissions } from '../permissions';\nimport { DefaultLayout } from './VideoGallery/DefaultLayout';\nimport { FloatingLocalVideoLayout } from './VideoGallery/FloatingLocalVideoLayout';\nimport { useIdentifiers } from '../identifiers';\nimport { videoGalleryOuterDivStyle } from './styles/VideoGallery.styles';\nimport { floatingLocalVideoTileStyle } from './VideoGallery/styles/FloatingLocalVideo.styles';\n/* @conditional-compile-remove(pinned-participants) */\nimport { PinnedParticipantsLayout } from './VideoGallery/PinnedParticipantsLayout';\n\n/**\n * @private\n * Currently the Calling JS SDK supports up to 4 remote video streams\n */\nexport const DEFAULT_MAX_REMOTE_VIDEO_STREAMS = 4;\n/**\n * @private\n * Set aside only 6 dominant speakers for remaining audio participants\n */\nexport const MAX_AUDIO_DOMINANT_SPEAKERS = 6;\n\n/**\n * All strings that may be shown on the UI in the {@link VideoGallery}.\n *\n * @public\n */\nexport interface VideoGalleryStrings {\n  /** String to notify that local user is sharing their screen */\n  screenIsBeingSharedMessage: string;\n  /** String to show when remote screen share stream is loading */\n  screenShareLoadingMessage: string;\n  /** String for local video label. Default is \"You\" */\n  localVideoLabel: string;\n  /** String for local video camera switcher */\n  localVideoCameraSwitcherLabel: string;\n  /** String for announcing the local video tile can be moved by keyboard controls */\n  localVideoMovementLabel: string;\n  /** String for announcing the selected camera */\n  localVideoSelectedDescription: string;\n  /** placeholder text for participants who does not have a display name*/\n  displayNamePlaceholder: string;\n  /* @conditional-compile-remove(pinned-participants) */\n  /** Menu text shown in Video Tile contextual menu for setting a remote participants video to fit in frame */\n  fitRemoteParticipantToFrame: string;\n  /* @conditional-compile-remove(pinned-participants) */\n  /** Menu text shown in Video Tile contextual menu for setting a remote participants video to fill the frame */\n  fillRemoteParticipantFrame: string;\n  /* @conditional-compile-remove(pinned-participants) */\n  /** Menu text shown in Video Tile contextual menu for pinning a remote participant's video tile */\n  pinParticipantForMe: string;\n  /* @conditional-compile-remove(pinned-participants) */\n  /** Menu text shown in Video Tile contextual menu for setting a remote participant's video tile */\n  unpinParticipantForMe: string;\n}\n\n/**\n * @public\n */\nexport type VideoGalleryLayout = 'default' | 'floatingLocalVideo';\n\n/**\n * {@link VideoGallery} Component Styles.\n * @public\n */\nexport interface VideoGalleryStyles extends BaseCustomStyles {\n  /** Styles for the grid layout */\n  gridLayout?: GridLayoutStyles;\n  /** Styles for the horizontal gallery  */\n  horizontalGallery?: HorizontalGalleryStyles;\n  /** Styles for the local video  */\n  localVideo?: IStyle;\n}\n\n/**\n * Props for {@link VideoGallery}.\n *\n * @public\n */\nexport interface VideoGalleryProps {\n  /**\n   * Allows users to pass an object containing custom CSS styles for the gallery container.\n   *\n   * @Example\n   * ```\n   * <VideoGallery styles={{ root: { border: 'solid 1px red' } }} />\n   * ```\n   */\n  styles?: VideoGalleryStyles;\n  /** Layout of the video tiles. */\n  layout?: VideoGalleryLayout;\n  /** Local video particpant */\n  localParticipant: VideoGalleryLocalParticipant;\n  /** List of remote video particpants */\n  remoteParticipants?: VideoGalleryRemoteParticipant[];\n  /** List of dominant speaker userIds in the order of their dominance. 0th index is the most dominant. */\n  dominantSpeakers?: string[];\n  /** Local video view options */\n  localVideoViewOptions?: VideoStreamOptions;\n  /** Remote videos view options */\n  remoteVideoViewOptions?: VideoStreamOptions;\n  /** Callback to create the local video stream view */\n  onCreateLocalStreamView?: (options?: VideoStreamOptions) => Promise<void | CreateVideoStreamViewResult>;\n  /** Callback to dispose of the local video stream view */\n  onDisposeLocalStreamView?: () => void;\n  /** Callback to render the local video tile*/\n  onRenderLocalVideoTile?: (localParticipant: VideoGalleryLocalParticipant) => JSX.Element;\n  /** Callback to create a remote video stream view */\n  onCreateRemoteStreamView?: (\n    userId: string,\n    options?: VideoStreamOptions\n  ) => Promise<void | CreateVideoStreamViewResult>;\n  /** Callback to render a remote video tile */\n  onRenderRemoteVideoTile?: (remoteParticipant: VideoGalleryRemoteParticipant) => JSX.Element;\n  /** Callback to dispose a remote video stream view */\n  onDisposeRemoteStreamView?: (userId: string) => Promise<void>;\n  /** Callback to render a particpant avatar */\n  onRenderAvatar?: OnRenderAvatarCallback;\n  /**\n   * Whether to display the local video camera switcher button\n   */\n  showCameraSwitcherInLocalPreview?: boolean;\n  /**\n   * Whether to display a mute icon beside the user's display name.\n   * @defaultValue `true`\n   */\n  showMuteIndicator?: boolean;\n  /** Optional strings to override in component  */\n  strings?: Partial<VideoGalleryStrings>;\n  /**\n   * Maximum number of participant remote video streams that is rendered.\n   * @defaultValue 4\n   */\n  maxRemoteVideoStreams?: number;\n  /**\n   * Camera control information for button to switch cameras.\n   */\n  localVideoCameraCycleButtonProps?: LocalVideoCameraCycleButtonProps;\n  /* @conditional-compile-remove(pinned-participants) */\n  /**\n   * List of pinned participant userIds\n   */\n  pinnedParticipants?: string[];\n  /* @conditional-compile-remove(pinned-participants) */\n  /**\n   * Whether to show the remote video tile contextual menu.\n   * @defaultValue `true`\n   */\n  showRemoteVideoTileContextualMenu?: boolean;\n  /* @conditional-compile-remove(pinned-participants) */\n  /**\n   * This callback will be called when a participant video tile is pinned\n   */\n  onPinParticipant?: (userId: string) => void;\n  /* @conditional-compile-remove(pinned-participants) */\n  /**\n   * This callback will be called when a participant video tile is un-pinned\n   */\n  onUnpinParticipant?: (userId: string) => void;\n}\n\n/**\n * VideoGallery represents a layout of video tiles for a specific call.\n * It displays a {@link VideoTile} for the local user as well as for each remote participant who has joined the call.\n *\n * @public\n */\nexport const VideoGallery = (props: VideoGalleryProps): JSX.Element => {\n  const {\n    localParticipant,\n    remoteParticipants = [],\n    localVideoViewOptions,\n    remoteVideoViewOptions,\n    dominantSpeakers,\n    onRenderLocalVideoTile,\n    onRenderRemoteVideoTile,\n    onCreateLocalStreamView,\n    onDisposeLocalStreamView,\n    onCreateRemoteStreamView,\n    onDisposeRemoteStreamView,\n    styles,\n    layout,\n    onRenderAvatar,\n    showMuteIndicator,\n    maxRemoteVideoStreams = DEFAULT_MAX_REMOTE_VIDEO_STREAMS,\n    showCameraSwitcherInLocalPreview,\n    localVideoCameraCycleButtonProps,\n    /* @conditional-compile-remove(pinned-participants) */\n    onPinParticipant: onPinParticipantHandler,\n    /* @conditional-compile-remove(pinned-participants) */\n    onUnpinParticipant: onUnpinParticipantHandler\n  } = props;\n\n  const ids = useIdentifiers();\n  const theme = useTheme();\n  const localeStrings = useLocale().strings.videoGallery;\n  const strings = useMemo(() => ({ ...localeStrings, ...props.strings }), [localeStrings, props.strings]);\n\n  const shouldFloatLocalVideo = !!(layout === 'floatingLocalVideo' && remoteParticipants.length > 0);\n\n  const containerRef = useRef<HTMLDivElement>(null);\n  const containerWidth = _useContainerWidth(containerRef);\n  const containerHeight = _useContainerHeight(containerRef);\n  const isNarrow = containerWidth ? isNarrowWidth(containerWidth) : false;\n\n  /* @conditional-compile-remove(pinned-participants) */\n  const [pinnedParticipantsState, setPinnedParticipantsState] = React.useState<string[]>([]);\n  /* @conditional-compile-remove(pinned-participants) */\n  // Use pinnedParticipants from props but if it is not defined use the maintained state of pinned participants\n  const pinnedParticipants = props.pinnedParticipants ?? pinnedParticipantsState;\n\n  /* @conditional-compile-remove(rooms) */\n  const permissions = _usePermissions();\n\n  /**\n   * Utility function for memoized rendering of LocalParticipant.\n   */\n  const localVideoTile = useMemo((): JSX.Element /* @conditional-compile-remove(rooms) */ | undefined => {\n    /* @conditional-compile-remove(rooms) */\n    if (!permissions.cameraButton) {\n      return undefined;\n    }\n    if (onRenderLocalVideoTile) {\n      return onRenderLocalVideoTile(localParticipant);\n    }\n\n    const localVideoTileStyles = concatStyleSets(\n      shouldFloatLocalVideo ? floatingLocalVideoTileStyle : {},\n      {\n        root: { borderRadius: theme.effects.roundedCorner4 }\n      },\n      styles?.localVideo\n    );\n\n    const initialsName = !localParticipant.displayName ? strings.displayNamePlaceholder : localParticipant.displayName;\n\n    return (\n      <Stack key=\"local-video-tile-key\" tabIndex={0} aria-label={strings.localVideoMovementLabel} role={'dialog'}>\n        <_LocalVideoTile\n          userId={localParticipant.userId}\n          onCreateLocalStreamView={onCreateLocalStreamView}\n          onDisposeLocalStreamView={onDisposeLocalStreamView}\n          isAvailable={localParticipant?.videoStream?.isAvailable}\n          isMuted={localParticipant.isMuted}\n          renderElement={localParticipant?.videoStream?.renderElement}\n          displayName={isNarrow ? '' : strings.localVideoLabel}\n          initialsName={initialsName}\n          localVideoViewOptions={localVideoViewOptions}\n          onRenderAvatar={onRenderAvatar}\n          showLabel={!(shouldFloatLocalVideo && isNarrow)}\n          showMuteIndicator={showMuteIndicator}\n          showCameraSwitcherInLocalPreview={showCameraSwitcherInLocalPreview}\n          localVideoCameraCycleButtonProps={localVideoCameraCycleButtonProps}\n          localVideoCameraSwitcherLabel={strings.localVideoCameraSwitcherLabel}\n          localVideoSelectedDescription={strings.localVideoSelectedDescription}\n          styles={localVideoTileStyles}\n        />\n      </Stack>\n    );\n  }, [\n    isNarrow,\n    localParticipant,\n    localVideoCameraCycleButtonProps,\n    localVideoViewOptions,\n    onCreateLocalStreamView,\n    onDisposeLocalStreamView,\n    onRenderAvatar,\n    onRenderLocalVideoTile,\n    shouldFloatLocalVideo,\n    showCameraSwitcherInLocalPreview,\n    showMuteIndicator,\n    strings.localVideoCameraSwitcherLabel,\n    strings.localVideoLabel,\n    strings.localVideoMovementLabel,\n    strings.localVideoSelectedDescription,\n    strings.displayNamePlaceholder,\n    styles?.localVideo,\n    theme.effects.roundedCorner4,\n    /* @conditional-compile-remove(rooms) */ permissions.cameraButton\n  ]);\n\n  /* @conditional-compile-remove(pinned-participants) */\n  const onPinParticipant = useCallback(\n    (userId: string) => {\n      if (!pinnedParticipantsState.includes(userId)) {\n        setPinnedParticipantsState(pinnedParticipantsState.concat(userId));\n      }\n      onPinParticipantHandler?.(userId);\n    },\n    [pinnedParticipantsState, setPinnedParticipantsState, onPinParticipantHandler]\n  );\n  /* @conditional-compile-remove(pinned-participants) */\n  const onUnpinParticipant = useCallback(\n    (userId: string) => {\n      setPinnedParticipantsState(pinnedParticipantsState.filter((p) => p !== userId));\n      onUnpinParticipantHandler?.(userId);\n    },\n    [pinnedParticipantsState, setPinnedParticipantsState, onUnpinParticipantHandler]\n  );\n\n  const defaultOnRenderVideoTile = useCallback(\n    (participant: VideoGalleryRemoteParticipant, isVideoParticipant?: boolean) => {\n      const remoteVideoStream = participant.videoStream;\n\n      /* @conditional-compile-remove(pinned-participants) */\n      const isPinned = pinnedParticipants?.includes(participant.userId);\n\n      return (\n        <_RemoteVideoTile\n          key={participant.userId}\n          userId={participant.userId}\n          remoteParticipant={participant}\n          onCreateRemoteStreamView={isVideoParticipant ? onCreateRemoteStreamView : undefined}\n          onDisposeRemoteStreamView={isVideoParticipant ? onDisposeRemoteStreamView : undefined}\n          isAvailable={isVideoParticipant ? remoteVideoStream?.isAvailable : false}\n          isReceiving={isVideoParticipant ? remoteVideoStream?.isReceiving : false}\n          renderElement={isVideoParticipant ? remoteVideoStream?.renderElement : undefined}\n          remoteVideoViewOptions={isVideoParticipant ? remoteVideoViewOptions : undefined}\n          onRenderAvatar={onRenderAvatar}\n          showMuteIndicator={showMuteIndicator}\n          strings={strings}\n          /* @conditional-compile-remove(PSTN-calls) */\n          participantState={participant.state}\n          /* @conditional-compile-remove(pinned-participants) */\n          showRemoteVideoTileContextualMenu={props.showRemoteVideoTileContextualMenu}\n          /* @conditional-compile-remove(pinned-participants) */\n          onPinParticipant={onPinParticipant}\n          /* @conditional-compile-remove(pinned-participants) */\n          onUnpinParticipant={onUnpinParticipant}\n          /* @conditional-compile-remove(pinned-participants) */\n          isPinned={isPinned}\n        />\n      );\n    },\n    [\n      onCreateRemoteStreamView,\n      onDisposeRemoteStreamView,\n      remoteVideoViewOptions,\n      onRenderAvatar,\n      showMuteIndicator,\n      strings,\n      /* @conditional-compile-remove(pinned-participants) */ props.showRemoteVideoTileContextualMenu,\n      /* @conditional-compile-remove(pinned-participants) */ pinnedParticipants,\n      /* @conditional-compile-remove(pinned-participants) */ onPinParticipant,\n      /* @conditional-compile-remove(pinned-participants) */ onUnpinParticipant\n    ]\n  );\n\n  const screenShareParticipant = remoteParticipants.find((participant) => participant.screenShareStream?.isAvailable);\n\n  const localScreenShareStreamComponent = <LocalScreenShare localParticipant={localParticipant} />;\n\n  const remoteScreenShareComponent = screenShareParticipant && (\n    <RemoteScreenShare\n      {...screenShareParticipant}\n      renderElement={screenShareParticipant.screenShareStream?.renderElement}\n      onCreateRemoteStreamView={onCreateRemoteStreamView}\n      onDisposeRemoteStreamView={onDisposeRemoteStreamView}\n      isReceiving={screenShareParticipant.screenShareStream?.isReceiving}\n    />\n  );\n\n  const screenShareComponent = remoteScreenShareComponent\n    ? remoteScreenShareComponent\n    : localParticipant.isScreenSharingOn\n    ? localScreenShareStreamComponent\n    : undefined;\n\n  const layoutProps = useMemo(\n    () => ({\n      remoteParticipants,\n      /* @conditional-compile-remove(pinned-participants) */ pinnedParticipants,\n      screenShareComponent,\n      showCameraSwitcherInLocalPreview,\n      maxRemoteVideoStreams,\n      dominantSpeakers,\n      styles,\n      onRenderRemoteParticipant: onRenderRemoteVideoTile ?? defaultOnRenderVideoTile,\n      localVideoComponent: localVideoTile,\n      parentWidth: containerWidth,\n      parentHeight: containerHeight,\n      isLocalVideoFloating: layout === 'floatingLocalVideo'\n    }),\n    [\n      remoteParticipants,\n      screenShareComponent,\n      showCameraSwitcherInLocalPreview,\n      maxRemoteVideoStreams,\n      dominantSpeakers,\n      styles,\n      localVideoTile,\n      containerWidth,\n      containerHeight,\n      onRenderRemoteVideoTile,\n      defaultOnRenderVideoTile,\n      layout,\n      /* @conditional-compile-remove(pinned-participants) */ pinnedParticipants\n    ]\n  );\n\n  const videoGalleryLayout = useMemo(() => {\n    /* @conditional-compile-remove(pinned-participants) */\n    if (layoutProps.pinnedParticipants.length > 0) {\n      return <PinnedParticipantsLayout {...layoutProps} />;\n    }\n    if (layout === 'floatingLocalVideo') {\n      return <FloatingLocalVideoLayout {...layoutProps} />;\n    }\n    return <DefaultLayout {...layoutProps} />;\n  }, [layout, layoutProps]);\n\n  return (\n    <div\n      data-ui-id={ids.videoGallery}\n      ref={containerRef}\n      className={mergeStyles(videoGalleryOuterDivStyle, styles?.root)}\n    >\n      {videoGalleryLayout}\n    </div>\n  );\n};\n\"../../../acs-ui-common/src\""]}

package/dist/dist-esm/react-components/src/localization/locales/en-US/strings.json

@@ -172,7 +172,9 @@
         "localVideoSelectedDescription": "{cameraName} selected",
         "displayNamePlaceholder": "Unnamed participant",
         "fitRemoteParticipantToFrame": "Fit to frame",
-        "fillRemoteParticipantFrame": "Fill frame"
+        "fillRemoteParticipantFrame": "Fill frame",
+        "pinParticipantForMe": "Pin for me",
+        "unpinParticipantForMe": "Unpin for me"
     },
     "dialpad": {
         "placeholderText": "Enter phone number",

package/dist/dist-esm/react-components/src/theming/icons.d.ts

@@ -78,5 +78,7 @@ export declare const DEFAULT_COMPONENT_ICONS: {
     VideoTileMoreOptions: JSX.Element;
     VideoTileScaleFit: JSX.Element;
     VideoTileScaleFill: JSX.Element;
+    PinParticipant: JSX.Element;
+    UnpinParticipant: JSX.Element;
 };
 //# sourceMappingURL=icons.d.ts.map

package/dist/dist-esm/react-components/src/theming/icons.js

@@ -7,7 +7,7 @@ import { ArrowClockwise16Regular, CallEnd20Filled, Checkmark20Regular, Checkmark
 /* @conditional-compile-remove(call-readiness) */
 import { Important20Filled } from '@fluentui/react-icons';
 /* @conditional-compile-remove(pinned-participants) */
-import { Pin16Filled, ScaleFit20Regular, ScaleFill20Regular } from '@fluentui/react-icons';
+import { Pin16Filled, Pin20Regular, PinOff20Regular, ScaleFit20Regular, ScaleFill20Regular } from '@fluentui/react-icons';
 /* @conditional-compile-remove(dialpad) */ /* @conditional-compile-remove(PSTN-calls) */
 import { Backspace20Regular } from '@fluentui/react-icons';
 /* @conditional-compile-remove(call-readiness) */
@@ -175,6 +175,10 @@ export const DEFAULT_COMPONENT_ICONS = {
     /* @conditional-compile-remove(pinned-participants) */
     VideoTileScaleFit: React.createElement(ScaleFit20Regular, null),
     /* @conditional-compile-remove(pinned-participants) */
-    VideoTileScaleFill: React.createElement(ScaleFill20Regular, null)
+    VideoTileScaleFill: React.createElement(ScaleFill20Regular, null),
+    /* @conditional-compile-remove(pinned-participants) */
+    PinParticipant: React.createElement(Pin20Regular, null),
+    /* @conditional-compile-remove(pinned-participants) */
+    UnpinParticipant: React.createElement(PinOff20Regular, null)
 };
 //# sourceMappingURL=icons.js.map

package/dist/dist-esm/react-components/src/theming/icons.js.map

@@ -1 +1 @@
-{"version":3,"file":"icons.js","sourceRoot":"","sources":["../../../../../../react-components/src/theming/icons.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { mergeStyles } from '@fluentui/react';\n/* @conditional-compile-remove(call-readiness) */ /* @conditional-compile-remove(unsupported-browser) */\nimport { Stack } from '@fluentui/react';\nimport {\n  ArrowClockwise16Regular,\n  CallEnd20Filled,\n  Checkmark20Regular,\n  CheckmarkCircle16Regular,\n  Circle16Regular,\n  Delete20Regular,\n  Dismiss20Regular,\n  Dismiss16Regular,\n  Edit20Regular,\n  ErrorCircle16Regular,\n  EyeShow16Regular,\n  MicOff16Filled,\n  MicOff16Regular,\n  MicOff20Filled,\n  MicOn16Filled,\n  MicOn20Filled,\n  MicOn20Regular,\n  MoreHorizontal20Filled,\n  MoreHorizontal20Regular,\n  People20Filled,\n  Settings20Filled,\n  Send20Filled,\n  Send20Regular,\n  ShareScreenStart20Filled,\n  ShareScreenStop20Filled,\n  Speaker220Regular,\n  Video16Filled,\n  Video20Filled,\n  Video20Regular,\n  VideoOff20Filled,\n  ChevronLeft20Regular,\n  ChevronRight20Regular,\n  WifiWarning20Filled,\n  SpeakerMute16Filled,\n  MicProhibited16Filled,\n  VideoProhibited16Filled\n} from '@fluentui/react-icons';\n/* @conditional-compile-remove(call-readiness) */\nimport { Important20Filled } from '@fluentui/react-icons';\n\n/* @conditional-compile-remove(pinned-participants) */\nimport { Pin16Filled, ScaleFit20Regular, ScaleFill20Regular } from '@fluentui/react-icons';\n\n/* @conditional-compile-remove(dialpad) */ /* @conditional-compile-remove(PSTN-calls) */\nimport { Backspace20Regular } from '@fluentui/react-icons';\n\n/* @conditional-compile-remove(call-readiness) */\nimport { Sparkle20Filled, VideoProhibited20Filled, MicProhibited20Filled } from '@fluentui/react-icons';\n\n/* @conditional-compile-remove(file-sharing) */\nimport { ArrowDownload16Regular } from '@fluentui/react-icons';\n/* @conditional-compile-remove(PSTN-calls) */\nimport { CallPause20Regular, CallPause20Filled, Play20Regular, People20Regular } from '@fluentui/react-icons';\n\n/* @conditional-compile-remove(unsupported-browser) */\nimport { Warning20Filled } from '@fluentui/react-icons';\nimport { _pxToRem } from '@internal/acs-ui-common';\n\nimport React from 'react';\n/* @conditional-compile-remove(unsupported-browser) */\nimport { useTheme } from './FluentThemeProvider';\n/* @conditional-compile-remove(call-readiness) */\nimport { domainPermissionIconBackgroundStyle, scaledIconStyles } from './icons.styles';\n\n/**\n * Icons used by the React components exported from this library.\n *\n * @remark See {@link CompositeIcons} for icons used by composites only.\n *\n * @public\n */\nexport type ComponentIcons = Record<keyof typeof DEFAULT_COMPONENT_ICONS, JSX.Element>;\n\nconst WifiWarning16Filled = (): JSX.Element => (\n  // All ErrorBar icons are 16px x 16px (when 1rem = 16 px).\n  // There is no 16px version of this icon in the fluent icon package, so scale the larger\n  // one down to required size.\n  <div className={mergeStyles({ transform: 'scale(0.8)' })}>\n    <WifiWarning20Filled />\n  </div>\n);\n\nconst MoreHorizontal18Regular = (): JSX.Element => (\n  // MoreHorizontal icons are 16px x 16px or 20px x 20px so scaling to get desired size\n  <div className={mergeStyles({ transform: 'scale(0.9)' })}>\n    <MoreHorizontal20Regular />\n  </div>\n);\n\n/* @conditional-compile-remove(call-readiness) */\nconst DomainPermissionMic20Filled = (): JSX.Element => {\n  const theme = useTheme();\n  return (\n    <Stack horizontalAlign={'center'} styles={domainPermissionIconBackgroundStyle(theme)}>\n      <div className={mergeStyles(scaledIconStyles(theme))}>\n        <MicOn20Filled />\n      </div>\n    </Stack>\n  );\n};\n\n/* @conditional-compile-remove(call-readiness) */\nconst DomainPermissionCamera20Filled = (): JSX.Element => {\n  const theme = useTheme();\n  return (\n    <Stack horizontalAlign={'center'} styles={domainPermissionIconBackgroundStyle(theme)}>\n      <div className={mergeStyles(scaledIconStyles(theme))}>\n        <Video20Filled />\n      </div>\n    </Stack>\n  );\n};\n\n/* @conditional-compile-remove(call-readiness) */\nconst DomainPermissionsMicDenied20Filled = (): JSX.Element => {\n  const theme = useTheme();\n  return (\n    <Stack horizontalAlign={'center'} styles={domainPermissionIconBackgroundStyle(theme)}>\n      <div className={mergeStyles(scaledIconStyles(theme))}>\n        <MicProhibited20Filled />\n      </div>\n    </Stack>\n  );\n};\n\n/* @conditional-compile-remove(call-readiness) */\nconst DomainPermissionsCameraDenied20Filled = (): JSX.Element => {\n  const theme = useTheme();\n  return (\n    <Stack horizontalAlign={'center'} styles={domainPermissionIconBackgroundStyle(theme)}>\n      <div className={mergeStyles(scaledIconStyles(theme))}>\n        <VideoProhibited20Filled />\n      </div>\n    </Stack>\n  );\n};\n\n/* @conditional-compile-remove(call-readiness) */\nconst DomainPermissionSparkle20Filled = (): JSX.Element => (\n  <div className={mergeStyles({ transform: 'scale(2)' })}>\n    <Sparkle20Filled />\n  </div>\n);\n\n/* @conditional-compile-remove(unsupported-browser) */\nconst UnsupportedEnvironmentWarning = (): JSX.Element => {\n  const theme = useTheme();\n  return (\n    <Stack\n      horizontalAlign={'center'}\n      styles={{\n        root: {\n          width: _pxToRem(84),\n          borderRadius: '100%',\n          background: theme.palette.themeLighterAlt,\n          padding: '2rem',\n          margin: 'auto'\n        }\n      }}\n    >\n      <div className={mergeStyles(scaledIconStyles(theme))}>\n        <Warning20Filled />\n      </div>\n    </Stack>\n  );\n};\n\n/* @conditional-compile-remove(call-readiness) */\nconst BrowserPermissionDenied20Filled = (): JSX.Element => {\n  const theme = useTheme();\n  return (\n    <Stack horizontalAlign={'center'} styles={domainPermissionIconBackgroundStyle(theme)}>\n      <div className={mergeStyles(scaledIconStyles(theme))}>\n        <Important20Filled />\n      </div>\n    </Stack>\n  );\n};\n\n/**\n * The default set of icons that are available to use in the UI components.\n *\n * @remark Icons used only in the composites are available in {@link DEFAULT_COMPOSITE_ICONS}.\n *\n * @public\n */\nexport const DEFAULT_COMPONENT_ICONS = {\n  ChatMessageOptions: <MoreHorizontal18Regular />,\n  ControlButtonCameraOff: <VideoOff20Filled />,\n  ControlButtonCameraOn: <Video20Filled />,\n  ControlButtonEndCall: <CallEnd20Filled />,\n  ControlButtonMicOff: <MicOff20Filled />,\n  ControlButtonMicOn: <MicOn20Filled />,\n  ControlButtonOptions: <Settings20Filled />,\n  ControlButtonParticipants: <People20Filled />,\n  /* @conditional-compile-remove(dialpad) */ /* @conditional-compile-remove(PSTN-calls) */\n  ControlButtonParticipantsContextualMenuItem: <People20Regular />,\n  ControlButtonScreenShareStart: <ShareScreenStart20Filled />,\n  ControlButtonScreenShareStop: <ShareScreenStop20Filled />,\n  /* @conditional-compile-remove(file-sharing) */\n  CancelFileUpload: <Dismiss16Regular />,\n  /* @conditional-compile-remove(file-sharing) */\n  DownloadFile: <ArrowDownload16Regular />,\n  EditBoxCancel: <Dismiss20Regular />,\n  EditBoxSubmit: <Checkmark20Regular />,\n  ErrorBarCallCameraAccessDenied: <VideoProhibited16Filled />,\n  ErrorBarCallCameraAlreadyInUse: <VideoProhibited16Filled />,\n  ErrorBarCallLocalVideoFreeze: <WifiWarning16Filled />,\n  ErrorBarCallMacOsCameraAccessDenied: <VideoProhibited16Filled />,\n  ErrorBarCallMacOsMicrophoneAccessDenied: <MicProhibited16Filled />,\n  ErrorBarCallMicrophoneAccessDenied: <MicProhibited16Filled />,\n  ErrorBarCallMicrophoneMutedBySystem: <MicOff16Filled />,\n  ErrorBarCallMicrophoneUnmutedBySystem: <MicOn16Filled />,\n  ErrorBarCallNetworkQualityLow: <WifiWarning16Filled />,\n  ErrorBarCallNoMicrophoneFound: <MicProhibited16Filled />,\n  ErrorBarCallNoSpeakerFound: <SpeakerMute16Filled />,\n  ErrorBarClear: <Dismiss16Regular />,\n  ErrorBarCallVideoRecoveredBySystem: <Video16Filled />,\n  ErrorBarCallVideoStoppedBySystem: <VideoProhibited16Filled />,\n  HorizontalGalleryLeftButton: <ChevronLeft20Regular />,\n  HorizontalGalleryRightButton: <ChevronRight20Regular />,\n  MessageDelivered: <CheckmarkCircle16Regular />,\n  MessageEdit: <Edit20Regular />,\n  MessageFailed: <ErrorCircle16Regular />,\n  MessageRemove: <Delete20Regular />,\n  MessageResend: <ArrowClockwise16Regular />,\n  MessageSeen: <EyeShow16Regular />,\n  MessageSending: <Circle16Regular />,\n  OptionsCamera: <Video20Regular />,\n  OptionsMic: <MicOn20Regular />,\n  OptionsSpeaker: <Speaker220Regular />,\n  ParticipantItemMicOff: <MicOff16Regular />,\n  ParticipantItemOptions: <></>,\n  ParticipantItemOptionsHovered: <MoreHorizontal20Filled />,\n  ParticipantItemScreenShareStart: <ShareScreenStart20Filled />,\n  /* @conditional-compile-remove(PSTN-calls) */\n  HoldCallContextualMenuItem: <CallPause20Regular />,\n  /* @conditional-compile-remove(PSTN-calls) */\n  HoldCallButton: <CallPause20Filled />,\n  /* @conditional-compile-remove(PSTN-calls) */\n  ResumeCall: <Play20Regular />,\n  SendBoxSend: <Send20Regular />,\n  SendBoxSendHovered: <Send20Filled />,\n  VideoTileMicOff: <MicOff16Filled />,\n  /* @conditional-compile-remove(dialpad) */ /* @conditional-compile-remove(PSTN-calls) */\n  DialpadBackspace: <Backspace20Regular />,\n  /* @conditional-compile-remove(call-readiness) */\n  DomainPermissionsSparkle: <DomainPermissionSparkle20Filled />,\n  /* @conditional-compile-remove(call-readiness) */\n  DomainPermissionCamera: <DomainPermissionCamera20Filled />,\n  /* @conditional-compile-remove(call-readiness) */\n  DomainPermissionMic: <DomainPermissionMic20Filled />,\n  /* @conditional-compile-remove(call-readiness) */\n  DomainPermissionCameraDenied: <DomainPermissionsCameraDenied20Filled />,\n  /* @conditional-compile-remove(call-readiness) */\n  DomainPermissionMicDenied: <DomainPermissionsMicDenied20Filled />,\n  /* @conditional-compile-remove(unsupported-browser) */\n  UnsupportedEnvironmentWarning: <UnsupportedEnvironmentWarning />,\n  /* @conditional-compile-remove(call-readiness) */\n  BrowserPermissionDeniedError: <BrowserPermissionDenied20Filled />,\n  /* @conditional-compile-remove(pinned-participants) */\n  VideoTilePinned: <Pin16Filled />,\n  /* @conditional-compile-remove(pinned-participants) */\n  VideoTileMoreOptions: <MoreHorizontal20Filled />,\n  /* @conditional-compile-remove(pinned-participants) */\n  VideoTileScaleFit: <ScaleFit20Regular />,\n  /* @conditional-compile-remove(pinned-participants) */\n  VideoTileScaleFill: <ScaleFill20Regular />\n};\n\"../../../acs-ui-common/src\""]}
+{"version":3,"file":"icons.js","sourceRoot":"","sources":["../../../../../../react-components/src/theming/icons.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { mergeStyles } from '@fluentui/react';\n/* @conditional-compile-remove(call-readiness) */ /* @conditional-compile-remove(unsupported-browser) */\nimport { Stack } from '@fluentui/react';\nimport {\n  ArrowClockwise16Regular,\n  CallEnd20Filled,\n  Checkmark20Regular,\n  CheckmarkCircle16Regular,\n  Circle16Regular,\n  Delete20Regular,\n  Dismiss20Regular,\n  Dismiss16Regular,\n  Edit20Regular,\n  ErrorCircle16Regular,\n  EyeShow16Regular,\n  MicOff16Filled,\n  MicOff16Regular,\n  MicOff20Filled,\n  MicOn16Filled,\n  MicOn20Filled,\n  MicOn20Regular,\n  MoreHorizontal20Filled,\n  MoreHorizontal20Regular,\n  People20Filled,\n  Settings20Filled,\n  Send20Filled,\n  Send20Regular,\n  ShareScreenStart20Filled,\n  ShareScreenStop20Filled,\n  Speaker220Regular,\n  Video16Filled,\n  Video20Filled,\n  Video20Regular,\n  VideoOff20Filled,\n  ChevronLeft20Regular,\n  ChevronRight20Regular,\n  WifiWarning20Filled,\n  SpeakerMute16Filled,\n  MicProhibited16Filled,\n  VideoProhibited16Filled\n} from '@fluentui/react-icons';\n/* @conditional-compile-remove(call-readiness) */\nimport { Important20Filled } from '@fluentui/react-icons';\n\n/* @conditional-compile-remove(pinned-participants) */\nimport {\n  Pin16Filled,\n  Pin20Regular,\n  PinOff20Regular,\n  ScaleFit20Regular,\n  ScaleFill20Regular\n} from '@fluentui/react-icons';\n\n/* @conditional-compile-remove(dialpad) */ /* @conditional-compile-remove(PSTN-calls) */\nimport { Backspace20Regular } from '@fluentui/react-icons';\n\n/* @conditional-compile-remove(call-readiness) */\nimport { Sparkle20Filled, VideoProhibited20Filled, MicProhibited20Filled } from '@fluentui/react-icons';\n\n/* @conditional-compile-remove(file-sharing) */\nimport { ArrowDownload16Regular } from '@fluentui/react-icons';\n/* @conditional-compile-remove(PSTN-calls) */\nimport { CallPause20Regular, CallPause20Filled, Play20Regular, People20Regular } from '@fluentui/react-icons';\n\n/* @conditional-compile-remove(unsupported-browser) */\nimport { Warning20Filled } from '@fluentui/react-icons';\nimport { _pxToRem } from '@internal/acs-ui-common';\n\nimport React from 'react';\n/* @conditional-compile-remove(unsupported-browser) */\nimport { useTheme } from './FluentThemeProvider';\n/* @conditional-compile-remove(call-readiness) */\nimport { domainPermissionIconBackgroundStyle, scaledIconStyles } from './icons.styles';\n\n/**\n * Icons used by the React components exported from this library.\n *\n * @remark See {@link CompositeIcons} for icons used by composites only.\n *\n * @public\n */\nexport type ComponentIcons = Record<keyof typeof DEFAULT_COMPONENT_ICONS, JSX.Element>;\n\nconst WifiWarning16Filled = (): JSX.Element => (\n  // All ErrorBar icons are 16px x 16px (when 1rem = 16 px).\n  // There is no 16px version of this icon in the fluent icon package, so scale the larger\n  // one down to required size.\n  <div className={mergeStyles({ transform: 'scale(0.8)' })}>\n    <WifiWarning20Filled />\n  </div>\n);\n\nconst MoreHorizontal18Regular = (): JSX.Element => (\n  // MoreHorizontal icons are 16px x 16px or 20px x 20px so scaling to get desired size\n  <div className={mergeStyles({ transform: 'scale(0.9)' })}>\n    <MoreHorizontal20Regular />\n  </div>\n);\n\n/* @conditional-compile-remove(call-readiness) */\nconst DomainPermissionMic20Filled = (): JSX.Element => {\n  const theme = useTheme();\n  return (\n    <Stack horizontalAlign={'center'} styles={domainPermissionIconBackgroundStyle(theme)}>\n      <div className={mergeStyles(scaledIconStyles(theme))}>\n        <MicOn20Filled />\n      </div>\n    </Stack>\n  );\n};\n\n/* @conditional-compile-remove(call-readiness) */\nconst DomainPermissionCamera20Filled = (): JSX.Element => {\n  const theme = useTheme();\n  return (\n    <Stack horizontalAlign={'center'} styles={domainPermissionIconBackgroundStyle(theme)}>\n      <div className={mergeStyles(scaledIconStyles(theme))}>\n        <Video20Filled />\n      </div>\n    </Stack>\n  );\n};\n\n/* @conditional-compile-remove(call-readiness) */\nconst DomainPermissionsMicDenied20Filled = (): JSX.Element => {\n  const theme = useTheme();\n  return (\n    <Stack horizontalAlign={'center'} styles={domainPermissionIconBackgroundStyle(theme)}>\n      <div className={mergeStyles(scaledIconStyles(theme))}>\n        <MicProhibited20Filled />\n      </div>\n    </Stack>\n  );\n};\n\n/* @conditional-compile-remove(call-readiness) */\nconst DomainPermissionsCameraDenied20Filled = (): JSX.Element => {\n  const theme = useTheme();\n  return (\n    <Stack horizontalAlign={'center'} styles={domainPermissionIconBackgroundStyle(theme)}>\n      <div className={mergeStyles(scaledIconStyles(theme))}>\n        <VideoProhibited20Filled />\n      </div>\n    </Stack>\n  );\n};\n\n/* @conditional-compile-remove(call-readiness) */\nconst DomainPermissionSparkle20Filled = (): JSX.Element => (\n  <div className={mergeStyles({ transform: 'scale(2)' })}>\n    <Sparkle20Filled />\n  </div>\n);\n\n/* @conditional-compile-remove(unsupported-browser) */\nconst UnsupportedEnvironmentWarning = (): JSX.Element => {\n  const theme = useTheme();\n  return (\n    <Stack\n      horizontalAlign={'center'}\n      styles={{\n        root: {\n          width: _pxToRem(84),\n          borderRadius: '100%',\n          background: theme.palette.themeLighterAlt,\n          padding: '2rem',\n          margin: 'auto'\n        }\n      }}\n    >\n      <div className={mergeStyles(scaledIconStyles(theme))}>\n        <Warning20Filled />\n      </div>\n    </Stack>\n  );\n};\n\n/* @conditional-compile-remove(call-readiness) */\nconst BrowserPermissionDenied20Filled = (): JSX.Element => {\n  const theme = useTheme();\n  return (\n    <Stack horizontalAlign={'center'} styles={domainPermissionIconBackgroundStyle(theme)}>\n      <div className={mergeStyles(scaledIconStyles(theme))}>\n        <Important20Filled />\n      </div>\n    </Stack>\n  );\n};\n\n/**\n * The default set of icons that are available to use in the UI components.\n *\n * @remark Icons used only in the composites are available in {@link DEFAULT_COMPOSITE_ICONS}.\n *\n * @public\n */\nexport const DEFAULT_COMPONENT_ICONS = {\n  ChatMessageOptions: <MoreHorizontal18Regular />,\n  ControlButtonCameraOff: <VideoOff20Filled />,\n  ControlButtonCameraOn: <Video20Filled />,\n  ControlButtonEndCall: <CallEnd20Filled />,\n  ControlButtonMicOff: <MicOff20Filled />,\n  ControlButtonMicOn: <MicOn20Filled />,\n  ControlButtonOptions: <Settings20Filled />,\n  ControlButtonParticipants: <People20Filled />,\n  /* @conditional-compile-remove(dialpad) */ /* @conditional-compile-remove(PSTN-calls) */\n  ControlButtonParticipantsContextualMenuItem: <People20Regular />,\n  ControlButtonScreenShareStart: <ShareScreenStart20Filled />,\n  ControlButtonScreenShareStop: <ShareScreenStop20Filled />,\n  /* @conditional-compile-remove(file-sharing) */\n  CancelFileUpload: <Dismiss16Regular />,\n  /* @conditional-compile-remove(file-sharing) */\n  DownloadFile: <ArrowDownload16Regular />,\n  EditBoxCancel: <Dismiss20Regular />,\n  EditBoxSubmit: <Checkmark20Regular />,\n  ErrorBarCallCameraAccessDenied: <VideoProhibited16Filled />,\n  ErrorBarCallCameraAlreadyInUse: <VideoProhibited16Filled />,\n  ErrorBarCallLocalVideoFreeze: <WifiWarning16Filled />,\n  ErrorBarCallMacOsCameraAccessDenied: <VideoProhibited16Filled />,\n  ErrorBarCallMacOsMicrophoneAccessDenied: <MicProhibited16Filled />,\n  ErrorBarCallMicrophoneAccessDenied: <MicProhibited16Filled />,\n  ErrorBarCallMicrophoneMutedBySystem: <MicOff16Filled />,\n  ErrorBarCallMicrophoneUnmutedBySystem: <MicOn16Filled />,\n  ErrorBarCallNetworkQualityLow: <WifiWarning16Filled />,\n  ErrorBarCallNoMicrophoneFound: <MicProhibited16Filled />,\n  ErrorBarCallNoSpeakerFound: <SpeakerMute16Filled />,\n  ErrorBarClear: <Dismiss16Regular />,\n  ErrorBarCallVideoRecoveredBySystem: <Video16Filled />,\n  ErrorBarCallVideoStoppedBySystem: <VideoProhibited16Filled />,\n  HorizontalGalleryLeftButton: <ChevronLeft20Regular />,\n  HorizontalGalleryRightButton: <ChevronRight20Regular />,\n  MessageDelivered: <CheckmarkCircle16Regular />,\n  MessageEdit: <Edit20Regular />,\n  MessageFailed: <ErrorCircle16Regular />,\n  MessageRemove: <Delete20Regular />,\n  MessageResend: <ArrowClockwise16Regular />,\n  MessageSeen: <EyeShow16Regular />,\n  MessageSending: <Circle16Regular />,\n  OptionsCamera: <Video20Regular />,\n  OptionsMic: <MicOn20Regular />,\n  OptionsSpeaker: <Speaker220Regular />,\n  ParticipantItemMicOff: <MicOff16Regular />,\n  ParticipantItemOptions: <></>,\n  ParticipantItemOptionsHovered: <MoreHorizontal20Filled />,\n  ParticipantItemScreenShareStart: <ShareScreenStart20Filled />,\n  /* @conditional-compile-remove(PSTN-calls) */\n  HoldCallContextualMenuItem: <CallPause20Regular />,\n  /* @conditional-compile-remove(PSTN-calls) */\n  HoldCallButton: <CallPause20Filled />,\n  /* @conditional-compile-remove(PSTN-calls) */\n  ResumeCall: <Play20Regular />,\n  SendBoxSend: <Send20Regular />,\n  SendBoxSendHovered: <Send20Filled />,\n  VideoTileMicOff: <MicOff16Filled />,\n  /* @conditional-compile-remove(dialpad) */ /* @conditional-compile-remove(PSTN-calls) */\n  DialpadBackspace: <Backspace20Regular />,\n  /* @conditional-compile-remove(call-readiness) */\n  DomainPermissionsSparkle: <DomainPermissionSparkle20Filled />,\n  /* @conditional-compile-remove(call-readiness) */\n  DomainPermissionCamera: <DomainPermissionCamera20Filled />,\n  /* @conditional-compile-remove(call-readiness) */\n  DomainPermissionMic: <DomainPermissionMic20Filled />,\n  /* @conditional-compile-remove(call-readiness) */\n  DomainPermissionCameraDenied: <DomainPermissionsCameraDenied20Filled />,\n  /* @conditional-compile-remove(call-readiness) */\n  DomainPermissionMicDenied: <DomainPermissionsMicDenied20Filled />,\n  /* @conditional-compile-remove(unsupported-browser) */\n  UnsupportedEnvironmentWarning: <UnsupportedEnvironmentWarning />,\n  /* @conditional-compile-remove(call-readiness) */\n  BrowserPermissionDeniedError: <BrowserPermissionDenied20Filled />,\n  /* @conditional-compile-remove(pinned-participants) */\n  VideoTilePinned: <Pin16Filled />,\n  /* @conditional-compile-remove(pinned-participants) */\n  VideoTileMoreOptions: <MoreHorizontal20Filled />,\n  /* @conditional-compile-remove(pinned-participants) */\n  VideoTileScaleFit: <ScaleFit20Regular />,\n  /* @conditional-compile-remove(pinned-participants) */\n  VideoTileScaleFill: <ScaleFill20Regular />,\n  /* @conditional-compile-remove(pinned-participants) */\n  PinParticipant: <Pin20Regular />,\n  /* @conditional-compile-remove(pinned-participants) */\n  UnpinParticipant: <PinOff20Regular />\n};\n\"../../../acs-ui-common/src\""]}

package/dist/dist-esm/react-composites/src/composites/CallComposite/adapter/AzureCommunicationCallAdapter.d.ts

@@ -4,7 +4,6 @@ import { TeamsCallAgent } from '@azure/communication-calling';
 import { RoomCallLocator } from '@azure/communication-calling';
 import { AddPhoneNumberOptions, DtmfTone } from '@azure/communication-calling';
 import { CommonCallAdapter, CallEndedListener, CallIdChangedListener, CallAdapterState, DisplayNameChangedListener, IsMutedChangedListener, IsLocalScreenSharingActiveChangedListener, IsSpeakingChangedListener, ParticipantsJoinedListener, ParticipantsLeftListener, DiagnosticChangedEventListner, CallAdapter } from './CallAdapter';
-import { CallAdapterOptionalFeatures } from './CallAdapter';
 import { TeamsCallAdapter } from './CallAdapter';
 import { CreateVideoStreamViewResult, VideoStreamOptions } from "../../../../../react-components/src";
 import { Role } from "../../../../../react-components/src";
@@ -131,10 +130,6 @@ export declare type AzureCommunicationCallAdapterOptions = {
      * {@link CallComposite}. The true role of the user will be synced with ACS services when a Rooms call starts.
      */
     roleHint?: Role;
-    /**
-     * Optional feature flags to be enabled in the CallAdapter.
-     */
-    features?: CallAdapterOptionalFeatures;
 };
 /**
  * Arguments for creating the Azure Communication Services implementation of {@link CallAdapter}.

package/dist/dist-esm/react-composites/src/composites/CallComposite/adapter/AzureCommunicationCallAdapter.js

@@ -40,10 +40,14 @@ class CallContext {
             /* @conditional-compile-remove(PSTN-calls) */ alternateCallerId: clientState.alternateCallerId,
             /* @conditional-compile-remove(unsupported-browser) */ environmentInfo: clientState.environmentInfo,
             /* @conditional-compile-remove(unsupported-browser) */ unsupportedBrowserVersionsAllowed: false,
-            /* @conditional-compile-remove(unsupported-browser) */ features: options === null || options === void 0 ? void 0 : options.features,
             /* @conditional-compile-remove(rooms) */ roleHint: options === null || options === void 0 ? void 0 : options.roleHint
         };
         this.emitter.setMaxListeners((_b = options === null || options === void 0 ? void 0 : options.maxListeners) !== null && _b !== void 0 ? _b : 50);
+        this.bindPublicMethods();
+    }
+    bindPublicMethods() {
+        /* @conditional-compile-remove(unsupported-browser) */
+        this.setAllowedUnsupportedBrowser.bind(this);
     }
     onStateChange(handler) {
         this.emitter.on('stateChanged', handler);
@@ -80,7 +84,6 @@ class CallContext {
         /* @conditional-compile-remove(unsupported-browser) */
         const environmentInfo = {
             environmentInfo: this.state.environmentInfo,
-            features: this.state.features,
             unsupportedBrowserVersionOptedIn: this.state.unsupportedBrowserVersionsAllowed
         };
         const newPage = getCallCompositePage(call, latestEndedCall, 
@@ -418,6 +421,7 @@ export class AzureCommunicationCallAdapter {
     /* @conditional-compile-remove(unsupported-browser) */
     allowUnsupportedBrowserVersion() {
         this.context.setAllowedUnsupportedBrowser();
+        this.context.updateClientState(this.callClient.getState());
     }
     startCall(participants, options) {
         var _a, _b;