216 lines
9.1 KiB
HTML
216 lines
9.1 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>IDAA Novi Jitsi iframe Example Template Page</title>
|
|
</head>
|
|
<body>
|
|
|
|
<!-- START: Copy below this point -->
|
|
<!-- IMPORTANT: This <script> element and <p> element below are for using in an iframe in the IDAA Nov site. One Sky IT's Jitsi meeting iframe -->
|
|
|
|
<!-- IDAA and Novi specific JavaScript to get current Novi user info and load Jitsi iframe -->
|
|
<script>
|
|
let novi_customer_uid = '<%=Novi.User.CustomerUniqueId%>'; // NOTE: The Novi UUID for the current current user/customer
|
|
console.log(`Novi's Current User's ID: ${novi_customer_uid}`);
|
|
|
|
// var novi_current_user_role = '<%=Novi.User.xyz%>';
|
|
// console.log(`Novi's Current User's Role: ${novi_current_user_role}`);
|
|
|
|
let novi_api_root_url = 'https://www.idaa.org/api'; // DO NOT CHANGE THIS VALUE
|
|
let novi_api_key_for_idaa = 'CmNdWgdPmgluBWjiTd8xsUCk5mio8F1O9DYAh0pVDcg='; // DO NOT CHANGE THIS VALUE
|
|
|
|
let novi_current_user_obj = null;
|
|
let novi_current_user_email = null;
|
|
|
|
let room_name = 'IDAA-Example-Meeting'; // 'IDAA-Student-and-Resident-Meeting'; 'IDAA-Meeting';
|
|
let is_moderator = false;
|
|
|
|
// Disable Jitsi sound settings. Set to true DISABLES the sound.
|
|
let incoming_msg_sound = true;
|
|
let participant_joined_sound = false;
|
|
let participant_left_sound = false;
|
|
let reaction_sound = true;
|
|
let raise_hand_sound = true;
|
|
|
|
// Moderator settings, unchecked (false) by default.
|
|
let start_muted = false; // "Everyone starts muted"
|
|
let start_hidden = true; // "Everyone starts hidden"
|
|
let reactions_muted = true; // "Mute reaction sounds for everyone"
|
|
|
|
// Do *not* use relative paths here. They must be direct to the site I am hosting for IDAA.
|
|
// 'https://sk-idaa.oneskyit.com/idaa/video_conferences' OR 'https://dev-idaa.oneskyit.com/idaa/video_conferences' OR 'http://idaa.localhost:5173/idaa/video_conferences' OR 'https://static.oneskyit.com/c/DgrZone/jitsi_iframe_api_testing.html'
|
|
let idaa_osit_ae_api_root_url =
|
|
'https://dev-idaa.oneskyit.com/idaa/video_conferences'; // DO NOT CHANGE THIS VALUE; Point to the Svelte Jitsi page
|
|
let idaa_osit_ae_site_key = '8VTOJ0X5hvT6JdiTJsGEzQ'; // DO NOT CHANGE THIS VALUE; '8VTOJ0X5hvT6JdiTJsGEzQ' OR 'restricted-access'
|
|
let idaa_ae_params = new URLSearchParams(document.location.search);
|
|
// let idaa_ae_slct_event_id = idaa_ae_params.get('event_id');
|
|
|
|
let idaa_ae_iframe_height = null;
|
|
|
|
// IN PROGRESS: The Novi API fetch to get current user info is being moved to the Svelte page that hosts the iframe (https://domain.tld/idaa/video_conferences). Only the bare minimum info will be passed to the iframe via URL params. Pretty much just the Novi Customer GUID (UUID). The Svelte page will fetch the rest of the user info from the Novi API and then load the iframe with all the correct params. That same page also checks the Novi groups to see if the user is a moderator in one of those.
|
|
|
|
var novi_api_headers = new Headers();
|
|
novi_api_headers.append('Authorization', `Basic ${novi_api_key_for_idaa}`);
|
|
|
|
var requestOptions = {
|
|
method: 'GET',
|
|
headers: novi_api_headers,
|
|
redirect: 'follow'
|
|
};
|
|
|
|
let novi_api_get_customer_endpoint = `${novi_api_root_url}/customers/${novi_customer_uid}`;
|
|
console.log(`Novi API Get Customer Endpoint: ${novi_api_get_customer_endpoint}`);
|
|
|
|
fetch(novi_api_get_customer_endpoint, requestOptions)
|
|
// .then(response => response.text())
|
|
.then((response) => response.json())
|
|
.then((result) => {
|
|
novi_current_user_obj = result;
|
|
console.log(`Novi's Current User Obj:`, novi_current_user_obj);
|
|
// console.log(`Novi's Current User Obj (${novi_current_user_obj.Email}):`, novi_current_user_obj);
|
|
|
|
let full_name = novi_current_user_obj?.Name;
|
|
let first_name = novi_current_user_obj?.FirstName;
|
|
let last_initial = novi_current_user_obj?.LastName
|
|
? novi_current_user_obj.LastName.charAt(0).toUpperCase() + '.'
|
|
: '';
|
|
if (last_initial) {
|
|
full_name = `${first_name} ${last_initial}`;
|
|
}
|
|
console.log(`Novi's Current User's Full Name: ${full_name}`);
|
|
|
|
let idaa_ae_iframe_element = document.getElementById(
|
|
'ae_idaa_jitsi_meeting_iframe'
|
|
);
|
|
|
|
idaa_ae_iframe_element.src =
|
|
`${idaa_osit_ae_api_root_url}?uuid=${novi_customer_uid}&email=${novi_current_user_obj.Email}&full_name=${full_name}&moderator=${is_moderator}&room=${room_name}&iframe=true&key=${idaa_osit_ae_site_key}&incoming_msg_sound=${incoming_msg_sound}&participant_joined_sound=${participant_joined_sound}&participant_left_sound=${participant_left_sound}&reaction_sound=${reaction_sound}&raise_hand_sound=${raise_hand_sound}&start_muted=${start_muted}&start_hidden=${start_hidden}&reactions_muted=${reactions_muted}`
|
|
;
|
|
|
|
// url.searchParams.delete('event_id');
|
|
// history.pushState({}, '', url);
|
|
})
|
|
.catch((error) => console.log('error', error));
|
|
|
|
window.addEventListener('message', function (event) {
|
|
// console.log('Message received from the child:', event.data); // Message received from child
|
|
|
|
if (event.data) {
|
|
if (event.data.iframe_height) {
|
|
// console.log(`Got iframe height: ${event.data.iframe_height}`);
|
|
idaa_ae_iframe_height = event.data.iframe_height;
|
|
|
|
let idaa_ae_iframe_element = document.getElementById(
|
|
'ae_idaa_novi_meeting_iframe'
|
|
);
|
|
|
|
// idaa_ae_iframe_element.style.height = idaa_ae_iframe_height;
|
|
idaa_ae_iframe_element.style.height = `${idaa_ae_iframe_height + 50}px`;
|
|
}
|
|
|
|
if (event.data.scroll_to !== undefined) {
|
|
console.log(`Got scroll_to: ${event.data.scroll_to}`);
|
|
|
|
let idaa_ae_iframe_element = document.getElementById(
|
|
'ae_idaa_novi_meeting_iframe'
|
|
);
|
|
if (idaa_ae_iframe_element) {
|
|
console.log(`Scrolling to: ${event.data.scroll_to}`);
|
|
// window.scrollTo(0, 0); // This works for all current browsers
|
|
window.scrollTo({
|
|
top: 0,
|
|
left: 0,
|
|
behavior: 'smooth'
|
|
});
|
|
// idaa_ae_iframe_element.scrollTo({x: 0, y: 0}); // Scroll to top
|
|
// document.body.scrollTo({x: 0, y: 0}); // Scroll to top
|
|
// document.body.scrollTo({
|
|
// top: 0,
|
|
// behavior: 'smooth'
|
|
// });
|
|
// document.body.scrollTop = 0;
|
|
// idaa_ae_iframe_element?.scrollTo(0, 0)
|
|
// idaa_ae_iframe_element.scrollTo({
|
|
// top: 0,
|
|
// behavior: 'smooth'
|
|
// });
|
|
// idaa_ae_iframe_element.scrollTo({
|
|
// top: event.data.scroll_to,
|
|
// behavior: 'smooth'
|
|
// });
|
|
} else {
|
|
console.warn(
|
|
`Element with ID "ae_idaa_jitsi_meeting_iframe" not found.`
|
|
);
|
|
}
|
|
}
|
|
} else {
|
|
console.log(`No data in message? ${event}`);
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<!-- IDAA OSIT iframe container element for Novi - Jitsi Meeting iframe -->
|
|
<p>
|
|
<iframe
|
|
width="100%"
|
|
height="950"
|
|
id="ae_idaa_jitsi_meeting_iframe"
|
|
src=""
|
|
style="min-height: 750px; height: min-content; max-height: 2048px"
|
|
class="ae_idaa_iframe"
|
|
allow="camera; microphone; fullscreen; display-capture; autoplay; clipboard-write"
|
|
allowfullscreen
|
|
></iframe>
|
|
</p>
|
|
|
|
<!-- Enable or disable sounds -->
|
|
<div
|
|
class=""
|
|
style="margin-top: 1.5em; border-top: 2px dashed #ccc; padding: 1em; background-color: pink;"
|
|
>
|
|
<strong>Jitsi Sound Settings:</strong>
|
|
<label>
|
|
<input type="checkbox" id="incoming_msg_sound_checkbox" checked disabled />
|
|
Disable Incoming Message Sound
|
|
</label>
|
|
|
|
<label>
|
|
<input type="checkbox" id="participant_joined_sound_checkbox" disabled />
|
|
Disable Participant Joined Sound
|
|
</label>
|
|
|
|
<label>
|
|
<input type="checkbox" id="participant_left_sound_checkbox" disabled />
|
|
Disable Participant Left Sound
|
|
</label>
|
|
|
|
<label>
|
|
<input type="checkbox" id="reaction_sound_checkbox" checked disabled />
|
|
Disable Reaction Sound
|
|
</label>
|
|
<label>
|
|
<input type="checkbox" id="raise_hand_sound_checkbox" checked disabled />
|
|
Disable Raise Hand Sound
|
|
</label>
|
|
|
|
<button
|
|
id="reload_iframe_button"
|
|
style="background-color: orange;"
|
|
onclick="
|
|
let iframe_element = document.getElementById('ae_idaa_jitsi_meeting_iframe');
|
|
if (iframe_element) {
|
|
iframe_element.src = iframe_element.src;
|
|
}
|
|
">
|
|
Reload Iframe
|
|
</button>
|
|
</div>
|
|
|
|
<!-- STOP: Do not copy below this point -->
|
|
|
|
</body>
|
|
</html>
|