diff --git a/src/plugins/usrbg/index.css b/src/plugins/usrbg/index.css index 819d9751..93e37ef4 100644 --- a/src/plugins/usrbg/index.css +++ b/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; +} diff --git a/src/plugins/usrbg/index.tsx b/src/plugins/usrbg/index.tsx index 09ecd573..9c72676a 100644 --- a/src/plugins/usrbg/index.tsx +++ b/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];