Skip to content

Commit 6523b81

Browse files
edwardlee-msftgithub-actions[bot]
edwardlee-msft
and
github-actions[bot]
authored
Custom Button Injection; stabilize, storybook, refactor (#3642)
* Export mockcalladapter internally for storybook use. Add Custom Button Injection storybook entry * Add form factor * Add more custom button snippets * Add border outline for custom button on mobile example * Update Overflow to use unique id and exported addcss function * Remove styles prop from custom buttons * Update api and storybok pages corresponding with api changes * Update storybook pages with ui feedback and remove dual code * Change files * Duplicate change files for beta release * Change files * Duplicate change files for beta release * Delete change/@azure-communication-react-d0e68dac-a30e-4add-ab40-d703c0a4de32.json Signed-off-by: edwardlee-msft <edwardlee@microsoft.com> * Delete change-beta/@azure-communication-react-d0e68dac-a30e-4add-ab40-d703c0a4de32.json Signed-off-by: edwardlee-msft <edwardlee@microsoft.com> * Resolve show label and tooltip not appearing * Address walkthrough feedback * Fix linter header for MockCallAdapter * Update packages/react-composites CallWithChatComposite browser test snapshots * Update packages/react-composites CallWithChatComposite browser test snapshots * Update packages/react-composites CallComposite browser test snapshots * Update packages/react-composites CallComposite browser test snapshots * Update Custom Button e2e tests * Update packages/react-composites CallWithChatComposite browser test snapshots * Update packages/react-composites CallWithChatComposite browser test snapshots * Update packages/react-composites CallComposite browser test snapshots * Update packages/react-composites CallComposite browser test snapshots * Update snippet linter issues * Remove storybook warnings * Remove eslint issue --------- Signed-off-by: edwardlee-msft <edwardlee@microsoft.com> Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
1 parent e239de7 commit 6523b81

48 files changed

Lines changed: 1568 additions & 420 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎change-beta/@azure-communication-react-09acf9b4-6a17-42ba-a5e2-df4b2c254865.json‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
{
2+
"type": "minor",
3+
"area": "feature",
4+
"workstream": "Custom Button Injection",
5+
"comment": "Update and stabilize custom button injection",
6+
"packageName": "@azure/communication-react",
7+
"email": "edwardlee@microsoft.com",
8+
"dependentChangeType": "patch"
9+
}

‎change/@azure-communication-react-09acf9b4-6a17-42ba-a5e2-df4b2c254865.json‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
{
2+
"type": "minor",
3+
"area": "feature",
4+
"workstream": "Custom Button Injection",
5+
"comment": "Update and stabilize custom button injection",
6+
"packageName": "@azure/communication-react",
7+
"email": "edwardlee@microsoft.com",
8+
"dependentChangeType": "patch"
9+
}

‎common/config/babel/.babelrc.js‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -119,7 +119,10 @@ process.env['COMMUNICATION_REACT_FLAVOR'] !== 'beta' &&
119119
// Feature for gallery layouts
120120
'gallery-layouts',
121121
// feature for vertical overflow gallery
122-
'vertical-gallery'
122+
'vertical-gallery',
123+
// API for injecting custom buttons in he control bar for
124+
// `CallComposite` and `CallWithChatComposite`.
125+
'control-bar-button-injection'
123126
]
124127
}
125128
]);

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

Lines changed: 119 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -579,6 +579,7 @@ export type CallCompositeIcons = {
579579
FocusedContentGalleryLayout?: JSX.Element;
580580
OverflowGalleryTop?: JSX.Element;
581581
LargeGalleryLayout?: JSX.Element;
582+
DefaultCustomButton?: JSX.Element;
582583
};
583584

