@azure/communication-react 1.7.1-alpha-202308260012 → 1.7.1-alpha-202308290013

package/dist/communication-react.d.ts

@@ -8548,6 +8548,13 @@ export declare interface RemoteVideoStreamState {
      * API. This can be undefined if the stream has not yet been rendered and defined after createView creates the view.
      */
     view?: VideoStreamRendererViewState;
+    /**
+     * Proxy of {@link @azure/communication-calling#RemoteVideoStream.size}.
+     */
+    streamSize?: {
+        width: number;
+        height: number;
+    };
 }
 
 /**
@@ -10061,6 +10068,11 @@ export declare interface VideoGalleryStream {
     renderElement?: HTMLElement;
     /** Scaling mode of the video stream */
     scalingMode?: ViewScalingMode;
+    /** Stream Size of the video stream */
+    streamSize?: {
+        width: number;
+        height: number;
+    };
 }
 
 /**

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

@@ -178,7 +178,7 @@ const _isValidIdentifier = (identifier) => {
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
 // GENERATED FILE. DO NOT EDIT MANUALLY.
-var telemetryVersion = '1.7.1-alpha-202308260012';
+var telemetryVersion = '1.7.1-alpha-202308290013';
 
 // Copyright (c) Microsoft Corporation.
 /**
@@ -1578,7 +1578,9 @@ function convertSdkRemoteStreamToDeclarativeRemoteStream(stream) {
         isAvailable: stream.isAvailable,
         /* @conditional-compile-remove(video-stream-is-receiving-flag) */
         isReceiving: stream.isReceiving,
