@azure/communication-react 1.4.3-alpha-202212090014.0 → 1.4.3-alpha-202212130014.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-202212090014.0';
+module.exports = '1.4.3-alpha-202212130014.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-202212090014.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-202212130014.0';\n"]}

package/dist/dist-esm/calling-stateful-client/src/VideoStreamRendererViewDeclarative.js

@@ -22,10 +22,9 @@ export class ProxyVideoStreamRendererView {
     get(target, prop) {
         switch (prop) {
             case 'updateScalingMode': {
-                return (args) => __awaiter(this, void 0, void 0, function* () {
-                    const result = yield target.updateScalingMode(...args);
+                return (...args) => __awaiter(this, void 0, void 0, function* () {
+                    yield target.updateScalingMode(...args);
                     this._context.setRemoteVideoStreamViewScalingMode(this._callId, this._participantId, this._streamId, args[0]);
-                    return result;
                 });
             }
             default:

package/dist/dist-esm/calling-stateful-client/src/VideoStreamRendererViewDeclarative.js.map

@@ -1 +1 @@
-{"version":3,"file":"VideoStreamRendererViewDeclarative.js","sourceRoot":"","sources":["../../../../../calling-stateful-client/src/VideoStreamRendererViewDeclarative.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;;;;;;;;;;AAKlC;;GAEG;AACH,MAAM,OAAO,4BAA4B;IAMvC,YAAY,OAAoB,EAAE,MAAc,EAAE,aAAqB,EAAE,SAAiB;QACxF,IAAI,CAAC,QAAQ,GAAG,OAAO,CAAC;QACxB,IAAI,CAAC,OAAO,GAAG,MAAM,CAAC;QACtB,IAAI,CAAC,cAAc,GAAG,aAAa,CAAC;QACpC,IAAI,CAAC,SAAS,GAAG,SAAS,CAAC;IAC7B,CAAC;IAEM,GAAG,CAA0C,MAA+B,EAAE,IAAO;QAC1F,QAAQ,IAAI,EAAE;YACZ,KAAK,mBAAmB,CAAC,CAAC;gBACxB,OAAO,CAAO,IAA8D,EAAE,EAAE;oBAC9E,MAAM,MAAM,GAAG,MAAM,MAAM,CAAC,iBAAiB,CAAC,GAAG,IAAI,CAAC,CAAC;oBACvD,IAAI,CAAC,QAAQ,CAAC,mCAAmC,CAAC,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC,cAAc,EAAE,IAAI,CAAC,SAAS,EAAE,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC;oBAC9G,OAAO,MAAM,CAAC;gBAChB,CAAC,CAAA,CAAC;aACH;YACD;gBACE,OAAO,OAAO,CAAC,GAAG,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC;SACpC;IACH,CAAC;CACF;AAED;;;GAGG;AACH,MAAM,CAAC,MAAM,kCAAkC,GAAG,CAChD,IAA6B,EAC7B,OAAoB,EACpB,MAAc,EACd,aAAqB,EACrB,QAAgB,EACS,EAAE;IAC3B,MAAM,4BAA4B,GAAG,IAAI,4BAA4B,CAAC,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,QAAQ,CAAC,CAAC;IAChH,OAAO,IAAI,KAAK,CAAC,IAAI,EAAE,4BAA4B,CAA4B,CAAC;AAClF,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { VideoStreamRendererView } from '@azure/communication-calling';\nimport { CallContext } from './CallContext';\n\n/**\n * @private\n */\nexport class ProxyVideoStreamRendererView implements ProxyHandler<VideoStreamRendererView> {\n  private _context: CallContext;\n  private _callId: string;\n  private _participantId: string;\n  private _streamId: number;\n\n  constructor(context: CallContext, callId: string, participantId: string, _streamId: number) {\n    this._context = context;\n    this._callId = callId;\n    this._participantId = participantId;\n    this._streamId = _streamId;\n  }\n\n  public get<P extends keyof VideoStreamRendererView>(target: VideoStreamRendererView, prop: P): any {\n    switch (prop) {\n      case 'updateScalingMode': {\n        return async (args: Parameters<VideoStreamRendererView['updateScalingMode']>) => {\n          const result = await target.updateScalingMode(...args);\n          this._context.setRemoteVideoStreamViewScalingMode(this._callId, this._participantId, this._streamId, args[0]);\n          return result;\n        };\n      }\n      default:\n        return Reflect.get(target, prop);\n    }\n  }\n}\n\n/**\n * Creates a declarative VideoStreamRendererView that is backed by a VideoStreamRendererView from the SDK.\n * Calling methods on this declarative object triggers state updates in the stateful client.\n */\nexport const videoStreamRendererViewDeclaratify = (\n  view: VideoStreamRendererView,\n  context: CallContext,\n  callId: string,\n  participantId: string,\n  streamId: number\n): VideoStreamRendererView => {\n  const proxyVideoStreamRendererView = new ProxyVideoStreamRendererView(context, callId, participantId, streamId);\n  return new Proxy(view, proxyVideoStreamRendererView) as VideoStreamRendererView;\n};\n"]}
+{"version":3,"file":"VideoStreamRendererViewDeclarative.js","sourceRoot":"","sources":["../../../../../calling-stateful-client/src/VideoStreamRendererViewDeclarative.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;;;;;;;;;;AAKlC;;GAEG;AACH,MAAM,OAAO,4BAA4B;IAMvC,YAAY,OAAoB,EAAE,MAAc,EAAE,aAAqB,EAAE,SAAiB;QACxF,IAAI,CAAC,QAAQ,GAAG,OAAO,CAAC;QACxB,IAAI,CAAC,OAAO,GAAG,MAAM,CAAC;QACtB,IAAI,CAAC,cAAc,GAAG,aAAa,CAAC;QACpC,IAAI,CAAC,SAAS,GAAG,SAAS,CAAC;IAC7B,CAAC;IAEM,GAAG,CAA0C,MAA+B,EAAE,IAAO;QAC1F,QAAQ,IAAI,EAAE;YACZ,KAAK,mBAAmB,CAAC,CAAC;gBACxB,OAAO,CAAO,GAAG,IAA8D,EAAE,EAAE;oBACjF,MAAM,MAAM,CAAC,iBAAiB,CAAC,GAAG,IAAI,CAAC,CAAC;oBACxC,IAAI,CAAC,QAAQ,CAAC,mCAAmC,CAAC,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC,cAAc,EAAE,IAAI,CAAC,SAAS,EAAE,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC;gBAChH,CAAC,CAAA,CAAC;aACH;YACD;gBACE,OAAO,OAAO,CAAC,GAAG,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC;SACpC;IACH,CAAC;CACF;AAED;;;GAGG;AACH,MAAM,CAAC,MAAM,kCAAkC,GAAG,CAChD,IAA6B,EAC7B,OAAoB,EACpB,MAAc,EACd,aAAqB,EACrB,QAAgB,EACS,EAAE;IAC3B,MAAM,4BAA4B,GAAG,IAAI,4BAA4B,CAAC,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,QAAQ,CAAC,CAAC;IAChH,OAAO,IAAI,KAAK,CAAC,IAAI,EAAE,4BAA4B,CAA4B,CAAC;AAClF,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { VideoStreamRendererView } from '@azure/communication-calling';\nimport { CallContext } from './CallContext';\n\n/**\n * @private\n */\nexport class ProxyVideoStreamRendererView implements ProxyHandler<VideoStreamRendererView> {\n  private _context: CallContext;\n  private _callId: string;\n  private _participantId: string;\n  private _streamId: number;\n\n  constructor(context: CallContext, callId: string, participantId: string, _streamId: number) {\n    this._context = context;\n    this._callId = callId;\n    this._participantId = participantId;\n    this._streamId = _streamId;\n  }\n\n  public get<P extends keyof VideoStreamRendererView>(target: VideoStreamRendererView, prop: P): any {\n    switch (prop) {\n      case 'updateScalingMode': {\n        return async (...args: Parameters<VideoStreamRendererView['updateScalingMode']>) => {\n          await target.updateScalingMode(...args);\n          this._context.setRemoteVideoStreamViewScalingMode(this._callId, this._participantId, this._streamId, args[0]);\n        };\n      }\n      default:\n        return Reflect.get(target, prop);\n    }\n  }\n}\n\n/**\n * Creates a declarative VideoStreamRendererView that is backed by a VideoStreamRendererView from the SDK.\n * Calling methods on this declarative object triggers state updates in the stateful client.\n */\nexport const videoStreamRendererViewDeclaratify = (\n  view: VideoStreamRendererView,\n  context: CallContext,\n  callId: string,\n  participantId: string,\n  streamId: number\n): VideoStreamRendererView => {\n  const proxyVideoStreamRendererView = new ProxyVideoStreamRendererView(context, callId, participantId, streamId);\n  return new Proxy(view, proxyVideoStreamRendererView) as VideoStreamRendererView;\n};\n"]}

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

@@ -1,5 +1,6 @@
 import React from 'react';
-import { CreateVideoStreamViewResult, OnRenderAvatarCallback, ParticipantState, VideoStreamOptions } from '../types';
+import { CreateVideoStreamViewResult, OnRenderAvatarCallback, ParticipantState, VideoGalleryRemoteParticipant, VideoStreamOptions } from '../types';
+import { VideoGalleryStrings } from './VideoGallery';
 /**
  * A memoized version of VideoTile for rendering remote participants. React.memo is used for a performance
  * boost by memoizing the same rendered component to avoid rerendering a VideoTile when its position in the
@@ -9,20 +10,20 @@ import { CreateVideoStreamViewResult, OnRenderAvatarCallback, ParticipantState,
  */
 export declare const _RemoteVideoTile: React.MemoExoticComponent<(props: {
     userId: string;
+    remoteParticipant: VideoGalleryRemoteParticipant;
     onCreateRemoteStreamView?: ((userId: string, options?: VideoStreamOptions | undefined) => Promise<void | CreateVideoStreamViewResult>) | undefined;
     onDisposeRemoteStreamView?: ((userId: string) => Promise<void>) | undefined;
     isAvailable?: boolean | undefined;
     isReceiving?: boolean | undefined;
-    isMuted?: boolean | undefined;
-    isSpeaking?: boolean | undefined;
     isScreenSharingOn?: boolean | undefined;
     renderElement?: HTMLElement | undefined;
-    displayName?: string | undefined;
     remoteVideoViewOptions?: VideoStreamOptions | undefined;
     onRenderAvatar?: OnRenderAvatarCallback | undefined;
     showMuteIndicator?: boolean | undefined;
     showLabel?: boolean | undefined;
     personaMinSize?: number | undefined;
+    strings?: VideoGalleryStrings | undefined;
     participantState?: ParticipantState | undefined;
+    showRemoteVideoTileContextualMenu?: boolean | undefined;
 }) => JSX.Element>;
 //# sourceMappingURL=RemoteVideoTile.d.ts.map

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

@@ -3,6 +3,7 @@
 import React, { useMemo } from 'react';
 import { StreamMedia } from './StreamMedia';
 import { useRemoteVideoStreamLifecycleMaintainer } from './VideoGallery/useVideoStreamLifecycleMaintainer';
+import { useVideoTileContextualMenuProps } from './VideoGallery/useVideoTileContextualMenuProps';
 import { VideoTile } from './VideoTile';
 /**
  * A memoized version of VideoTile for rendering remote participants. React.memo is used for a performance
@@ -13,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
-    isMuted, isSpeaking, isScreenSharingOn, onCreateRemoteStreamView, onDisposeRemoteStreamView, remoteVideoViewOptions, renderElement, userId, displayName, onRenderAvatar, showMuteIndicator } = props;
+    isScreenSharingOn, onCreateRemoteStreamView, onDisposeRemoteStreamView, remoteVideoViewOptions, renderElement, userId, onRenderAvatar, showMuteIndicator, remoteParticipant, participantState, showRemoteVideoTileContextualMenu = true } = props;
     const remoteVideoStreamProps = useMemo(() => ({
         isMirrored: remoteVideoViewOptions === null || remoteVideoViewOptions === void 0 ? void 0 : remoteVideoViewOptions.isMirrored,
         isScreenSharingOn,
@@ -36,8 +37,20 @@ export const _RemoteVideoTile = React.memo((props) => {
         userId
     ]);
     // Handle creating, destroying and updating the video stream as necessary
-    useRemoteVideoStreamLifecycleMaintainer(remoteVideoStreamProps);
-    const showLoadingIndicator = isAvailable && isReceiving === false && props.participantState !== 'Disconnected';
+    const createVideoStreamResult = useRemoteVideoStreamLifecycleMaintainer(remoteVideoStreamProps);
+    const contextualMenuProps = useVideoTileContextualMenuProps({
+        remoteParticipant,
+        view: createVideoStreamResult === null || createVideoStreamResult === void 0 ? void 0 : createVideoStreamResult.view,
+        /* @conditional-compile-remove(pinned-participants) */
+        strings: Object.assign({}, props.strings)
+    });
+    const videoTileContextualMenuProps = useMemo(() => {
+        if (!showRemoteVideoTileContextualMenu) {
+            return {};
+        }
+        return videoTileContextualMenuPropsTrampoline(contextualMenuProps);
+    }, [contextualMenuProps, showRemoteVideoTileContextualMenu]);
+    const showLoadingIndicator = isAvailable && isReceiving === false && participantState !== 'Disconnected';
     const renderVideoStreamElement = useMemo(() => {
         // Checking if renderElement is well defined or not as calling SDK has a number of video streams limitation which
         // implies that, after their threshold, all streams have no child (blank video)
@@ -47,9 +60,19 @@ export const _RemoteVideoTile = React.memo((props) => {
         }
         return (React.createElement(StreamMedia, { videoStreamElement: renderElement, loadingState: showLoadingIndicator ? 'loading' : 'none' }));
     }, [renderElement, showLoadingIndicator]);
-    return (React.createElement(VideoTile, { key: userId, userId: userId, renderElement: renderVideoStreamElement, displayName: displayName, onRenderPlaceholder: onRenderAvatar, isMuted: isMuted, isSpeaking: isSpeaking, showMuteIndicator: showMuteIndicator, personaMinSize: props.personaMinSize, showLabel: props.showLabel, 
+    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: props.participantState }));
+        participantState: participantState }, videoTileContextualMenuProps)));
 });
