Notification API (#467)
Co-authored-by: Ven <vendicated@riseup.net> Co-authored-by: afn <hey@afn.lol> Co-authored-by: afn <afnzmn@gmail.com>
This commit is contained in:
parent
6114bc6b16
commit
1d995e58f5
|
@ -82,7 +82,6 @@
|
||||||
"no-constant-condition": ["error", { "checkLoops": false }],
|
"no-constant-condition": ["error", { "checkLoops": false }],
|
||||||
"no-duplicate-imports": "error",
|
"no-duplicate-imports": "error",
|
||||||
"no-extra-semi": "error",
|
"no-extra-semi": "error",
|
||||||
"consistent-return": ["warn", { "treatUndefinedAsUnspecified": true }],
|
|
||||||
"dot-notation": "error",
|
"dot-notation": "error",
|
||||||
"no-useless-escape": [
|
"no-useless-escape": [
|
||||||
"error",
|
"error",
|
||||||
|
|
92
src/api/Notifications/NotificationComponent.tsx
Normal file
92
src/api/Notifications/NotificationComponent.tsx
Normal file
|
@ -0,0 +1,92 @@
|
||||||
|
/*
|
||||||
|
* Vencord, a modification for Discord's desktop app
|
||||||
|
* Copyright (c) 2023 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/>.
|
||||||
|
*/
|
||||||
|
|
||||||
|
import "./styles.css";
|
||||||
|
|
||||||
|
import { useSettings } from "@api/settings";
|
||||||
|
import ErrorBoundary from "@components/ErrorBoundary";
|
||||||
|
import { Forms, React, useEffect, useMemo, useState, useStateFromStores, WindowStore } from "@webpack/common";
|
||||||
|
|
||||||
|
import { NotificationData } from "./Notifications";
|
||||||
|
|
||||||
|
export default ErrorBoundary.wrap(function NotificationComponent({
|
||||||
|
title,
|
||||||
|
body,
|
||||||
|
richBody,
|
||||||
|
color,
|
||||||
|
icon,
|
||||||
|
onClick,
|
||||||
|
onClose,
|
||||||
|
image
|
||||||
|
}: NotificationData) {
|
||||||
|
const { timeout, position } = useSettings(["notifications.timeout", "notifications.position"]).notifications;
|
||||||
|
const hasFocus = useStateFromStores([WindowStore], () => WindowStore.isFocused());
|
||||||
|
|
||||||
|
const [isHover, setIsHover] = useState(false);
|
||||||
|
const [elapsed, setElapsed] = useState(0);
|
||||||
|
|
||||||
|
const start = useMemo(() => Date.now(), [timeout, isHover, hasFocus]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (isHover || !hasFocus || timeout === 0) return void setElapsed(0);
|
||||||
|
|
||||||
|
const intervalId = setInterval(() => {
|
||||||
|
const elapsed = Date.now() - start;
|
||||||
|
if (elapsed >= timeout)
|
||||||
|
onClose!();
|
||||||
|
else
|
||||||
|
setElapsed(elapsed);
|
||||||
|
}, 10);
|
||||||
|
|
||||||
|
return () => clearInterval(intervalId);
|
||||||
|
}, [timeout, isHover, hasFocus]);
|
||||||
|
|
||||||
|
const timeoutProgress = elapsed / timeout;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<button
|
||||||
|
className="vc-notification-root"
|
||||||
|
style={position === "bottom-right" ? { bottom: "1rem" } : { top: "3rem" }}
|
||||||
|
onClick={onClick}
|
||||||
|
onContextMenu={e => {
|
||||||
|
e.preventDefault();
|
||||||
|
e.stopPropagation();
|
||||||
|
onClose!();
|
||||||
|
}}
|
||||||
|
onMouseEnter={() => setIsHover(true)}
|
||||||
|
onMouseLeave={() => setIsHover(false)}
|
||||||
|
>
|
||||||
|
<div className="vc-notification">
|
||||||
|
{icon && <img className="vc-notification-icon" src={icon} alt="" />}
|
||||||
|
<div className="vc-notification-content">
|
||||||
|
<Forms.FormTitle tag="h2">{title}</Forms.FormTitle>
|
||||||
|
<div>
|
||||||
|
{richBody ?? <p className="vc-notification-p">{body}</p>}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{image && <img className="vc-notification-img" src={image} alt="" />}
|
||||||
|
{timeout !== 0 && (
|
||||||
|
<div
|
||||||
|
className="vc-notification-progressbar"
|
||||||
|
style={{ width: `${(1 - timeoutProgress) * 100}%`, backgroundColor: color || "var(--brand-experiment)" }}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</button>
|
||||||
|
);
|
||||||
|
});
|
92
src/api/Notifications/Notifications.tsx
Normal file
92
src/api/Notifications/Notifications.tsx
Normal file
|
@ -0,0 +1,92 @@
|
||||||
|
/*
|
||||||
|
* Vencord, a modification for Discord's desktop app
|
||||||
|
* Copyright (c) 2023 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/>.
|
||||||
|
*/
|
||||||
|
|
||||||
|
import { Settings } from "@api/settings";
|
||||||
|
import { Queue } from "@utils/Queue";
|
||||||
|
import { ReactDOM } from "@webpack/common";
|
||||||
|
import type { ReactNode } from "react";
|
||||||
|
import type { Root } from "react-dom/client";
|
||||||
|
|
||||||
|
import NotificationComponent from "./NotificationComponent";
|
||||||
|
|
||||||
|
const NotificationQueue = new Queue();
|
||||||
|
|
||||||
|
let reactRoot: Root;
|
||||||
|
let id = 42;
|
||||||
|
|
||||||
|
function getRoot() {
|
||||||
|
if (!reactRoot) {
|
||||||
|
const container = document.createElement("div");
|
||||||
|
container.id = "vc-notification-container";
|
||||||
|
document.body.append(container);
|
||||||
|
reactRoot = ReactDOM.createRoot(container);
|
||||||
|
}
|
||||||
|
return reactRoot;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface NotificationData {
|
||||||
|
title: string;
|
||||||
|
body: string;
|
||||||
|
/**
|
||||||
|
* Same as body but can be a custom component.
|
||||||
|
* Will be used over body if present.
|
||||||
|
* Not supported on desktop notifications, those will fall back to body */
|
||||||
|
richBody?: ReactNode;
|
||||||
|
/** Small icon. This is for things like profile pictures and should be square */
|
||||||
|
icon?: string;
|
||||||
|
/** Large image. Optimally, this should be around 16x9 but it doesn't matter much. Desktop Notifications might not support this */
|
||||||
|
image?: string;
|
||||||
|
onClick?(): void;
|
||||||
|
onClose?(): void;
|
||||||
|
color?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
function _showNotification(notification: NotificationData, id: number) {
|
||||||
|
const root = getRoot();
|
||||||
|
return new Promise<void>(resolve => {
|
||||||
|
root.render(
|
||||||
|
<NotificationComponent key={id} {...notification} onClose={() => {
|
||||||
|
notification.onClose?.();
|
||||||
|
root.render(null);
|
||||||
|
resolve();
|
||||||
|
}} />,
|
||||||
|
);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function shouldBeNative() {
|
||||||
|
const { useNative } = Settings.notifications;
|
||||||
|
if (useNative === "always") return true;
|
||||||
|
if (useNative === "not-focused") return !document.hasFocus();
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function showNotification(data: NotificationData) {
|
||||||
|
if (shouldBeNative()) {
|
||||||
|
const { title, body, icon, image, onClick = null, onClose = null } = data;
|
||||||
|
const n = new Notification(title, {
|
||||||
|
body,
|
||||||
|
icon,
|
||||||
|
image
|
||||||
|
});
|
||||||
|
n.onclick = onClick;
|
||||||
|
n.onclose = onClose;
|
||||||
|
} else {
|
||||||
|
NotificationQueue.push(() => _showNotification(data, id++));
|
||||||
|
}
|
||||||
|
}
|
19
src/api/Notifications/index.ts
Normal file
19
src/api/Notifications/index.ts
Normal file
|
@ -0,0 +1,19 @@
|
||||||
|
/*
|
||||||
|
* Vencord, a modification for Discord's desktop app
|
||||||
|
* Copyright (c) 2023 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/>.
|
||||||
|
*/
|
||||||
|
|
||||||
|
export * from "./Notifications";
|
49
src/api/Notifications/styles.css
Normal file
49
src/api/Notifications/styles.css
Normal file
|
@ -0,0 +1,49 @@
|
||||||
|
.vc-notification-root {
|
||||||
|
/* clear default button styles */
|
||||||
|
all: unset;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
width: 25vw;
|
||||||
|
min-height: 10vh;
|
||||||
|
color: var(--text-normal);
|
||||||
|
background-color: var(--background-secondary-alt);
|
||||||
|
position: absolute;
|
||||||
|
z-index: 2147483647;
|
||||||
|
right: 1rem;
|
||||||
|
border-radius: 6px;
|
||||||
|
overflow: hidden;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vc-notification {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
padding: 1.25rem;
|
||||||
|
gap: 1.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vc-notification-icon {
|
||||||
|
height: 4rem;
|
||||||
|
width: 4rem;
|
||||||
|
border-radius: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Discord adding 3km margin to generic tags */
|
||||||
|
.vc-notification h2 {
|
||||||
|
margin: unset;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vc-notification-progressbar {
|
||||||
|
height: 0.25rem;
|
||||||
|
border-radius: 5px;
|
||||||
|
margin-top: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vc-notification-p {
|
||||||
|
margin: 0.5rem 0 0;
|
||||||
|
line-height: 140%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vc-notification-img {
|
||||||
|
width: 100%;
|
||||||
|
}
|
|
@ -25,6 +25,7 @@ import * as $MessageDecorations from "./MessageDecorations";
|
||||||
import * as $MessageEventsAPI from "./MessageEvents";
|
import * as $MessageEventsAPI from "./MessageEvents";
|
||||||
import * as $MessagePopover from "./MessagePopover";
|
import * as $MessagePopover from "./MessagePopover";
|
||||||
import * as $Notices from "./Notices";
|
import * as $Notices from "./Notices";
|
||||||
|
import * as $Notifications from "./Notifications";
|
||||||
import * as $ServerList from "./ServerList";
|
import * as $ServerList from "./ServerList";
|
||||||
import * as $Styles from "./Styles";
|
import * as $Styles from "./Styles";
|
||||||
|
|
||||||
|
@ -88,3 +89,7 @@ export const MemberListDecorators = $MemberListDecorators;
|
||||||
* a
|
* a
|
||||||
*/
|
*/
|
||||||
export const Styles = $Styles;
|
export const Styles = $Styles;
|
||||||
|
/**
|
||||||
|
* An API allowing you to display notifications
|
||||||
|
*/
|
||||||
|
export const Notifications = $Notifications;
|
||||||
|
|
|
@ -40,6 +40,12 @@ export interface Settings {
|
||||||
[setting: string]: any;
|
[setting: string]: any;
|
||||||
};
|
};
|
||||||
};
|
};
|
||||||
|
|
||||||
|
notifications: {
|
||||||
|
timeout: number;
|
||||||
|
position: "top-right" | "bottom-right";
|
||||||
|
useNative: "always" | "never" | "not-focused";
|
||||||
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
const DefaultSettings: Settings = {
|
const DefaultSettings: Settings = {
|
||||||
|
@ -51,7 +57,13 @@ const DefaultSettings: Settings = {
|
||||||
frameless: false,
|
frameless: false,
|
||||||
transparent: false,
|
transparent: false,
|
||||||
winCtrlQ: false,
|
winCtrlQ: false,
|
||||||
plugins: {}
|
plugins: {},
|
||||||
|
|
||||||
|
notifications: {
|
||||||
|
timeout: 5000,
|
||||||
|
position: "bottom-right",
|
||||||
|
useNative: "not-focused"
|
||||||
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
try {
|
try {
|
||||||
|
|
|
@ -22,22 +22,63 @@ import { classNameFactory } from "@api/Styles";
|
||||||
import DonateButton from "@components/DonateButton";
|
import DonateButton from "@components/DonateButton";
|
||||||
import ErrorBoundary from "@components/ErrorBoundary";
|
import ErrorBoundary from "@components/ErrorBoundary";
|
||||||
import IpcEvents from "@utils/IpcEvents";
|
import IpcEvents from "@utils/IpcEvents";
|
||||||
import { useAwaiter } from "@utils/misc";
|
import { Margins } from "@utils/margins";
|
||||||
import { Button, Card, Forms, Margins, React, Switch } from "@webpack/common";
|
import { identity, useAwaiter } from "@utils/misc";
|
||||||
|
import { Button, Card, Forms, React, Select, Slider, Switch } from "@webpack/common";
|
||||||
|
|
||||||
const cl = classNameFactory("vc-settings-");
|
const cl = classNameFactory("vc-settings-");
|
||||||
|
|
||||||
const DEFAULT_DONATE_IMAGE = "https://cdn.discordapp.com/emojis/1026533090627174460.png";
|
const DEFAULT_DONATE_IMAGE = "https://cdn.discordapp.com/emojis/1026533090627174460.png";
|
||||||
const SHIGGY_DONATE_IMAGE = "https://media.discordapp.net/stickers/1039992459209490513.png";
|
const SHIGGY_DONATE_IMAGE = "https://media.discordapp.net/stickers/1039992459209490513.png";
|
||||||
|
|
||||||
|
type KeysOfType<Object, Type> = {
|
||||||
|
[K in keyof Object]: Object[K] extends Type ? K : never;
|
||||||
|
}[keyof Object];
|
||||||
|
|
||||||
function VencordSettings() {
|
function VencordSettings() {
|
||||||
const [settingsDir, , settingsDirPending] = useAwaiter(() => VencordNative.ipc.invoke<string>(IpcEvents.GET_SETTINGS_DIR), {
|
const [settingsDir, , settingsDirPending] = useAwaiter(() => VencordNative.ipc.invoke<string>(IpcEvents.GET_SETTINGS_DIR), {
|
||||||
fallbackValue: "Loading..."
|
fallbackValue: "Loading..."
|
||||||
});
|
});
|
||||||
const settings = useSettings();
|
const settings = useSettings();
|
||||||
|
const notifSettings = settings.notifications;
|
||||||
|
|
||||||
const donateImage = React.useMemo(() => Math.random() > 0.5 ? DEFAULT_DONATE_IMAGE : SHIGGY_DONATE_IMAGE, []);
|
const donateImage = React.useMemo(() => Math.random() > 0.5 ? DEFAULT_DONATE_IMAGE : SHIGGY_DONATE_IMAGE, []);
|
||||||
|
|
||||||
|
const isWindows = navigator.platform.toLowerCase().startsWith("win");
|
||||||
|
|
||||||
|
const Switches: Array<false | {
|
||||||
|
key: KeysOfType<typeof settings, boolean>;
|
||||||
|
title: string;
|
||||||
|
note: string;
|
||||||
|
}> =
|
||||||
|
[
|
||||||
|
{
|
||||||
|
key: "useQuickCss",
|
||||||
|
title: "Enable Custom CSS",
|
||||||
|
note: "Loads your Custom CSS"
|
||||||
|
},
|
||||||
|
!IS_WEB && {
|
||||||
|
key: "enableReactDevtools",
|
||||||
|
title: "Enable React Developer Tools",
|
||||||
|
note: "Requires a full restart"
|
||||||
|
},
|
||||||
|
!IS_WEB && !isWindows && {
|
||||||
|
key: "frameless",
|
||||||
|
title: "Disable the window frame",
|
||||||
|
note: "Requires a full restart"
|
||||||
|
},
|
||||||
|
!IS_WEB && {
|
||||||
|
key: "transparent",
|
||||||
|
title: "Enable window transparency",
|
||||||
|
note: "Requires a full restart"
|
||||||
|
},
|
||||||
|
!IS_WEB && isWindows && {
|
||||||
|
key: "winCtrlQ",
|
||||||
|
title: "Register Ctrl+Q as shortcut to close Discord (Alternative to Alt+F4)",
|
||||||
|
note: "Requires a full restart"
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<React.Fragment>
|
<React.Fragment>
|
||||||
<DonateCard image={donateImage} />
|
<DonateCard image={donateImage} />
|
||||||
|
@ -82,52 +123,70 @@ function VencordSettings() {
|
||||||
|
|
||||||
<Forms.FormDivider />
|
<Forms.FormDivider />
|
||||||
|
|
||||||
<Forms.FormSection className={Margins.marginTop16} title="Settings">
|
<Forms.FormSection className={Margins.top16} title="Settings" tag="h5">
|
||||||
<Forms.FormText className={Margins.marginBottom20}>
|
<Forms.FormText className={Margins.bottom20}>
|
||||||
Hint: You can change the position of this settings section in the settings of the "Settings" plugin!
|
Hint: You can change the position of this settings section in the settings of the "Settings" plugin!
|
||||||
</Forms.FormText>
|
</Forms.FormText>
|
||||||
<Switch
|
{Switches.map(s => s && (
|
||||||
value={settings.useQuickCss}
|
<Switch
|
||||||
onChange={(v: boolean) => settings.useQuickCss = v}
|
key={s.key}
|
||||||
note="Loads styles from your QuickCSS file">
|
value={settings[s.key]}
|
||||||
Use QuickCSS
|
onChange={v => settings[s.key] = v}
|
||||||
</Switch>
|
note={s.note}
|
||||||
{!IS_WEB && (
|
>
|
||||||
<React.Fragment>
|
{s.title}
|
||||||
<Switch
|
</Switch>
|
||||||
value={settings.enableReactDevtools}
|
))}
|
||||||
onChange={(v: boolean) => settings.enableReactDevtools = v}
|
|
||||||
note="Requires a full restart"
|
|
||||||
>
|
|
||||||
Enable React Developer Tools
|
|
||||||
</Switch>
|
|
||||||
<Switch
|
|
||||||
value={settings.frameless}
|
|
||||||
onChange={(v: boolean) => settings.frameless = v}
|
|
||||||
note="Requires a full restart"
|
|
||||||
>
|
|
||||||
Disable the window frame
|
|
||||||
</Switch>
|
|
||||||
<Switch
|
|
||||||
value={settings.transparent}
|
|
||||||
onChange={(v: boolean) => settings.transparent = v}
|
|
||||||
note="Requires a full restart"
|
|
||||||
>
|
|
||||||
Enable window transparency
|
|
||||||
</Switch>
|
|
||||||
{navigator.platform.toLowerCase().startsWith("win") && (
|
|
||||||
<Switch
|
|
||||||
value={settings.winCtrlQ}
|
|
||||||
onChange={(v: boolean) => settings.winCtrlQ = v}
|
|
||||||
note="Requires a full restart"
|
|
||||||
>
|
|
||||||
Register Ctrl+Q as shortcut to close Discord (Alternative to Alt+F4)
|
|
||||||
</Switch>
|
|
||||||
)}
|
|
||||||
</React.Fragment>
|
|
||||||
)}
|
|
||||||
|
|
||||||
</Forms.FormSection>
|
</Forms.FormSection>
|
||||||
|
|
||||||
|
|
||||||
|
<Forms.FormTitle tag="h5">Notification Style</Forms.FormTitle>
|
||||||
|
<Forms.FormText className={Margins.bottom8}>
|
||||||
|
Some plugins may show you notifications. These come in two styles:
|
||||||
|
<ul>
|
||||||
|
<li><strong>Vencord Notifications</strong>: These are in-app notifications</li>
|
||||||
|
<li><strong>Desktop Notifications</strong>: Native Desktop notifications (like when you get a ping)</li>
|
||||||
|
</ul>
|
||||||
|
</Forms.FormText>
|
||||||
|
<Select
|
||||||
|
placeholder="Notification Style"
|
||||||
|
options={[
|
||||||
|
{ label: "Only use Desktop notifications when Discord is not focused", value: "not-focused", default: true },
|
||||||
|
{ label: "Always use Desktop notifications", value: "always" },
|
||||||
|
{ label: "Always use Vencord notifications", value: "never" },
|
||||||
|
]satisfies Array<{ value: typeof settings["notifications"]["useNative"]; } & Record<string, any>>}
|
||||||
|
closeOnSelect={true}
|
||||||
|
select={v => notifSettings.useNative = v}
|
||||||
|
isSelected={v => v === notifSettings.useNative}
|
||||||
|
serialize={identity}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<Forms.FormTitle tag="h5" className={Margins.top16 + " " + Margins.bottom8}>Notification Position</Forms.FormTitle>
|
||||||
|
<Select
|
||||||
|
isDisabled={notifSettings.useNative === "always"}
|
||||||
|
placeholder="Notification Position"
|
||||||
|
options={[
|
||||||
|
{ label: "Bottom Right", value: "bottom-right", default: true },
|
||||||
|
{ label: "Top Right", value: "top-right" },
|
||||||
|
]satisfies Array<{ value: typeof settings["notifications"]["position"]; } & Record<string, any>>}
|
||||||
|
select={v => notifSettings.position = v}
|
||||||
|
isSelected={v => v === notifSettings.position}
|
||||||
|
serialize={identity}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<Forms.FormTitle tag="h5" className={Margins.top16 + " " + Margins.bottom8}>Notification Timeout</Forms.FormTitle>
|
||||||
|
<Forms.FormText className={Margins.bottom16}>Set to 0s to never automatically time out</Forms.FormText>
|
||||||
|
<Slider
|
||||||
|
disabled={notifSettings.useNative === "always"}
|
||||||
|
markers={[0, 1000, 2500, 5000, 10_000, 20_000]}
|
||||||
|
minValue={0}
|
||||||
|
maxValue={20_000}
|
||||||
|
initialValue={notifSettings.timeout}
|
||||||
|
onValueChange={v => notifSettings.timeout = v}
|
||||||
|
onValueRender={v => (v / 1000).toFixed(2) + "s"}
|
||||||
|
onMarkerRender={v => (v / 1000) + "s"}
|
||||||
|
stickToMarkers={false}
|
||||||
|
/>
|
||||||
</React.Fragment>
|
</React.Fragment>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
3
src/modules.d.ts
vendored
3
src/modules.d.ts
vendored
|
@ -38,7 +38,8 @@ declare module "~fileContent/*" {
|
||||||
export default content;
|
export default content;
|
||||||
}
|
}
|
||||||
|
|
||||||
declare module "*.css" { }
|
declare module "*.css";
|
||||||
|
|
||||||
declare module "*.css?managed" {
|
declare module "*.css?managed" {
|
||||||
const name: string;
|
const name: string;
|
||||||
export default name;
|
export default name;
|
||||||
|
|
|
@ -23,8 +23,8 @@ import { Flex } from "@components/Flex";
|
||||||
import { Link } from "@components/Link";
|
import { Link } from "@components/Link";
|
||||||
import { debounce } from "@utils/debounce";
|
import { debounce } from "@utils/debounce";
|
||||||
import { classes, LazyComponent } from "@utils/misc";
|
import { classes, LazyComponent } from "@utils/misc";
|
||||||
import { filters, find, findByCodeLazy } from "@webpack";
|
import { filters, find } from "@webpack";
|
||||||
import { ContextMenu, FluxDispatcher, Forms, Menu, React, useEffect, useState } from "@webpack/common";
|
import { ContextMenu, FluxDispatcher, Forms, Menu, React, useEffect, useState, useStateFromStores } from "@webpack/common";
|
||||||
|
|
||||||
import { SpotifyStore, Track } from "./SpotifyStore";
|
import { SpotifyStore, Track } from "./SpotifyStore";
|
||||||
|
|
||||||
|
@ -37,14 +37,6 @@ function msToHuman(ms: number) {
|
||||||
return `${m.toString().padStart(2, "0")}:${s.toString().padStart(2, "0")}`;
|
return `${m.toString().padStart(2, "0")}:${s.toString().padStart(2, "0")}`;
|
||||||
}
|
}
|
||||||
|
|
||||||
const useStateFromStores: <T>(
|
|
||||||
stores: typeof SpotifyStore[],
|
|
||||||
mapper: () => T,
|
|
||||||
idk?: null,
|
|
||||||
compare?: (old: T, newer: T) => boolean
|
|
||||||
) => T
|
|
||||||
= findByCodeLazy("useStateFromStores");
|
|
||||||
|
|
||||||
function Svg(path: string, label: string) {
|
function Svg(path: string, label: string) {
|
||||||
return () => (
|
return () => (
|
||||||
<svg
|
<svg
|
||||||
|
|
|
@ -27,7 +27,7 @@ export class Queue {
|
||||||
* @param maxSize The maximum amount of functions that can be queued at once.
|
* @param maxSize The maximum amount of functions that can be queued at once.
|
||||||
* If the queue is full, the oldest function will be removed.
|
* If the queue is full, the oldest function will be removed.
|
||||||
*/
|
*/
|
||||||
constructor(public maxSize = Infinity) { }
|
constructor(public readonly maxSize = Infinity) { }
|
||||||
|
|
||||||
private queue = [] as Array<() => Promisable<unknown>>;
|
private queue = [] as Array<() => Promisable<unknown>>;
|
||||||
|
|
||||||
|
|
|
@ -22,6 +22,7 @@ export * from "./debounce";
|
||||||
export * as Discord from "./discord";
|
export * as Discord from "./discord";
|
||||||
export { default as IpcEvents } from "./IpcEvents";
|
export { default as IpcEvents } from "./IpcEvents";
|
||||||
export { default as Logger } from "./Logger";
|
export { default as Logger } from "./Logger";
|
||||||
|
export * from "./margins";
|
||||||
export * from "./misc";
|
export * from "./misc";
|
||||||
export * as Modals from "./modal";
|
export * as Modals from "./modal";
|
||||||
export * from "./onceDefined";
|
export * from "./onceDefined";
|
||||||
|
|
35
src/utils/margins.ts
Normal file
35
src/utils/margins.ts
Normal file
|
@ -0,0 +1,35 @@
|
||||||
|
/*
|
||||||
|
* Vencord, a modification for Discord's desktop app
|
||||||
|
* Copyright (c) 2023 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/>.
|
||||||
|
*/
|
||||||
|
|
||||||
|
let styleStr = "";
|
||||||
|
|
||||||
|
export const Margins: Record<`${"top" | "bottom" | "left" | "right"}${8 | 16 | 20}`, string> = {} as any;
|
||||||
|
|
||||||
|
for (const dir of ["top", "bottom", "left", "right"] as const) {
|
||||||
|
for (const size of [8, 16, 20] as const) {
|
||||||
|
const cl = `vc-m-${dir}-${size}`;
|
||||||
|
Margins[`${dir}${size}`] = cl;
|
||||||
|
styleStr += `.${cl}{margin-${dir}:${size}px;}`;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
document.addEventListener("DOMContentLoaded", () =>
|
||||||
|
document.head.append(Object.assign(document.createElement("style"), {
|
||||||
|
textContent: styleStr,
|
||||||
|
id: "vencord-margins"
|
||||||
|
})), { once: true });
|
|
@ -200,3 +200,7 @@ export const checkIntersecting = (el: Element) => {
|
||||||
const documentHeight = Math.max(document.documentElement.clientHeight, window.innerHeight);
|
const documentHeight = Math.max(document.documentElement.clientHeight, window.innerHeight);
|
||||||
return !(elementBox.bottom < 0 || elementBox.top - documentHeight >= 0);
|
return !(elementBox.bottom < 0 || elementBox.top - documentHeight >= 0);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
export function identity<T>(value: T): T {
|
||||||
|
return value;
|
||||||
|
}
|
||||||
|
|
|
@ -112,7 +112,6 @@ export async function uploadSettingsBackup(showToast = true): Promise<void> {
|
||||||
|
|
||||||
if (file) {
|
if (file) {
|
||||||
try {
|
try {
|
||||||
console.log(file);
|
|
||||||
await importSettings(new TextDecoder().decode(file.data));
|
await importSettings(new TextDecoder().decode(file.data));
|
||||||
if (showToast) toastSuccess();
|
if (showToast) toastSuccess();
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
|
|
|
@ -49,5 +49,8 @@ export const Slider = waitForComponent<t.Slider>("Slider", filters.byCode("close
|
||||||
export const Flex = waitForComponent<t.Flex>("Flex", ["Justify", "Align", "Wrap"]);
|
export const Flex = waitForComponent<t.Flex>("Flex", ["Justify", "Align", "Wrap"]);
|
||||||
|
|
||||||
export const ButtonWrapperClasses = findByPropsLazy("buttonWrapper", "buttonContent") as Record<string, string>;
|
export const ButtonWrapperClasses = findByPropsLazy("buttonWrapper", "buttonContent") as Record<string, string>;
|
||||||
|
/**
|
||||||
|
* @deprecated Use @utils/margins instead
|
||||||
|
*/
|
||||||
export const Margins: t.Margins = findByPropsLazy("marginTop20");
|
export const Margins: t.Margins = findByPropsLazy("marginTop20");
|
||||||
export const ButtonLooks: t.ButtonLooks = findByPropsLazy("BLANK", "FILLED", "INVERTED");
|
export const ButtonLooks: t.ButtonLooks = findByPropsLazy("BLANK", "FILLED", "INVERTED");
|
||||||
|
|
|
@ -19,7 +19,7 @@
|
||||||
import { LazyComponent } from "@utils/misc";
|
import { LazyComponent } from "@utils/misc";
|
||||||
|
|
||||||
// eslint-disable-next-line path-alias/no-relative
|
// eslint-disable-next-line path-alias/no-relative
|
||||||
import { FilterFn, waitFor } from "../webpack";
|
import { FilterFn, filters, waitFor } from "../webpack";
|
||||||
|
|
||||||
export function waitForComponent<T extends React.ComponentType<any> = React.ComponentType<any> & Record<string, any>>(name: string, filter: FilterFn | string | string[]): T {
|
export function waitForComponent<T extends React.ComponentType<any> = React.ComponentType<any> & Record<string, any>>(name: string, filter: FilterFn | string | string[]): T {
|
||||||
let myValue: T = function () {
|
let myValue: T = function () {
|
||||||
|
@ -34,3 +34,7 @@ export function waitForComponent<T extends React.ComponentType<any> = React.Comp
|
||||||
|
|
||||||
return lazyComponent;
|
return lazyComponent;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export function waitForStore(name: string, cb: (v: any) => void) {
|
||||||
|
waitFor(filters.byStoreName(name), cb);
|
||||||
|
}
|
||||||
|
|
|
@ -25,7 +25,7 @@ export let useEffect: typeof React.useEffect;
|
||||||
export let useMemo: typeof React.useMemo;
|
export let useMemo: typeof React.useMemo;
|
||||||
export let useRef: typeof React.useRef;
|
export let useRef: typeof React.useRef;
|
||||||
|
|
||||||
export const ReactDOM: typeof import("react-dom") = findByPropsLazy("createPortal", "render");
|
export const ReactDOM: typeof import("react-dom") & typeof import("react-dom/client") = findByPropsLazy("createPortal", "render");
|
||||||
|
|
||||||
waitFor("useState", m => {
|
waitFor("useState", m => {
|
||||||
React = m;
|
React = m;
|
||||||
|
|
|
@ -19,36 +19,71 @@
|
||||||
import type * as Stores from "discord-types/stores";
|
import type * as Stores from "discord-types/stores";
|
||||||
|
|
||||||
// eslint-disable-next-line path-alias/no-relative
|
// eslint-disable-next-line path-alias/no-relative
|
||||||
import { filters, findByPropsLazy, mapMangledModuleLazy, waitFor } from "../webpack";
|
import { filters, findByCodeLazy, findByPropsLazy, mapMangledModuleLazy } from "../webpack";
|
||||||
|
import { waitForStore } from "./internal";
|
||||||
|
import * as t from "./types/stores";
|
||||||
|
|
||||||
export const MessageStore = findByPropsLazy("getRawMessages") as Omit<Stores.MessageStore, "getMessages"> & {
|
export const Flux: t.Flux = findByPropsLazy("connectStores");
|
||||||
|
|
||||||
|
type GenericStore = t.FluxStore & Record<string, any>;
|
||||||
|
|
||||||
|
export let MessageStore: Omit<Stores.MessageStore, "getMessages"> & {
|
||||||
getMessages(chanId: string): any;
|
getMessages(chanId: string): any;
|
||||||
};
|
};
|
||||||
export const PermissionStore = findByPropsLazy("can", "getGuildPermissions");
|
|
||||||
export const PrivateChannelsStore = findByPropsLazy("openPrivateChannel");
|
|
||||||
export const GuildChannelStore = findByPropsLazy("getChannels");
|
|
||||||
export const ReadStateStore = findByPropsLazy("lastMessageId");
|
|
||||||
export const PresenceStore = findByPropsLazy("setCurrentUserOnConnectionOpen");
|
|
||||||
|
|
||||||
export let GuildStore: Stores.GuildStore;
|
// this is not actually a FluxStore
|
||||||
export let UserStore: Stores.UserStore;
|
export const PrivateChannelsStore = findByPropsLazy("openPrivateChannel");
|
||||||
export let SelectedChannelStore: Stores.SelectedChannelStore;
|
export let PermissionStore: GenericStore;
|
||||||
export let SelectedGuildStore: any;
|
export let GuildChannelStore: GenericStore;
|
||||||
export let ChannelStore: Stores.ChannelStore;
|
export let ReadStateStore: GenericStore;
|
||||||
export let GuildMemberStore: Stores.GuildMemberStore;
|
export let PresenceStore: GenericStore;
|
||||||
export let RelationshipStore: Stores.RelationshipStore & {
|
|
||||||
|
export let GuildStore: Stores.GuildStore & t.FluxStore;
|
||||||
|
export let UserStore: Stores.UserStore & t.FluxStore;
|
||||||
|
export let SelectedChannelStore: Stores.SelectedChannelStore & t.FluxStore;
|
||||||
|
export let SelectedGuildStore: t.FluxStore & Record<string, any>;
|
||||||
|
export let ChannelStore: Stores.ChannelStore & t.FluxStore;
|
||||||
|
export let GuildMemberStore: Stores.GuildMemberStore & t.FluxStore;
|
||||||
|
export let RelationshipStore: Stores.RelationshipStore & t.FluxStore & {
|
||||||
/** Get the date (as a string) that the relationship was created */
|
/** Get the date (as a string) that the relationship was created */
|
||||||
getSince(userId: string): string;
|
getSince(userId: string): string;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
export let WindowStore: t.WindowStore;
|
||||||
|
|
||||||
export const MaskedLinkStore = mapMangledModuleLazy('"MaskedLinkStore"', {
|
export const MaskedLinkStore = mapMangledModuleLazy('"MaskedLinkStore"', {
|
||||||
openUntrustedLink: filters.byCode(".apply(this,arguments)")
|
openUntrustedLink: filters.byCode(".apply(this,arguments)")
|
||||||
});
|
});
|
||||||
|
|
||||||
waitFor(["getCurrentUser", "initialize"], m => UserStore = m);
|
/**
|
||||||
waitFor("getSortedPrivateChannels", m => ChannelStore = m);
|
* React hook that returns stateful data for one or more stores
|
||||||
waitFor("getCurrentlySelectedChannelId", m => SelectedChannelStore = m);
|
* You might need a custom comparator (4th argument) if your store data is an object
|
||||||
waitFor("getLastSelectedGuildId", m => SelectedGuildStore = m);
|
*
|
||||||
waitFor("getGuildCount", m => GuildStore = m);
|
* @param stores The stores to listen to
|
||||||
waitFor(["getMember", "initialize"], m => GuildMemberStore = m);
|
* @param mapper A function that returns the data you need
|
||||||
waitFor("getRelationshipType", m => RelationshipStore = m);
|
* @param idk some thing, idk just pass null
|
||||||
|
* @param isEqual A custom comparator for the data returned by mapper
|
||||||
|
*
|
||||||
|
* @example const user = useStateFromStores([UserStore], () => UserStore.getCurrentUser(), null, (old, current) => old.id === current.id);
|
||||||
|
*/
|
||||||
|
export const useStateFromStores: <T>(
|
||||||
|
stores: t.FluxStore[],
|
||||||
|
mapper: () => T,
|
||||||
|
idk?: any,
|
||||||
|
isEqual?: (old: T, newer: T) => boolean
|
||||||
|
) => T
|
||||||
|
= findByCodeLazy("useStateFromStores");
|
||||||
|
|
||||||
|
waitForStore("UserStore", s => UserStore = s);
|
||||||
|
waitForStore("ChannelStore", m => ChannelStore = m);
|
||||||
|
waitForStore("SelectedChannelStore", m => SelectedChannelStore = m);
|
||||||
|
waitForStore("SelectedGuildStore", m => SelectedGuildStore = m);
|
||||||
|
waitForStore("GuildStore", m => GuildStore = m);
|
||||||
|
waitForStore("GuildMemberStore", m => GuildMemberStore = m);
|
||||||
|
waitForStore("RelationshipStore", m => RelationshipStore = m);
|
||||||
|
waitForStore("PermissionStore", m => PermissionStore = m);
|
||||||
|
waitForStore("PresenceStore", m => PresenceStore = m);
|
||||||
|
waitForStore("ReadStateStore", m => ReadStateStore = m);
|
||||||
|
waitForStore("GuildChannelStore", m => GuildChannelStore = m);
|
||||||
|
waitForStore("MessageStore", m => MessageStore = m);
|
||||||
|
waitForStore("WindowStore", m => WindowStore = m);
|
||||||
|
|
6
src/webpack/common/types/components.d.ts
vendored
6
src/webpack/common/types/components.d.ts
vendored
|
@ -215,9 +215,9 @@ export type Select = ComponentType<PropsWithChildren<{
|
||||||
closeOnSelect?: boolean;
|
closeOnSelect?: boolean;
|
||||||
hideIcon?: boolean;
|
hideIcon?: boolean;
|
||||||
|
|
||||||
select?(value: any): void;
|
select(value: any): void;
|
||||||
isSelected?(value: any): boolean;
|
isSelected(value: any): boolean;
|
||||||
serialize?(value: any): string;
|
serialize(value: any): string;
|
||||||
clear?(): void;
|
clear?(): void;
|
||||||
|
|
||||||
maxVisibleItems?: number;
|
maxVisibleItems?: number;
|
||||||
|
|
1
src/webpack/common/types/index.d.ts
vendored
1
src/webpack/common/types/index.d.ts
vendored
|
@ -19,5 +19,6 @@
|
||||||
export * from "./components";
|
export * from "./components";
|
||||||
export * from "./fluxEvents";
|
export * from "./fluxEvents";
|
||||||
export * from "./menu";
|
export * from "./menu";
|
||||||
|
export * from "./stores";
|
||||||
export * from "./utils";
|
export * from "./utils";
|
||||||
|
|
||||||
|
|
40
src/webpack/common/types/stores.d.ts
vendored
Normal file
40
src/webpack/common/types/stores.d.ts
vendored
Normal file
|
@ -0,0 +1,40 @@
|
||||||
|
/*
|
||||||
|
* Vencord, a modification for Discord's desktop app
|
||||||
|
* Copyright (c) 2023 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/>.
|
||||||
|
*/
|
||||||
|
|
||||||
|
import { FluxDispatcher, FluxEvents } from "./utils";
|
||||||
|
|
||||||
|
export class FluxStore {
|
||||||
|
constructor(dispatcher: FluxDispatcher, eventHandlers?: Partial<Record<FluxEvents, (data: any) => void>>);
|
||||||
|
|
||||||
|
emitChange(): void;
|
||||||
|
getDispatchToken(): string;
|
||||||
|
getName(): string;
|
||||||
|
initialize(): void;
|
||||||
|
initializeIfNeeded(): void;
|
||||||
|
__getLocalVars(): Record<string, any>;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface Flux {
|
||||||
|
Store: typeof FluxStore;
|
||||||
|
}
|
||||||
|
|
||||||
|
export class WindowStore extends FluxStore {
|
||||||
|
isElementFullScreen(): boolean;
|
||||||
|
isFocused(): boolean;
|
||||||
|
windowSize(): Record<"width" | "height", number>;
|
||||||
|
}
|
14
src/webpack/common/types/utils.d.ts
vendored
14
src/webpack/common/types/utils.d.ts
vendored
|
@ -31,20 +31,6 @@ export interface FluxDispatcher {
|
||||||
unsubscribe(event: FluxEvents, callback: (data: any) => void): void;
|
unsubscribe(event: FluxEvents, callback: (data: any) => void): void;
|
||||||
}
|
}
|
||||||
|
|
||||||
declare class FluxStore {
|
|
||||||
constructor(dispatcher: FluxDispatcher, eventHandlers?: Partial<Record<FluxEvents, (data: any) => void>>);
|
|
||||||
|
|
||||||
emitChange(): void;
|
|
||||||
getDispatchToken(): string;
|
|
||||||
getName(): string;
|
|
||||||
initialize(): void;
|
|
||||||
initializeIfNeeded(): void;
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface Flux {
|
|
||||||
Store: typeof FluxStore;
|
|
||||||
}
|
|
||||||
|
|
||||||
export type Parser = Record<
|
export type Parser = Record<
|
||||||
| "parse"
|
| "parse"
|
||||||
| "parseTopic"
|
| "parseTopic"
|
||||||
|
|
|
@ -23,7 +23,6 @@ import { _resolveReady,filters, findByCodeLazy, findByPropsLazy, mapMangledModul
|
||||||
import type * as t from "./types/utils";
|
import type * as t from "./types/utils";
|
||||||
|
|
||||||
export let FluxDispatcher: t.FluxDispatcher;
|
export let FluxDispatcher: t.FluxDispatcher;
|
||||||
export const Flux: t.Flux = findByPropsLazy("connectStores");
|
|
||||||
|
|
||||||
export const RestAPI: t.RestAPI = findByPropsLazy("getAPIBaseURL", "get");
|
export const RestAPI: t.RestAPI = findByPropsLazy("getAPIBaseURL", "get");
|
||||||
export const moment: typeof import("moment") = findByPropsLazy("parseTwoDigitYear");
|
export const moment: typeof import("moment") = findByPropsLazy("parseTwoDigitYear");
|
||||||
|
|
|
@ -50,7 +50,7 @@ export const filters = {
|
||||||
}
|
}
|
||||||
return true;
|
return true;
|
||||||
},
|
},
|
||||||
byDisplayName: (name: string): FilterFn => m =>
|
byStoreName: (name: string): FilterFn => m =>
|
||||||
m.constructor?.displayName === name
|
m.constructor?.displayName === name
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -331,15 +331,15 @@ export function findByCodeLazy(...code: string[]) {
|
||||||
/**
|
/**
|
||||||
* Find a store by its displayName
|
* Find a store by its displayName
|
||||||
*/
|
*/
|
||||||
export function findByDisplayName(name: string) {
|
export function findStore(name: string) {
|
||||||
return find(filters.byDisplayName(name));
|
return find(filters.byStoreName(name));
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* findByDisplayName but lazy
|
* findByDisplayName but lazy
|
||||||
*/
|
*/
|
||||||
export function findByDisplayNameLazy(name: string) {
|
export function findStoreLazy(name: string) {
|
||||||
return findLazy(filters.byDisplayName(name));
|
return findLazy(filters.byStoreName(name));
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
Loading…
Reference in a new issue