[Release] stabilize reactions (#4429)

* stabilize reactions

* Change files

* fix tagging

* Update packages/react-composites CallWithChatComposite browser test snapshots

* fix build

* Update packages/react-composites CallComposite browser test snapshots

* update beta API

* update API

---------

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

Author: dmceachernmsft

change-beta/@azure-communication-react-a6e6a366-3b19-4900-b692-77748f7b01ea.json

@@ -0,0 +1,9 @@
+{
+  "type": "prerelease",
+  "area": "feature",
+  "workstream": "Reactions",
+  "comment": "Microsoft Azure Communications Services has recently updated its UI library composites and components to include call reactions. The UI Library will support the following list of live call reactions: Like 3D emoji like reaction, Love 3D Emoji heart reaction, Applause 3D emoji applause reaction, Laugh  3D emoji laughter reaction, Surprise 3D emoji surprise reaction. Call reactions are associated to the user sending it and are visible to all types of users (in-tenant, guest, federated, anonymous). Call reactions are supported in all types of calls (1:1, group) and meetings (scheduled, meet now, private, channel) of all sizes (small, large, XL). The addition of this feature will assist with greater engagement within calls, as people can now react or respond in real time without having to speak or interrupt.",
+  "packageName": "@azure/communication-react",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

common/config/babel/features.js

@@ -17,8 +17,6 @@ module.exports = {
     "gallery-layout-composite",
     // feature for hiding attendee name in the teams meeting
     "hide-attendee-name",
-    // Feature for meeting reactions
-    'reaction',
     // Feature for Rich Text Editor (RTE) support
     'rich-text-editor',
     // Join meeting with meetingId and passcode
@@ -95,6 +93,8 @@ module.exports = {
      // Feature for end of call survey
     'end-of-call-survey',
     // Feature for PPT Live for teams meeting
-    'ppt-live'
+    'ppt-live',
+    // Feature for meeting reactions
+    'reaction',
   ]
 }

packages/calling-component-bindings/src/callControlSelectors.ts

@@ -144,7 +144,7 @@ export const raiseHandButtonSelector: RaiseHandButtonSelector = reselect.createS
 /**
  * Selector type for {@link ReactionButton} component.
  *
- * @beta
+ * @public
  */
 export type ReactionButtonSelector = (
   state: CallClientState,
@@ -158,7 +158,7 @@ export type ReactionButtonSelector = (
 /**
  * Selector for {@link ReactionButton} component.
  *
- * @beta
+ * @public
  */
 export const reactionButtonSelector: ReactionButtonSelector = reselect.createSelector(
   [getLocalParticipantReactionState, getCallState],

packages/calling-component-bindings/src/handlers/createCommonHandlers.ts

@@ -62,9 +62,6 @@ export interface CommonCallingHandlers {
   onLowerHand: () => Promise<void>;
   onToggleRaiseHand: () => Promise<void>;
   /* @conditional-compile-remove(reaction) */
-  /**
-   * @beta
-   */
   onReactionClick: (reaction: Reaction) => Promise<void>;
   /* @conditional-compile-remove(PSTN-calls) */
   onToggleHold: () => Promise<void>;

packages/calling-component-bindings/src/hooks/usePropsFor.ts

@@ -140,10 +140,7 @@ export const getSelector = <Component extends (props: any) => JSX.Element | unde
   if (component === HoldButton) {
     return findConditionalCompiledSelector(component);
   }
-  /* @conditional-compile-remove(reaction) */
-  if (component === ReactionButton) {
-    return findConditionalCompiledSelector(component);
-  }
+
   return findSelector(component);
 };
 
@@ -174,6 +171,8 @@ const findSelector = (component: (props: any) => JSX.Element | undefined): any =
       return errorBarSelector;
     case RaiseHandButton:
       return raiseHandButtonSelector;
+    case ReactionButton:
+      return reactionButtonSelector;
   }
   return undefined;
 };
@@ -185,9 +184,5 @@ const findConditionalCompiledSelector = (component: (props: any) => JSX.Element
     case HoldButton:
       /* @conditional-compile-remove(PSTN-calls) */
       return holdButtonSelector;
-    /* @conditional-compile-remove(reaction) */
-    case ReactionButton:
-      /* @conditional-compile-remove(reaction) */
-      return reactionButtonSelector;
   }
 };

packages/calling-stateful-client/src/CallClientState.ts

@@ -277,7 +277,7 @@ export type RaisedHandState = {
  * State only version of {@link @azure/communication-calling#Call.ReactionMessage} with UI helper props receivedOn.
  * Reaction state with a timestamp which helps UI to decide to render the reaction accordingly.
  *
- * @beta
+ * @public
  */
 export type ReactionState = {
   /**
@@ -453,7 +453,7 @@ export interface RemoteParticipantState {
    * Proxy of {@link @azure/communication-calling#Call.ReactionMessage} with
    * UI helper props receivedOn which indicates the timestamp when the message was received.
    *
-   * @beta
+   * @public
    */
   reactionState?: ReactionState;
   /* @conditional-compile-remove(spotlight) */
@@ -563,7 +563,7 @@ export interface CallState {
    * Proxy of {@link @azure/communication-calling#Call.ReactionMessage} with
    * UI helper props receivedOn which indicates the timestamp when the message was received.
    *
-   * @beta
+   * @public
    */
   localParticipantReaction?: ReactionState;
   /**

packages/communication-react/review/beta/communication-react.api.md

@@ -415,7 +415,6 @@ export interface CallAdapterCallOperations {
     leaveCall(forEveryone?: boolean): Promise<void>;
     lowerHand(): Promise<void>;
     mute(): Promise<void>;
-    // @beta
     onReactionClick(reaction: Reaction_2): Promise<void>;
     raiseHand(): Promise<void>;
     removeParticipant(userId: string): Promise<void>;
@@ -1035,7 +1034,6 @@ export interface CallState {
     isMuted: boolean;
     isScreenSharingOn: boolean;
     kind: CallKind;
-    // @beta
     localParticipantReaction?: ReactionState;
     localRecording: LocalRecordingCallFeatureState;
     localVideoStreams: LocalVideoStreamState[];
@@ -1101,7 +1099,6 @@ export interface CallWithChatAdapterManagement {
     loadPreviousChatMessages(messagesToLoad: number): Promise<boolean>;
     lowerHand(): Promise<void>;
     mute(): Promise<void>;
-    // @beta
     onReactionClick(reaction: Reaction_2): Promise<void>;
     queryCameras(): Promise<VideoDeviceInfo[]>;
     queryMicrophones(): Promise<AudioDeviceInfo[]>;
@@ -1284,7 +1281,6 @@ export interface CallWithChatClientState {
     latestCallErrors: AdapterErrors;
     latestChatErrors: AdapterErrors;
     onResolveVideoEffectDependency?: () => Promise<VideoBackgroundEffectsDependency>;
-    // @beta
     reactions?: ReactionResources;
     selectedVideoBackgroundEffect?: VideoBackgroundEffect;
     userId: CommunicationIdentifierKind;
@@ -2017,7 +2013,7 @@ export interface CommonCallingHandlers {
     onLowerHand: () => Promise<void>;
     // (undocumented)
     onRaiseHand: () => Promise<void>;
-    // @beta (undocumented)
+    // (undocumented)
     onReactionClick: (reaction: Reaction_2) => Promise<void>;
     // (undocumented)
     onRemoveParticipant(userId: string): Promise<void>;
@@ -2202,7 +2198,6 @@ export interface ComponentStrings {
     ParticipantList: ParticipantListStrings;
     participantsButton: ParticipantsButtonStrings;
     raiseHandButton: RaiseHandButtonStrings;
-    // @beta
     reactionButton: ReactionButtonStrings;
     richTextSendBox: RichTextSendBoxStrings;
     screenShareButton: ScreenShareButtonStrings;
@@ -3769,20 +3764,20 @@ export interface RaiseHandCallFeature {
     raisedHands: RaisedHandState[];
 }
 
-// @beta
+// @public
 export type Reaction = {
     reactionType: string;
     receivedOn: Date;
 };
 
-// @beta
+// @public
 export interface ReactionButtonProps extends ControlBarButtonProps {
     onReactionClick: (reaction: string) => Promise<void>;
     reactionResources: ReactionResources;
     strings?: Partial<ReactionButtonStrings>;
 }
 
-// @beta
+// @public
 export interface ReactionButtonStrings {
     applauseReactionTooltipContent?: string;
     ariaLabel: string;
@@ -3795,7 +3790,7 @@ export interface ReactionButtonStrings {
     tooltipDisabledContent?: string;
 }
 
-// @beta
+// @public
 export interface ReactionResources {
     applauseReaction?: ReactionSprite;
     heartReaction?: ReactionSprite;
@@ -3804,14 +3799,14 @@ export interface ReactionResources {
     surprisedReaction?: ReactionSprite;
 }
 
-// @beta
+// @public
 export type ReactionSprite = {
     url: string;
     frameCount: number;
     size?: number;
 };
 
-// @beta
+// @public
 export type ReactionState = {
     reactionMessage: ReactionMessage;
     receivedOn: Date;
@@ -3841,7 +3836,6 @@ export interface RemoteParticipantState {
     isMuted: boolean;
     isSpeaking: boolean;
     raisedHand?: RaisedHandState;
-    // @beta
     reactionState?: ReactionState;
     role?: ParticipantRole;
     spotlight?: SpotlightState;
@@ -4535,7 +4529,6 @@ export type VideoGalleryLayout = 'default' | 'floatingLocalVideo' | 'speaker' |
 // @public
 export interface VideoGalleryLocalParticipant extends VideoGalleryParticipant {
     raisedHand?: RaisedHand;
-    // @beta
     reaction?: Reaction;
 }
 
@@ -4577,7 +4570,6 @@ export interface VideoGalleryProps {
     onUnpinParticipant?: (userId: string) => void;
     overflowGalleryPosition?: OverflowGalleryPosition;
     pinnedParticipants?: string[];
-    // @beta
     reactionResources?: ReactionResources;
     remoteParticipants?: VideoGalleryRemoteParticipant[];
     remoteVideoTileMenu?: false | VideoTileContextualMenuProps | VideoTileDrawerMenuProps;
@@ -4593,7 +4585,6 @@ export interface VideoGalleryProps {
 export interface VideoGalleryRemoteParticipant extends VideoGalleryParticipant {
     isSpeaking?: boolean;
     raisedHand?: RaisedHand;
-    // @beta
     reaction?: Reaction;
     screenShareStream?: VideoGalleryStream;
     // @beta
@@ -4699,13 +4690,11 @@ export interface VideoTileProps {
     noVideoAvailableAriaLabel?: string;
     onLongTouch?: () => void;
     onRenderPlaceholder?: OnRenderAvatarCallback;
-    // @beta
     overlay?: JSX.Element | null;
     participantState?: ParticipantState;
     personaMaxSize?: number;
     personaMinSize?: number;
     raisedHand?: RaisedHand;
-    // @beta
     reactionResources?: ReactionResources;
     renderElement?: JSX.Element | null;
     showLabel?: boolean;