Feature: Audio handling + Additional plugin support

plugins/SFWSwitch/additional_plugins.css

@@ -18,6 +18,10 @@
 
 /* O Stats */
 .custom-stats-row .stats-element img,
+#on-this-day-section [style*="position: relative; height: 400px"],
+
+/* Sprite Tab */
+.sprite-cell
 #on-this-day-section [style*="position: relative; height: 400px"]
 {
 filter: blur(30px);
@@ -53,6 +57,9 @@ filter: blur(2px);
 .hon-image-image:hover,
 .hon-performer-info.hon-scene-info:hover,
 
+/* Sprite Tab */
+.sprite-cell:hover,
+
 /* O Stats */
 .custom-stats-row .stats-element:hover,
 .custom-stats-row .stats-element:hover img,

plugins/SFWSwitch/sfw.css

@@ -1,134 +1,78 @@
-/* [Global changes] Blur NSFW images and unblur on mouse over */
-
-/*Credit: fl0w#9497 */
-
-/* === MORE BLUR === */
-
-/* scene */
-.scene-card-preview,
-.vjs-poster,
-video,
-.scene-cover,
-.scrubber-item,
-.scene-image,
-
-/* image */
-.image-card-preview,
-.image-image,
-.gallery-image,
-
-/* group */
-.group-card-image,
-.group-images,
-
-/* gallery */
-.gallery-card-image,
-table > tbody > tr > td > a > img.w-100,
-
-/* performer */
-.performer-card-image,
-img.performer,
-
-/* studio */
-.studio-card-image,
-
-/* tag */
-.tag-card-image
-
-
-{
-filter: blur(30px);
+/* Container*/
+.tag-card,
+.scene-card,
+.image-card,
+.gallery-card,
+.group-card,
+.thumbnail-container,
+.gallery-cover,
+.performer-card,
+.studio-card {
+    position: relative;
+    display: inline-block;
 }
 
 /* === LESS BLUR === */
 
 /* common */
 .card-section-title,
-
-/* scene */
-.scene-studio-overlay,
-.scene-header > h3,
-h3.scene-header,
-.studio-logo,
-.image-thumbnail,
-.TruncatedText.scene-card__description,
-
-/* image */
-h3.image-header,
-
-/* group */
-.group-details > div > h2,
-
-/* gallery */
-h3.gallery-header,
+.TruncatedText.tag-description,
 .TruncatedText.gallery-card__description,
-
-/* studio */
-.studio-details .logo,
-.studio-details > div > h2,
-.studio-card__details,
+.TruncatedText.image-card__description,
+.TruncatedText.scene-card__description,
+.tag-name,
+.detail-item-value.description,
 .studio-parent-studios,
-
-/* tag */
-.logo-container > .logo,
-.logo-container > h2,
-.TruncatedText.tag-description,
-.tag-parent-tags
-
+.detail-item-value,
+.studio-name,
+.stats-element,
+.queue-scene-details
 {
 filter: blur(2px);
 }
 
-/* === UNBLUR ON HOVER === */
-
-/* common */
-.thumbnail-section:hover *,
-.card:hover .card-section-title,
-
-/* scene */
-.card:hover .scene-studio-overlay,
-.video-js:hover .vjs-poster,
-video:hover,
-.scene-header:hover > h3,
-div:hover > .scene-header,
-.studio-logo:hover,
-.scene-cover:hover,
-.image-thumbnail:hover,
-.scene-card-preview:hover,
-.scrubber-item:hover,
-.scene-image:hover,
-.TruncatedText.scene-card__description:hover,
-
-/* image */
-.image-image:hover,
-div:hover > .image-header,
-.gallery-image:hover,
-
-/* group */
-.group-images:hover,
-.group-details > div > h2:hover,
+/* Only the image gets blurred */
+.tag-card img,
+.scene-card img,
+.image-card img,
+.gallery-card img,
+.thumbnail-container img,
+.gallery-cover img,
+.group-card img,
+.performer-card img,
+.studio-card img,
+.scene-cover,
+.detail-header-image,
+.scene-player-container {
+    display: block;
+    filter: blur(30px);
+    transition: filter 0.25s ease;
+}
 
-/* gallery */
-div:hover > .gallery-header,
-table > tbody > tr > td:hover > a > img.w-100,
+/* Hover unblurs */
+.tag-card:hover img,
+.scene-card:hover img,
+.image-card:hover img,
+.gallery-card:hover img,
+.thumbnail-container:hover img,
+.gallery-cover:hover img,
+.group-card:hover img,
+.performer-card:hover img,
+.studio-card:hover img,
+.stats-element:hover,
+.card-section-title:hover,
+.TruncatedText.tag-description:hover,
 .TruncatedText.gallery-card__description:hover,
-
-/* performer */
-img.performer:hover,
-
-/* studio */ 
-.studio-details .logo:hover,
-.studio-details:hover > div > h2,
-.studio-card__details:hover,
+.TruncatedText.image-card__description:hover,
+.TruncatedText.scene-card__description:hover,
+.tag-name:hover,
+.detail-item-value.description:hover,
 .studio-parent-studios:hover,
-
-
-/* tag */
-.logo-container > .logo:hover,
-.logo-container:hover > h2,
-.TruncatedText.tag-description:hover,
-.tag-parent-tags:hover
-
-{
-filter: blur(0px);
-}
+.detail-item-value:hover,
+.studio-name:hover,
+.scene-cover:hover,
+.queue-scene-details:hover,
+.detail-header-image:hover,
+.scene-player-container:hover {
+    filter: blur(0);
+}

plugins/SFWSwitch/sfw.js

@@ -1,3 +1,6 @@
+let sfw_mediaObserver = null;
+let sfw_playListener = null;
+
 function sfw_mode() {
     const stash_css = sfwswitch_findstashcss();
     const button = document.getElementById("plugin_sfw");
@@ -6,10 +9,14 @@ function sfw_mode() {
 
     const sfwState = localStorage.getItem("sfw_mode") === "true";
 
-    // Apply saved state to the stylesheet
     stash_css.disabled = !sfwState;
 
-    // Update button color
+    if (sfwState) {
+        sfw_mute_all_media();
+    } else {
+        sfw_unmute_all_media();
+    }
+
     button.style.color = sfwState ? "#5cff00" : "#f5f8fa";
 }
 
@@ -45,22 +52,95 @@ function sfwswitch_createbutton() {
     setTimeout(() => clearInterval(intervalId), 10000);
 }
 
+function sfw_forceMute(media) {
+    media.muted = true;
+    media.defaultMuted = true;
+    media.volume = 0;
+}
+
+function sfw_mute_all_media() {
+
+    // Mute existing media
+    document.querySelectorAll("audio, video").forEach(sfw_forceMute);
+
+    // Mute media when it starts playing
+    if (!sfw_playListener) {
+        sfw_playListener = function(e) {
+            if (e.target.tagName === "VIDEO" || e.target.tagName === "AUDIO") {
+                sfw_forceMute(e.target);
+            }
+        };
+
+        document.addEventListener("play", sfw_playListener, true);
+    }
+
+    // Watch for new media nodes
+    if (!sfw_mediaObserver) {
+
+        sfw_mediaObserver = new MutationObserver(mutations => {
+            mutations.forEach(mutation => {
+                mutation.addedNodes.forEach(node => {
+
+                    if (node.tagName === "VIDEO" || node.tagName === "AUDIO") {
+                        sfw_forceMute(node);
+                    }
+
+                    if (node.querySelectorAll) {
+                        node.querySelectorAll("video, audio").forEach(sfw_forceMute);
+                    }
+
+                });
+            });
+        });
+
+        sfw_mediaObserver.observe(document.body, {
+            childList: true,
+            subtree: true
+        });
+    }
+}
+
+function sfw_unmute_all_media() {
+
+    document.querySelectorAll("audio, video").forEach(media => {
+        media.muted = false;
+        media.volume = 1;
+    });
+
+    if (sfw_mediaObserver) {
+        sfw_mediaObserver.disconnect();
+        sfw_mediaObserver = null;
+    }
+
+    if (sfw_playListener) {
+        document.removeEventListener("play", sfw_playListener, true);
+        sfw_playListener = null;
+    }
+}
+
 function sfwswitch_switcher() {
     const stash_css = sfwswitch_findstashcss();
     if (!stash_css) {
         console.error("SFW stylesheet not found.");
         return;
     }
 
-    // Toggle stylesheet
     stash_css.disabled = !stash_css.disabled;
 
-    // Save new state to localStorage
-    localStorage.setItem("sfw_mode", !stash_css.disabled);
+    const enabled = !stash_css.disabled;
+
+    localStorage.setItem("sfw_mode", enabled);
+
+    if (enabled) {
+        sfw_mute_all_media();
+    } else {
+        sfw_unmute_all_media();
+    }
 
     const button = document.getElementById("plugin_sfw");
-    button.style.color = stash_css.disabled ? "#f5f8fa" : "#5cff00";
-    console.log(`SFW mode ${stash_css.disabled ? "disabled" : "enabled"}`);
+    button.style.color = enabled ? "#5cff00" : "#f5f8fa";
+
+    console.log(`SFW mode ${enabled ? "enabled" : "disabled"}`);
 }
 
 function sfwswitch_findstashcss() {

plugins/SFWSwitch/sfwswitch.yml

@@ -1,6 +1,6 @@
 name: SFW Switch
-description: Add a button to blur covers and images.
-version: 1.4
+description: A full feature SFW plugin with additional plugin support and audio handling.
+version: 1.5
 url: https://discourse.stashapp.cc/t/sfw-switch/4658
 ui:
   javascript: