npm - @reactoo/watchtogether-sdk-js - Versions diffs - 2.6.67 → 2.6.69 - Mend

@reactoo/watchtogether-sdk-js 2.6.67 → 2.6.69

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 (44) hide show

package/example/bulk_join_room/bulk_join_room_2.html CHANGED Viewed

@@ -6,6 +6,8 @@
 	<title>The Bulk Join 2</title>
 	<script src="../../dist/watchtogether-sdk.js"></script>
 	<link rel="stylesheet" href="./bulk_join_room_2.css">
+	<style>.--high-quality{display:none}</style>
 </head>
 <body>
@@ -18,49 +20,57 @@
 			<input type="number" id="participants-count" onchange="applySettingsFromForm()">
 		</div>
-		<div class="form-group">
+		<div class="form-group --advanced --high-quality">
+			<label for="participants-high-quality">High quality</label>
+			<input type="checkbox" id="participants-high-quality" onchange="applySettingsFromForm()">
+		</div>
+		<div class="form-group --advanced">
 			<label for="participants-order-randomization">Participants order randomization</label>
 			<input type="checkbox" id="participants-order-randomization" onchange="applySettingsFromForm()">
 		</div>
 		<div class="form-group">
 			<label for="room-id">Room ID</label>
 			<input type="text" id="room-id" onchange="applySettingsFromForm()">
 		</div>
-		<div class="form-group">
+		<div class="form-group --advanced">
 			<label for="pin-hash">Pin hash</label>
 			<input type="text" id="pin-hash" placeholder="Not required" onchange="applySettingsFromForm()">
 		</div>
-		<div class="form-group">
+		<div class="form-group --advanced">
 			<label for="room-id">Connection delay (seconds)</label>
 			<input type="number" id="connection-delay" min="0" step="0.25" onchange="applySettingsFromForm()">
 		</div>
-		<div class="form-group">
+		<div class="form-group --advanced">
 			<label for="parallel-queues">Parallel connection queues</label>
 			<input type="number" id="parallel-queues" min="1" step="4" onchange="applySettingsFromForm()">
 		</div>
-		<div class="form-group">
+		<div class="form-group --advanced">
 			<label for="instance-type">Instance type</label>
 			<input type="text" id="instance-type" onchange="applySettingsFromForm()">
 		</div>
-		<div class="form-group">
+		<div class="form-group --advanced">
 			<label for="swagger-url">Swagger URL</label>
 			<input type="text" id="swagger-url" onchange="applySettingsFromForm()">
 		</div>
-		<div class="form-group">
+		<div class="form-group --advanced">
 			<label for="fetch-names">Fetch participants names</label>
 			<input type="checkbox" id="fetch-names" onchange="applySettingsFromForm()">
 		</div>
 		<div class="form-group">
-			<button type="button" onclick="resetSettings()">Reset settings</button>
+			<button type="button" class="--advanced" onclick="resetSettings()">Reset settings</button>
+			<button type="button" class="--high-quality" onclick="toggleAdvancedSettings()">Toggle advanced settings</button>
 		</div>
 	</div>
 	<div class="participants-constrols">
@@ -68,17 +78,22 @@
 		<div class="form-group">
 			<button type="button" onclick="createParticipants()">Create participants (without connect)</button>
 			<button type="button" onclick="destroyParticipants()">Destroy participants</button>
-			<br>
-			<button type="button" onclick="createSingleParticipant()">Create single participant (without connect)</button>
+			<br class="--advanced">
+			<button type="button" class="--advanced" onclick="createSingleParticipant()">Create single participant (without connect)</button>
 			<br>
 			<button type="button" onclick="joinParticipantsToRoom()">Join all participants to room</button>
 			<button type="button" onclick="disconnectParticipantsFromRoom()">Disconnect all participants from room</button>
