@reactoo/watchtogether-sdk-js 2.7.9 → 2.7.11

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/dist/watchtogether-sdk.js +3 -3
  2. package/dist/watchtogether-sdk.min.js +2 -2
  3. package/example/index.html +182 -90
  4. package/package.json +1 -1
  5. package/src/models/user.js +31 -13
  6. package/src/modules/wt-room.js +1 -1
package/example/index.html CHANGED
@@ -9,7 +9,14 @@
9
9
  </head>
10
10
  <body>
11
11
  <div class="content">
12
+
13
+
14
+
15
+
16
+
12
17
  <video id="thevideo" class="contentVideo" autoplay playsinline controls style="width: 400px" muted="muted" src="https://assetcdn.reactoo.com/watfordFc/Norwich_2010_B_roll_2min16_mute.mp4"></video>
18
+ <video id="thevideo2" class="contentVideo" autoplay playsinline controls style="width: 400px" muted="muted" src="https://assetcdn.reactoo.com/watfordFc/Norwich_2010_B_roll_2min16_mute.mp4"></video>
19
+
13
20
  <div>
14
21
  <button onclick="startRoom()">Connect and publish</button>
15
22
  <button onclick="startRoom2()">Connect and publish with screen share</button>
@@ -30,6 +37,91 @@
30
37
 
31
38
  <script>
32
39
 
40
+
41
+ function videoProxy(videoElementCollection) {
42
+ const handler = {
43
+ get: (target, prop, receiver) => {
44
+ if(prop === 'setAttribute') {
45
+ return (attribute, value) => {
46
+ videoElementCollection.forEach((video) => {
47
+ video.setAttribute(attribute, value);
48
+ });
49
+ }
50
+ }
51
+
52
+ if(prop === 'removeAttribute') {
53
+ return (attribute) => {
54
+ videoElementCollection.forEach((video) => {
55
+ video.removeAttribute(attribute);
56
+ });
57
+ }
58
+ }
59
+
60
+ if(prop === 'load') {
61
+ return () => {
62
+ videoElementCollection.forEach((video) => {
63
+ video.load();
64
+ });
65
+ }
66
+ }
67
+
68
+ if(prop === 'play') {
69
+ return () => {
70
+ return Promise.all(videoElementCollection.map((video) => video.play()));
71
+ }
72
+ }
73
+
74
+ if(prop === 'pause') {
75
+ return () => {
76
+ videoElementCollection.forEach((video) => {
77
+ video.pause();
78
+ });
79
+ }
80
+ }
81
+ return Reflect.get(target, prop);
82
+ },
83
+ set: (target, prop, value, receiver) => {
84
+ if(prop === 'src') {
85
+ videoElementCollection.forEach((video) => {
86
+ video.src = value;
87
+ });
88
+ }
89
+
90
+ if(prop === 'srcObject') {
91
+ videoElementCollection.forEach((video) => {
92
+ video.srcObject = value;
93
+ });
94
+ }
95
+
96
+ if(prop === 'playbackRate') {
97
+ videoElementCollection.forEach((video) => {
98
+ video.playbackRate = value;
99
+ });
100
+ }
101
+
102
+ if(prop === 'currentTime') {
103
+ videoElementCollection.forEach((video) => {
104
+ video.currentTime = value;
105
+ });
106
+ }
107
+
108
+ if(prop === 'paused') {
109
+ videoElementCollection.forEach((video) => {
110
+ video.paused = value;
111
+ });
112
+ }
113
+
114
+ return target[prop] = value;
115
+
116
+ // return Reflect.set(target, prop, value);
117
+ }
118
+ };
119
+ return new Proxy(videoElementCollection[0], handler);
120
+ }
121
+
122
+ const cicka = videoProxy([document.getElementById('thevideo'), document.getElementById('thevideo2')]);
123
+
124
+
33
125
  //https://studio.reactoo.com/room/edf441b3-7415-49c4-9557-273cb93bc746/LJj4W2Cz-nG3U-lb0R-TAaY-o7Thmb8xHSbE
34
126
 
35
127
  let roomId = "c22ada04-6c95-4524-91d8-e915bcef2e61"; // It will create room automatically if not set
@@ -225,95 +317,95 @@
225
317
  })
226
318
  })
