diff --git a/web/plugin.head.html b/web/plugin.head.html index 31d5ca2..8a7efd7 100644 --- a/web/plugin.head.html +++ b/web/plugin.head.html @@ -11,7 +11,11 @@ } html:not(.politictalk-direct-access-blocked) { + --politictalk-avatar-background: #63477a; + --politictalk-stage-bottom-inset: 92px; + --politictalk-stage-side-inset: 8px; --politictalk-stage-top-inset: 96px; + --politictalk-tile-border-color: rgba(179, 165, 228, 0.72); --politictalk-toolbar-bottom-offset: 12px; --politictalk-toolbar-mobile-scale: 0.96; } @@ -40,9 +44,31 @@ } html.politictalk-stage-brand-inset:not(.politictalk-direct-access-blocked) #videospace { + bottom: var(--politictalk-stage-bottom-inset, 92px) !important; box-sizing: border-box !important; - height: calc(100% - var(--politictalk-stage-top-inset, 96px)) !important; + height: calc(100% - var(--politictalk-stage-top-inset, 96px) - var(--politictalk-stage-bottom-inset, 92px)) !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: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_"] { + 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-avatar-themed { + background-color: var(--politictalk-avatar-background, #63477a) !important; } .politictalk-room-logo { @@ -79,6 +105,11 @@ } @media (prefers-color-scheme: light) { + html:not(.politictalk-direct-access-blocked) { + --politictalk-avatar-background: #b3a5e4; + --politictalk-tile-border-color: rgba(99, 71, 122, 0.58); + } + html:not(.politictalk-direct-access-blocked), html:not(.politictalk-direct-access-blocked) body, html:not(.politictalk-direct-access-blocked) #react, @@ -508,6 +539,8 @@ } html:not(.politictalk-direct-access-blocked) { + --politictalk-stage-bottom-inset: 104px; + --politictalk-stage-side-inset: 6px; --politictalk-stage-top-inset: 88px; } @@ -1181,6 +1214,88 @@ return String(value || '').replace(/\s+/g, ' ').trim().toLowerCase(); } + function isPoliticTalkInitialsAvatar(element) { + if (!element || element.tagName === 'IMG' || element.querySelector('img')) { + return false; + } + + var text = String(element.textContent || '').replace(/\s+/g, '').trim(); + + if (!text || text.length > 4) { + return false; + } + + var rect = element.getBoundingClientRect(); + + if (rect.width < 36 || rect.height < 36) { + return false; + } + + var ratio = rect.width / rect.height; + + if (ratio < 0.72 || ratio > 1.28) { + 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); + + return hasCircularRadius; + } + + function applyPoliticTalkTileTheme() { + if (directAccessBlocked || !document.body) { + return; + } + + var videospace = document.getElementById('videospace'); + + if (!videospace) { + return; + } + + videospace.querySelectorAll([ + '.avatar', + '.userAvatar', + '[class*="avatar"]', + '[class*="Avatar"]', + 'div', + 'span' + ].join(',')).forEach(function(candidate) { + if (!isPoliticTalkInitialsAvatar(candidate)) { + return; + } + + candidate.classList.add('politictalk-avatar-themed'); + }); + } + + function mountPoliticTalkTileTheme() { + applyPoliticTalkTileTheme(); + + if (window.politicTalkTileThemeObserver || !document.body) { + return; + } + + window.politicTalkTileThemeObserver = new MutationObserver(function() { + window.cancelAnimationFrame(window.politicTalkTileThemeFrame); + window.politicTalkTileThemeFrame = window.requestAnimationFrame(applyPoliticTalkTileTheme); + }); + window.politicTalkTileThemeObserver.observe(document.body, { + attributes: true, + attributeFilter: [ 'class', 'style' ], + childList: true, + characterData: true, + subtree: true + }); + + window.clearInterval(window.politicTalkTileThemeInterval); + window.politicTalkTileThemeInterval = window.setInterval(applyPoliticTalkTileTheme, 1000); + } + function isPoliticTalkModerationAction(text) { return text.indexOf('allow audio') !== -1 || text.indexOf('allow video') !== -1 @@ -1539,6 +1654,7 @@ mountHostHangupPolicy(); mountMobileToolbarPositioning(); mountPoliticTalkStageBrandInset(); + mountPoliticTalkTileTheme(); mountPoliticTalkModerationNotificationPolicy(); mountPoliticTalkAudioOnlyUiPolicy(); mountPoliticTalkRoomChatOnlyPolicy(); @@ -1550,6 +1666,7 @@ mountHostHangupPolicy(); mountMobileToolbarPositioning(); mountPoliticTalkStageBrandInset(); + mountPoliticTalkTileTheme(); mountPoliticTalkModerationNotificationPolicy(); mountPoliticTalkAudioOnlyUiPolicy(); mountPoliticTalkRoomChatOnlyPolicy();