-			<br>
-			<div class="form-group">
+			<br class="--advanced">
+			<div class="form-group --advanced">
 				<label for="participants-names">Participants names (one name per line)</label>
 				<textarea id="participants-names" rows="5" onchange="applySettingsFromForm()"></textarea>
 			</div>
-			<button type="button" onclick="setParticipantsNames()">Set Participants Names</button>
+			<button type="button" class="--advanced" onclick="setParticipantsNames()">Set Participants Names</button>
+		</div>
+		<div class="heading --advanced">Room controls</div>
+		<div class="form-group --advanced">
+			<button type="button" onclick="initiazeFakeChat()">Initiate fake chat</button>
 		</div>
 	</div>
@@ -96,10 +111,12 @@
 	const settingsUrlParameterName = 'settings';
 	const defaultSettings = {
+		advancedSettings: true,
 		participantsCount: 5,
+		participantsHighQuality: false,
 		participantsOrderRandomization: false,
 		minParticipantsCount: 1,
-		maxParticipantsCount: 32,
+		maxParticipantsCount: 41,
 		roomId: "",
 		pinHash: "",
 		connectionDelay: 1,
@@ -110,7 +127,9 @@
 		participantsNames: [],
 	};
-	const gifsCount = 32; // Number of gifs in ./persons_gifs folder
+	const gifsCount_lq = 32; // Number of gifs in ./persons_gifs_lq folder
+	const gifsCount_hq = 17; //  Number of gifs in ./persons_gifs_hq folder
+	let gifsCount = gifsCount_hq + gifsCount_lq;
 	// ====================== General Variables ===============================