227
319
  .then(r => Instance.room.createSession({constructId, roomId:r.roomId, pinHash: r.pinHash, role:'participant', options: {
228
- simulcast: true,
229
- simulcastSettings: {
230
- "default" : {
231
- mode: "controlled", // controlled, manual, browserController
232
- defaultSubstream: 0, // 2 lowest quality, 0 highest quality
233
- bitrates: [
234
- {
235
- "rid": "l",
236
- "active": true,
237
- "maxBitrate": 180000,
238
- "maxFramerate": 20,
239
- "scaleResolutionDownBy": 3.3333333333333335,
240
- "priority": "low"
241
- },
242
- {
243
- "rid": "m",
244
- "active": true,
245
- "maxBitrate": 500000,
246
- "maxFramerate": 25,
247
- "scaleResolutionDownBy": 1.3333333333333335,
248
- "priority": "low"
249
- },
250
- {
251
- "rid": "h",
252
- "active": true,
253
- "maxBitrate": 2000000,
254
- "maxFramerate": 30,
255
- "priority": "low"
256
- }
257
- ]
258
- },
259
- "*camera*" : {
260
- mode: "controlled",
261
- defaultSubstream: 0,
262
- bitrates: [
263
- {
264
- "rid": "l",
265
- "active": true,
266
- "maxBitrate": 180000,
267
- "maxFramerate": 20,
268
- "scaleResolutionDownBy": 3.3333333333333335,
269
- "priority": "low"
270
- },
271
- {
272
- "rid": "m",
273
- "active": true,
274
- "maxBitrate": 500000,
275
- "maxFramerate": 25,
276
- "scaleResolutionDownBy": 1.3333333333333335,
277
- "priority": "low"
278
- },
279
- {
280
- "rid": "h",
281
- "active": true,
282
- "maxBitrate": 2000000,
283
- "maxFramerate": 30,
284
- "priority": "low"
285
- }
286
- ]
287
- },
288
- "*screen*": {
289
- mode: "manual",
290
- defaultSubstream: 0,
291
- bitrates: [
292
- {
293
- "rid": "l",
294
- "active": true,
295
- "maxBitrate": 270000,
296
- "maxFramerate": 5,
297
- "scaleResolutionDownBy": 1.3333333333333335,
298
- "priority": "low"
299
- },
300
- {
301
- "rid": "m",
302
- "active": true,
303
- "maxBitrate": 500000,
304
- "maxFramerate": 10,
305
- "priority": "low"
306
- },
307
- {
308
- "rid": "h",
309
- "active": true,
310
- "maxBitrate": 2000000,
311
- "maxFramerate": 30,
312
- "priority": "low"
313
- }
314
- ]
315
- }
316
- },
320
+ // simulcast: true,
321
+ // simulcastSettings: {
322
+ // "default" : {
323
+ // mode: "controlled", // controlled, manual, browserControlled
324
+ // defaultSubstream: 0, // 2 lowest quality, 0 highest quality
325
+ // bitrates: [
326
+ // {
327
+ // "rid": "l",
328
+ // "active": true,
329
+ // "maxBitrate": 180000,
330
+ // "maxFramerate": 20,
331
+ // "scaleResolutionDownBy": 3.3333333333333335,
332
+ // "priority": "low"
333
+ // },
334
+ // {
335
+ // "rid": "m",
336
+ // "active": true,
337
+ // "maxBitrate": 500000,
338
+ // "maxFramerate": 25,
339
+ // "scaleResolutionDownBy": 1.3333333333333335,
340
+ // "priority": "low"
341
+ // },
342
+ // {
343
+ // "rid": "h",
344
+ // "active": true,
345
+ // "maxBitrate": 2000000,
346
+ // "maxFramerate": 30,
347
+ // "priority": "low"
348
+ // }
349
+ // ]
350
+ // },
351
+ // "*camera*" : {
352
+ // mode: "controlled",
353
+ // defaultSubstream: 0,
354
+ // bitrates: [
355
+ // {
356
+ // "rid": "l",
357
+ // "active": true,
358
+ // "maxBitrate": 180000,
359
+ // "maxFramerate": 20,
360
+ // "scaleResolutionDownBy": 3.3333333333333335,
361
+ // "priority": "low"
362
+ // },
363
+ // {
364
+ // "rid": "m",
365
+ // "active": true,
366
+ // "maxBitrate": 500000,
367
+ // "maxFramerate": 25,
368
+ // "scaleResolutionDownBy": 1.3333333333333335,
369
+ // "priority": "low"
370
+ // },
371
+ // {
372
+ // "rid": "h",
373
+ // "active": true,
374
+ // "maxBitrate": 2000000,
375
+ // "maxFramerate": 30,
376
+ // "priority": "low"
377
+ // }
378
+ // ]
379
+ // },
380
+ // "*screen*": {
381
+ // mode: "manual",
382
+ // defaultSubstream: 0,
383
+ // bitrates: [
384
+ // {
385
+ // "rid": "l",
386
+ // "active": true,
387
+ // "maxBitrate": 270000,
388
+ // "maxFramerate": 5,
389
+ // "scaleResolutionDownBy": 1.3333333333333335,
390
+ // "priority": "low"
391
+ // },
392
+ // {
393
+ // "rid": "m",
394
+ // "active": true,
395
+ // "maxBitrate": 500000,
396
+ // "maxFramerate": 10,
397
+ // "priority": "low"
398
+ // },
399
+ // {
400
+ // "rid": "h",
401
+ // "active": true,
402
+ // "maxBitrate": 2000000,
403
+ // "maxFramerate": 30,
404
+ // "priority": "low"
405
+ // }
406
+ // ]
407
+ // }
408
+ // },
317
409
  //subscriptionRules: {participant: {videoWall: [], watchTogether: []}}
318
410
  }}))
