diff --git a/web/plugin.head.html b/web/plugin.head.html index 4173427..ded9a91 100644 --- a/web/plugin.head.html +++ b/web/plugin.head.html @@ -1715,6 +1715,28 @@ }); } + function getPoliticTalkThumbnailCandidates(videospace) { + return Array.prototype.slice.call(videospace.querySelectorAll([ + '.filmstrip #localVideo_container', + '.filmstrip [id^="remoteVideo_"]', + '.filmstrip [id^="participant_"]', + '.filmstrip .videocontainer', + '.filmstrip .video-container' + ].join(','))).filter(function(candidate) { + if (!candidate || candidate.id === 'largeVideoContainer') { + return false; + } + + var rect = candidate.getBoundingClientRect(); + + if (rect.width < 44 || rect.height < 44) { + return false; + } + + return Boolean(candidate.querySelector('img, canvas, [class*="avatar"], [class*="Avatar"], .displayname')); + }); + } + function isPoliticTalkAvatarShell(element, tile) { if (!element || element === tile || element.tagName === 'IMG' || element.tagName === 'CANVAS') { return false; @@ -1928,7 +1950,7 @@ return getPoliticTalkLocalRoleMetadata(); } - function applyPoliticTalkDominantSpeakerTheme(videospace, tiles) { + function applyPoliticTalkDominantSpeakerTheme(videospace, tiles, metadataOverride) { var avatar = videospace.querySelector('#dominantSpeakerAvatar'); var avatarContainer = videospace.querySelector('#dominantSpeakerAvatarContainer'); @@ -1936,7 +1958,7 @@ return; } - var metadata = getPoliticTalkDominantSpeakerRoleMetadata(videospace, tiles); + var metadata = metadataOverride || getPoliticTalkDominantSpeakerRoleMetadata(videospace, tiles); var roleWasApplied = applyPoliticTalkRoleToElement(avatar, metadata); addPoliticTalkClass(avatar, 'politictalk-avatar-themed'); @@ -1954,6 +1976,30 @@ } } + function applyPoliticTalkAvatarThemeInContainer(container, metadata) { + if (!container) { + return; + } + + var themeMetadata = metadata || getPoliticTalkGuestRoleMetadata(); + + applyPoliticTalkRoleToElement(container, themeMetadata); + + container.querySelectorAll('div, span').forEach(function(candidate) { + if (isPoliticTalkAvatarShell(candidate, container)) { + var initialsTarget = getPoliticTalkInitialsAvatarTarget(candidate); + + addPoliticTalkClass(candidate, 'politictalk-avatar-shell'); + applyPoliticTalkRoleToElement(candidate, themeMetadata); + + if (initialsTarget) { + addPoliticTalkClass(initialsTarget, 'politictalk-avatar-themed'); + applyPoliticTalkRoleToElement(initialsTarget, themeMetadata); + } + } + }); + } + function applyPoliticTalkTileLayout(videospace, tiles) { if (!videospace || !tiles.length) { return; @@ -2033,32 +2079,43 @@ } var tiles = getPoliticTalkTileCandidates(videospace); + var thumbnails = getPoliticTalkThumbnailCandidates(videospace); + var dominantName = getPoliticTalkVisibleDisplayName( + videospace.querySelector('[data-testid="stage-display-name"]') + ); + var dominantMetadata = getPoliticTalkDominantSpeakerRoleMetadata(videospace, tiles); applyPoliticTalkTileLayout(videospace, tiles); - applyPoliticTalkDominantSpeakerTheme(videospace, tiles); + applyPoliticTalkDominantSpeakerTheme(videospace, tiles, dominantMetadata); tiles.forEach(function(tile) { addPoliticTalkClass(tile, 'politictalk-themed-tile'); - applyPoliticTalkRoleToTile(tile, getPoliticTalkTileRoleMetadata(tile)); + var metadata = getPoliticTalkTileRoleMetadata(tile); + + applyPoliticTalkRoleToTile(tile, metadata); + applyPoliticTalkAvatarThemeInContainer(tile, metadata); tile.querySelectorAll('div, span').forEach(function(candidate) { - if (isPoliticTalkAvatarShell(candidate, tile)) { - var initialsTarget = getPoliticTalkInitialsAvatarTarget(candidate); - - addPoliticTalkClass(candidate, 'politictalk-avatar-shell'); - - if (initialsTarget) { - addPoliticTalkClass(initialsTarget, 'politictalk-avatar-themed'); - } - - return; - } - if (isPoliticTalkTransparentTileLayer(candidate, tile)) { addPoliticTalkClass(candidate, 'politictalk-tile-transparent-layer'); } }); }); + + thumbnails.forEach(function(thumbnail) { + var metadata = getPoliticTalkTileRoleMetadata(thumbnail); + + if (!metadata + && dominantName + && getPoliticTalkVisibleDisplayName(thumbnail) === dominantName) { + metadata = dominantMetadata; + } + + applyPoliticTalkAvatarThemeInContainer( + thumbnail, + metadata + ); + }); } function mountPoliticTalkTileTheme() {