Skip to content

Commit 38080bf

Browse files
garchiro7garchiro7
committed
Add title and events documents
1 parent 46e7bc2 commit 38080bf

File tree

9 files changed

+300
-12
lines changed

9 files changed

+300
-12
lines changed

‎articles/communication-services/concepts/ui-library/includes/mobile-ui-use-cases.md

Lines changed: 26 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -30,19 +30,20 @@ You can use the call composite in Communication Services to create these use cas
3030
| | Show shared screen content in the participant gallery |
3131
| | Enable participant avatar customization |
3232
| | Show a participant roster |
33-
| Call configuration | Manage the microphone device |
33+
| Call management | Manage the microphone device |
3434
| | Manage the camera device |
3535
| | Manage the speaker device (wired or Bluetooth) |
3636
| | Make local preview available for a user to check video |
37-
| | Enable end call confirmation dialogue |
38-
| | Skip setup screen |
37+
| | Subscribe events |
3938
| Call controls | Mute and unmute a call |
4039
| | Turn video on or off during a call |
4140
| | End a call |
4241
| | Hold and resume a call after audio interruption |
4342
| | CallKit and TelecomManager Support |
4443
| Customize the experience | Button bar customization |
4544
| | Title and subtitle configuration |
45+
| | Enable end call confirmation dialogue |
46+
| | Skip setup screen |
4647

4748
## Call integration
4849

@@ -96,13 +97,19 @@ Closed captions enable a wide range of scenarios, including interoperability wit
9697
9798
If you're looking more detailed information about closed captions, feel free to visit [the documentation](../../voice-video-calling/closed-captions.md) to review explanations and usage guidelines. Additionally, if you want to jump directly into the configuration of closed captions directly within the UI Library, you can follow our [tutorial](../../../how-tos/ui-library-sdk/closed-captions.md) for easy setup.
9899

100+
### Events
101+
102+
Developers can now subscribe to events within the Call Composite, enabling them to attach listeners to specific events throughout the call lifecycle. This enhancement provides greater control and customization opportunities, allowing developers to trigger custom actions based on events like participant join, or participants left the call. Whether it's for logging interactions, dynamically updating user interfaces, or enhancing overall functionality.
103+
104+
For more information, see [How to handle events](../../../how-tos/ui-library-sdk/events.md).
105+
99106
### Localization
100107

101108
Localization is key to making products for users around the world and who speak different languages. UI Library supports 12 languages: English, Spanish, French, German, Italian, Japanese, Korean, Dutch, Portuguese, Russian, Turkish, and Chinese. It also supports right-to-left languages. For more information, see [How to add localization to your app](../../../how-tos/ui-library-sdk/localization.md).
102109

103110
### Multitasking and Picture-in-Picture
104111

105-
UI Library supports picture in picture mode for call screen. While being in the call, user can click back button on call screen to enable multitasking, which will take user back to previous screen. If Picture-in-Picture is enabled, a system Picture-in-Picture will be displayed for call. To learn more about the multitasking and Picture-in-Picture for both Android and iOS platform and usage of the API, see [How to use Picture-in-Picture.](../../../how-tos/ui-library-sdk/picture-in-picture.md)
112+
UI Library supports picture in picture mode for call screen. While being in the call, user can click back button on call screen to enable multitasking, which takes the user back to previous screen. If Picture-in-Picture is enabled, a system Picture-in-Picture will be displayed for call. To learn more about the multitasking and Picture-in-Picture for both Android and iOS platform and usage of the API, see [How to use Picture-in-Picture.](../../../how-tos/ui-library-sdk/picture-in-picture.md)
106113

107114
### Screen orientation
108115

@@ -157,25 +164,25 @@ The functionality allows developers to add new actions into the contextual menu
157164

158165
Consider the following constraints during the implementation of this feature:
159166

