Skip to content

Commit

Permalink
Update storybook (#4343)
Browse files Browse the repository at this point in the history 
Update story book with new topic "join Teams meeting using meeting id and passcode"
Move all interop scenarios in one concept folder
  • Loading branch information
@rzdor
rzdor committed Apr 29, 2024
1 parent 5ad5e0b commit b8b2e19
Show file tree
Hide file tree
Showing 24 changed files with 328 additions and 91 deletions.
2 changes: 1 addition & 1 deletion packages/communication-react/review/beta/communication-react.api.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4319,7 +4319,7 @@ export interface TeamsCallAdapter extends CommonCallAdapter {
export type TeamsCallAdapterArgs = {
userId: MicrosoftTeamsUserIdentifier;
credential: CommunicationTokenCredential;
locator: TeamsMeetingLinkLocator | /* @conditional-compile-remove(teams-adhoc-call) */ /* @conditional-compile-remove(PSTN-calls) */ CallParticipantsLocator;
locator: TeamsMeetingLinkLocator | /* @conditional-compile-remove(teams-adhoc-call) */ /* @conditional-compile-remove(PSTN-calls) */ CallParticipantsLocator | /* @conditional-compile-remove(meeting-id) */ TeamsMeetingIdLocator;
options?: TeamsAdapterOptions;
};

Expand Down
3 changes: 2 additions & 1 deletion ...es/react-composites/src/composites/CallComposite/adapter/AzureCommunicationCallAdapter.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1464,7 +1464,8 @@ export type TeamsCallAdapterArgs = {
credential: CommunicationTokenCredential;
locator:
| TeamsMeetingLinkLocator
| /* @conditional-compile-remove(teams-adhoc-call) */ /* @conditional-compile-remove(PSTN-calls) */ CallParticipantsLocator;
| /* @conditional-compile-remove(teams-adhoc-call) */ /* @conditional-compile-remove(PSTN-calls) */ CallParticipantsLocator
| /* @conditional-compile-remove(meeting-id) */ TeamsMeetingIdLocator;
/**
* Optional parameters for the {@link TeamsCallAdapter} created
*/
Expand Down
1 change: 1 addition & 0 deletions packages/storybook/.storybook/preview.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -71,6 +71,7 @@ export const parameters = {
'Identity',
'Rooms',
'Communication as Teams user',
'Teams Interop',
'Ad-hoc calling',
'Transfer',
'Video Effects'
Expand Down
Binary file added packages/storybook/public/images/teams-get-meeting-link.png
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added packages/storybook/public/images/teams-get-meetingid-and-passcode.png
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
26 changes: 13 additions & 13 deletions packages/storybook/stories/Adapters/Adapters.stories.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -192,13 +192,13 @@ async function createAzureCommunicationCallAdapter(args: AzureCommunicationCallA

#### AzureCommunicationCallAdapterArgs

| Property | Type |
| ---------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **`userId`** | [`CommunicationUserIdentifier`](https://docs.microsoft.com/en-us/javascript/api/@azure/communication-common/communicationuseridentifier) |
| **`displayName`** | `string` <br />_DisplayName has a limit of of 256 characters._ |
| **`credential`** | [`CommunicationTokenCredential`](https://docs.microsoft.com/en-us/javascript/api/@azure/communication-common/azurecommunicationtokencredential) |
| **`locator`** | [`GroupCallLocator`](https://docs.microsoft.com/en-us/javascript/api/azure-communication-services/@azure/communication-calling/groupcalllocator) \| [`TeamsMeetingLinkLocator`](https://docs.microsoft.com/en-us/javascript/api/azure-communication-services/@azure/communication-calling/teamsmeetinglinklocator) \| [`RoomCallLocator`](https://docs.microsoft.com/en-us/javascript/api/azure-communication-services/@azure/communication-calling/roomcalllocator) **(Beta)** \| `CallParticipantsLocator` **(Beta)** <br /><br /> _CallParticipantsLocator is an array of participantIds to join._ |
| **`alternateCallerId`** **(Beta)** | `string` |
| Property | Type |
| ---------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **`userId`** | [`CommunicationUserIdentifier`](https://docs.microsoft.com/en-us/javascript/api/@azure/communication-common/communicationuseridentifier) |
| **`displayName`** | `string` <br />_DisplayName has a limit of of 256 characters._ |
| **`credential`** | [`CommunicationTokenCredential`](https://docs.microsoft.com/en-us/javascript/api/@azure/communication-common/azurecommunicationtokencredential) |
| **`locator`** | [`GroupCallLocator`](https://docs.microsoft.com/en-us/javascript/api/azure-communication-services/@azure/communication-calling/groupcalllocator) \| [`TeamsMeetingLinkLocator`](https://docs.microsoft.com/en-us/javascript/api/azure-communication-services/@azure/communication-calling/teamsmeetinglinklocator) \| [`TeamsMeetingIdLocator`](https://docs.microsoft.com/en-us/javascript/api/azure-communication-services/@azure/communication-calling/teamsmeetingidlocator) \| [`RoomCallLocator`](https://docs.microsoft.com/en-us/javascript/api/azure-communication-services/@azure/communication-calling/roomcalllocator) **(Beta)** \| `CallParticipantsLocator` **(Beta)** <br /><br /> _CallParticipantsLocator is an array of participantIds to join._ |
| **`alternateCallerId`** **(Beta)** | `string` |

## Functions

Expand All @@ -210,12 +210,12 @@ async function createTeamsCallAdapter(args: TeamsCallAdapterArgs);

#### TeamsCallAdapterArgs (Beta)

| Property | Type |
| ---------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **`userId`** | [`MicrosoftTeamsUserIdentifier`](https://docs.microsoft.com/en-us/javascript/api/@azure/communication-common/MicrosoftTeamsUserIdentifier) |
| **`credential`** | [`CommunicationTokenCredential`](https://docs.microsoft.com/en-us/javascript/api/@azure/communication-common/azurecommunicationtokencredential) |
| **`locator`** | [`TeamsMeetingLinkLocator`](https://docs.microsoft.com/en-us/javascript/api/azure-communication-services/@azure/communication-calling/TeamsMeetingLinkLocator) \| CallParticipantsLocator |
| **`options`** | TeamsAdapterOptions |
| Property | Type |
| ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **`userId`** | [`MicrosoftTeamsUserIdentifier`](https://docs.microsoft.com/en-us/javascript/api/@azure/communication-common/MicrosoftTeamsUserIdentifier) |
| **`credential`** | [`CommunicationTokenCredential`](https://docs.microsoft.com/en-us/javascript/api/@azure/communication-common/azurecommunicationtokencredential) |
| **`locator`** | [`TeamsMeetingLinkLocator`](https://docs.microsoft.com/en-us/javascript/api/azure-communication-services/@azure/communication-calling/TeamsMeetingLinkLocator) \| [`TeamsMeetingIdLocator`](https://docs.microsoft.com/en-us/javascript/api/azure-communication-services/@azure/communication-calling/TeamsMeetingIdLocator) \| CallParticipantsLocator |
| **`options`** | TeamsAdapterOptions |

### TeamsAdapterOptions (Beta)

Expand Down
8 changes: 0 additions & 8 deletions packages/storybook/stories/CallComposite/CallCompositeDocs.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -358,14 +358,6 @@ export const Docs: () => JSX.Element = () => {
<Source code="<CallComposite options={galleryOptions: {layout: 'default'}} />" />
<Source code="<CallComposite options={galleryOptions: {layout: 'floatingLocalVideo'}} />" />
<Source code="<CallComposite options={galleryOptions: {layout: 'focusedContent'}} />" />
<div ref={refExistedJoinCall}>
<Heading>Joining an existing Call</Heading>
<Description>
The [join existing call](./?path=/story/composites-call-joinexistingcall--join-existing-call) provides an easy
playground to join an existing Azure Communication Services group call or an existing Teams meeting. This is
useful if you want to explore the composite with multiple users.
</Description>
</div>
<Heading>PSTN and 1:N Calling</Heading>
<SingleLineBetaBanner version={'1.3.2-beta.1'} />
<Description>
Expand Down
2 changes: 1 addition & 1 deletion packages/storybook/stories/CallComposite/JoinExistingCallWithCTE.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ const JoinExistingCallAsTeamsUserStory = (args: ArgsFrom<typeof storyControls>,
<ContosoCTECallContainer
fluentTheme={context.theme}
rtl={context.globals.rtl === 'rtl'}
locator={args.callLocator}
meetingLink={args.callLocator}
userId={{ microsoftTeamsUserId: args.userId }}
token={args.token}
callInvitationURL={args.callInvitationURL}
Expand Down
24 changes: 18 additions & 6 deletions packages/storybook/stories/CallComposite/snippets/CTEContainer.snippet.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { TeamsMeetingLinkLocator } from '@azure/communication-calling';
import { TeamsMeetingIdLocator, TeamsMeetingLinkLocator } from '@azure/communication-calling';
import { AzureCommunicationTokenCredential, MicrosoftTeamsUserIdentifier } from '@azure/communication-common';
import {
CallComposite,
Expand All @@ -13,7 +13,9 @@ import React, { useMemo } from 'react';
export type ContainerProps = {
userId: MicrosoftTeamsUserIdentifier;
token: string;
locator: string;
meetingLink?: string;
meetingId?: string;
meetingPasscode?: string;
formFactor?: 'desktop' | 'mobile';
fluentTheme?: PartialTheme | Theme;
rtl?: boolean;
Expand All @@ -24,10 +26,17 @@ export type ContainerProps = {

const isTeamsMeetingLink = (link: string): boolean => link.startsWith('https://teams.microsoft.com/l/meetup-join');

const createCallAdapterLocator = (locator: string): TeamsMeetingLinkLocator | undefined => {
if (isTeamsMeetingLink(locator)) {
const createCallAdapterLocator = (
locator?: string,
meetingId?: string,
meetingPasscode?: string
): TeamsMeetingLinkLocator | TeamsMeetingIdLocator | undefined => {
if (locator && isTeamsMeetingLink(locator)) {
return { meetingLink: locator };
}
if (meetingId && meetingPasscode) {
return { meetingId: meetingId, passcode: meetingPasscode };
}
return undefined;
};

Expand All @@ -41,7 +50,10 @@ export const ContosoCTECallContainer = (props: ContainerProps): JSX.Element => {
}
}, [props.token]);

const locator = useMemo(() => createCallAdapterLocator(props.locator), [props.locator]);
const locator = useMemo(
() => createCallAdapterLocator(props.meetingLink, props.meetingId, props.meetingPasscode),
[props.meetingLink, props.meetingId, props.meetingPasscode]
);

const adapter = useTeamsCallAdapter(
{
Expand All @@ -54,7 +66,7 @@ export const ContosoCTECallContainer = (props: ContainerProps): JSX.Element => {
);

if (!locator) {
return <>Provided call locator '{props.locator}' is not recognized.</>;
return <>Provided call locator '{props.meetingLink ? props.meetingLink : props.meetingId}' is not recognized.</>;
}

if (adapter) {
Expand Down
9 changes: 0 additions & 9 deletions packages/storybook/stories/CallWithChatComposite/CallWithChatCompositeDocs.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -185,15 +185,6 @@ export const Docs: () => JSX.Element = () => {
/>
</Stack>
<Source code={customBrandingSnippet} />

<div ref={refTeamsMeeting}>
<Heading>Joining a Teams Meeting</Heading>
<Description>
The [Joining a Teams Meeting](./?path=/story/composites-call-with-chat-jointeamsmeeting) preview provides an
easy playground to join an existing Teams meeting. This is useful if you want to explore the composite in a
Teams interop scenario.
</Description>
</div>
<Heading>Customize Call Controls</Heading>
<Description>
CallWithChatComposite provides a set of default controls for the call that can be customized similar to
Expand Down
4 changes: 2 additions & 2 deletions packages/storybook/stories/CallWithChatComposite/snippets/CallWithChat.snippet.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { TeamsMeetingLinkLocator } from '@azure/communication-calling';
import { TeamsMeetingIdLocator, TeamsMeetingLinkLocator } from '@azure/communication-calling';
import { AzureCommunicationTokenCredential, CommunicationUserIdentifier } from '@azure/communication-common';
import {
CallAndChatLocator,
Expand Down Expand Up @@ -28,7 +28,7 @@ export type CallWithChatExampleProps = {
* TeamsMeetingLinkLocator: this is a special locator comprised of a Teams meeting link
* {meetingLink: ...}
*/
locator: TeamsMeetingLinkLocator | CallAndChatLocator;
locator: TeamsMeetingLinkLocator | CallAndChatLocator | TeamsMeetingIdLocator;

// Props to customize the CallWithChatComposite experience
fluentTheme?: PartialTheme | Theme;
Expand Down

0 comments on commit b8b2e19

Please sign in to comment.