509 lines
16 KiB
HTML
509 lines
16 KiB
HTML
<style>
|
|
html:not(.politictalk-direct-access-blocked),
|
|
html:not(.politictalk-direct-access-blocked) body,
|
|
html:not(.politictalk-direct-access-blocked) #react,
|
|
html:not(.politictalk-direct-access-blocked) #videoconference_page {
|
|
background-color: #101820 !important;
|
|
background-image: url('/images/politictalk/background_pt.png') !important;
|
|
background-position: center center !important;
|
|
background-repeat: no-repeat !important;
|
|
background-size: cover !important;
|
|
}
|
|
|
|
html:not(.politictalk-direct-access-blocked) body {
|
|
min-height: 100vh;
|
|
}
|
|
|
|
html:not(.politictalk-direct-access-blocked) .conference,
|
|
html:not(.politictalk-direct-access-blocked) #largeVideoContainer,
|
|
html:not(.politictalk-direct-access-blocked) .large-video-container,
|
|
html:not(.politictalk-direct-access-blocked) .stage-view,
|
|
html:not(.politictalk-direct-access-blocked) .filmstrip,
|
|
html:not(.politictalk-direct-access-blocked) .filmstrip__videos,
|
|
html:not(.politictalk-direct-access-blocked) .filmstrip__videos-container,
|
|
html:not(.politictalk-direct-access-blocked) #filmstripRemoteVideosContainer,
|
|
html:not(.politictalk-direct-access-blocked) .remote-videos {
|
|
background-color: transparent !important;
|
|
background-image: none !important;
|
|
}
|
|
|
|
html:not(.politictalk-direct-access-blocked) #largeVideo,
|
|
html:not(.politictalk-direct-access-blocked) .large-video-background {
|
|
background-color: transparent !important;
|
|
background-image: none !important;
|
|
}
|
|
|
|
.politictalk-room-logo {
|
|
align-items: center;
|
|
display: flex;
|
|
gap: 12px;
|
|
height: 64px;
|
|
justify-content: flex-start;
|
|
left: max(20px, env(safe-area-inset-left));
|
|
opacity: 0.96;
|
|
position: fixed;
|
|
text-decoration: none;
|
|
top: max(20px, env(safe-area-inset-top));
|
|
width: auto;
|
|
z-index: 20;
|
|
}
|
|
|
|
.politictalk-room-logo img {
|
|
display: block;
|
|
flex: 0 0 64px;
|
|
height: 64px;
|
|
object-fit: contain;
|
|
width: 64px;
|
|
}
|
|
|
|
.politictalk-room-logo__text {
|
|
color: #ffffff;
|
|
font-size: 24px;
|
|
font-weight: 700;
|
|
letter-spacing: 0;
|
|
line-height: 1;
|
|
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
|
|
white-space: nowrap;
|
|
}
|
|
|
|
@media (prefers-color-scheme: light) {
|
|
html:not(.politictalk-direct-access-blocked),
|
|
html:not(.politictalk-direct-access-blocked) body,
|
|
html:not(.politictalk-direct-access-blocked) #react,
|
|
html:not(.politictalk-direct-access-blocked) #videoconference_page {
|
|
background-color: #f7f3fb !important;
|
|
background-image: url('/images/politictalk/pt_bg_light.png') !important;
|
|
}
|
|
|
|
.politictalk-room-logo__text {
|
|
color: #63477a;
|
|
text-shadow: 0 1px 4px rgba(255, 255, 255, 0.62);
|
|
}
|
|
}
|
|
|
|
html.politictalk-direct-access-blocked,
|
|
html.politictalk-direct-access-blocked body {
|
|
background: #202424 !important;
|
|
min-height: 100%;
|
|
}
|
|
|
|
html.politictalk-direct-access-blocked #react {
|
|
display: none !important;
|
|
}
|
|
|
|
html.politictalk-direct-access-blocked body > *:not(.politictalk-direct-access):not(.politictalk-room-logo) {
|
|
visibility: hidden !important;
|
|
}
|
|
|
|
.politictalk-direct-access {
|
|
align-items: center;
|
|
background: rgba(13, 15, 16, 0.48);
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
inset: 0;
|
|
justify-content: center;
|
|
padding: 24px;
|
|
position: fixed;
|
|
z-index: 2147482999;
|
|
}
|
|
|
|
.politictalk-direct-access__dialog {
|
|
background: #111111;
|
|
border: 1px solid rgba(255, 255, 255, 0.16);
|
|
border-radius: 8px;
|
|
box-shadow: 0 22px 64px rgba(0, 0, 0, 0.32);
|
|
box-sizing: border-box;
|
|
color: #f5f5f5;
|
|
max-width: 520px;
|
|
padding: 32px;
|
|
width: min(100%, 520px);
|
|
}
|
|
|
|
.politictalk-direct-access__title {
|
|
font-family: inherit;
|
|
font-size: 26px;
|
|
font-weight: 700;
|
|
line-height: 1.2;
|
|
margin: 0 0 16px;
|
|
}
|
|
|
|
.politictalk-direct-access__message {
|
|
color: rgba(255, 255, 255, 0.78);
|
|
font-size: 17px;
|
|
line-height: 1.5;
|
|
margin: 0;
|
|
}
|
|
|
|
.politictalk-direct-access__actions {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
margin-top: 28px;
|
|
}
|
|
|
|
.politictalk-direct-access__button {
|
|
background: #ffffff;
|
|
border: 0;
|
|
border-radius: 6px;
|
|
color: #151515;
|
|
cursor: pointer;
|
|
font-size: 16px;
|
|
font-weight: 700;
|
|
min-width: 96px;
|
|
padding: 13px 22px;
|
|
}
|
|
|
|
.politictalk-direct-access__button:focus {
|
|
outline: 3px solid rgba(255, 255, 255, 0.42);
|
|
outline-offset: 3px;
|
|
}
|
|
|
|
html.politictalk-host-user button[aria-label*="Leave meeting" i],
|
|
html.politictalk-host-user button[aria-label*="Leave conference" i],
|
|
html.politictalk-host-user [role="button"][aria-label*="Leave meeting" i],
|
|
html.politictalk-host-user [role="button"][aria-label*="Leave conference" i] {
|
|
display: none !important;
|
|
}
|
|
|
|
@media (max-width: 640px) {
|
|
html:not(.politictalk-direct-access-blocked),
|
|
html:not(.politictalk-direct-access-blocked) body,
|
|
html:not(.politictalk-direct-access-blocked) #react,
|
|
html:not(.politictalk-direct-access-blocked) #videoconference_page {
|
|
background-position: center center !important;
|
|
}
|
|
|
|
.politictalk-room-logo {
|
|
gap: 10px;
|
|
height: 48px;
|
|
left: max(14px, env(safe-area-inset-left));
|
|
top: max(18px, env(safe-area-inset-top));
|
|
max-width: calc(100vw - 28px);
|
|
}
|
|
|
|
.politictalk-room-logo img {
|
|
flex-basis: 48px;
|
|
height: 48px;
|
|
width: 48px;
|
|
}
|
|
|
|
.politictalk-room-logo__text {
|
|
display: block;
|
|
font-size: 21px;
|
|
max-width: calc(100vw - 86px);
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.details-container {
|
|
top: calc(max(18px, env(safe-area-inset-top)) + 58px) !important;
|
|
}
|
|
|
|
.politictalk-direct-access {
|
|
align-items: flex-start;
|
|
padding: 150px 18px 18px;
|
|
}
|
|
|
|
.politictalk-direct-access__dialog {
|
|
padding: 24px;
|
|
}
|
|
|
|
.politictalk-direct-access__title {
|
|
font-size: 24px;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
(function() {
|
|
var PARALLEL_GLOBE_URL = 'https://parallelglobe.io';
|
|
var directAccessBlocked = isDirectRoomAccess();
|
|
|
|
if (directAccessBlocked) {
|
|
document.documentElement.classList.add('politictalk-direct-access-blocked');
|
|
document.title = 'Access required - PoliticTalk';
|
|
}
|
|
|
|
function hasMeetingToken() {
|
|
var params = new URLSearchParams(window.location.search);
|
|
|
|
return Boolean(params.get('jwt') || params.get('token'));
|
|
}
|
|
|
|
function isDirectRoomAccess() {
|
|
var path = window.location.pathname.replace(/\/+$/, '');
|
|
|
|
if (!path || path === '/') {
|
|
return false;
|
|
}
|
|
|
|
if (/^\/(?:static|images|libs|css|sounds|fonts|transcripts)\//.test(path)) {
|
|
return false;
|
|
}
|
|
|
|
return !hasMeetingToken();
|
|
}
|
|
|
|
function decodeBase64Url(value) {
|
|
var base64 = value.replace(/-/g, '+').replace(/_/g, '/');
|
|
|
|
while (base64.length % 4) {
|
|
base64 += '=';
|
|
}
|
|
|
|
var binary = window.atob(base64);
|
|
var bytes = new Uint8Array(binary.length);
|
|
|
|
for (var index = 0; index < binary.length; index += 1) {
|
|
bytes[index] = binary.charCodeAt(index);
|
|
}
|
|
|
|
return new TextDecoder().decode(bytes);
|
|
}
|
|
|
|
function getMeetingToken() {
|
|
return new URLSearchParams(window.location.search).get('jwt') || '';
|
|
}
|
|
|
|
function getPoliticTalkJwtPayload() {
|
|
try {
|
|
var token = getMeetingToken();
|
|
|
|
if (!token) {
|
|
return null;
|
|
}
|
|
|
|
return JSON.parse(decodeBase64Url(token.split('.')[1] || ''));
|
|
} catch (error) {
|
|
return null;
|
|
}
|
|
}
|
|
|
|
function getPoliticTalkMeetingTitle() {
|
|
var payload = getPoliticTalkJwtPayload();
|
|
|
|
if (!payload) {
|
|
return '';
|
|
}
|
|
|
|
var context = payload.context || {};
|
|
var room = context.room || {};
|
|
var title = (context.politictalk && context.politictalk.title)
|
|
|| room.subject
|
|
|| room.name
|
|
|| '';
|
|
|
|
title = String(title);
|
|
return title.trim() ? title : '';
|
|
}
|
|
|
|
function isPoliticTalkHost() {
|
|
var payload = getPoliticTalkJwtPayload();
|
|
var user = payload && payload.context && payload.context.user;
|
|
|
|
return Boolean(user && user.moderator);
|
|
}
|
|
|
|
function applyPoliticTalkMeetingTitle() {
|
|
var meetingTitle = getPoliticTalkMeetingTitle();
|
|
|
|
if (!meetingTitle) {
|
|
return;
|
|
}
|
|
|
|
window.config = window.config || {};
|
|
window.config.subject = meetingTitle;
|
|
window.config.localSubject = meetingTitle;
|
|
document.title = meetingTitle + ' | PoliticTalk';
|
|
}
|
|
|
|
function mountPoliticTalkDocumentTitle() {
|
|
var meetingTitle = getPoliticTalkMeetingTitle();
|
|
var pageTitle = meetingTitle ? meetingTitle + ' | PoliticTalk' : 'PoliticTalk';
|
|
|
|
if (directAccessBlocked || !document.head) {
|
|
return;
|
|
}
|
|
|
|
document.title = pageTitle;
|
|
|
|
if (window.politicTalkTitleObserver) {
|
|
return;
|
|
}
|
|
|
|
window.politicTalkTitleObserver = new MutationObserver(function() {
|
|
if (document.title !== pageTitle) {
|
|
document.title = pageTitle;
|
|
}
|
|
});
|
|
window.politicTalkTitleObserver.observe(document.head, {
|
|
childList: true,
|
|
characterData: true,
|
|
subtree: true
|
|
});
|
|
}
|
|
|
|
function preventHostLeaveButtonExecution() {
|
|
if (!isPoliticTalkHost()) {
|
|
return;
|
|
}
|
|
|
|
var buttons = window.config && window.config.buttonsWithNotifyClick;
|
|
|
|
if (!Array.isArray(buttons)) {
|
|
buttons = [];
|
|
}
|
|
|
|
buttons = buttons.filter(function(button) {
|
|
var key = typeof button === 'string' ? button : button && button.key;
|
|
|
|
return key !== 'hangup';
|
|
});
|
|
buttons.push('hangup');
|
|
|
|
window.config = window.config || {};
|
|
window.config.buttonsWithNotifyClick = buttons;
|
|
}
|
|
|
|
function isLeaveMeetingControl(element) {
|
|
var label = [
|
|
element.getAttribute('aria-label'),
|
|
element.getAttribute('title'),
|
|
element.textContent
|
|
].join(' ').replace(/\s+/g, ' ').trim().toLowerCase();
|
|
|
|
return label.indexOf('leave meeting') !== -1
|
|
|| label.indexOf('leave conference') !== -1;
|
|
}
|
|
|
|
function hideHostLeaveMeetingControls() {
|
|
if (!isPoliticTalkHost() || !document.body) {
|
|
return;
|
|
}
|
|
|
|
var controls = document.querySelectorAll('button, [role="button"]');
|
|
|
|
controls.forEach(function(control) {
|
|
if (!isLeaveMeetingControl(control)) {
|
|
return;
|
|
}
|
|
|
|
control.classList.add('politictalk-host-hidden-leave');
|
|
control.setAttribute('aria-hidden', 'true');
|
|
control.setAttribute('tabindex', '-1');
|
|
control.style.display = 'none';
|
|
});
|
|
}
|
|
|
|
function mountHostHangupPolicy() {
|
|
if (!isPoliticTalkHost() || !document.body) {
|
|
return;
|
|
}
|
|
|
|
document.documentElement.classList.add('politictalk-host-user');
|
|
preventHostLeaveButtonExecution();
|
|
hideHostLeaveMeetingControls();
|
|
|
|
if (window.politicTalkHostHangupObserver) {
|
|
return;
|
|
}
|
|
|
|
window.politicTalkHostHangupObserver = new MutationObserver(function() {
|
|
window.requestAnimationFrame(hideHostLeaveMeetingControls);
|
|
});
|
|
window.politicTalkHostHangupObserver.observe(document.body, {
|
|
attributes: true,
|
|
attributeFilter: [ 'aria-label', 'title', 'class' ],
|
|
childList: true,
|
|
characterData: true,
|
|
subtree: true
|
|
});
|
|
}
|
|
|
|
function mountPoliticTalkLogo() {
|
|
if (!document.body || document.getElementById('politictalk-room-logo')) {
|
|
return;
|
|
}
|
|
|
|
var link = document.createElement('a');
|
|
link.className = 'politictalk-room-logo';
|
|
link.href = 'https://parallelglobe.io/politictalk';
|
|
link.id = 'politictalk-room-logo';
|
|
link.rel = 'noopener noreferrer';
|
|
link.target = '_blank';
|
|
|
|
var image = document.createElement('img');
|
|
image.alt = 'Parallel Globe';
|
|
image.src = '/images/politictalk/pgLogo.svg';
|
|
|
|
var label = document.createElement('span');
|
|
label.className = 'politictalk-room-logo__text';
|
|
label.textContent = 'PoliticTalk';
|
|
|
|
link.appendChild(image);
|
|
link.appendChild(label);
|
|
document.body.appendChild(link);
|
|
}
|
|
|
|
function mountDirectAccessMessage() {
|
|
if (!directAccessBlocked || !document.body || document.getElementById('politictalk-direct-access')) {
|
|
return;
|
|
}
|
|
|
|
var wrapper = document.createElement('div');
|
|
wrapper.className = 'politictalk-direct-access';
|
|
wrapper.id = 'politictalk-direct-access';
|
|
|
|
var dialog = document.createElement('div');
|
|
dialog.className = 'politictalk-direct-access__dialog';
|
|
dialog.setAttribute('aria-labelledby', 'politictalk-direct-access-title');
|
|
dialog.setAttribute('aria-modal', 'true');
|
|
dialog.setAttribute('role', 'dialog');
|
|
|
|
var title = document.createElement('h1');
|
|
title.className = 'politictalk-direct-access__title';
|
|
title.id = 'politictalk-direct-access-title';
|
|
title.textContent = 'Parallel Globe account required';
|
|
|
|
var message = document.createElement('p');
|
|
message.className = 'politictalk-direct-access__message';
|
|
message.textContent = 'This PoliticTalk room cannot be opened directly. Please create an account or sign in at Parallel Globe to join PoliticTalk sessions.';
|
|
|
|
var actions = document.createElement('div');
|
|
actions.className = 'politictalk-direct-access__actions';
|
|
|
|
var button = document.createElement('button');
|
|
button.className = 'politictalk-direct-access__button';
|
|
button.textContent = 'OK';
|
|
button.type = 'button';
|
|
button.addEventListener('click', function() {
|
|
window.location.href = PARALLEL_GLOBE_URL;
|
|
});
|
|
|
|
actions.appendChild(button);
|
|
dialog.appendChild(title);
|
|
dialog.appendChild(message);
|
|
dialog.appendChild(actions);
|
|
wrapper.appendChild(dialog);
|
|
document.body.appendChild(wrapper);
|
|
button.focus();
|
|
}
|
|
|
|
applyPoliticTalkMeetingTitle();
|
|
preventHostLeaveButtonExecution();
|
|
|
|
if (document.readyState === 'loading') {
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
mountPoliticTalkDocumentTitle();
|
|
mountPoliticTalkLogo();
|
|
mountDirectAccessMessage();
|
|
mountHostHangupPolicy();
|
|
});
|
|
} else {
|
|
mountPoliticTalkDocumentTitle();
|
|
mountPoliticTalkLogo();
|
|
mountDirectAccessMessage();
|
|
mountHostHangupPolicy();
|
|
}
|
|
}());
|
|
</script>
|