@azure/communication-react 1.4.3-alpha-202301070013.0 → 1.4.3-alpha-202301080014.0

package/dist/communication-react.d.ts

@@ -1238,6 +1238,10 @@ export declare type CallCompositeOptions = {
      * if this is not supplied, the composite will not show a unsupported browser page.
      */
     onEnvironmentInfoTroubleshootingClick?: () => void;
+    /**
+     * Remote participant video tile menu options
+     */
+    remoteVideoTileMenu?: RemoteVideoTileMenuOptions;
 };
 
 /**
@@ -7042,6 +7046,20 @@ export declare interface RemoteVideoStreamState {
     view?: VideoStreamRendererViewState;
 }
 
+/**
+ * Menu options for remote video tiles in {@link VideoGallery}.
+ *
+ * @beta
+ */
+export declare interface RemoteVideoTileMenuOptions {
+    /**
+     * If set to true, remote video tiles in the VideoGallery will not have menu options
+     *
+     * @defaultValue false
+     */
+    isHidden?: boolean;
+}
+
 /**
  * @beta
  * The role of a call participant.
@@ -8226,22 +8244,23 @@ export declare interface VideoGalleryProps {
      */
     localVideoCameraCycleButtonProps?: LocalVideoCameraCycleButtonProps;
     /**
-     * List of pinned participant userIds
+     * List of pinned participant userIds.
      */
     pinnedParticipants?: string[];
     /**
-     * Whether to show the remote video tile contextual menu.
-     * @defaultValue `true`
-     */
-    showRemoteVideoTileContextualMenu?: boolean;
-    /**
-     * This callback will be called when a participant video tile is pinned
+     * This callback will be called when a participant video tile is pinned.
      */
     onPinParticipant?: (userId: string) => void;
     /**
-     * This callback will be called when a participant video tile is un-pinned
+     * This callback will be called when a participant video tile is un-pinned.
      */
     onUnpinParticipant?: (userId: string) => void;
+    /**
+     * Options for showing the remote video tile menu.
+     *
+     * @defaultValue \{ kind: 'contextual' \}
+     */
+    remoteVideoTileMenuOptions?: false | VideoTileContextualMenuProps | VideoTileDrawerMenuProps;
 }
 
 /**
@@ -8378,6 +8397,36 @@ export declare interface VideoStreamRendererViewState {
  */
 export declare const VideoTile: (props: VideoTileProps) => JSX.Element;
 
+/**
+ * Properties for showing contextual menu for remote {@link VideoTile} components in {@link VideoGallery}.
+ *
+ * @beta
+ */
+export declare interface VideoTileContextualMenuProps {
+    /**
+     * The menu property kind
+     */
+    kind: 'contextual';
+}
+
+/**
+ * Properties for showing drawer menu on remote {@link VideoTile} long touch in {@link VideoGallery}.
+ *
+ * @beta
+ */
+export declare interface VideoTileDrawerMenuProps {
+    /**
+     * The menu property kind
+     */
+    kind: 'drawer';
+    /**
+     * The optional id property provided on an element that the drawer menu should render within when a
+     * remote participant video tile Drawer is shown. If an id is not provided, then a drawer menu will
+     * render within the VideoGallery component.
+     */
+    hostId?: string;
+}
+
 /**
  * Props for {@link VideoTile}.
  *

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

@@ -158,7 +158,7 @@ const _toCommunicationIdentifier = (id) => {
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
 // GENERATED FILE. DO NOT EDIT MANUALLY.
-var telemetryVersion = '1.4.3-alpha-202301070013.0';
+var telemetryVersion = '1.4.3-alpha-202301080014.0';
 
 // Copyright (c) Microsoft Corporation.
 /**
@@ -10199,6 +10199,13 @@ const PinnedParticipantsLayout = (props) => {
  * Currently the Calling JS SDK supports up to 4 remote video streams
  */
 const DEFAULT_MAX_REMOTE_VIDEO_STREAMS = 4;
+/**
+ * @private
+ * Default remote video tile menu options
+ */
+const DEFAULT_REMOTE_VIDEO_TILE_MENU_OPTIONS = {
+    kind: 'contextual'
+};
 /**
  * VideoGallery represents a layout of video tiles for a specific call.
  * It displays a {@link VideoTile} for the local user as well as for each remote participant who has joined the call.
@@ -10211,14 +10218,19 @@ const VideoGallery = (props) => {
     /* @conditional-compile-remove(pinned-participants) */
     onPinParticipant: onPinParticipantHandler, 
     /* @conditional-compile-remove(pinned-participants) */
