@reactoo/watchtogether-sdk-js 2.5.23 → 2.5.30

package/example/bulk_join_room/bulk_join_room.html

@@ -19,7 +19,12 @@
 	<!--<br><br>-->
 
 	<label for="room-id">Room ID</label><br>
-	<input type="text" id="room-id" placeholder="0512f218-6a4a-45e1-9d05-d5a0e5afb33d" size="40">
+	<input type="text" id="room-id" placeholder="XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX" size="40">
+
+	<br><br>
+
+	<label for="pin-hash">Pin Hash</label><br>
+	<input type="text" id="pin-hash" placeholder="XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX" size="40">
 
 	<br><br>
 
@@ -48,6 +53,7 @@
 	let participantsCount = 3;
 	let instanceType = "reactooDemo";
 	let roomId = "0512f218-6a4a-45e1-9d05-d5a0e5afb33d";
+	let pinHash = undefined;
 	let timeoutBetweenParticipantsJoins = 5000;
 
 	let participantsData = null;
@@ -65,8 +71,17 @@
 		participantsCount = parseInt(document.getElementById('users-count').value);
 		// instanceType = document.getElementById('instance-type').value;
 		roomId = document.getElementById('room-id').value;
+		pinHash = document.getElementById('pin-hash').value;
 		timeoutBetweenParticipantsJoins = document.getElementById('connection-timeout').value;
 
+		const url = new URL(location.href);
+		participantsCount ? url.searchParams.set('participantsCount', participantsCount) : url.searchParams.delete('participantsCount');
+		// instanceType ? url.searchParams.set('instanceType', instanceType) : url.searchParams.delete('instanceType');
+		roomId ? url.searchParams.set('roomId', roomId) : url.searchParams.delete('roomId');
+		pinHash ? url.searchParams.set('pinHash', pinHash) : url.searchParams.delete('pinHash');
+		timeoutBetweenParticipantsJoins ? url.searchParams.set('timeoutBetweenParticipantsJoins', timeoutBetweenParticipantsJoins) : url.searchParams.delete('timeoutBetweenParticipantsJoins');
+		history.replaceState (null, '', url);
+
 		document.getElementById('join-room').setAttribute('disabled', true);
 		document.getElementById('joined-participants-count').value = joinedParticipantsCount;
 
