Read skipped messages

README.md

@@ -80,6 +80,7 @@ These are my ideas so far, some of them are already implemented:
 - notification about available viewers, no need to talk to my self if I just record for my self.
 - translate only one emoji per message
 - translate only one emote per message
+- read skipped messages most recent first, if no new ones come in
 
 If you are interested in more, just share your ideas:
 https://github.com/Falcosc/PSVR2-Twitch/discussions

index.html

@@ -112,7 +112,7 @@ <h3>Stream/Channel Status Voice</h3>
 			<button class="w3-button w3-theme w3-block" type="submit" value="Submit" disabled>&#x1F50A;&#xFE0E; Test Status Voice</button>
 		</form>
 	</div>
-	<div class="w3-left w3-card-4 w3-margin-right w3-margin-bottom">
+	<div class="w3-left w3-card-4 w3-margin-bottom">
 		<form name="chatVoice">
 			<div class="w3-container w3-theme-d3">
 				<h3>Chat Message Voice</h3>
@@ -131,5 +131,15 @@ <h3>Chat Message Voice</h3>
 			<button class="w3-button w3-theme w3-block" type="submit" value="Submit" disabled>&#x1F50A;&#xFE0E; Test Chat Voice</button>
 		</form>
 	</div>
+	<div class="w3-left">
+		<header class="w3-container w3-theme-d3">
+			<h3>Ignored Messages</h3>
+		</header> 
+		<div class="w3-container" id="ignoredMsgContainer">
+			<span>Messages will be skipped if another message is still been read.</span>
+			<span>If there are no new messages, skipped messages will be read most recent first.</span>
+			<span>Messages older then 30 seconds will be ignored.</span>
+		</div>
+	</div>
 </body>
 </html>

scripts/main.js

@@ -1,6 +1,7 @@
 const CLIENT_ID = '368mzno8zop311dlixwz4v7qvp0dgz'; /* keep this in sync with hardcoded oauth2/authorize links */
 const repeatStreamStatusLiveAfterMS = 1000 * 60 * 2; //2min
 const repeatStreamStatusOfflineAfterMS = 1000 * 30; //30s
+const ignoreSkipMessageAfterMS = 1000 * 30; //seconds after skipped message gets ignored
 const andTranslations = {'en-US':' and ', 'de-DE': ' und ', 'fr-FR': ' et '}; //for Microsoft Multilingual voices bug
 
 let accessToken;
@@ -14,6 +15,7 @@ let lastStreamStatus = undefined;
 let voiceOrder;
 const voiceDetails = new Map();
 let cheermoteRegex = generateCheermoteRegex();
+let skippedMessages = [];
 
 
 //todo repeat last text with mediaSession button
@@ -248,6 +250,26 @@ async function requestWakeLock() {
 	}
 };
 
+function speakSkippedMessage() {
+	if (window.speechSynthesis.speaking || !skippedMessages.length) {
+		return;
+	}
+	if(Date.now() - skippedMessages[skippedMessages.length-1].date.getTime() < ignoreSkipMessageAfterMS) {
+		const chatVoice = document.querySelectorAll('form[name="chatVoice"]')[0];
+		skippedMessages.pop().speak(new FormData(chatVoice)).then(speakSkippedMessage);
+	} else {
+		const ignoredMsgContainer = document.querySelector('#ignoredMsgContainer');
+		while(skippedMessages.length) {
+			const voiceMsg = skippedMessages.shift();
+			const formattedMsg = `[${voiceMsg.date.toTimeString().split(' ')[0]}] ${voiceMsg.message}`;
+			console.warn('ignored ' + formattedMsg);
+			const newLine = document.createElement('div');
+			newLine.text = formattedMsg;
+			ignoredMsgContainer.appendChild(newLine)
+		}
+	}
+}
+
 function start(e){
 	e.currentTarget.disabled=true;
 	e.preventDefault();
@@ -295,11 +317,10 @@ function start(e){
 			const voiceMessage = new VoiceMessage(message);
 			voiceMessage.removeEmotesExceptFirst(user.emotes); //needs be be execute before altering the message
 			voiceMessage.removeEmojisExceptFirst();
-			if (window.speechSynthesis.speaking) {
-				//TODO play up to 30s old messages in reverse (newest first)
-				console.warn('SpeechSynthesisUtterance.speaking, skipped message: ' + message);
+			if (window.speechSynthesis.speaking) {  //don't queue the new message, because threre could be long or more importand messages
+				skippedMessages.push(voiceMessage); 
 			} else {
-				voiceMessage.speak(new FormData(chatVoice));
+				voiceMessage.speak(new FormData(chatVoice)).then(speakSkippedMessage);
 			}
 		}
 	});
@@ -310,7 +331,7 @@ function start(e){
 		voiceMessage.removeEmojisExceptFirst();
 		voiceMessage.removeAll(cheermoteRegex);
 		message = `cheer ${userstate.bits} bits from ${userstate.username}: "${message}"`;
-		speak(message, new FormData(chatVoice));
+		speak(message, new FormData(chatVoice)).then(speakSkippedMessage);
 	});
 
 	client.on('resub', (channel, username, months, message, userstate, methods) => {
@@ -319,7 +340,7 @@ function start(e){
 		voiceMessage.removeEmotesExceptFirst(user.emotes); //needs be be execute before altering the message
 		voiceMessage.removeEmojisExceptFirst();
 		message = `resub ${cumulativeMonths} month from ${username}: "${message}"`;
-		speak(message, new FormData(chatVoice));
+		speak(message, new FormData(chatVoice)).then(speakSkippedMessage);
 	});
 	requestWakeLock();
 }
@@ -337,15 +358,19 @@ function testStatusVoice(e){
 	const formData = new FormData(e.currentTarget);
 	new VoiceMessage('Stream Status').speak(formData);
 	lastStatusSpeekTime = 0; //force repeat
-	checkStreamStatus().then(() => e.submitter.disabled = false);
+	checkStreamStatus()
+		.then(() => e.submitter.disabled = false)
+		.then(speakSkippedMessage);
 	return false;
 }
 
 function testChatVoice(e){
 	e.submitter.disabled = true;
 	e.preventDefault();
 	const testMsg = new VoiceMessage(voiceDetails.get(navigator.language.substr(0,2))?.testUtterance || 'PS VR 2 Twitch Chat');
-	testMsg.speak(new FormData(e.currentTarget)).then(() => e.submitter.disabled = false);
+	testMsg.speak(new FormData(e.currentTarget))
+		.then(() => e.submitter.disabled = false)
+		.then(speakSkippedMessage);
 	return false;
 }