tiles co

web/plugin.head.html

@@ -12,7 +12,7 @@
 
     html:not(.politictalk-direct-access-blocked) {
         --politictalk-avatar-background: #63477a;
-        --politictalk-stage-bottom-inset: 92px;
+        --politictalk-stage-bottom-inset: 128px;
         --politictalk-stage-side-inset: 8px;
         --politictalk-stage-top-inset: 96px;
         --politictalk-tile-border-color: rgba(179, 165, 228, 0.72);
@@ -44,15 +44,29 @@
     }
 
     html.politictalk-stage-brand-inset:not(.politictalk-direct-access-blocked) #videospace {
-        bottom: var(--politictalk-stage-bottom-inset, 92px) !important;
+        bottom: var(--politictalk-stage-bottom-inset, 128px) !important;
         box-sizing: border-box !important;
-        height: calc(100% - var(--politictalk-stage-top-inset, 96px) - var(--politictalk-stage-bottom-inset, 92px)) !important;
+        height: calc(100% - var(--politictalk-stage-top-inset, 96px) - var(--politictalk-stage-bottom-inset, 128px)) !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.politictalk-stage-brand-inset:not(.politictalk-direct-access-blocked) #videospace .filmstrip,
+    html.politictalk-stage-brand-inset:not(.politictalk-direct-access-blocked) #videospace #remoteVideos,
+    html.politictalk-stage-brand-inset:not(.politictalk-direct-access-blocked) #videospace .filmstrip__videos,
+    html.politictalk-stage-brand-inset:not(.politictalk-direct-access-blocked) #videospace .remote-videos {
+        height: 100% !important;
+        max-height: 100% !important;
+        min-height: 0 !important;
+        overflow: hidden !important;
+    }
+
+    html.politictalk-stage-brand-inset:not(.politictalk-direct-access-blocked) #videospace .remote-videos > div {
+        max-height: 100% !important;
+    }
+
     html:not(.politictalk-direct-access-blocked) #videospace .politictalk-themed-tile {
         background: transparent !important;
         background-color: transparent !important;
@@ -60,6 +74,15 @@
         box-sizing: border-box !important;
     }
 
+    html:not(.politictalk-direct-access-blocked) #videospace #largeVideoContainer,
+    html:not(.politictalk-direct-access-blocked) #videospace #largeVideoContainer.politictalk-themed-tile,
+    html:not(.politictalk-direct-access-blocked) #videospace .filmstrip,
+    html:not(.politictalk-direct-access-blocked) #videospace .filmstrip__videos,
+    html:not(.politictalk-direct-access-blocked) #videospace .remote-videos {
+        border: 0 !important;
+        outline: 0 !important;
+    }
+
     html:not(.politictalk-direct-access-blocked) #videospace .politictalk-tile-transparent-layer {
         background: transparent !important;
         background-color: transparent !important;
@@ -67,6 +90,21 @@
     }
 
     html:not(.politictalk-direct-access-blocked) #videospace .politictalk-avatar-shell {
+        background: transparent !important;
+        border-radius: 50% !important;
+        overflow: hidden !important;
+    }
+
+    html:not(.politictalk-direct-access-blocked) #videospace .avatar-container,
+    html:not(.politictalk-direct-access-blocked) #videospace #dominantSpeakerAvatarContainer {
+        background: transparent !important;
+        border-radius: 50% !important;
+        overflow: hidden !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 #dominantSpeakerAvatar:not(img) {
         border-radius: 50% !important;
         overflow: hidden !important;
     }
@@ -81,7 +119,9 @@
     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 {
+    html:not(.politictalk-direct-access-blocked) #videospace .politictalk-avatar-themed picture > img,
+    html:not(.politictalk-direct-access-blocked) #videospace img.avatar,
+    html:not(.politictalk-direct-access-blocked) #videospace img.userAvatar {
         border-radius: 50% !important;
     }
 
@@ -553,7 +593,7 @@
         }
 
         html:not(.politictalk-direct-access-blocked) {
-            --politictalk-stage-bottom-inset: 104px;
+            --politictalk-stage-bottom-inset: 132px;
             --politictalk-stage-side-inset: 6px;
             --politictalk-stage-top-inset: 88px;
         }
@@ -1239,6 +1279,16 @@
                 return false;
             }
 
+            var elementId = element.id || '';
+
+            if (elementId === 'largeVideoContainer'
+                    || elementId === 'largeVideoElementsContainer'
+                    || elementId === 'largeVideoWrapper'
+                    || elementId === 'dominantSpeaker'
+                    || elementId === 'dominantSpeakerAvatarContainer') {
+                return false;
+            }
+
             var rect = element.getBoundingClientRect();
 
             if (rect.width < 160 || rect.height < 140) {
@@ -1249,10 +1299,11 @@
                 return false;
             }
 
-            var elementId = element.id || '';
             var className = String(element.className || '');
 
-            if (elementId === 'localVideo_container' || elementId.indexOf('remoteVideo_') === 0) {
+            if (elementId === 'localVideo_container'
+                    || elementId.indexOf('remoteVideo_') === 0
+                    || elementId.indexOf('participant_') === 0) {
                 return true;
             }
 
@@ -1268,6 +1319,7 @@
             var candidates = Array.prototype.slice.call(videospace.querySelectorAll([
                 '#localVideo_container',
                 '[id^="remoteVideo_"]',
+                '[id^="participant_"]',
                 '.videocontainer',
                 '.video-container'
             ].join(','))).filter(function(candidate) {
@@ -1323,6 +1375,32 @@
             return Boolean(text) && text.length <= 4;
         }
 
+        function getPoliticTalkInitialsAvatarTarget(element) {
+            if (!element) {
+                return null;
+            }
+
+            var elementId = element.id || '';
+            var className = String(element.className || '');
+            var isAvatarElement = elementId === 'dominantSpeakerAvatar'
+                || /(^|\s)(avatar|userAvatar)(\s|$)/.test(className)
+                || /avatar/i.test(className);
+
+            if (isAvatarElement && isPoliticTalkInitialsAvatar(element)) {
+                return element;
+            }
+
+            return Array.prototype.slice.call(element.querySelectorAll([
+                '#dominantSpeakerAvatar:not(img)',
+                '.avatar:not(img)',
+                '.userAvatar:not(img)',
+                '[class*="avatar"]:not(img)',
+                '[class*="Avatar"]:not(img)'
+            ].join(','))).find(function(candidate) {
+                return isPoliticTalkInitialsAvatar(candidate);
+            }) || null;
+        }
+
         function isPoliticTalkTransparentTileLayer(element, tile) {
             if (!element || element === tile || element.classList.contains('politictalk-avatar-shell')) {
                 return false;
@@ -1378,10 +1456,12 @@
 
                 tile.querySelectorAll('div, span').forEach(function(candidate) {
                     if (isPoliticTalkAvatarShell(candidate, tile)) {
+                        var initialsTarget = getPoliticTalkInitialsAvatarTarget(candidate);
+
                         candidate.classList.add('politictalk-avatar-shell');
 
-                        if (isPoliticTalkInitialsAvatar(candidate)) {
+                        if (initialsTarget) {
-                            candidate.classList.add('politictalk-avatar-themed');
+                            initialsTarget.classList.add('politictalk-avatar-themed');
                         }
 
                         return;