+const videoTileContextualMenuPropsTrampoline = (contextualMenuProps) => {
+    if (!contextualMenuProps) {
+        return {};
+    }
+    /* @conditional-compile-remove(pinned-participants) */
+    return {
+        contextualMenu: contextualMenuProps
+    };
+    return {};
+};
 //# sourceMappingURL=RemoteVideoTile.js.map

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":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EACL,uCAAuC,EAExC,MAAM,kDAAkD,CAAC;AAC1D,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAExC;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG,KAAK,CAAC,IAAI,CACxC,CAAC,KAoBA,EAAE,EAAE;IACH,MAAM,EACJ,WAAW,EACX,WAAW,GAAG,IAAI,EAAE,iDAAiD;IACrE,OAAO,EACP,UAAU,EACV,iBAAiB,EACjB,wBAAwB,EACxB,yBAAyB,EACzB,sBAAsB,EACtB,aAAa,EACb,MAAM,EACN,WAAW,EACX,cAAc,EACd,iBAAiB,EAClB,GAAG,KAAK,CAAC;IAEV,MAAM,sBAAsB,GAA8C,OAAO,CAC/E,GAAG,EAAE,CAAC,CAAC;QACL,UAAU,EAAE,sBAAsB,aAAtB,sBAAsB,uBAAtB,sBAAsB,CAAE,UAAU;QAC9C,iBAAiB;QACjB,iBAAiB,EAAE,WAAW;QAC9B,iBAAiB,EAAE,WAAW;QAC9B,wBAAwB;QACxB,yBAAyB;QACzB,mBAAmB,EAAE,MAAM;QAC3B,mBAAmB,EAAE,CAAC,CAAC,aAAa;QACpC,WAAW,EAAE,sBAAsB,aAAtB,sBAAsB,uBAAtB,sBAAsB,CAAE,WAAW;KACjD,CAAC,EACF;QACE,WAAW;QACX,WAAW;QACX,iBAAiB;QACjB,wBAAwB;QACxB,yBAAyB;QACzB,sBAAsB,aAAtB,sBAAsB,uBAAtB,sBAAsB,CAAE,UAAU;QAClC,sBAAsB,aAAtB,sBAAsB,uBAAtB,sBAAsB,CAAE,WAAW;QACnC,aAAa;QACb,MAAM;KACP,CACF,CAAC;IAEF,yEAAyE;IACzE,uCAAuC,CAAC,sBAAsB,CAAC,CAAC;IAEhE,MAAM,oBAAoB,GAAG,WAAW,IAAI,WAAW,KAAK,KAAK,IAAI,KAAK,CAAC,gBAAgB,KAAK,cAAc,CAAC;IAE/G,MAAM,wBAAwB,GAAG,OAAO,CAAC,GAAG,EAAE;QAC5C,iHAAiH;QACjH,+EAA+E;QAC/E,IAAI,CAAC,aAAa,IAAI,CAAC,aAAa,CAAC,iBAAiB,EAAE;YACtD,2EAA2E;YAC3E,OAAO,SAAS,CAAC;SAClB;QAED,OAAO,CACL,oBAAC,WAAW,IAAC,kBAAkB,EAAE,aAAa,EAAE,YAAY,EAAE,oBAAoB,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM,GAAI,CAC5G,CAAC;IACJ,CAAC,EAAE,CAAC,aAAa,EAAE,oBAAoB,CAAC,CAAC,CAAC;IAE1C,OAAO,CACL,oBAAC,SAAS,IACR,GAAG,EAAE,MAAM,EACX,MAAM,EAAE,MAAM,EACd,aAAa,EAAE,wBAAwB,EACvC,WAAW,EAAE,WAAW,EACxB,mBAAmB,EAAE,cAAc,EACnC,OAAO,EAAE,OAAO,EAChB,UAAU,EAAE,UAAU,EACtB,iBAAiB,EAAE,iBAAiB,EACpC,cAAc,EAAE,KAAK,CAAC,cAAc,EACpC,SAAS,EAAE,KAAK,CAAC,SAAS;QAC1B,mDAAmD;QACnD,6CAA6C;QAC7C,gBAAgB,EAAE,KAAK,CAAC,gBAAgB,GACxC,CACH,CAAC;AACJ,CAAC,CACF,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport React, { useMemo } from 'react';\nimport { CreateVideoStreamViewResult, OnRenderAvatarCallback, ParticipantState, VideoStreamOptions } from '../types';\nimport { StreamMedia } from './StreamMedia';\nimport {\n  useRemoteVideoStreamLifecycleMaintainer,\n  RemoteVideoStreamLifecycleMaintainerProps\n} from './VideoGallery/useVideoStreamLifecycleMaintainer';\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    onCreateRemoteStreamView?: (\n      userId: string,\n      options?: VideoStreamOptions\n    ) => Promise<void | CreateVideoStreamViewResult>;\n    onDisposeRemoteStreamView?: (userId: string) => Promise<void>;\n    isAvailable?: boolean;\n    isReceiving?: boolean;\n    isMuted?: boolean;\n    isSpeaking?: boolean;\n    isScreenSharingOn?: boolean; // TODO: Remove this once onDisposeRemoteStreamView no longer disposes of screen share stream\n    renderElement?: HTMLElement;\n    displayName?: string;\n    remoteVideoViewOptions?: VideoStreamOptions;\n    onRenderAvatar?: OnRenderAvatarCallback;\n    showMuteIndicator?: boolean;\n    showLabel?: boolean;\n    personaMinSize?: number;\n    participantState?: ParticipantState;\n  }) => {\n    const {\n      isAvailable,\n      isReceiving = true, // default to true to prevent any breaking change\n      isMuted,\n      isSpeaking,\n      isScreenSharingOn,\n      onCreateRemoteStreamView,\n      onDisposeRemoteStreamView,\n      remoteVideoViewOptions,\n      renderElement,\n      userId,\n      displayName,\n      onRenderAvatar,\n      showMuteIndicator\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    useRemoteVideoStreamLifecycleMaintainer(remoteVideoStreamProps);\n\n    const showLoadingIndicator = isAvailable && isReceiving === false && props.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={displayName}\n        onRenderPlaceholder={onRenderAvatar}\n        isMuted={isMuted}\n        isSpeaking={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={props.participantState}\n      />\n    );\n  }\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  }) => {\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"]}

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