-    onUnpinParticipant: onUnpinParticipantHandler } = props;
+    onUnpinParticipant: onUnpinParticipantHandler, 
+    /* @conditional-compile-remove(pinned-participants) */
+    remoteVideoTileMenuOptions = DEFAULT_REMOTE_VIDEO_TILE_MENU_OPTIONS } = props;
     const ids = useIdentifiers();
     const theme = useTheme();
     const localeStrings = useLocale$1().strings.videoGallery;
     const strings = React.useMemo(() => (Object.assign(Object.assign({}, localeStrings), props.strings)), [localeStrings, props.strings]);
-    // @TODO: Provide a default value to this hook using the `drawerMenuHostId` value in the props when VideoGallery props have been updated.
-    // Example: `const drawerMenuHostId = useId('drawerMenuHost', props.drawerMenuHostId);`
-    const drawerMenuHostId = reactHooks.useId('drawerMenuHost');
+    /* @conditional-compile-remove(pinned-participants) */
+    const drawerMenuHostIdFromProp = remoteVideoTileMenuOptions && remoteVideoTileMenuOptions.kind === 'drawer'
+        ? remoteVideoTileMenuOptions.hostId
+        : undefined;
+    /* @conditional-compile-remove(pinned-participants) */
+    const drawerMenuHostId = reactHooks.useId('drawerMenuHost', drawerMenuHostIdFromProp);
     const shouldFloatLocalVideo = !!(layout === 'floatingLocalVideo' && remoteParticipants.length > 0);
     const containerRef = React.useRef(null);
     const containerWidth = _useContainerWidth(containerRef);
@@ -10289,7 +10301,9 @@ const VideoGallery = (props) => {
             /* @conditional-compile-remove(PSTN-calls) */
             participantState: participant.state, 
             /* @conditional-compile-remove(pinned-participants) */
-            showRemoteVideoTileContextualMenu: props.showRemoteVideoTileContextualMenu, drawerMenuHostId: drawerMenuHostId, 
+            showRemoteVideoTileContextualMenu: remoteVideoTileMenuOptions && remoteVideoTileMenuOptions.kind === 'contextual', 
+            /* @conditional-compile-remove(pinned-participants) */
+            drawerMenuHostId: drawerMenuHostId, 
             /* @conditional-compile-remove(pinned-participants) */
             onPinParticipant: onPinParticipant, 
             /* @conditional-compile-remove(pinned-participants) */
@@ -10303,8 +10317,8 @@ const VideoGallery = (props) => {
         onRenderAvatar,
         showMuteIndicator,
         strings,
-        drawerMenuHostId,
-        /* @conditional-compile-remove(pinned-participants) */ props.showRemoteVideoTileContextualMenu,
+        /* @conditional-compile-remove(pinned-participants) */ drawerMenuHostId,
+        /* @conditional-compile-remove(pinned-participants) */ remoteVideoTileMenuOptions,
         /* @conditional-compile-remove(pinned-participants) */ pinnedParticipants,
         /* @conditional-compile-remove(pinned-participants) */ onPinParticipant,
         /* @conditional-compile-remove(pinned-participants) */ onUnpinParticipant
@@ -10355,7 +10369,10 @@ const VideoGallery = (props) => {
         }
         return React__default['default'].createElement(DefaultLayout, Object.assign({}, layoutProps));
     }, [layout, layoutProps]);
-    return (React__default['default'].createElement("div", { id: drawerMenuHostId, "data-ui-id": ids.videoGallery, ref: containerRef, className: react.mergeStyles(videoGalleryOuterDivStyle, styles === null || styles === void 0 ? void 0 : styles.root) }, videoGalleryLayout));
+    return (React__default['default'].createElement("div", { 
+        /* @conditional-compile-remove(pinned-participants) */
+        // We don't assign an drawer menu host id to the VideoGallery when a drawerMenuHostId is assigned from props
+        id: drawerMenuHostIdFromProp ? undefined : drawerMenuHostId, "data-ui-id": ids.videoGallery, ref: containerRef, className: react.mergeStyles(videoGalleryOuterDivStyle, styles === null || styles === void 0 ? void 0 : styles.root) }, videoGalleryLayout));
 };
 
 // Copyright (c) Microsoft Corporation.
