amardeep/politictalk
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

added role based coloring

Browse Source
This commit is contained in:
Amardeep
2026-06-01 21:51:40 +05:30
parent a27147328a
commit a6cb6b27c2
1 changed files with 389 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

391
web/plugin.head.html
View File

@@ -15,7 +15,7 @@
--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);
--politictalk-tile-border-color: #63477a;
--politictalk-toolbar-bottom-offset: 12px;
--politictalk-toolbar-mobile-scale: 0.96;
}
@@ -77,8 +77,28 @@
box-sizing: border-box !important;
}
html:not(.politictalk-direct-access-blocked) #videospace .politictalk-role-individual {
--politictalk-avatar-background: #63477a;
--politictalk-tile-border-color: #63477a;
}
html:not(.politictalk-direct-access-blocked) #videospace .politictalk-role-organisation {
--politictalk-avatar-background: #937dc6;
--politictalk-tile-border-color: #937dc6;
}
html:not(.politictalk-direct-access-blocked) #videospace .politictalk-role-ordinary {
--politictalk-avatar-background: #b3a5e4;
--politictalk-tile-border-color: #b3a5e4;
}
html:not(.politictalk-direct-access-blocked) #videospace .politictalk-role-guest {
--politictalk-avatar-background: #63477a;
--politictalk-tile-border-color: #63477a;
}
html:not(.politictalk-direct-access-blocked) #videospace .politictalk-themed-tile::after {
border: 2px solid var(--politictalk-tile-border-color, rgba(179, 165, 228, 0.72)) !important;
border: 2px solid var(--politictalk-tile-border-color, #63477a) !important;
border-radius: 3px !important;
bottom: 2px;
box-sizing: border-box !important;
@@ -724,6 +744,20 @@
<script>
(function() {
var PARALLEL_GLOBE_URL = 'https://parallelglobe.io';
var POLITICTALK_ROLE_COLORS = {
guest: '#63477a',
individual: '#63477a',
organisation: '#937dc6',
ordinary: '#b3a5e4'
};
var POLITICTALK_ROLE_CLASS_NAMES = [
'politictalk-role-guest',
'politictalk-role-individual',
'politictalk-role-organisation',
'politictalk-role-ordinary'
];
var politicTalkParticipantRolesByEndpointId = {};
var politicTalkParticipantRolesByUserId = {};
disablePoliticTalkPwaInstallPrompt();
@@ -1139,6 +1173,290 @@
|| readRoomSessionValue('title');
}
function normalizePoliticTalkRole(value) {
var role = String(value || '')
.trim()
.toLowerCase()
.replace(/_/g, '-')
.replace(/\s+/g, '-');
if (role === 'political-voice' || role === 'politicalvoice') {
return 'individual';
}
if (role === 'org' || role === 'organization') {
return 'organisation';
}
if (role === 'parallel-citizen' || role === 'parallelcitizen' || role === 'citizen') {
return 'ordinary';
}
if (role === 'email-invite' || role === 'invitee' || role === 'invited' || role === 'guest') {
return 'guest';
}
if (role === 'individual' || role === 'organisation' || role === 'ordinary') {
return role;
}
return '';
}
function getPoliticTalkRoleColor(role) {
return POLITICTALK_ROLE_COLORS[normalizePoliticTalkRole(role)] || POLITICTALK_ROLE_COLORS.guest;
}
function getPoliticTalkJwtUserContext() {
var payload = getPoliticTalkJwtPayload();
return payload && payload.context && payload.context.user
? payload.context.user
: {};
}
function getPoliticTalkLocalRoleMetadata() {
var user = getPoliticTalkJwtUserContext();
var role = normalizePoliticTalkRole(
user.politictalkRole
|| user.platformRole
|| user.politicalRole
|| user.role
) || 'guest';
var userId = String(user.id || '').trim();
return {
color: getPoliticTalkRoleColor(role),
role: role,
userId: userId,
userType: String(user.politictalkUserType || user.userType || '').trim()
};
}
function rememberPoliticTalkParticipantRole(metadata, endpointId) {
if (!metadata) {
return false;
}
var role = normalizePoliticTalkRole(metadata.role || metadata.politictalkRole || metadata.platformRole);
if (!role) {
return false;
}
var normalizedMetadata = {
color: getPoliticTalkRoleColor(role),
role: role,
userId: String(metadata.userId || metadata.id || '').trim(),
userType: String(metadata.userType || metadata.politictalkUserType || '').trim()
};
var normalizedEndpointId = String(endpointId || metadata.endpointId || metadata.participantId || '').trim();
if (normalizedEndpointId) {
politicTalkParticipantRolesByEndpointId[normalizedEndpointId] = normalizedMetadata;
}
if (normalizedMetadata.userId) {
politicTalkParticipantRolesByUserId[normalizedMetadata.userId] = normalizedMetadata;
}
return true;
}
function getPoliticTalkConferenceRoom() {
var conference = window.APP && window.APP.conference;
return conference && (conference._room || conference.room || conference.conference);
}
function getPoliticTalkEndpointIdFromValue(value) {
if (!value) {
return '';
}
if (typeof value === 'string') {
return value;
}
try {
if (typeof value.getId === 'function') {
return String(value.getId() || '');
}
} catch (error) {
return '';
}
return String(value.id || value._id || value.participantId || '').trim();
}
function getPoliticTalkLocalEndpointId() {
var room = getPoliticTalkConferenceRoom();
var conference = window.APP && window.APP.conference;
try {
if (room && typeof room.myUserId === 'function') {
return String(room.myUserId() || '');
}
if (room && typeof room.getMyUserId === 'function') {
return String(room.getMyUserId() || '');
}
if (conference && typeof conference.getMyUserId === 'function') {
return String(conference.getMyUserId() || '');
}
} catch (error) {
return '';
}
return '';
}
function parsePoliticTalkRoleMetadata(value) {
if (!value) {
return null;
}
if (typeof value === 'string') {
try {
return JSON.parse(value);
} catch (error) {
return null;
}
}
if (value.type === 'politictalk-role') {
return value.data || value;
}
if (value.value) {
return parsePoliticTalkRoleMetadata(value.value) || value.attributes || null;
}
if (value.attributes && (value.attributes.role || value.attributes.politictalkRole)) {
return value.attributes;
}
if (value.role || value.politictalkRole || value.platformRole) {
return value;
}
return null;
}
function handlePoliticTalkRoleMetadataMessage(first, second) {
var metadata = parsePoliticTalkRoleMetadata(first) || parsePoliticTalkRoleMetadata(second);
var endpointId = getPoliticTalkEndpointIdFromValue(first) || getPoliticTalkEndpointIdFromValue(second);
if (rememberPoliticTalkParticipantRole(metadata, endpointId)) {
window.cancelAnimationFrame(window.politicTalkRoleTileFrame);
window.politicTalkRoleTileFrame = window.requestAnimationFrame(applyPoliticTalkTileTheme);
}
}
function attachPoliticTalkRoleMetadataListeners(room) {
if (!room || window.politicTalkRoleMetadataRoom === room) {
return;
}
window.politicTalkRoleMetadataRoom = room;
try {
if (typeof room.addCommandListener === 'function') {
room.addCommandListener('politictalk-role', handlePoliticTalkRoleMetadataMessage);
}
} catch (error) {
// Role colours are cosmetic; keep the room running if the Jitsi internals differ.
}
try {
if (typeof room.on === 'function') {
var events = window.JitsiMeetJS && window.JitsiMeetJS.events && window.JitsiMeetJS.events.conference;
var endpointEvents = [
events && events.ENDPOINT_MESSAGE_RECEIVED,
'endpoint_message_received'
].filter(Boolean);
endpointEvents.forEach(function(eventName, index) {
if (endpointEvents.indexOf(eventName) !== index) {
return;
}
room.on(eventName, handlePoliticTalkRoleMetadataMessage);
});
}
} catch (error) {
// Ignore API differences across Jitsi versions.
}
}
function publishPoliticTalkRoleMetadata() {
if (directAccessBlocked) {
return;
}
var metadata = getPoliticTalkLocalRoleMetadata();
var endpointId = getPoliticTalkLocalEndpointId();
var room = getPoliticTalkConferenceRoom();
rememberPoliticTalkParticipantRole(metadata, endpointId);
attachPoliticTalkRoleMetadataListeners(room);
if (!room) {
return;
}
var payload = {
color: metadata.color,
endpointId: endpointId,
role: metadata.role,
type: 'politictalk-role',
userId: metadata.userId,
userType: metadata.userType
};
try {
if (typeof room.sendCommandOnce === 'function') {
room.sendCommandOnce('politictalk-role', {
attributes: payload,
value: JSON.stringify(payload)
});
} else if (typeof room.sendCommand === 'function') {
room.sendCommand('politictalk-role', {
attributes: payload,
value: JSON.stringify(payload)
});
}
} catch (error) {
// Endpoint messages below are a fallback for Jitsi builds without custom commands.
}
try {
if (typeof room.sendEndpointMessage === 'function') {
room.sendEndpointMessage('', payload);
}
} catch (error) {
// Nothing else to do; local styling still works from the JWT.
}
}
function mountPoliticTalkRoleMetadataSync() {
if (directAccessBlocked) {
return;
}
publishPoliticTalkRoleMetadata();
if (window.politicTalkRoleMetadataInterval) {
return;
}
window.politicTalkRoleMetadataInterval = window.setInterval(function() {
publishPoliticTalkRoleMetadata();
applyPoliticTalkTileTheme();
}, 5000);
}
function isPoliticTalkHost() {
var payload = getPoliticTalkJwtPayload();
var user = payload && payload.context && payload.context.user;
@@ -1494,6 +1812,72 @@
return Math.max(180, availableHeight);
}
function getPoliticTalkTileEndpointId(tile) {
if (!tile) {
return '';
}
var tileId = String(tile.id || '');
if (tileId === 'localVideo_container') {
return getPoliticTalkLocalEndpointId();
}
var match = tileId.match(/^(?:participant_|remoteVideo_)(.+)$/);
if (match) {
return match[1];
}
return String(
tile.getAttribute('data-participant-id')
|| tile.getAttribute('data-endpoint-id')
|| ''
).trim();
}
function getPoliticTalkTileRoleMetadata(tile) {
var localMetadata = getPoliticTalkLocalRoleMetadata();
var endpointId = getPoliticTalkTileEndpointId(tile);
if (tile && tile.id === 'localVideo_container') {
return localMetadata;
}
if (endpointId && politicTalkParticipantRolesByEndpointId[endpointId]) {
return politicTalkParticipantRolesByEndpointId[endpointId];
}
var localEndpointId = getPoliticTalkLocalEndpointId();
if (endpointId && localEndpointId && endpointId === localEndpointId) {
return localMetadata;
}
return null;
}
function applyPoliticTalkRoleToTile(tile, metadata) {
if (!tile || !tile.classList) {
return;
}
POLITICTALK_ROLE_CLASS_NAMES.forEach(function(className) {
tile.classList.remove(className);
});
if (!metadata || !normalizePoliticTalkRole(metadata.role)) {
return;
}
var role = normalizePoliticTalkRole(metadata.role);
var color = getPoliticTalkRoleColor(role);
tile.classList.add('politictalk-role-' + role);
tile.style.setProperty('--politictalk-avatar-background', color);
tile.style.setProperty('--politictalk-tile-border-color', color);
}
function applyPoliticTalkTileLayout(videospace, tiles) {
if (!videospace || !tiles.length) {
return;
@@ -1578,6 +1962,7 @@
tiles.forEach(function(tile) {
addPoliticTalkClass(tile, 'politictalk-themed-tile');
applyPoliticTalkRoleToTile(tile, getPoliticTalkTileRoleMetadata(tile));
tile.querySelectorAll('div, span').forEach(function(candidate) {
if (isPoliticTalkAvatarShell(candidate, tile)) {
@@ -1985,6 +2370,7 @@
mountHostHangupPolicy();
mountMobileToolbarPositioning();
mountPoliticTalkStageBrandInset();
mountPoliticTalkRoleMetadataSync();
mountPoliticTalkTileTheme();
mountPoliticTalkModerationNotificationPolicy();
mountPoliticTalkAudioOnlyUiPolicy();
@@ -1997,6 +2383,7 @@
mountHostHangupPolicy();
mountMobileToolbarPositioning();
mountPoliticTalkStageBrandInset();
mountPoliticTalkRoleMetadataSync();
mountPoliticTalkTileTheme();
mountPoliticTalkModerationNotificationPolicy();
mountPoliticTalkAudioOnlyUiPolicy();