position fina

web/plugin.head.html

@@ -87,7 +87,10 @@
         max-height: 100% !important;
     }
 
-    html:not(.politictalk-direct-access-blocked) #videospace .politictalk-themed-tile {
+    html:not(.politictalk-direct-access-blocked) #videospace .politictalk-themed-tile,
+    html:not(.politictalk-direct-access-blocked) #videospace #remoteVideos [id^="participant_"],
+    html:not(.politictalk-direct-access-blocked) #videospace #remoteVideos [id^="remoteVideo_"],
+    html:not(.politictalk-direct-access-blocked) #videospace #remoteVideos #localVideo_container {
         background: transparent !important;
         background-color: transparent !important;
         border: 0 !important;
@@ -115,7 +118,10 @@
         --politictalk-tile-border-color: #63477a;
     }
 
-    html:not(.politictalk-direct-access-blocked) #videospace .politictalk-themed-tile::after {
+    html:not(.politictalk-direct-access-blocked) #videospace .politictalk-themed-tile::after,
+    html:not(.politictalk-direct-access-blocked) #videospace #remoteVideos [id^="participant_"]::after,
+    html:not(.politictalk-direct-access-blocked) #videospace #remoteVideos [id^="remoteVideo_"]::after,
+    html:not(.politictalk-direct-access-blocked) #videospace #remoteVideos #localVideo_container::after {
         border: 2px solid var(--politictalk-tile-border-color, #63477a) !important;
         border-radius: 3px !important;
         bottom: 2px;
@@ -144,6 +150,14 @@
         background-image: none !important;
     }
 
+    html:not(.politictalk-direct-access-blocked) #videospace #remoteVideos [id^="participant_"] > [class*="containerBackground"],
+    html:not(.politictalk-direct-access-blocked) #videospace #remoteVideos [id^="remoteVideo_"] > [class*="containerBackground"],
+    html:not(.politictalk-direct-access-blocked) #videospace #remoteVideos #localVideo_container > [class*="containerBackground"] {
+        background: transparent !important;
+        background-color: transparent !important;
+        background-image: none !important;
+    }
+
     html:not(.politictalk-direct-access-blocked) #videospace .politictalk-avatar-shell {
         background: transparent !important;
         border-radius: 50% !important;
@@ -157,6 +171,28 @@
         overflow: hidden !important;
     }
 
+    html:not(.politictalk-direct-access-blocked) #videospace .politictalk-themed-tile > .avatar-container,
+    html:not(.politictalk-direct-access-blocked) #videospace .politictalk-themed-tile > [class*="avatar-container"],
+    html:not(.politictalk-direct-access-blocked) #videospace .politictalk-themed-tile > [class*="avatarContainer"],
+    html:not(.politictalk-direct-access-blocked) #videospace #remoteVideos [id^="participant_"] > .avatar-container,
+    html:not(.politictalk-direct-access-blocked) #videospace #remoteVideos [id^="participant_"] > [class*="avatar-container"],
+    html:not(.politictalk-direct-access-blocked) #videospace #remoteVideos [id^="participant_"] > [class*="avatarContainer"],
+    html:not(.politictalk-direct-access-blocked) #videospace #remoteVideos [id^="remoteVideo_"] > .avatar-container,
+    html:not(.politictalk-direct-access-blocked) #videospace #remoteVideos [id^="remoteVideo_"] > [class*="avatar-container"],
+    html:not(.politictalk-direct-access-blocked) #videospace #remoteVideos [id^="remoteVideo_"] > [class*="avatarContainer"],
+    html:not(.politictalk-direct-access-blocked) #videospace #remoteVideos #localVideo_container > .avatar-container,
+    html:not(.politictalk-direct-access-blocked) #videospace #remoteVideos #localVideo_container > [class*="avatar-container"],
+    html:not(.politictalk-direct-access-blocked) #videospace #remoteVideos #localVideo_container > [class*="avatarContainer"] {
+        bottom: auto !important;
+        left: 50% !important;
+        margin: 0 !important;
+        position: absolute !important;
+        right: auto !important;
+        top: 50% !important;
+        transform: translate(-50%, -50%) !important;
+    }
+
+
     html:not(.politictalk-direct-access-blocked) #largeVideoContainer #dominantSpeaker {
         align-items: center !important;
         bottom: 0 !important;
