@azure/communication-react 1.5.1-alpha-202302050015 → 1.5.1-alpha-202302080014

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

@@ -159,7 +159,7 @@ const _toCommunicationIdentifier = (id) => {
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
 // GENERATED FILE. DO NOT EDIT MANUALLY.
-var telemetryVersion = '1.5.1-alpha-202302050015';
+var telemetryVersion = '1.5.1-alpha-202302080014';
 
 // Copyright (c) Microsoft Corporation.
 /**
@@ -594,10 +594,6 @@ const createDefaultCommonCallingHandlers = memoizeOne__default['default']((callC
         }
         if (call && call.localVideoStreams.find((s) => areStreamsEqual(s, stream))) {
             yield call.stopVideo(stream);
-            yield callClient.disposeView(callId, undefined, {
-                source: stream.source,
-                mediaStreamType: stream.mediaStreamType
-            });
         }
     });
     const onToggleCamera = (options) => __awaiter$C(void 0, void 0, void 0, function* () {
@@ -2006,6 +2002,7 @@ function createViewRemoteVideo(context, internalContext, callId, participantId,
     return __awaiter$x(this, void 0, void 0, function* () {
         // Render RemoteVideoStream that is part of a Call
         const streamId = stream.id;
+        const streamType = stream.mediaStreamType;
         let participantKey;
         if (typeof participantId === 'string') {
             participantKey = participantId;
@@ -2013,7 +2010,7 @@ function createViewRemoteVideo(context, internalContext, callId, participantId,
         else {
             participantKey = toFlatCommunicationIdentifier(participantId);
         }
-        const streamLogInfo = { callId, participantKey, streamId };
+        const streamLogInfo = { callId, participantKey, streamId, streamType };
         _logEvent(callingStatefulLogger, {
             name: EventNames.CREATING_REMOTE_VIEW,
             level: 'info',
@@ -2058,7 +2055,8 @@ function createViewRemoteVideo(context, internalContext, callId, participantId,
             _logEvent(callingStatefulLogger, {
                 name: EventNames.REMOTE_STREAM_STOPPING,
                 level: 'warning',
-                message: 'RemoteVideoStream was marked as stopping by dispose view. Resetting state to "Rendering".'
+                message: 'RemoteVideoStream was marked as stopping by dispose view. Resetting state to "Rendering".',
+                data: streamLogInfo
             });
             internalContext.setRemoteRenderInfo(callId, participantKey, streamId, renderInfo.stream, 'Rendering', renderInfo.renderer);
             return;
@@ -2129,18 +2127,22 @@ function createViewRemoteVideo(context, internalContext, callId, participantId,
 }
 function createViewLocalVideo(context, internalContext, callId, options) {
     return __awaiter$x(this, void 0, void 0, function* () {
+        // Render LocalVideoStream that is part of a Call
+        const renderInfo = internalContext.getLocalRenderInfo(callId);
+        const streamType = renderInfo === null || renderInfo === void 0 ? void 0 : renderInfo.stream.mediaStreamType;
+        const streamLogInfo = { callId, streamType };
         _logEvent(callingStatefulLogger, {
             name: EventNames.START_LOCAL_STREAM_RENDERING,
             level: 'info',
-            message: 'Start creating view for local video.'
+            message: 'Start creating view for local video.',
+            data: streamLogInfo
         });
-        // Render LocalVideoStream that is part of a Call
-        const renderInfo = internalContext.getLocalRenderInfo(callId);
         if (!renderInfo) {
             _logEvent(callingStatefulLogger, {
                 name: EventNames.LOCAL_STREAM_NOT_FOUND,
                 level: 'error',
-                message: 'LocalVideoStream not found in state.'
+                message: 'LocalVideoStream not found in state.',
+                data: { callId }
             });
             console.warn('LocalVideoStream not found in state');
             return;
@@ -2149,7 +2151,8 @@ function createViewLocalVideo(context, internalContext, callId, options) {
             _logEvent(callingStatefulLogger, {
                 name: EventNames.LOCAL_STREAM_ALREADY_RENDERED,
                 level: 'warning',
-                message: 'LocalVideoStream is already rendered.'
+                message: 'LocalVideoStream is already rendered.',
+                data: streamLogInfo
             });
             console.warn('LocalVideoStream is already rendered');
             return;
@@ -2160,7 +2163,8 @@ function createViewLocalVideo(context, internalContext, callId, options) {
             _logEvent(callingStatefulLogger, {
                 name: EventNames.LOCAL_STREAM_RENDERING,
                 level: 'warning',
-                message: 'LocalVideoStream is rendering.'
+                message: 'LocalVideoStream is rendering.',
+                data: streamLogInfo
             });
             return;
         }
@@ -2170,7 +2174,8 @@ function createViewLocalVideo(context, internalContext, callId, options) {
             _logEvent(callingStatefulLogger, {
                 name: EventNames.LOCAL_STREAM_STOPPING,
                 level: 'warning',
-                message: 'LocalVideoStream was marked as stopping by dispose view. Resetting state to "Rendering".'
+                message: 'LocalVideoStream was marked as stopping by dispose view. Resetting state to "Rendering".',
+                data: streamLogInfo
             });
             internalContext.setLocalRenderInfo(callId, renderInfo.stream, 'Rendering', renderInfo.renderer);
             return;
@@ -2187,7 +2192,9 @@ function createViewLocalVideo(context, internalContext, callId, options) {
                 level: 'error',
                 message: 'Failed to create view.',
                 data: {
-                    error: e
+                    error: e,
+                    streamType,
+                    callId
                 }
             });
             internalContext.setLocalRenderInfo(callId, renderInfo.stream, 'NotRendered', undefined);
@@ -2203,9 +2210,7 @@ function createViewLocalVideo(context, internalContext, callId, options) {
                 name: EventNames.LOCAL_RENDER_INFO_NOT_FOUND,
                 level: 'error',
                 message: 'Cannot find local render info after create the view. ',
-                data: {
-                    callId
-                }
+                data: streamLogInfo
             });
             renderer.dispose();
             context.setLocalVideoStreamRendererView(callId, undefined);
@@ -2218,9 +2223,7 @@ function createViewLocalVideo(context, internalContext, callId, options) {
                 name: EventNames.LOCAL_CREATED_STREAM_STOPPING,
                 level: 'warning',
                 message: 'Render info status is stopping, dispose renderer.',
-                data: {
-                    callId
-                }
+                data: streamLogInfo
             });
             renderer.dispose();
             internalContext.setLocalRenderInfo(callId, refreshedRenderInfo.stream, 'NotRendered', undefined);
@@ -2235,9 +2238,7 @@ function createViewLocalVideo(context, internalContext, callId, options) {
             name: EventNames.LOCAL_VIEW_RENDER_SUCCEED,
             level: 'info',
             message: `Successfully render the local view.`,
-            data: {
-                callId
-            }
+            data: streamLogInfo
         });
         return {
             renderer,
@@ -2306,6 +2307,7 @@ function createViewUnparentedVideo(context, internalContext, stream, options) {
 }
 function disposeViewRemoteVideo(context, internalContext, callId, participantId, stream) {
     const streamId = stream.id;
+    const streamType = stream.mediaStreamType;
     let participantKey;
     if (typeof participantId === 'string') {
         participantKey = participantId;
@@ -2313,7 +2315,7 @@ function disposeViewRemoteVideo(context, internalContext, callId, participantId,
     else {
         participantKey = toFlatCommunicationIdentifier(participantId);
     }
-    const streamLogInfo = { callId, participantKey, streamId };
+    const streamLogInfo = { callId, participantKey, streamId, streamType };
     _logEvent(callingStatefulLogger, {
         name: EventNames.START_DISPOSE_REMOTE_STREAM,
         level: 'info',
@@ -2387,15 +2389,15 @@ function disposeViewRemoteVideo(context, internalContext, callId, participantId,
     }
 }
 function disposeViewLocalVideo(context, internalContext, callId) {
-    const streamLogInfo = { callId };
+    const renderInfo = internalContext.getLocalRenderInfo(callId);
+    const streamType = renderInfo === null || renderInfo === void 0 ? void 0 : renderInfo.stream.mediaStreamType;
+    const streamLogInfo = { callId, streamType };
     _logEvent(callingStatefulLogger, {
         name: EventNames.START_DISPOSE_LOCAL_STREAM,
         level: 'info',
         message: 'Start disposing local stream.',
         data: streamLogInfo
     });
-    context.setLocalVideoStreamRendererView(callId, undefined);
-    const renderInfo = internalContext.getLocalRenderInfo(callId);
     if (!renderInfo) {
         _logEvent(callingStatefulLogger, {
             name: EventNames.LOCAL_DISPOSE_INFO_NOT_FOUND,
@@ -2410,7 +2412,8 @@ function disposeViewLocalVideo(context, internalContext, callId) {
         _logEvent(callingStatefulLogger, {
             name: EventNames.LOCAL_STREAM_ALREADY_DISPOSED,
             level: 'info',
-            message: 'LocalVideoStream is already disposed.'
+            message: 'LocalVideoStream is already disposed.',
+            data: streamLogInfo
         });
         return;
     }
@@ -2439,8 +2442,6 @@ function disposeViewLocalVideo(context, internalContext, callId) {
         internalContext.setLocalRenderInfo(callId, renderInfo.stream, 'Stopping', renderInfo.renderer);
         return;
     }
-    // Else the state must be in the "Rendered" state, so we can dispose the renderer and clean up the state.
-    internalContext.setLocalRenderInfo(callId, renderInfo.stream, 'NotRendered', undefined);
     if (renderInfo.renderer) {
         _logEvent(callingStatefulLogger, {
             name: EventNames.DISPOSING_LOCAL_RENDERER,
@@ -2449,6 +2450,10 @@ function disposeViewLocalVideo(context, internalContext, callId) {
             data: streamLogInfo
         });
         renderInfo.renderer.dispose();
+        // We will after disposing of the renderer tell the internal context and context that the
+        // local view is gone so we need to update their states.
+        internalContext.setLocalRenderInfo(callId, renderInfo.stream, 'NotRendered', undefined);
+        context.setLocalVideoStreamRendererView(callId, undefined);
     }
     else {
         _logEvent(callingStatefulLogger, {
@@ -2460,10 +2465,13 @@ function disposeViewLocalVideo(context, internalContext, callId) {
     }
 }
 function disposeViewUnparentedVideo(context, internalContext, stream) {
+    const streamType = stream.mediaStreamType;
+    const streamLogInfo = { streamType };
     _logEvent(callingStatefulLogger, {
         name: EventNames.START_DISPOSE_LOCAL_STREAM,
         level: 'info',
-        message: 'Start disposing unparented local stream.'
+        message: 'Start disposing unparented local stream.',
+        data: streamLogInfo
     });
     context.deleteDeviceManagerUnparentedView(stream);
     const renderInfo = internalContext.getUnparentedRenderInfo(stream);
@@ -2471,7 +2479,8 @@ function disposeViewUnparentedVideo(context, internalContext, stream) {
         _logEvent(callingStatefulLogger, {
             name: EventNames.LOCAL_DISPOSE_INFO_NOT_FOUND,
             level: 'error',
-            message: 'Cannot find render info when disposing unparented local stream.'
+            message: 'Cannot find render info when disposing unparented local stream.',
+            data: streamLogInfo
         });
         return;
     }
@@ -2479,7 +2488,8 @@ function disposeViewUnparentedVideo(context, internalContext, stream) {
         _logEvent(callingStatefulLogger, {
             name: EventNames.LOCAL_STREAM_STOPPING,
             level: 'info',
-            message: 'Unparented local stream is still rendering. Changing status to stopping.'
+            message: 'Unparented local stream is still rendering. Changing status to stopping.',
+            data: streamLogInfo
         });
         internalContext.setUnparentedRenderInfo(stream, renderInfo.stream, 'Stopping', undefined);
     }
@@ -2490,7 +2500,8 @@ function disposeViewUnparentedVideo(context, internalContext, stream) {
         _logEvent(callingStatefulLogger, {
             name: EventNames.DISPOSING_LOCAL_RENDERER,
             level: 'info',
-            message: 'Disposing unparented local view renderer.'
+            message: 'Disposing unparented local view renderer.',
+            data: streamLogInfo
         });
         renderInfo.renderer.dispose();
     }
@@ -2498,7 +2509,8 @@ function disposeViewUnparentedVideo(context, internalContext, stream) {
         _logEvent(callingStatefulLogger, {
             name: EventNames.LOCAL_RENDERER_NOT_FOUND,
             level: 'error',
-            message: 'Cannot find renderer when disposing unparented local stream.'
+            message: 'Cannot find renderer when disposing unparented local stream.',
+            data: streamLogInfo
         });
     }
 }
@@ -2506,6 +2518,7 @@ function disposeViewUnparentedVideo(context, internalContext, stream) {
  * @private
  */
 function createView(context, internalContext, callId, participantId, stream, options) {
+    const streamType = stream.mediaStreamType;
     if ('id' in stream && callId && participantId) {
         // Render RemoteVideoStream that is part of a Call
         return createViewRemoteVideo(context, internalContext, callId, participantId, stream, options);
@@ -2524,7 +2537,8 @@ function createView(context, internalContext, callId, participantId, stream, opt
         _logEvent(callingStatefulLogger, {
             name: EventNames.CREATE_STREAM_INVALID_PARAMS,
             level: 'warning',
-            message: 'Create View invalid combination of parameters.'
+            message: 'Create View invalid combination of parameters.',
+            data: { streamType }
         });
         return Promise.resolve(undefined);
     }
@@ -2533,6 +2547,7 @@ function createView(context, internalContext, callId, participantId, stream, opt
  * @private
  */
 function disposeView(context, internalContext, callId, participantId, stream) {
+    const streamType = stream.mediaStreamType;
     if ('id' in stream && callId && participantId) {
         // Stop rendering RemoteVideoStream that is part of a Call
         disposeViewRemoteVideo(context, internalContext, callId, participantId, stream);
@@ -2551,7 +2566,8 @@ function disposeView(context, internalContext, callId, participantId, stream) {
         _logEvent(callingStatefulLogger, {
             name: EventNames.DISPOSE_STREAM_INVALID_PARAMS,
             level: 'warning',
-            message: 'Dispose View invalid combination of parameters.'
+            message: 'Dispose View invalid combination of parameters.',
+            data: { streamType }
         });
         return;
     }
@@ -8543,8 +8559,6 @@ const DefaultPlaceholder = (props) => {
 };
 const defaultPersonaStyles = { root: { margin: 'auto', maxHeight: '100%' } };
 /* @conditional-compile-remove(pinned-participants) */
-const videoTileMoreIconProps = { iconName: 'VideoTileMoreOptions' };
-/* @conditional-compile-remove(pinned-participants) */
 const videoTileMoreMenuIconProps = { iconName: undefined, style: { display: 'none' } };
 /* @conditional-compile-remove(pinned-participants) */
 const videoTileMoreMenuProps = {
@@ -8554,11 +8568,12 @@ const videoTileMoreMenuProps = {
 };
 /* @conditional-compile-remove(pinned-participants) */
 const VideoTileMoreOptionsButton = (props) => {
-    const { contextualMenu } = props;
+    const { contextualMenu, canShowContextMenuButton } = props;
     if (!contextualMenu) {
         return React__default['default'].createElement(React__default['default'].Fragment, null);
     }
-    return (React__default['default'].createElement(react.IconButton, { "data-ui-id": "video-tile-more-options-button", styles: moreButtonStyles, iconProps: videoTileMoreIconProps, menuIconProps: videoTileMoreMenuIconProps, menuProps: Object.assign(Object.assign({}, videoTileMoreMenuProps), contextualMenu) }));
+    const optionsIcon = canShowContextMenuButton ? 'VideoTileMoreOptions' : undefined;
+    return (React__default['default'].createElement(react.IconButton, { "data-ui-id": "video-tile-more-options-button", styles: moreButtonStyles, menuIconProps: videoTileMoreMenuIconProps, menuProps: Object.assign(Object.assign({}, videoTileMoreMenuProps), contextualMenu), iconProps: { iconName: optionsIcon } }));
 };
 /**
  * A component to render the video stream for a single call participant.
@@ -8654,7 +8669,7 @@ const VideoTile = (props) => {
                 height: '100%'
             }
         }, styles === null || styles === void 0 ? void 0 : styles.root) }, longPressHandlersTrampoline),
-        React__default['default'].createElement("div", Object.assign({ ref: videoTileRef, style: { width: '100%', height: '100%' } }, hoverHandlers),
+        React__default['default'].createElement("div", Object.assign({ ref: videoTileRef, style: { width: '100%', height: '100%' } }, hoverHandlers, { "data-is-focusable": true }),
             isVideoRendered ? (React__default['default'].createElement(react.Stack, { className: react.mergeStyles(videoContainerStyles, isMirrored && { transform: 'scaleX(-1)' }, styles === null || styles === void 0 ? void 0 : styles.videoContainer) }, renderElement)) : (React__default['default'].createElement(react.Stack, { className: react.mergeStyles(videoContainerStyles, {
                     opacity: participantStateString ||
                         /* @conditional-compile-remove(PSTN-calls) */ props.participantState === 'Idle'
@@ -8668,7 +8683,7 @@ const VideoTile = (props) => {
                     showMuteIndicator && isMuted && (React__default['default'].createElement(react.Stack, { className: react.mergeStyles(iconContainerStyle) },
                         React__default['default'].createElement(react.Icon, { iconName: "VideoTileMicOff" }))),
                     /* @conditional-compile-remove(pinned-participants) */
-                    canShowContextMenuButton && React__default['default'].createElement(VideoTileMoreOptionsButton, { contextualMenu: contextualMenu }),
+                    React__default['default'].createElement(VideoTileMoreOptionsButton, { contextualMenu: contextualMenu, canShowContextMenuButton: canShowContextMenuButton }),
                     /* @conditional-compile-remove(pinned-participants) */
                     isPinned && (React__default['default'].createElement(react.Stack, { className: react.mergeStyles(iconContainerStyle) },
                         React__default['default'].createElement(react.Icon, { iconName: "VideoTilePinned", className: react.mergeStyles(pinIconStyle) })))))),
@@ -9038,7 +9053,7 @@ react.mergeStyles({ position: 'relative', width: '100%', height: '100%' });
 /**
  * Small floating modal width and height in rem for small screen
  */
-const SMALL_FLOATING_MODAL_SIZE_PX = { width: 64, height: 88 };
+const SMALL_FLOATING_MODAL_SIZE_PX = { width: 64, height: 113 };
 /**
  * Large floating modal width and height in rem for large screen
  * Aspect ratio: 16:9
@@ -9137,7 +9152,7 @@ const horizontalGalleryStyle = (isNarrow) => {
  * Small horizontal gallery tile size in rem
  * @private
  */
-const SMALL_HORIZONTAL_GALLERY_TILE_SIZE_REM = { height: 5.5, width: 5.5 };
+const SMALL_HORIZONTAL_GALLERY_TILE_SIZE_REM = { height: 7.0625, width: 7.0625 };
 /**
  * Large horizontal gallery tile size in rem
  * @private