USRBG: Add VoiceBackground (#1038)

Co-authored-by: V <vendicated@riseup.net>

src/plugins/usrbg/index.css

@@ -1,10 +1,12 @@
 :is([class*="userProfile"], [class*="userPopout"]) [class*="bannerPremium"] {
     background: center / cover no-repeat;
-    position: relative;
-    z-index: -1;
 }
 
 [class*="NonPremium"]:has([class*="bannerPremium"]) [class*="avatarPositionNormal"],
 [class*="PremiumWithoutBanner"]:has([class*="bannerPremium"]) [class*="avatarPositionPremiumNoBanner"] {
     top: 76px;
 }
+
+[style*="background-image"] [class*="background-"] {
+    background-color: transparent !important;
+}

src/plugins/usrbg/index.tsx

@@ -36,6 +36,12 @@ const settings = definePluginSettings({
             { label: "Nitro banner", value: true, default: true },
             { label: "USRBG banner", value: false },
         ]
+    },
+    voiceBackground: {
+        description: "Use USRBG banners as voice chat backgrounds",
+        type: OptionType.BOOLEAN,
+        default: true,
+        restartNeeded: true
     }
 });
 
@@ -57,6 +63,16 @@ export default definePlugin({
                     replace: "$self.useBannerHook($1),"
                 }
             ]
+        },
+        {
+            find: "\"data-selenium-video-tile\":",
+            predicate: () => settings.store.voiceBackground,
+            replacement: [
+                {
+                    match: /(\i)\.style,/,
+                    replace: "$self.voiceBackgroundHook($1),"
+                }
+            ]
         }
     ],
 
@@ -66,6 +82,19 @@ export default definePlugin({
         );
     },
 
+    voiceBackgroundHook({ className, participantUserId }: any) {
+        if (className.includes("tile-")) {
+            if (data[participantUserId]) {
+                return {
+                    backgroundImage: `url(${data[participantUserId]})`,
+                    backgroundSize: "cover",
+                    backgroundPosition: "center",
+                    backgroundRepeat: "no-repeat"
+                };
+            }
+        }
+    },
+
     useBannerHook({ displayProfile, user }: any) {
         if (displayProfile?.banner && settings.store.nitroFirst) return;
         if (data[user.id]) return data[user.id];