diff --git a/web/plugin.head.html b/web/plugin.head.html
index 92a2dd0..f6603b7 100644
--- a/web/plugin.head.html
+++ b/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) {
- return !candidates.some(function(otherCandidate) {
+ var uniqueCandidates = renderedTiles.concat(candidates).filter(function(candidate, index, allCandidates) {
+ 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)) {