From dda5ac8f0116930085eafa223014fb29391f098e Mon Sep 17 00:00:00 2001 From: programminglaboratorys Date: Fri, 31 May 2024 15:29:07 +0300 Subject: [PATCH 1/2] adding dynamic styling --- index.ts | 50 ++++++++++++------------- style.css | 71 ----------------------------------- style.ts | 108 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 133 insertions(+), 96 deletions(-) delete mode 100644 style.css create mode 100644 style.ts diff --git a/index.ts b/index.ts index 369d7cb..b4b3c64 100644 --- a/index.ts +++ b/index.ts @@ -1,34 +1,22 @@ /* - * Vencord, a modification for Discord's desktop app - * Copyright (c) 2022 Vendicated and contributors - * - * This program is free software: you can redistribute it and/or modify - * it under the terms of the GNU General Public License as published by - * the Free Software Foundation, either version 3 of the License, or - * (at your option) any later version. - * - * This program is distributed in the hope that it will be useful, - * but WITHOUT ANY WARRANTY; without even the implied warranty of - * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the - * GNU General Public License for more details. - * - * You should have received a copy of the GNU General Public License - * along with this program. If not, see . -*/ + * Vencord, a Discord client mod + * Copyright (c) 2024 Vendicated and contributors + * SPDX-License-Identifier: GPL-3.0-or-later + */ import { definePluginSettings } from "@api/Settings"; -import { disableStyle, enableStyle } from "@api/Styles"; import { Devs } from "@utils/constants"; import definePlugin, { OptionType } from "@utils/types"; -import styles from "./style.css?managed"; +import { getStyle } from "./style"; + +let [styles, Classes]: [string, object] = ["", {}]; const settings = definePluginSettings({ hoverToView: { type: OptionType.BOOLEAN, description: "When hovering over a message, show the contents.", default: false, - restartNeeded: false, onChange: () => { console.log(settings.store.hoverToView); updateClassList("hover-to-view", settings.store.hoverToView); @@ -44,30 +32,42 @@ const settings = definePluginSettings({ type: OptionType.BOOLEAN, description: "Blur all messages in streamer mode.", default: false, - restartNeeded: false, onChange: () => { console.log(settings.store.enableForStream); - updateClassList("hide-in-streamer-mode", settings.store.enableForStream); + updateClassList( + "hide-in-streamer-mode", + settings.store.enableForStream + ); }, }, }); export default definePlugin({ name: "Do Not Leak!", - description: "Hide all message contents and attachments when you're streaming or sharing your screen.", + description: + "Hide all message contents and attachments when you're streaming or sharing your screen.", authors: [Devs.Perny], settings, start() { + [styles, Classes] = getStyle(); + + const style = document.createElement("style"); + style.setAttribute("id", "vc-dont-leak-style"); + style.innerHTML = styles; + document.head.appendChild(style); + document.addEventListener("keyup", keyUpHandler); document.addEventListener("keydown", keyDownHandler); updateClassList("hover-to-view", settings.store.hoverToView); - updateClassList("hide-in-streamer-mode", settings.store.enableForStream); - enableStyle(styles); + updateClassList( + "hide-in-streamer-mode", + settings.store.enableForStream + ); }, stop() { document.removeEventListener("keyup", keyUpHandler); document.removeEventListener("keydown", keyDownHandler); - disableStyle(styles); + document.getElementById("vc-dont-leak-style")?.remove(); }, }); diff --git a/style.css b/style.css deleted file mode 100644 index 0c72ad7..0000000 --- a/style.css +++ /dev/null @@ -1,71 +0,0 @@ -body:has( - div.sidebar_e031be - > section - div.wrapper_e832ee - div.actionButtons__85e3c - > button:nth-child(2).buttonActive_ae686f - ) - .messageContent_abea64 { - filter: blur(12px); -} - -body:has( - div.sidebar_e031be - > section - div.wrapper_e832ee - div.actionButtons__85e3c - > button:nth-child(2).buttonActive_ae686f - ) - .visualMediaItemContainer__582ad { - filter: blur(50px) brightness(0.1); -} - -body:has( - div.sidebar_e031be - > section - div.wrapper_e832ee - div.actionButtons__85e3c - > button:nth-child(2).buttonActive_ae686f - ) - .embedWrapper__47b23 { - filter: blur(50px); -} - -body.vc-dnl-hide-in-streamer-mode:has(.notice__5fd4c.colorStreamerMode_cb7f84) - .visualMediaItemContainer__582ad { - filter: blur(50px) brightness(0.1); -} - -body.vc-dnl-hide-in-streamer-mode:has(.notice__5fd4c.colorStreamerMode_cb7f84) - .messageContent_abea64 { - filter: blur(12px); -} - -body.vc-dnl-hide-in-streamer-mode:has(.notice__5fd4c.colorStreamerMode_cb7f84) - .embedWrapper__47b23 { - filter: blur(50px); -} - -body.vc-dnl-show-messages .visualMediaItemContainer__582ad { - filter: blur(0px) brightness(1) !important; -} - -body.vc-dnl-show-messages .messageContent_abea64 { - filter: blur(0px) !important; -} - -body.vc-dnl-show-messages .embedWrapper__47b23 { - filter: blur(0px) !important; -} - -body.vc-dnl-hover-to-view .messageContent_abea64:hover { - filter: blur(0px) brightness(1) !important; -} - -body.vc-dnl-hover-to-view .embedWrapper__47b23:hover { - filter: blur(0px) brightness(1) !important; -} - -body.vc-dnl-hover-to-view .visualMediaItemContainer__582ad:hover { - filter: blur(0px) brightness(1) !important; -} diff --git a/style.ts b/style.ts new file mode 100644 index 0000000..72e1f03 --- /dev/null +++ b/style.ts @@ -0,0 +1,108 @@ +/* + * Vencord, a Discord client mod + * Copyright (c) 2024 Vendicated and contributors + * SPDX-License-Identifier: GPL-3.0-or-later + */ + +import { findByProps } from "@webpack"; + +const CssFormatCode: string = `body:has( + div.{sidebar} + > section + div.{wrapper} + div.{actionButtons} + > button:nth-child(2).{buttonActive} +) +.{messageContent} { +filter: blur(12px); +} + +body:has( + div.{sidebar} + > section + div.{wrapper} + div.{actionButtons} + > button:nth-child(2).{buttonActive} +) +.{visualMediaItemContainer} { +filter: blur(50px) brightness(0.1); +} + +body:has( + div.{sidebar} + > section + div.{wrapper} + div.{actionButtons} + > button:nth-child(2).{buttonActive} +) +.{embedWrapper} { +filter: blur(50px); +} + +body.vc-dnl-hide-in-streamer-mode:has(.{notice}.{colorStreamerMode}) +.{visualMediaItemContainer} { +filter: blur(50px) brightness(0.1); +} + +body.vc-dnl-hide-in-streamer-mode:has(.{notice}.{colorStreamerMode}) +.{messageContent} { +filter: blur(12px); +} + +body.vc-dnl-hide-in-streamer-mode:has(.{notice}.{colorStreamerMode}) +.{embedWrapper} { +filter: blur(50px); +} + +body.vc-dnl-show-messages .{visualMediaItemContainer} { +filter: blur(0px) brightness(1) !important; +} + +body.vc-dnl-show-messages .{messageContent} { +filter: blur(0px) !important; +} + +body.vc-dnl-show-messages .{embedWrapper} { +filter: blur(0px) !important; +} + +body.vc-dnl-hover-to-view .{messageContent}:hover { +filter: blur(0px) brightness(1) !important; +} + +body.vc-dnl-hover-to-view .{embedWrapper}:hover { +filter: blur(0px) brightness(1) !important; +} + +body.vc-dnl-hover-to-view .{visualMediaItemContainer}:hover { +filter: blur(0px) brightness(1) !important; +}`; + +/* +[ + "sidebar", + "wrapper", + "actionButtons", + "buttonActive", + "messageContent", + "visualMediaItemContainer", + "embedWrapper", + "notice", + "colorStreamerMode", +] +*/ + +export function getStyle(): [string, object] { + const t = findByProps("messageEditorCompact"); // ["messageContent","wrapper"] + const v = findByProps("embedWrapper"); + const u = findByProps("visualMediaItemContainer"); + const l = findByProps("colorStreamerMode", "notice"); + const o = findByProps("actionButtons", "buttonActive", "wrapper"); + const f = findByProps("sidebar", "panels"); + const Classes = Object.assign({}, o, l, u, v, t, f); + let CssCode = CssFormatCode; + for (const className in Classes) { + CssCode = CssCode.replaceAll(`{${className}}`, Classes[className]); + } + return [CssCode, Classes]; +} From 82155b9e160d62e036dfd18716179c99b6dce026 Mon Sep 17 00:00:00 2001 From: programminglaboratorys Date: Fri, 31 May 2024 15:49:17 +0300 Subject: [PATCH 2/2] better veriable naming --- style.ts | 32 ++++++++++++++++++++------------ 1 file changed, 20 insertions(+), 12 deletions(-) diff --git a/style.ts b/style.ts index 72e1f03..16da188 100644 --- a/style.ts +++ b/style.ts @@ -93,16 +93,24 @@ filter: blur(0px) brightness(1) !important; */ export function getStyle(): [string, object] { - const t = findByProps("messageEditorCompact"); // ["messageContent","wrapper"] - const v = findByProps("embedWrapper"); - const u = findByProps("visualMediaItemContainer"); - const l = findByProps("colorStreamerMode", "notice"); - const o = findByProps("actionButtons", "buttonActive", "wrapper"); - const f = findByProps("sidebar", "panels"); - const Classes = Object.assign({}, o, l, u, v, t, f); - let CssCode = CssFormatCode; - for (const className in Classes) { - CssCode = CssCode.replaceAll(`{${className}}`, Classes[className]); - } - return [CssCode, Classes]; + const messageContent = findByProps("messageEditorCompact"); // ["messageContent","wrapper"] + const embedWrapper = findByProps("embedWrapper"); + const mediaContainer = findByProps("visualMediaItemContainer"); + const notice = findByProps("colorStreamerMode", "notice"); + const actionBar = findByProps("actionButtons", "buttonActive", "wrapper"); + const sidebar = findByProps("sidebar", "panels"); + const Classes = Object.assign( + {}, + actionBar, + notice, + mediaContainer, + embedWrapper, + messageContent, + sidebar + ); + let CssCode = CssFormatCode; + for (const className in Classes) { + CssCode = CssCode.replaceAll(`{${className}}`, Classes[className]); + } + return [CssCode, Classes]; }