tiles c

web/plugin.head.html

@@ -53,22 +53,36 @@
         width: auto !important;
     }
 
-    html:not(.politictalk-direct-access-blocked) #videospace .videocontainer,
+    html:not(.politictalk-direct-access-blocked) #videospace .politictalk-themed-tile {
-    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 .politictalk-tile-transparent-layer {
-    html:not(.politictalk-direct-access-blocked) #videospace .userAvatar:not(img),
+        background: transparent !important;
-    html:not(.politictalk-direct-access-blocked) #videospace [class*="avatar"]:not(img),
+        background-color: transparent !important;
-    html:not(.politictalk-direct-access-blocked) #videospace [class*="Avatar"]:not(img),
+        background-image: none !important;
+    }
+
+    html:not(.politictalk-direct-access-blocked) #videospace .politictalk-avatar-shell {
+        border-radius: 50% !important;
+        overflow: hidden !important;
+    }
+
     html:not(.politictalk-direct-access-blocked) #videospace .politictalk-avatar-themed {
         background-color: var(--politictalk-avatar-background, #63477a) !important;
+        border-radius: 50% !important;
+        overflow: hidden !important;
+    }
+
+    html:not(.politictalk-direct-access-blocked) #videospace .politictalk-avatar-shell img,
+    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 {
+        border-radius: 50% !important;
     }
 
     .politictalk-room-logo {
@@ -1214,20 +1228,74 @@
             return String(value || '').replace(/\s+/g, ' ').trim().toLowerCase();
         }
 
