elias/vdo.ninja
1
0
Fork 0
mirror of https://github.com/eliasstepanik/vdo.ninja.git synced 2026-01-14 07:08:32 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #745 from jcalado/alert-modal

Browse Source 
alert modal
This commit is contained in:
Steve Seguin 2021-02-24 05:37:12 -05:00 committed by GitHub
commit b949986182
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 91 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
main.css
View File

@ -2388,4 +2388,48 @@ input:checked + .slider:before {
-webkit-transform: translateX(16px);
-ms-transform: translateX(16px);
transform: translateX(16px);
}
.alertModal {
position: absolute;
background-color: rgb(221 221 221);
box-shadow: 0 0 30px 10px #0000005c;
color: black;
font-size: 1.2em;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 10px;
font-weight: bold;
z-index:1;
}
.alertModalInner {
position: relative;
padding: 2em;
}
.alertModalClose {
position: absolute;
top: -2px;
right: 4px;
cursor: pointer;
font-weight: bolder;
}
.alertModalBackdrop {
background: var(--background-color);
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 0;
opacity: 0.8;
}
@media only screen and (max-width: 390px) {
.alertModal {
width: 90%;
}
}

53
main.js
View File

@ -216,7 +216,7 @@ var sanitizeStreamID = function(streamID) {
if (streamID_sanitized.length > 24) {
streamID_sanitized = streamID_sanitized.substring(0, 24);
if (!(session.cleanOutput)) {
alert("The Stream ID should be less than 25 alPhaNuMeric characters long.\n\nWe will trim it to length.");
warnUser("The Stream ID should be less than 25 alPhaNuMeric characters long.\n\nWe will trim it to length.");
}
}
return streamID_sanitized;
@ -1972,7 +1972,7 @@ if (urlParams.has('secure')) {
session.security = true;
if (!(session.cleanOutput)) {
setTimeout(function() {
alert("Enhanced Security Mode Enabled.");
warnUser("Enhanced Security Mode Enabled.");
}, 100);
}
}
@ -5674,7 +5674,7 @@ function gotDevices(deviceInfos) { // https://github.com/webrtc/samples/blob/gh-
if (location.protocol !== 'https:') {
if (!(session.cleanOutput)) {
alert("SSL (https) is not enabled. This site will not work without it!");
warnUser("SSL (https) is not enabled. This site will not work without it!");
}
}
@ -12074,13 +12074,54 @@ addEventToAll("#multiselect-trigger3", 'mousedown touchend focusin focusout', fu
});
// Warns user about network going down
window.addEventListener("offline", function (e) {
if (!session.cleanOutput) {
alert("OBS.Ninja has no network connectivity and can't work properly.");
warnUser("OBS.Ninja has no network connectivity and can't work properly.");
} else {
console.log(
log(
"OBS.Ninja has no network connectivity and can't work properly."
);
}
});
// Remove modal if network comes back up
window.addEventListener("online", function (e) {
if (!session.cleanOutput) {
// Remove last inserted modal; Could be improved by tagging the
// modal elements and only removing modals tagged 'offline'
userWarnings = document.querySelectorAll('.alertModal');
closeModal(userWarnings[userWarnings.length- 1]);
} else {
log(
"Network connectivity has been restored."
);
}
});
function warnUser(message){
// Allows for multiple alerts to stack better.
// Every modal and backdrop has an increasing z-index
// to block the previous modal
zindex = document.querySelectorAll('.alertModal').length;
modalTemplate =
`<div class="alertModal" onclick="closeModal(this)" style="z-index:${zindex + 2}">
<div class="alertModalInner">
<span class='alertModalClose'>×</span>
<span class='alertModalMessage'>${message}</span>
</div>
</div>
<div class="alertModalBackdrop" style="z-index:${zindex + 1}"></div>`
// Insert modal at body end
document.body.insertAdjacentHTML("beforeend", modalTemplate);
}
function closeModal(element){
// Delete backdrop
element.nextElementSibling.outerHTML = ''
// Delete modal
element.outerHTML = ''
}