@azure/communication-react 1.2.3-alpha-202205270013.0 → 1.3.1-alpha-202205310013.0

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

@@ -191,7 +191,7 @@ const fromFlatCommunicationIdentifier = (id) => {
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
 // GENERATED FILE. DO NOT EDIT MANUALLY.
-var telemetryVersion = '1.2.3-alpha-202205270013.0';
+var telemetryVersion = '1.3.1-alpha-202205310013.0';
 
 // Copyright (c) Microsoft Corporation.
 /**
@@ -291,7 +291,7 @@ const getCallExists = (state, props) => !!state.calls[props.callId];
 /**
  * @private
  */
-const getDominantSpeakers$1 = (state, props) => { var _a; return (_a = state.calls[props.callId]) === null || _a === void 0 ? void 0 : _a.dominantSpeakers; };
+const getDominantSpeakers = (state, props) => { var _a; return (_a = state.calls[props.callId]) === null || _a === void 0 ? void 0 : _a.dominantSpeakers; };
 /**
  * @private
  */
@@ -465,7 +465,7 @@ const createDefaultCallingHandlers = memoizeOne__default['default']((callClient,
         // Before the call object creates a stream, dispose of any local preview streams.
         // @TODO: is there any way to parent the unparented view to the call object instead
         // of disposing and creating a new stream?
-        yield onDisposeLocalStreamView();
+        yield disposeAllLocalPreviewViews(callClient);
         const callId = call === null || call === void 0 ? void 0 : call.id;
         let videoDeviceInfo = callClient.getState().deviceManager.selectedCamera;
         if (!videoDeviceInfo) {
@@ -637,9 +637,15 @@ const createDefaultCallingHandlers = memoizeOne__default['default']((callClient,
         }
     });
     const onDisposeLocalStreamView = () => __awaiter$r(void 0, void 0, void 0, function* () {
-        // TODO: we need to remember which LocalVideoStream was used for LocalPreview and dispose that one. For now
-        // assume any unparented view is a LocalPreview and stop all since those are only used for LocalPreview
-        // currently.
+        // If the user is currently in a call, dispose of the local stream view attached to that call.
+        const callState = call && callClient.getState().calls[call.id];
+        const localStream = callState === null || callState === void 0 ? void 0 : callState.localVideoStreams.find((item) => item.mediaStreamType === 'Video');
+        if (call && callState && localStream) {
+            callClient.disposeView(call.id, undefined, localStream);
+        }
+        // If the user is not in a call we currently assume any unparented view is a LocalPreview and stop all
+        // since those are only used for LocalPreview currently.
+        // TODO: we need to remember which LocalVideoStream was used for LocalPreview and dispose that one.
         yield disposeAllLocalPreviewViews(callClient);
     });
     const onRemoveParticipant = (userId) => __awaiter$r(void 0, void 0, void 0, function* () {
@@ -3936,8 +3942,19 @@ const mediaContainer = (theme) => react.mergeStyles({
 /**
  * @private
  */
-const invertedVideoStyle = (theme) => react.mergeStyles(mediaContainer(theme), {
-    transform: 'rotateY(180deg)'
+const invertedVideoInPipStyle = (theme) => react.mergeStyles(mediaContainer(theme), {
+    // The HTMLElement returned by the headless SDK is already inverted.
+    // But in picture-in-picture mode, we do not want to invert the host HTMLElement.
+    // Instead, we need to target the :picture-in-picture pseudoclass.
+    //
+    // First reset the host HTMLElement.
+    transform: 'rotateY(180deg)',
+    // This doesn't work yet on latest Edge.
+    // Probably just not implemented yet.
+    // picture-in-picture API is not yet stable: https://www.w3.org/TR/picture-in-picture/#css-pseudo-class
+    '& video:picture-in-picture': {
+        transform: 'rotateY(180deg)'
+    }
 });
 
 // Copyright (c) Microsoft Corporation.
@@ -3952,6 +3969,7 @@ const StreamMedia = (props) => {
     const containerEl = React.useRef(null);
     const theme = useTheme();
     const { isMirrored, videoStreamElement, styles } = props;
+    const [pipEnabled, setPipEnabled] = React.useState(false);
     React.useEffect(() => {
         const container = containerEl.current;
         if (!container) {
@@ -3961,14 +3979,22 @@ const StreamMedia = (props) => {
         // the new videoStreamElement. If videoStreamElement is undefined nothing is appended and container should be empty
         // and we don't render anyting.
         container.innerHTML = '';
+        setPipEnabled(false);
         if (videoStreamElement) {
+            videoStreamElement.addEventListener('enterpictureinpicture', () => {
+                setPipEnabled(true);
+            });
+            videoStreamElement.addEventListener('leavepictureinpicture', () => {
+                setPipEnabled(false);
+            });
             container.appendChild(videoStreamElement);
         }
         return () => {
             container.innerHTML = '';
+            setPipEnabled(false);
         };
     }, [videoStreamElement]);
-    return (React__default['default'].createElement("div", { className: react.mergeStyles(isMirrored ? invertedVideoStyle(theme) : mediaContainer(theme), styles === null || styles === void 0 ? void 0 : styles.root), ref: containerEl }));
+    return (React__default['default'].createElement("div", { className: react.mergeStyles(isMirrored && pipEnabled ? invertedVideoInPipStyle(theme) : mediaContainer(theme), styles === null || styles === void 0 ? void 0 : styles.root), ref: containerEl }));
 };
 
 // Copyright (c) Microsoft Corporation.
@@ -4634,9 +4660,9 @@ const VideoTile = (props) => {
  * boost by memoizing the same rendered component to avoid rerendering a VideoTile when its position in the
  * array changes causing a rerender in the parent component. https://reactjs.org/docs/react-api.html#reactmemo
  *
- * @private
+ * @internal
  */
-const RemoteVideoTile = React__default['default'].memo((props) => {
+const _RemoteVideoTile = React__default['default'].memo((props) => {
     const { isAvailable, isMuted, isSpeaking, isScreenSharingOn, onCreateRemoteStreamView, onDisposeRemoteStreamView, remoteVideoViewOptions, renderElement, userId, displayName, onRenderAvatar, showMuteIndicator } = props;
     const remoteVideoStreamProps = React.useMemo(() => ({
         isMirrored: remoteVideoViewOptions === null || remoteVideoViewOptions === void 0 ? void 0 : remoteVideoViewOptions.isMirrored,
@@ -4668,7 +4694,7 @@ const RemoteVideoTile = React__default['default'].memo((props) => {
         }
         return React__default['default'].createElement(StreamMedia, { videoStreamElement: renderElement });
     }, [renderElement]);
-    return (React__default['default'].createElement(VideoTile, { key: userId, userId: userId, renderElement: renderVideoStreamElement, displayName: displayName, onRenderPlaceholder: onRenderAvatar, isMuted: isMuted, isSpeaking: isSpeaking, showMuteIndicator: showMuteIndicator }));
+    return (React__default['default'].createElement(VideoTile, { key: userId, userId: userId, renderElement: renderVideoStreamElement, displayName: displayName, onRenderPlaceholder: onRenderAvatar, isMuted: isMuted, isSpeaking: isSpeaking, showMuteIndicator: showMuteIndicator, showLabel: props.showLabel, personaMinSize: props.personaMinSize }));
 });
 
 // Copyright (c) Microsoft Corporation.
@@ -5795,9 +5821,9 @@ const LocalVideoCameraCycleButton = (props) => {
 /**
  * A memoized version of VideoTile for rendering local participant.
  *
- * @private
+ * @internal
  */
-const LocalVideoTile = React__default['default'].memo((props) => {
+const _LocalVideoTile = React__default['default'].memo((props) => {
     const { isAvailable, isMuted, onCreateLocalStreamView, onDisposeLocalStreamView, localVideoViewOptions, renderElement, userId, showLabel, displayName, initialsName, onRenderAvatar, showMuteIndicator, styles, showCameraSwitcherInLocalPreview, localVideoCameraCycleButtonProps, localVideoCameraSwitcherLabel, localVideoSelectedDescription } = props;
     const localVideoStreamProps = React.useMemo(() => ({
         isMirrored: localVideoViewOptions === null || localVideoViewOptions === void 0 ? void 0 : localVideoViewOptions.isMirrored,
@@ -5825,7 +5851,7 @@ const LocalVideoTile = React__default['default'].memo((props) => {
         }
         return (React__default['default'].createElement(React__default['default'].Fragment, null,
             React__default['default'].createElement(FloatingLocalCameraCycleButton, { showCameraSwitcherInLocalPreview: showCameraSwitcherInLocalPreview !== null && showCameraSwitcherInLocalPreview !== void 0 ? showCameraSwitcherInLocalPreview : false, localVideoCameraCycleButtonProps: localVideoCameraCycleButtonProps, localVideoCameraSwitcherLabel: localVideoCameraSwitcherLabel, localVideoSelectedDescription: localVideoSelectedDescription }),
-            React__default['default'].createElement(StreamMedia, { videoStreamElement: renderElement })));
+            React__default['default'].createElement(StreamMedia, { videoStreamElement: renderElement, isMirrored: true })));
     }, [
         localVideoCameraCycleButtonProps,
         localVideoCameraSwitcherLabel,
@@ -5833,7 +5859,7 @@ const LocalVideoTile = React__default['default'].memo((props) => {
         renderElement,
         showCameraSwitcherInLocalPreview
     ]);
-    return (React__default['default'].createElement(VideoTile, { key: userId, userId: userId, renderElement: renderVideoStreamElement, showLabel: showLabel, displayName: displayName, initialsName: initialsName, styles: styles, onRenderPlaceholder: onRenderAvatar, isMuted: isMuted, showMuteIndicator: showMuteIndicator }));
+    return (React__default['default'].createElement(VideoTile, { key: userId !== null && userId !== void 0 ? userId : 'local-video-tile', userId: userId, renderElement: renderVideoStreamElement, showLabel: showLabel, displayName: displayName, initialsName: initialsName, styles: styles, onRenderPlaceholder: onRenderAvatar, isMuted: isMuted, showMuteIndicator: showMuteIndicator, personaMinSize: props.personaMinSize }));
 });
 const FloatingLocalCameraCycleButton = (props) => {
     const { showCameraSwitcherInLocalPreview, localVideoCameraCycleButtonProps, localVideoCameraSwitcherLabel, localVideoSelectedDescription } = props;
@@ -5923,7 +5949,7 @@ const VideoGallery = (props) => {
             root: { borderRadius: theme.effects.roundedCorner4 }
         }, styles === null || styles === void 0 ? void 0 : styles.localVideo);
         return (React__default['default'].createElement(react.Stack, { 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: isNarrow ? '' : strings.localVideoLabel, initialsName: localParticipant.displayName, localVideoViewOptions: localVideoViewOptions, onRenderAvatar: onRenderAvatar, showLabel: !(shouldFloatLocalVideo && isNarrow), 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: isNarrow ? '' : strings.localVideoLabel, initialsName: localParticipant.displayName, localVideoViewOptions: localVideoViewOptions, onRenderAvatar: onRenderAvatar, showLabel: !(shouldFloatLocalVideo && isNarrow), showMuteIndicator: showMuteIndicator, showCameraSwitcherInLocalPreview: showCameraSwitcherInLocalPreview, localVideoCameraCycleButtonProps: localVideoCameraCycleButtonProps, localVideoCameraSwitcherLabel: strings.localVideoCameraSwitcherLabel, localVideoSelectedDescription: strings.localVideoSelectedDescription, styles: localVideoTileStyles })));
     }, [
         isNarrow,
         localParticipant,
@@ -5945,7 +5971,7 @@ const VideoGallery = (props) => {
     ]);
     const defaultOnRenderVideoTile = React.useCallback((participant, isVideoParticipant) => {
         const remoteVideoStream = participant.videoStream;
-        return (React__default['default'].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, renderElement: isVideoParticipant ? remoteVideoStream === null || remoteVideoStream === void 0 ? void 0 : remoteVideoStream.renderElement : undefined, remoteVideoViewOptions: isVideoParticipant ? remoteVideoViewOptions : undefined, onRenderAvatar: onRenderAvatar, showMuteIndicator: showMuteIndicator })));
+        return (React__default['default'].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, renderElement: isVideoParticipant ? remoteVideoStream === null || remoteVideoStream === void 0 ? void 0 : remoteVideoStream.renderElement : undefined, remoteVideoViewOptions: isVideoParticipant ? remoteVideoViewOptions : undefined, onRenderAvatar: onRenderAvatar, showMuteIndicator: showMuteIndicator })));
     }, [onCreateRemoteStreamView, onDisposeRemoteStreamView, remoteVideoViewOptions, onRenderAvatar, showMuteIndicator]);
     const videoTiles = onRenderRemoteVideoTile
         ? visibleVideoParticipants.current.map((participant) => onRenderRemoteVideoTile(participant))
@@ -6828,11 +6854,11 @@ const submitWithKeyboard = (e, onSubmit) => {
 /** @private */
 const PictureInPictureInPicturePrimaryTile = (props) => {
     const boxShadow = useTheme().effects.elevation8;
-    return React__default['default'].createElement(PictureInPictureInPictureTile, Object.assign({}, props, { styles: primaryTileStyles(props.orientation, boxShadow) }));
+    return (React__default['default'].createElement(PictureInPictureInPictureTile, { styles: primaryTileStyles(props.orientation, boxShadow) }, props.children));
 };
 /** @private */
-const PictureInPictureInPictureSecondaryTile = (props) => (React__default['default'].createElement(PictureInPictureInPictureTile, Object.assign({}, props, { personaMinSize: 20, styles: secondaryTileStyles(props.orientation) })));
-const PictureInPictureInPictureTile = (props) => (React__default['default'].createElement(VideoTile, Object.assign({}, props, { showLabel: false })));
+const PictureInPictureInPictureSecondaryTile = (props) => (React__default['default'].createElement(PictureInPictureInPictureTile, { styles: secondaryTileStyles(props.orientation) }, props.children));
+const PictureInPictureInPictureTile = (props) => (React__default['default'].createElement(react.Stack, { styles: props.styles }, props.children));
 const primaryTileStyles = react.memoizeFunction((orientation, themeElevation) => ({
     root: {
         borderRadius: '0.25rem',
@@ -7377,7 +7403,7 @@ const videoGallerySelector = reselect.createSelector([
     getIsScreenSharingOn,
     getDisplayName$2,
     getIdentifier,
-    getDominantSpeakers$1
+    getDominantSpeakers
 ], (screenShareRemoteParticipantId, remoteParticipants, localVideoStreams, isMuted, isScreenSharingOn, displayName, identifier, dominantSpeakers) => {
     var _a, _b;
     const screenShareRemoteParticipant = screenShareRemoteParticipantId && remoteParticipants
@@ -9220,6 +9246,27 @@ class ProxyCall {
                     });
                 }, 'Call.stopScreenSharing');
             }
+            case 'hold': {
+                return this._context.withAsyncErrorTeedToState(function (...args) {
+                    return __awaiter$h(this, void 0, void 0, function* () {
+                        return yield target.hold(...args);
+                    });
+                }, 'Call.hold');
+            }
+            case 'resume': {
+                return this._context.withAsyncErrorTeedToState(function (...args) {
+                    return __awaiter$h(this, void 0, void 0, function* () {
+                        return yield target.resume(...args);
+                    });
+                }, 'Call.resume');
+            }
+            case 'addParticipant': {
+                return this._context.withAsyncErrorTeedToState(function (...args) {
+                    return __awaiter$h(this, void 0, void 0, function* () {
+                        return yield target.addParticipant(...args);
+                    });
+                }, 'Call.addParticipant');
+            }
             default:
                 return Reflect.get(target, prop);
         }
@@ -13657,7 +13704,7 @@ const getUserFacingDiagnostics = (state) => { var _a; return (_a = state.call) =
 /**
  * @private
  */
-const getDominantSpeakers = (state) => { var _a; return _dominantSpeakersWithFlatId((_a = state.call) === null || _a === void 0 ? void 0 : _a.dominantSpeakers); };
+const getDominantSpeakerInfo = (state) => { var _a; return (_a = state.call) === null || _a === void 0 ? void 0 : _a.dominantSpeakers; };
 /**
  * @private
  */
@@ -13945,11 +13992,12 @@ const MediaGallery = (props) => {
         return Object.assign(Object.assign({}, cameraSwitcherCallback), cameraSwitcherCameras);
     }, [cameraSwitcherCallback, cameraSwitcherCameras]);
     const remoteParticipants = useRemoteParticipantsWithCustomDisplayNames(videoGalleryProps.remoteParticipants, props.onFetchAvatarPersonaData);
+    const onRenderAvatar = React.useCallback((userId, options) => (React__default['default'].createElement(react.Stack, { className: react.mergeStyles({ position: 'absolute', height: '100%', width: '100%' }) },
+        React__default['default'].createElement(AvatarPersona, Object.assign({ userId: userId }, options, { dataProvider: props.onFetchAvatarPersonaData })))), [props.onFetchAvatarPersonaData]);
     useLocalVideoStartTrigger(!!props.isVideoStreamOn);
     const VideoGalleryMemoized = React.useMemo(() => {
-        return (React__default['default'].createElement(VideoGallery, Object.assign({}, videoGalleryProps, { remoteParticipants: remoteParticipants, localVideoViewOptions: localVideoViewOptions$3, remoteVideoViewOptions: remoteVideoViewOptions$1, styles: VideoGalleryStyles, layout: "floatingLocalVideo", showCameraSwitcherInLocalPreview: props.isMobile, localVideoCameraCycleButtonProps: cameraSwitcherProps, onRenderAvatar: (userId, options) => (React__default['default'].createElement(react.Stack, { className: react.mergeStyles({ position: 'absolute', height: '100%', width: '100%' }) },
-                React__default['default'].createElement(AvatarPersona, Object.assign({ userId: userId }, options, { dataProvider: props.onFetchAvatarPersonaData })))) })));
-    }, [videoGalleryProps, props.isMobile, props.onFetchAvatarPersonaData, remoteParticipants, cameraSwitcherProps]);
+        return (React__default['default'].createElement(VideoGallery, Object.assign({}, videoGalleryProps, { remoteParticipants: remoteParticipants, localVideoViewOptions: localVideoViewOptions$3, remoteVideoViewOptions: remoteVideoViewOptions$1, styles: VideoGalleryStyles, layout: "floatingLocalVideo", showCameraSwitcherInLocalPreview: props.isMobile, localVideoCameraCycleButtonProps: cameraSwitcherProps, onRenderAvatar: onRenderAvatar })));
+    }, [videoGalleryProps, props.isMobile, onRenderAvatar, remoteParticipants, cameraSwitcherProps]);
     return VideoGalleryMemoized;
 };
 /**
@@ -16261,41 +16309,65 @@ const SidePaneHeader = (props) => {
  * @private
  */
 const LocalAndRemotePIP = (props) => {
+    var _a, _b;
     const { localParticipant, dominantRemoteParticipant, onCreateLocalStreamView, onDisposeLocalStreamView, onCreateRemoteStreamView, onDisposeRemoteStreamView } = props;
-    React.useEffect(() => {
-        var _a;
-        if (((_a = localParticipant.videoStream) === null || _a === void 0 ? void 0 : _a.isAvailable) && !localParticipant.videoStream.renderElement) {
-            onCreateLocalStreamView && onCreateLocalStreamView(localVideoViewOptions);
-        }
-        return () => {
-            onDisposeLocalStreamView && onDisposeLocalStreamView();
-        };
-    }, [localParticipant, onCreateLocalStreamView, onDisposeLocalStreamView]);
-    const localVideoTile = React.useMemo(() => createVideoTile(localParticipant.displayName, localParticipant === null || localParticipant === void 0 ? void 0 : localParticipant.videoStream), [localParticipant.displayName, localParticipant === null || localParticipant === void 0 ? void 0 : localParticipant.videoStream]);
-    React.useEffect(() => {
-        var _a;
-        if (((_a = dominantRemoteParticipant === null || dominantRemoteParticipant === void 0 ? void 0 : dominantRemoteParticipant.videoStream) === null || _a === void 0 ? void 0 : _a.isAvailable) && !dominantRemoteParticipant.videoStream.renderElement) {
-            onCreateRemoteStreamView && onCreateRemoteStreamView(dominantRemoteParticipant.userId, remoteVideoViewOptions);
-        }
-        return () => {
-            var _a;
-            onDisposeRemoteStreamView &&
-                ((_a = dominantRemoteParticipant === null || dominantRemoteParticipant === void 0 ? void 0 : dominantRemoteParticipant.videoStream) === null || _a === void 0 ? void 0 : _a.renderElement) &&
-                onDisposeRemoteStreamView(dominantRemoteParticipant.userId);
-        };
+    const localVideoTileProps = React.useMemo(() => {
+        var _a, _b;
+        return ({
+            onCreateLocalStreamView,
+            onDisposeLocalStreamView,
+            localVideoViewOptions,
+            displayName: localParticipant.displayName,
+            showLabel: false,
+            showMuteIndicator: false,
+            showCameraSwitcherInLocalPreview: false,
+            isAvailable: (_a = localParticipant.videoStream) === null || _a === void 0 ? void 0 : _a.isAvailable,
+            renderElement: (_b = localParticipant.videoStream) === null || _b === void 0 ? void 0 : _b.renderElement
+        });
+    }, [
+        localParticipant.displayName,
+        (_a = localParticipant.videoStream) === null || _a === void 0 ? void 0 : _a.isAvailable,
+        (_b = localParticipant.videoStream) === null || _b === void 0 ? void 0 : _b.renderElement,
+        onCreateLocalStreamView,
+        onDisposeLocalStreamView
+    ]);
+    const remoteVideoTileProps = React.useMemo(() => {
+        var _a, _b;
+        return !dominantRemoteParticipant
+            ? undefined
+            : {
+                onCreateRemoteStreamView,
+                onDisposeRemoteStreamView,
+                remoteVideoViewOptions,
+                displayName: dominantRemoteParticipant === null || dominantRemoteParticipant === void 0 ? void 0 : dominantRemoteParticipant.displayName,
+                showLabel: false,
+                showMuteIndicator: false,
+                isAvailable: (_a = dominantRemoteParticipant.videoStream) === null || _a === void 0 ? void 0 : _a.isAvailable,
+                renderElement: (_b = dominantRemoteParticipant.videoStream) === null || _b === void 0 ? void 0 : _b.renderElement,
+                userId: dominantRemoteParticipant.userId,
+                key: dominantRemoteParticipant.userId
+            };
     }, [dominantRemoteParticipant, onCreateRemoteStreamView, onDisposeRemoteStreamView]);
-    const remoteVideoTile = React.useMemo(() => props.dominantRemoteParticipant &&
-        createVideoTile(props.dominantRemoteParticipant.displayName, props.dominantRemoteParticipant.videoStream), [props.dominantRemoteParticipant]);
     const locale = useLocale();
     const ariaLabel = locale.strings.callWithChat.pictureInPictureTileAriaLabel;
     const strings = React.useMemo(() => ({
         rootAriaLabel: ariaLabel
     }), [ariaLabel]);
-    return (React__default['default'].createElement(_PictureInPictureInPicture, { onClick: props.onClick, strings: strings, 
-        // If there are no remote participants, show the local participant as the primary tile
-        primaryTile: remoteVideoTile !== null && remoteVideoTile !== void 0 ? remoteVideoTile : localVideoTile, 
-        // If we are showing the local participant as the primary tile, show nothing for the secondary tile
-        secondaryTile: remoteVideoTile ? localVideoTile : undefined }));
+    // If there are no remote participants, show the local participant as the primary tile
+    const primaryTileProps = React.useMemo(() => ({
+        children: remoteVideoTileProps ? (React__default['default'].createElement(_RemoteVideoTile, Object.assign({}, remoteVideoTileProps))) : (React__default['default'].createElement(_LocalVideoTile, Object.assign({}, localVideoTileProps))),
+        // TODO: when the calling SDK provides height/width stream information - update this to reflect the stream orientation.
+        orientation: 'portrait'
+    }), [localVideoTileProps, remoteVideoTileProps]);
+    // If we are showing the local participant as the primary tile, show nothing for the secondary tile
+    const secondaryTileProps = React.useMemo(() => remoteVideoTileProps
+        ? {
+            children: React__default['default'].createElement(_LocalVideoTile, Object.assign({}, localVideoTileProps, { personaMinSize: 20 })),
+            // TODO: when the calling SDK provides height/width stream information - update this to reflect the stream orientation.
+            orientation: 'portrait'
+        }
+        : undefined, [localVideoTileProps, remoteVideoTileProps]);
+    return (React__default['default'].createElement(_PictureInPictureInPicture, { onClick: props.onClick, strings: strings, primaryTile: primaryTileProps, secondaryTile: secondaryTileProps }));
 };
 const localVideoViewOptions = {
     scalingMode: 'Crop',
@@ -16305,13 +16377,6 @@ const remoteVideoViewOptions = {
     scalingMode: 'Crop',
     isMirrored: false
 };
-const createVideoTile = (displayName, videoStream) => {
-    return {
-        orientation: 'portrait',
-        renderElement: (videoStream === null || videoStream === void 0 ? void 0 : videoStream.renderElement) ? (React__default['default'].createElement(StreamMedia, { videoStreamElement: videoStream.renderElement })) : undefined,
-        displayName: displayName
-    };
-};
 
 // Copyright (c) Microsoft Corporation.
 /**
@@ -16320,7 +16385,8 @@ const createVideoTile = (displayName, videoStream) => {
  *
  * @private
  */
-const dominantRemoteParticipantSelector = reselect__namespace.createSelector([getRemoteParticipants, getDominantSpeakers], (remoteParticipants, dominantSpeakers) => {
+const dominantRemoteParticipantSelector = reselect__namespace.createSelector([getRemoteParticipants, getDominantSpeakerInfo], (remoteParticipants, dominantSpeakerInfo) => {
+    const dominantSpeakers = _dominantSpeakersWithFlatId(dominantSpeakerInfo);
     const dominantRemoteParticipant = remoteParticipants && Object.keys(remoteParticipants).length > 0
         ? findDominantRemoteParticipant(remoteParticipants, dominantSpeakers !== null && dominantSpeakers !== void 0 ? dominantSpeakers : [])
         : undefined;