Skip to content

Commit bc1c17d

Browse files
dmceachernmsftgithub-actions[bot]
dmceachernmsft
and
github-actions[bot]
authored
[Call Readiness] Allow unsupported browser version users to join a call (#2581)
* Add continue button to browserVersion UI * update styles * add new button logic to call adapter * add logic to callWithChat * fix handler logic * fix styles * Fix cc and build stable API * remove console * Change files * Duplicate change files for beta release * update strings * update styles for strings * update per comments * update UI state naming * build API * fix test errors * Update packages/react-composites CallComposite browser test snapshots * Update packages/react-composites CallComposite browser test snapshots * update styles * Update packages/react-composites CallComposite browser test snapshots * update styles * Update packages/react-composites CallComposite browser test snapshots * update handler logic and other comments * fix cc * update styles * Update packages/react-composites CallComposite browser test snapshots Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
1 parent fce25f0 commit bc1c17d

44 files changed

Lines changed: 238 additions & 65 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-2665eb71-b1de-40e0-9435-48114f9e49f3.json‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"type": "prerelease",
3+
"comment": "Introduce unsupported browser version ability to let old browser into call in composites",
4+
"packageName": "@azure/communication-react",
5+
"email": "94866715+dmceachernmsft@users.noreply.github.com",
6+
"dependentChangeType": "patch"
7+
}

‎change/@azure-communication-react-2665eb71-b1de-40e0-9435-48114f9e49f3.json‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"type": "prerelease",
3+
"comment": "Introduce unsupported browser version ability to let old browser into call in composites",
4+
"packageName": "@azure/communication-react",
5+
"email": "94866715+dmceachernmsft@users.noreply.github.com",
6+
"dependentChangeType": "patch"
7+
}

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

Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -271,6 +271,7 @@ export interface CallAdapterCallOperations {
271271
addParticipant(participant: PhoneNumberIdentifier, options?: AddPhoneNumberOptions): Promise<void>;
272272
// (undocumented)
273273
addParticipant(participant: CommunicationUserIdentifier): Promise<void>;
274+
allowUnsupportedBrowserVersion(): void;
274275
createStreamView(remoteUserId?: string, options?: VideoStreamOptions): Promise<void | CreateVideoStreamViewResult>;
275276
disposeStreamView(remoteUserId?: string, options?: VideoStreamOptions): Promise<void>;
276277
// @beta
@@ -322,7 +323,7 @@ export type CallAdapterLocator = TeamsMeetingLinkLocator | GroupCallLocator | /*
322323

323324
// @beta
324325
export type CallAdapterOptionalFeatures = {
325-
unsupportedEnvironment?: boolean;
326+
unsupportedEnvironment?: boolean | UnsupportedEnvironmentFeatures;
326327
};
327328

328329
// @public
@@ -360,6 +361,7 @@ export interface CallAdapterSubscribers {
360361
export type CallAdapterUiState = {
361362
isLocalPreviewMicrophoneEnabled: boolean;
362363
page: CallCompositePage;
364+
unsupportedBrowserVersionsAllowed?: boolean;
363365
};
364366

365367
// @public
@@ -732,6 +734,7 @@ export interface CallWithChatAdapterManagement {
732734
addParticipant(participant: PhoneNumberIdentifier, options?: AddPhoneNumberOptions): Promise<void>;
733735
// (undocumented)
734736
addParticipant(participant: CommunicationUserIdentifier): Promise<void>;
737+
allowUnsupportedBrowserVersion(): void;
735738
askDevicePermission(constrain: PermissionConstraints): Promise<void>;
736739
// @beta (undocumented)
737740
cancelFileUpload: (id: string) => void;
@@ -866,6 +869,8 @@ export interface CallWithChatAdapterUiState {
866869
fileUploads?: FileUploadsUiState;
867870
isLocalPreviewMicrophoneEnabled: boolean;
868871
page: CallCompositePage;
872+
// @beta
873+
unsupportedBrowserVersionsAllowed?: boolean;
869874
}
870875

871876
// @public
@@ -3097,17 +3102,24 @@ export const UnsupportedBrowserVersion: (props: UnsupportedBrowserVersionProps)
30973102

30983103
// @beta
30993104
export interface UnsupportedBrowserVersionProps {
3105+
onContinueClick?: () => void;
31003106
onTroubleshootingClick?: () => void;
3101-
strings: UnsupportedBrowserVersionStrings;
3107+
strings?: UnsupportedBrowserVersionStrings;
31023108
}
31033109

31043110
// @beta
31053111
export interface UnsupportedBrowserVersionStrings {
3112+
continueAnywayButtonText?: string;
31063113
moreHelpLinkText: string;
31073114
primaryText: string;
31083115
secondaryText: string;
31093116
}
31103117

3118+
// @beta
3119+
export type UnsupportedEnvironmentFeatures = {
3120+
unsupportedBrowserVersionAllowed?: boolean;
3121+
};
3122+
31113123
// @beta
31123124
export const UnsupportedOperatingSystem: (props: UnsupportedOperatingSystemProps) => JSX.Element;
31133125

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

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1584,12 +1584,14 @@ export const UnsupportedBrowserVersion: (props: UnsupportedBrowserVersionProps)
15841584

15851585
// @beta
15861586
export interface UnsupportedBrowserVersionProps {
1587+
onContinueClick?: () => void;
15871588
onTroubleshootingClick?: () => void;
1588-
strings: UnsupportedBrowserVersionStrings;
1589+
strings?: UnsupportedBrowserVersionStrings;
15891590
}
15901591

15911592
// @beta
15921593
export interface UnsupportedBrowserVersionStrings {
1594+
continueAnywayButtonText?: string;
15931595
moreHelpLinkText: string;
15941596
primaryText: string;
15951597
secondaryText: string;

‎packages/react-components/review/stable/react-components.api.md‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1345,12 +1345,14 @@ export const UnsupportedBrowserVersion: (props: UnsupportedBrowserVersionProps)
13451345

13461346
// @beta
13471347
export interface UnsupportedBrowserVersionProps {
1348+
onContinueClick?: () => void;
13481349
onTroubleshootingClick?: () => void;
1349-
strings: UnsupportedBrowserVersionStrings;
1350+
strings?: UnsupportedBrowserVersionStrings;
13501351
}
13511352

13521353
// @beta
13531354
export interface UnsupportedBrowserVersionStrings {
1355+
continueAnywayButtonText?: string;
13541356
moreHelpLinkText: string;
13551357
primaryText: string;
13561358
secondaryText: string;

‎packages/react-components/src/components/UnsupportedBrowserVersion.tsx‎

Lines changed: 13 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,8 @@ export interface UnsupportedBrowserVersionStrings {
1717
secondaryText: string;
1818
/** String to display in the text for the help link */
1919
moreHelpLinkText: string;
20+
/** String for continue without updating button */
21+
continueAnywayButtonText?: string;
2022
}
2123

