-
Notifications
You must be signed in to change notification settings - Fork 34
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 add-transcription-modes
- Loading branch information
Showing
43 changed files
with
804 additions
and
190 deletions.
There are no files selected for viewing
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 |
|---|---|---|
|
|
@@ -163,4 +163,5 @@ keyof | |
| unobserve | ||
| qp | ||
| rehype | ||
| num | ||
| num | ||
| url | ||
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -29,6 +29,12 @@ nav: '4.4' | |
|
|
||
| --- | ||
|
|
||
| ### state | ||
|
|
||
| • `Optional` **state**: `HMSStreamingState` | ||
|
|
||
| --- | ||
|
|
||
| ### url | ||
|
|
||
| • **url**: `string` | ||
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
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
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,81 @@ | ||
| --- | ||
| title: Appearance | ||
| nav: 2.2 | ||
| --- | ||
|
|
||
| Customize the theme of your Prebuilt app, ensuring it aligns with your brand identity and user experience preferences. Preview your changes on the go, once saved you can test these changes on Prebuilt links and our native apps. This documentation will guide you through the various appearance customization available within the Prebuilt Customizer. | ||
|
|
||
| Head to [100ms dashboard](https://dashboard.100ms.live/dashboard), choose an existing template or create a new one. Jump to Customize Prebuilt and customize Prebuilt's default appearance. | ||
|
|
||
| ## Changing Logo | ||
|
|
||
| You can easily replace the default logo that appears on the Prebuilt interface with your own logo. To do this, click on "Logo" input field and provide the URL of your custom logo image. Ensure that the image meets your desired dimensions. The supported image format is .png. For best results, upload an image with a transparent background. | ||
|
|
||
|
|
||
| <div style={{textAlign: 'center'}}> | ||
|
|
||
|  | ||
| </div> | ||
|
|
||
| ## Switching Between Dark and Light Themes | ||
|
|
||
| Prebuilt offers two distinct themes for your app: a dark theme and a light theme. You can choose the one that best suits your app’s aesthetics. | ||
|
|
||
| Once you toggle the theme switch to select either the dark or light theme, your Prebuilt app will be displayed with the selected theme. | ||
|
|
||
| Selecting between a dark or light theme is crucial for setting the fundamental visual structure of your app. While the choice may appear limited with just two themes, these themes form the canvas on which your color tokens are applied. This ensures a unified and harmonious design, aligning with your brand and elevating the overall user experience. | ||
|
|
||
| <Note title="Switching themes"> | ||
| If you change the theme type, your color customizations will be reset. Be sure to reconfigure your color settings under Color Tokens section after switching between the dark and light themes to maintain your desired appearance. | ||
| </Note> | ||
|
|
||
| <div style={{textAlign: 'center'}}> | ||
|
|
||
|  | ||
| </div> | ||
|
|
||
| ## Color Tokens | ||
|
|
||
| Color Tokens allow you to customize various color aspects of the Prebuilt user interface, ensuring consistency with your brand or app's design. To customize any of the colors, adjust the color values for each color variant according to your preferences. You can input a hex code, enter RGB values or select from the color picker. Click the `Save` button to apply the changes. | ||
|
|
||
| <Note title ="Modifying color tokens"> | ||
| You only need to modify the default color value; the other color roles are automatically generated to maintain a consistent color scheme. For example, changing Primary color value generates Primary Default, Bright, Dim and Disabled. | ||
| </Note> | ||
|
|
||
| <div style={{textAlign: 'center'}}> | ||
|
|
||
|  | ||
| </div> | ||
|
|
||
| ### Primary Colors | ||
|
|
||
| The primary colors play a crucial role in defining UI elements that reflect the brand color, especially main elements like primary action buttons. | ||
|
|
||
|  | ||
|
|
||
| ### Secondary Colors | ||
|
|
||
| Secondary colors are used for UI elements that reflect the brand but with lower emphasis like secondary buttons, offering contrast to primary elements. | ||
|
|
||
|  | ||
|
|
||
| ### Background Colors | ||
|
|
||
| Background colors are used for the base layer situated behind all content and UI elements. | ||
|
|
||
|  | ||
|
|
||
| ### Surface Colors | ||
|
|
||
| Surface colors define contained areas, distinguishing them from a background and other on-screen elements. | ||
|
|
||
|  | ||
|
|
||
| ### Border Colors | ||
|
|
||
| Border colors create boundaries and emphasis to improve usability. | ||
|
|
||
|  | ||
|
|
||
|
|
||
| With these customization options, you can tailor the appearance of your Prebuilt app to match your brand and user interface design preferences, delivering a unique and engaging experience to your users. |
103 changes: 103 additions & 0 deletions
103
docs/get-started/v2/get-started/prebuilt/Screens-and-components.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,103 @@ | ||
| --- | ||
| title: Screens and Components | ||
| nav: 2.3 | ||
| --- | ||
|
|
||
| As Prebuilt UI maps to its template configuration, you'll be able to preview and customize Prebuilt behavior for each role in your template. This guide explains how Prebuilt's defaults can be customized for its role using screens and components. | ||
|
|
||
| - **Screens** - represents Prebuilt's screens, namely | ||
| - Preview - a screen that allows setting up a participant's audio/video before they join a 100ms room | ||
| - Room - a space where participants engage in a video-conferencing or livestreaming template set up | ||
| - **Components** - each of the Prebuilt screen has its components that exposes functionalities like Join button, Chat, participant list, video layouts or features like bring on stage | ||
|
|
||
| ## Configuring screens and components | ||
| By default, components are enabled based on the role associated with the use case you've selected during template creation. A component can be easily enabled or disabled for a role, you can also go deeper into a component and customize its configuration on Prebuilt. Follow these steps to get started: | ||
|
|
||
| - Choose an existing template or create a new one on 100ms dashboard. | ||
| - Jump to Customize Prebuilt and head to "Screens and components" section. | ||
| - Select a role to start customizing components on Preview and Room screens. | ||
|
|
||
| <video loop="true" autoplay="autoplay" id="vid" muted> | ||
| <source src="/docs/docs/v2/customiser.mp4" type="video/mp4" /> | ||
| </video> | ||
|
|
||
| ### Preview Screen | ||
|
|
||
| #### Header | ||
| Set up a custom header for each roles using Title and Subtitle fields. | ||
| #### Join | ||
| Choose how peers join the room | ||
| - **Join Now** - Peers from this role will see "Join Now" and would be able join after entering their name. | ||
| - **Join and Start Streaming** - Peers from this role will see "Go Live" and would be able to join and start streaming when they join the room. Ensure that this role has the permission to "Start/Stop HLS streaming" as `enabled` under Role permissions on its template configuration. | ||
|
|
||
| ### Room Screen | ||
| The Prebuilt room screen offers a set of components designed to enhance interactivity within a room. Choose a role to kickstart your customization journey. | ||
|
|
||
| #### Chat | ||
| Toggle the chat functionality on or off for a specific role. When chat is disabled for a role, that role won't have access to the chat component within the room. If enabled, you can further fine-tune and customize the functionalities of the Prebuilt UI for chat. | ||
|
|
||
| ##### Initial State | ||
| This setting determines whether the chat component is initially open or closed when a participant joins a session. Keeping the initial state as open can be particularly useful when using the chat overlay view on mobile devices. | ||
|
|
||
| ##### Enable Overlay View | ||
| In an overlay view, the chat component overlays on top of video tiles, delivering an immersive chat experience for mobile livestreaming scenarios. Please note that this chat view is exclusively available on mobile devices and is not supported on large-screen applications. | ||
|
|
||
| ##### Allow Pinning messages | ||
| Enabling this feature allows the selected role to pin important chat messages on the chat component, making them visible to everyone. | ||
|
|
||
|
|
||
| #### Participant List | ||
| Ensure participant list accessibility for roles that require visibility. In certain scenarios, such as large room viewers, there may be no need for them to view other participants, but Hosts or Broadcasters might find it essential to maintain oversight of the participant list. By default, the participant list is enabled for all roles across all templates. | ||
|
|
||
| #### Video Tile Layout | ||
| 100ms Prebuilt UI allows tweaks on its default grid layout and supports multiple video layouts. | ||
|
|
||
| ##### Enable local tile inset | ||
| Enabling this makes the local peer's *(for the selected role)* tile in a smaller inset window as default, alternatively if it's disabled, the local tile will be part of the grid view. Join with at least two peers to preview this configuration in action. | ||
|
|
||
| ##### Prominent roles | ||
| Defining one or more roles as prominent gives them higher tile view prominence for the selected role. For example: | ||
| - For a 1:1 call, define Host as prominent tile for Guest and vice-versa. | ||
| - For a webinar, set Host as the prominent tile for all other roles. Every role would see Host as the primary tile in the room | ||
| - For a mobile-first livestreaming view, set Broadcaster as prominent tile for every other role, including Broadcaster themselves. | ||
|
|
||
| ##### Can spotlight peer | ||
| Allow this config for roles who can spotlight others or themselves in the room. Spotlighting a tile reflects for everyone in the room. | ||
|
|
||
| <Note title ="Different in Prominence and Spotlight"> | ||
| Assigning a role as "prominent" for either themselves or other roles establishes a fixed layout that remains unchanged for the entire session. This is particularly well-suited for scenarios where a specific role needs to maintain a constant presence, as seen in webinars and livestreaming. Conversely, spotlighting either their own tile or the tiles of others permits specific participant tiles to temporarily take center stage within the session, allowing for more adaptable layout adjustments as needed. | ||
| </Note> | ||
|
|
||
| #### Be Right Back (BRB) | ||
| Depending on your use case, allow roles to set themselves on BRB mode. If disabled, this component will not be visible to the selected role. | ||
|
|
||
|
|
||
| #### Emoji Reactions | ||
| Enabling this for a role allows its peers to send emoji reactions in the room. | ||
|
|
||
| #### Bring others on Stage | ||
| Stage is a virtual space within a room that enables participants to actively engage with their audio and video, and publish it with a much larger audience. With the 'Bring on Stage' feature enabled, viewers who are not on stage can easily interact with the participants on stage, once they have been granted access to the stage. | ||
| Enable Bring on stage for roles that require the ability to allow or deny stage requests from off-stage participants. By default, this feature is enabled for Hosts, Broadcasters and Co-broadcasters, while viewers with non-publishing roles can use the hand-raise option to request stage access. This component can extend its support to conferencing, webinars and livestreaming scenarios. However, if your use case does not require this feature, you can simply disable it to ensure a seamless experience for all users. | ||
|
|
||
| ##### Bring on Stage Label | ||
|
|
||
| Customize text label that Hosts and Broadcasters will see when they receive on stage requests. The default text is "Bring to stage". | ||
|
|
||
| ##### Remove from Stage Label | ||
|
|
||
| Customize text label that Hosts and Broadcasters will see when they receive on stage requests. The default text is "Remove from stage". | ||
|
|
||
| ##### On Stage and Off Stage Role | ||
| An off stage participant becomes an on stage participant once their stage access has been accepted. For instance, an off stage role, say Viewer requests a Broadcaster to go on stage. Once their request is accepted, the Viewer can transition to an on stage role, which could be a Viewer-on-stage, a Guest, or a Co-broadcaster. | ||
|
|
||
| Let's take a quick example to understand this better. | ||
|
|
||
| Assume a livestreaming scenario with Bring on stage enabled for Broadcasters and Co-Broadcasters, where | ||
| - Off-stage participants have been assigned role: Viewer a role with no audio/video publish permissions | ||
| - On-stage participants have been assigned role : Guest, a role with audio/video publish permissions | ||
|
|
||
| Once the configuration is set under Bring on stage, join Prebuilt links or apps as these roles: Broadcaster, Co-Broadcaster and Viewer to try bring on stage feature like below: | ||
| 1. Participants from Viewer role can choose to raise their hand during a session to request to go on stage and interact with Broadcaster(s) and Co-Broadcaster(s) | ||
| 2. Broadcaster(s) and Co-Broadcaster(s) will receive stage access notification from these off-stage partcipants; where they can choose to accept or deny the stage request. Meanwhile, a Viewer can choose to lower their hand untill their request has been accepted or denied. Broadcaster(s) can also track all such requests under "Hand Raise" section under participant list. | ||
| 3. When a Broadcaster accepts a stage request from a Viewer(an off-stage participant), the Viewer becomes a Guest (an on-stage participant) as per the configuration set | ||
| 4. Broadcaster(s) can choose to mute/unmute audio/video for Guest or simply remove them from stage. |
Oops, something went wrong.