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() {