@azure/communication-react 1.11.0-alpha-202312070013 → 1.11.0-alpha-202312080012

package/dist/dist-cjs/communication-react/index.js

@@ -176,7 +176,7 @@ const _isValidIdentifier = (identifier) => {
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 // GENERATED FILE. DO NOT EDIT MANUALLY.
-var telemetryVersion = '1.11.0-alpha-202312070013';
+var telemetryVersion = '1.11.0-alpha-202312080012';
 
 // Copyright (c) Microsoft Corporation.
 /**
@@ -226,7 +226,9 @@ const getTelemetryImplementationHint = (telemetryImplementationHint) => {
  * @internal
  */
 const _getApplicationId = (telemetryImplementationHint) => {
-    const highLevelArtifact = 0;
+    // We assume AzureCommunicationLibrary, as we don't currently have any public API to inject otherwise.
+    // This is consistent with the native iOS and Android implementations of telemetry.
+    const highLevelArtifact = 1;
     const specificImplementation = getTelemetryImplementationHint(telemetryImplementationHint);
     const implementationDetails = 0;
     const version = telemetryVersion;
@@ -1983,11 +1985,25 @@ class CallContext$2 {
             }
         });
     }
-    setCallLocalVideoStream(callId, streams) {
+    setCallLocalVideoStream(callId, streamsAdded, streamsRemoved) {
         this.modifyState((draft) => {
             const call = draft.calls[this._callIdHistory.latestCallId(callId)];
             if (call) {
-                call.localVideoStreams = streams;
+                for (const removedStream of streamsRemoved) {
+                    const index = call.localVideoStreams.findIndex((i) => i.mediaStreamType === removedStream.mediaStreamType);
+                    if (index > -1) {
+                        call.localVideoStreams.splice(index, 1);
+                    }
+                }
+                for (const addedStream of streamsAdded) {
+                    const index = call.localVideoStreams.findIndex((i) => i.mediaStreamType === addedStream.mediaStreamType);
+                    if (index > -1) {
+                        call.localVideoStreams[index] = addedStream;
+                    }
+                    else {
+                        call.localVideoStreams.push(addedStream);
+                    }
+                }
             }
         });
     }
@@ -2101,12 +2117,13 @@ class CallContext$2 {
             }
         });
     }
