@zoom/videosdk-ui-toolkit 1.8.18 → 1.9.0

package/README.md

@@ -16,14 +16,19 @@ In your frontend project, install the Video SDK UI toolkit:
 $ npm install @zoom/videosdk-ui-toolkit --save
 ```
 
-## Setup
+Or, for Vanilla JS applications, download the package and add it to your project. Then, add the following script and CSS style to the HTML page you want the UI toolkit to live on:
+
+```html
+<link rel="stylesheet" href="@zoom/videosdk-ui-toolkit/dist/videosdk-ui-toolkit.css">
+<script src="@zoom/videosdk-ui-toolkit/index.js" type="module"></script>
+```
 
-In the component file where you want to use the Video SDK UI, import the JavaScript package and the CSS styles.
+## Setup
 
-For webpack / single page applications like Angular, Vue, React, etc, use the import syntax:
+For webpack / single page applications like Angular, Vue, React, etc, import the UI toolkit, package and styles:
 
 ```js
-import * as UIToolkit from '@zoom/videosdk-ui-toolkit'
+import uitoolkit from '@zoom/videosdk-ui-toolkit'
 import '@zoom/videosdk-ui-toolkit/dist/videosdk-ui-toolkit.css'
 ```
 
@@ -35,89 +40,118 @@ In Angular, CSS can't be imported directly into the component, instead, add the
 ]
 ```
 
-For Vanilla JS applications, use the link and script tag syntax in your html file:
+Or, for Vanilla JS applications, import the JS file directly:
 
-```html
-<link rel="stylesheet" href="videosdk-ui-toolkit.css">
-<script src="videosdk-ui-toolkit.js"></script>
+```js
+import uitoolkit from './@zoom/videosdk-ui-toolkit/index.js'
 ```
 
+> [JS imports](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules#applying_the_module_to_your_html) work if your script tag has the `type="module"` attribute.
+
+> UI toolkit CDN is coming soon to make vanilla JS usage easier.
+
 ## Usage
 
-### Preview
+### Open Preview
 
-To preview your local camera, microphone, and speaker, render the following HTML element:
+To open the preview kit, to preview your camera, microphone, and speaker, create an HTML container that it will be render in:
 
 ```html
-<app-previewkit></app-previewkit>
+<div id='previewContainer'></div>
 ```
 
-### Join Session
+Then, call the `uitoolkit.openPreview` function, passing in the container reference:
 
-To join a Video SDK session, add the following HTML element to where you want the UI Toolkit to be rendered:
+```js
+var previewContainer = document.getElementById('previewContainer')
 
-```html
-<div id='UIToolkit'></div>
+uitoolkit.openPreview(previewContainer)
 ```
 
-Then, create your UIToolkit instance and render it to your DOM:
+### Close Preview
+
+To close the preview kit, call the `uitoolkit.closePreview` function:
 
 ```js
-let UIToolKit = document.createElement('app-uitoolkit');
+uitoolkit.closePreview(previewContainer)
+```
 
-document.getElementById('UIToolkit')?.append(UIToolKit);
+### Join Session
+
+To join a Video SDK session, create an HTML container that it will be render in:
+
+```html
+<div id='sessionContainer'></div>
 ```
 
-Next, create your Video SDK config object, with your [Video SDK session info](https://developers.zoom.us/docs/video-sdk/web/sessions/#prerequisites), [Video SDK JWT](https://developers.zoom.us/docs/video-sdk/auth/), and features you want to render. Pass this object into the `window.ZoomUIToolKit.init()` function and call the `window.ZoomUIToolKit.join()` function to start or join a Video SDK Session:
+Create your Video SDK session config object, with your [Video SDK JWT](https://developers.zoom.us/docs/video-sdk/auth/), and [Video SDK session info](https://developers.zoom.us/docs/video-sdk/web/sessions/#prerequisites) features you want to render.
 
 ```js
-let UIToolKitConfig = {
+var config = {
   videoSDKJWT: '',
-  sessionName: '',
-  userName: '',
-  sessionPasscode: '',
+  sessionName: 'SessionA',
+  userName: 'UserA',
+  sessionPasscode: 'abc123',
   features: ['video', 'audio', 'settings', 'users', 'chat']
-};
+}
+```
 
-window.ZoomUIToolKit.init(UIToolKitConfig);
+Then, call the `uitoolkit.joinSession` function, passing in the container reference, and the Video SDK session config object:
 
-window.ZoomUIToolKit.join();
+```js
+var sessionContainer = document.getElementById('sessionContainer')
+
+uitoolkit.joinSession(sessionContainer, config)
 ```
 
-### Leave/End Session
+### Leave Session
 
 To leave a Video SDK session, the user can click the red leave button. The host can also end the session for everyone, by clicking their red end button.
 
-You can also leave/end a session programatically by calling the `window.ZoomUIToolKit.destroy()` function, the session will be left or ended based on the user's role in their [Video SDK JWT](https://developers.zoom.us/docs/video-sdk/auth/):
+You can also leave a session programatically by calling the `uitoolkit.closeSession` function:
 
 ```js
-window.ZoomUIToolKit.destroy(); //Leaves the meeting
-//or
-window.ZoomUIToolKit.destroy(true); //If you're a host you can end the meeting by passing in 'true'
+uitoolkit.closeSession(sessionContainer)
 ```
 
-Use the `uikit-destroy` event listener to be notified when the session is left or ended by a user:
+### Event Listeners
+
+To subscribe to event listeners, define a callback function that you want to execute when the respective event is triggered:
 
 ```js
-window.ZoomUIToolKit.subscribe("uikit-destroy", () => {
-  // session left/ended, post session business logic...
-});
+var sessionJoined = (() => {
+  console.log('session joined')
+})
+
+var sessionClosed = (() => {
+  console.log('session closed')
+})
 ```
 
-You can also subscribe directly to the [Zoom Video SDK Events](https://marketplacefront.zoom.us/sdk/custom/web/modules/VideoClient.html#on) using the `window.ZoomUIToolKit.vsdkSubscribe()` method. Pass in the name of the Video SDK event and a callback function as shown:
- ```js
-window.ZoomUIToolKit.vsdkSubscribe("user-added", () => {
-        console.log("USER ADDED!")
-});
+Then, pass the callback function to the respective **on** event listener (after calling the `uitoolkit.joinSession` function).
+
+```js
+uitoolkit.onSessionJoined(sessionJoined)
+
+uitoolkit.onSessionClosed(sessionClosed)
 ```
 
-Subscribe to the `loader-switch` event to better sync your loaders to the join flow of the UIToolKit! You only need to pass in a callback function that controls the state of your loader. The UIToolKit will fire the event and execute your loader callback logic once the meeting has been joined:
+To unsubscribe to event listeners, pass the callback function to the respective **off** event listener.
+
 ```js
-window.ZoomUIToolKit.subscribe("loader-switch", () => { 
-  setLoader(loader => !loader) 
-  });
+uitoolkit.offSessionJoined(sessionJoined)
+
+uitoolkit.offSessionClosed(sessionClosed)
 ```
 
+Currently, we support the following event listeners:
+
+| Event Listener     | Description                                        |
+| ------------------ | -------------------------------------------------- |
+| `onSessionJoined`  | Fires when the user joins the session succesfully. |
+| `onSessionClosed`  | Fires when the session is left or ended.           |
+| `offSessionJoined` | Unsubscribes to the `onSessionJoined` event.       |
+| `offSessionClosed` | Unsubscribes to the `onSessionClosed` event.       |
 
 ## Sample Apps