@reactoo/watchtogether-sdk-js 2.6.67 → 2.6.69

package/example/bulk_join_room/bulk_join_room.html

@@ -52,7 +52,7 @@
 
 	let participantsCount = 3;
 	let instanceType = "reactooDemo";
-	let roomId = "2e705d79-aaa9-4790-a3d7-512858f60932";
+	let roomId = "";
 	let pinHash = undefined;
 	let timeoutBetweenParticipantsJoins = 5000;
 
@@ -62,10 +62,10 @@
 
 	// This will generate array with length 32 and numbers from 0 to 31. Every number is unique
 	let randomGifOrder = Array(32).fill(0)
-		.map((_, i) => i + 1)
-		.map((value) => ({ value, sort: Math.random() }))
-		.sort((a, b) => a.sort - b.sort)
-		.map(({ value }) => value);
+			.map((_, i) => i + 1)
+			.map((value) => ({ value, sort: Math.random() }))
+			.sort((a, b) => a.sort - b.sort)
+			.map(({ value }) => value);
 
 	function joinParticipants() {
 		participantsCount = parseInt(document.getElementById('users-count').value);
@@ -106,11 +106,11 @@
 
 		return participantsData.reduce((promiseChain, participantData) => {
 			return promiseChain.then(() => fetch(participantData.gifUrl))
-				.then(response => createGifDecoder(response.body, participantData))
-				.then(() => participantData.imageDecoder.decode({frameIndex: participantData.frameIndex}))
-				.then(decodeResult => renderImage(decodeResult, participantData))
-				.then(() => joinRoom(participantData))
-				.then(() => new Promise(resolve => setTimeout(resolve, timeoutBetweenParticipantsJoins)));
+					.then(response => createGifDecoder(response.body, participantData))
+					.then(() => participantData.imageDecoder.decode({frameIndex: participantData.frameIndex}))
+					.then(decodeResult => renderImage(decodeResult, participantData))
+					.then(() => joinRoom(participantData))
+					.then(() => new Promise(resolve => setTimeout(resolve, timeoutBetweenParticipantsJoins)));
 		}, Promise.resolve());
 	}
 
@@ -167,30 +167,30 @@
 
 		// Decode the next frame ahead of display so it's ready in time.
 		participantData.imageDecoder.decode({frameIndex: participantData.frameIndex})
-			.then( nextDecodeResult => setTimeout(_ => {
-				renderImage(nextDecodeResult, participantData);
-			}, decodeResult.image.duration / 1000.0))
-			.catch(e => {
-				// We can end up requesting an imageIndex past the end since we're using
-				// a ReadableStrem from fetch(), when this happens just wrap around.
-				if (e instanceof RangeError) {
-					participantData.frameIndex = 0;
-					participantData.imageDecoder.decode({frameIndex: imageIndex}).then(decodeResult => renderImage(decodeResult, participantData));
-				} else {
-					throw e;
-				}
-			});
+				.then( nextDecodeResult => setTimeout(_ => {
+					renderImage(nextDecodeResult, participantData);
+				}, decodeResult.image.duration / 1000.0))
+				.catch(e => {
+					// We can end up requesting an imageIndex past the end since we're using
+					// a ReadableStrem from fetch(), when this happens just wrap around.
+					if (e instanceof RangeError) {
+						participantData.frameIndex = 0;
+						participantData.imageDecoder.decode({frameIndex: imageIndex}).then(decodeResult => renderImage(decodeResult, participantData));
+					} else {
+						throw e;
+					}
+				});
 	}
 
 	function joinRoom(participantData) {
 		return participantData.sdkInstance.auth.deviceLogin(false, participantData.id)
-			.then(() => participantData.sdkInstance.room.createSession({roomId, pinHash}))
-			.then(session => {
-				participantData.session = session;
-				return Promise.all([session, session.connect()])
-			})
-			.then(([session, _]) => session.publishLocal(participantData.canvas.captureStream(), 'camera0'))
-			.then(() => document.getElementById('joined-participants-count').value = ++joinedParticipantsCount);
+				.then(() => participantData.sdkInstance.room.createSession({roomId, pinHash}))
+				.then(session => {
+					participantData.session = session;
+					return Promise.all([session, session.connect()])
+				})
+				.then(([session, _]) => session.publishLocal(participantData.canvas.captureStream(), 'camera0'))
+				.then(() => document.getElementById('joined-participants-count').value = ++joinedParticipantsCount);
 	}
 
 	function disconnectRoom(participantData) {

package/example/bulk_join_room/bulk_join_room_2.css

@@ -52,10 +52,15 @@
     gap: 0;
 }
 
-.participant-container canvas {
+.participant-container canvas{
     aspect-ratio: calc(16/9);
 }
 
+.participant-container video{
+    max-width: 150px;
+    height: auto;
+}
+
 .space {
     height: 10px;
     background-color: darkgrey;