feat(plugin): USRBG (#844)

Co-authored-by: amsyarasyiq <82711525+amsyarasyiq@users.noreply.github.com>
Co-authored-by: Vendicated <vendicated@riseup.net>

src/plugins/usrbg/index.css

@@ -0,0 +1,31 @@
+:is([class*="userProfile"], [class*="userPopout"]) [class*="bannerPremium"] {
+    background: center / cover no-repeat;
+    position: relative;
+    z-index: -1;
+}
+
+[class*="userPopout"] [class*="NonPremium"] [class*="bannerPremium"] {
+    top: -30px;
+}
+
+[class*="NonPremium"]:has([class*="bannerPremium"]) [class*="bannerSVGWrapper"] {
+    min-height: 120px !important;
+}
+
+[class*="NonPremium"]:has([class*="bannerPremium"]) [class*="bannerSVGWrapper"] foreignObject {
+    height: 360px;
+}
+
+[class*="userPopout"] [class*="NonPremium"]:has([class*="bannerPremium"]) [class*="bannerSVGWrapper"] rect {
+    height: 120px;
+    y: -30;
+}
+
+[class*="userPopout"] [class*="NonPremium"]:has([class*="bannerPremium"]) [class*="bannerSVGWrapper"] circle {
+    cy: 86;
+}
+
+[class*="NonPremium"]:has([class*="bannerPremium"]) [class*="avatarPositionNormal"],
+[class*="PremiumWithoutBanner"]:has([class*="bannerPremium"]) [class*="avatarPositionPremiumNoBanner"] {
+    top: 76px;
+}

src/plugins/usrbg/index.tsx

@@ -0,0 +1,75 @@
+/*
+ * 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 { definePluginSettings } from "@api/settings";
+import { enableStyle } from "@api/Styles";
+import { Link } from "@components/Link";
+import { Devs } from "@utils/constants";
+import definePlugin, { OptionType } from "@utils/types";
+
+import style from "./index.css?managed";
+
+const BASE_URL = "https://raw.githubusercontent.com/AutumnVN/usrbg/main/usrbg.json";
+
+let data = {} as Record<string, string>;
+
+const settings = definePluginSettings({
+    nitroFirst: {
+        description: "Banner to use if both Nitro and USRBG banners are present",
+        type: OptionType.SELECT,
+        options: [
+            { label: "Nitro banner", value: true, default: true },
+            { label: "USRBG banner", value: false },
+        ]
+    }
+});
+
+export default definePlugin({
+    name: "USRBG",
+    description: "USRBG is a community maintained database of Discord banners, allowing anyone to get a banner without requiring Nitro",
+    authors: [Devs.AutumnVN, Devs.pylix],
+    settings,
+    patches: [
+        {
+            find: ".bannerSrc,",
+            replacement: {
+                match: /(\i)\.bannerSrc,/,
+                replace: "$self.useBannerHook($1),"
+            }
+        }
+    ],
+
+    settingsAboutComponent: () => {
+        return (
+            <Link href="https://github.com/Discord-Custom-Covers/usrbg#request-your-own-usrbg">Get your own banner</Link>
+        );
+    },
+
+    useBannerHook({ displayProfile, user }: any) {
+        if (displayProfile?.banner && settings.store.nitroFirst) return;
+        if (data[user.id]) return data[user.id];
+    },
+
+    async start() {
+        enableStyle(style);
+
+        const res = await fetch(BASE_URL);
+        if (res.ok)
+            data = await res.json();
+    }
+});