Added a hover-pause to the waterfall and moderation UI (#249)

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
FritzAndFriends · Oct 19, 2023 · 2624f4e · 2624f4e
1 parent 14203cb
commit 2624f4e
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 4 deletions.
diff --git a/src/TagzApp.Web/appsettings.json b/src/TagzApp.Web/appsettings.json
@@ -27,7 +27,8 @@
       "Description": "YouTube is a free video sharing website that makes it easy to watch online videos. You can even create and upload your own videos to share with others."
     },
     "twitchchat": {
-      "ChannelName": "csharpfritz"
+      "ChannelName": "csharpfritz",
+			"Activated": true
     },
     "twitter": {
       "Activated": false,

diff --git a/src/TagzApp.Web/wwwroot/js/site.js b/src/TagzApp.Web/wwwroot/js/site.js
@@ -8,7 +8,9 @@
 	};
 
 	var paused = false;
+	var rolloverPause = false;
 	var pauseQueue = [];
+	var pauseTimeout;
 	const waterfallMaxEntries = 100;
 	const moderationMaxEntries = 500;
 
@@ -351,10 +353,40 @@
 		}
 	}
 
+	function PauseOnRollover(ev) {
+		// pause updates
+		window.clearTimeout(pauseTimeout);
+		if (!paused) {
+			paused = true;
+			rolloverPause = true;
+			FormatPauseButton();
+		}
+
+		ev.srcElement.addEventListener('mouseleave', function (ev) {
+			// resume updates if we mouse out
+			if (rolloverPause) {
+				pauseTimeout = window.setTimeout(() => {
+					paused = false;
+					rolloverPause = false;
+					FormatPauseButton();
+					ResumeFromPause();
+				}, 1500);
+			}
+		});
+	}
+
 	function showModerationPanel(ev) {
 		var hovered = ev.target.closest('article');
 		if (hovered.querySelector('#moderationAction')) return;
 
+		// pause updates
+		window.clearTimeout(pauseTimeout);
+		if (!paused) {
+			paused = true;
+			rolloverPause = true;
+			FormatPauseButton();
+		}
+
 		var hoverPanel = document
 			.getElementById('moderationAction')
 			.cloneNode(true);
@@ -392,6 +424,17 @@
 		hovered.insertBefore(hoverPanel, hovered.firstElementChild);
 
 		hoverPanel.addEventListener('mouseleave', function (ev) {
+			// resume updates if we mouse out
+			if (rolloverPause) {
+				pauseTimeout = window.setTimeout(() => {
+					paused = false;
+					rolloverPause = false;
+					FormatPauseButton();
+					ResumeFromPause();
+				}, 1500);
+			}
+
+			// cleanup the moderation overlay
 			ev.target.closest('#moderationAction').remove();
 			var panels = document.querySelectorAll('.active_panel');
 			panels.forEach(function (panel) {
@@ -470,7 +513,7 @@
 			if (document.querySelector('.currentModerators')) {
 				FormatMessageForModeration(content);
 			} else {
-				FormatMessage(content);
+				FormatMessage(content, null, null, PauseOnRollover);
 			}
 		});
 
@@ -499,7 +542,7 @@
 					AddMessageToPauseQueue(content);
 					return;
 				}
-				FormatMessage(content);
+				FormatMessage(content, null, null, PauseOnRollover);
 			});
 
 			connection.on('RemoveMessage', (provider, providerId) => {
@@ -521,7 +564,7 @@
 				.invoke('GetExistingContentForTag', tags)
 				.then(function (result) {
 					result.forEach(function (content) {
-						FormatMessage(content);
+						FormatMessage(content, null, null, PauseOnRollover);
 					});
 					window.Masonry.resizeAllGridItems();
 				});