Add closed captions support into UI library

Author: garchiro7

articles/communication-services/concepts/ui-library/includes/mobile-ui-closed-captions.png

@@ -22,6 +22,8 @@ You can use the call composite in Communication Services to create these use cas
 | [Teams interoperability](../../teams-interop.md)                     | Join the call lobby                                             |
 |                                                                                                 | Display a transcription and recording alert banner               |
 |                                                                                                 | Admit/Reject lobby participants                                 |
+| Closed Captions                                                                                 | Teams interoperability                                      |
+|                                                                                                 | Group call, Rooms call, and 1:1 call                                       |
 | Participant gallery                                                                   | Show remote participants on a grid              |
 |                                                                                                 | Make video preview available throughout a call for a local user |
 |                                                                                                 | Make default avatars available when video is off            |
@@ -69,6 +71,17 @@ The distinction between each role lies in the capabilities they possess during a
 > [!NOTE]
 > The Rooms API serves the purpose of creating rooms, managing users, and adjusting the lifetime of rooms. It is important to note that the Rooms API is a back-end service that is separate from the UI Library.
 
+### Closed captions
+
+Closed captions enable a wide range of scenarios, including interoperability with Teams, Azure Communication Services Group calls, Rooms calls, and one-on-one calls. This feature ensures that users can follow along with conversations in various calling environments, **enhancing accessibility** and user experience. However, it's important to note that users need to manually select the language for captions using the UI Library out of the box, as the system doesn't automatically detect the spoken language.
+
+:::image type="content" source="mobile-ui-closed-captions.png" alt-text="Closed captions looks like into the UI Library":::
+
+> [!NOTE]
+>Closed Captions will not be billed at the beginning of its Public Preview. This is for a limited time only, usage of Captions will likely be billed starting from June.
+
+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.
+
 ### View shared content
 
 Through the UI Library for mobile native platforms, call participants can view shared content when other participants share their screens during a Teams call. A remote participant can use stretch and pinch gestures to zoom in or out on the shared content in the call.

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

@@ -53,3 +53,4 @@ Microsoft indicates to you via the Azure Communication Services API that recordi
 
 - Get started with a [Closed Captions Quickstart](../../quickstarts/voice-video-calling/get-started-with-closed-captions.md)
 - Learn more about using closed captions in [Teams interop](../interop/enable-closed-captions.md) scenarios.
+- Learn more about using closed captions in [UI Library](../ui-library/ui-library-overview.md) scenarios.

articles/communication-services/concepts/voice-video-calling/closed-captions.md

@@ -0,0 +1,46 @@
+---
+title: Enable scenarios using close captions and the UI Library
+titleSuffix: An Azure Communication Services how-to guide
+description: Enable scenarios using closed captions and Azure Communication Services UI Library.
+author: garchiro7
+ms.author: jorgegarc
+ms.service: azure-communication-services
+ms.subservice: calling
+ms.topic: how-to 
+ms.date: 07/01/2024
+ms.custom: template-how-to
+zone_pivot_groups: acs-plat-ios-android
+
+#Customer intent: As a developer, I want setup closed captions into a call using the UI Library.
+---
+
+# Closed captions
+
+Closed captions play a critical role in video voice calling apps, providing numerous benefits that enhance the accessibility, usability, and overall user experience of these platforms.
+
+The Azure Communication Services UI Library offers the capabilities to enable closed captions in the calling composite and set up the default language, but the end users are always capable to select the language via UI interaction.
+
+:::image type="content" source="./includes/closed-captions/mobile-ui-closed-captions.png" alt-text="Closed captions looks like into the UI Library":::
+
+In this article, you learn how to enable closed captions scenarios using the UI Library.
+
+## Prerequisites
+
+- An Azure account with an active subscription. [Create an account for free](https://azure.microsoft.com/free/?WT.mc_id=A261C142F).
+- A deployed Communication Services resource. [Create a Communication Services resource](../../quickstarts/create-communication-resource.md).
+- A user access token to enable the call client. [Get a user access token](../../quickstarts/access-tokens.md).
+- Optional: Completion of the [quickstart for getting started with the UI Library composites](../../quickstarts/ui-library/get-started-composites.md).
+
+## Set up the feature
+
+::: zone pivot="platform-android"
+[!INCLUDE [Enable closed captions in the Android UI Library](./includes/closed-captions/android.md)]
+::: zone-end
+
+::: zone pivot="platform-ios"
+[!INCLUDE [Enable closed captions in the iOS UI Library](./includes/closed-captions/ios.md)]
+::: zone-end
+
+## Next steps
+
+- [Learn more about the UI Library](../../concepts/ui-library/ui-library-overview.md)

articles/communication-services/how-tos/ui-library-sdk/closed-captions.md

@@ -0,0 +1,23 @@
+---
+description: description: Enable scenarios using closed captions and the UI Library in Android
+author: garchiro7
+
+ms.author: jorgegarc
+ms.date: 07/01/2024
+ms.topic: include
+ms.service: azure-communication-services
+---
+
+### Enable closed captions
+
+#### [Kotlin](#tab/kotlin)
+
+```kotlin
+
+```
+
+#### [Java](#tab/java)
+
+```java
+
+```

articles/communication-services/how-tos/ui-library-sdk/includes/closed-captions/android.md

@@ -0,0 +1,16 @@
+---
+description: Enable scenarios using closed captions and the UI Library in iOS
+author: garchiro7
+
+ms.author: jorgegarc
+ms.date: 07/01/2024
+ms.topic: include
+ms.service: azure-communication-services
+---
+
+### Enable closed captions
+
+```swift
+
+```
+

articles/communication-services/how-tos/ui-library-sdk/includes/closed-captions/ios.md

@@ -422,6 +422,8 @@ items:
         items: 
         - name: Configure default orientation
           href: how-tos/ui-library-sdk/orientation.md
+        - name: Configure closed captions
+          href: how-tos/ui-library-sdk/closed-captions.md
         - name: Configure theming
           href: how-tos/ui-library-sdk/theming.md
         - name: Disable end call confirmation