-        function isPoliticTalkInitialsAvatar(element) {
+        function getPoliticTalkElementArea(element) {
-            if (!element || element.tagName === 'IMG' || element.querySelector('img')) {
+            var rect = element.getBoundingClientRect();
-                return false;
+
+            return Math.max(0, rect.width) * Math.max(0, rect.height);
         }
 
-            var text = String(element.textContent || '').replace(/\s+/g, '').trim();
+        function isPoliticTalkTileCandidate(element, stageRect) {
-
+            if (!element || element === document.body || element.id === 'videospace') {
-            if (!text || text.length > 4) {
                 return false;
             }
 
             var rect = element.getBoundingClientRect();
 
-            if (rect.width < 36 || rect.height < 36) {
+            if (rect.width < 160 || rect.height < 140) {
+                return false;
+            }
+
+            if (stageRect && (rect.width > stageRect.width + 8 || rect.height > stageRect.height + 8)) {
+                return false;
+            }
+
+            var elementId = element.id || '';
+            var className = String(element.className || '');
+
+            if (elementId === 'localVideo_container' || elementId.indexOf('remoteVideo_') === 0) {
+                return true;
+            }
+
+            if (className.indexOf('videocontainer') === -1 && className.indexOf('video-container') === -1) {
+                return false;
+            }
+
+            return Boolean(element.querySelector('img, canvas, [class*="avatar"], [class*="Avatar"], .displayname, .subject'));
+        }
+
+        function getPoliticTalkTileCandidates(videospace) {
+            var stageRect = videospace.getBoundingClientRect();
+            var candidates = Array.prototype.slice.call(videospace.querySelectorAll([
+                '#localVideo_container',
+                '[id^="remoteVideo_"]',
+                '.videocontainer',
+                '.video-container'
+            ].join(','))).filter(function(candidate) {
+                return isPoliticTalkTileCandidate(candidate, stageRect);
+            });
+
+            return candidates.filter(function(candidate) {
+                return !candidates.some(function(otherCandidate) {
+                    return otherCandidate !== candidate
+                        && candidate.contains(otherCandidate)
+                        && getPoliticTalkElementArea(otherCandidate) >= 12000;
+                });
+            });
+        }
+
+        function isPoliticTalkAvatarShell(element, tile) {
+            if (!element || element === tile || element.tagName === 'IMG' || element.tagName === 'CANVAS') {
+                return false;
+            }
+
+            if (element.querySelector('button, [role="button"], input, textarea, select')) {
+                return false;
+            }
+
+            var rect = element.getBoundingClientRect();
+            var tileRect = tile.getBoundingClientRect();
+
+            if (rect.width < 44 || rect.height < 44 || rect.width > tileRect.width * 0.72 || rect.height > tileRect.height * 0.72) {
                 return false;
             }
 
@@ -1237,13 +1305,50 @@
                 return false;
             }
 
-            var style = window.getComputedStyle(element);
+            var text = String(element.textContent || '').replace(/\s+/g, '').trim();
-            var radius = style.borderTopLeftRadius || '';
+            var hasInitials = Boolean(text) && text.length <= 4 && !element.querySelector('img, canvas, video');
-            var numericRadius = Number.parseFloat(radius);
+            var hasImage = Boolean(element.querySelector('img, canvas'));
-            var hasCircularRadius = radius.indexOf('%') !== -1
+            var hasAvatarClass = /avatar/i.test(String(element.className || ''));
-                || (Number.isFinite(numericRadius) && numericRadius >= Math.min(rect.width, rect.height) * 0.35);
 
-            return hasCircularRadius;
+            return hasInitials || hasImage || hasAvatarClass;
+        }
+
+        function isPoliticTalkInitialsAvatar(element) {
+            if (!element || element.querySelector('img, canvas, video')) {
+                return false;
+            }
+
+            var text = String(element.textContent || '').replace(/\s+/g, '').trim();
+
+            return Boolean(text) && text.length <= 4;
+        }
+
+        function isPoliticTalkTransparentTileLayer(element, tile) {
+            if (!element || element === tile || element.classList.contains('politictalk-avatar-shell')) {
+                return false;
+            }
+
+            if (element.closest('.politictalk-avatar-shell')) {
+                return false;
+            }
+
+            if (element.querySelector('button, [role="button"], input, textarea, select')) {
+                return false;
+            }
+
+            var rect = element.getBoundingClientRect();
+            var tileRect = tile.getBoundingClientRect();
+            var coversTile = rect.width >= tileRect.width * 0.72 && rect.height >= tileRect.height * 0.72;
+
+            if (!coversTile) {
+                return false;
+            }
+
+            var style = window.getComputedStyle(element);
+            var backgroundColor = style.backgroundColor || '';
+
+            return backgroundColor !== 'rgba(0, 0, 0, 0)'
+                && backgroundColor !== 'transparent';
         }
 
         function applyPoliticTalkTileTheme() {
@@ -1257,19 +1362,35 @@
                 return;
             }
 
-            videospace.querySelectorAll([
+            videospace.querySelectorAll(
-                '.avatar',
+                '.politictalk-themed-tile, .politictalk-tile-transparent-layer, .politictalk-avatar-shell, .politictalk-avatar-themed'
-                '.userAvatar',
+            ).forEach(function(element) {
-                '[class*="avatar"]',
+                element.classList.remove(
-                '[class*="Avatar"]',
+                    'politictalk-themed-tile',
-                'div',
+                    'politictalk-tile-transparent-layer',
-                'span'
+                    'politictalk-avatar-shell',
-            ].join(',')).forEach(function(candidate) {
+                    'politictalk-avatar-themed'
-                if (!isPoliticTalkInitialsAvatar(candidate)) {
+                );
+            });
+
+            getPoliticTalkTileCandidates(videospace).forEach(function(tile) {
+                tile.classList.add('politictalk-themed-tile');
+
+                tile.querySelectorAll('div, span').forEach(function(candidate) {
+                    if (isPoliticTalkAvatarShell(candidate, tile)) {
+                        candidate.classList.add('politictalk-avatar-shell');
+
+                        if (isPoliticTalkInitialsAvatar(candidate)) {
+                            candidate.classList.add('politictalk-avatar-themed');
+                        }
+
                         return;
                     }
 
-                candidate.classList.add('politictalk-avatar-themed');
+                    if (isPoliticTalkTransparentTileLayer(candidate, tile)) {
+                        candidate.classList.add('politictalk-tile-transparent-layer');
+                    }
+                });
             });
         }