pfp bg for ono to one

web/plugin.head.html

@@ -147,6 +147,7 @@
     }
 
     html:not(.politictalk-direct-access-blocked) #videospace .politictalk-avatar-themed {
+        background: var(--politictalk-avatar-background, #63477a) !important;
         background-color: var(--politictalk-avatar-background, #63477a) !important;
         border-radius: 50% !important;
         overflow: hidden !important;
@@ -1233,6 +1234,15 @@
             };
         }
 
+        function getPoliticTalkGuestRoleMetadata() {
+            return {
+                color: getPoliticTalkRoleColor('guest'),
+                role: 'guest',
+                userId: '',
+                userType: ''
+            };
+        }
+
         function rememberPoliticTalkParticipantRole(metadata, endpointId) {
             if (!metadata) {
                 return false;
@@ -1857,25 +1867,91 @@
             return null;
         }
 
-        function applyPoliticTalkRoleToTile(tile, metadata) {
-            if (!tile || !tile.classList) {
-                return;
+        function applyPoliticTalkRoleToElement(element, metadata) {
+            if (!element || !element.classList) {
+                return false;
             }
 
             POLITICTALK_ROLE_CLASS_NAMES.forEach(function(className) {
-                tile.classList.remove(className);
+                element.classList.remove(className);
             });
 
             if (!metadata || !normalizePoliticTalkRole(metadata.role)) {
-                return;
+                return false;
             }
 
             var role = normalizePoliticTalkRole(metadata.role);
             var color = getPoliticTalkRoleColor(role);
 
-            tile.classList.add('politictalk-role-' + role);
-            tile.style.setProperty('--politictalk-avatar-background', color);
-            tile.style.setProperty('--politictalk-tile-border-color', color);
+            element.classList.add('politictalk-role-' + role);
+            element.style.setProperty('--politictalk-avatar-background', color);
+            element.style.setProperty('--politictalk-tile-border-color', color);
+
+            return true;
+        }
+
+        function applyPoliticTalkRoleToTile(tile, metadata) {
+            applyPoliticTalkRoleToElement(tile, metadata);
+        }
+
+        function getPoliticTalkVisibleDisplayName(element) {
+            if (!element) {
+                return '';
+            }
+
+            var target = element.querySelector('[data-testid="stage-display-name"], .displayname, [id$="_name"]');
+            var value = target ? target.textContent : element.textContent;
+
+            return String(value || '').replace(/\s+/g, ' ').trim();
+        }
+
+        function getPoliticTalkDominantSpeakerRoleMetadata(videospace, tiles) {
+            var dominantName = getPoliticTalkVisibleDisplayName(
+                videospace.querySelector('[data-testid="stage-display-name"]')
+            );
+            var candidates = tiles || [];
+
+            if (dominantName) {
+                var matchingTile = candidates.find(function(tile) {
+                    return getPoliticTalkVisibleDisplayName(tile) === dominantName;
+                });
+
+                if (matchingTile) {
+                    return getPoliticTalkTileRoleMetadata(matchingTile) || getPoliticTalkGuestRoleMetadata();
+                }
+            }
+
+            if (candidates.length === 1) {
+                return getPoliticTalkTileRoleMetadata(candidates[0]) || getPoliticTalkGuestRoleMetadata();
+            }
+
+            return getPoliticTalkLocalRoleMetadata();
+        }
+
+        function applyPoliticTalkDominantSpeakerTheme(videospace, tiles) {
+            var avatar = videospace.querySelector('#dominantSpeakerAvatar');
+            var avatarContainer = videospace.querySelector('#dominantSpeakerAvatarContainer');
+
+            if (!avatar) {
+                return;
+            }
+
+            var metadata = getPoliticTalkDominantSpeakerRoleMetadata(videospace, tiles);
+            var roleWasApplied = applyPoliticTalkRoleToElement(avatar, metadata);
+
+            addPoliticTalkClass(avatar, 'politictalk-avatar-themed');
+
+            if (avatarContainer) {
+                addPoliticTalkClass(avatarContainer, 'politictalk-avatar-shell');
+                applyPoliticTalkRoleToElement(avatarContainer, metadata);
+            }
+
+            if (!roleWasApplied) {
+                var fallbackColor = getPoliticTalkRoleColor('guest');
+
+                avatar.style.setProperty('--politictalk-avatar-background', fallbackColor);
+                avatar.style.setProperty('--politictalk-tile-border-color', fallbackColor);
+            }
         }
 
         function applyPoliticTalkTileLayout(videospace, tiles) {
@@ -1959,6 +2035,7 @@
             var tiles = getPoliticTalkTileCandidates(videospace);
 
             applyPoliticTalkTileLayout(videospace, tiles);
+            applyPoliticTalkDominantSpeakerTheme(videospace, tiles);
 
             tiles.forEach(function(tile) {
                 addPoliticTalkClass(tile, 'politictalk-themed-tile');