feat(USRBG): update to new API (#2388)

src/plugins/usrbg/index.tsx

@@ -24,9 +24,14 @@ import definePlugin, { OptionType } from "@utils/types";
 
 import style from "./index.css?managed";
 
-const BASE_URL = "https://raw.githubusercontent.com/AutumnVN/usrbg/main/usrbg.json";
+const API_URL = "https://usrbg.is-hardly.online/users";
 
-let data = {} as Record<string, string>;
+interface UsrbgApiReturn {
+    endpoint: string
+    bucket: string
+    prefix: string
+    users: Record<string, string>
+}
 
 const settings = definePluginSettings({
     nitroFirst: {
@@ -48,7 +53,7 @@ const settings = definePluginSettings({
 export default definePlugin({
     name: "USRBG",
     description: "Displays user banners from USRBG, allowing anyone to get a banner without Nitro",
-    authors: [Devs.AutumnVN, Devs.pylix, Devs.TheKodeToad],
+    authors: [Devs.AutumnVN, Devs.katlyn, Devs.pylix, Devs.TheKodeToad],
     settings,
     patches: [
         {
@@ -80,8 +85,7 @@ export default definePlugin({
         }
     ],
 
-
-    data,
+    data: null as UsrbgApiReturn | null,
 
     settingsAboutComponent: () => {
         return (
@@ -91,9 +95,9 @@ export default definePlugin({
 
     voiceBackgroundHook({ className, participantUserId }: any) {
         if (className.includes("tile_")) {
-            if (data[participantUserId]) {
+            if (this.userHasBackground(participantUserId)) {
                 return {
-                    backgroundImage: `url(${data[participantUserId]})`,
+                    backgroundImage: `url(${this.getImageUrl(participantUserId)})`,
                     backgroundSize: "cover",
                     backgroundPosition: "center",
                     backgroundRepeat: "no-repeat"
@@ -104,24 +108,35 @@ export default definePlugin({
 
     useBannerHook({ displayProfile, user }: any) {
         if (displayProfile?.banner && settings.store.nitroFirst) return;
-        if (data[user.id]) return data[user.id];
+        if (this.userHasBackground(user.id)) return this.getImageUrl(user.id);
     },
 
     premiumHook({ userId }: any) {
-        if (data[userId]) return 2;
+        if (this.userHasBackground(userId)) return 2;
     },
 
     shouldShowBadge({ displayProfile, user }: any) {
-        return displayProfile?.banner && (!data[user.id] || settings.store.nitroFirst);
+        return displayProfile?.banner && (!this.userHasBackground(user.id) || settings.store.nitroFirst);
+    },
+
+    userHasBackground(userId: string) {
+        return !!this.data?.users[userId];
+    },
+
+    getImageUrl(userId: string): string|null {
+        if (!this.userHasBackground(userId)) return null;
+
+        // We can assert that data exists because userHasBackground returned true
+        const { endpoint, bucket, prefix, users: { [userId]: etag } } = this.data!;
+        return `${endpoint}/${bucket}/${prefix}${userId}?${etag}`;
     },
 
     async start() {
         enableStyle(style);
 
-        const res = await fetch(BASE_URL);
+        const res = await fetch(API_URL);
         if (res.ok) {
-            data = await res.json();
-            this.data = data;
+            this.data = await res.json();
         }
     }
 });