Add SFW Switch plugin (#641)

plugins/SFWSwitch/README.md

@@ -0,0 +1,20 @@
+# SFW Switch
+
+https://discourse.stashapp.cc/t/sfw-switch/4657
+
+## Features
+
+- Adds a SFW toggle button to the menu bar.
+  - Green = Blur enabled
+  - Gray = Blur disabled
+- Toggling the button blurs cover images and other content.
+- Hovering over an image temporarily removes the blur.
+
+## Screenshots
+
+![image](https://user-images.githubusercontent.com/23707269/206918500-0676e4ea-dcfb-4370-b35f-3f6887b76b54.png)
+
+## Credit
+Original plugin by Belleyy [here](https://github.com/Belleyy/CommunityScripts/tree/pluginUI_SFWSwitch/plugins/SFW%20Switch).  
+
+The CSS code used is provided by fl0w#9497 [here](https://discourse.stashapp.cc/t/custom-css-snippets/4043#p-8143-blur-nsfw-images-and-unblur-on-mouse-over-41).

plugins/SFWSwitch/sfw.css

@@ -0,0 +1,114 @@
+/* [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,
+
+/* 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);
+}
+
+/* === LESS BLUR === */
+/* common */
+.card-section-title,
+
+/* scene */
+.scene-studio-overlay,
+.scene-header > h3,
+h3.scene-header,
+.studio-logo,
+.image-thumbnail,
+
+/* image */
+h3.image-header,
+
+/* group */
+.group-details > div > h2,
+
+/* gallery */
+h3.gallery-header,
+
+/* studio */
+.studio-details .logo,
+.studio-details > div > h2,
+
+/* tag */
+.logo-container > .logo,
+.logo-container > h2
+
+{
+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,
+
+/* image */
+.image-image:hover,
+div:hover > .image-header,
+.gallery-image:hover,
+
+/* group */
+.group-images:hover,
+.group-details > div > h2:hover,
+
+/* gallery */
+div:hover > .gallery-header,
+table > tbody > tr > td:hover > a > img.w-100,
+
+/* performer */
+img.performer:hover,
+
+/* studio */ 
+.studio-details .logo:hover,
+.studio-details:hover > div > h2,
+
+/* tag */
+.logo-container > .logo:hover,
+.logo-container:hover > h2
+{
+filter: blur(0px);
+}

plugins/SFWSwitch/sfw.js

@@ -0,0 +1,94 @@
+function sfw_mode() {
+    const stash_css = sfwswitch_findstashcss();
+    const button = document.getElementById("plugin_sfw");
+
+    if (stash_css && stash_css.disabled) {
+        // SFW mode is disabled
+        button.style.color = "#f5f8fa"; // Default color
+    } else {
+        // SFW mode is enabled
+        button.style.color = "#5cff00"; // Active color
+    }
+}
+
+function sfwswitch_createbutton() {
+    const buttonId = "plugin_sfw";
+
+    // Check if the button already exists
+    if (document.getElementById(buttonId)) {
+        return;
+    }
+
+    // Create the button element
+    const buttonContainer = document.createElement("a");
+    buttonContainer.className = "mr-2";
+    buttonContainer.innerHTML = `
+        <button id="${buttonId}" type="button" class="minimal d-flex align-items-center h-100 btn btn-primary" title="Turn SFW Mode">
+            <svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" class="svg-inline--fa fa-cog fa-w-16 fa-icon undefined" viewBox="1.5 1.5 13 13">
+                <path d="m7.646 9.354-3.792 3.792a.5.5 0 0 0 .353.854h7.586a.5.5 0 0 0 .354-.854L8.354 9.354a.5.5 0 0 0-.708 0z"></path>
+                <path d="M11.414 11H14.5a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.5-.5h-13a.5.5 0 0 0-.5.5v7a.5.5 0 0 0 .5.5h3.086l-1 1H1.5A1.5 1.5 0 0 1 0 10.5v-7A1.5 1.5 0 0 1 1.5 2h13A1.5 1.5 0 0 1 16 3.5v7a1.5 1.5 0 0 1-1.5 1.5h-2.086l-1-1z"></path>
+            </svg>
+        </button>
+    `;
+
+    // Poll for the navbar-buttons container
+    const intervalId = setInterval(() => {
+        const navbarButtons = document.querySelector(".navbar-buttons");
+        if (navbarButtons) {
+            clearInterval(intervalId); // Stop polling
+            navbarButtons.insertBefore(buttonContainer, navbarButtons.childNodes[0]);
+
+            // Add click event listener
+            document.getElementById(buttonId).addEventListener("click", sfwswitch_switcher);
+
+            // Initialize the button state
+            sfw_mode();
+        }
+    }, 100); // Check every 100ms
+
+    // Stop polling after a timeout to avoid infinite loops
+    setTimeout(() => clearInterval(intervalId), 10000); // 10 seconds max
+}
+
+function sfwswitch_switcher() {
+    const stash_css = sfwswitch_findstashcss();
+    if (!stash_css) {
+        console.error("SFW stylesheet not found.");
+        return;
+    }
+
+    stash_css.disabled = !stash_css.disabled;
+
+    const button = document.getElementById("plugin_sfw");
+    if (stash_css.disabled) {
+        console.log("SFW mode disabled");
+        button.style.color = "#f5f8fa"; // Default color
+    } else {
+        console.log("SFW mode enabled");
+        button.style.color = "#5cff00"; // Active color
+    }
+}
+
+function sfwswitch_findstashcss() {
+    for (let i = 0; i < document.styleSheets.length; i++) {
+        const stylesheet = document.styleSheets[i];
+        if (stylesheet.href && stylesheet.href.includes("/plugin/sfw_switch/css")) {
+            return stylesheet;
+        }
+    }
+    return null; // Return null if no matching stylesheet is found
+}
+
+function waitForElementClass(elementId, callBack, time) {
+    time = (typeof time !== 'undefined') ? time : 100;
+    window.setTimeout(function () {
+        var element = document.getElementsByClassName(elementId);
+        if (element.length > 0) {
+            callBack(elementId, element);
+        } else {
+            waitForElementClass(elementId, callBack);
+        }
+    }, time);
+}
+
+sfwswitch_createbutton();

plugins/SFWSwitch/sfwswitch.yml

@@ -0,0 +1,9 @@
+name: SFW Switch
+description: Add a button to blur covers and images.
+url: https://discourse.stashapp.cc/t/sfw-switch/4657
+version: 1.1
+ui:
+  javascript:
+  - sfw.js
+  css:
+  - sfw.css