319
411
  .then(session => {
@@ -413,7 +505,7 @@
413
505
  });
414
506
 
415
507
  //attaching player
416
- session.attachPlayer('hlsnative-vod',{videoElement:window.thevideo});
508
+ // session.attachPlayer('hlsnative-vod',{videoElement:window.thevideo});
417
509
 
418
510
  })
419
511
  .catch(e => {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@reactoo/watchtogether-sdk-js",
3
- "version": "2.7.9",
3
+ "version": "2.7.11",
4
4
  "description": "Javascript SDK for Reactoo",
5
5
  "main": "src/index.js",
6
6
  "unpkg": "dist/watchtogether-sdk.min.js",
package/src/models/user.js CHANGED
@@ -43,7 +43,12 @@ let user = function () {
43
43
  .then(([client, response]) => Promise.all([client, response.data.signedUrlSegments.reduce((acc, url, index) => acc.then(() => client.http({url, method: response.data.httpMethod, headers: {"Content-Type":files[index].type}, body:files[index]})), Promise.resolve())]))
44
44
  .then(([client]) => client.apis.video.publishVideo({_id:id, roomId}, {requestBody:{_id:id, roomId, privateAttributes}}))
45
45
  },
46
-
46
+
47
+ publishVideo: (roomId, id, privateAttributes = {}) => {
48
+ return this.__privates.auth.__client
49
+ .then(client => client.apis.video.publishVideo({_id:id, roomId}, {requestBody:{_id:id, roomId, privateAttributes}}))
50
+ },
51
+
47
52
  getReactionById: (id) => {
48
53
  return this.__privates.auth.__client
49
54
  .then(client => client.apis.reaction.getReactionById({id}))
@@ -67,18 +72,31 @@ let user = function () {
67
72
  .then(client => client.apis.video.getVideoById({id}))
68
73
  },
69
74
 
70
- getVideos: ({roomId, userId, type, size, startKey, includeUserModels = false, includeRoomQueueStatus} = {}) => {
71
- let apiParams = {
72
- ...(roomId && {roomId}),
73
- ...(userId && {userId}),
74
- ...(size && {size}),
75
- ...(startKey && {startKey}),
76
- ...(includeRoomQueueStatus && {includeRoomQueueStatus}),
77
- includeUserModels,
78
- type
79
- };
80
- return this.__privates.auth.__client
81
- .then(client => client.apis.video.getVideos(apiParams))
75
+ getVideos: ({roomId, userId, type, size, startKey, ids, includeUserModels = false, includeRoomQueueStatus} = {}) => {
76
+ return chunkArray(ids, 50)
77
+ .reduce((promiseChain, idsChunk) => {
78
+ return promiseChain.then(chainResponse => {
79
+ let apiParams = {
80
+ ...(roomId && {roomId}),
81
+ ...(userId && {userId}),
82
+ ...(size && {size}),
83
+ ...(idsChunk?.length && {ids: idsChunk.join(',')}),
84
+ ...(startKey && {startKey}),
85
+ ...(includeRoomQueueStatus && {includeRoomQueueStatus}),
86
+ includeUserModels,
87
+ type
88
+ };
89
+ return this.__privates.auth.__client
90
+ .then(client => client.apis.video.getVideos(apiParams))
91
+ .then(response => type === 'ids' ? {
92
+ data: {
93
+ items: [...chainResponse.data.items, ...response.data.items],
94
+ size: chainResponse.data.size + response.data.size,
95
+ startKey: null,
96
+ },
97
+ } : response);
98
+ });
99
+ }, Promise.resolve({data: {items: [], size: 0, startKey: null}}));
82
100
  },
83
101
 
84
102
  deleteVideo: (id) => {
package/src/modules/wt-room.js CHANGED
@@ -185,7 +185,7 @@ class RoomSession {
185
185
  this.simulcast = false;
186
186
  this.defaultSimulcastSettings = {
187
187
  "default" : {
188
- mode: "controlled", // controlled, manual, browserController
188
+ mode: "controlled", // controlled, manual, browserControlled
189
189
  defaultSubstream: 0, // 2 lowest quality, 0 highest quality
190
190
  bitrates: [
191
191
  {