@@ -169,7 +184,7 @@
 
 	function joinRoom(participantData) {
 		return participantData.sdkInstance.auth.deviceLogin(participantData.id)
-			.then(() => participantData.sdkInstance.room.createSession({roomId}))
+			.then(() => participantData.sdkInstance.room.createSession({roomId, pinHash}))
 			.then(session => {
 				participantData.session = session;
 				return Promise.all([session, session.connect()])
@@ -182,10 +197,24 @@
 		return participantData.session.disconnect();
 	}
 
+	function getQueryVar(varName){
+		const queryStr = decodeURI(window.location.search) + '&';
+		const regex = new RegExp('.*?[&\\?]' + varName + '=(.*?)&.*');
+		const val = queryStr.replace(regex, "$1");
+		return val === queryStr ? false : val;
+	}
+
 	document.addEventListener("DOMContentLoaded", function() {
+		participantsCount = getQueryVar('participantsCount') || participantsCount;
+		// instanceType = getQueryVar('instanceType') || instanceType;
+		roomId = getQueryVar('roomId') || roomId;
+		pinHash = getQueryVar('pinHash') || pinHash || '';
+		timeoutBetweenParticipantsJoins = getQueryVar('timeoutBetweenParticipantsJoins') || timeoutBetweenParticipantsJoins;
+
 		document.getElementById('users-count').value = participantsCount;
 		// document.getElementById('instance-type').value = instanceType;
 		document.getElementById('room-id').value = roomId;
+		document.getElementById('pin-hash').value = pinHash;
 		document.getElementById('connection-timeout').value = timeoutBetweenParticipantsJoins;
 	});
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reactoo/watchtogether-sdk-js",
-  "version": "2.5.23",
+  "version": "2.5.30",
   "description": "Javascript SDK for Reactoo",
   "main": "src/index.js",
   "unpkg": "dist/watchtogether-sdk.min.js",

package/src/models/room-session.js

@@ -102,7 +102,7 @@ let roomSession = function ({roomId, pinHash, isTalkback, isMonitor, isInstructo
 					return Promise.all([roomData, userData])
 				})
 				.then(([roomData, userData]) => Promise.all([roomData, userData, this.setRoomVars()]))
-				.then(([roomData, userData, _]) => Promise.all([roomData, userData, room.connect(roomData.data.roomId, roomData.data.pin, roomData.data.href, roomData.data.iceServers, roomData.data.accessToken, (isMonitor || isInstructor || isTalkback) ? roomData.data.userId : userData.data._id, roomData.data.webrtcVersion, (roomData.data.bitrate ? parseInt(roomData.data.bitrate) : 0), isMonitor, roomData.data.recordingFilename)]))
+				.then(([roomData, userData, _]) => Promise.all([roomData, userData, room.connect(roomData.data.roomId, roomData.data.pin, roomData.data.href, roomData.data.iceServers, roomData.data.accessToken, roomData.data.display, roomData.data.userId, roomData.data.webrtcVersion, (roomData.data.bitrate ? parseInt(roomData.data.bitrate) : 0), isMonitor, roomData.data.recordingFilename)]))
 				.finally(() => {
 					emitter.emit('connecting', false);
 				})
@@ -170,7 +170,7 @@ let roomSession = function ({roomId, pinHash, isTalkback, isMonitor, isInstructo
 				} else if (msg.action === 'user_update_displayname' || msg.action === 'user_update_avatar' || msg.action === 'user_update_customattributes' || msg.action === 'user_update_privateattributes') {
 					emitter.emit('userUpdate', msg.text);
 				} else if (msg.action === 'observer_connecting' || msg.action === 'talkback_connecting' || msg.action === 'instructor_connecting') {
-					this.setRoomVars(null, msg.action === 'observer_connecting').catch(e => {
+					this.setRoomVars().catch(e => {
 						room._log('Setting observers failed, this will cause issues', e);
 					});
 				} else if (msg.action === 'bitrate_changed') {
@@ -286,15 +286,9 @@ let roomSession = function ({roomId, pinHash, isTalkback, isMonitor, isInstructo
 			}
 		},
 
-		setRoomVars: (observerIds = [], emit = true) => {
+		setRoomVars: () => {
 			return wt.room.getRoomById(roomId, pinHash)
 				.then(r => {
-					if (emit) {
-						// emiting "fake" playerSource event
-						//TODO: somehow push into sync modules instead
-						emitter.emit('changePlayerSource', r.data.wtChannelId, true);
-					}
-
 					// setting observers userId's so we can ignore them when creating participant
 					room.setObserverIds(r.data.allowedObservers);
 					room.setTalkbackIds(r.data.allowedTalkbacks);

package/src/modules/sync-modules/sync-dash-vod.js

@@ -429,7 +429,7 @@ const syncVodDashJs = function ({room, wt, roomSession, emitter} = {}) {
                 timestamp: new Date().getTime(),
                 fragment: isPlaying ? "1":"0",
                 fragment_pos: Number(fragmentPosition),
-                slave_id:Number(slaveId)
+				slave_id: room.webrtcVersion > 1000 ? String(slaveId) : Number(slaveId)
             }});
     };
 

package/src/modules/sync-modules/sync-dash.js

@@ -328,7 +328,7 @@ const syncDashJs = function ({room, wt, roomSession, emitter} = {}) {
                 timestamp: new Date().getTime(),
                 fragment: String("0"),
                 fragment_pos: Number(fragmentPosition),
-                slave_id:Number(slaveId)
+                slave_id: room.webrtcVersion > 1000 ? String(slaveId) : Number(slaveId)
             }});
     };
     

package/src/modules/sync-modules/sync-dazn-dash.js

@@ -335,7 +335,7 @@ const syncDaznDash = function ({room, wt, roomSession, emitter} = {}) {
                 timestamp: new Date().getTime(),
                 fragment: String("0"),
                 fragment_pos: Number(fragmentPosition),
-                slave_id:Number(slaveId)
+                slave_id: room.webrtcVersion > 1000 ? String(slaveId) : Number(slaveId)
             }});
     };
     

package/src/modules/sync-modules/sync-doris.js

@@ -326,7 +326,7 @@ const syncDoris = function ({room, wt, roomSession, emitter} = {}) {
                 timestamp: new Date().getTime(),
                 fragment: String("0"),
                 fragment_pos: Number(fragmentPosition),
-                slave_id:Number(slaveId)
+                slave_id: room.webrtcVersion > 1000 ? String(slaveId) : Number(slaveId)
             }});
     };
     

