Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Update storybook #4343

Merged
merged 39 commits into from
Apr 29, 2024
Merged

Update storybook #4343

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
39 commits
Select commit Hold shift + click to select a range
5bb94f5
cherry pick code for client
rzdor Mar 26, 2024
920564b
call composite for meetingid
rzdor Mar 26, 2024
3e4703d
review
rzdor Mar 26, 2024
a1d1af1
review build
rzdor Mar 26, 2024
2e48d7e
build review
rzdor Mar 26, 2024
14c6b13
Update storybook
rzdor Mar 26, 2024
f1a52ee
fix build
rzdor Mar 26, 2024
4baba6f
fix build
rzdor Mar 26, 2024
d69bf89
update samples
rzdor Mar 26, 2024
f72a3a6
build review
rzdor Mar 27, 2024
9fc9d0b
Update home page
rzdor Mar 27, 2024
d5de0da
Merge branch 'main' into ruslanz/meeting-id-samples
rzdor Mar 27, 2024
a380e4f
Merge branch 'main' into ruslanz/meeting-id-samples
rzdor Mar 28, 2024
efae338
Code review
rzdor Mar 28, 2024
afa0b97
fix build
rzdor Mar 28, 2024
2bd61b6
fix build
rzdor Mar 28, 2024
8cafad2
code review
rzdor Apr 4, 2024
6e1c176
update home page
rzdor Apr 4, 2024
3ff3b86
Merge branch 'main' into ruslanz/meeting-id-samples
rzdor Apr 4, 2024
c397857
fix mege
rzdor Apr 4, 2024
9265a40
Merge branch 'main' into ruslanz/meeting-id-samples
rzdor Apr 4, 2024
51da760
Update graph api info
rzdor Apr 5, 2024
c11473b
Move teams interop to concepts
rzdor Apr 10, 2024
98e5ef7
Update join meeting pages
rzdor Apr 11, 2024
f05d6b4
review
rzdor Apr 11, 2024
e23488c
clean up
rzdor Apr 11, 2024
2f95dfb
Ruslanz/meeting id samples with set (#4484)
rzdor Apr 19, 2024
688d1ec
Merge branch 'main' into ruslanz/meeting-id-samples
rzdor Apr 22, 2024
026903d
merge clanges
rzdor Apr 22, 2024
d0247d7
update dispose
rzdor Apr 22, 2024
af48d90
update dispose
rzdor Apr 22, 2024
fbb840d
Remove tag
rzdor Apr 22, 2024
e2c7cc4
Merge branch 'ruslanz/meeting-id-samples' into ruslanz/meeting-id-sto…
rzdor Apr 22, 2024
d17ee35
Merge branch 'main' into ruslanz/meeting-id-storybook
rzdor Apr 25, 2024
4b66691
Merge branch 'main' into ruslanz/meeting-id-storybook
rzdor Apr 26, 2024
151e02d
Merge branch 'main' into ruslanz/meeting-id-storybook
rzdor Apr 26, 2024
f8de3df
import sort
rzdor Apr 26, 2024
23c4217
Merge branch 'main' into ruslanz/meeting-id-storybook
rzdor Apr 29, 2024
56006a7
Merge branch 'main' into ruslanz/meeting-id-storybook
rzdor Apr 29, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
2 changes: 1 addition & 1 deletion packages/communication-react/review/beta/communication-react.api.md
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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