From 7fe51b26c29596c558cb25c1d725bf3af3912d15 Mon Sep 17 00:00:00 2001 From: Amardeep Date: Thu, 4 Jun 2026 17:36:38 +0530 Subject: [PATCH] added bg in side pane --- web/plugin.head.html | 205 +++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 205 insertions(+) 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() {