diff --git a/web/plugin.head.html b/web/plugin.head.html
index 39fa758..4173427 100644
--- a/web/plugin.head.html
+++ b/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');