@vindral/web-sdk 2.3.0 → 3.0.0

package/README.md

@@ -1,22 +1,22 @@
 # Vindral Web SDK
 
-**Ultra low latency streaming on all modern web browsers.**
+**Ultra-low latency streaming on all modern web browsers.**
 
-This package contains the Web SDK for Vindral - the ultra low latency streaming platform for synchronized live experiences.
+This package contains the Web SDK for Vindral - the ultra-low latency streaming platform for synchronized live experiences.
 
-For information about the Vindral product family and how the Web SDK fits into the system, [make sure to read the System Overview](https://docs.vindral.com/docs/overview/system-overview).
+For information about the Vindral product family and how the Web SDK fits into the system, [make sure to check out the Vindral documentation](https://docs.vindral.com/).
 
-Make sure to check out the full [Web SDK Documentation](https://docs.vindral.com/web-sdk/) as well.
+Make sure to check out the [Web SDK guides](https://docs.vindral.com/playout/websdk/getting-started/) as well.
 
 [Check out our demo](https://demo.vindral.com/) to see some of Vindral's features.
 
 ## Getting Started
 
-There are multiple ways to integrate the Web SDK, depending on use-case.
+There are multiple ways to integrate the Web SDK, depending on the use case.
 
 The most simple way to get started is to use the iframe-based [Embed Player](#embed-player). This requires the least amount of code, and will automatically be updated when new releases are available.
 
-The two other alternatives are [Player SDK](#player-sdk) and [Core SDK](#core-sdk) - these are the recommended options if the integration requires access to the APIs, such as timed metadata or other controls. The two SDKs have very similar APIs, but the Player SDK provides controls and buffering indication built in - the Core SDK is the most strippped down implementation for use-cases where all UI components are customized.
+The two other alternatives are [Player SDK](#player-sdk) and [Core SDK](#core-sdk) - these are the recommended options if the integration requires access to the APIs, such as timed metadata or other controls. The two SDKs have very similar APIs, but the Player SDK provides controls and buffering indication built in - the Core SDK is the most stripped-down implementation for use cases where all UI components are customized.
 
 If you are going for one of the SDK alternatives, follow the steps at [Installation](#installation) to get started:
 
@@ -24,7 +24,7 @@ If you are going for one of the SDK alternatives, follow the steps at [Installat
 
 This is the simplest way to integrate. It allows you to add a fully functional video player to your site in no time. It will also be automatically updated when improvements are released.
 
-Add the following html snippet, set `channelId` to channel id credential, done!
+Add the following HTML snippet, set `channelId` to channel id credential, and done!
 
 ```html
 <iframe
@@ -34,7 +34,7 @@ Add the following html snippet, set `channelId` to channel id credential, done!
 ></iframe>
 ```
 
-[See the player in action](https://embed.vindral.com/?channelId=vindral_demo1_ci_099ee1fa-80f3-455e-aa23-3d184e93e04f) or [read more about Embed Player here](https://docs.vindral.com/docs/guides/using-the-embed-player).
+[See the player in action](https://embed.vindral.com/?channelId=vindral_demo1_ci_099ee1fa-80f3-455e-aa23-3d184e93e04f) or [read more about Embed Player here](https://docs.vindral.com/playout/embeddable-player).
 
 ## Installation
 
@@ -52,13 +52,13 @@ yarn add @vindral/web-sdk
 
 ### Player SDK
 
-The Player SDK provides a ready-to-go player with controls - perfect for use-cases where the embed solution is not enough, such as when access to the javascript API is needed.
+The Player SDK provides a ready-to-go player with controls - perfect for use cases where the embed solution is not enough, such as when access to the javascript API is needed.
 
 **Example**
 
-This example attaches a player to an element with the id `#root`. The player will take care of activating audio when needed and provides a minimalistic ui for fullscreen, channel switching, language selection, etc.
+This example attaches a player to an element with the id `#root`. The player will take care of activating audio when needed and provides a minimalistic UI for fullscreen, channel switching, language selection, etc.
 
-The example assumes that there is a html page that loads this script that has at least a div with `id="#root"`.
+The example assumes that there is an HTML page that loads this script that has at least a div with `id="#root"`.
 
 ```javascript
 import { Player } from "@vindral/web-sdk"
@@ -77,13 +77,33 @@ player.core.connect()
 player.attach(root)
 ```
 
+Finally, import `@vindral/web-sdk/style.css` (or `./node_modules/@vindral/web-sdk/style.css` if that doesn't work) into your CSS. This step may differ depending on your build tools, some tools will allow you to import CSS directly in your js:
+
+```js
+import "@vindral/web-sdk/style.css"
+```
+
+or, from a CSS file:
+
+```css
+@import "@vindral/web-sdk/style.css";
+```
+
+or, in your html file:
+
+```html
+<link rel="stylesheet" href="./node_modules/@vindral/web-sdk/style.css" />
+```
+
+We recommend that you consult the documentation for your build tool for more information.
+
 ### Core SDK
 
 The Core SDK is the lowest level method to integrate that provides only a video view and audio playback - this allows for full customization of the look of buffering indication, controls, etc.
 
 **Example**
 
-The example assumes that there is a html page that loads this script that has at least a div with `id="#root"`, `id="#playback-state"` and a button with `id="#activate-audio-button"`.
+The example assumes that there is an HTML page that loads this script that has at least a div with `id="#root"`, `id="#playback-state"` and a button with `id="#activate-audio-button"`.
 
 ```javascript
 import { Vindral } from "@vindral/web-sdk"
@@ -110,7 +130,19 @@ instance.on("error", (error) => {
 })
 
 // This event is emitted when the playback state changes - can be used to show a buffer spinner during buffering
-instance.on("playback state", (state) => (playbackState.textContent = state))
+instance.on("playback state", (state) => {
+  switch (state) {
+    case "paused":
+      // Here would be a good place to show some play button to allow the user to start playing again
+      break
+    case "playing":
+      // Hide any buffering or paused state from the UI
+      break
+    case "buffering":
+      // Show some buffering spinner
+      break
+  }
+})
 
 // This event is emitted when timed metadata events occur
 instance.on("metadata", (metadata) => console.log("metadata: ", metadata.content))
@@ -119,7 +151,7 @@ instance.on("metadata", (metadata) => console.log("metadata: ", metadata.content
 instance.on("needs user input", () => (button.style.display = "block"))
 
 // Starts connecting to the channel
-instance.connect()
+instance.play()
 
 // Attaches the video view to the DOM
 instance.attach(root)
@@ -127,7 +159,9 @@ instance.attach(root)
 // This activates audio on browsers that need a user input before audio can be played
 button.addEventListener("click", () => {
   button.style.display = "none"
-  instance.userInput()
+
+  // Calling play again within a user click will activate audio if needed
+  instance.play()
 })
 ```