From 2183610df15d7f07ff6a7aabb111d83d6ea478d4 Mon Sep 17 00:00:00 2001
From: edideaur <eduard@prigoana.com>
Date: Thu, 2 Apr 2026 18:44:13 +0000
Subject: [PATCH] further:allow right clicking blocked content for easier
 unblocking

---
 index.html    | 16 ++++++++--------
 js/events.js  | 14 ++++++--------
 js/storage.js | 12 ++++++------
 styles.css    | 12 ------------
 4 files changed, 20 insertions(+), 34 deletions(-)

diff --git a/index.html b/index.html
index 0f895a8..8367213 100644
--- a/index.html
+++ b/index.html
@@ -4060,14 +4060,14 @@
                                         </button>
 
                                         <div class="eq-howto-tab autoeq" id="eq-howto-autoeq">
-                                            <h4>AutoEQ &mdash; Headphone Correction</h4>
+                                            <h4>AutoEQ - Headphone Correction</h4>
                                             <ol>
                                                 <li>
                                                     <b>Select your headphone</b> from the dropdown or search the
                                                     database below.
                                                 </li>
                                                 <li>
-                                                    <b>Pick a target curve</b> &mdash; Harman is the most popular. You
+                                                    <b>Pick a target curve</b> - Harman is the most popular. You
                                                     can also import a custom target.
                                                 </li>
                                                 <li>
@@ -4075,7 +4075,7 @@
                                                     default).
                                                 </li>
                                                 <li>
-                                                    Click <b>AutoEQ</b> &mdash; the algorithm generates parametric
+                                                    Click <b>AutoEQ</b> - the algorithm generates parametric
                                                     filters that shape your headphone's response toward the target.
                                                 </li>
                                                 <li>
@@ -4103,7 +4103,7 @@
                                             id="eq-howto-parametric"
                                             style="display: none"
                                         >
-                                            <h4>Parametric EQ &mdash; Manual Control</h4>
+                                            <h4>Parametric EQ - Manual Control</h4>
                                             <ol>
                                                 <li>
                                                     Each band supports <b>peaking, low-shelf, and high-shelf</b> filter
@@ -4141,7 +4141,7 @@
                                         </div>
 
                                         <div class="eq-howto-tab speaker" id="eq-howto-speaker" style="display: none">
-                                            <h4>Speaker EQ &mdash; Room Correction</h4>
+                                            <h4>Speaker EQ - Room Correction</h4>
                                             <ol>
                                                 <li>Select your <b>speaker config</b> (2.0, 5.1, or 7.1).</li>
                                                 <li>
@@ -4149,17 +4149,17 @@
                                                     a time.
                                                 </li>
                                                 <li>
-                                                    <b>Measure</b>: click the mic button &mdash; pink noise plays for 5
+                                                    <b>Measure</b>: click the mic button - pink noise plays for 5
                                                     seconds while your microphone captures the room response. Or
                                                     <b>import</b> a measurement file from REW or similar.
                                                 </li>
                                                 <li>