package/src/modules/sync-modules/sync-hls-vod.js

@@ -429,7 +429,7 @@ const syncVodHlsJs = function ({room, wt, roomSession, emitter} = {}) {
                 timestamp: new Date().getTime(),
                 fragment: isPlaying ? "1":"0",
                 fragment_pos: Number(fragmentPosition),
-                slave_id:Number(slaveId)
+                slave_id: room.webrtcVersion > 1000 ? String(slaveId) : Number(slaveId)
             }});
     };
 

package/src/modules/sync-modules/sync-hls.js

@@ -499,7 +499,7 @@ const syncHlsJs = function ({room, wt, roomSession, emitter} = {}) {
                 timestamp: new Date().getTime(),
                 fragment: String(fragment),
                 fragment_pos: Number(fragmentPosition),
-                slave_id:Number(slaveId)
+                slave_id: room.webrtcVersion > 1000 ? String(slaveId) : Number(slaveId)
             }});
     };
 

package/src/modules/sync-modules/sync-native-hls-vod.js

@@ -421,7 +421,7 @@ const syncVodHlsJs = function ({room, wt, roomSession, emitter} = {}) {
                 timestamp: new Date().getTime(),
                 fragment: isPlaying ? "1":"0",
                 fragment_pos: Number(fragmentPosition),
-                slave_id:Number(slaveId)
+                slave_id: room.webrtcVersion > 1000 ? String(slaveId) : Number(slaveId)
             }});
     };
 

package/src/modules/sync-modules/sync-native-hls.js

@@ -331,7 +331,7 @@ const syncNativeHls = function ({room, wt, roomSession, emitter} = {}) {
                 timestamp: new Date().getTime(),
                 fragment: String("0"),
                 fragment_pos: Number(fragmentPosition),
-                slave_id:Number(slaveId)
+                slave_id: room.webrtcVersion > 1000 ? String(slaveId) : Number(slaveId)
             }});
     };
     

package/src/modules/sync-modules/sync-shaka-dash-vod.js

@@ -427,7 +427,7 @@ const syncVodShakaDash = function ({room, wt, roomSession, emitter} = {}) {
                 timestamp: new Date().getTime(),
                 fragment: isPlaying ? "1":"0",
                 fragment_pos: Number(fragmentPosition),
-                slave_id:Number(slaveId)
+				slave_id: room.webrtcVersion > 1000 ? String(slaveId) : Number(slaveId)
             }});
     };
 

package/src/modules/sync-modules/sync-shaka-dash.js

@@ -341,7 +341,7 @@ const syncDaznDash = function ({room, wt, roomSession, emitter} = {}) {
                 timestamp: new Date().getTime(),
                 fragment: String("0"),
                 fragment_pos: Number(fragmentPosition),
-                slave_id:Number(slaveId)
+                slave_id: room.webrtcVersion > 1000 ? String(slaveId) : Number(slaveId)
             }});
     };
     

package/src/modules/sync-modules/sync-universal.js

@@ -339,7 +339,7 @@ const syncUniversal = function ({room, wt, roomSession, emitter} = {}) {
 				timestamp: new Date().getTime(),
 				fragment: String("0"),
 				fragment_pos: Number(fragmentPosition),
-				slave_id:Number(slaveId)
+				slave_id: room.webrtcVersion > 1000 ? String(slaveId) : Number(slaveId)
 			}});
 	};
 	

package/src/modules/wt-room.js

