pfp bg at right strip

web/plugin.head.html

@@ -1715,6 +1715,28 @@
             });
         }
 
+        function getPoliticTalkThumbnailCandidates(videospace) {
+            return Array.prototype.slice.call(videospace.querySelectorAll([
+                '.filmstrip #localVideo_container',
+                '.filmstrip [id^="remoteVideo_"]',
+                '.filmstrip [id^="participant_"]',
+                '.filmstrip .videocontainer',
+                '.filmstrip .video-container'
+            ].join(','))).filter(function(candidate) {
+                if (!candidate || candidate.id === 'largeVideoContainer') {
+                    return false;
+                }
+
+                var rect = candidate.getBoundingClientRect();
+
+                if (rect.width < 44 || rect.height < 44) {
+                    return false;
+                }
+
+                return Boolean(candidate.querySelector('img, canvas, [class*="avatar"], [class*="Avatar"], .displayname'));
+            });
+        }
+
         function isPoliticTalkAvatarShell(element, tile) {
             if (!element || element === tile || element.tagName === 'IMG' || element.tagName === 'CANVAS') {
                 return false;
@@ -1928,7 +1950,7 @@
             return getPoliticTalkLocalRoleMetadata();
         }
 
-        function applyPoliticTalkDominantSpeakerTheme(videospace, tiles) {
+        function applyPoliticTalkDominantSpeakerTheme(videospace, tiles, metadataOverride) {
             var avatar = videospace.querySelector('#dominantSpeakerAvatar');
             var avatarContainer = videospace.querySelector('#dominantSpeakerAvatarContainer');
 
@@ -1936,7 +1958,7 @@
                 return;
             }
 
-            var metadata = getPoliticTalkDominantSpeakerRoleMetadata(videospace, tiles);
+            var metadata = metadataOverride || getPoliticTalkDominantSpeakerRoleMetadata(videospace, tiles);
             var roleWasApplied = applyPoliticTalkRoleToElement(avatar, metadata);
 
             addPoliticTalkClass(avatar, 'politictalk-avatar-themed');
@@ -1954,6 +1976,30 @@
             }
         }
 
+        function applyPoliticTalkAvatarThemeInContainer(container, metadata) {
+            if (!container) {
+                return;
+            }
+
+            var themeMetadata = metadata || getPoliticTalkGuestRoleMetadata();
+
+            applyPoliticTalkRoleToElement(container, themeMetadata);
+
+            container.querySelectorAll('div, span').forEach(function(candidate) {
+                if (isPoliticTalkAvatarShell(candidate, container)) {
+                    var initialsTarget = getPoliticTalkInitialsAvatarTarget(candidate);
+
+                    addPoliticTalkClass(candidate, 'politictalk-avatar-shell');
+                    applyPoliticTalkRoleToElement(candidate, themeMetadata);
+
+                    if (initialsTarget) {
+                        addPoliticTalkClass(initialsTarget, 'politictalk-avatar-themed');
+                        applyPoliticTalkRoleToElement(initialsTarget, themeMetadata);
+                    }
+                }
+            });
+        }
+
         function applyPoliticTalkTileLayout(videospace, tiles) {
             if (!videospace || !tiles.length) {
                 return;
@@ -2033,32 +2079,43 @@
             }
 
             var tiles = getPoliticTalkTileCandidates(videospace);
+            var thumbnails = getPoliticTalkThumbnailCandidates(videospace);
+            var dominantName = getPoliticTalkVisibleDisplayName(
+                videospace.querySelector('[data-testid="stage-display-name"]')
+            );
+            var dominantMetadata = getPoliticTalkDominantSpeakerRoleMetadata(videospace, tiles);
 
             applyPoliticTalkTileLayout(videospace, tiles);
-            applyPoliticTalkDominantSpeakerTheme(videospace, tiles);
+            applyPoliticTalkDominantSpeakerTheme(videospace, tiles, dominantMetadata);
 
             tiles.forEach(function(tile) {
                 addPoliticTalkClass(tile, 'politictalk-themed-tile');
-                applyPoliticTalkRoleToTile(tile, getPoliticTalkTileRoleMetadata(tile));
+                var metadata = getPoliticTalkTileRoleMetadata(tile);
+
+                applyPoliticTalkRoleToTile(tile, metadata);
+                applyPoliticTalkAvatarThemeInContainer(tile, metadata);
 
                 tile.querySelectorAll('div, span').forEach(function(candidate) {
-                    if (isPoliticTalkAvatarShell(candidate, tile)) {
-                        var initialsTarget = getPoliticTalkInitialsAvatarTarget(candidate);
-
-                        addPoliticTalkClass(candidate, 'politictalk-avatar-shell');
-
-                        if (initialsTarget) {
-                            addPoliticTalkClass(initialsTarget, 'politictalk-avatar-themed');
-                        }
-
-                        return;
-                    }
-
                     if (isPoliticTalkTransparentTileLayer(candidate, tile)) {
                         addPoliticTalkClass(candidate, 'politictalk-tile-transparent-layer');
                     }
                 });
             });
+
+            thumbnails.forEach(function(thumbnail) {
+                var metadata = getPoliticTalkTileRoleMetadata(thumbnail);
+
+                if (!metadata
+                        && dominantName
+                        && getPoliticTalkVisibleDisplayName(thumbnail) === dominantName) {
+                    metadata = dominantMetadata;
+                }
+
+                applyPoliticTalkAvatarThemeInContainer(
+                    thumbnail,
+                    metadata
+                );
+            });
         }
 
         function mountPoliticTalkTileTheme() {