Skip to content

Commit

Permalink
Merge pull request #17 from opentok/DEVX-7090---video-subscribers-upd…
Browse files Browse the repository at this point in the history
…ates

Devx 7090   video subscribers updates
  • Loading branch information
conshus authored Apr 7, 2023
2 parents 7fb99ea + 1146b1f commit 69cbbe6
Show file tree
Hide file tree
Showing 3 changed files with 6 additions and 18 deletions.
9 changes: 2 additions & 7 deletions video-subscribers/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -36,12 +36,7 @@ npm i @vonage/video-subscribers

### 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%".

```html
<video-subscribers width="360px" height="55%"></video-subscribers>
```
- `properties` : (Object) the properties used pn each video in video subscribers. Find the full list in the [documentation](https://tokbox.com/developer/sdks/js/reference/OT.html#initPublisher).

## Getting it to work

Expand All @@ -53,7 +48,7 @@ npm i @vonage/video-subscribers
## Make it "Responsive"

By default, the Video Video API adds each subscriber video as a `div` resulting in the video feeds being stacked vertically. To get the video feeds to align horizontally and move to the next row when there is not enough room, apply this CSS to the Web Component:
By default, the Vonage Video API adds each subscriber video as a `div` resulting in the video feeds being stacked vertically. To get the video feeds to align horizontally and move to the next row when there is not enough room, apply this CSS to the Web Component:

```css
video-subscribers {
Expand Down
2 changes: 1 addition & 1 deletion video-subscribers/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
"repository": "https://github.com/opentok/web-components/tree/main/video-subscribers",
"license": "MIT",
"author": "Vonage",
"version": "0.0.4",
"version": "0.0.5",
"main": "index.js",
"module": "index.js",
"scripts": {
Expand Down
13 changes: 3 additions & 10 deletions video-subscribers/src/VideoSubscribers.js
Original file line number Diff line number Diff line change
Expand Up @@ -6,30 +6,23 @@ export class VideoSubscribers extends LitElement {
return {
session: {},
token: {},
width: {type: String},
height: {type: String}
properties: { type: Object },
}
};

constructor() {
super();
this.session = {};
this.token = "";
this.width = "360px";
this.height = "240px";
this.properties = {};
}

updated(changedProperties) {
if(changedProperties.get("session")){
this.session.on({
// This function runs when another client publishes a stream (eg. session.publish())
streamCreated: (event) => {
const subscriberOptions = {
insertMode: 'append',
width: this.width,
height: this.height
};
this.session.subscribe(event.stream, document.querySelector('video-subscribers'), subscriberOptions, (error) => {
this.session.subscribe(event.stream, document.querySelector('video-subscribers'), this.properties, (error) => {
if(error){
console.error("error subscribing to session: ", error);
}
Expand Down

0 comments on commit 69cbbe6

Please sign in to comment.