Skip to content

Commit 7306d9b

Browse files
author
Jill Grant
authored
Merge pull request #285839 from garchiro7/tittle-subtitle-configuration
Add new section about tittle subtitle and events for Native UI Library
2 parents 7b5afd6 + 721e314 commit 7306d9b

File tree

10 files changed

+369
-61
lines changed

10 files changed

+369
-61
lines changed

‎articles/communication-services/concepts/ui-library/includes/mobile-ui-closed-captions.png renamed to ‎articles/communication-services/concepts/ui-library/includes/media/mobile-ui-closed-captions.png

File renamed without changes.

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

Lines changed: 87 additions & 60 deletions
Large diffs are not rendered by default.

‎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: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
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 `onRemoteParticipantJoined` to listen if the participant joins the call.
14+
15+
```swift
16+
let onRemoteParticipantJoinedHandler: ([CommunicationIdentifier]) -> Void = { [weak callComposite] ids in
17+
guard let composite = callComposite else {
18+
return
19+
}
20+
/// ids are the communication identifiers that has joined and are present in the meeting
21+
}
22+
callComposite.events.onRemoteParticipantJoined = onRemoteParticipantJoinedHandler
23+
```
24+
25+
## Participant left the call
26+
27+
We expose `onRemoteParticipantLeft` to listen if the participant leaves the call.
28+
29+
```swift
30+
let onRemoteParticipantLeftHandler: ([CommunicationIdentifier]) -> Void = { [weak callComposite] ids in
31+
guard let composite = callComposite else {
32+
return
33+
}
34+
/// ids are the communication identifiers which have left the meeting just now.
35+
}
36+
callComposite.events.onRemoteParticipantLeft = onRemoteParticipantLeftHandler
37+
```

‎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 `CallCompositeCallScreenHeaderViewData`. Default UI library title is displayed if `title` value isn't configured.
14+
15+
#### [Kotlin](#tab/kotlin)
16+
17+
```kotlin
18+
// create call screen header view data to set title and subtitle
19+
val callScreenHeaderViewData = CallCompositeCallScreenHeaderViewData()
20+
callScreenHeaderViewData.title = "title"
21+
callScreenHeaderViewData.subtitle = "subtitle"
22+
23+
// create call screen options
24+
val callScreenOptions = CallCompositeCallScreenOptions()
25+
callScreenOptions.setHeaderViewData(callScreenHeaderViewData)
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+
// callScreenHeaderViewData.title = "updated title"
38+
// callScreenHeaderViewData.subtitle = "updated subtitle"
39+
```
40+
41+
#### [Java](#tab/java)
42+
```java
43+
// Create call screen header view data to set title and subtitle
44+
CallCompositeCallScreenHeaderViewData callScreenHeaderViewData = new CallCompositeCallScreenHeaderViewData();
45+
callScreenHeaderViewData.setTitle("title");
46+
callScreenHeaderViewData.setSubtitle("subtitle");
47+
48+
// Create call screen options
49+
CallCompositeCallScreenOptions callScreenOptions = new CallCompositeCallScreenOptions();
50+
callScreenOptions.setHeaderOptions(callScreenHeaderViewData);
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+
// callScreenHeaderViewData.setTitle("updated title");
63+
// callScreenHeaderViewData.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 `CallScreenHeaderViewData` to configure and pass to `CallScreenOptions` by param `headerViewData`. The `title`, `Subtitle` in `CallScreenHeaderViewData` are optional parameters and `headerViewData` itself is optional as well. Default UI library title is displayed if `title` value isn't configured.
14+
15+
```swift
16+
var headerViewData = CallScreenHeaderViewData(
17+
title: "This is a custom InfoHeader",
18+
subtitle: "This is a custom subtitle")
19+
var callScreenOptions = CallScreenOptions(controlBarOptions: barOptions,
20+
headerViewData: headerViewData)
21+
22+
// Use any event from call composite to update title & subtitle when the call is in progress.
23+
headerViewData.title = "Custom updated title"
24+
headerViewData.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)

‎articles/communication-services/toc.yml

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -443,6 +443,8 @@ items:
443443
href: how-tos/ui-library-sdk/theming.md
444444
- name: Customize the button bar
445445
href: how-tos/ui-library-sdk/button-injection.md
446+
- name: Customize the title and subtitle
447+
href: how-tos/ui-library-sdk/setup-title-subtitle.md
446448
- name: Disable end call confirmation
447449
href: how-tos/ui-library-sdk/leave-call-confirmation.md
448450
- name: Enable audio only mode
@@ -451,6 +453,8 @@ items:
451453
href: how-tos/ui-library-sdk/picture-in-picture.md
452454
- name: Enable skip the setup screen
453455
href: how-tos/ui-library-sdk/skip-setup-screen.md
456+
- name: Events
457+
href: how-tos/ui-library-sdk/events.md
454458
- name: Inject participant view data
455459
href: how-tos/ui-library-sdk/data-model.md
456460
- name: Integrate CallKit

0 commit comments

Comments
 (0)