Added Pause button on bottom left of waterfall UI

src/TagzApp.Providers.YouTubeChat/YouTubeChatProvider.cs

@@ -2,6 +2,7 @@
 using System.Text.Json.Serialization;
 using Google.Apis.Auth.OAuth2;
 using Google.Apis.Auth.OAuth2.Flows;
+using Google.Apis.Auth.OAuth2.Responses;
 using Google.Apis.Services;
 using Google.Apis.YouTube.v3;
 using Google.Apis.YouTube.v3.Data;
@@ -104,7 +105,17 @@ private async Task<YouTubeService> GetGoogleService()
 			},
 			Scopes = new[] { YouTubeChatConfiguration.Scope_YouTube }
 		});
-		var token = await flow.RefreshTokenAsync(YouTubeEmailId, RefreshToken, CancellationToken.None);
+
+		TokenResponse token;
+		try
+		{
+			token = await flow.RefreshTokenAsync(YouTubeEmailId, RefreshToken, CancellationToken.None);
+		}
+		catch (Exception ex)
+		{
+			Console.WriteLine($"Exception while refreshing token: {ex.Message}");
+			throw;
+		}
 		var credential = new UserCredential(flow, "me", token);
 
 		_Service = new YouTubeService(new BaseClientService.Initializer

src/TagzApp.Web/Areas/Admin/Pages/YouTubeChat.cshtml.cs

@@ -1,4 +1,5 @@
 using System.Text.Json;
+using Google.Apis.Auth.OAuth2.Responses;
 using Microsoft.AspNetCore.Authorization;
 using Microsoft.AspNetCore.Identity;
 using Microsoft.AspNetCore.Mvc;
@@ -98,8 +99,22 @@ public async Task OnGetAsync()
 				_Provider.YouTubeEmailId = email;
 				_Provider.RefreshToken = refresh_token;
 
-				ChannelTitle = !string.IsNullOrEmpty(_YouTubeChatConfiguration.ChannelTitle) ? _YouTubeChatConfiguration.ChannelTitle : await _Provider.GetChannelForUserAsync();
-				base.TempData["ChannelTitle"] = ChannelTitle;
+				try
+				{
+					ChannelTitle = !string.IsNullOrEmpty(_YouTubeChatConfiguration.ChannelTitle) ? _YouTubeChatConfiguration.ChannelTitle : await _Provider.GetChannelForUserAsync();
+					base.TempData["ChannelTitle"] = ChannelTitle;
+				}
+				catch (TokenResponseException ex)
+				{
+					if (ex.Error.Error == "invalid_grant")
+					{
+						// do nothing, need to login again
+						return;
+					}
+
+					throw;
+
+				}
 
 				Broadcasts = (await _Provider.GetBroadcastsForUser()).ToArray();
 

src/TagzApp.Web/Pages/Waterfall.cshtml

@@ -25,6 +25,12 @@
 
 	</div>
 	*@
+
+	<div id="pauseUpdates">
+		<i id="pauseButton" class="bi bi-pause-circle-fill text-info"></i>
+		<i id="pauseButton-bg" class="bi bi-circle-fill"></i>
+	</div>
+
 </div>
 
 

src/TagzApp.Web/Services/JsonTempDataSerializer.cs

@@ -25,6 +25,18 @@ public override IDictionary<string, object> Deserialize(byte[] unprotectedData)
 		var tempDataDictionary = JsonSerializer.Deserialize<Dictionary<string, object>>(memoryStream)
 				?? new Dictionary<string, object>(StringComparer.OrdinalIgnoreCase);
 
+		foreach (var item in tempDataDictionary)
+		{
+			if (item.Value is JsonElement)
+			{
+
+				var key = item.Key.ToString();
+				var value = ((JsonElement)item.Value).GetRawText().TrimStart('\"').TrimEnd('\"');
+				tempDataDictionary[key] = value;
+
+			}
+		}
+
 		return tempDataDictionary;
 	}
 };

src/TagzApp.Web/wwwroot/css/site.css

@@ -417,3 +417,25 @@ a {
 .emote {
 	height: 1.6em;
 }
+
+/** Pause button on waterfall */
+#pauseUpdates {
+	position: absolute;
+	left: 1em;
+	bottom: 6em;
+	cursor: pointer;
+	z-index: 2;
+}
+
+#pauseButton {
+	font-size: 4rem;
+	z-index: 1;
+}
+
+#pauseButton-bg {
+	font-size: 4rem;
+	z-index: -1;
+	position: absolute;
+	left: 0;
+	color: #fff;
+}

src/TagzApp.Web/wwwroot/js/site.js

@@ -7,6 +7,9 @@
 		Rejected: 2,
 	};
 
+	var paused = false;
+	var pauseQueue = [];
+
 	const taggedContent = document.getElementById('taggedContent');
 	const observer = new MutationObserver(function (mutationsList, observer) {
 		for (const mutation of mutationsList) {
@@ -128,6 +131,10 @@
 					el.getAttribute('data-providerid'),
 				);
 
+				// Pause updates
+				paused = true;
+				FormatPauseButton();
+
 				// Format Modal
 				let modalProfilePic = document.querySelector('.modal-header img');
 				modalProfilePic.src = content.authorProfileImageUri;
@@ -181,6 +188,14 @@
 				let modalWindow = new bootstrap.Modal(
 					document.getElementById('contentModal'),
 				);
+
+				// NOTE: Let's not immediately turn off pause coming back from a modal
+				//document.getElementById('contentModal').addEventListener('hide.bs.modal', function (ev) {
+				//	paused = false;
+				//	FormatPauseButton();
+				//	ResumeFromPause();
+				//});
+
 				modalWindow.show();
 			});
 		}
@@ -411,6 +426,38 @@
 		moderatorList.appendChild(newMod);
 	}
 
+	function ConfigurePauseButton() {
+		var pauseButton = document.getElementById('pauseButton');
+		pauseButton.addEventListener('click', function (ev) {
+			paused = !paused;
+			FormatPauseButton();
+			if (!paused) ResumeFromPause();
+		});
+	}
+
+	function FormatPauseButton() {
+		if (paused) {
+			pauseButton.classList.remove('bi-pause-circle-fill');
+			pauseButton.classList.add('bi-play-circle-fill');
+		} else {
+			pauseButton.classList.remove('bi-play-circle-fill');
+			pauseButton.classList.add('bi-pause-circle-fill');
+		}
+	}
+
+	function AddMessageToPauseQueue(content) {
+		pauseQueue.push(content);
+	}
+
+	function ResumeFromPause() {
+		// for each element in pauseQueue, call FormatMessage, then clear the queue
+		pauseQueue.forEach(function (content) {
+			FormatMessage(content);
+		});
+
+		pauseQueue = [];
+	}
+
 	const t = {
 		Tags: [],
 
@@ -425,6 +472,10 @@
 				.build();
 
 			connection.on('NewWaterfallMessage', (content) => {
+				if (paused) {
+					AddMessageToPauseQueue(content);
+					return;
+				}
 				FormatMessage(content);
 			});
 
@@ -436,6 +487,8 @@
 			// Start the connection.
 			await start();
 
+			ConfigurePauseButton();
+
 			connection
 				.invoke('GetExistingContentForTag', tags)
 				.then(function (result) {