diff --git a/plugins/SFWSwitch/additional_plugins.css b/plugins/SFWSwitch/additional_plugins.css index 6ce5d6fb..6b5f40dc 100644 --- a/plugins/SFWSwitch/additional_plugins.css +++ b/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, diff --git a/plugins/SFWSwitch/sfw.css b/plugins/SFWSwitch/sfw.css index bf4f0a8c..6de92410 100644 --- a/plugins/SFWSwitch/sfw.css +++ b/plugins/SFWSwitch/sfw.css @@ -1,134 +1,76 @@ -/* [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, +.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, +.scene-player-container:hover { + filter: blur(0); +} \ No newline at end of file diff --git a/plugins/SFWSwitch/sfw.js b/plugins/SFWSwitch/sfw.js index 2410ade2..cc2637fa 100644 --- a/plugins/SFWSwitch/sfw.js +++ b/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,6 +52,72 @@ 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) { @@ -52,15 +125,22 @@ function sfwswitch_switcher() { 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() { diff --git a/plugins/SFWSwitch/sfwswitch.yml b/plugins/SFWSwitch/sfwswitch.yml index f8d576b1..867fc374 100644 --- a/plugins/SFWSwitch/sfwswitch.yml +++ b/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: