-
Notifications
You must be signed in to change notification settings - Fork 73
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge branch 'main' into prerelease-beta-release-beta/1.25.0-beta.1
- Loading branch information
Showing
6 changed files
with
193 additions
and
41 deletions.
There are no files selected for viewing
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file not shown.
68 changes: 68 additions & 0 deletions
68
packages/storybook8/stories/Concepts/BreakoutRooms/Docs.mdx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,68 @@ | ||
| import { Meta, Source } from '@storybook/addon-docs'; | ||
| import BreakoutRoomsEventSnippetText from '!!raw-loader!./snippets/BreakoutRoomsUpdatedEvent.snippet.tsx'; | ||
|
|
||
| <Meta | ||
| id="breakout rooms" | ||
| title="Concepts/Breakout rooms" | ||
| parameters={{ previewTabs: { canvas: { disable: true, hidden: true } } }} | ||
| /> | ||
|
|
||
| # Breakout Rooms | ||
|
|
||
| ## Overview | ||
|
|
||
| ACS and Team identity users are now ready to be moved into breakout rooms in Teams meetings when the meeting organizer | ||
| assigns the ACS or Teams identity user a breakout room and opens that breakout room. ACS and Teams identity users, | ||
| however, will not yet have the ability to choose their breakout room when they are granted by meeting organizer. ACS | ||
| and Teams identity users can be move into breakout rooms but they will not yet have the ability to create and manage | ||
| breakout rooms when they have organizer or co-organizer role. | ||
|
|
||
| Click [here](https://support.microsoft.com/en-us/office/use-breakout-rooms-in-microsoft-teams-meetings-7de1f48a-da07-466c-a5ab-4ebace28e461) | ||
| to learn more about breakout rooms in Teams meetings and how to create and manage breakout rooms as a Teams user. | ||
|
|
||
| ## Composites | ||
|
|
||
| ACS and Team identity users using the CallComposite and CallWithChatComposite will now be able move to breakout rooms | ||
| in Teams meetings. When the meeting organizer assigns a breakout room to an ACS or Teams identity user and that | ||
| breakout room is opened, the composite will automatically change the current call to the breakout room. When the | ||
| breakout room is closed, the ACS or Teams identity user will automatically be moved back the the main meeting. | ||
|
|
||
| There are notifications that will be shown to guide the ACS or Teams identity user through the composite transitions | ||
| between the main meeting and breakout room. The notifications are shown when: | ||
|
|
||
| - the user's assigned breakout room opens and the user will be automatically moved to the breakout room | ||
| - the user's assigned breakout room opens and the user is prompted to join | ||
| - the user joins a breakout room | ||
| - the user's assigned breakout room is changed while already in a breakout room | ||
| - the user is in a breakout room with a time limit and that breakout room is closing soon | ||
| - the user is in a breakout room and that breakout room is closed | ||
|
|
||
| ## Handling breakoutRoomsUpdated events | ||
|
|
||
| The [CallAdapter](?path=/docs/composites-adapters--docs#calladapter) and CallWithChatAdapter are able to receive | ||
| `breakoutRoomsUpdated` events and allows you to handle these events by defining your own `BreakoutRoomsUpdateListener` | ||
| callback. The following code snippet shows an example of a `BreakoutRoomsUpdateListener` that outputs the event to the | ||
| browser console. | ||
|
|
||
| <Source code={BreakoutRoomsEventSnippetText} /> | ||
|
|
||
| Note: The `breakoutRoomsUpdated` room event encompasses 4 types: `assignedBreakoutRooms`, `join`, | ||
| `breakoutRoomsSettings`, and `breakoutRooms` | ||
|
|
||
| ## FAQs | ||
|
|
||
| ### Are breakout rooms supported in calls other than Teams meetings? | ||
|
|
||
| No. Breakout rooms is a feature that is currently only available in Teams meetings | ||
|
|
||
| ### Can ACS or Teams identity users choose their own breakout room to join? | ||
|
|
||
| Can ACS or Teams identity users will not yet be able to choose their own breakout room like in Teams. The meeting | ||
| organizer must assign the breakout room for the ACS or Teams identity user. | ||
|
|
||
| ### Where can I learn about managing breakout rooms and their settings? | ||
|
|
||
| This [documentation](https://support.microsoft.com/en-us/office/use-breakout-rooms-in-microsoft-teams-meetings-7de1f48a-da07-466c-a5ab-4ebace28e461) | ||
| will guide you on everything you need to know about creating and managing breakout rooms as a Teams user. | ||
|
|
||
| Note: ACS Web UI Library cannot yet be used to manage breakout rooms and their settings |
84 changes: 84 additions & 0 deletions
84
.../storybook8/stories/Concepts/BreakoutRooms/snippets/BreakoutRoomsUpdatedEvent.snippet.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,84 @@ | ||
| import { AzureCommunicationTokenCredential, CommunicationUserIdentifier } from '@azure/communication-common'; | ||
| import { | ||
| CallAdapter, | ||
| CallComposite, | ||
| CallCompositeOptions, | ||
| CompositeLocale, | ||
| useAzureCommunicationCallAdapter | ||
| } from '@azure/communication-react'; | ||
| import { PartialTheme, Theme } from '@fluentui/react'; | ||
| import React, { useCallback, useMemo } from 'react'; | ||
|
|
||
| export type ContainerProps = { | ||
| userId: CommunicationUserIdentifier; | ||
| token: string; | ||
| formFactor?: 'desktop' | 'mobile'; | ||
| fluentTheme?: PartialTheme | Theme; | ||
| locale?: CompositeLocale; | ||
| options?: CallCompositeOptions; | ||
| // Teams user ids need to be in format '28:orgid:<UUID>'. For example, '28:orgid:87d349ed-44d7-43e1-9a83-5f2406dee5bd' | ||
| meetingLink: string; | ||
| }; | ||
|
|
||
| export const ContosoCallContainer = (props: ContainerProps): JSX.Element => { | ||
| const credential = useMemo(() => { | ||
| try { | ||
| return new AzureCommunicationTokenCredential(props.token); | ||
| } catch { | ||
| console.error('Failed to construct token credential'); | ||
| return undefined; | ||
| } | ||
| }, [props.token]); | ||
|
|
||
| const callAdapterArgs = useMemo( | ||
| () => ({ | ||
| userId: props.userId, | ||
| credential, | ||
| locator: props.meetingLink | ||
| }), | ||
| [props.userId, credential, props.meetingLink] | ||
| ); | ||
|
|
||
| const afterCallAdapterCreate = useCallback(async (adapter: CallAdapter): Promise<CallAdapter> => { | ||
| adapter.on('breakoutRoomsUpdated', (event) => { | ||
| if (event.type === 'assignedBreakoutRooms') { | ||
| console.log('Assigned breakout rooms event: ', event); | ||
| } else if (event.type === 'join') { | ||
| console.log('Breakout rooms join event: ', event); | ||
| } else if (event.type === 'breakoutRoomsSettings') { | ||
| console.log('Breakout rooms settings event: ', event); | ||
| } | ||
| }); | ||
| return adapter; | ||
| }, []); | ||
|
|
||
| const leaveCall = async (adapter: CallAdapter): Promise<void> => { | ||
| await adapter.leaveCall().catch((e) => { | ||
| console.error('Failed to leave call', e); | ||
| }); | ||
| }; | ||
|
|
||
| const adapter = useAzureCommunicationCallAdapter(callAdapterArgs, afterCallAdapterCreate, leaveCall); | ||
|
|
||
| if (!props.meetingLink) { | ||
| return <>Teams meeting link not provided.</>; | ||
| } | ||
|
|
||
| if (adapter) { | ||
| return ( | ||
| <div style={{ height: '90vh', width: '90vw' }}> | ||
| <CallComposite | ||
| adapter={adapter} | ||
| formFactor={props.formFactor} | ||
| fluentTheme={props.fluentTheme} | ||
| locale={props?.locale} | ||
| options={props?.options} | ||
| /> | ||
| </div> | ||
| ); | ||
| } | ||
| if (credential === undefined) { | ||
| return <>Failed to construct credential. Provided token is malformed.</>; | ||
| } | ||
| return <>Initializing...</>; | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters