From 384785804bc7e6615e74afed11016f799c856093 Mon Sep 17 00:00:00 2001 From: Amardeep Date: Sun, 31 May 2026 01:48:37 +0530 Subject: [PATCH] tiles c --- web/plugin.head.html | 187 +++++++++++++++++++++++++++++++++++-------- 1 file changed, 154 insertions(+), 33 deletions(-) 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'); + } + }); }); }