160-
- Icons and Labels: Icons are added only for new actions. The button bar icons keep the predefined icon, labels should be concise to fit the menu dimension.
167+
- Icons and Labels: Icons are added only for new actions. The button bar icons keep the predefined icons and the labels should be concise to fit the menu dimension.
161168
- Accessibility Considerations: Developers should ensure that all custom buttons are accessible, including appropriate labeling for screen readers.
162169

163170
|Remove buttons | Add custom actions|
164171
|------------- | ------------------|
165172
| :::image type="content" source="media/ui-library-remove-button.png" alt-text="Screenshot that demonstrates the remove button on the bottom bar."::: | :::image type="content" source="media/ui-library-add-action-button.png" alt-text="Screenshot that demonstrates add custom action into the contextual menu."::: |
166173

167-
#### Use Cases
174+
#### Use cases
168175

169176
- Custom In-Call Actions: A business application can add a custom "Report Issue" button, allowing users to directly report technical issues during a call.
170177
- Branding and User Experience: An enterprise app can remove buttons that are irrelevant to its use case and add branded buttons that enhance the user experience.
171178

172-
To ensure a consistent call experience, , we recommend that you integrate Fluent UI icons into your project; available at [Fluent UI GitHub repository](https://github.com/microsoft/fluentui-system-icons/). By doing so, your custom icons will match the design of the Call Composite, creating a cohesive and professional appearance.
179+
To ensure a consistent call experience, we recommend that you integrate Fluent UI icons into your project; available at [Fluent UI GitHub repository](https://github.com/microsoft/fluentui-system-icons/). By doing so, your custom icons match the design of the Call Composite, creating a cohesive and professional appearance.
173180

174-
#### Best Practices
181+
#### Best practices
175182

176-
- Minimalism: Avoid overcrowding the contextual menu bar. Only add buttons that are essential for the user experience.
183+
- Clean design: Avoid overcrowding the contextual menu bar. Only add buttons that are essential for the user experience.
177184
- User Testing: Conduct user testing to ensure the customizations meets user needs and don't confuse or overwhelm them.
178-
- Add a Feedback Mechanism: If adding buttons for actions like "Report Issue," ensure there's a robust backend system to handle the feedback collected, you can re use the [mechanism that UI Library provide by default](../../../tutorials/collecting-user-feedback/collecting-user-feedback.md).
185+
- Add a Feedback Mechanism: If adding buttons for actions like "Report Issue," ensure there's a robust backend system to handle the feedback collected, you can reuse the [mechanism that UI Library provides by default](../../../tutorials/collecting-user-feedback/collecting-user-feedback.md).
179186

180187
For more information, see [How to customize the button bar](../../../how-tos/ui-library-sdk/button-injection.md).
181188

@@ -193,7 +200,15 @@ You can use the UI Library call composite for iOS and Android to create a custom
193200

194201
### Title and Subtitle
195202

196-
Some text
203+
The UI Library allows you to input custom strings, making it easier to tailor the call interface to suit your specific needs. You can customize the title and subtitle of a call, both during the setup phase and while the call is in progress.
204+
205+
For example, in a corporate environment, you can set the title to reflect the meeting's agenda and the subtitle to indicate an announcement, and for customer support, agents can use titles to display the nature of the inquiry, enhancing clarity and communication.
206+
207+
Additionally, during calls with time-sensitive discussions, you can use the subtitle to display the call duration, ensuring all participants are aware of the time constraints.
208+
209+
For more information, visit the tutorial: [How to setup the title and subtitle](../../../how-tos/ui-library-sdk/setup-title-subtitle.md).
210+
211+
-----------------------------------------
197212

198213
## Chat use cases
199214

‎articles/communication-services/how-tos/ui-library-sdk/button-injection.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@ This functionality provides a high degree of customization, and ensures that the
3737
::: zone-end
3838

3939
::: zone pivot="platform-ios"
40-
[!INCLUDE [DCustomize the actions from the button bar in the iOS UI Library](./includes/button-injection/ios.md)]
40+
[!INCLUDE [Customize the actions from the button bar in the iOS UI Library](./includes/button-injection/ios.md)]
4141
::: zone-end
4242

4343
## Next steps

‎articles/communication-services/how-tos/ui-library-sdk/events.md

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
---
2+
title: Handle events in the UI Library
3+
titleSuffix: An Azure Communication Services how-to guide
4+
description: Handle events in the Azure Communication Services UI Library.
5+
author: garchiro7
6+
7+
ms.author: jorgegarc
8+
ms.service: azure-communication-services
9+
ms.subservice: calling
10+
ms.topic: how-to
11+
ms.date: 09/01/2024
12+
ms.custom: template-how-to
13+
zone_pivot_groups: acs-plat-ios-android
14+
15+
#Customer intent: As a developer, I want to handle events in the UI Library
16+
---
17+
18+
# Subscribe events in the UI Library
19+
20+
[!INCLUDE [Public Preview Notice](../../includes/public-preview-include.md)]
21+
22+
## Prerequisites
23+
24+
- An Azure account with an active subscription. [Create an account for free](https://azure.microsoft.com/free/?WT.mc_id=A261C142F).
25+
- A deployed Communication Services resource. [Create a Communication Services resource](../../quickstarts/create-communication-resource.md).
26+
- A user access token to enable the call client. [Get a user access token](../../quickstarts/access-tokens.md).
27+
- Optional: Completion of the [quickstart for getting started with the UI Library composites](../../quickstarts/ui-library/get-started-composites.md).
28+
29+
## Set up the feature
30+
31+
::: zone pivot="platform-android"
32+
[!INCLUDE [Listen events in the Android UI Library](./includes/events/android.md)]
33+
::: zone-end
34+
35+
::: zone pivot="platform-ios"
36+
[!INCLUDE [Listen events in the iOS UI Library](./includes/events/ios.md)]
37+
::: zone-end
38+
39+
## Next steps
40+
41+
- [Learn more about the UI Library](../../concepts/ui-library/ui-library-overview.md)

‎articles/communication-services/how-tos/ui-library-sdk/includes/events/android.md

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
---
2+
description: Handle events in the Android UI Library
3+
author: garchiro7
4+
5+
ms.author: jorgegarc
6+
ms.date: 09/01/2024
7+
ms.topic: include
8+
ms.service: azure-communication-services
9+
---
10+
11+
## Participant joins the call
12+
13+
We expose `addOnRemoteParticipantJoinedEventHandler` to listen if the participant joins the call.
14+
15+
#### [Kotlin](#tab/kotlin)
16+
17+
```kotlin
18+
callComposite.addOnRemoteParticipantJoinedEventHandler { remoteParticipantJoinedEvent ->
19+
remoteParticipantJoinedEvent.identifiers.forEach { identifier ->
20+
// identifier is communication identifier
21+
}
22+
}
23+
```
24+
25+
#### [Java](#tab/java)
26+
27+
```java
28+
callComposite.addOnRemoteParticipantJoinedEventHandler( (remoteParticipantJoinedEvent) -> {
29+
for (CommunicationIdentifier identifier: remoteParticipantJoinedEvent.getIdentifiers()) {
30+
// identifier is communication identifier
31+
}
32+
});
33+
```
34+
35+
-----
36+
37+
## Participant left the call
38+
39+
We expose `addOnRemoteParticipantLeftEventHandler` to listen if the participant leaves the call.
40+
41+
#### [Kotlin](#tab/kotlin)
42+
43+
```kotlin
44+
callComposite.addOnRemoteParticipantLeftEventHandler { remoteParticipantLeftEvent ->
45+
remoteParticipantLeftEvent.identifiers.forEach { identifier ->
46+
// identifier is communication identifier
47+
}
48+
}
49+
```
50+
51+
#### [Java](#tab/java)
52+
53+
```java
54+
callComposite.addOnRemoteParticipantLeftEventHandler( (remoteParticipantLeftEvent) -> {
55+
for (CommunicationIdentifier identifier: remoteParticipantLeftEvent.getIdentifiers()) {
56+
// identifier is communication identifier
57+
}
58+
});
59+
```
60+
61+
-----

‎articles/communication-services/how-tos/ui-library-sdk/includes/events/ios.md

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
---
2+
description: Handle events in the iOS UI Library
3+
author: garchiro7
4+
5+
ms.author: jorgegarc
6+
ms.date: 09/01/2024
7+
ms.topic: include
8+
ms.service: azure-communication-services
9+
---
10+
11+
## Participant joins the call
12+
13+
We expose `addOnRemoteParticipantJoinedEventHandler` to listen if the participant joins the call.
14+
15+
```swift
16+
17+
18+
19+
```
20+
21+
## Participant left the call
22+
23+
We expose `addOnRemoteParticipantLeftEventHandler` to listen if the participant leaves the call.
24+
25+
```swift
26+
27+
28+
29+
```

‎articles/communication-services/how-tos/ui-library-sdk/includes/setup-title-subtitle/android.md

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
---
2+
description: Customize the title and subtitle of the call bar in the Android UI Library
3+
author: garchiro7
4+
5+
ms.author: jorgegarc
6+
ms.date: 09/01/2024
7+
ms.topic: include
8+
ms.service: azure-communication-services
9+
---
10+
11+
## Customize title and subtitle
12+
13+
To set and update call screen header `title` and `subtitle`, utilize `CallCompositeCallScreenOptions` to configure `CallCompositeCallScreenHeaderOptions`. Default UI library title will be displayed if `title` value is not configured.
14+
15+
#### [Kotlin](#tab/kotlin)
16+
17+
```kotlin
18+
// create call screen header options to set title and subtitle
19+
val callScreenHeaderOptions = CallCompositeCallScreenHeaderOptions()
20+
callScreenHeaderOptions.title = "title"
21+
callScreenHeaderOptions.subtitle = "subtitle"
22+
23+
// create call screen options
24+
val callScreenOptions = CallCompositeCallScreenOptions()
25+
callScreenOptions.setHeaderOptions(callScreenHeaderOptions)
26+
27+
// create call composite
28+
val callComposite = CallCompositeBuilder().build()
29+
30+
val localOptions = CallCompositeLocalOptions()
31+
localOptions.setCallScreenOptions(callScreenOptions)
32+
33+
// launch composite
34+
callComposite.launch(applicationContext, locator, localOptions)
35+
36+
// use any event from call composite to update title subtitle when call is in progress
37+
// callScreenHeaderOptions.title = "updated title"
38+
// callScreenHeaderOptions.subtitle = "updated subtitle"
39+
```
40+
41+
#### [Java](#tab/java)
42+
```java
43+
// Create call screen header options to set title and subtitle
44+
CallCompositeCallScreenHeaderOptions callScreenHeaderOptions = new CallCompositeCallScreenHeaderOptions();
45+
callScreenHeaderOptions.setTitle("title");
46+
callScreenHeaderOptions.setSubtitle("subtitle");
47+
48+
// Create call screen options
49+
CallCompositeCallScreenOptions callScreenOptions = new CallCompositeCallScreenOptions();
50+
callScreenOptions.setHeaderOptions(callScreenHeaderOptions);
51+
52+
// Create call composite
53+
CallComposite callComposite = new CallCompositeBuilder().build();
54+
55+
CallCompositeLocalOptions localOptions = new CallCompositeLocalOptions();
56+
localOptions.setCallScreenOptions(callScreenOptions);
57+
58+
// Launch composite
59+
callComposite.launch(getApplicationContext(), locator, localOptions);
60+
61+
// Use any event from call composite to update title and subtitle when the call is in progress
62+
// callScreenHeaderOptions.setTitle("updated title");
63+
// callScreenHeaderOptions.setSubtitle("updated subtitle");
64+
```
65+
66+
-----

‎articles/communication-services/how-tos/ui-library-sdk/includes/setup-title-subtitle/ios.md

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
---
2+
description: Customize the title and subtitle of the call bar in the iOS UI Library
3+
author: garchiro7
4+
5+
ms.author: jorgegarc
6+
ms.date: 09/01/2024
7+
ms.topic: include
8+
ms.service: azure-communication-services
9+
---
10+
11+
## Customize title and subtitle
12+
13+
To set and update call screen infoHeader `title` & `subtitle`, we have `CallScreenHeaderOptions` to configure and pass to `CallScreenOptions` by param `headerOptions`. The `title`, `Subtitle` in `CallScreenHeaderOptions` are optional parameters and `headerOptions` itself is optional as well.
14+
15+
```swift
16+
var callScreenHeaderOptions = CallScreenHeaderOptions(
17+
title: "This is a custom InfoHeader",
18+
subtitle: "This is a custom subtitle")
19+
var callScreenOptions = CallScreenOptions(controlBarOptions: barOptions,
20+
headerOptions: callScreenHeaderOptions)
21+
22+
// Use any event from call composite to update title & subtitle when the call is in progress.
23+
callScreenHeaderOptions.title = "Custom updated title"
24+
callScreenHeaderOptions.subtitle = "Custom updated subtitle"
25+
```

‎articles/communication-services/how-tos/ui-library-sdk/setup-title-subtitle.md

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
---
2+
title: Customize the title and subtitle of the call bar in the UI Library
3+
titleSuffix: An Azure Communication Services how-to guide
4+
description: Customize the title and subtitle of the call in the Azure Communication Services UI Library.
5+
author: garchiro7
6+
7+
ms.author: jorgegarc
8+
ms.service: azure-communication-services
9+
ms.subservice: calling
10+
ms.topic: how-to
11+
ms.date: 09/01/2024
12+
ms.custom: template-how-to
13+
zone_pivot_groups: acs-plat-ios-android
14+
15+
#Customer intent: As a developer, I want to customize the title and subtitle of the call in the UI Library
16+
---
17+
18+
# Customize the title and subtitle
19+
20+
[!INCLUDE [Public Preview Notice](../../includes/public-preview-include.md)]
21+
22+
Developers now have the capability to customize the title and subtitle of a call, both during setup and while the call is in progress. This feature allows for greater flexibility in aligning the call experience with specific use cases.
23+
24+
For instance, in a customer support scenario, the title could display the issue being addressed, while the subtitle could show the customer's name or ticket number.
25+
26+
Additionally, if tracking time spent in various segments of the call is crucial, the subtitle could dynamically update to display the elapsed call duration, helping to manage the meeting or session effectively.
27+
28+
## Prerequisites
29+
30+
- An Azure account with an active subscription. [Create an account for free](https://azure.microsoft.com/free/?WT.mc_id=A261C142F).
31+
- A deployed Communication Services resource. [Create a Communication Services resource](../../quickstarts/create-communication-resource.md).
32+
- A user access token to enable the call client. [Get a user access token](../../quickstarts/access-tokens.md).
33+
- Optional: Completion of the [quickstart for getting started with the UI Library composites](../../quickstarts/ui-library/get-started-composites.md).
34+
35+
## Set up the feature
36+
37+
::: zone pivot="platform-android"
38+
[!INCLUDE [Customize the title and subtitle in the Android UI Library](./includes/setup-title-subtitle/android.md)]
39+
::: zone-end
40+
41+
::: zone pivot="platform-ios"
42+
[!INCLUDE [Customize the title and subtitle in the iOS UI Library](./includes/setup-title-subtitle/ios.md)]
43+
::: zone-end
44+
45+
## Next steps
46+
47+
- [Learn more about the UI Library](../../concepts/ui-library/ui-library-overview.md)

0 commit comments

Comments
 (0)