now formatting modals and overlays with emotes (#269)

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

src/TagzApp.Web/Pages/Overlay.cshtml

@@ -16,6 +16,7 @@
 	</div>
 
 	<script src="~/lib/microsoft-signalr/signalr.min.js"></script>
+	<script src="~/js/site.js"></script>
 
 	@if (!string.IsNullOrEmpty(Model.Tag))
 	{
@@ -63,7 +64,7 @@
 					</div>
 					<i class="provider bi bi-${content.provider.toLowerCase()}"></i>
 					<span class="time">${new Date(content.timestamp).toLocaleString(undefined, { day: 'numeric', month: 'long', year: 'numeric', hour: '2-digit', minute: '2-digit' })}</span>
-					<span class="content">${content.text}</span>
+					<span class="content">${window.TagzApp.FormatContentWithEmotes(content)}</span>
 					`;
 
 				if (content.previewCard) {

src/TagzApp.Web/Pages/PortraitOverlay.cshtml

@@ -64,7 +64,7 @@
 								</div>
 											<i class="provider bi ${window.TagzApp.MapProviderToIconClass(content.provider)}"></i>
 								<span class="time">${new Date(content.timestamp).toLocaleString(undefined, { day: 'numeric', month: 'long', year: 'numeric', hour: '2-digit', minute: '2-digit' })}</span>
-								<span class="content">${content.text}</span>
+								<span class="content">${window.TagzApp.FormatContentWithEmotes(content)}</span>
 								`;
 
 					if (content.previewCard) {

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

@@ -14,7 +14,7 @@
 		Unmoderated: '0',
 	};
 
-	var tagCsv = "";
+	var tagCsv = '';
 	var paused = false;
 	var rolloverPause = false;
 	var pauseQueue = [];
@@ -191,7 +191,7 @@
 				})}`;
 
 				let modalBody = (document.querySelector('.modal-body').innerHTML =
-					content.text);
+					FormatContextWithEmotes(content));
 
 				if (
 					content.previewCard &&
@@ -349,22 +349,34 @@
 		return text;
 	}
 
-	function LoadAdditionalContentForFilters()
-	{
-
+	function LoadAdditionalContentForFilters() {
 		// only proceed if less than 20 article elements are visible
-		if (document.querySelectorAll('article:not([style*="display: none"])').length < 20) return;
+		if (
+			document.querySelectorAll('article:not([style*="display: none"])')
+				.length < 20
+		)
+			return;
 
 		// use the SignalR connection to call the server and get the additional content
-		connection.invoke('GetFilteredContentByTag', tagCsv, providerFilter, approvedFilterStatus).then(function (result) {
-			console.log(`Received ${result.length} additional messages from server`);
-			result.forEach(function (content) {
-				console.log(`Formatting ${content.providerId} with state ${content.state}`);
-				FormatMessageForModeration(content);
+		connection
+			.invoke(
+				'GetFilteredContentByTag',
+				tagCsv,
+				providerFilter,
+				approvedFilterStatus,
+			)
+			.then(function (result) {
+				console.log(
+					`Received ${result.length} additional messages from server`,
+				);
+				result.forEach(function (content) {
+					console.log(
+						`Formatting ${content.providerId} with state ${content.state}`,
+					);
+					FormatMessageForModeration(content);
+				});
+				window.Masonry.resizeAllGridItems();
 			});
-			window.Masonry.resizeAllGridItems();
-		});
-
 	}
 
 	function ApproveMessage(content) {
@@ -595,6 +607,10 @@
 			return MapProviderToIcon(provider);
 		},
 
+		FormatContentWithEmotes: function (content) {
+			return FormatContextWithEmotes(content);
+		},
+
 		FilterByApprovalStatus: function (status) {
 			let taggedContent = document.getElementById('taggedContent');
 			approvedFilterStatus = status;
@@ -619,11 +635,9 @@
 					taggedContent.classList.remove('filter-rejectedOnly');
 					taggedContent.classList.add('filter-needsModeration');
 					break;
-
 			}
 
 			LoadAdditionalContentForFilters();
-
 		},
 
 		ListenForWaterfallContent: async function (tags) {
@@ -774,7 +788,6 @@
 			}
 
 			if (providerFilter.length > 0) LoadAdditionalContentForFilters();
-
 		},
 	};