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');