@zoom/videosdk-ui-toolkit 1.9.8 → 1.10.8-2

package/README.md

@@ -1,12 +1,10 @@
-# Zoom Video SDK UI toolkit for web (beta)
+# Zoom Video SDK UI toolkit for web
 
 Use of this SDK is subject to our [Terms of Use](https://explore.zoom.us/en/video-sdk-terms/).
 
 The [Zoom Video SDK UI toolkit](https://developers.zoom.us/docs/video-sdk/web/ui-toolkit/) is a prebuilt video chat user interface powered by the Zoom Video SDK.
 
-![Zoom Video SDK UI toolkit web](videosdk-ui-toolkit-web.png)
-
-> Zoom Video SDK UI toolkit is in a public beta. [Share your feedback with us](https://zoom.sjc1.qualtrics.com/jfe/form/SV_3NMYztWpWzNVSiG), and leverage the [beta FAQ](https://developers.zoom.us/docs/video-sdk/web/ui-toolkit/#beta-faq) for details.
+![Zoom Video SDK UI toolkit web](ui-toolkit–gallery-view.png)
 
 ## Installation
 
@@ -52,9 +50,9 @@ import uitoolkit from './@zoom/videosdk-ui-toolkit/index.js'
 
 ## Usage
 
-### Open Preview
+### Show Preview
 
-To open the preview kit, to preview your camera, microphone, and speaker, create an HTML container that it will be render in:
+To open the preview kit, to preview your camera, microphone, and speaker, create an HTML container that it will be rendered in:
 
 ```html
 <div id='previewContainer'></div>
@@ -78,7 +76,7 @@ uitoolkit.closePreview(previewContainer)
 
 ### Join Session
 
-To join a Video SDK session, create an HTML container that it will be render in:
+To join a Video SDK session, create an HTML container that it will be rendered in:
 
 ```html
 <div id='sessionContainer'></div>
@@ -165,6 +163,193 @@ Currently, we support the following event listeners:
 | `offSessionJoined` | Unsubscribes to the `onSessionJoined` event.        |
 | `offSessionClosed` | Unsubscribes to the `onSessionClosed` event.        |
 
+## Build with UI Toolkit components
+
+Zoom's UI Toolkit now offers Developers powerful built-in components that are ready to use. Currently, we offer the following components:
+
+| Component    | Description                                         |
+| ---------- | --------------------------------------------------- |
+| `uitoolkit-components`    | Gives UI Toolkit components access to Video SDK session and context. |
+| `controls-component`    | Enables users to envoke actions such as muting, starting video, screen sharing, and more. |
+| `video-component`    | Displays user videos and screen sharing. |
+| `chat-component`    | Displays session and 1:1 chat messages. |
+| `users-component`     | Displays the list of users in a session and allows hosts to moderate the session. |
+| `settings-component`    | Displays the session settings and allows users to configure virtual background, camera, microphone, and speaker devices, and see session quality statistics. |
+
+### Show UI Toolkit components
+
+When building with UI Toolkit components, the `uitoolkit-components` component is a required wrapper around the UI Toolkit components. To begin, create an HTML container that it will be rendered in:
+
+```html
+<div id='uitoolkitContainer'></div>
+```
+
+Then, call the `uitoolkit.showUitoolkitComponents` function, passing in the container reference, and the Video SDK session config object:
+
+```js
+var uitoolkitContainer = document.getElementById('uitoolkitContainer')
+
+uitoolkit.showUitoolkitComponents(uitoolkitContainer, config)
+```
+
+### Hide UI Toolkit components
+
+To close the wrapper, call the `uitoolkit.hideUiToolkitComponents` function while passing in the container reference:
+
+```js
+uitoolkit.hideUiToolkitComponents(providerContainer)
+```
+
+### Show the controls component
+
+The controls component is a required component that enables users to control their video call experience.
+To render the controls component, create and HTML container and pass it into the `uitoolkit.showControlsComponent` function:
+
+```html
+<div id='uitoolkitContainer'>
+  ...
+  <div id='controlsContainer'></div>
+  ...
+</div>
+```
+
+```js
+var controlsContainer = document.getElementById('controlsContainer')
+
+uitoolkit.showControlsComponent(controlsContainer)
+```
+
+### Hide the controls component
+
+To close the Control Bar Component, call the `uitoolkit.hideControlsComponent` function while passing in the container reference:
+
+```js
+uitoolkit.hideControlsComponent(controlsContainer)
+```
+
+### Show the video component
+
+To render the video component, create and HTML container and pass it into the `uitoolkit.showVideoComponent` function:
+
+```html
+<div id='uitoolkitContainer'>
+  ...
+  <div id='videoContainer'></div>
+  ...
+</div>
+```
+
+```js
+var videoContainer = document.getElementById('videoContainer')
+
+uitoolkit.showVideoComponent(videoContainer)
+```
+
+### Hide the video component
+
+To close the video component, call the `uitoolkit.hideVideoComponent` function while passing in the container reference:
+
+```js
+uitoolkit.hideVideoComponent(videoContainer)
+```
+
+### Show the chat component
+
+To render the Chatkit, create and HTML container and pass it into the `uitoolkit.showChatComponent` function:
+
+```html
+<div id='uitoolkitContainer'>
+  ...
+  <div id='chatContainer'></div>
+  ...
+</div>
+```
+
+```js
+var chatContainer = document.getElementById('chatContainer')
+
+uitoolkit.showChatComponent(chatContainer)
+```
+
+### Hide the chat component
+
+To close the chat component, call the `uitoolkit.hideChatComponent` function while passing in the container reference:
+
+```js
+uitoolkit.hideChatComponent(chatContainer)
+```
+
+### Show the users component
+
+To render the users component, create and HTML container and pass it into the `uitoolkit.showUsersComponent` function:
+
+```html
+<div id='uitoolkitContainer'>
+  ...
+  <div id='usersContainer'></div>
+  ...
+</div>
+```
+
+```js
+var usersContainer = document.getElementById('usersContainer')
+
+uitoolkit.showUsersComponent(usersContainer)
+```
+
+### Hide the users component
+
+To close the users component, call the `uitoolkit.hideUsersComponent` function while passing in the container reference:
+
+```js
+uitoolkit.hideUsersComponent(usersContainer)
+```
+
+### Show the settings component
+
+To render the settings component, create and HTML container and pass it into the `uitoolkit.showSettingsComponent` function:
+
+```html
+<div id='uitoolkitContainer'>
+  ...
+  <div id='settingsContainer'></div>
+  ...
+</div>
+```
+
+```js
+var settingsContainer = document.getElementById('settingsContainer')
+
+uitoolkit.showSettingsComponent(settingsContainer)
+```
+
+### Hide the settings component
+
+To close the settings component, call the `uitoolkit.hideSettingsComponent` function while passing in the container reference:
+
+```js
+uitoolkit.hideSettingsComponent(settingsContainer)
+```
+
+### Cleaning up the session
+
+Once your session has ended, we recommend properly cleaning up the UI Toolkit so users can join subsequent sessions. You can easily do this by using the `onSessionClosed` event listener. Simply call each component's respective hide function to properly remove each component from the DOM. See the following code snippet for an example:
+
+```js
+  ...
+  uitoolkit.onSessionClosed(sessionClosed)
+  ...
+
+  function sessionClosed {
+    uitoolkit.hideSettingsComponent(settingsContainer)
+    uitoolkit.hideUsersComponent(usersContainer)
+    uitoolkit.hideControlsComponent(controlsContainer)
+    uitoolkit.hideVideoComponent(videoContainer)
+    uitoolkit.hideChatComponent(chatContainer)
+    uitoolkit.hideUitoolkitComponents(sessionContainer)
+  }
+```
+
 ## Sample Apps
 
 Sample apps built with the Video SDK UI toolkit are coming soon.