@@ -18609,6 +18626,7 @@ const remoteVideoViewOptions = {
  * @private
  */
 const MediaGallery = (props) => {
+    var _a;
     const videoGalleryProps = usePropsFor$1(VideoGallery);
     const cameraSwitcherCameras = useSelector$1(localVideoCameraCycleButtonSelector);
     const cameraSwitcherCallback = useHandlers();
@@ -18622,11 +18640,26 @@ const MediaGallery = (props) => {
                 React__default['default'].createElement(AvatarPersona, Object.assign({ userId: userId }, options, { dataProvider: props.onFetchAvatarPersonaData })))));
     }, [props.onFetchAvatarPersonaData]);
     useLocalVideoStartTrigger(!!props.isVideoStreamOn);
+    /* @conditional-compile-remove(pinned-participants) */
+    const remoteVideoTileMenuOptions = React.useMemo(() => {
+        var _a;
+        return ((_a = props.remoteVideoTileMenuOptions) === null || _a === void 0 ? void 0 : _a.isHidden)
+            ? false
+            : props.isMobile
+                ? { kind: 'drawer', hostId: props.drawerMenuHostId }
+                : { kind: 'contextual' };
+    }, [(_a = props.remoteVideoTileMenuOptions) === null || _a === void 0 ? void 0 : _a.isHidden, props.isMobile, props.drawerMenuHostId]);
     const VideoGalleryMemoized = React.useMemo(() => {
         return (React__default['default'].createElement(VideoGallery, Object.assign({}, videoGalleryProps, { localVideoViewOptions: localVideoViewOptions$2, remoteVideoViewOptions: remoteVideoViewOptions, styles: VideoGalleryStyles, layout: "floatingLocalVideo", showCameraSwitcherInLocalPreview: props.isMobile, localVideoCameraCycleButtonProps: cameraSwitcherProps, onRenderAvatar: onRenderAvatar, 
             /* @conditional-compile-remove(pinned-participants) */
-            showRemoteVideoTileContextualMenu: !props.isMobile })));
-    }, [videoGalleryProps, props.isMobile, cameraSwitcherProps, onRenderAvatar]);
+            remoteVideoTileMenuOptions: remoteVideoTileMenuOptions })));
+    }, [
+        videoGalleryProps,
+        props.isMobile,
+        onRenderAvatar,
+        cameraSwitcherProps,
+        /* @conditional-compile-remove(pinned-participants) */ remoteVideoTileMenuOptions
+    ]);
     return (React__default['default'].createElement(React__default['default'].Fragment, null,
         React__default['default'].createElement(Announcer, { announcementString: announcerString, ariaLive: 'polite' }),
         VideoGalleryMemoized));
@@ -18857,7 +18890,9 @@ const CallPage = (props) => {
         /* @conditional-compile-remove(one-to-n-calling) */
         onFetchAvatarPersonaData: onFetchAvatarPersonaData, mobileView: mobileView, 
         /* @conditional-compile-remove(one-to-n-calling) */
-        modalLayerHostId: props.modalLayerHostId, onRenderGalleryContent: () => _isInCall(callStatus) ? (isNetworkHealthy(networkReconnectTileProps.networkReconnectValue) ? (React__default['default'].createElement(MediaGallery, Object.assign({ isMobile: mobileView }, mediaGalleryProps, mediaGalleryHandlers, { onRenderAvatar: onRenderAvatar, onFetchAvatarPersonaData: onFetchAvatarPersonaData, drawerMenuHostId: drawerMenuHostId }))) : (React__default['default'].createElement(NetworkReconnectTile, Object.assign({}, networkReconnectTileProps)))) : (React__default['default'].createElement(React__default['default'].Fragment, null)), dataUiId: 'call-page' }));
+        modalLayerHostId: props.modalLayerHostId, onRenderGalleryContent: () => _isInCall(callStatus) ? (isNetworkHealthy(networkReconnectTileProps.networkReconnectValue) ? (React__default['default'].createElement(MediaGallery, Object.assign({ isMobile: mobileView }, mediaGalleryProps, mediaGalleryHandlers, { onRenderAvatar: onRenderAvatar, onFetchAvatarPersonaData: onFetchAvatarPersonaData, 
+            /* @conditional-compile-remove(pinned-participants) */
+            remoteVideoTileMenuOptions: options === null || options === void 0 ? void 0 : options.remoteVideoTileMenu, drawerMenuHostId: drawerMenuHostId }))) : (React__default['default'].createElement(NetworkReconnectTile, Object.assign({}, networkReconnectTileProps)))) : (React__default['default'].createElement(React__default['default'].Fragment, null)), dataUiId: 'call-page' }));
 };
 /**
  * @private