-        view: undefined
+        view: undefined,
+        /* @conditional-compile-remove(pinned-participants) */
+        streamSize: stream.size
     };
 }
 /**
@@ -2168,6 +2170,21 @@ class CallContext$2 {
             }
         });
     }
+    /* @conditional-compile-remove(pinned-participants) */
+    setRemoteVideoStreamSize(callId, participantKey, streamId, size) {
+        this.modifyState((draft) => {
+            const call = draft.calls[this._callIdHistory.latestCallId(callId)];
+            if (call) {
+                const participant = call.remoteParticipants[participantKey];
+                if (participant) {
+                    const stream = participant.videoStreams[streamId];
+                    if (stream) {
+                        stream.streamSize = size;
+                    }
+                }
+            }
+        });
+    }
     setRemoteVideoStreams(callId, participantKey, addRemoteVideoStream, removeRemoteVideoStream) {
         this.modifyState((draft) => {
             const call = draft.calls[this._callIdHistory.latestCallId(callId)];
@@ -2617,12 +2634,16 @@ class RemoteVideoStreamSubscriber {
             this._remoteVideoStream.on('isAvailableChanged', this.isAvailableChanged);
             /* @conditional-compile-remove(video-stream-is-receiving-flag) */
             this._remoteVideoStream.on('isReceivingChanged', this.isReceivingChanged);
+            /* @conditional-compile-remove(pinned-participants) */
+            this._remoteVideoStream.on('sizeChanged', this.isSizeChanged);
             this.checkAndUpdateScreenShareState();
         };
         this.unsubscribe = () => {
             this._remoteVideoStream.off('isAvailableChanged', this.isAvailableChanged);
             /* @conditional-compile-remove(video-stream-is-receiving-flag) */
             this._remoteVideoStream.off('isReceivingChanged', this.isReceivingChanged);
+            /* @conditional-compile-remove(pinned-participants) */
+            this._remoteVideoStream.off('sizeChanged', this.isSizeChanged);
         };
         this.includesActiveScreenShareStream = (streams) => {
             for (const stream of Object.values(streams)) {
@@ -2675,6 +2696,19 @@ class RemoteVideoStreamSubscriber {
         this.isReceivingChanged = () => {
             this._context.setRemoteVideoStreamIsReceiving(this._callIdRef.callId, this._participantKey, this._remoteVideoStream.id, this._remoteVideoStream.isReceiving);
         };
+        /* @conditional-compile-remove(pinned-participants) */
+        this.isSizeChanged = () => {
+            var _a, _b, _c, _d, _e, _f, _g;
+            if (((_a = this._remoteVideoStream) === null || _a === void 0 ? void 0 : _a.size.width) === 0 && ((_b = this._remoteVideoStream) === null || _b === void 0 ? void 0 : _b.size.height) === 0) {
+                return;
+            }
+            const streamSize = (_e = (_d = (_c = this._context.getState().calls[this._callIdRef.callId]) === null || _c === void 0 ? void 0 : _c.remoteParticipants[this._participantKey]) === null || _d === void 0 ? void 0 : _d.videoStreams[this._remoteVideoStream.id]) === null || _e === void 0 ? void 0 : _e.streamSize;
+            const existingAspectRatio = streamSize ? streamSize.width / streamSize.height : undefined;
+            const newAspectRatio = ((_f = this._remoteVideoStream) === null || _f === void 0 ? void 0 : _f.size.width) / ((_g = this._remoteVideoStream) === null || _g === void 0 ? void 0 : _g.size.height);
+            if (!streamSize || existingAspectRatio !== newAspectRatio) {
+                this._context.setRemoteVideoStreamSize(this._callIdRef.callId, this._participantKey, this._remoteVideoStream.id, this._remoteVideoStream.size);
+            }
+        };
         this._callIdRef = callIdRef;
         this._participantKey = participantKey;
         this._remoteVideoStream = remoteVideoStream;
@@ -8740,10 +8774,12 @@ const ImageGallery = (props) => {
                 // Ensure when the focus trap has focus, the light dismiss area can still be clicked with mouse to dismiss.
                 // Note: this still correctly captures keyboard focus, this just allows mouse click outside of the focus trap.
                 isClickableOutsideFocusTrap: true, className: react.mergeStyles(bodyFocusZone) },
-                React__default['default'].createElement("img", { src: image.imageUrl, className: react.mergeStyles(imageStyle), alt: image.altText || 'image', "aria-label": 'image-gallery-main-image', onError: (event) => {
+                React__default['default'].createElement("img", { src: image.imageUrl, className: react.mergeStyles(imageStyle), alt: image.altText || 'image', "aria-label": 'image-gallery-main-image', "aria-live": 'polite', onError: (event) => {
                         setIsImageLoaded(false);
                         onError && onError(event);
-                    }, onClick: (event) => event.stopPropagation(), "aria-live": 'polite' }))));
+                    }, onClick: (event) => event.stopPropagation(), onDoubleClick: (event) => {
+                        event.persist();
+                    } }))));
     };
     return (React__default['default'].createElement(react.Modal, { titleAriaId: image.title, isOpen: isOpen, onDismiss: onDismiss, overlay: { styles: Object.assign({}, overlayStyles(theme, isDarkTheme)) }, styles: { main: focusTrapZoneStyle, scrollableContent: scrollableContentStyle }, isDarkOverlay: true },
         renderHeaderBar(),
@@ -11402,9 +11438,9 @@ const onRenderParticipantDefault = (participant, strings, myUserId, onRenderAvat
             return (React__default['default'].createElement(react.Stack, { horizontal: true, tokens: { childrenGap: '0.5rem' } },
                 /* @conditional-compile-remove(raise-hand) */ callingParticipant.raisedHand && (React__default['default'].createElement(react.Stack, { horizontal: true, tokens: { childrenGap: '0.2rem' }, style: {
                         alignItems: 'center',
-                        padding: '0.2rem',
+                        padding: '0.1rem 0.2rem',
                         backgroundColor: theme === null || theme === void 0 ? void 0 : theme.palette.neutralLighter,
-                        borderRadius: '1rem'
+                        borderRadius: '0.3rem'
                     } },
                     callingParticipant.raisedHand.raisedHandOrderPosition && (React__default['default'].createElement(react.Stack.Item, null,
                         React__default['default'].createElement(react.Text, null, (_a = callingParticipant.raisedHand) === null || _a === void 0 ? void 0 : _a.raisedHandOrderPosition))),
@@ -12356,7 +12392,7 @@ const VideoTile = (props) => {
             children && (React__default['default'].createElement(react.Stack, { className: react.mergeStyles(overlayContainerStyles, styles === null || styles === void 0 ? void 0 : styles.overlayContainer) }, children)),
             /* @conditional-compile-remove(raise-hand) */ raisedHand && canShowLabel && (React__default['default'].createElement(react.Stack, { horizontal: true, tokens: { childrenGap: '0.2rem' }, style: {
                     alignItems: 'center',
-                    padding: '0.2rem',
+                    padding: '0.2rem 0.3rem',
                     backgroundColor: theme.palette.white,
                     opacity: 0.9,
                     borderRadius: '1rem',
@@ -14960,7 +14996,18 @@ const VideoGallery = (props) => {
         const remoteVideoStream = participant.videoStream;
         /* @conditional-compile-remove(pinned-participants) */
         const isPinned = pinnedParticipants === null || pinnedParticipants === void 0 ? void 0 : pinnedParticipants.includes(participant.userId);
-        return (React__default['default'].createElement(_RemoteVideoTile, { key: participant.userId, userId: participant.userId, remoteParticipant: participant, onCreateRemoteStreamView: isVideoParticipant ? onCreateRemoteStreamView : undefined, onDisposeRemoteStreamView: isVideoParticipant ? onDisposeRemoteVideoStreamView : undefined, isAvailable: isVideoParticipant ? remoteVideoStream === null || remoteVideoStream === void 0 ? void 0 : remoteVideoStream.isAvailable : false, isReceiving: isVideoParticipant ? remoteVideoStream === null || remoteVideoStream === void 0 ? void 0 : remoteVideoStream.isReceiving : false, renderElement: isVideoParticipant ? remoteVideoStream === null || remoteVideoStream === void 0 ? void 0 : remoteVideoStream.renderElement : undefined, remoteVideoViewOptions: isVideoParticipant ? remoteVideoViewOptions : undefined, onRenderAvatar: onRenderAvatar, showMuteIndicator: showMuteIndicator, strings: strings, 
+        const createViewOptions = () => {
+            var _a, _b;
+            /* @conditional-compile-remove(pinned-participants) */
+            return (remoteVideoStream === null || remoteVideoStream === void 0 ? void 0 : remoteVideoStream.streamSize) &&
+                ((_a = remoteVideoStream.streamSize) === null || _a === void 0 ? void 0 : _a.height) > ((_b = remoteVideoStream.streamSize) === null || _b === void 0 ? void 0 : _b.width)
+                ? {
+                    scalingMode: 'Fit',
+                    isMirrored: remoteVideoViewOptions === null || remoteVideoViewOptions === void 0 ? void 0 : remoteVideoViewOptions.isMirrored
+                }
+                : remoteVideoViewOptions;
+        };
+        return (React__default['default'].createElement(_RemoteVideoTile, { key: participant.userId, userId: participant.userId, remoteParticipant: participant, onCreateRemoteStreamView: isVideoParticipant ? onCreateRemoteStreamView : undefined, onDisposeRemoteStreamView: isVideoParticipant ? onDisposeRemoteVideoStreamView : undefined, isAvailable: isVideoParticipant ? remoteVideoStream === null || remoteVideoStream === void 0 ? void 0 : remoteVideoStream.isAvailable : false, isReceiving: isVideoParticipant ? remoteVideoStream === null || remoteVideoStream === void 0 ? void 0 : remoteVideoStream.isReceiving : false, renderElement: isVideoParticipant ? remoteVideoStream === null || remoteVideoStream === void 0 ? void 0 : remoteVideoStream.renderElement : undefined, remoteVideoViewOptions: isVideoParticipant && createViewOptions() ? createViewOptions() : undefined, onRenderAvatar: onRenderAvatar, showMuteIndicator: showMuteIndicator, strings: strings, 
             /* @conditional-compile-remove(PSTN-calls) */
             participantState: participant.state, 
             /* @conditional-compile-remove(pinned-participants) */
@@ -17736,7 +17783,9 @@ const convertRemoteVideoStreamToVideoGalleryStream = (stream) => {
         isMirrored: (_a = stream.view) === null || _a === void 0 ? void 0 : _a.isMirrored,
         renderElement: (_b = stream.view) === null || _b === void 0 ? void 0 : _b.target,
         /* @conditional-compile-remove(pinned-participants) */
-        scalingMode: (_c = stream.view) === null || _c === void 0 ? void 0 : _c.scalingMode
+        scalingMode: (_c = stream.view) === null || _c === void 0 ? void 0 : _c.scalingMode,
+        /* @conditional-compile-remove(pinned-participants) */
+        streamSize: stream.streamSize
     };
 };
 /** @private */
@@ -23484,12 +23533,7 @@ const SendDtmfDialpad = (props) => {
 /** @private */
 const controlBarContainerStyles = {
     paddingTop: '0.25rem',
-    paddingBottom: '0.25rem',
-    // @TODO: this should be exposed through a custom CallComposite Theme API that extends the fluent theme with semantic values
-    boxShadow: `
-    0px 6.400000095367432px 14.399999618530273px 0px #00000021;
-    0px 1.2000000476837158px 3.5999999046325684px 0px #0000001A;
-  `
+    paddingBottom: '0.25rem'
 };
 
 // Copyright (c) Microsoft Corporation.
@@ -23578,8 +23622,12 @@ const callArrangementContainerStyles = (verticalControlBar) => {
 /** @private */
 const RaiseHand = (props) => {
     const raiseHandButtonProps = usePropsFor$1(RaiseHandButton);
+    const callStatus = useSelector$1(getCallStatus);
     const styles = React.useMemo(() => { var _a; return concatButtonBaseStyles((_a = props.styles) !== null && _a !== void 0 ? _a : {}); }, [props.styles]);
-    const raiseHandButtonDisabled = isDisabled(props.option);
+    let raiseHandButtonDisabled = isDisabled(props.option);
+    if (_isInLobbyOrConnecting(callStatus)) {
+        raiseHandButtonDisabled = true;
+    }
     return (React__default['default'].createElement(RaiseHandButton, Object.assign({ "data-ui-id": "call-composite-raisehand-button" }, raiseHandButtonProps, { showLabel: props.displayType !== 'compact', disabled: raiseHandButtonDisabled || props.disabled, styles: styles })));
 };
 /* @conditional-compile-remove(raise-hand) */