amardeep/politictalk
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

participants text color issue and main tile profile pic issue

Browse Source
This commit is contained in:
errorbyme
2026-06-06 20:27:33 +05:30
parent 9c5a375632
commit 00aa8ec8ec
6 changed files with 168 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

122
web/plugin.head.html
View File

@@ -273,7 +273,15 @@
background: var(--politictalk-avatar-background, #63477a) !important;
background-color: var(--politictalk-avatar-background, #63477a) !important;
border-radius: 50% !important;
color: #fff !important;
overflow: hidden !important;
text-shadow: none !important;
}
html:not(.politictalk-direct-access-blocked) #participants-pane .politictalk-avatar-themed *:not(img):not(picture):not(svg),
html:not(.politictalk-direct-access-blocked) [class*="participantsPane"] .politictalk-avatar-themed *:not(img):not(picture):not(svg) {
color: #fff !important;
text-shadow: none !important;
}
html:not(.politictalk-direct-access-blocked) #participants-pane .politictalk-avatar-themed > img,
@@ -1955,6 +1963,28 @@
}) || null;
}
function getPoliticTalkInitialsTextTargets(element) {
if (!element) {
return [];
}
var targets = [element];
Array.prototype.slice.call(element.querySelectorAll('*')).forEach(function(candidate) {
if (candidate.querySelector('img, canvas, video, picture, svg')) {
return;
}
var text = String(candidate.textContent || '').replace(/\s+/g, '').trim();
if (text && text.length <= 4) {
targets.push(candidate);
}
});
return targets;
}
function isPoliticTalkTransparentTileLayer(element, tile) {
if (!element || element === tile || element.classList.contains('politictalk-avatar-shell')) {
return false;
@@ -1983,6 +2013,97 @@
&& backgroundColor !== 'transparent';
}
function getPoliticTalkTileAvatarMaxSize(tile) {
if (!tile) {
return null;
}
var tileRect = tile.getBoundingClientRect();
if (!tileRect.width || !tileRect.height) {
return null;
}
var maxByHeight = Math.max(40, tileRect.height * 0.48);
var maxByWidth = Math.max(40, tileRect.width * 0.48);
var responsiveCap = tileRect.width <= 480 ? 132 : 180;
return Math.floor(Math.min(maxByWidth, maxByHeight, responsiveCap));
}
function clampPoliticTalkTileAvatarSize(tile, avatarContainer) {
var maxSize = getPoliticTalkTileAvatarMaxSize(tile);
if (!maxSize || !avatarContainer) {
return;
}
setPoliticTalkImportantStyle(avatarContainer, 'aspect-ratio', '1 / 1');
setPoliticTalkImportantStyle(avatarContainer, 'height', maxSize + 'px');
setPoliticTalkImportantStyle(avatarContainer, 'max-height', maxSize + 'px');
setPoliticTalkImportantStyle(avatarContainer, 'max-width', maxSize + 'px');
setPoliticTalkImportantStyle(avatarContainer, 'width', maxSize + 'px');
Array.prototype.slice.call(avatarContainer.querySelectorAll('img, canvas')).forEach(function(media) {
setPoliticTalkImportantStyle(media, 'height', '100%');
setPoliticTalkImportantStyle(media, 'max-height', '100%');
setPoliticTalkImportantStyle(media, 'max-width', '100%');
setPoliticTalkImportantStyle(media, 'object-fit', 'cover');
setPoliticTalkImportantStyle(media, 'width', '100%');
});
var initialsTarget = getPoliticTalkInitialsAvatarTarget(avatarContainer);
if (!initialsTarget) {
return;
}
var initialsText = String(initialsTarget.textContent || '').replace(/\s+/g, '').trim();
var maxFontSize = Math.max(18, Math.floor(maxSize * (initialsText.length > 1 ? 0.36 : 0.46)));
setPoliticTalkImportantStyle(initialsTarget, 'align-items', 'center');
setPoliticTalkImportantStyle(initialsTarget, 'aspect-ratio', '1 / 1');
setPoliticTalkImportantStyle(initialsTarget, 'box-sizing', 'border-box');
setPoliticTalkImportantStyle(initialsTarget, 'color', '#fff');
setPoliticTalkImportantStyle(initialsTarget, 'display', 'flex');
setPoliticTalkImportantStyle(initialsTarget, 'height', maxSize + 'px');
setPoliticTalkImportantStyle(initialsTarget, 'justify-content', 'center');
setPoliticTalkImportantStyle(initialsTarget, 'line-height', '1');
setPoliticTalkImportantStyle(initialsTarget, 'max-height', maxSize + 'px');
setPoliticTalkImportantStyle(initialsTarget, 'max-width', maxSize + 'px');
setPoliticTalkImportantStyle(initialsTarget, 'padding', '0');
setPoliticTalkImportantStyle(initialsTarget, 'text-align', 'center');
setPoliticTalkImportantStyle(initialsTarget, 'text-shadow', 'none');
setPoliticTalkImportantStyle(initialsTarget, 'width', maxSize + 'px');
getPoliticTalkInitialsTextTargets(initialsTarget).forEach(function(textTarget) {
var isRootTarget = textTarget === initialsTarget;
setPoliticTalkImportantStyle(textTarget, 'align-items', 'center');
setPoliticTalkImportantStyle(textTarget, 'box-sizing', 'border-box');
setPoliticTalkImportantStyle(textTarget, 'color', '#fff');
setPoliticTalkImportantStyle(textTarget, 'display', 'flex');
setPoliticTalkImportantStyle(textTarget, 'font-size', maxFontSize + 'px');
setPoliticTalkImportantStyle(textTarget, 'justify-content', 'center');
setPoliticTalkImportantStyle(textTarget, 'letter-spacing', '0');
setPoliticTalkImportantStyle(textTarget, 'line-height', '1');
setPoliticTalkImportantStyle(textTarget, 'margin', '0');
setPoliticTalkImportantStyle(textTarget, 'padding', '0');
setPoliticTalkImportantStyle(textTarget, 'text-align', 'center');
setPoliticTalkImportantStyle(textTarget, 'text-shadow', 'none');
setPoliticTalkImportantStyle(textTarget, 'white-space', 'nowrap');
if (!isRootTarget) {
setPoliticTalkImportantStyle(textTarget, 'height', '100%');
setPoliticTalkImportantStyle(textTarget, 'left', 'auto');
setPoliticTalkImportantStyle(textTarget, 'position', 'static');
setPoliticTalkImportantStyle(textTarget, 'top', 'auto');
setPoliticTalkImportantStyle(textTarget, 'transform', 'none');
setPoliticTalkImportantStyle(textTarget, 'width', '100%');
}
});
}
function centerPoliticTalkTileAvatar(tile) {
if (!tile) {
return;
@@ -2005,6 +2126,7 @@
setPoliticTalkImportantStyle(candidate, 'right', 'auto');
setPoliticTalkImportantStyle(candidate, 'top', '50%');
setPoliticTalkImportantStyle(candidate, 'transform', 'translate(-50%, -50%)');
clampPoliticTalkTileAvatarSize(tile, candidate);
});
}