@@ -11,6 +11,8 @@ export interface UnsupportedBrowserVersionStrings {
     secondaryText: string;
     /** String to display in the text for the help link */
     moreHelpLinkText: string;
+    /** String for continue without updating button */
+    continueAnywayButtonText?: string;
 }
 /**
  * props for {@link UnsupportedBrowserVersion} UI
@@ -21,7 +23,9 @@ export interface UnsupportedBrowserVersionProps {
     /** Handler to perform an action when the help link is actioned */
     onTroubleshootingClick?: () => void;
     /** String overrides for the component */
-    strings: UnsupportedBrowserVersionStrings;
+    strings?: UnsupportedBrowserVersionStrings;
+    /** Handler to allow user to continue into the call */
+    onContinueClick?: () => void;
 }
 /**
  * UI to display to the user that the browser version they are using is out of date

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

@@ -9,7 +9,7 @@ import { UnsupportedEnvironment } from './UnsupportedEnvironment';
  * @beta
  */
 export const UnsupportedBrowserVersion = (props) => {
-    const { onTroubleshootingClick, strings } = props;
-    return React.createElement(UnsupportedEnvironment, { onTroubleshootingClick: onTroubleshootingClick, strings: strings });
+    const { onTroubleshootingClick, strings, onContinueClick } = props;
+    return (React.createElement(UnsupportedEnvironment, { onTroubleshootingClick: onTroubleshootingClick, strings: strings, onContinueClick: onContinueClick }));
 };
 //# sourceMappingURL=UnsupportedBrowserVersion.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"UnsupportedBrowserVersion.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/UnsupportedBrowserVersion.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAGlC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AA4BlE;;;;;GAKG;AACH,MAAM,CAAC,MAAM,yBAAyB,GAAG,CAAC,KAAqC,EAAe,EAAE;IAC9F,MAAM,EAAE,sBAAsB,EAAE,OAAO,EAAE,GAAG,KAAK,CAAC;IAClD,OAAO,oBAAC,sBAAsB,IAAC,sBAAsB,EAAE,sBAAsB,EAAE,OAAO,EAAE,OAAO,GAAI,CAAC;AACtG,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { _pxToRem } from '@internal/acs-ui-common';\nimport React from 'react';\nimport { UnsupportedEnvironment } from './UnsupportedEnvironment';\n\n/**\n * Strings for UnsupportedBrowser component\n *\n * @beta\n */\nexport interface UnsupportedBrowserVersionStrings {\n  /** String for the primary text */\n  primaryText: string;\n  /** String for the secondary text */\n  secondaryText: string;\n  /** String to display in the text for the help link */\n  moreHelpLinkText: string;\n}\n\n/**\n * props for {@link UnsupportedBrowserVersion} UI\n *\n * @beta\n */\nexport interface UnsupportedBrowserVersionProps {\n  /** Handler to perform an action when the help link is actioned */\n  onTroubleshootingClick?: () => void;\n  /** String overrides for the component */\n  strings: UnsupportedBrowserVersionStrings;\n}\n\n/**\n * UI to display to the user that the browser version they are using is out of date\n * and not supported by Azure Communications Calling service.\n *\n * @beta\n */\nexport const UnsupportedBrowserVersion = (props: UnsupportedBrowserVersionProps): JSX.Element => {\n  const { onTroubleshootingClick, strings } = props;\n  return <UnsupportedEnvironment onTroubleshootingClick={onTroubleshootingClick} strings={strings} />;\n};\n\"../../../acs-ui-common/src\""]}
