|
| 1 | +import { |
| 2 | + CommsProvider, |
| 3 | + Session, |
| 4 | + Conference, |
| 5 | + ParticipantsList, |
| 6 | + ParticipantsGrid, |
| 7 | + LocalToggleAudioButton, |
| 8 | + LocalToggleVideoButton, |
| 9 | + LeaveConferenceButton, |
| 10 | + CameraSelect, |
| 11 | + MicrophoneSelect, |
| 12 | + SpeakersSelect, |
| 13 | +} from '@dolbyio/comms-uikit-react'; |
| 14 | +import './App.css'; |
| 15 | + |
| 16 | +// Define the `CommsProvider` configuration: we need two props, a `token` and an async function that refreshes it. |
| 17 | +const token = 'YOUR_CLIENT_ACCESS_TOKEN_HERE'; |
| 18 | +const refreshToken = async () => token; |
| 19 | + |
| 20 | +// Define the `Session` configuration: you should provide a name using a `participantInfo` object, eg. the name of the participant who established the session. |
| 21 | +const participantInfo = { name: 'John Doe' }; |
| 22 | + |
| 23 | +// Define the `Conference` configuration: you can specify whether to join the conference with audio and/or video enabled, in addition to an alias which can be made visible to all participants. |
| 24 | +const audio = true; |
| 25 | +const video = true; |
| 26 | +const alias = 'My Meeting'; |
| 27 | + |
| 28 | +// Define the `ParticipantsList` configuration: you can customise the text shown for each participant and their status. |
| 29 | +const localText = 'you'; // The local participant's name. |
| 30 | +const muteText = 'mute'; // Displayed in a tooltip when a participant is not muted. |
| 31 | +const unmuteText = 'unmute'; // Displayed in a tooltip when a participant is muted. |
| 32 | +const soundOnText = 'sound on'; // Displayed in a tooltip when a participant is speaking. |
| 33 | +const soundOffText = 'sound off'; // Displayed in a tooltip when a participant is not speaking. |
| 34 | + |
| 35 | +// Define the `ParticipantsGrid` configuration: you can customise the text shown for the current participant and their status. |
| 36 | + |
| 37 | +// const localText = 'you'; |
| 38 | + |
| 39 | +/* |
| 40 | + We are re-using the previously declared `localText` in this example for `ParticipantsGrid` but you can use any value you prefer |
| 41 | +*/ |
| 42 | + |
| 43 | +// Define the `CameraSelect`, `MicrophoneSelect`, and `SpeakersSelect` configurations: each component takes a `label` prop (shown above the component) and a `placeholder` prop (shown when no option is selected). |
| 44 | +const cameraLabel = 'Camera'; |
| 45 | +const cameraPlaceholder = 'Choose a camera'; |
| 46 | + |
| 47 | +const microphoneLabel = 'Microphone'; |
| 48 | +const microphonePlaceholder = 'Choose a microphone'; |
| 49 | + |
| 50 | +const speakersLabel = 'Speaker'; |
| 51 | +const speakersPlaceholder = 'Choose a speaker'; |
| 52 | + |
| 53 | +// Define the `LeaveConferenceButton` configuration: you can customise the text shown in a tooltip when hovering over the button. |
| 54 | +const tooltipText = 'Leave'; |
| 55 | + |
| 56 | +function App() { |
| 57 | + return ( |
| 58 | + <CommsProvider token={token} refreshToken={refreshToken}> |
| 59 | + <div className="App"> |
| 60 | + <Session participantInfo={participantInfo}> |
| 61 | + {/* IMPORTANT: Rendering a <Conference /> component will establish a call using Dolby.io - if you're using your free minutes for this demo, remember to leave the conference or close the browser tab when you're done! */} |
| 62 | + <Conference audio={audio} video={video} alias={alias}> |
| 63 | + <ParticipantsList |
| 64 | + localText={localText} |
| 65 | + muteText={muteText} |
| 66 | + unmuteText={unmuteText} |
| 67 | + soundOnText={soundOnText} |
| 68 | + soundOffText={soundOffText} |
| 69 | + /> |
| 70 | + <ParticipantsGrid localText={localText} /> |
| 71 | + <LocalToggleAudioButton /> |
| 72 | + <LocalToggleVideoButton /> |
| 73 | + <CameraSelect label={cameraLabel} placeholder={cameraPlaceholder} /> |
| 74 | + <MicrophoneSelect label={microphoneLabel} placeholder={microphonePlaceholder} /> |
| 75 | + <SpeakersSelect label={speakersLabel} placeholder={speakersPlaceholder} /> |
| 76 | + <LeaveConferenceButton tooltipText={tooltipText} /> |
| 77 | + </Conference> |
| 78 | + </Session> |
| 79 | + </div> |
| 80 | + </CommsProvider> |
| 81 | + ); |
| 82 | +} |
| 83 | + |
| 84 | +export default App; |
0 commit comments