profile picture overflow issue in 2 users box

web/plugin.head.html

@@ -723,6 +723,10 @@
         display: none !important;
     }
 
+    .politictalk-hidden-local-leave-toast {
+        display: none !important;
+    }
+
     .politictalk-hidden-video-screen-control {
         display: none !important;
     }
@@ -1726,6 +1730,147 @@
             });
         }
 
+        function markPoliticTalkLocalMeetingExit() {
+            window.politicTalkLocalMeetingExitStartedAt = Date.now();
+            suppressPoliticTalkLocalLeaveToasts();
+        }
+
+        function isPoliticTalkLocalMeetingExitActive() {
+            var startedAt = Number(window.politicTalkLocalMeetingExitStartedAt || 0);
+
+            if (startedAt && Date.now() - startedAt < 12000) {
+                return true;
+            }
+
+            return document.body
+                && normalizePoliticTalkText(document.body.textContent).indexOf('thank you for using politictalk') !== -1;
+        }
+
+        function isPoliticTalkMeetingExitControl(element) {
+            var control = element;
+
+            while (control && control !== document.body) {
+                if (control.matches && control.matches('button, [role="button"], a')) {
+                    var text = normalizePoliticTalkText([
+                        control.getAttribute('aria-label'),
+                        control.getAttribute('title'),
+                        control.textContent
+                    ].join(' '));
+
+                    return text.indexOf('hang up') !== -1
+                        || text.indexOf('hangup') !== -1
+                        || text.indexOf('leave meeting') !== -1
+                        || text.indexOf('leave conference') !== -1
+                        || text.indexOf('end meeting') !== -1
+                        || text.indexOf('end conference') !== -1;
+                }
+
+                control = control.parentElement;
+            }
+
+            return false;
+        }
+
+        function handlePoliticTalkMeetingExitPointer(event) {
+            if (!event || !event.target || !isPoliticTalkMeetingExitControl(event.target)) {
+                return;
+            }
+
+            markPoliticTalkLocalMeetingExit();
+        }
+
+        function isPoliticTalkLeftMeetingToast(element) {
+            if (!element) {
+                return false;
+            }
+
+            var text = normalizePoliticTalkText(element.textContent);
+
+            if (text.indexOf('thank you for using politictalk') !== -1) {
+                return false;
+            }
+
+            return text.indexOf('left the meeting') !== -1
+                || text.indexOf('left the conference') !== -1;
+        }
+
+        function getPoliticTalkLocalLeaveToastRoot(element) {
+            var root = element;
+            var current = element;
+
+            while (current && current.parentElement && current.parentElement !== document.body) {
+                var parent = current.parentElement;
+                var parentText = normalizePoliticTalkText(parent.textContent);
+
+                if (!isPoliticTalkLeftMeetingToast(parent)) {
+                    break;
+                }
+
+                if (parentText.indexOf('thank you for using politictalk') !== -1) {
+                    break;
+                }
+
+                var rect = parent.getBoundingClientRect();
+
+                if (rect.width > 720 || rect.height > 180) {
+                    break;
+                }
+
+                root = parent;
+                current = parent;
+            }
+
+            return root;
+        }
+
+        function suppressPoliticTalkLocalLeaveToasts() {
+            if (!isPoliticTalkLocalMeetingExitActive() || !document.body) {
+                return;
+            }
+
+            document.querySelectorAll('div, [role="alert"], [class*="notification"], [class*="Notification"]')
+                .forEach(function(candidate) {
+                    if (!isPoliticTalkLeftMeetingToast(candidate)) {
+                        return;
+                    }
+
+                    var toast = getPoliticTalkLocalLeaveToastRoot(candidate);
+
+                    toast.classList.add('politictalk-hidden-local-leave-toast');
+                    toast.setAttribute('aria-hidden', 'true');
+                    toast.setAttribute('tabindex', '-1');
+                });
+        }
+
+        function mountPoliticTalkLocalLeaveNotificationPolicy() {
+            suppressPoliticTalkLocalLeaveToasts();
+
+            if (!window.politicTalkLocalLeaveListenersMounted) {
+                window.politicTalkLocalLeaveListenersMounted = true;
+                document.addEventListener('click', handlePoliticTalkMeetingExitPointer, true);
+                document.addEventListener('touchend', handlePoliticTalkMeetingExitPointer, true);
+                document.addEventListener('pointerup', handlePoliticTalkMeetingExitPointer, true);
+            }
+
+            if (window.politicTalkLocalLeaveNotificationObserver || !document.body) {
+                return;
+            }
+
+            window.politicTalkLocalLeaveNotificationObserver = new MutationObserver(function() {
+                window.cancelAnimationFrame(window.politicTalkLocalLeaveNotificationFrame);
+                window.politicTalkLocalLeaveNotificationFrame = window.requestAnimationFrame(
+                    suppressPoliticTalkLocalLeaveToasts
+                );
+            });
+            window.politicTalkLocalLeaveNotificationObserver.observe(document.body, {
+                attributes: true,
+                attributeFilter: [ 'aria-label', 'class', 'role', 'style', 'title' ],
+                childList: true,
+                characterData: true,
+                subtree: true
+            });
+        }
+
         function normalizePoliticTalkText(value) {
             return String(value || '').replace(/\s+/g, ' ').trim().toLowerCase();
         }