@@ -119,6 +138,7 @@
 	const elements = {
 		form: {
 			participantsCount: document.getElementById("participants-count"),
+			participantsHighQuality: document.getElementById("participants-high-quality"),
 			participantsOrderRandomization: document.getElementById("participants-order-randomization"),
 			roomId: document.getElementById("room-id"),
 			pinHash: document.getElementById("pin-hash"),
@@ -134,7 +154,9 @@
 	const participants = new Array(gifsCount).fill(undefined);
-	const usedGifsIds = [];
+	let usedGifsIds = [];
+	let usedGifsTimes = 0;
 	const audioContext = new (window.AudioContext || window.webkitAudioContext)();
@@ -151,7 +173,9 @@
 	function applySettingsFromForm() {
 		settings = {
+			advancedSettings: !!settings.advancedSettings,
 			participantsCount: parseInt(elements.form.participantsCount.value) || defaultSettings.participantsCount,
+			participantsHighQuality: elements.form.participantsHighQuality.checked,
 			participantsOrderRandomization: elements.form.participantsOrderRandomization.checked,
 			minParticipantsCount: parseInt(settings.minParticipantsCount) || defaultSettings.minParticipantsCount,
 			maxParticipantsCount: parseInt(settings.maxParticipantsCount) || defaultSettings.maxParticipantsCount,
@@ -201,8 +225,24 @@
 		fillSettingsForm();
 	}
+	function toggleAdvancedSettings() {
+		const advancedSettings = settings.advancedSettings;
+		const participantsCount = settings.participantsCount;
+		const roomId = settings.roomId;
+		resetSettings();
+		settings.advancedSettings = !advancedSettings;
+		settings.participantsCount = participantsCount;
+		settings.roomId = roomId;
+		setSettingsToUrl(false);
+		location.reload();
+	}
 	function fillSettingsForm() {
 		elements.form.participantsCount.value = settings.participantsCount;
+		elements.form.participantsHighQuality.checked = settings.participantsHighQuality;
 		elements.form.participantsOrderRandomization.checked = settings.participantsOrderRandomization;
 		elements.form.roomId.value = settings.roomId;
 		elements.form.pinHash.value = settings.pinHash;
@@ -217,15 +257,31 @@
 	// ====================== Main Logic ==================================
 	function getRandomNotUsedGifId() {
+		if (settings.participantsHighQuality){
+			gifsCount = gifsCount_hq;
+		} else {
+			gifsCount = gifsCount_lq;
+		}
+		if (usedGifsIds.length >= gifsCount) {
+			usedGifsIds = [];
+			usedGifsTimes++;
+		}
 		const availableGifsIds = new Array(gifsCount).fill().map((_, index) => index+1).filter(e => !usedGifsIds.includes(e));
 		let randomNotUsedGifId;
 		if (settings.participantsOrderRandomization) {
 			randomNotUsedGifId = availableGifsIds[Math.floor(Math.random() * availableGifsIds.length)];
 		} else {
 			randomNotUsedGifId = Math.min(...availableGifsIds);
 		}
+		// console.log(randomNotUsedGifId);
 		if (randomNotUsedGifId) {
 			usedGifsIds.push(randomNotUsedGifId);
 			return randomNotUsedGifId;
@@ -235,13 +291,24 @@
 	}
 	function createParticipant(participantOrder) {
-		const gifId = getRandomNotUsedGifId();
+		// const gifId = getRandomNotUsedGifId();
+		const gifId = getRandomNotUsedGifId() + usedGifsTimes * gifsCount;
 		if (gifId === null) {
 			return Promise.reject();
 		}
-		const gifUrl = `./persons_gifs/${gifId}.gif`;
+		let gifUrl;
+		if (settings.participantsHighQuality){
+			// console.log("hq");
+			gifUrl = `./persons_gifs_hq/${gifId - usedGifsTimes * gifsCount}.mp4`;
+		} else {
+			// console.log("lq");
+			gifUrl = `./persons_gifs_lq/${gifId - usedGifsTimes * gifsCount}.gif`;
+		}
 		const frameIndex = 0;
 		const sdkInstance = WatchTogetherSDK({debug: true, storagePrefix: `participant_${gifId}`, apiUrl: settings.swaggerUrl})({instanceType: settings.instanceType});
@@ -250,49 +317,75 @@
 		containerElement.setAttribute('data-participant-id', gifId);
 		containerElement.style.order = participantOrder;
-		const canvasElement = document.createElement('canvas');
-		canvasElement.setAttribute('title', `Gif ID - ` + gifId);
-		const canvasContext = canvasElement.getContext('2d');
-		containerElement.appendChild(canvasElement);
+		let canvasElement;
+		let canvasContext;
+		if (settings.participantsHighQuality){
+			canvasElement = document.createElement('video')
+			canvasElement.setAttribute('title', `Video ID - ` + gifId);
+			canvasElement.src = gifUrl;
+			canvasElement.muted = false;
+			canvasElement.height = 270;
+			canvasElement.width = 480;
+			canvasElement.autoplay = true;
+			canvasElement.loop = true;
+			containerElement.appendChild(canvasElement);
+			// console.log(canvasElement);
+		} else {
+			canvasElement = document.createElement('canvas');
+			canvasElement.setAttribute('title', `Gif ID - ` + gifId);
+			canvasContext = canvasElement.getContext('2d');
+			containerElement.appendChild(canvasElement);
+		}
+		// const canvasElement = document.createElement('canvas');
+		// canvasElement.setAttribute('title', `Gif ID - ` + gifId);
+		// const canvasContext = canvasElement.getContext('2d');
+		// containerElement.appendChild(canvasElement);
 		let spaceElement = document.createElement('div');
-		spaceElement.className = 'space';
+		spaceElement.classList.add('space');
 		containerElement.appendChild(spaceElement);
 		let participantNameElement;
 		participantNameElement = document.createElement('input');
 		participantNameElement.setAttribute('type', 'text');
 		participantNameElement.setAttribute('placeholder', 'Name');
+		participantNameElement.classList.add('--advanced');
 		containerElement.appendChild(participantNameElement);
 		const getNameButtonElement = document.createElement('button');
 		getNameButtonElement.innerText = 'Get name';
 		getNameButtonElement.addEventListener('click', () => {
 			sdkInstance.user.getUserSelf()
-				.then(response => {
-					participants[gifId].displayname = response.data.displayname;
-					participantNameElement.value = response.data.displayname;
-				});
+					.then(response => {
+						participants[gifId].displayname = response.data.displayname;
+						participantNameElement.value = response.data.displayname;
+					});
 		});
+		getNameButtonElement.classList.add('--advanced');
 		containerElement.appendChild(getNameButtonElement);
 		const setNameButtonElement = document.createElement('button');
 		setNameButtonElement.innerText = 'Save name';
 		setNameButtonElement.addEventListener('click', () => sdkInstance.user.updateUserSelf({lastRoomId: settings.roomId, displayname: participantNameElement.value}));
+		setNameButtonElement.classList.add('--advanced');
 		containerElement.appendChild(setNameButtonElement);
 		spaceElement = document.createElement('div');
-		spaceElement.className = 'space';
+		spaceElement.classList.add('space', '--advanced');
 		containerElement.appendChild(spaceElement);
 		const destroyButtonElement = document.createElement('button');
 		destroyButtonElement.innerText = 'Destroy';
 		destroyButtonElement.addEventListener('click', () => destroyParticipant(participants[gifId]));
+		destroyButtonElement.classList.add('--advanced');
 		containerElement.appendChild(destroyButtonElement);
 		const joinButtonElement = document.createElement('button');
 		joinButtonElement.innerText = 'Join';
 		joinButtonElement.addEventListener('click', () => joinParticipantToRoom(participants[gifId]));
+		joinButtonElement.classList.add('--advanced');
 		containerElement.appendChild(joinButtonElement);
 		const leaveButtonElement = document.createElement('button');
@@ -301,17 +394,19 @@
 		containerElement.appendChild(leaveButtonElement);
 		spaceElement = document.createElement('div');
-		spaceElement.className = 'space';
+		spaceElement.classList.add('space', '--advanced');
 		containerElement.appendChild(spaceElement);
 		const toggleCameraButtonElement = document.createElement('button');
 		toggleCameraButtonElement.innerText = 'Toggle camera';
 		toggleCameraButtonElement.addEventListener('click', () => participants[gifId].session.toggleVideo());
+		toggleCameraButtonElement.classList.add('--advanced');
 		containerElement.appendChild(toggleCameraButtonElement);
 		const toggleAudioButtonElement = document.createElement('button');
 		toggleAudioButtonElement.innerText = 'Toggle audio';
 		toggleAudioButtonElement.addEventListener('click', () => participants[gifId].session.toggleAudio());
+		toggleAudioButtonElement.classList.add('--advanced');
 		containerElement.appendChild(toggleAudioButtonElement);
 		const toggleRaiseHandButtonElement = document.createElement('button');
@@ -320,64 +415,120 @@
 			sdkInstance.room.setUser({roomId: settings.roomId, userId: participants[gifId].sdkInstance.userId, flag: participants[gifId].handRaised ? 'handLower' : 'handRaise'});
 			participants[gifId].handRaised = !participants[gifId].handRaised;
 		});
+		toggleRaiseHandButtonElement.classList.add('--advanced');
 		containerElement.appendChild(toggleRaiseHandButtonElement);
-		return fetch(gifUrl)
-			.then(response => {
-				const imageDecoder = new ImageDecoder({data: response.body, type: 'image/gif'});
-				const participant = {
-					gifId,
-					gifUrl,
-					imageDecoder,
-					frameIndex,
-					reverseOrder: false, // boomerang animation
-					width: null, // Will be set after first frame is decoded
-					height: null, // Will be set after first frame is decoded
-					canvas: canvasElement,
-					canvasContext,
-					sdkInstance,
-					loginPromise: sdkInstance.auth.deviceLogin(gifId),
-					session: null, // Will be set after room join
-					handRaised: false,
-				};
-				if (settings.fetchNames) {
-					participant.loginPromise.then(() => sdkInstance.user.getUserSelf())
+		let participant;
+		if (settings.participantsHighQuality){
+			participant = {
+				gifId,
+				gifUrl,
+				frameIndex,
+				reverseOrder: false, // boomerang animation
+				width: canvasElement.width, // Will be set after first frame is decoded
+				height: canvasElement.height, // Will be set after first frame is decoded
+				canvas: canvasElement,
+				sdkInstance,
+				loginPromise: sdkInstance.auth.deviceLogin(false, gifId),
+				session: null, // Will be set after room join
+				handRaised: false,
+			};
+			if (settings.fetchNames) {
+				participant.loginPromise.then(() => sdkInstance.user.getUserSelf())
 						.then(response => {
 							participant.displayname = response.data.displayname;
 							participantNameElement.value = response.data.displayname;
 						});
-				}
-				return imageDecoder
-					.decode({frameIndex})
-					.then(decodeResult => {
-						participant.width = decodeResult.image.displayWidth;
-						participant.canvas.width = decodeResult.image.displayWidth;
-						participant.height = decodeResult.image.displayHeight;
-						participant.canvas.height = decodeResult.image.displayHeight;
-						participant.canvas.id = `canvas-${participant.gifId}`;
+			}
-						// Start render loop
-						renderGif(decodeResult, participant);
+			elements.participantsList.appendChild(containerElement);
+			return Promise.resolve(participant);
-						elements.participantsList.appendChild(containerElement);
-						return participant;
+		} else {
+			return fetch(gifUrl)
+					.then(response => {
+						const imageDecoder = new ImageDecoder({data: response.body, type: 'image/gif'});
+						// if(typeof canvasElement !== "object") {
+						//     console.log(settings.participantsHighQuality, typeof settings.participantsHighQuality, typeof canvasElement);
+						// }
+						participant = {
+							gifId,
+							gifUrl,
+							imageDecoder,
+							frameIndex,
+							reverseOrder: false, // boomerang animation
+							width: null, // Will be set after first frame is decoded
+							height: null, // Will be set after first frame is decoded
+							canvas: canvasElement,
+							canvasContext,
+							sdkInstance,
+							loginPromise: sdkInstance.auth.deviceLogin(false, gifId),
+							session: null, // Will be set after room join
+							handRaised: false,
+						};
+						if (settings.fetchNames) {
+							participant.loginPromise.then(() => sdkInstance.user.getUserSelf())
+									.then(response => {
+										participant.displayname = response.data.displayname;
+										participantNameElement.value = response.data.displayname;
+									});
+						}
+						return imageDecoder
+								.decode({frameIndex})
+								.then(decodeResult => {
+									participant.width = decodeResult.image.displayWidth;
+									participant.canvas.width = decodeResult.image.displayWidth;
+									participant.height = decodeResult.image.displayHeight;
+									participant.canvas.height = decodeResult.image.displayHeight;
+									participant.canvas.id = `canvas-${participant.gifId}`;
+									// Start render loop
+									renderGif(decodeResult, participant);
+									elements.participantsList.appendChild(containerElement);
+									return participant;
+								});
 					});
-			});
+		}
 	}
 	function createParticipants(participantsCount = settings.participantsCount) {
 		destroyParticipants()
-			.then(() => {
-				for (let i = 0; i < participantsCount; i++) {
-					createParticipant(i).then(participant => participants[participant.gifId] = participant);
-				}
-			})
+				.then(() => {
+					for (let i = 0; i < participantsCount; i++) {
+						createParticipant(i).then(participant => {
+							participants[participant.gifId] = participant;
+						});
+					}
+				})
+	}
+	function initiazeFakeChat() {
+		req = "https://api.reactoo.com/v3/wt/room?demo=true&id=" + elements.form.roomId.value;
+		const sdkInstance = WatchTogetherSDK({debug: true, storagePrefix: `participant_fakeChat`, apiUrl: settings.swaggerUrl})({instanceType: settings.instanceType});
+		sdkInstance.auth.deviceLogin(false, "participant_fakeChat").then(() => {
+			sdkInstance.room.getRoomById(elements.form.roomId.value, elements.form.pinHash.value, undefined, true)
+					.then(response => {
+						console.log(response);
+					})
+					.catch(error => {
+						console.log(error);
+					});
+		});
 	}
 	function createSingleParticipant() {
@@ -385,55 +536,65 @@
 		console.log(participantOrder);
 		createParticipant(participantOrder)
-			.then(participant => participants[participant.gifId] = participant);
+				.then(participant => participants[participant.gifId] = participant);
 	}
 	function destroyParticipant(participant) {
 		disconnectParticipantFromRoom(participant)
-			.then(() => {
-				participant.imageDecoder.close();
-				participant.sdkInstance.auth.logout();
-				usedGifsIds.splice(usedGifsIds.indexOf(participant.gifId), 1);
-				document.querySelector('.participant-container[data-participant-id="' + participant.gifId + '"]').remove();
-				participants[participant.gifId] = undefined;
-			});
-	}
+				.then(() => {
+					if (participant.imageDecoder) {
+						participant.imageDecoder.close();
+					}
-	function destroyParticipants() {
-		return disconnectParticipantsFromRoom()
-			.then(() => {
-				participants.filter(p => p).forEach(participant => {
-					participant.imageDecoder.close();
 					participant.sdkInstance.auth.logout();
 					usedGifsIds.splice(usedGifsIds.indexOf(participant.gifId), 1);
 					document.querySelector('.participant-container[data-participant-id="' + participant.gifId + '"]').remove();
+					participants[participant.gifId] = undefined;
 				});
+	}
+	function destroyParticipants() {
+		return disconnectParticipantsFromRoom()
+				.then(() => {
+					participants.filter(p => p).forEach(participant => {
+						if (participant.imageDecoder) {
+							participant.imageDecoder.close();
+						}
+						participant.sdkInstance.auth.logout();
+						usedGifsIds.splice(usedGifsIds.indexOf(participant.gifId), 1);
+						document.querySelector('.participant-container[data-participant-id="' + participant.gifId + '"]').remove();
+					});
-				for (let i = 0 ; i < participants.length ; i++) {
-					if (participants[i]) {
-						participants[i] = undefined;
+					for (let i = 0 ; i < participants.length ; i++) {
+						if (participants[i]) {
+							participants[i] = undefined;
+						}
 					}
-				}
-			});
+					usedGifsTimes = 0;
+				});
 	}
 	function joinParticipantToRoom(participant) {
 		return participant.loginPromise.then(() => {
 			participant.sdkInstance.room.createSession({roomId: settings.roomId, pinHash: settings.pinHash})
-				.then(session => {
-					participant.session = session;
-					return Promise.all([session, session.connect()])
-				})
-				.then(([session, _]) => {
-					return getAudioStream()
-						.then(audioStream => {
-							participant.stream = participant.canvas.captureStream();
-							participant.stream.addTrack(audioStream.getAudioTracks()[0]);
-							return session.publishLocal(participant.stream, 'camera0');
-						});
-				});
+					.then(session => {
+						participant.session = session;
+						return Promise.all([session, session.connect()])
+					})
+					.then(([session, _]) => {
+						return getAudioStream()
+								.then(audioStream => {
+									participant.stream = participant.canvas.captureStream();
+									if (participant.stream.getAudioTracks().length === 0) {
+										participant.stream.addTrack(audioStream.getAudioTracks()[0]);
+									}
+									return session.publishLocal(participant.stream, 'camera0')
+									// .then(() => participant.session.toggleAudio(false));
+								});
+					});
 		});
 	}
@@ -446,15 +607,15 @@
 			for (let i = 0 ; i < participants.filter(p => p).length ; i++) {
 				const parallelQueueIndex = i % settings.parallelQueues;
 				parallelQueues[parallelQueueIndex] = parallelQueues[parallelQueueIndex]
-					.then(() => joinParticipantToRoom(participants.filter(p => p)[i]))
-					.then(() => new Promise(resolve => setTimeout(resolve, settings.connectionDelay * 1000)));
+						.then(() => joinParticipantToRoom(participants.filter(p => p)[i]))
+						.then(() => new Promise(resolve => setTimeout(resolve, settings.connectionDelay * 1000)));
 			}
 		} else {
 			// Serial join
 			return participants.filter(p => p).reduce((promiseChain, participant) => {
 				return promiseChain.then(() => joinParticipantToRoom(participant))
-					.then(() => new Promise(resolve => setTimeout(resolve, settings.connectionDelay * 1000)));
+						.then(() => new Promise(resolve => setTimeout(resolve, settings.connectionDelay * 1000)));
 			}, Promise.resolve());
 		}
 	}
@@ -462,12 +623,12 @@
 	function disconnectParticipantFromRoom(participant) {
 		if (participant && participant.loginPromise) {
 			return participant.loginPromise
-				.then(() => {
-					if (participant.session && participant.session.disconnect) {
-						return participant.session.disconnect();
-					}
-				})
-				.then(() => participant.session = null);
+					.then(() => {
+						if (participant.session && participant.session.disconnect) {
+							return participant.session.disconnect();
+						}
+					})
+					.then(() => participant.session = null);
 		}
 	}
@@ -505,19 +666,19 @@
 		// Decode the next frame ahead of display so it's ready in time.
 		participant.imageDecoder.decode({frameIndex: participant.frameIndex})
-			.then( nextDecodeResult => setTimeout(_ => {
-				renderGif(nextDecodeResult, participant);
-			}, 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) {
-					participant.frameIndex = 0;
-					participant.imageDecoder.decode({frameIndex: imageIndex}).then(decodeResult => renderGif(decodeResult, participant));
-				} else {
-					throw e;
-				}
-			});
+				.then( nextDecodeResult => setTimeout(_ => {
+					renderGif(nextDecodeResult, participant);
+				}, 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) {
+						participant.frameIndex = 0;
+						participant.imageDecoder.decode({frameIndex: imageIndex}).then(decodeResult => renderGif(decodeResult, participant));
+					} else {
+						throw e;
+					}
+				});
 	}
 	function setParticipantsNames() {
@@ -534,22 +695,22 @@
 		return new Promise(resolve => {
 			const request = new XMLHttpRequest();
 			// https://ttsmp3.com/
-			request.open('GET', './sound_2.mp3', true);
+			request.open('GET', './sound_empty.mp3', true);
 			request.responseType = 'arraybuffer';
 			request.onload = function() {
 				audioContext.decodeAudioData(request.response)
-					.then(buffer => {
-						const streamDestination = audioContext.createMediaStreamDestination();
-						const source = audioContext.createBufferSource();
-						source.buffer = buffer;
-						source.connect(streamDestination);
-						source.loop = true;
-						source.start();
+						.then(buffer => {
+							const streamDestination = audioContext.createMediaStreamDestination();
+							const source = audioContext.createBufferSource();
+							source.buffer = buffer;
+							source.connect(streamDestination);
+							source.loop = true;
+							source.start();
-						new Audio().srcObject = streamDestination.stream;
+							new Audio().srcObject = streamDestination.stream;
-						resolve(streamDestination.stream);
-					});
+							resolve(streamDestination.stream);
+						});
 			}
 			request.send();
 		});
@@ -560,6 +721,12 @@
 	document.addEventListener("DOMContentLoaded", function() {
 		initializeSettings();
 		getSettingsFromUrl();
+		if (!settings.advancedSettings) {
+			settings.participantsHighQuality = true;
+			document.head.insertAdjacentHTML("beforeend", `<style>.--advanced{display:none}</style>`)
+		}
 		fillSettingsForm();
 	});