+{"version":3,"file":"UnsupportedBrowserVersion.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/UnsupportedBrowserVersion.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAGlC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAgClE;;;;;GAKG;AACH,MAAM,CAAC,MAAM,yBAAyB,GAAG,CAAC,KAAqC,EAAe,EAAE;IAC9F,MAAM,EAAE,sBAAsB,EAAE,OAAO,EAAE,eAAe,EAAE,GAAG,KAAK,CAAC;IACnE,OAAO,CACL,oBAAC,sBAAsB,IACrB,sBAAsB,EAAE,sBAAsB,EAC9C,OAAO,EAAE,OAAO,EAChB,eAAe,EAAE,eAAe,GAChC,CACH,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { _pxToRem } from '@internal/acs-ui-common';\nimport React from 'react';\nimport { UnsupportedEnvironment } from './UnsupportedEnvironment';\n\n/**\n * Strings for UnsupportedBrowser component\n *\n * @beta\n */\nexport interface UnsupportedBrowserVersionStrings {\n  /** String for the primary text */\n  primaryText: string;\n  /** String for the secondary text */\n  secondaryText: string;\n  /** String to display in the text for the help link */\n  moreHelpLinkText: string;\n  /** String for continue without updating button */\n  continueAnywayButtonText?: string;\n}\n\n/**\n * props for {@link UnsupportedBrowserVersion} UI\n *\n * @beta\n */\nexport interface UnsupportedBrowserVersionProps {\n  /** Handler to perform an action when the help link is actioned */\n  onTroubleshootingClick?: () => void;\n  /** String overrides for the component */\n  strings?: UnsupportedBrowserVersionStrings;\n  /** Handler to allow user to continue into the call */\n  onContinueClick?: () => void;\n}\n\n/**\n * UI to display to the user that the browser version they are using is out of date\n * and not supported by Azure Communications Calling service.\n *\n * @beta\n */\nexport const UnsupportedBrowserVersion = (props: UnsupportedBrowserVersionProps): JSX.Element => {\n  const { onTroubleshootingClick, strings, onContinueClick } = props;\n  return (\n    <UnsupportedEnvironment\n      onTroubleshootingClick={onTroubleshootingClick}\n      strings={strings}\n      onContinueClick={onContinueClick}\n    />\n  );\n};\n\"../../../acs-ui-common/src\""]}

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

