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();