diff --git a/web/plugin.head.html b/web/plugin.head.html
index 8a7efd7..44b0784 100644
--- a/web/plugin.head.html
+++ b/web/plugin.head.html
@@ -53,22 +53,36 @@
width: auto !important;
}
- html:not(.politictalk-direct-access-blocked) #videospace .videocontainer,
- html:not(.politictalk-direct-access-blocked) #videospace .video-container,
- html:not(.politictalk-direct-access-blocked) #videospace #localVideo_container,
- html:not(.politictalk-direct-access-blocked) #videospace [id^="remoteVideo_"] {
+ html:not(.politictalk-direct-access-blocked) #videospace .politictalk-themed-tile {
background: transparent !important;
background-color: transparent !important;
border: 2px solid var(--politictalk-tile-border-color, rgba(179, 165, 228, 0.72)) !important;
box-sizing: border-box !important;
}
- html:not(.politictalk-direct-access-blocked) #videospace .avatar:not(img),
- html:not(.politictalk-direct-access-blocked) #videospace .userAvatar:not(img),
- html:not(.politictalk-direct-access-blocked) #videospace [class*="avatar"]:not(img),
- html:not(.politictalk-direct-access-blocked) #videospace [class*="Avatar"]:not(img),
+ html:not(.politictalk-direct-access-blocked) #videospace .politictalk-tile-transparent-layer {
+ background: transparent !important;
+ background-color: transparent !important;
+ background-image: none !important;
+ }
+
+ html:not(.politictalk-direct-access-blocked) #videospace .politictalk-avatar-shell {
+ border-radius: 50% !important;
+ overflow: hidden !important;
+ }
+
html:not(.politictalk-direct-access-blocked) #videospace .politictalk-avatar-themed {
background-color: var(--politictalk-avatar-background, #63477a) !important;
+ border-radius: 50% !important;
+ overflow: hidden !important;
+ }
+
+ html:not(.politictalk-direct-access-blocked) #videospace .politictalk-avatar-shell img,
+ html:not(.politictalk-direct-access-blocked) #videospace .politictalk-avatar-shell canvas,
+ html:not(.politictalk-direct-access-blocked) #videospace .politictalk-avatar-themed > img,
+ html:not(.politictalk-direct-access-blocked) #videospace .politictalk-avatar-themed picture,
+ html:not(.politictalk-direct-access-blocked) #videospace .politictalk-avatar-themed picture > img {
+ border-radius: 50% !important;
}
.politictalk-room-logo {
@@ -1214,20 +1228,74 @@
return String(value || '').replace(/\s+/g, ' ').trim().toLowerCase();
}
- function isPoliticTalkInitialsAvatar(element) {
- if (!element || element.tagName === 'IMG' || element.querySelector('img')) {
- return false;
- }
+ function getPoliticTalkElementArea(element) {
+ var rect = element.getBoundingClientRect();
- var text = String(element.textContent || '').replace(/\s+/g, '').trim();
+ return Math.max(0, rect.width) * Math.max(0, rect.height);
+ }
- if (!text || text.length > 4) {
+ function isPoliticTalkTileCandidate(element, stageRect) {
+ if (!element || element === document.body || element.id === 'videospace') {
return false;
}
var rect = element.getBoundingClientRect();
- if (rect.width < 36 || rect.height < 36) {
+ if (rect.width < 160 || rect.height < 140) {
+ return false;
+ }
+
+ if (stageRect && (rect.width > stageRect.width + 8 || rect.height > stageRect.height + 8)) {
+ return false;
+ }
+
+ var elementId = element.id || '';
+ var className = String(element.className || '');
+
+ if (elementId === 'localVideo_container' || elementId.indexOf('remoteVideo_') === 0) {
+ return true;
+ }
+
+ if (className.indexOf('videocontainer') === -1 && className.indexOf('video-container') === -1) {
+ return false;
+ }
+
+ return Boolean(element.querySelector('img, canvas, [class*="avatar"], [class*="Avatar"], .displayname, .subject'));
+ }
+
+ function getPoliticTalkTileCandidates(videospace) {
+ var stageRect = videospace.getBoundingClientRect();
+ var candidates = Array.prototype.slice.call(videospace.querySelectorAll([
+ '#localVideo_container',
+ '[id^="remoteVideo_"]',
+ '.videocontainer',
+ '.video-container'
+ ].join(','))).filter(function(candidate) {
+ return isPoliticTalkTileCandidate(candidate, stageRect);
+ });
+
+ return candidates.filter(function(candidate) {
+ return !candidates.some(function(otherCandidate) {
+ return otherCandidate !== candidate
+ && candidate.contains(otherCandidate)
+ && getPoliticTalkElementArea(otherCandidate) >= 12000;
+ });
+ });
+ }
+
+ function isPoliticTalkAvatarShell(element, tile) {
+ if (!element || element === tile || element.tagName === 'IMG' || element.tagName === 'CANVAS') {
+ return false;
+ }
+
+ if (element.querySelector('button, [role="button"], input, textarea, select')) {
+ return false;
+ }
+
+ var rect = element.getBoundingClientRect();
+ var tileRect = tile.getBoundingClientRect();
+
+ if (rect.width < 44 || rect.height < 44 || rect.width > tileRect.width * 0.72 || rect.height > tileRect.height * 0.72) {
return false;
}
@@ -1237,13 +1305,50 @@
return false;
}
- var style = window.getComputedStyle(element);
- var radius = style.borderTopLeftRadius || '';
- var numericRadius = Number.parseFloat(radius);
- var hasCircularRadius = radius.indexOf('%') !== -1
- || (Number.isFinite(numericRadius) && numericRadius >= Math.min(rect.width, rect.height) * 0.35);
+ var text = String(element.textContent || '').replace(/\s+/g, '').trim();
+ var hasInitials = Boolean(text) && text.length <= 4 && !element.querySelector('img, canvas, video');
+ var hasImage = Boolean(element.querySelector('img, canvas'));
+ var hasAvatarClass = /avatar/i.test(String(element.className || ''));
- return hasCircularRadius;
+ return hasInitials || hasImage || hasAvatarClass;
+ }
+
+ function isPoliticTalkInitialsAvatar(element) {
+ if (!element || element.querySelector('img, canvas, video')) {
+ return false;
+ }
+
+ var text = String(element.textContent || '').replace(/\s+/g, '').trim();
+
+ return Boolean(text) && text.length <= 4;
+ }
+
+ function isPoliticTalkTransparentTileLayer(element, tile) {
+ if (!element || element === tile || element.classList.contains('politictalk-avatar-shell')) {
+ return false;
+ }
+
+ if (element.closest('.politictalk-avatar-shell')) {
+ return false;
+ }
+
+ if (element.querySelector('button, [role="button"], input, textarea, select')) {
+ return false;
+ }
+
+ var rect = element.getBoundingClientRect();
+ var tileRect = tile.getBoundingClientRect();
+ var coversTile = rect.width >= tileRect.width * 0.72 && rect.height >= tileRect.height * 0.72;
+
+ if (!coversTile) {
+ return false;
+ }
+
+ var style = window.getComputedStyle(element);
+ var backgroundColor = style.backgroundColor || '';
+
+ return backgroundColor !== 'rgba(0, 0, 0, 0)'
+ && backgroundColor !== 'transparent';
}
function applyPoliticTalkTileTheme() {
@@ -1257,19 +1362,35 @@
return;
}
- videospace.querySelectorAll([
- '.avatar',
- '.userAvatar',
- '[class*="avatar"]',
- '[class*="Avatar"]',
- 'div',
- 'span'
- ].join(',')).forEach(function(candidate) {
- if (!isPoliticTalkInitialsAvatar(candidate)) {
- return;
- }
+ videospace.querySelectorAll(
+ '.politictalk-themed-tile, .politictalk-tile-transparent-layer, .politictalk-avatar-shell, .politictalk-avatar-themed'
+ ).forEach(function(element) {
+ element.classList.remove(
+ 'politictalk-themed-tile',
+ 'politictalk-tile-transparent-layer',
+ 'politictalk-avatar-shell',
+ 'politictalk-avatar-themed'
+ );
+ });
- candidate.classList.add('politictalk-avatar-themed');
+ getPoliticTalkTileCandidates(videospace).forEach(function(tile) {
+ tile.classList.add('politictalk-themed-tile');
+
+ tile.querySelectorAll('div, span').forEach(function(candidate) {
+ if (isPoliticTalkAvatarShell(candidate, tile)) {
+ candidate.classList.add('politictalk-avatar-shell');
+
+ if (isPoliticTalkInitialsAvatar(candidate)) {
+ candidate.classList.add('politictalk-avatar-themed');
+ }
+
+ return;
+ }
+
+ if (isPoliticTalkTransparentTileLayer(candidate, tile)) {
+ candidate.classList.add('politictalk-tile-transparent-layer');
+ }
+ });
});
}