From 532fdd98d8414a82ecbc0e98d4116b8cd3338bdc Mon Sep 17 00:00:00 2001 From: Amardeep Date: Sat, 6 Jun 2026 02:27:46 +0530 Subject: [PATCH] position fina --- web/plugin.head.html | 90 ++++++++++++++++++++++++++++++++++++++++---- 1 file changed, 82 insertions(+), 8 deletions(-) diff --git a/web/plugin.head.html b/web/plugin.head.html index 92a2dd0..f6603b7 100644 --- a/web/plugin.head.html +++ b/web/plugin.head.html @@ -87,7 +87,10 @@ max-height: 100% !important; } - html:not(.politictalk-direct-access-blocked) #videospace .politictalk-themed-tile { + html:not(.politictalk-direct-access-blocked) #videospace .politictalk-themed-tile, + html:not(.politictalk-direct-access-blocked) #videospace #remoteVideos [id^="participant_"], + html:not(.politictalk-direct-access-blocked) #videospace #remoteVideos [id^="remoteVideo_"], + html:not(.politictalk-direct-access-blocked) #videospace #remoteVideos #localVideo_container { background: transparent !important; background-color: transparent !important; border: 0 !important; @@ -115,7 +118,10 @@ --politictalk-tile-border-color: #63477a; } - html:not(.politictalk-direct-access-blocked) #videospace .politictalk-themed-tile::after { + html:not(.politictalk-direct-access-blocked) #videospace .politictalk-themed-tile::after, + html:not(.politictalk-direct-access-blocked) #videospace #remoteVideos [id^="participant_"]::after, + html:not(.politictalk-direct-access-blocked) #videospace #remoteVideos [id^="remoteVideo_"]::after, + html:not(.politictalk-direct-access-blocked) #videospace #remoteVideos #localVideo_container::after { border: 2px solid var(--politictalk-tile-border-color, #63477a) !important; border-radius: 3px !important; bottom: 2px; @@ -144,6 +150,14 @@ background-image: none !important; } + html:not(.politictalk-direct-access-blocked) #videospace #remoteVideos [id^="participant_"] > [class*="containerBackground"], + html:not(.politictalk-direct-access-blocked) #videospace #remoteVideos [id^="remoteVideo_"] > [class*="containerBackground"], + html:not(.politictalk-direct-access-blocked) #videospace #remoteVideos #localVideo_container > [class*="containerBackground"] { + background: transparent !important; + background-color: transparent !important; + background-image: none !important; + } + html:not(.politictalk-direct-access-blocked) #videospace .politictalk-avatar-shell { background: transparent !important; border-radius: 50% !important; @@ -157,6 +171,28 @@ overflow: hidden !important; } + html:not(.politictalk-direct-access-blocked) #videospace .politictalk-themed-tile > .avatar-container, + html:not(.politictalk-direct-access-blocked) #videospace .politictalk-themed-tile > [class*="avatar-container"], + html:not(.politictalk-direct-access-blocked) #videospace .politictalk-themed-tile > [class*="avatarContainer"], + html:not(.politictalk-direct-access-blocked) #videospace #remoteVideos [id^="participant_"] > .avatar-container, + html:not(.politictalk-direct-access-blocked) #videospace #remoteVideos [id^="participant_"] > [class*="avatar-container"], + html:not(.politictalk-direct-access-blocked) #videospace #remoteVideos [id^="participant_"] > [class*="avatarContainer"], + html:not(.politictalk-direct-access-blocked) #videospace #remoteVideos [id^="remoteVideo_"] > .avatar-container, + html:not(.politictalk-direct-access-blocked) #videospace #remoteVideos [id^="remoteVideo_"] > [class*="avatar-container"], + html:not(.politictalk-direct-access-blocked) #videospace #remoteVideos [id^="remoteVideo_"] > [class*="avatarContainer"], + html:not(.politictalk-direct-access-blocked) #videospace #remoteVideos #localVideo_container > .avatar-container, + html:not(.politictalk-direct-access-blocked) #videospace #remoteVideos #localVideo_container > [class*="avatar-container"], + html:not(.politictalk-direct-access-blocked) #videospace #remoteVideos #localVideo_container > [class*="avatarContainer"] { + bottom: auto !important; + left: 50% !important; + margin: 0 !important; + position: absolute !important; + right: auto !important; + top: 50% !important; + transform: translate(-50%, -50%) !important; + } + + html:not(.politictalk-direct-access-blocked) #largeVideoContainer #dominantSpeaker { align-items: center !important; bottom: 0 !important; @@ -1764,6 +1800,7 @@ function getPoliticTalkTileCandidates(videospace) { var stageRect = videospace.getBoundingClientRect(); + var renderedTiles = getPoliticTalkRenderedParticipantTiles(videospace, 160, 140); var candidates = Array.prototype.slice.call(videospace.querySelectorAll([ '#localVideo_container', '[id^="remoteVideo_"]', @@ -1774,8 +1811,12 @@ return isPoliticTalkTileCandidate(candidate, stageRect); }); - return candidates.filter(function(candidate) { - return !candidates.some(function(otherCandidate) { + var uniqueCandidates = renderedTiles.concat(candidates).filter(function(candidate, index, allCandidates) { + return allCandidates.indexOf(candidate) === index; + }); + + return uniqueCandidates.filter(function(candidate) { + return !uniqueCandidates.some(function(otherCandidate) { return otherCandidate !== candidate && candidate.contains(otherCandidate) && getPoliticTalkElementArea(otherCandidate) >= 12000; @@ -1805,14 +1846,16 @@ }); } - function getPoliticTalkRenderedParticipantTileCount(videospace) { + function getPoliticTalkRenderedParticipantTiles(videospace, minimumWidth, minimumHeight) { if (!videospace) { - return 0; + return []; } var remoteVideos = videospace.querySelector('#remoteVideos') || videospace.querySelector('.remote-videos'); var scope = remoteVideos || videospace; var countedIds = {}; + var minWidth = Number.isFinite(minimumWidth) ? minimumWidth : 44; + var minHeight = Number.isFinite(minimumHeight) ? minimumHeight : 44; return Array.prototype.slice.call(scope.querySelectorAll([ '#localVideo_container', @@ -1832,14 +1875,18 @@ var rect = candidate.getBoundingClientRect(); var styles = window.getComputedStyle(candidate); - if (rect.width < 44 || rect.height < 44 || styles.display === 'none' || styles.visibility === 'hidden') { + if (rect.width < minWidth || rect.height < minHeight || styles.display === 'none' || styles.visibility === 'hidden') { return false; } countedIds[candidateId] = true; return true; - }).length; + }); + } + + function getPoliticTalkRenderedParticipantTileCount(videospace) { + return getPoliticTalkRenderedParticipantTiles(videospace, 44, 44).length; } function isPoliticTalkAvatarShell(element, tile) { @@ -1936,6 +1983,31 @@ && backgroundColor !== 'transparent'; } + function centerPoliticTalkTileAvatar(tile) { + if (!tile) { + return; + } + + Array.prototype.slice.call(tile.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', '50%'); + setPoliticTalkImportantStyle(candidate, 'transform', 'translate(-50%, -50%)'); + }); + } + function getPoliticTalkAvailableTileHeight(videospace) { var videospaceRect = videospace.getBoundingClientRect(); var toolbar = getVisiblePoliticTalkToolbar(); @@ -2421,6 +2493,7 @@ setPoliticTalkImportantStyle(metric.tile, 'max-height', nextHeight + 'px'); setPoliticTalkImportantStyle(metric.tile, 'box-sizing', 'border-box'); setPoliticTalkImportantStyle(metric.tile, 'overflow', 'hidden'); + centerPoliticTalkTileAvatar(metric.tile); }); } @@ -2453,6 +2526,7 @@ applyPoliticTalkRoleToTile(tile, metadata); applyPoliticTalkAvatarThemeInContainer(tile, metadata); + centerPoliticTalkTileAvatar(tile); tile.querySelectorAll('div, span').forEach(function(candidate) { if (isPoliticTalkTransparentTileLayer(candidate, tile)) {