@@ -1764,6 +1800,7 @@
 
         function getPoliticTalkTileCandidates(videospace) {
             var stageRect = videospace.getBoundingClientRect();
+            var renderedTiles = getPoliticTalkRenderedParticipantTiles(videospace, 160, 140);
             var candidates = Array.prototype.slice.call(videospace.querySelectorAll([
                 '#localVideo_container',
                 '[id^="remoteVideo_"]',
@@ -1774,8 +1811,12 @@
                 return isPoliticTalkTileCandidate(candidate, stageRect);
             });
 
-            return candidates.filter(function(candidate) {
+            var uniqueCandidates = renderedTiles.concat(candidates).filter(function(candidate, index, allCandidates) {
-                return !candidates.some(function(otherCandidate) {
+                return allCandidates.indexOf(candidate) === index;
+            });
+
+            return uniqueCandidates.filter(function(candidate) {
+                return !uniqueCandidates.some(function(otherCandidate) {
                     return otherCandidate !== candidate
                         && candidate.contains(otherCandidate)
                         && getPoliticTalkElementArea(otherCandidate) >= 12000;
@@ -1805,14 +1846,16 @@
             });
         }
 
-        function getPoliticTalkRenderedParticipantTileCount(videospace) {
+        function getPoliticTalkRenderedParticipantTiles(videospace, minimumWidth, minimumHeight) {
             if (!videospace) {
-                return 0;
+                return [];
             }
 
             var remoteVideos = videospace.querySelector('#remoteVideos') || videospace.querySelector('.remote-videos');
             var scope = remoteVideos || videospace;
             var countedIds = {};
+            var minWidth = Number.isFinite(minimumWidth) ? minimumWidth : 44;
+            var minHeight = Number.isFinite(minimumHeight) ? minimumHeight : 44;
 
             return Array.prototype.slice.call(scope.querySelectorAll([
                 '#localVideo_container',
@@ -1832,14 +1875,18 @@
                 var rect = candidate.getBoundingClientRect();
                 var styles = window.getComputedStyle(candidate);
 
-                if (rect.width < 44 || rect.height < 44 || styles.display === 'none' || styles.visibility === 'hidden') {
+                if (rect.width < minWidth || rect.height < minHeight || styles.display === 'none' || styles.visibility === 'hidden') {
                     return false;
                 }
 
                 countedIds[candidateId] = true;
 
                 return true;
-            }).length;
+            });
+        }
+
+        function getPoliticTalkRenderedParticipantTileCount(videospace) {
+            return getPoliticTalkRenderedParticipantTiles(videospace, 44, 44).length;
         }
 
         function isPoliticTalkAvatarShell(element, tile) {
@@ -1936,6 +1983,31 @@
                 && backgroundColor !== 'transparent';
         }
 
+        function centerPoliticTalkTileAvatar(tile) {
+            if (!tile) {
+                return;
+            }
+
+            Array.prototype.slice.call(tile.children || []).forEach(function(candidate) {
+                var className = String(candidate.className || '');
+                var isAvatarContainer = candidate.classList.contains('avatar-container')
+                    || className.indexOf('avatar-container') !== -1
+                    || className.indexOf('avatarContainer') !== -1;
+
+                if (!isAvatarContainer) {
+                    return;
+                }
+
+                setPoliticTalkImportantStyle(candidate, 'bottom', 'auto');
+                setPoliticTalkImportantStyle(candidate, 'left', '50%');
+                setPoliticTalkImportantStyle(candidate, 'margin', '0');
+                setPoliticTalkImportantStyle(candidate, 'position', 'absolute');
+                setPoliticTalkImportantStyle(candidate, 'right', 'auto');
+                setPoliticTalkImportantStyle(candidate, 'top', '50%');
+                setPoliticTalkImportantStyle(candidate, 'transform', 'translate(-50%, -50%)');
+            });
+        }
+
         function getPoliticTalkAvailableTileHeight(videospace) {
             var videospaceRect = videospace.getBoundingClientRect();
             var toolbar = getVisiblePoliticTalkToolbar();
@@ -2421,6 +2493,7 @@
                 setPoliticTalkImportantStyle(metric.tile, 'max-height', nextHeight + 'px');
                 setPoliticTalkImportantStyle(metric.tile, 'box-sizing', 'border-box');
                 setPoliticTalkImportantStyle(metric.tile, 'overflow', 'hidden');
+                centerPoliticTalkTileAvatar(metric.tile);
             });
         }
 
@@ -2453,6 +2526,7 @@
 
                 applyPoliticTalkRoleToTile(tile, metadata);
                 applyPoliticTalkAvatarThemeInContainer(tile, metadata);
+                centerPoliticTalkTileAvatar(tile);
 
                 tile.querySelectorAll('div, span').forEach(function(candidate) {
                     if (isPoliticTalkTransparentTileLayer(candidate, tile)) {