@@ -9,6 +9,8 @@ export interface UnsupportedEnvironmentStrings {
     secondaryText: string;
     /** String to display in the text for the help link */
     moreHelpLinkText: string;
+    /** String for continue anyway button */
+    continueAnywayButtonText?: string;
 }
 /**
  * props for {@link UnsupportedEnvironment} UI
@@ -16,10 +18,19 @@ export interface UnsupportedEnvironmentStrings {
  * @private
  */
 export interface UnsupportedEnvironmentProps {
-    /** Handler to perform a action when the help link is actioned */
+    /**
+     * Handler to perform a action when the help link is actioned
+     */
     onTroubleshootingClick?: () => void;
-    /** String overrides for the component */
-    strings: UnsupportedEnvironmentStrings;
+    /**
+     * String overrides for the component
+     */
+    strings?: UnsupportedEnvironmentStrings;
+    /**
+     * CallBack for the continue anyay button. Use this as a mechanism to allow users into
+     * a call with a unsupported browser version.
+     */
+    onContinueClick?: () => void;
 }
 /**
  * UI to display to the user that the environment they are using is not supported by calling application.

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

@@ -1,20 +1,23 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
 /* @conditional-compile-remove(unsupported-browser) */
-import { Icon, Link, Stack, Text } from '@fluentui/react';
+import { DefaultButton, Icon, Link, Stack, Text } from '@fluentui/react';
 import React from 'react';
 /* @conditional-compile-remove(unsupported-browser) */