-                                                    Pick a <b>target</b> &mdash; Harman In-Room is recommended for
+                                                    Pick a <b>target</b> - Harman In-Room is recommended for
                                                     speakers.
                                                 </li>
                                                 <li>
                                                     Set <b>Bass Limit</b> (don't EQ below this) and
-                                                    <b>Room Limit</b> (don't EQ above this) &mdash; the colored lines on
+                                                    <b>Room Limit</b> (don't EQ above this) - the colored lines on
                                                     the graph show the active range.
                                                 </li>
                                                 <li>
diff --git a/js/events.js b/js/events.js
index 348d5b5..e4e37e2 100644
--- a/js/events.js
+++ b/js/events.js
@@ -73,7 +73,7 @@ const LONG_PRESS_DURATION = 500;
 function handleTrackTouchStart(e) {
     if (!('ontouchstart' in window)) return;
     const trackItem = e.target.closest('.track-item');
-    if (!trackItem || trackItem.classList.contains('unavailable') || trackItem.classList.contains('blocked')) return;
+    if (!trackItem || trackItem.classList.contains('unavailable')) return;
 
     isLongPress = false;
     longPressTrackItem = trackItem;
@@ -1336,7 +1336,8 @@ export async function handleTrackAction(
     // Individual Track Actions
     // Check if track/artist is blocked
     const { contentBlockingSettings } = await import('./storage.js');
-    if (type === 'track' && action !== 'block-track' && contentBlockingSettings.shouldHideTrack(item)) {
+    const BLOCKED_PLAY_ACTIONS = new Set(['play-card', 'add-to-queue', 'play-next', 'start-mix']);
+    if (type === 'track' && BLOCKED_PLAY_ACTIONS.has(action) && contentBlockingSettings.shouldHideTrack(item)) {
         showNotification('This track is blocked');
         return;
     }
@@ -2165,7 +2166,7 @@ export function initializeTrackInteractions(player, api, mainContent, contextMen
         }
 
         const trackItem = e.target.closest('.track-item');
-        if (trackItem && (trackItem.classList.contains('unavailable') || trackItem.classList.contains('blocked'))) {
+        if (trackItem && trackItem.classList.contains('unavailable')) {
             return;
         }
         if (isLongPress && longPressTrackItem === trackItem) {
@@ -2173,6 +2174,7 @@ export function initializeTrackInteractions(player, api, mainContent, contextMen
         }
         if (
             trackItem &&
+            !trackItem.classList.contains('blocked') &&
             !trackItem.dataset.queueIndex &&
             !e.target.closest('.remove-from-playlist-btn') &&
             !e.target.closest('.artist-link') &&
@@ -2256,17 +2258,13 @@ export function initializeTrackInteractions(player, api, mainContent, contextMen
 
         const card = e.target.closest('.card');
         if (card) {
-            // Don't navigate if card is blocked (unless clicking menu button)
-            if (card.classList.contains('blocked') && !e.target.closest('.card-menu-btn')) {
-                return;
-            }
-
             if (e.target.closest('.edit-playlist-btn') || e.target.closest('.delete-playlist-btn')) {
                 return;
             }
 
             const libraryTracksContainer = card.closest('#library-tracks-container');
             if (libraryTracksContainer && card.dataset.trackId) {
+                if (card.classList.contains('blocked')) return;
                 if (
                     e.target.closest('.like-btn') ||
                     e.target.closest('.card-play-btn') ||
diff --git a/js/storage.js b/js/storage.js
index 246fd07..78cb6b0 100644
--- a/js/storage.js
+++ b/js/storage.js
@@ -2881,13 +2881,13 @@ export const contentBlockingSettings = {
 
     isTrackBlocked(trackId) {
         if (!trackId) return false;
-        return this.getBlockedTracks().some((t) => t.id === trackId);
+        return this.getBlockedTracks().some((t) => String(t.id) === String(trackId));
     },
 
     blockTrack(track) {
         if (!track || !track.id) return;
         const blocked = this.getBlockedTracks();
-        if (!blocked.some((t) => t.id === track.id)) {
+        if (!blocked.some((t) => String(t.id) === String(track.id))) {
             blocked.push({
                 id: track.id,
                 title: track.title || 'Unknown Track',
@@ -2899,7 +2899,7 @@ export const contentBlockingSettings = {
     },
 
     unblockTrack(trackId) {
-        const blocked = this.getBlockedTracks().filter((t) => t.id !== trackId);
+        const blocked = this.getBlockedTracks().filter((t) => String(t.id) !== String(trackId));
         this.setBlockedTracks(blocked);
     },
 
@@ -2919,13 +2919,13 @@ export const contentBlockingSettings = {
 
     isAlbumBlocked(albumId) {
         if (!albumId) return false;
-        return this.getBlockedAlbums().some((a) => a.id === albumId);
+        return this.getBlockedAlbums().some((a) => String(a.id) === String(albumId));
     },
 
     blockAlbum(album) {
         if (!album || !album.id) return;
         const blocked = this.getBlockedAlbums();
-        if (!blocked.some((a) => a.id === album.id)) {
+        if (!blocked.some((a) => String(a.id) === String(album.id))) {
             blocked.push({
                 id: album.id,
                 title: album.title || 'Unknown Album',
@@ -2937,7 +2937,7 @@ export const contentBlockingSettings = {
     },
 
     unblockAlbum(albumId) {
-        const blocked = this.getBlockedAlbums().filter((a) => a.id !== albumId);
+        const blocked = this.getBlockedAlbums().filter((a) => String(a.id) !== String(albumId));
         this.setBlockedAlbums(blocked);
     },
 
diff --git a/styles.css b/styles.css
index 75aada6..56b09de 100644
--- a/styles.css
+++ b/styles.css
@@ -3871,7 +3871,6 @@ input:checked + .slider::before {
 /* Blocked content styling */
 .track-item.blocked {
     opacity: 0.4;
-    pointer-events: none;
     filter: grayscale(100%);
 }
 
@@ -3879,22 +3878,11 @@ input:checked + .slider::before {
     text-decoration: line-through;
 }
 
-.track-item.blocked .track-menu-btn {
-    pointer-events: auto;
-    opacity: 1;
-}
-
 .card.blocked {
     opacity: 0.4;
-    pointer-events: none;
     filter: grayscale(100%);
 }
 
-.card.blocked .card-menu-btn {
-    pointer-events: auto;
-    opacity: 1;
-}
-
 .card.blocked .card-title,
 .card.blocked .card-subtitle {
     text-decoration: line-through;