From 15add7f055dcde73ac2c567fb4be987522588aa8 Mon Sep 17 00:00:00 2001 From: Amardeep Date: Sun, 31 May 2026 02:10:22 +0530 Subject: [PATCH] tiles co --- web/plugin.head.html | 98 ++++++++++++++++++++++++++++++++++++++++---- 1 file changed, 89 insertions(+), 9 deletions(-) diff --git a/web/plugin.head.html b/web/plugin.head.html index 44b0784..f8a5c06 100644 --- a/web/plugin.head.html +++ b/web/plugin.head.html @@ -12,7 +12,7 @@ html:not(.politictalk-direct-access-blocked) { --politictalk-avatar-background: #63477a; - --politictalk-stage-bottom-inset: 92px; + --politictalk-stage-bottom-inset: 128px; --politictalk-stage-side-inset: 8px; --politictalk-stage-top-inset: 96px; --politictalk-tile-border-color: rgba(179, 165, 228, 0.72); @@ -44,15 +44,29 @@ } html.politictalk-stage-brand-inset:not(.politictalk-direct-access-blocked) #videospace { - bottom: var(--politictalk-stage-bottom-inset, 92px) !important; + bottom: var(--politictalk-stage-bottom-inset, 128px) !important; box-sizing: border-box !important; - height: calc(100% - var(--politictalk-stage-top-inset, 96px) - var(--politictalk-stage-bottom-inset, 92px)) !important; + height: calc(100% - var(--politictalk-stage-top-inset, 96px) - var(--politictalk-stage-bottom-inset, 128px)) !important; left: var(--politictalk-stage-side-inset, 8px) !important; right: var(--politictalk-stage-side-inset, 8px) !important; top: var(--politictalk-stage-top-inset, 96px) !important; width: auto !important; } + html.politictalk-stage-brand-inset:not(.politictalk-direct-access-blocked) #videospace .filmstrip, + html.politictalk-stage-brand-inset:not(.politictalk-direct-access-blocked) #videospace #remoteVideos, + html.politictalk-stage-brand-inset:not(.politictalk-direct-access-blocked) #videospace .filmstrip__videos, + html.politictalk-stage-brand-inset:not(.politictalk-direct-access-blocked) #videospace .remote-videos { + height: 100% !important; + max-height: 100% !important; + min-height: 0 !important; + overflow: hidden !important; + } + + html.politictalk-stage-brand-inset:not(.politictalk-direct-access-blocked) #videospace .remote-videos > div { + max-height: 100% !important; + } + html:not(.politictalk-direct-access-blocked) #videospace .politictalk-themed-tile { background: transparent !important; background-color: transparent !important; @@ -60,6 +74,15 @@ box-sizing: border-box !important; } + html:not(.politictalk-direct-access-blocked) #videospace #largeVideoContainer, + html:not(.politictalk-direct-access-blocked) #videospace #largeVideoContainer.politictalk-themed-tile, + html:not(.politictalk-direct-access-blocked) #videospace .filmstrip, + html:not(.politictalk-direct-access-blocked) #videospace .filmstrip__videos, + html:not(.politictalk-direct-access-blocked) #videospace .remote-videos { + border: 0 !important; + outline: 0 !important; + } + html:not(.politictalk-direct-access-blocked) #videospace .politictalk-tile-transparent-layer { background: transparent !important; background-color: transparent !important; @@ -67,6 +90,21 @@ } html:not(.politictalk-direct-access-blocked) #videospace .politictalk-avatar-shell { + background: transparent !important; + border-radius: 50% !important; + overflow: hidden !important; + } + + html:not(.politictalk-direct-access-blocked) #videospace .avatar-container, + html:not(.politictalk-direct-access-blocked) #videospace #dominantSpeakerAvatarContainer { + background: transparent !important; + border-radius: 50% !important; + overflow: hidden !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 #dominantSpeakerAvatar:not(img) { border-radius: 50% !important; overflow: hidden !important; } @@ -81,7 +119,9 @@ 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 { + html:not(.politictalk-direct-access-blocked) #videospace .politictalk-avatar-themed picture > img, + html:not(.politictalk-direct-access-blocked) #videospace img.avatar, + html:not(.politictalk-direct-access-blocked) #videospace img.userAvatar { border-radius: 50% !important; } @@ -553,7 +593,7 @@ } html:not(.politictalk-direct-access-blocked) { - --politictalk-stage-bottom-inset: 104px; + --politictalk-stage-bottom-inset: 132px; --politictalk-stage-side-inset: 6px; --politictalk-stage-top-inset: 88px; } @@ -1239,6 +1279,16 @@ return false; } + var elementId = element.id || ''; + + if (elementId === 'largeVideoContainer' + || elementId === 'largeVideoElementsContainer' + || elementId === 'largeVideoWrapper' + || elementId === 'dominantSpeaker' + || elementId === 'dominantSpeakerAvatarContainer') { + return false; + } + var rect = element.getBoundingClientRect(); if (rect.width < 160 || rect.height < 140) { @@ -1249,10 +1299,11 @@ return false; } - var elementId = element.id || ''; var className = String(element.className || ''); - if (elementId === 'localVideo_container' || elementId.indexOf('remoteVideo_') === 0) { + if (elementId === 'localVideo_container' + || elementId.indexOf('remoteVideo_') === 0 + || elementId.indexOf('participant_') === 0) { return true; } @@ -1268,6 +1319,7 @@ var candidates = Array.prototype.slice.call(videospace.querySelectorAll([ '#localVideo_container', '[id^="remoteVideo_"]', + '[id^="participant_"]', '.videocontainer', '.video-container' ].join(','))).filter(function(candidate) { @@ -1323,6 +1375,32 @@ return Boolean(text) && text.length <= 4; } + function getPoliticTalkInitialsAvatarTarget(element) { + if (!element) { + return null; + } + + var elementId = element.id || ''; + var className = String(element.className || ''); + var isAvatarElement = elementId === 'dominantSpeakerAvatar' + || /(^|\s)(avatar|userAvatar)(\s|$)/.test(className) + || /avatar/i.test(className); + + if (isAvatarElement && isPoliticTalkInitialsAvatar(element)) { + return element; + } + + return Array.prototype.slice.call(element.querySelectorAll([ + '#dominantSpeakerAvatar:not(img)', + '.avatar:not(img)', + '.userAvatar:not(img)', + '[class*="avatar"]:not(img)', + '[class*="Avatar"]:not(img)' + ].join(','))).find(function(candidate) { + return isPoliticTalkInitialsAvatar(candidate); + }) || null; + } + function isPoliticTalkTransparentTileLayer(element, tile) { if (!element || element === tile || element.classList.contains('politictalk-avatar-shell')) { return false; @@ -1378,10 +1456,12 @@ tile.querySelectorAll('div, span').forEach(function(candidate) { if (isPoliticTalkAvatarShell(candidate, tile)) { + var initialsTarget = getPoliticTalkInitialsAvatarTarget(candidate); + candidate.classList.add('politictalk-avatar-shell'); - if (isPoliticTalkInitialsAvatar(candidate)) { - candidate.classList.add('politictalk-avatar-themed'); + if (initialsTarget) { + initialsTarget.classList.add('politictalk-avatar-themed'); } return;