-    setLocalVideoStreamRendererView(callId, view) {
+    setLocalVideoStreamRendererView(callId, localVideoMediaStreamType, view) {
         this.modifyState((draft) => {
             const call = draft.calls[this._callIdHistory.latestCallId(callId)];
             if (call) {
-                if (call.localVideoStreams.length > 0) {
-                    call.localVideoStreams[0].view = view;
+                const localVideoStream = call.localVideoStreams.find((localVideoStream) => localVideoStream.mediaStreamType === localVideoMediaStreamType);
+                if (localVideoStream) {
+                    localVideoStream.view = view;
                 }
             }
         });
@@ -2388,7 +2405,7 @@ class CallContext$2 {
     }
     deleteDeviceManagerUnparentedView(localVideoStream) {
         this.modifyState((draft) => {
-            const foundIndex = draft.deviceManager.unparentedViews.findIndex((stream) => stream.source.id === localVideoStream.source.id && stream.mediaStreamType === localVideoStream.mediaStreamType);
+            const foundIndex = draft.deviceManager.unparentedViews.findIndex((stream) => stream.mediaStreamType === localVideoStream.mediaStreamType);
             if (foundIndex !== -1) {
                 draft.deviceManager.unparentedViews.splice(foundIndex, 1);
             }
@@ -2397,7 +2414,7 @@ class CallContext$2 {
     /* @conditional-compile-remove(video-background-effects) */
     setDeviceManagerUnparentedViewVideoEffects(localVideoStream, videoEffects) {
         this.modifyState((draft) => {
-            const foundIndex = draft.deviceManager.unparentedViews.findIndex((stream) => stream.source.id === localVideoStream.source.id && stream.mediaStreamType === localVideoStream.mediaStreamType);
+            const foundIndex = draft.deviceManager.unparentedViews.findIndex((stream) => stream.mediaStreamType === localVideoStream.mediaStreamType);
             if (foundIndex !== -1) {
                 draft.deviceManager.unparentedViews[foundIndex].videoEffects = videoEffects;
             }
@@ -2996,20 +3013,27 @@ function createViewVideo(context, internalContext, callId, stream, participantId
             throw new Error('unparented createView not implemented yet here');
         }
         const streamType = stream === null || stream === void 0 ? void 0 : stream.mediaStreamType;
-        const streamId = stream.id;
+        const localStreamKey = stream.mediaStreamType;
+        const remoteStreamId = stream.id;
         // we want to check to see if there is a participantId this will tell us whether its a local stream or a remote one.
         const participantKey = streamEventType === 'createViewRemote' && participantId
             ? typeof participantId === 'string'
                 ? participantId
                 : toFlatCommunicationIdentifier(participantId)
             : undefined;
-        const streamLogInfo = { callId, participantKey, streamId, streamType, streamEventType };
+        const streamLogInfo = {
+            callId,
+            participantKey,
+            streamId: remoteStreamId !== null && remoteStreamId !== void 0 ? remoteStreamId : localStreamKey,
+            streamType,
+            streamEventType
+        };
         // make different logging announcement based on whether or not we are starting a local or remote
         _logStreamEvent(EventNames.CREATING_VIEW, streamLogInfo);
         // if we have a participant Id and a stream get the remote info, else get the local render info from state.
         const renderInfo = streamEventType === 'createViewRemote' && participantKey
-            ? internalContext.getRemoteRenderInfoForParticipant(callId, participantKey, streamId)
-            : internalContext.getLocalRenderInfo(callId);
+            ? internalContext.getRemoteRenderInfoForParticipant(callId, participantKey, remoteStreamId)
+            : internalContext.getLocalRenderInfo(callId, localStreamKey);
         if (!renderInfo) {
             _logStreamEvent(EventNames.STREAM_NOT_FOUND, streamLogInfo);
             return;
@@ -3029,18 +3053,18 @@ function createViewVideo(context, internalContext, callId, stream, participantId
         if (renderInfo.status === 'Stopping') {
             if (streamEventType === 'createViewRemote' && participantKey) {
                 _logStreamEvent(EventNames.STREAM_STOPPING, streamLogInfo);
-                internalContext.setRemoteRenderInfo(callId, participantKey, streamId, renderInfo.stream, 'Rendering', renderInfo.renderer);
+                internalContext.setRemoteRenderInfo(callId, participantKey, remoteStreamId, renderInfo.stream, 'Rendering', renderInfo.renderer);
             }
             else if (streamEventType === 'createViewLocal') {
                 _logStreamEvent(EventNames.STREAM_STOPPING, streamLogInfo);
-                internalContext.setLocalRenderInfo(callId, renderInfo.stream, 'Rendering', renderInfo.renderer);
+                internalContext.setLocalRenderInfo(callId, localStreamKey, renderInfo.stream, 'Rendering', renderInfo.renderer);
             }
             return;
         }
         const renderer = new communicationCalling.VideoStreamRenderer(renderInfo.stream);
         streamEventType === 'createViewRemote' && participantKey
-            ? internalContext.setRemoteRenderInfo(callId, participantKey, streamId, renderInfo.stream, 'Rendering', undefined)
-            : internalContext.setLocalRenderInfo(callId, renderInfo.stream, 'Rendering', renderer);
+            ? internalContext.setRemoteRenderInfo(callId, participantKey, remoteStreamId, renderInfo.stream, 'Rendering', undefined)
+            : internalContext.setLocalRenderInfo(callId, localStreamKey, renderInfo.stream, 'Rendering', renderer);
         let view;
         try {
             view = yield renderer.createView(options);
@@ -3048,52 +3072,52 @@ function createViewVideo(context, internalContext, callId, stream, participantId
         catch (e) {
             if (streamEventType === 'createViewRemote' && participantKey) {
                 _logStreamEvent(EventNames.CREATE_STREAM_FAIL, streamLogInfo);
-                internalContext.setRemoteRenderInfo(callId, participantKey, streamId, renderInfo.stream, 'NotRendered', undefined);
+                internalContext.setRemoteRenderInfo(callId, participantKey, remoteStreamId, renderInfo.stream, 'NotRendered', undefined);
             }
             else if (streamEventType === 'createViewLocal') {
                 _logStreamEvent(EventNames.CREATE_STREAM_FAIL, streamLogInfo, e);
-                internalContext.setLocalRenderInfo(callId, renderInfo.stream, 'NotRendered', undefined);
+                internalContext.setLocalRenderInfo(callId, localStreamKey, renderInfo.stream, 'NotRendered', undefined);
             }
             throw e;
         }
         // Since render could take some time, we need to check if the stream is still valid and if we received a signal to
         // stop rendering.
         const refreshedRenderInfo = streamEventType === 'createViewRemote' && participantKey
-            ? internalContext.getRemoteRenderInfoForParticipant(callId, participantKey, streamId)
-            : internalContext.getLocalRenderInfo(callId);
+            ? internalContext.getRemoteRenderInfoForParticipant(callId, participantKey, remoteStreamId)
+            : internalContext.getLocalRenderInfo(callId, localStreamKey);
         if (!refreshedRenderInfo) {
             // RenderInfo was removed. This should not happen unless stream was removed from the call so dispose the renderer
             // and clean up the state.
             _logStreamEvent(EventNames.RENDER_INFO_NOT_FOUND, streamLogInfo);
             renderer.dispose();
             streamEventType === 'createViewRemote' && participantKey
-                ? context.setRemoteVideoStreamRendererView(callId, participantKey, streamId, undefined)
-                : context.setLocalVideoStreamRendererView(callId, undefined);
+                ? context.setRemoteVideoStreamRendererView(callId, participantKey, remoteStreamId, undefined)
+                : context.setLocalVideoStreamRendererView(callId, localStreamKey, undefined);
             return;
         }
         if (refreshedRenderInfo.status === 'Stopping') {
             _logStreamEvent(EventNames.CREATED_STREAM_STOPPING, streamLogInfo);
             renderer.dispose();
             if (streamEventType === 'createViewRemote' && participantKey) {
-                internalContext.setRemoteRenderInfo(callId, participantKey, streamId, refreshedRenderInfo.stream, 'NotRendered', undefined);
-                context.setRemoteVideoStreamRendererView(callId, participantKey, streamId, undefined);
+                internalContext.setRemoteRenderInfo(callId, participantKey, remoteStreamId, refreshedRenderInfo.stream, 'NotRendered', undefined);
+                context.setRemoteVideoStreamRendererView(callId, participantKey, remoteStreamId, undefined);
             }
             else if (streamEventType === 'createViewLocal') {
-                internalContext.setLocalRenderInfo(callId, refreshedRenderInfo.stream, 'NotRendered', undefined);
-                context.setLocalVideoStreamRendererView(callId, undefined);
+                internalContext.setLocalRenderInfo(callId, localStreamKey, refreshedRenderInfo.stream, 'NotRendered', undefined);
+                context.setLocalVideoStreamRendererView(callId, localStreamKey, undefined);
             }
             return;
         }
         // Else the stream still exists and status is not telling us to stop rendering. Complete the render process by
         // updating the state.
         if (streamEventType === 'createViewRemote' && participantKey) {
-            internalContext.setRemoteRenderInfo(callId, participantKey, streamId, refreshedRenderInfo.stream, 'Rendered', renderer);
-            context.setRemoteVideoStreamRendererView(callId, participantKey, streamId, convertFromSDKToDeclarativeVideoStreamRendererView(view));
+            internalContext.setRemoteRenderInfo(callId, participantKey, remoteStreamId, refreshedRenderInfo.stream, 'Rendered', renderer);
+            context.setRemoteVideoStreamRendererView(callId, participantKey, remoteStreamId, convertFromSDKToDeclarativeVideoStreamRendererView(view));
             _logStreamEvent(EventNames.VIEW_RENDER_SUCCEED, streamLogInfo);
         }
         else if (streamEventType === 'createViewLocal') {
-            internalContext.setLocalRenderInfo(callId, refreshedRenderInfo.stream, 'Rendered', renderer);
-            context.setLocalVideoStreamRendererView(callId, convertFromSDKToDeclarativeVideoStreamRendererView(view));
+            internalContext.setLocalRenderInfo(callId, localStreamKey, refreshedRenderInfo.stream, 'Rendered', renderer);
+            context.setLocalVideoStreamRendererView(callId, localStreamKey, convertFromSDKToDeclarativeVideoStreamRendererView(view));
             _logStreamEvent(EventNames.VIEW_RENDER_SUCCEED, streamLogInfo);
         }
         return {
@@ -3177,21 +3201,22 @@ function disposeViewVideo(context, internalContext, callId, stream, participantI
         streamEventType = 'disposeViewUnparented';
     }
     const streamType = stream.mediaStreamType;
-    const streamId = stream.id;
+    const localStreamKey = stream.mediaStreamType;
+    const remoteStreamId = stream.id;
     // we want to check to see if there is a participantId this will tell us whether its a local stream or a remote one.
     const participantKey = streamEventType === 'disposeViewRemote' && participantId
         ? typeof participantId === 'string'
             ? participantId
             : toFlatCommunicationIdentifier(participantId)
         : undefined;
-    const streamLogInfo = { callId, participantKey, streamId, streamType };
+    const streamLogInfo = { callId, participantKey, streamId: remoteStreamId !== null && remoteStreamId !== void 0 ? remoteStreamId : localStreamKey, streamType };
     _logStreamEvent(EventNames.START_DISPOSE_STREAM, streamLogInfo);
     if (streamEventType === 'disposeViewRemote' && participantKey) {
-        context.setRemoteVideoStreamRendererView(callId, participantKey, streamId, undefined);
+        context.setRemoteVideoStreamRendererView(callId, participantKey, remoteStreamId, undefined);
     }
     const renderInfo = streamEventType === 'disposeViewRemote' && participantKey
-        ? internalContext.getRemoteRenderInfoForParticipant(callId, participantKey, streamId)
-        : internalContext.getLocalRenderInfo(callId);
+        ? internalContext.getRemoteRenderInfoForParticipant(callId, participantKey, remoteStreamId)
+        : internalContext.getLocalRenderInfo(callId, localStreamKey);
     if (!renderInfo) {
         _logStreamEvent(EventNames.DISPOSE_INFO_NOT_FOUND, streamLogInfo);
         return;
@@ -3214,8 +3239,8 @@ function disposeViewVideo(context, internalContext, callId, stream, participantI
     if (renderInfo.status === 'Rendering') {
         _logStreamEvent(EventNames.STREAM_STOPPING, streamLogInfo);
         streamEventType === 'disposeViewRemote' && participantKey
-            ? internalContext.setRemoteRenderInfo(callId, participantKey, streamId, renderInfo.stream, 'Stopping', undefined)
-            : internalContext.setLocalRenderInfo(callId, renderInfo.stream, 'Stopping', renderInfo.renderer);
+            ? internalContext.setRemoteRenderInfo(callId, participantKey, remoteStreamId, renderInfo.stream, 'Stopping', undefined)
+            : internalContext.setLocalRenderInfo(callId, localStreamKey, renderInfo.stream, 'Stopping', renderInfo.renderer);
         return;
     }
     if (renderInfo.renderer) {
@@ -3223,11 +3248,11 @@ function disposeViewVideo(context, internalContext, callId, stream, participantI
         renderInfo.renderer.dispose();
         // Else the state must be in the "Rendered" state, so we can dispose the renderer and clean up the state.
         if (streamEventType === 'disposeViewRemote' && participantKey) {
-            internalContext.setRemoteRenderInfo(callId, participantKey, streamId, renderInfo.stream, 'NotRendered', undefined);
+            internalContext.setRemoteRenderInfo(callId, participantKey, remoteStreamId, renderInfo.stream, 'NotRendered', undefined);
         }
         else if (streamEventType === 'disposeViewLocal') {
-            internalContext.setLocalRenderInfo(callId, renderInfo.stream, 'NotRendered', undefined);
-            context.setLocalVideoStreamRendererView(callId, undefined);
+            internalContext.setLocalRenderInfo(callId, localStreamKey, renderInfo.stream, 'NotRendered', undefined);
+            context.setLocalVideoStreamRendererView(callId, localStreamKey, undefined);
         }
     }
     else {
@@ -3302,9 +3327,9 @@ function disposeView(context, internalContext, callId, participantId, stream) {
  * Only stops videos that are tied to a Call.
  */
 function disposeAllViewsFromCall(context, internalContext, callId) {
-    const callStreams = internalContext.getRemoteRenderInfoForCall(callId);
-    if (callStreams) {
-        for (const [participantKey, participantStreams] of callStreams.entries()) {
+    const remoteStreams = internalContext.getRemoteRenderInfoForCall(callId);
+    if (remoteStreams) {
+        for (const [participantKey, participantStreams] of remoteStreams.entries()) {
             for (const [_, remoteStreamAndRenderer] of participantStreams.entries()) {
                 // We don't want to accept SDK stream as parameter but we also don't cache the declarative stream so we have to
                 // convert the SDK stream to declarative stream which is not pretty so this could use some further refactoring.
@@ -3312,11 +3337,15 @@ function disposeAllViewsFromCall(context, internalContext, callId) {
             }
         }
     }
-    const localStreamAndRenderer = internalContext.getLocalRenderInfo(callId);
-    if (localStreamAndRenderer && localStreamAndRenderer.renderer) {
-        // We don't want to accept SDK stream as parameter but we also don't cache the declarative stream so we have to
-        // convert the SDK stream to declarative stream which is not pretty so this could use some further refactoring.
-        disposeView(context, internalContext, callId, undefined, convertSdkLocalStreamToDeclarativeLocalStream(localStreamAndRenderer.stream));
+    const localStreams = internalContext.getLocalRenderInfosForCall(callId);
+    if (localStreams) {
+        for (const localStreamAndRenderer of localStreams.values()) {
+            if (localStreamAndRenderer && localStreamAndRenderer.renderer) {
+                // We don't want to accept SDK stream as parameter but we also don't cache the declarative stream so we have to
+                // convert the SDK stream to declarative stream which is not pretty so this could use some further refactoring.
+                disposeView(context, internalContext, callId, undefined, convertSdkLocalStreamToDeclarativeLocalStream(localStreamAndRenderer.stream));
+            }
+        }
     }
 }
 /**
@@ -3650,9 +3679,8 @@ class CallSubscriber {
             this._call.feature(communicationCalling.Features.DominantSpeakers).on('dominantSpeakersChanged', this.dominantSpeakersChanged);
             /* @conditional-compile-remove(total-participant-count) */
             this._call.on('totalParticipantCountChanged', this.totalParticipantCountChangedHandler);
-            // At time of writing only one LocalVideoStream is supported by SDK.
-            if (this._call.localVideoStreams.length > 0) {
-                this._internalContext.setLocalRenderInfo(this._callIdRef.callId, this._call.localVideoStreams[0], 'NotRendered', undefined);
+            for (const localVideoStream of this._call.localVideoStreams) {
+                this._internalContext.setLocalRenderInfo(this._callIdRef.callId, localVideoStream.mediaStreamType, localVideoStream, 'NotRendered', undefined);
             }
             if (this._call.remoteParticipants.length > 0) {
                 this._call.remoteParticipants.forEach((participant) => {
@@ -3681,10 +3709,11 @@ class CallSubscriber {
             this._participantSubscribers.clear();
             // If we are unsubscribing that means we no longer want to display any video for this call (callEnded or callAgent
             // disposed) and we should not be updating it any more. So if video is rendering we stop rendering.
-            if (this._call.localVideoStreams && this._call.localVideoStreams[0]) {
-                disposeView(this._context, this._internalContext, this._callIdRef.callId, undefined, convertSdkLocalStreamToDeclarativeLocalStream(this._call.localVideoStreams[0]));
+            for (const localVideoStream of this._call.localVideoStreams) {
+                const mediaStreamType = localVideoStream.mediaStreamType;
+                disposeView(this._context, this._internalContext, this._callIdRef.callId, undefined, convertSdkLocalStreamToDeclarativeLocalStream(localVideoStream));
+                this._internalContext.deleteLocalRenderInfo(this._callIdRef.callId, mediaStreamType);
             }
-            this._internalContext.deleteLocalRenderInfo(this._callIdRef.callId);
             this._diagnosticsSubscriber.unsubscribe();
             this._recordingSubscriber.unsubscribe();
             this._transcriptionSubscriber.unsubscribe();
@@ -3748,49 +3777,27 @@ class CallSubscriber {
         };
         this.localVideoStreamsUpdated = (event) => {
             var _a, _b;
-            // Exclude screenshare streams from added local video streams
-            const addedLocalVideoStreamsExcludingScreenShare = event.added.filter((localVideoStream) => localVideoStream.mediaStreamType !== 'ScreenSharing');
-            // At time of writing only one LocalVideoStream is supported by SDK.
-            if (addedLocalVideoStreamsExcludingScreenShare.length > 0) {
+            for (const localVideoStream of event.added) {
+                const mediaStreamType = localVideoStream.mediaStreamType;
                 // IMPORTANT: The internalContext should be set before context. This is done to ensure that the internal context
                 // has the required data when component re-renders due to external state changes.
-                this._internalContext.setLocalRenderInfo(this._callIdRef.callId, addedLocalVideoStreamsExcludingScreenShare[0], 'NotRendered', undefined);
-                const currentLocalVideoStreams = this._call.localVideoStreams;
-                const localVideoStreams = addedLocalVideoStreamsExcludingScreenShare
-                    .concat(currentLocalVideoStreams)
-                    .map((stream) => convertSdkLocalStreamToDeclarativeLocalStream(stream));
-                this._context.setCallLocalVideoStream(this._callIdRef.callId, localVideoStreams);
-                /* @conditional-compile-remove(video-background-effects) */
-                {
-                    // Subscribe to video effect changes
-                    const localVideoStreamKey = event.added[0].source.id;
-                    (_a = this._localVideoStreamVideoEffectsSubscribers.get(localVideoStreamKey)) === null || _a === void 0 ? void 0 : _a.unsubscribe();
-                    this._localVideoStreamVideoEffectsSubscribers.set(localVideoStreamKey, new LocalVideoStreamVideoEffectsSubscriber({
-                        parent: this._callIdRef,
-                        context: this._context,
-                        localVideoStream: this._call.localVideoStreams[0],
-                        localVideoStreamEffectsAPI: this._call.localVideoStreams[0].feature(communicationCalling.Features.VideoEffects)
-                    }));
-                }
+                this._internalContext.setLocalRenderInfo(this._callIdRef.callId, mediaStreamType, localVideoStream, 'NotRendered', undefined);
+                // Subscribe to video effect changes
+                (_a = this._localVideoStreamVideoEffectsSubscribers.get(mediaStreamType)) === null || _a === void 0 ? void 0 : _a.unsubscribe();
+                this._localVideoStreamVideoEffectsSubscribers.set(mediaStreamType, new LocalVideoStreamVideoEffectsSubscriber({
+                    parent: this._callIdRef,
+                    context: this._context,
+                    localVideoStream: localVideoStream,
+                    localVideoStreamEffectsAPI: localVideoStream.feature(communicationCalling.Features.VideoEffects)
+                }));
             }
-            if (event.removed.length > 0) {
-                /* @conditional-compile-remove(video-background-effects) */
-                {
-                    const localVideoStreamKey = event.removed[0].source.id;
-                    (_b = this._localVideoStreamVideoEffectsSubscribers.get(localVideoStreamKey)) === null || _b === void 0 ? void 0 : _b.unsubscribe();
-                }
-                disposeView(this._context, this._internalContext, this._callIdRef.callId, undefined, convertSdkLocalStreamToDeclarativeLocalStream(event.removed[0]));
-                /**
-                 * This check is to make sure that we are not deleting the local render info for the local video stream if there is one.
-                 *
-                 * TODO: we need to make sure the we are supporting the local screenshare stream that is now being tracked. This is a stop gap solution.
-                 */
-                if (event.removed[0].mediaStreamType === 'ScreenSharing') {
-                    return;
-                }
-                this._internalContext.deleteLocalRenderInfo(this._callIdRef.callId);
-                this._context.setCallLocalVideoStream(this._callIdRef.callId, []);
+            for (const localVideoStream of event.removed) {
+                const mediaStreamType = localVideoStream.mediaStreamType;
+                (_b = this._localVideoStreamVideoEffectsSubscribers.get(mediaStreamType)) === null || _b === void 0 ? void 0 : _b.unsubscribe();
+                disposeView(this._context, this._internalContext, this._callIdRef.callId, undefined, convertSdkLocalStreamToDeclarativeLocalStream(localVideoStream));
+                this._internalContext.deleteLocalRenderInfo(this._callIdRef.callId, mediaStreamType);
             }
+            this._context.setCallLocalVideoStream(this._callIdRef.callId, event.added.map(convertSdkLocalStreamToDeclarativeLocalStream), event.removed.map(convertSdkLocalStreamToDeclarativeLocalStream));
         };
         this.dominantSpeakersChanged = () => {
             const dominantSpeakers = this._call.feature(communicationCalling.Features.DominantSpeakers).dominantSpeakers;
@@ -4412,10 +4419,9 @@ class InternalCallContext {
     constructor() {
         // <CallId, <ParticipantKey, <StreamId, RemoteRenderInfo>>
         this._remoteRenderInfos = new Map();
-        // <CallId, LocalRenderInfo>.
+        // <CallId, <MediaStreamType, LocalRenderInfo>>.
         this._localRenderInfos = new Map();
         // Used for keeping track of rendered LocalVideoStreams that are not part of a Call.
-        // The key is the stream ID. We assume each stream ID to only have one owning render info
         this._unparentedRenderInfos = new Map();
         this._callIdHistory = new CallIdHistory();
         // Used for keeping track of video effects subscribers that are not part of a Call.
@@ -4477,37 +4483,53 @@ class InternalCallContext {
         }
         participantRenderInfos.delete(streamId);
     }
-    setLocalRenderInfo(callId, stream, status, renderer) {
-        this._localRenderInfos.set(this._callIdHistory.latestCallId(callId), { stream, status, renderer });
+    setLocalRenderInfo(callId, streamKey, stream, status, renderer) {
+        let localRenderInfosForCall = this._localRenderInfos.get(this._callIdHistory.latestCallId(callId));
+        if (!localRenderInfosForCall) {
+            localRenderInfosForCall = new Map();
+            this._localRenderInfos.set(this._callIdHistory.latestCallId(callId), localRenderInfosForCall);
+        }
+        localRenderInfosForCall.set(streamKey, { stream, status, renderer });
     }
-    getLocalRenderInfo(callId) {
+    getLocalRenderInfosForCall(callId) {
         return this._localRenderInfos.get(this._callIdHistory.latestCallId(callId));
     }
-    deleteLocalRenderInfo(callId) {
-        this._localRenderInfos.delete(this._callIdHistory.latestCallId(callId));
+    getLocalRenderInfo(callId, streamKey) {
+        const localRenderInfosForCall = this._localRenderInfos.get(this._callIdHistory.latestCallId(callId));
+        if (!localRenderInfosForCall) {
+            return undefined;
+        }
+        return localRenderInfosForCall.get(streamKey);
+    }
+    deleteLocalRenderInfo(callId, streamKey) {
+        const localRenderInfoForCall = this._localRenderInfos.get(this._callIdHistory.latestCallId(callId));
+        if (!localRenderInfoForCall) {
+            return;
+        }
+        localRenderInfoForCall.delete(streamKey);
     }
     getUnparentedRenderInfo(localVideoStream) {
-        return this._unparentedRenderInfos.get(localVideoStream.source.id);
+        return this._unparentedRenderInfos.get(localVideoStream.mediaStreamType);
     }
     getUnparentedRenderInfos() {
         return [...this._unparentedRenderInfos].map(([, renderInfo]) => renderInfo.stream);
     }
     setUnparentedRenderInfo(statefulStream, stream, status, renderer) {
-        this._unparentedRenderInfos.set(statefulStream.source.id, { stream, status, renderer });
+        this._unparentedRenderInfos.set(statefulStream.mediaStreamType, { stream, status, renderer });
     }
     deleteUnparentedRenderInfo(localVideoStream) {
         var _a;
         /* @conditional-compile-remove(video-background-effects) */
-        (_a = this._unparentedViewVideoEffectsSubscriber.get(localVideoStream.source.id)) === null || _a === void 0 ? void 0 : _a.unsubscribe();
-        this._unparentedRenderInfos.delete(localVideoStream.source.id);
+        (_a = this._unparentedViewVideoEffectsSubscriber.get(localVideoStream.mediaStreamType)) === null || _a === void 0 ? void 0 : _a.unsubscribe();
+        this._unparentedRenderInfos.delete(localVideoStream.mediaStreamType);
     }
     subscribeToUnparentedViewVideoEffects(localVideoStream, callContext) {
         var _a;
         /* @conditional-compile-remove(video-background-effects) */
         {
             // Ensure we aren't setting multiple subscriptions
-            (_a = this._unparentedViewVideoEffectsSubscriber.get(localVideoStream.source.id)) === null || _a === void 0 ? void 0 : _a.unsubscribe();
-            this._unparentedViewVideoEffectsSubscriber.set(localVideoStream.source.id, new LocalVideoStreamVideoEffectsSubscriber({
+            (_a = this._unparentedViewVideoEffectsSubscriber.get(localVideoStream.mediaStreamType)) === null || _a === void 0 ? void 0 : _a.unsubscribe();
+            this._unparentedViewVideoEffectsSubscriber.set(localVideoStream.mediaStreamType, new LocalVideoStreamVideoEffectsSubscriber({
                 parent: 'unparented',
                 context: callContext,
                 localVideoStream: localVideoStream,
@@ -8936,6 +8958,20 @@ const useChatMessageStyles = reactComponents.makeStyles({
         }, '& msft-mention': {
             color: reactComponents.tokens.colorStatusWarningBackground3,
             fontWeight: reactComponents.tokens.fontWeightSemibold
+        }, '& img[src=""]': {
+            display: 'block',
+            position: 'relative',
+            marginBottom: '5px'
+        }, '& img[src=""]:after': {
+            backgroundColor: reactComponents.tokens.colorNeutralBackground1Selected,
+            content: `url("data:image/gif;base64,R0lGODlhAQABAAAAACw=")`,
+            backgroundSize: 'center',
+            position: 'absolute',
+            width: '100%',
+            height: '100%',
+            top: '0',
+            left: '0',
+            display: 'block'
         }, '& img': {
             maxWidth: '100% !important',
             height: 'auto !important'
@@ -9438,7 +9474,7 @@ const mapBorderRadiusTokens = (effects) => {
  */
 const createV9Theme = (themeV8, baseThemeV9) => {
     const baseTheme = baseThemeV9 !== null && baseThemeV9 !== void 0 ? baseThemeV9 : reactComponents.webLightTheme;
-    return Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, baseTheme), mapAliasColors(themeV8.palette, themeV8.isInverted)), mapShadowTokens(themeV8.effects)), mapBorderRadiusTokens(themeV8.effects)), { colorBrandBackground2: themeV8.palette.themeLight, colorBrandBackground2Hover: themeV8.palette.themeLight, colorBrandBackground2Pressed: themeV8.palette.themeLight, colorStatusWarningBackground3: '#D83B01', errorText: themeV8.semanticColors.errorText, colorNeutralStroke1Selected: themeV8.palette.neutralQuaternary, colorNeutralForeground2: themeV8.palette.neutralSecondary, colorBrandForegroundLink: themeV8.palette.themePrimary, colorBrandForegroundLinkHover: themeV8.palette.themeDarker, 
+    return Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, baseTheme), mapAliasColors(themeV8.palette, themeV8.isInverted)), mapShadowTokens(themeV8.effects)), mapBorderRadiusTokens(themeV8.effects)), { colorBrandBackground2: themeV8.palette.themeLight, colorBrandBackground2Hover: themeV8.palette.themeLight, colorBrandBackground2Pressed: themeV8.palette.themeLight, colorStatusWarningBackground3: '#D83B01', errorText: themeV8.semanticColors.errorText, colorNeutralStroke1Selected: themeV8.palette.neutralQuaternary, colorNeutralForeground2: themeV8.palette.neutralSecondary, colorBrandForegroundLink: themeV8.palette.themePrimary, colorBrandForegroundLinkHover: themeV8.palette.themeDarker, colorNeutralBackground1Selected: themeV8.palette.neutralQuaternaryAlt, 
         // Fix for an issue with black borders for iOS that are added with 'after' selector
         colorStrokeFocus2: 'transparent' });
 };
@@ -13210,12 +13246,12 @@ const videoGalleryOuterDivStyle = react.mergeStyles({ position: 'relative', widt
 /**
  * @private
  */
-const localVideoCameraCycleButtonStyles = (theme) => {
+const localVideoCameraCycleButtonStyles = (theme, size) => {
     return {
         root: {
             position: 'absolute',
-            width: _pxToRem(32),
-            height: _pxToRem(32),
+            width: size === 'large' ? _pxToRem(40) : _pxToRem(32),
+            height: size === 'large' ? _pxToRem(40) : _pxToRem(32),
             right: '0rem',
             top: '0rem',
             color: '#FFFFFF',
@@ -13252,9 +13288,9 @@ const localVideoTileContainerStyles = {
  * @internal
  */
 const LocalVideoCameraCycleButton = (props) => {
-    const { cameras, selectedCamera, onSelectCamera, label, ariaDescription } = props;
+    const { cameras, selectedCamera, onSelectCamera, label, ariaDescription, size } = props;
     const theme = react.useTheme();
-    return (React__default["default"].createElement(react.IconButton, { "data-ui-id": 'local-camera-switcher-button', styles: localVideoCameraCycleButtonStyles(theme), iconProps: { iconName: 'LocalCameraSwitch' }, ariaLabel: label, ariaDescription: ariaDescription, "aria-live": 'polite', onClick: () => {
+    return (React__default["default"].createElement(react.IconButton, { "data-ui-id": 'local-camera-switcher-button', styles: localVideoCameraCycleButtonStyles(theme, size), iconProps: { iconName: 'LocalCameraSwitch' }, ariaLabel: label, ariaDescription: ariaDescription, "aria-live": 'polite', onClick: () => {
             if (cameras && cameras.length > 1 && selectedCamera !== undefined) {
                 const index = cameras.findIndex((camera) => selectedCamera.id === camera.id);
                 const newCamera = cameras[(index + 1) % cameras.length];
@@ -15614,8 +15650,8 @@ const VideoGallery = (props) => {
         : undefined;
     /* @conditional-compile-remove(pinned-participants) */
     const drawerMenuHostId = reactHooks.useId('drawerMenuHost', drawerMenuHostIdFromProp);
-    const localTileNotInGrid = !!((layout === 'floatingLocalVideo' || /* @conditional-compile-remove(gallery-layouts) */ layout === 'speaker') &&
-        remoteParticipants.length > 0);
+    const localTileNotInGrid = (layout === 'floatingLocalVideo' || /* @conditional-compile-remove(gallery-layouts) */ layout === 'speaker') &&
+        remoteParticipants.length > 0;
     const containerRef = React.useRef(null);
     const containerWidth = _useContainerWidth(containerRef);
     const containerHeight = _useContainerHeight(containerRef);
@@ -15645,6 +15681,9 @@ const VideoGallery = (props) => {
     /* @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;
+    const showLocalVideoTileLabel = !((localTileNotInGrid && isNarrow) ||
+        /*@conditional-compile-remove(click-to-call) */ /* @conditional-compile-remove(rooms) */ localVideoTileSize ===
+            '9:16') || /* @conditional-compile-remove(gallery-layouts) */ layout === 'default';
     /**
      * Utility function for memoized rendering of LocalParticipant.
      */
@@ -15666,9 +15705,7 @@ const VideoGallery = (props) => {
             return layout === 'default' ? strings.localVideoLabel : isNarrow ? '' : strings.localVideoLabel;
         };
         return (React__default["default"].createElement(react.Stack, { styles: localVideoTileContainerStyles, key: "local-video-tile-key", tabIndex: 0, "aria-label": strings.localVideoMovementLabel, role: 'dialog' },
-            React__default["default"].createElement(_LocalVideoTile, { userId: localParticipant.userId, onCreateLocalStreamView: onCreateLocalStreamView, onDisposeLocalStreamView: onDisposeLocalStreamView, isAvailable: (_a = localParticipant === null || localParticipant === void 0 ? void 0 : localParticipant.videoStream) === null || _a === void 0 ? void 0 : _a.isAvailable, isMuted: localParticipant.isMuted, renderElement: (_b = localParticipant === null || localParticipant === void 0 ? void 0 : localParticipant.videoStream) === null || _b === void 0 ? void 0 : _b.renderElement, displayName: showDisplayNameTrampoline(), initialsName: initialsName, localVideoViewOptions: localVideoViewOptions, onRenderAvatar: onRenderAvatar, showLabel: !((localTileNotInGrid && isNarrow) ||
-                    /*@conditional-compile-remove(click-to-call) */ /* @conditional-compile-remove(rooms) */ localVideoTileSize ===
-                        '9:16') || /* @conditional-compile-remove(gallery-layouts) */ layout === 'default', showMuteIndicator: showMuteIndicator, showCameraSwitcherInLocalPreview: showCameraSwitcherInLocalPreview, localVideoCameraCycleButtonProps: localVideoCameraCycleButtonProps, localVideoCameraSwitcherLabel: strings.localVideoCameraSwitcherLabel, localVideoSelectedDescription: strings.localVideoSelectedDescription, styles: localVideoTileStyles, 
+            React__default["default"].createElement(_LocalVideoTile, { userId: localParticipant.userId, onCreateLocalStreamView: onCreateLocalStreamView, onDisposeLocalStreamView: onDisposeLocalStreamView, isAvailable: (_a = localParticipant === null || localParticipant === void 0 ? void 0 : localParticipant.videoStream) === null || _a === void 0 ? void 0 : _a.isAvailable, isMuted: localParticipant.isMuted, renderElement: (_b = localParticipant === null || localParticipant === void 0 ? void 0 : localParticipant.videoStream) === null || _b === void 0 ? void 0 : _b.renderElement, displayName: showDisplayNameTrampoline(), initialsName: initialsName, localVideoViewOptions: localVideoViewOptions, onRenderAvatar: onRenderAvatar, showLabel: showLocalVideoTileLabel, showMuteIndicator: showMuteIndicator, showCameraSwitcherInLocalPreview: showCameraSwitcherInLocalPreview, localVideoCameraCycleButtonProps: localVideoCameraCycleButtonProps, localVideoCameraSwitcherLabel: strings.localVideoCameraSwitcherLabel, localVideoSelectedDescription: strings.localVideoSelectedDescription, styles: localVideoTileStyles, 
                 /* @conditional-compile-remove(raise-hand) */
                 raisedHand: localParticipant.raisedHand })));
     }, [
@@ -15692,7 +15729,8 @@ const VideoGallery = (props) => {
         /*@conditional-compile-remove(click-to-call) */
         localVideoTileSize,
         /* @conditional-compile-remove(gallery-layouts) */
-        layout
+        layout,
+        showLocalVideoTileLabel
     ]);
     /* @conditional-compile-remove(pinned-participants) */
     const onPinParticipant = React.useCallback((userId) => {
@@ -23212,12 +23250,16 @@ const REMOVED_FROM_CALL_SUB_CODES = [5000, 5300, REMOTE_PSTN_USER_HUNG_UP];
 /* @conditional-compile-remove(calling-sounds) */
 const CALL_REJECTED_CODE$1 = 603;
 /* @conditional-compile-remove(rooms) */
+/** @private */
 const ROOM_NOT_FOUND_SUB_CODE = 5732;
 /* @conditional-compile-remove(rooms) */
+/** @private */
 const ROOM_NOT_VALID_SUB_CODE = 5829;
 /* @conditional-compile-remove(rooms) */
+/** @private */
 const NOT_INVITED_TO_ROOM_SUB_CODE = 5828;
 /* @conditional-compile-remove(rooms) */
+/** @private */
 const INVITE_TO_ROOM_REMOVED_SUB_CODE = 5317;
 /**
  * @private
@@ -29499,6 +29541,12 @@ const moreDetailsStyle = (palette, isVideoReady) => ({
     color: isVideoReady ? 'white' : palette.themePrimary,
     textAlign: 'center'
 });
+/**
+ * @private
+ */
+const localCameraSwitcherContainerStyles = {
+    root: { position: 'absolute', top: '0rem', right: '0rem' }
+};
 
 // Copyright (c) Microsoft Corporation.
 /**
@@ -29508,9 +29556,13 @@ const LobbyTile = (props) => {
     var _a;
     const videoStream = props.localParticipantVideoStream;
     const isVideoReady = (_a = videoStream === null || videoStream === void 0 ? void 0 : videoStream.isAvailable) !== null && _a !== void 0 ? _a : false;
+    const cameraSwitcherCameras = useSelector$1(localVideoCameraCycleButtonSelector);
+    const cameraSwitcherCallback = useHandlers();
     const palette = useTheme().palette;
     const handlers = useHandlers();
     return (React__default["default"].createElement(ExpandedLocalVideoTile, Object.assign({ localParticipantVideoStream: props.localParticipantVideoStream, overlayContent: props.overlayProps ? (React__default["default"].createElement(react.Stack, { verticalFill: true, horizontalAlign: "center", verticalAlign: "center", className: react.mergeStyles(overlayContainerStyle), "aria-atomic": true },
+            props.showLocalVideoCameraCycleButton && isVideoReady && (React__default["default"].createElement(react.Stack.Item, { styles: localCameraSwitcherContainerStyles },
+                React__default["default"].createElement(LocalVideoCameraCycleButton, Object.assign({}, cameraSwitcherCallback, cameraSwitcherCameras, { size: 'large' })))),
             React__default["default"].createElement(react.Stack.Item, { className: react.mergeStyles(titleStyle(palette, isVideoReady)) }, props.overlayProps.overlayIcon),
             React__default["default"].createElement(react.Text, { className: react.mergeStyles(titleStyle(palette, isVideoReady)), "aria-live": "assertive", "data-ui-id": "lobbyScreenTitle" }, props.overlayProps.title),
             props.overlayProps.moreDetails && (React__default["default"].createElement(react.Text, { className: react.mergeStyles(moreDetailsStyle(palette, isVideoReady)), "aria-live": "assertive" }, props.overlayProps.moreDetails)))) : undefined }, handlers)));
@@ -29536,7 +29588,7 @@ const LobbyPage = (props) => {
     return (React__default["default"].createElement(CallArrangement, { complianceBannerProps: { strings }, errorBarProps: ((_d = props.options) === null || _d === void 0 ? void 0 : _d.errorBar) !== false && errorBarProps, callControlProps: {
             options: callControlOptions,
             increaseFlyoutItemSize: props.mobileView
-        }, mobileView: props.mobileView, modalLayerHostId: props.modalLayerHostId, onRenderGalleryContent: () => (React__default["default"].createElement(LobbyTile, Object.assign({}, lobbyProps, { overlayProps: overlayProps(strings, inLobby, Object.values(participants)) }))), dataUiId: 'lobby-page', updateSidePaneRenderer: props.updateSidePaneRenderer, mobileChatTabHeader: props.mobileChatTabHeader, latestErrors: props.latestErrors, onDismissError: props.onDismissError }));
+        }, mobileView: props.mobileView, modalLayerHostId: props.modalLayerHostId, onRenderGalleryContent: () => (React__default["default"].createElement(LobbyTile, Object.assign({}, lobbyProps, { showLocalVideoCameraCycleButton: props.mobileView, overlayProps: overlayProps(strings, inLobby, Object.values(participants)) }))), dataUiId: 'lobby-page', updateSidePaneRenderer: props.updateSidePaneRenderer, mobileChatTabHeader: props.mobileChatTabHeader, latestErrors: props.latestErrors, onDismissError: props.onDismissError }));
 };
 const overlayProps = (strings, inLobby, remoteParticipants) => {
     /**
@@ -30082,6 +30134,32 @@ const updateLatestCapabilityChangedNotificationMap = (capabilitiesChangedInfoAnd
     return activeNotifications;
 };
 
+// Copyright (c) Microsoft Corporation.
+/**
+ * @private
+ */
+const useEndedCallConsoleErrors = (endedCall) => {
+    var _a;
+    /* @conditional-compile-remove(rooms) */
+    React.useEffect(() => {
+        var _a;
+        switch ((_a = endedCall === null || endedCall === void 0 ? void 0 : endedCall.callEndReason) === null || _a === void 0 ? void 0 : _a.subCode) {
+            case ROOM_NOT_FOUND_SUB_CODE:
+                console.error('Call ended because the room id provided through the adapter locator could not be found');
+                break;
+            case ROOM_NOT_VALID_SUB_CODE:
+                console.error('Call ended because this room is currently not valid.');
+                break;
+            case NOT_INVITED_TO_ROOM_SUB_CODE:
+                console.error('Call ended because you are not invited to this room.');
+                break;
+            case INVITE_TO_ROOM_REMOVED_SUB_CODE:
+                console.error('Call ended because your invite to this room has been removed.');
+                break;
+        }
+    }, [(_a = endedCall === null || endedCall === void 0 ? void 0 : endedCall.callEndReason) === null || _a === void 0 ? void 0 : _a.subCode]);
+};
+
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 var __awaiter$7 = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
@@ -30232,6 +30310,7 @@ const MainScreen = (props) => {
                 capabilitiesChangedNotificationBarProps: capabilitiesChangedNotificationBarProps })));
             break;
     }
+    useEndedCallConsoleErrors(endedCall);
     /* @conditional-compile-remove(unsupported-browser) */
     switch (page) {
         case 'unsupportedEnvironment':