@@ -2036,8 +2181,8 @@
             return Math.floor(Math.min(maxByWidth, maxByHeight, responsiveCap));
         }
 
-        function clampPoliticTalkTileAvatarSize(tile, avatarContainer) {
-            var maxSize = getPoliticTalkTileAvatarMaxSize(tile);
+        function clampPoliticTalkTileAvatarSize(tile, avatarContainer, maxSizeOverride) {
+            var maxSize = Number.isFinite(maxSizeOverride) ? maxSizeOverride : getPoliticTalkTileAvatarMaxSize(tile);
 
             if (!maxSize || !avatarContainer) {
                 return;
@@ -2135,6 +2280,61 @@
             });
         }
 
+        function getPoliticTalkThumbnailAvatarMaxSize(thumbnail) {
+            if (!thumbnail) {
+                return null;
+            }
+
+            var rect = thumbnail.getBoundingClientRect();
+
+            if (!rect.width || !rect.height) {
+                return null;
+            }
+
+            var footerHeight = Math.min(36, Math.max(24, rect.height * 0.24));
+            var mediaHeight = Math.max(32, rect.height - footerHeight - 10);
+            var maxByWidth = rect.width * 0.42;
+            var maxByHeight = mediaHeight * 0.58;
+
+            return Math.floor(Math.max(30, Math.min(maxByWidth, maxByHeight, 64)));
+        }
+
+        function centerPoliticTalkThumbnailAvatar(thumbnail) {
+            if (!thumbnail) {
+                return;
+            }
+
+            var thumbnailRect = thumbnail.getBoundingClientRect();
+            var maxSize = getPoliticTalkThumbnailAvatarMaxSize(thumbnail);
+
+            if (!maxSize) {
+                return;
+            }
+
+            var footerHeight = Math.min(36, Math.max(24, thumbnailRect.height * 0.24));
+            var centerY = Math.max(8 + maxSize / 2, (thumbnailRect.height - footerHeight) / 2);
+
+            Array.prototype.slice.call(thumbnail.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', centerY + 'px');
+                setPoliticTalkImportantStyle(candidate, 'transform', 'translate(-50%, -50%)');
+                clampPoliticTalkTileAvatarSize(thumbnail, candidate, maxSize);
+            });
+        }
+
         function getPoliticTalkAvailableTileHeight(videospace) {
             var videospaceRect = videospace.getBoundingClientRect();
             var toolbar = getVisiblePoliticTalkToolbar();
@@ -2718,6 +2918,7 @@
                     thumbnail,
                     metadata
                 );
+                centerPoliticTalkThumbnailAvatar(thumbnail);
             });
 
             applyPoliticTalkParticipantPaneAvatarTheme(videospace, tiles, thumbnails);
@@ -3107,6 +3308,7 @@
                 mountPoliticTalkRoleMetadataSync();
                 mountPoliticTalkTileTheme();
                 mountPoliticTalkModerationNotificationPolicy();
+                mountPoliticTalkLocalLeaveNotificationPolicy();
                 mountPoliticTalkAudioOnlyUiPolicy();
                 mountPoliticTalkRoomChatOnlyPolicy();
             });
@@ -3120,6 +3322,7 @@
             mountPoliticTalkRoleMetadataSync();
             mountPoliticTalkTileTheme();
             mountPoliticTalkModerationNotificationPolicy();
+            mountPoliticTalkLocalLeaveNotificationPolicy();
             mountPoliticTalkAudioOnlyUiPolicy();
             mountPoliticTalkRoomChatOnlyPolicy();
         }