diff --git a/web/plugin.head.html b/web/plugin.head.html
index ded9a91..26ff2ab 100644
--- a/web/plugin.head.html
+++ b/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() {