tiles

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