-import { containerStyles, iconStyles, linkTextStyles, mainTextStyles, secondaryTextStyles } from './styles/UnsupportedEnvironment.styles';
+import { useTheme } from '../theming';
+/* @conditional-compile-remove(unsupported-browser) */
+import { containerStyles, continueAnywayButtonStyles, linkTextStyles, mainTextStyles, secondaryTextStyles, testContainerStyles } from './styles/UnsupportedEnvironment.styles';
 /* @conditional-compile-remove(unsupported-browser) */
 const UnsupportedEnvironmentContainer = (props) => {
-    const { onTroubleshootingClick, strings } = props;
-    return (React.createElement(Stack, { styles: containerStyles },
-        React.createElement(Icon, { styles: iconStyles, iconName: "UnsupportedEnvironmentWarning", "data-ui-id": "unsupported-environment-icon" }),
-        React.createElement(Text, { styles: mainTextStyles }, strings.primaryText),
-        React.createElement(Text, { styles: secondaryTextStyles }, strings.secondaryText),
-        onTroubleshootingClick && (React.createElement(Link, { styles: linkTextStyles, onClick: () => {
-                onTroubleshootingClick();
-            }, "data-ui-id": "unsupported-environment-link" }, strings.moreHelpLinkText))));
+    const { onTroubleshootingClick, strings, onContinueClick } = props;
+    const theme = useTheme();
+    return (React.createElement(Stack, { styles: containerStyles, tokens: { childrenGap: '2rem' } },
+        React.createElement(Icon, { iconName: "UnsupportedEnvironmentWarning", "data-ui-id": "unsupported-environment-icon" }),
+        React.createElement(Stack, { styles: testContainerStyles, tokens: { childrenGap: '0.25rem' } },
+            React.createElement(Text, { styles: mainTextStyles }, strings === null || strings === void 0 ? void 0 : strings.primaryText),
+            React.createElement(Text, { styles: secondaryTextStyles }, strings === null || strings === void 0 ? void 0 : strings.secondaryText)),
+        onTroubleshootingClick && (React.createElement(Link, { styles: linkTextStyles, onClick: onTroubleshootingClick, "data-ui-id": "unsupported-environment-link" }, strings === null || strings === void 0 ? void 0 : strings.moreHelpLinkText)),
+        onContinueClick && (React.createElement(DefaultButton, { styles: continueAnywayButtonStyles(theme), onClick: onContinueClick }, strings === null || strings === void 0 ? void 0 : strings.continueAnywayButtonText))));
 };
 /**
  * UI to display to the user that the environment they are using is not supported by calling application.

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

@@ -1 +1 @@
-{"version":3,"file":"UnsupportedEnvironment.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/UnsupportedEnvironment.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,sDAAsD;AACtD,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AAG1D,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,sDAAsD;AACtD,OAAO,EACL,eAAe,EACf,UAAU,EACV,cAAc,EACd,cAAc,EACd,mBAAmB,EACpB,MAAM,wCAAwC,CAAC;AA0BhD,sDAAsD;AACtD,MAAM,+BAA+B,GAAG,CAAC,KAAkC,EAAe,EAAE;IAC1F,MAAM,EAAE,sBAAsB,EAAE,OAAO,EAAE,GAAG,KAAK,CAAC;IAClD,OAAO,CACL,oBAAC,KAAK,IAAC,MAAM,EAAE,eAAe;QAC5B,oBAAC,IAAI,IACH,MAAM,EAAE,UAAU,EAClB,QAAQ,EAAC,+BAA+B,gBAC7B,8BAA8B,GACnC;QACR,oBAAC,IAAI,IAAC,MAAM,EAAE,cAAc,IAAG,OAAO,CAAC,WAAW,CAAQ;QAC1D,oBAAC,IAAI,IAAC,MAAM,EAAE,mBAAmB,IAAG,OAAO,CAAC,aAAa,CAAQ;QAChE,sBAAsB,IAAI,CACzB,oBAAC,IAAI,IACH,MAAM,EAAE,cAAc,EACtB,OAAO,EAAE,GAAG,EAAE;gBACZ,sBAAsB,EAAE,CAAC;YAC3B,CAAC,gBACU,8BAA8B,IAExC,OAAO,CAAC,gBAAgB,CACpB,CACR,CACK,CACT,CAAC;AACJ,CAAC,CAAC;AAEF;;;;GAIG;AACH,MAAM,CAAC,MAAM,sBAAsB,GAAG,CAAC,KAAkC,EAAe,EAAE;IACxF,sDAAsD;IACtD,OAAO,oBAAC,+BAA+B,oBAAK,KAAK,EAAI,CAAC;IACtD,OAAO,yCAAK,CAAC;AACf,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\n/* @conditional-compile-remove(unsupported-browser) */\nimport { Icon, Link, Stack, Text } from '@fluentui/react';\n/* @conditional-compile-remove(unsupported-browser) */\nimport { _pxToRem } from '@internal/acs-ui-common';\nimport React from 'react';\n/* @conditional-compile-remove(unsupported-browser) */\nimport {\n  containerStyles,\n  iconStyles,\n  linkTextStyles,\n  mainTextStyles,\n  secondaryTextStyles\n} from './styles/UnsupportedEnvironment.styles';\n\n/**\n * @private\n */\nexport interface UnsupportedEnvironmentStrings {\n  /** String for the primary text */\n  primaryText: string;\n  /** String for the secondary text */\n  secondaryText: string;\n  /** String to display in the text for the help link */\n  moreHelpLinkText: string;\n}\n\n/**\n * props for {@link UnsupportedEnvironment} UI\n *\n * @private\n */\nexport interface UnsupportedEnvironmentProps {\n  /** Handler to perform a action when the help link is actioned */\n  onTroubleshootingClick?: () => void;\n  /** String overrides for the component */\n  strings: UnsupportedEnvironmentStrings;\n}\n\n/* @conditional-compile-remove(unsupported-browser) */\nconst UnsupportedEnvironmentContainer = (props: UnsupportedEnvironmentProps): JSX.Element => {\n  const { onTroubleshootingClick, strings } = props;\n  return (\n    <Stack styles={containerStyles}>\n      <Icon\n        styles={iconStyles}\n        iconName=\"UnsupportedEnvironmentWarning\"\n        data-ui-id=\"unsupported-environment-icon\"\n      ></Icon>\n      <Text styles={mainTextStyles}>{strings.primaryText}</Text>\n      <Text styles={secondaryTextStyles}>{strings.secondaryText}</Text>\n      {onTroubleshootingClick && (\n        <Link\n          styles={linkTextStyles}\n          onClick={() => {\n            onTroubleshootingClick();\n          }}\n          data-ui-id=\"unsupported-environment-link\"\n        >\n          {strings.moreHelpLinkText}\n        </Link>\n      )}\n    </Stack>\n  );\n};\n\n/**\n * UI to display to the user that the environment they are using is not supported by calling application.\n *\n * @private\n */\nexport const UnsupportedEnvironment = (props: UnsupportedEnvironmentProps): JSX.Element => {\n  /* @conditional-compile-remove(unsupported-browser) */\n  return <UnsupportedEnvironmentContainer {...props} />;\n  return <></>;\n};\n\"../../../acs-ui-common/src\""]}
+{"version":3,"file":"UnsupportedEnvironment.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/UnsupportedEnvironment.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,sDAAsD;AACtD,OAAO,EAAE,aAAa,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AAGzE,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,sDAAsD;AACtD,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,sDAAsD;AACtD,OAAO,EACL,eAAe,EACf,0BAA0B,EAC1B,cAAc,EACd,cAAc,EACd,mBAAmB,EACnB,mBAAmB,EACpB,MAAM,wCAAwC,CAAC;AAqChD,sDAAsD;AACtD,MAAM,+BAA+B,GAAG,CAAC,KAAkC,EAAe,EAAE;IAC1F,MAAM,EAAE,sBAAsB,EAAE,OAAO,EAAE,eAAe,EAAE,GAAG,KAAK,CAAC;IACnE,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,OAAO,CACL,oBAAC,KAAK,IAAC,MAAM,EAAE,eAAe,EAAE,MAAM,EAAE,EAAE,WAAW,EAAE,MAAM,EAAE;QAC7D,oBAAC,IAAI,IAAC,QAAQ,EAAC,+BAA+B,gBAAY,8BAA8B,GAAQ;QAChG,oBAAC,KAAK,IAAC,MAAM,EAAE,mBAAmB,EAAE,MAAM,EAAE,EAAE,WAAW,EAAE,SAAS,EAAE;YACpE,oBAAC,IAAI,IAAC,MAAM,EAAE,cAAc,IAAG,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,WAAW,CAAQ;YAC3D,oBAAC,IAAI,IAAC,MAAM,EAAE,mBAAmB,IAAG,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,aAAa,CAAQ,CAC5D;QACP,sBAAsB,IAAI,CACzB,oBAAC,IAAI,IAAC,MAAM,EAAE,cAAc,EAAE,OAAO,EAAE,sBAAsB,gBAAa,8BAA8B,IACrG,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,gBAAgB,CACrB,CACR;QACA,eAAe,IAAI,CAClB,oBAAC,aAAa,IAAC,MAAM,EAAE,0BAA0B,CAAC,KAAK,CAAC,EAAE,OAAO,EAAE,eAAe,IAC/E,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,wBAAwB,CACpB,CACjB,CACK,CACT,CAAC;AACJ,CAAC,CAAC;AAEF;;;;GAIG;AACH,MAAM,CAAC,MAAM,sBAAsB,GAAG,CAAC,KAAkC,EAAe,EAAE;IACxF,sDAAsD;IACtD,OAAO,oBAAC,+BAA+B,oBAAK,KAAK,EAAI,CAAC;IACtD,OAAO,yCAAK,CAAC;AACf,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\n/* @conditional-compile-remove(unsupported-browser) */\nimport { DefaultButton, Icon, Link, Stack, Text } from '@fluentui/react';\n/* @conditional-compile-remove(unsupported-browser) */\nimport { _pxToRem } from '@internal/acs-ui-common';\nimport React from 'react';\n/* @conditional-compile-remove(unsupported-browser) */\nimport { useTheme } from '../theming';\n/* @conditional-compile-remove(unsupported-browser) */\nimport {\n  containerStyles,\n  continueAnywayButtonStyles,\n  linkTextStyles,\n  mainTextStyles,\n  secondaryTextStyles,\n  testContainerStyles\n} from './styles/UnsupportedEnvironment.styles';\n\n/**\n * @private\n */\nexport interface UnsupportedEnvironmentStrings {\n  /** String for the primary text */\n  primaryText: string;\n  /** String for the secondary text */\n  secondaryText: string;\n  /** String to display in the text for the help link */\n  moreHelpLinkText: string;\n  /** String for continue anyway button */\n  continueAnywayButtonText?: string;\n}\n\n/**\n * props for {@link UnsupportedEnvironment} UI\n *\n * @private\n */\nexport interface UnsupportedEnvironmentProps {\n  /**\n   * Handler to perform a action when the help link is actioned\n   */\n  onTroubleshootingClick?: () => void;\n  /**\n   * String overrides for the component\n   */\n  strings?: UnsupportedEnvironmentStrings;\n  /**\n   * CallBack for the continue anyay button. Use this as a mechanism to allow users into\n   * a call with a unsupported browser version.\n   */\n  onContinueClick?: () => void;\n}\n\n/* @conditional-compile-remove(unsupported-browser) */\nconst UnsupportedEnvironmentContainer = (props: UnsupportedEnvironmentProps): JSX.Element => {\n  const { onTroubleshootingClick, strings, onContinueClick } = props;\n  const theme = useTheme();\n  return (\n    <Stack styles={containerStyles} tokens={{ childrenGap: '2rem' }}>\n      <Icon iconName=\"UnsupportedEnvironmentWarning\" data-ui-id=\"unsupported-environment-icon\"></Icon>\n      <Stack styles={testContainerStyles} tokens={{ childrenGap: '0.25rem' }}>\n        <Text styles={mainTextStyles}>{strings?.primaryText}</Text>\n        <Text styles={secondaryTextStyles}>{strings?.secondaryText}</Text>\n      </Stack>\n      {onTroubleshootingClick && (\n        <Link styles={linkTextStyles} onClick={onTroubleshootingClick} data-ui-id=\"unsupported-environment-link\">\n          {strings?.moreHelpLinkText}\n        </Link>\n      )}\n      {onContinueClick && (\n        <DefaultButton styles={continueAnywayButtonStyles(theme)} onClick={onContinueClick}>\n          {strings?.continueAnywayButtonText}\n        </DefaultButton>\n      )}\n    </Stack>\n  );\n};\n\n/**\n * UI to display to the user that the environment they are using is not supported by calling application.\n *\n * @private\n */\nexport const UnsupportedEnvironment = (props: UnsupportedEnvironmentProps): JSX.Element => {\n  /* @conditional-compile-remove(unsupported-browser) */\n  return <UnsupportedEnvironmentContainer {...props} />;\n  return <></>;\n};\n\"../../../acs-ui-common/src\""]}

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

