mirror of
https://github.com/Vendicated/Vencord
synced 2024-09-13 04:29:24 -04:00
Adding dynamic styling
Mirror from 3rd party plugin
This commit is contained in:
Perny
parent
03a1f8e462
commit
c33a7554c0
3 changed files with 141 additions and 96 deletions
|
|
@ -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 <https://www.gnu.org/licenses/>.
|
||||
*/
|
||||
* 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();
|
||||
},
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
116
src/plugins/doNotLeak/style.ts
Normal file
116
src/plugins/doNotLeak/style.ts
Normal file
|
|
@ -0,0 +1,116 @@
|
|||
/*
|
||||
* 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 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];
|
||||
}
|
||||
Loading…
Reference in a new issue