2224
/**
@@ -28,7 +30,9 @@ export interface UnsupportedBrowserVersionProps {
2830
/** Handler to perform an action when the help link is actioned */
2931
onTroubleshootingClick?: () => void;
3032
/** String overrides for the component */
31-
strings: UnsupportedBrowserVersionStrings;
33+
strings?: UnsupportedBrowserVersionStrings;
34+
/** Handler to allow user to continue into the call */
35+
onContinueClick?: () => void;
3236
}
3337

3438
/**
@@ -38,6 +42,12 @@ export interface UnsupportedBrowserVersionProps {
3842
* @beta
3943
*/
4044
export const UnsupportedBrowserVersion = (props: UnsupportedBrowserVersionProps): JSX.Element => {
41-
const { onTroubleshootingClick, strings } = props;
42-
return <UnsupportedEnvironment onTroubleshootingClick={onTroubleshootingClick} strings={strings} />;
45+
const { onTroubleshootingClick, strings, onContinueClick } = props;
46+
return (
47+
<UnsupportedEnvironment
48+
onTroubleshootingClick={onTroubleshootingClick}
49+
strings={strings}
50+
onContinueClick={onContinueClick}
51+
/>
52+
);
4353
};

‎packages/react-components/src/components/UnsupportedEnvironment.tsx‎

Lines changed: 35 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -2,17 +2,20 @@
22
// Licensed under the MIT license.
33

44
/* @conditional-compile-remove(unsupported-browser) */
5-
import { Icon, Link, Stack, Text } from '@fluentui/react';
5+
import { DefaultButton, Icon, Link, Stack, Text } from '@fluentui/react';
66
/* @conditional-compile-remove(unsupported-browser) */
77
import { _pxToRem } from '@internal/acs-ui-common';
88
import React from 'react';
99
/* @conditional-compile-remove(unsupported-browser) */
10+
import { useTheme } from '../theming';
11+
/* @conditional-compile-remove(unsupported-browser) */
1012
import {
1113
containerStyles,
12-
iconStyles,
14+
continueAnywayButtonStyles,
1315
linkTextStyles,
1416
mainTextStyles,
15-
secondaryTextStyles
17+
secondaryTextStyles,
18+
testContainerStyles
1619
} from './styles/UnsupportedEnvironment.styles';
1720

