diff --git a/web/plugin.head.html b/web/plugin.head.html
index b79fb7e..306c6cd 100644
--- a/web/plugin.head.html
+++ b/web/plugin.head.html
@@ -2181,8 +2181,8 @@
return Math.floor(Math.min(maxByWidth, maxByHeight, responsiveCap));
}
- function clampPoliticTalkTileAvatarSize(tile, avatarContainer) {
- var maxSize = getPoliticTalkTileAvatarMaxSize(tile);
+ function clampPoliticTalkTileAvatarSize(tile, avatarContainer, maxSizeOverride) {
+ var maxSize = Number.isFinite(maxSizeOverride) ? maxSizeOverride : getPoliticTalkTileAvatarMaxSize(tile);
if (!maxSize || !avatarContainer) {
return;
@@ -2280,6 +2280,61 @@
});
}
+ function getPoliticTalkThumbnailAvatarMaxSize(thumbnail) {
+ if (!thumbnail) {
+ return null;
+ }
+
+ var rect = thumbnail.getBoundingClientRect();
+
+ if (!rect.width || !rect.height) {
+ return null;
+ }
+
+ var footerHeight = Math.min(36, Math.max(24, rect.height * 0.24));
+ var mediaHeight = Math.max(32, rect.height - footerHeight - 10);
+ var maxByWidth = rect.width * 0.42;
+ var maxByHeight = mediaHeight * 0.58;
+
+ return Math.floor(Math.max(30, Math.min(maxByWidth, maxByHeight, 64)));
+ }
+
+ function centerPoliticTalkThumbnailAvatar(thumbnail) {
+ if (!thumbnail) {
+ return;
+ }
+
+ var thumbnailRect = thumbnail.getBoundingClientRect();
+ var maxSize = getPoliticTalkThumbnailAvatarMaxSize(thumbnail);
+
+ if (!maxSize) {
+ return;
+ }
+
+ var footerHeight = Math.min(36, Math.max(24, thumbnailRect.height * 0.24));
+ var centerY = Math.max(8 + maxSize / 2, (thumbnailRect.height - footerHeight) / 2);
+
+ Array.prototype.slice.call(thumbnail.children || []).forEach(function(candidate) {
+ var className = String(candidate.className || '');
+ var isAvatarContainer = candidate.classList.contains('avatar-container')
+ || className.indexOf('avatar-container') !== -1
+ || className.indexOf('avatarContainer') !== -1;
+
+ if (!isAvatarContainer) {
+ return;
+ }
+
+ setPoliticTalkImportantStyle(candidate, 'bottom', 'auto');
+ setPoliticTalkImportantStyle(candidate, 'left', '50%');
+ setPoliticTalkImportantStyle(candidate, 'margin', '0');
+ setPoliticTalkImportantStyle(candidate, 'position', 'absolute');
+ setPoliticTalkImportantStyle(candidate, 'right', 'auto');
+ setPoliticTalkImportantStyle(candidate, 'top', centerY + 'px');
+ setPoliticTalkImportantStyle(candidate, 'transform', 'translate(-50%, -50%)');
+ clampPoliticTalkTileAvatarSize(thumbnail, candidate, maxSize);
+ });
+ }
+
function getPoliticTalkAvailableTileHeight(videospace) {
var videospaceRect = videospace.getBoundingClientRect();
var toolbar = getVisiblePoliticTalkToolbar();
@@ -2863,6 +2918,7 @@
thumbnail,
metadata
);
+ centerPoliticTalkThumbnailAvatar(thumbnail);
});
applyPoliticTalkParticipantPaneAvatarTheme(videospace, tiles, thumbnails);