213 lines
8.2 KiB
HTML
213 lines
8.2 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';
|
|
let novi_api_key_for_idaa = 'CmNdWgdPmgluBWjiTd8xsUCk5mio8F1O9DYAh0pVDcg=';
|
|
|
|
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"
|
|
|
|
let idaa_osit_site_key = '8VTOJ0X5hvT6JdiTJsGEzQ'; // 'restricted-access'
|
|
// let idaa_ae_api_root_url = 'https://sk-idaa.oneskyit.com/idaa/jitsi_meet';
|
|
let idaa_ae_api_root_url =
|
|
'https://static.oneskyit.com/c/DgrZone/jitsi_iframe_api_testing.html';
|
|
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;
|
|
|
|
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);
|
|
|
|
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_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_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>
|