@@ -160,6 +160,8 @@ class RoomSession {
 		this._isStreaming = false;
 		this._isPublished = false;
 		this._isDataChannelOpen = false;
+		this._dataChannelTimeoutId = null;
+		this._messageTimeoutId = null;
 		this.isAudioMuted = false;
 		this.isVideoMuted = false;
 		this.isVideoEnabled = false;
@@ -319,14 +321,12 @@ class RoomSession {
 			transaction,
 			token: this.token, ...((this.sessionId && {'session_id': this.sessionId}) || {})
 		};
-		let timeouId = null;
-
 		return new Promise((resolve, reject) => {
 			let parseResponse = (event) => {
 				let json = JSON.parse(event.data);
 				let r_transaction = json['transaction'];
 				if (r_transaction === transaction && (!dontResolveOnAck || json['janus'] !== 'ack')) {
-					clearTimeout(timeouId);
+					clearTimeout(this._messageTimeoutId);
 					this.ws.removeEventListener('message', parseResponse);
 					if (json['janus'] === 'error') {
 						if (json?.error?.code == 403) {
@@ -348,7 +348,7 @@ class RoomSession {
 			} else {
 				if (this.ws && this.ws.readyState === 1) {
 					this.ws.addEventListener('message', parseResponse);
-					timeouId = setTimeout(() => {
+					this._messageTimeoutId = setTimeout(() => {
 						this.ws.removeEventListener('message', parseResponse);
 						reject({type: 'error', id: 3, message: 'send timeout', data: requestData});
 					}, 10000);
@@ -507,6 +507,7 @@ class RoomSession {
 											"ptype": "subscriber",
 											"feed": id,
 											"private_id": this.privateId,
+											...(this.webrtcVersion > 1000 ? {id: this.userId} : {}),
 											pin: this.pin
 										}
 									})
@@ -542,6 +543,7 @@ class RoomSession {
 											"ptype": "subscriber",
 											"feed": id,
 											"private_id": this.privateId,
+											...(this.webrtcVersion > 1000 ? {id: this.userId} : {}),
 											pin: this.pin
 										}
 									})
@@ -817,10 +819,10 @@ class RoomSession {
 		})
 	}
 
-	_joinRoom(roomId, pin, userId) {
+	_joinRoom(roomId, pin, userId, display) {
 		return this.sendMessage(this.handleId, {
 			body: {
-				"request": "join", "room": roomId, "pin": pin, "ptype": "publisher", "display": userId
+				"request": "join", "room": roomId, "pin": pin, "ptype": "publisher", "display": display, ...(this.webrtcVersion > 1000 ? {id: userId} : {})
 			}
 		}, false, true)
 	}
@@ -892,7 +894,7 @@ class RoomSession {
 		return this.connectingPromise;
 	}
 
-	connect(roomId, pin, server, iceServers, token, userId, webrtcVersion = 0, initialBitrate = 0, isMonitor, recordingFilename) {
+	connect(roomId, pin, server, iceServers, token, display, userId, webrtcVersion = 0, initialBitrate = 0, isMonitor, recordingFilename) {
 
 		if (this.connectingPromise) {
 			return this.connectingPromise;
@@ -910,7 +912,9 @@ class RoomSession {
 		this.token = token;
 		this.roomId = roomId;
 		this.pin = pin;
+		this.display = display;
 		this.userId = userId;
+		this.webrtcVersion = webrtcVersion;
 		this.initialBitrate = initialBitrate;
 		this.isMonitor = isMonitor;
 		this.recordingFilename = recordingFilename;
@@ -935,7 +939,7 @@ class RoomSession {
 						this.handleId = handle.handleId;
 						return 1
 					})
-					.then(() => this._joinRoom(roomId, pin, userId))
+					.then(() => this._joinRoom(roomId, pin, userId, display))
 					.then(() => {
 						this.connectingPromise = null;
 						this.emit('joining', false);
@@ -960,7 +964,8 @@ class RoomSession {
 		if (this.disconnectingPromise) {
 			return this.disconnectingPromise;
 		}
-
+		clearTimeout(this._messageTimeoutId);
+		clearTimeout(this._dataChannelTimeoutId);
 		this._stopKeepAlive();
 		this.disconnectingPromise = Promise.all(this._participants.map(p => this._removeParticipant(p.handleId)))
 			.finally(() => {
@@ -1070,7 +1075,6 @@ class RoomSession {
 		return this.disconnectingPromise;
 	}
 
-
 	destroy() {
 
 		if (this.sessiontype === 'reactooroom') {
@@ -1864,12 +1868,12 @@ class RoomSession {
 					return new Promise((resolve, reject) => {
 						let __ = (val) => {
 							if (val) {
-								clearTimeout(___);
+								clearTimeout(this._dataChannelTimeoutId);
 								this.off('dataChannel', __, this);
 								resolve(this);
 							}
 						};
-						let ___ = setTimeout(() => {
+						this._dataChannelTimeoutId = setTimeout(() => {
 							this.off('dataChannel', __, this);
 							reject({type: 'error', id: 27, message: 'Data channel did not open', data: null});
 						}, 5000);