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

tiles c

Browse Source
This commit is contained in:
Amardeep
2026-05-31 01:48:37 +05:30
parent 213e5ac0e2
commit 384785804b
1 changed files with 154 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

187
web/plugin.head.html
View File

@@ -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');
}
});
});
}