@@ -17,7 +17,7 @@ export interface LocalVideoStreamLifecycleMaintainerProps extends VideoStreamLif
  *
  * @private
  */
-export declare const useLocalVideoStreamLifecycleMaintainer: (props: LocalVideoStreamLifecycleMaintainerProps) => void;
+export declare const useLocalVideoStreamLifecycleMaintainer: (props: LocalVideoStreamLifecycleMaintainerProps) => CreateVideoStreamViewResult | undefined;
 /** @private */
 export interface RemoteVideoStreamLifecycleMaintainerProps extends VideoStreamLifecycleMaintainerExtendableProps {
     onCreateRemoteStreamView?: (userId: string, options?: VideoStreamOptions) => Promise<void | CreateVideoStreamViewResult>;
@@ -29,5 +29,5 @@ export interface RemoteVideoStreamLifecycleMaintainerProps extends VideoStreamLi
  *
  * @private
  */
-export declare const useRemoteVideoStreamLifecycleMaintainer: (props: RemoteVideoStreamLifecycleMaintainerProps) => void;
+export declare const useRemoteVideoStreamLifecycleMaintainer: (props: RemoteVideoStreamLifecycleMaintainerProps) => CreateVideoStreamViewResult | undefined;
 //# sourceMappingURL=useVideoStreamLifecycleMaintainer.d.ts.map

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

@@ -1,6 +1,6 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
-import { useEffect, useMemo } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 /**
  * Helper hook to maintain the video stream lifecycle. This calls onCreateStreamView and onDisposeStreamView
  * appropriately based on react lifecycle events and prop changes.
@@ -21,9 +21,13 @@ import { useEffect, useMemo } from 'react';
  */
 const useVideoStreamLifecycleMaintainer = (props) => {
     const { isMirrored, isScreenSharingOn, isStreamAvailable, onCreateStreamView, onDisposeStreamView, renderElementExists, scalingMode } = props;
+    const [videoStreamViewResult, setVideoStreamViewResult] = useState();
     useEffect(() => {
+        var _a;
         if (isStreamAvailable && !renderElementExists) {
-            onCreateStreamView === null || onCreateStreamView === void 0 ? void 0 : onCreateStreamView({ isMirrored, scalingMode });
+            (_a = onCreateStreamView === null || onCreateStreamView === void 0 ? void 0 : onCreateStreamView({ isMirrored, scalingMode })) === null || _a === void 0 ? void 0 : _a.then((result) => {
+                result && setVideoStreamViewResult(result);
+            });
         }
         // Always clean up element to make tile up to date and be able to dispose correctly
         return () => {
@@ -54,6 +58,7 @@ const useVideoStreamLifecycleMaintainer = (props) => {
             }
         };
     }, [isScreenSharingOn, onDisposeStreamView]);
+    return videoStreamViewResult;
 };
 /**
  * Extension of {@link useVideoStreamLifecycleMaintainer} specifically for local video streams

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

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

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

@@ -0,0 +1,16 @@
+import { IContextualMenuProps } from '@fluentui/react';
+import { VideoGalleryRemoteParticipant, ViewScalingMode } from '../../types';
+/**
+ * @private
+ */
+export declare const useVideoTileContextualMenuProps: (props: {
+    remoteParticipant: VideoGalleryRemoteParticipant;
+    strings?: {
+        fitRemoteParticipantToFrame?: string | undefined;
+        fillRemoteParticipantFrame?: string | undefined;
+    } | undefined;
+    view?: {
+        updateScalingMode: (scalingMode: ViewScalingMode) => Promise<void>;
+    } | undefined;
+}) => IContextualMenuProps | undefined;
+//# sourceMappingURL=useVideoTileContextualMenuProps.d.ts.map

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

@@ -0,0 +1,52 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+import { useMemo } from 'react';
+/**
+ * @private
+ */
+export const useVideoTileContextualMenuProps = (props) => {
+    var _a;
+    const { view, strings } = props;
+    const scalingMode = useMemo(() => {
+        var _a;
+        /* @conditional-compile-remove(pinned-participants) */
+        return (_a = props.remoteParticipant.videoStream) === null || _a === void 0 ? void 0 : _a.scalingMode;
+        return undefined;
+    }, [
+        /* @conditional-compile-remove(pinned-participants) */
+        (_a = props.remoteParticipant.videoStream) === null || _a === void 0 ? void 0 : _a.scalingMode
+    ]);
+    const contextualMenuProps = useMemo(() => {
+        const items = [];
+        if (scalingMode) {
+            if (scalingMode === 'Crop' && (strings === null || strings === void 0 ? void 0 : strings.fitRemoteParticipantToFrame)) {
+                items.push({
+                    key: 'fitRemoteParticipantToFrame',
+                    text: strings.fitRemoteParticipantToFrame,
+                    iconProps: { iconName: 'VideoTileScaleFit', styles: { root: { lineHeight: '1rem' } } },
+                    onClick: () => {
+                        view === null || view === void 0 ? void 0 : view.updateScalingMode('Fit');
+                    }
+                });
+            }
+            else if (scalingMode === 'Fit' && (strings === null || strings === void 0 ? void 0 : strings.fillRemoteParticipantFrame)) {
+                {
+                    items.push({
+                        key: 'fillRemoteParticipantFrame',
+                        text: strings.fillRemoteParticipantFrame,
+                        iconProps: { iconName: 'VideoTileScaleFill', styles: { root: { lineHeight: '1rem' } } },
+                        onClick: () => {
+                            view === null || view === void 0 ? void 0 : view.updateScalingMode('Crop');
+                        }
+                    });
+                }
+            }
+        }
+        if (items.length === 0) {
+            return undefined;
+        }
+        return { items };
+    }, [scalingMode, strings, view]);
+    return contextualMenuProps;
+};
+//# sourceMappingURL=useVideoTileContextualMenuProps.js.map

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

@@ -0,0 +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"]}

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

@@ -34,6 +34,10 @@ export interface VideoGalleryStrings {
     localVideoSelectedDescription: string;
     /** placeholder text for participants who does not have a display name*/
     displayNamePlaceholder: string;
+    /** Menu text shown in Video Tile contextual menu for setting a remote participants video to fit in frame */
+    fitRemoteParticipantToFrame: string;
+    /** Menu text shown in Video Tile contextual menu for setting a remote participants video to fill the frame */
+    fillRemoteParticipantFrame: string;
 }
 /**
  * @public
@@ -112,6 +116,11 @@ export interface VideoGalleryProps {
      * Camera control information for button to switch cameras.
      */
     localVideoCameraCycleButtonProps?: LocalVideoCameraCycleButtonProps;
+    /**
+     * Whether to show the remote video tile contextual menu.
+     * @defaultValue `true`
+     */
+    showRemoteVideoTileContextualMenu?: boolean;
 }
 /**
  * VideoGallery represents a layout of video tiles for a specific call.

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

@@ -38,7 +38,7 @@ export const VideoGallery = (props) => {
     const ids = useIdentifiers();
     const theme = useTheme();
     const localeStrings = useLocale().strings.videoGallery;
-    const strings = Object.assign(Object.assign({}, localeStrings), props.strings);
+    const strings = useMemo(() => (Object.assign(Object.assign({}, localeStrings), props.strings)), [localeStrings, props.strings]);
     const shouldFloatLocalVideo = !!(layout === 'floatingLocalVideo' && remoteParticipants.length > 0);
     const containerRef = useRef(null);
     const containerWidth = _useContainerWidth(containerRef);
@@ -87,10 +87,21 @@ export const VideoGallery = (props) => {
     ]);
     const defaultOnRenderVideoTile = useCallback((participant, isVideoParticipant) => {
         const remoteVideoStream = participant.videoStream;
-        return (React.createElement(_RemoteVideoTile, Object.assign({ key: participant.userId }, 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, 
+        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 })));
-    }, [onCreateRemoteStreamView, onDisposeRemoteStreamView, remoteVideoViewOptions, onRenderAvatar, showMuteIndicator]);
+            participantState: participant.state, 
+            /* @conditional-compile-remove(pinned-participants) */
+            showRemoteVideoTileContextualMenu: props.showRemoteVideoTileContextualMenu }));
+    }, [
+        onCreateRemoteStreamView,
+        onDisposeRemoteStreamView,
+        remoteVideoViewOptions,
+        onRenderAvatar,
+        showMuteIndicator,
+        strings,
+        /* @conditional-compile-remove(pinned-participants) */
+        props.showRemoteVideoTileContextualMenu
+    ]);
     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 });
     const remoteScreenShareComponent = screenShareParticipant && (React.createElement(RemoteScreenShare, Object.assign({}, screenShareParticipant, { renderElement: (_a = screenShareParticipant.screenShareStream) === null || _a === void 0 ? void 0 : _a.renderElement, onCreateRemoteStreamView: onCreateRemoteStreamView, onDisposeRemoteStreamView: onDisposeRemoteStreamView, isReceiving: (_b = screenShareParticipant.screenShareStream) === null || _b === void 0 ? void 0 : _b.isReceiving })));