Merge pull request #16 from opentok/DEVX-7090---video-subscriber-updates

Devx 7090 video subscriber updates
opentok · Apr 7, 2023 · 7fb99ea · 7fb99ea
2 parents 9415b4b + 5dcc290
commit 7fb99ea
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 16 deletions.
diff --git a/video-subscriber/README.md b/video-subscriber/README.md
@@ -29,15 +29,38 @@ npm i @vonage/video-subscriber
 
 ### Attributes that can be used (optional):
 
-- `width` : set the width of each video in video subscribers. Can be in pixels (ex: "360px") or a percentage (ex: "75%"). Default is "100%".
-- `height` : set the height of each video in video subscribers. Can be in pixels (ex: "240px") or a percentage (ex: "55%"). Default is "100%".
+- `properties` : (Object) the properties used to initialize the publisher. Find the full list in the [documentation](https://tokbox.com/developer/sdks/js/reference/OT.html#initPublisher).
+
+### Methods that can be called
+
+- `subscribeToAudio(state)` : toggle subscribing to audio. State is a boolean.
+- `subscribeToVideo(state)` : toggle subscribing to video. State is a boolean.
 
 ### Custom Events to listen for
 
 - `error` : contains details if there was an error subscribing to the stream
 - `subscribed` : contains details of subscriber if successful [Subscriber Object](https://tokbox.com/developer/sdks/js/reference/Subscriber.html)
 - `unsubscribed` : contains details of subscriber unsubscribed [Subscriber Object](https://tokbox.com/developer/sdks/js/reference/Subscriber.html)
 
+## Styling
+
+The Web Component uses the [CSS pseudo-element `::part`](https://developer.mozilla.org/en-US/docs/Web/CSS/::part) for styling. So you can style it the same way you would style a regular button element. Here's an example:
+
+This is the HTML structure of the Web Component:
+
+```html
+<div part="container" id=${this.stream.streamId} class="OTSubscriberContainer">
+  <slot></slot>
+</div>
+```
+
+Here is how to apply CSS to a part:
+```css
+video-subscriber::part(container) {
+  aspect-ratio: 16 / 9;
+}
+```
+
 ## Getting it to work
 
 1. Listen for `streamCreated` event on the [Session Object](https://tokbox.com/developer/sdks/js/reference/Session.html) 
@@ -51,16 +74,15 @@ const videoSubscriberContainer = document.querySelector("#video-subscriber-conta
 session.on("streamCreated", function(event) {
   const videoSubscriberEl = document.createElement("video-subscriber");
   videoSubscriberEl.setAttribute("id", `${event.stream.streamId}`);
+  videoSubscriberEl.properties = {width: "100%", height: "100%"};
   videoSubscriberEl.session = session;
   videoSubscriberEl.stream = event.stream;
   videoSubscriberContainer.appendChild(videoSubscriberEl);
 });
-
 ```
 
 >**Note**: This can vary with library / framework (see [examples folder](../examples))
 
-
 ## Linting and formatting
 
 To scan the project for linting and formatting errors, run

diff --git a/video-subscriber/package.json b/video-subscriber/package.json
@@ -5,7 +5,7 @@
   "repository": "https://github.com/opentok/web-components/tree/main/video-subscriber",
   "license": "MIT",
   "author": "Vonage",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "main": "index.js",
   "module": "index.js",
   "scripts": {

diff --git a/video-subscriber/src/VideoSubscriber.js b/video-subscriber/src/VideoSubscriber.js
@@ -5,31 +5,24 @@ export class VideoSubscriber extends LitElement {
     return {
       session: { type: Object },
       stream: { type: Object },
-      width: { type: String },
-      height: { type: String },
+      properties: { type: Object },
     };
   }
 
   constructor() {
     super();
     this.session = {};
     this.stream = null;
-    this.width = '360px';
-    this.height = '240px';
+    this.properties = {};
     this.subscriber = {};
   }
 
   firstUpdated() {
     if (this.stream) {
-      const subscriberOptions = {
-        insertMode: 'append',
-        width: this.width,
-        height: this.height,
-      };
       this.subscriber = this.session.subscribe(
         this.stream,
         document.getElementById(this.stream.streamId),
-        subscriberOptions,
+        this.properties,
         error => {
           if (error) {
             const options = {
@@ -76,9 +69,21 @@ export class VideoSubscriber extends LitElement {
     this.dispatchEvent(new CustomEvent('unsubscribed', options));
   }
 
+  subscribeToAudio(state) {
+    this.subscriber.subscribeToAudio(state);
+  }
+
+  subscribeToVideo(state) {
+    this.subscriber.subscribeToVideo(state);
+  }
+
   render() {
     return this.stream
-      ? html`<div id=${this.stream.streamId} class="OTSubscriberContainer">
+      ? html`<div
+          part="container"
+          id=${this.stream.streamId}
+          class="OTSubscriberContainer"
+        >
           <slot></slot>
         </div>`
       : html`Loading`;