1821
/**
@@ -25,6 +28,8 @@ export interface UnsupportedEnvironmentStrings {
2528
secondaryText: string;
2629
/** String to display in the text for the help link */
2730
moreHelpLinkText: string;
31+
/** String for continue anyway button */
32+
continueAnywayButtonText?: string;
2833
}
2934

3035
/**
@@ -33,35 +38,42 @@ export interface UnsupportedEnvironmentStrings {
3338
* @private
3439
*/
3540
export interface UnsupportedEnvironmentProps {
36-
/** Handler to perform a action when the help link is actioned */
41+
/**
42+
* Handler to perform a action when the help link is actioned
43+
*/
3744
onTroubleshootingClick?: () => void;
38-
/** String overrides for the component */
39-
strings: UnsupportedEnvironmentStrings;
45+
/**
46+
* String overrides for the component
47+
*/
48+
strings?: UnsupportedEnvironmentStrings;
49+
/**
50+
* CallBack for the continue anyay button. Use this as a mechanism to allow users into
51+
* a call with a unsupported browser version.
52+
*/
53+
onContinueClick?: () => void;
4054
}
4155

4256
/* @conditional-compile-remove(unsupported-browser) */
4357
const UnsupportedEnvironmentContainer = (props: UnsupportedEnvironmentProps): JSX.Element => {
44-
const { onTroubleshootingClick, strings } = props;
58+
const { onTroubleshootingClick, strings, onContinueClick } = props;
59+
const theme = useTheme();
4560
return (
46-
<Stack styles={containerStyles}>
47-
<Icon
48-
styles={iconStyles}
49-
iconName="UnsupportedEnvironmentWarning"
50-
data-ui-id="unsupported-environment-icon"
51-
></Icon>
52-
<Text styles={mainTextStyles}>{strings.primaryText}</Text>
53-
<Text styles={secondaryTextStyles}>{strings.secondaryText}</Text>
61+
<Stack styles={containerStyles} tokens={{ childrenGap: '2rem' }}>
62+
<Icon iconName="UnsupportedEnvironmentWarning" data-ui-id="unsupported-environment-icon"></Icon>
63+
<Stack styles={testContainerStyles} tokens={{ childrenGap: '0.25rem' }}>
64+
<Text styles={mainTextStyles}>{strings?.primaryText}</Text>
65+
<Text styles={secondaryTextStyles}>{strings?.secondaryText}</Text>
66+
</Stack>
5467
{onTroubleshootingClick && (
55-
<Link
56-
styles={linkTextStyles}
57-
onClick={() => {
58-
onTroubleshootingClick();
59-
}}
60-
data-ui-id="unsupported-environment-link"
61-
>
62-
{strings.moreHelpLinkText}
68+
<Link styles={linkTextStyles} onClick={onTroubleshootingClick} data-ui-id="unsupported-environment-link">
69+
{strings?.moreHelpLinkText}
6370
</Link>
6471
)}
72+
{onContinueClick && (
73+
<DefaultButton styles={continueAnywayButtonStyles(theme)} onClick={onContinueClick}>
74+
{strings?.continueAnywayButtonText}
75+
</DefaultButton>
76+
)}
6577
</Stack>
6678
);
6779
};

‎packages/react-components/src/components/styles/UnsupportedEnvironment.styles.tsx‎

Lines changed: 24 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
// Copyright (c) Microsoft Corporation.
22
// Licensed under the MIT license.
33

4-
import { IIconStyles, ILinkStyles, IStackStyles, ITextStyles } from '@fluentui/react';
4+
import { IButtonStyles, ILinkStyles, IStackStyles, ITextStyles, Theme } from '@fluentui/react';
55
import { _pxToRem } from '@internal/acs-ui-common';
66

