From dbed03474ca36608823b4615a06f6560de2379ea Mon Sep 17 00:00:00 2001
From: intergrav <devin@devins.page>
Date: Sat, 11 Apr 2026 21:00:51 -0400
Subject: [PATCH] feat: animation/effect toggle

for pulse animation and context menu blur
---
 src/css/components.css | 11 +++++++++--
 src/index.html         |  6 ++++++
 src/js/settings.js     | 15 +++++++++++++++
 src/js/state.js        |  1 +
 4 files changed, 31 insertions(+), 2 deletions(-)

diff --git a/src/css/components.css b/src/css/components.css
index 64a1ad6..f0b8d5f 100644
--- a/src/css/components.css
+++ b/src/css/components.css
@@ -256,9 +256,12 @@ button {
 	background: var(--bg-secondary);
 }
 
+:not(.no-animations) #queue #queue-table tbody tr.currently-playing {
+	animation: pulse 4s linear infinite;
+}
+
 #queue #queue-table tbody tr.currently-playing {
 	background: var(--playing);
-	animation: pulse 4s linear infinite;
 }
 
 #queue #queue-table tbody tr.dragging {
@@ -344,7 +347,6 @@ button {
 #context-menu {
 	position: fixed;
 	background: var(--bg-context-menu);
-	backdrop-filter: blur(16px);
 	border: 1px solid var(--border);
 	border-radius: 0.25rem;
 	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
@@ -352,6 +354,11 @@ button {
 	min-width: 10rem;
 }
 
+:not(.no-animations) #context-menu {
+	background: Menu;
+	backdrop-filter: blur(16px);
+}
+
 #context-menu .context-menu-item {
 	display: block;
 	width: 100%;
diff --git a/src/index.html b/src/index.html
index f8ddd1c..44ea137 100644
--- a/src/index.html
+++ b/src/index.html
@@ -113,6 +113,12 @@
 						show star ratings
 					</label>
 				</div>
+				<div class="form-group">
+					<label>
+						<input type="checkbox" id="animations-toggle" />
+						enable animations/visual effects
+					</label>
+				</div>
 				<div class="form-group">
 					<label
 						>artist art size: <span id="artist-size-display">24</span>px</label
diff --git a/src/js/settings.js b/src/js/settings.js
index 0c71e51..94a0aee 100644
--- a/src/js/settings.js
+++ b/src/js/settings.js
@@ -31,6 +31,7 @@ function setupSettings() {
 	);
 	const favoritesToggle = document.getElementById("favorites-toggle");
 	const ratingsToggle = document.getElementById("ratings-toggle");
+	const animationsToggle = document.getElementById("animations-toggle");
 
 	// load and apply settings from localStorage
 	const saved = localStorage.getItem("tinysub_settings");
@@ -42,10 +43,15 @@ function setupSettings() {
 	}
 	applySettings();
 
+	if (!state.settings.enableAnimations) {
+		document.documentElement.classList.add("no-animations");
+	}
+
 	scrobbleToggle.checked = state.settings.scrobbling;
 	dynamicFaviconToggle.checked = state.settings.dynamicFavicon;
 	favoritesToggle.checked = state.settings.enableFavorites;
 	ratingsToggle.checked = state.settings.enableRatings;
+	animationsToggle.checked = state.settings.enableAnimations;
 
 	// initialize sliders and setup listeners
 	Object.entries(ART_SETTINGS).forEach(([name, key]) => {
@@ -111,6 +117,15 @@ function setupSettings() {
 		updateQueueDisplay();
 	});
 
+	animationsToggle.addEventListener("change", () => {
+		state.settings.enableAnimations = animationsToggle.checked;
+		document.documentElement.classList.toggle(
+			"no-animations",
+			!animationsToggle.checked,
+		);
+		localStorage.setItem("tinysub_settings", JSON.stringify(state.settings));
+	});
+
 	// logout button
 	const logoutBtn = document.getElementById("logout-settings-btn");
 	if (logoutBtn) {
diff --git a/src/js/state.js b/src/js/state.js
index 8cbd124..b250e2f 100644
--- a/src/js/state.js
+++ b/src/js/state.js
@@ -21,6 +21,7 @@ const state = {
 		dynamicFavicon: true,
 		enableFavorites: true,
 		enableRatings: false,
+		enableAnimations: true,
 		artArtist: 24,
 		artAlbum: 32,
 		artSong: 16,
-- 
2.51.2