added bg in side pane

web/plugin.head.html

@@ -163,6 +163,23 @@
         border-radius: 50% !important;
     }
 
+    html:not(.politictalk-direct-access-blocked) #participants-pane .politictalk-avatar-themed,
+    html:not(.politictalk-direct-access-blocked) [class*="participantsPane"] .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;
+    }
+
+    html:not(.politictalk-direct-access-blocked) #participants-pane .politictalk-avatar-themed > img,
+    html:not(.politictalk-direct-access-blocked) #participants-pane .politictalk-avatar-themed picture,
+    html:not(.politictalk-direct-access-blocked) #participants-pane .politictalk-avatar-themed picture > img,
+    html:not(.politictalk-direct-access-blocked) [class*="participantsPane"] .politictalk-avatar-themed > img,
+    html:not(.politictalk-direct-access-blocked) [class*="participantsPane"] .politictalk-avatar-themed picture,
+    html:not(.politictalk-direct-access-blocked) [class*="participantsPane"] .politictalk-avatar-themed picture > img {
+        border-radius: 50% !important;
+    }
+
     .politictalk-room-logo {
         align-items: center;
         display: flex;
@@ -1889,6 +1906,191 @@
             return null;
         }
 
+        function getPoliticTalkParticipantPane() {
+            return document.getElementById('participants-pane')
+                || document.querySelector('[class*="participantsPane"]');
+        }
+
+        function getPoliticTalkParticipantPaneRows() {
+            var pane = getPoliticTalkParticipantPane();
+
+            if (!pane) {
+                return [];
+            }
+
+            return Array.prototype.slice.call(pane.querySelectorAll([
+                '[id^="participant-item-"]',
+                '[role="listitem"]'
+            ].join(','))).filter(function(row, index, rows) {
+                return rows.indexOf(row) === index
+                    && Boolean(getPoliticTalkParticipantPaneDisplayName(row))
+                    && Boolean(row.querySelector('.avatar, .userAvatar, [class*="avatar"], [class*="Avatar"]'));
+            });
+        }
+
+        function getPoliticTalkParticipantPaneEndpointId(row) {
+            if (!row) {
+                return '';
+            }
+
+            var rowId = String(row.id || '');
+            var match = rowId.match(/^participant-item-(.+)$/);
+
+            if (match) {
+                return match[1];
+            }
+
+            return String(
+                row.getAttribute('data-participant-id')
+                    || row.getAttribute('data-endpoint-id')
+                    || ''
+            ).trim();
+        }
+
+        function getPoliticTalkParticipantPaneDisplayName(row) {
+            if (!row) {
+                return '';
+            }
+
+            var candidates = Array.prototype.slice.call(row.querySelectorAll([
+                '[class*="nameContainer"]',
+                '[class*="displayName"]',
+                '.displayname',
+                '[id$="_name"]'
+            ].join(',')));
+
+            candidates.push(row);
+
+            var target = candidates.find(function(candidate) {
+                var text = String(candidate.textContent || '')
+                    .replace(/\(you\)/ig, '')
+                    .replace(/\bmoderator\b/ig, '')
+                    .replace(/\s+/g, ' ')
+                    .trim();
+
+                return text
+                    && text.length <= 80
+                    && text.toLowerCase() !== 'meeting participants';
+            });
+
+            if (!target) {
+                return '';
+            }
+
+            return String(target.textContent || '')
+                .replace(/\(you\)/ig, '')
+                .replace(/\bmoderator\b/ig, '')
+                .replace(/\s+/g, ' ')
+                .trim();
+        }
+
+        function getPoliticTalkRoleMetadataFromElement(element) {
+            if (!element || !element.classList) {
+                return null;
+            }
+
+            var role = POLITICTALK_ROLE_CLASS_NAMES.map(function(className) {
+                return element.classList.contains(className)
+                    ? className.replace('politictalk-role-', '')
+                    : '';
+            }).filter(Boolean)[0] || '';
+
+            if (!role) {
+                return null;
+            }
+
+            return {
+                color: getPoliticTalkRoleColor(role),
+                role: role,
+                userId: '',
+                userType: ''
+            };
+        }
+
+        function getPoliticTalkParticipantPaneRoleMetadata(row, videospace, tiles, thumbnails) {
+            var localMetadata = getPoliticTalkLocalRoleMetadata();
+            var endpointId = getPoliticTalkParticipantPaneEndpointId(row);
+
+            if (endpointId && politicTalkParticipantRolesByEndpointId[endpointId]) {
+                return politicTalkParticipantRolesByEndpointId[endpointId];
+            }
+
+            var localEndpointId = getPoliticTalkLocalEndpointId();
+
+            if (endpointId && localEndpointId && endpointId === localEndpointId) {
+                return localMetadata;
+            }
+
+            if (/\(you\)/i.test(String(row && row.textContent || ''))) {
+                return localMetadata;
+            }
+
+            var matchingTile = null;
+
+            if (videospace && endpointId) {
+                matchingTile = videospace.querySelector('#participant_' + endpointId + ', #remoteVideo_' + endpointId);
+            }
+
+            if (!matchingTile && videospace) {
+                var displayName = getPoliticTalkParticipantPaneDisplayName(row);
+                var candidates = (tiles || []).concat(thumbnails || []);
+
+                matchingTile = candidates.find(function(tile) {
+                    return getPoliticTalkVisibleDisplayName(tile) === displayName;
+                }) || null;
+            }
+
+            if (matchingTile) {
+                return getPoliticTalkTileRoleMetadata(matchingTile)
+                    || getPoliticTalkRoleMetadataFromElement(matchingTile)
+                    || getPoliticTalkGuestRoleMetadata();
+            }
+
+            return getPoliticTalkGuestRoleMetadata();
+        }
+
+        function isPoliticTalkParticipantPaneAvatar(element) {
+            if (!element || element.tagName === 'IMG' || element.tagName === 'CANVAS') {
+                return false;
+            }
+
+            if (element.querySelector('button, [role="button"], input, textarea, select')) {
+                return false;
+            }
+
+            var rect = element.getBoundingClientRect();
+
+            if (rect.width < 20 || rect.height < 20 || rect.width > 96 || rect.height > 96) {
+                return false;
+            }
+
+            var ratio = rect.width / rect.height;
+
+            return ratio >= 0.72 && ratio <= 1.28;
+        }
+
+        function applyPoliticTalkParticipantPaneAvatarTheme(videospace, tiles, thumbnails) {
+            getPoliticTalkParticipantPaneRows().forEach(function(row) {
+                var metadata = getPoliticTalkParticipantPaneRoleMetadata(row, videospace, tiles, thumbnails);
+
+                applyPoliticTalkRoleToElement(row, metadata);
+
+                Array.prototype.slice.call(row.querySelectorAll([
+                    '.avatar:not(img)',
+                    '.userAvatar:not(img)',
+                    '[class*="avatar"]:not(img)',
+                    '[class*="Avatar"]:not(img)'
+                ].join(','))).forEach(function(avatar) {
+                    if (!isPoliticTalkParticipantPaneAvatar(avatar)) {
+                        return;
+                    }
+
+                    addPoliticTalkClass(avatar, 'politictalk-avatar-themed');
+                    applyPoliticTalkRoleToElement(avatar, metadata);
+                });
+            });
+        }
+
         function applyPoliticTalkRoleToElement(element, metadata) {
             if (!element || !element.classList) {
                 return false;
@@ -2075,6 +2277,7 @@
             var videospace = document.getElementById('videospace');
 
             if (!videospace) {
+                applyPoliticTalkParticipantPaneAvatarTheme(null, [], []);
                 return;
             }
 
@@ -2116,6 +2319,8 @@
                     metadata
                 );
             });
+
+            applyPoliticTalkParticipantPaneAvatarTheme(videospace, tiles, thumbnails);
         }
 
         function mountPoliticTalkTileTheme() {