77
/**
@@ -12,9 +12,9 @@ export const mainTextStyles: ITextStyles = {
1212
fontWeight: 600,
1313
fontSize: _pxToRem(20),
1414
lineHeight: _pxToRem(28),
15-
paddingBottom: '1rem',
1615
margin: 'auto',
17-
textAlign: 'center'
16+
textAlign: 'center',
17+
padding: '0.5rem'
1818
}
1919
};
2020

@@ -25,11 +25,19 @@ export const secondaryTextStyles: ITextStyles = {
2525
root: {
2626
margin: 'auto',
2727
fontWeight: 400,
28-
paddingBottom: '0.5rem',
2928
textAlign: 'center'
3029
}
3130
};
3231

32+
/**
33+
* @internal
34+
*/
35+
export const testContainerStyles: IStackStyles = {
36+
root: {
37+
margin: 'auto'
38+
}
39+
};
40+
3341
/**
3442
* @internal
3543
*/
@@ -46,15 +54,21 @@ export const linkTextStyles: ILinkStyles = {
4654
*/
4755
export const containerStyles: IStackStyles = {
4856
root: {
49-
padding: '2rem'
57+
padding: '2rem',
58+
maxWidth: _pxToRem(375)
5059
}
5160
};
5261

5362
/**
54-
* @interal
63+
* @internal
5564
*/
56-
export const iconStyles: IIconStyles = {
57-
root: {
58-
paddingBottom: '1rem'
59-
}
65+
export const continueAnywayButtonStyles = (theme: Theme): IButtonStyles => {
66+
return {
67+
root: {
68+
backgroundColor: '#C4314B',
69+
borderColor: theme.palette.neutralLight,
70+
padding: '1rem',
71+
color: theme.palette.white
72+
}
73+
};
6074
};

‎packages/react-components/src/localization/locales/en-US/strings.json‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -252,9 +252,10 @@
252252
"moreHelpLinkText": "See compatibility requirements"
253253
},
254254
"UnsupportedBrowserVersion": {
255-
"primaryText": "Browser version not supported",
256-
"secondaryText": "Please update your browser and then try joining the call again.",
257-
"moreHelpLinkText": "See compatibility requirements"
255+
"primaryText": "Browser update needed",
256+
"secondaryText": "To ensure the best call possible, please update your browser and then try joining the call again.",
257+
"moreHelpLinkText": "See compatibility requirements",
258+
"continueAnywayButtonText": "Start call without updating"
258259
},
259260
"UnsupportedOperatingSystem": {
260261
"primaryText": "Operating system not supported",

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

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -169,6 +169,7 @@ export interface CallAdapterCallOperations {
169169
addParticipant(participant: PhoneNumberIdentifier, options?: AddPhoneNumberOptions): Promise<void>;
170170
// (undocumented)
171171
addParticipant(participant: CommunicationUserIdentifier): Promise<void>;
172+
allowUnsupportedBrowserVersion(): void;
172173
createStreamView(remoteUserId?: string, options?: VideoStreamOptions): Promise<void | CreateVideoStreamViewResult>;
173174
disposeStreamView(remoteUserId?: string, options?: VideoStreamOptions): Promise<void>;
174175
// @beta
@@ -220,7 +221,7 @@ export type CallAdapterLocator = TeamsMeetingLinkLocator | GroupCallLocator | /*
220221

221222
// @beta
222223
export type CallAdapterOptionalFeatures = {
223-
unsupportedEnvironment?: boolean;
224+
unsupportedEnvironment?: boolean | UnsupportedEnvironmentFeatures;
224225
};
225226

226227
// @public
@@ -258,6 +259,7 @@ export interface CallAdapterSubscribers {
258259
export type CallAdapterUiState = {
259260
isLocalPreviewMicrophoneEnabled: boolean;
260261
page: CallCompositePage;
262+
unsupportedBrowserVersionsAllowed?: boolean;
261263
};
262264

263265
// @public
@@ -488,6 +490,7 @@ export interface CallWithChatAdapterManagement {
488490
addParticipant(participant: PhoneNumberIdentifier, options?: AddPhoneNumberOptions): Promise<void>;
489491
// (undocumented)
490492
addParticipant(participant: CommunicationUserIdentifier): Promise<void>;
493+
allowUnsupportedBrowserVersion(): void;
491494
askDevicePermission(constrain: PermissionConstraints): Promise<void>;
492495
// @beta (undocumented)
493496
cancelFileUpload: (id: string) => void;
@@ -622,6 +625,8 @@ export interface CallWithChatAdapterUiState {
622625
fileUploads?: FileUploadsUiState;
623626
isLocalPreviewMicrophoneEnabled: boolean;
624627
page: CallCompositePage;
628+
// @beta
629+
unsupportedBrowserVersionsAllowed?: boolean;
625630
}
626631

627632
// @public
@@ -1281,6 +1286,11 @@ export type TopicChangedListener = (event: {
12811286
topic: string;
12821287
}) => void;
12831288

1289+
// @beta
1290+
export type UnsupportedEnvironmentFeatures = {
1291+
unsupportedBrowserVersionAllowed?: boolean;
1292+
};
1293+
12841294
// @public
12851295
export const useAzureCommunicationCallAdapter: (args: Partial<AzureCommunicationCallAdapterArgs>, afterCreate?: ((adapter: CallAdapter) => Promise<CallAdapter>) | undefined, beforeDispose?: ((adapter: CallAdapter) => Promise<void>) | undefined) => CallAdapter | undefined;
12861296

0 commit comments

Comments
 (0)
⚡