584585
// @public
@@ -1148,6 +1149,7 @@ export type CallWithChatCompositeIcons = {
11481149
PeoplePaneAddPerson?: JSX.Element;
11491150
PeoplePaneOpenDialpad?: JSX.Element;
11501151
DialpadStartCall?: JSX.Element;
1152+
DefaultCustomButton?: JSX.Element;
11511153
EditBoxCancel?: JSX.Element;
11521154
EditBoxSubmit?: JSX.Element;
11531155
MessageDelivered?: JSX.Element;
@@ -2172,44 +2174,34 @@ export type CustomAvatarOptions = {
21722174
showUnknownPersonaCoin?: boolean;
21732175
};
21742176

2175-
// @beta
2176-
type CustomCallControlButtonCallback = (args: CustomCallControlButtonCallbackArgs) => CustomCallWithChatControlButtonProps;
2177-
export { CustomCallControlButtonCallback }
2178-
export { CustomCallControlButtonCallback as CustomCallWithChatControlButtonCallback }
2177+
// @public
2178+
export type CustomCallControlButtonCallback = (args: CustomCallControlButtonCallbackArgs) => CustomCallControlButtonProps;
21792179

2180-
// @beta
2180+
// @public
21812181
export interface CustomCallControlButtonCallbackArgs {
21822182
displayType?: CallControlDisplayType;
21832183
}
21842184

2185-
// @beta
2186-
type CustomCallControlButtonPlacement = 'primary' | 'overflow' | 'secondary';
2187-
export { CustomCallControlButtonPlacement }
2188-
export { CustomCallControlButtonPlacement as CustomCallWithChatControlButtonPlacement }
2189-
2190-
// @beta
2191-
export interface CustomCallControlButtonProps extends CustomControlButtonProps {
2192-
iconName?: string;
2193-
placement: CustomCallControlButtonPlacement;
2194-
}
2185+
// @public
2186+
export type CustomCallControlButtonPlacement = 'primary' | 'overflow' | 'secondary';
21952187

2196-
// @beta
2197-
export interface CustomCallWithChatControlButtonProps extends CustomControlButtonProps {
2188+
// @public
2189+
export interface CustomCallControlButtonProps {
2190+
disabled?: boolean;
21982191
iconName?: string;
2192+
id?: string;
2193+
onItemClick?: () => void;
21992194
placement: CustomCallControlButtonPlacement;
2195+
showLabel?: boolean;
2196+
strings?: CustomCallControlButtonStrings;
22002197
}
22012198

2202-
// @beta
2203-
export interface CustomControlButtonProps {
2199+
// @public
2200+
export interface CustomCallControlButtonStrings {
22042201
ariaDescription?: string;
22052202
ariaLabel?: string;
2206-
disabled?: boolean;
2207-
id?: string;
2208-
key?: string | number;
2209-
onItemClick?: () => void;
2210-
showLabel?: boolean;
2211-
styles?: ControlBarButtonStyles | BaseCustomStyles;
2212-
text?: string;
2203+
label?: string;
2204+
tooltipContent?: string;
22132205
}
22142206

22152207
// @public
@@ -2396,6 +2388,7 @@ export const DEFAULT_COMPOSITE_ICONS: {
23962388
FocusedContentGalleryLayout?: JSX.Element | undefined;
23972389
OverflowGalleryTop?: JSX.Element | undefined;
23982390
LargeGalleryLayout?: JSX.Element | undefined;
2391+
DefaultCustomButton?: JSX.Element | undefined;
23992392
ChevronLeft?: JSX.Element | undefined;
24002393
ControlBarChatButtonActive?: JSX.Element | undefined;
24012394
ControlBarChatButtonInactive?: JSX.Element | undefined;
@@ -3247,6 +3240,106 @@ export interface MicrophoneSitePermissionsProps extends CommonSitePermissionsPro
32473240
// @beta
32483241
export type MicrophoneSitePermissionsStrings = SitePermissionsStrings;
32493242

3243+
// @internal
3244+
export class _MockCallAdapter implements CallAdapter {
3245+
constructor(testState: {
3246+
askDevicePermission?: (constrain: PermissionConstraints) => Promise<void>;
3247+
localParticipantRole?: ParticipantRole;
3248+
});
3249+
// (undocumented)
3250+
addParticipant(): Promise<void>;
3251+
// (undocumented)
3252+
allowUnsupportedBrowserVersion(): void;
3253+
// (undocumented)
3254+
askDevicePermission(constrain: PermissionConstraints): Promise<void>;
3255+
// (undocumented)
3256+
createStreamView(): Promise<void>;
3257+
// (undocumented)
3258+
dispose(): void;
3259+
// (undocumented)
3260+
disposeLocalVideoStreamView(): Promise<void>;
3261+
// (undocumented)
3262+
disposeRemoteVideoStreamView(): Promise<void>;
3263+
// (undocumented)
3264+
disposeScreenShareStreamView(): Promise<void>;
3265+
// (undocumented)
3266+
disposeStreamView(): Promise<void>;
3267+
// (undocumented)
3268+
getEnvironmentInfo(): Promise<EnvironmentInfo>;
3269+
// (undocumented)
3270+
getState(): CallAdapterState;
3271+
// (undocumented)
3272+
holdCall(): Promise<void>;
3273+
// (undocumented)
3274+
joinCall(): Call | undefined;
3275+
// (undocumented)
3276+
leaveCall(): Promise<void>;
3277+
// (undocumented)
3278+
lowerHand(): Promise<void>;
3279+
// (undocumented)
3280+
mute(): Promise<void>;
3281+
// (undocumented)
3282+
off(): void;
3283+
// (undocumented)
3284+
offStateChange(handler: (state: CallAdapterState) => void): void;
3285+
// (undocumented)
3286+
on(): void;
3287+
// (undocumented)
3288+
onStateChange(handler: (state: CallAdapterState) => void): void;
3289+
// (undocumented)
3290+
queryCameras(): Promise<VideoDeviceInfo[]>;
3291+
// (undocumented)
3292+
queryMicrophones(): Promise<AudioDeviceInfo[]>;
3293+
// (undocumented)
3294+
querySpeakers(): Promise<AudioDeviceInfo[]>;
3295+
// (undocumented)
3296+
raiseHand(): Promise<void>;
3297+
// (undocumented)
3298+
removeParticipant(): Promise<void>;
3299+
// (undocumented)
3300+
resumeCall(): Promise<void>;
3301+
// (undocumented)
3302+
sendDtmfTone(dtmfTone: DtmfTone_2): Promise<void>;
3303+
// (undocumented)
3304+
setCamera(): Promise<void>;
3305+
// (undocumented)
3306+
setCaptionLanguage(): Promise<void>;
3307+
// (undocumented)
3308+
setMicrophone(): Promise<void>;
3309+
// (undocumented)
3310+
setSpeaker(): Promise<void>;
3311+
// (undocumented)
3312+
setSpokenLanguage(): Promise<void>;
3313+
// (undocumented)
3314+
setState(state: CallAdapterState): void;
3315+
// (undocumented)
3316+
startCall(): Call | undefined;
3317+
// (undocumented)
3318+
startCamera(): Promise<void>;
3319+
// (undocumented)
3320+
startCaptions(): Promise<void>;
3321+
// (undocumented)
3322+
startScreenShare(): Promise<void>;
3323+
// (undocumented)
3324+
startVideoBackgroundEffect(): Promise<void>;
3325+
// (undocumented)
3326+
state: CallAdapterState;
3327+
// (undocumented)
3328+
stopCamera(): Promise<void>;
3329+
// (undocumented)
3330+
stopCaptions(): Promise<void>;
3331+
// (undocumented)
3332+
stopScreenShare(): Promise<void>;
3333+
// (undocumented)
3334+
stopVideoBackgroundEffects(): Promise<void>;
3335+
// (undocumented)
3336+
unmute(): Promise<void>;
3337+
// (undocumented)
3338+
updateBackgroundPickerImages(): void;
3339+
// (undocumented)
3340+
updateSelectedVideoBackgroundEffect(): void;
3341+
}
3342+
32503343
// @public
32513344
export type NetworkDiagnosticChangedEvent = NetworkDiagnosticChangedEventArgs & {
32523345
type: 'network';

0 commit comments

Comments
 (0)
⚡