mirror of
https://github.com/eliasstepanik/vdo.ninja.git
synced 2026-01-17 16:48:33 +00:00
bug fixes; website supported; UI
This commit is contained in:
STeve Seguin
parent
a2436704df
commit
a237d9b025
34
index.html
34
index.html
@ -63,7 +63,7 @@
|
||||
<link itemprop="url" href="./images/obsNinja_logo_full.png" />
|
||||
</span>
|
||||
<script type="text/javascript" crossorigin="anonymous" src="./thirdparty/CodecsHandler.js?ver=22"></script>
|
||||
<script type="text/javascript" crossorigin="anonymous" src="./webrtc.js?ver=118"></script>
|
||||
<script type="text/javascript" crossorigin="anonymous" src="./webrtc.js?ver=119"></script>
|
||||
<input id="zoomSlider" type="range" style="display: none;" />
|
||||
<div id="header">
|
||||
<a id="logoname" href="./" style="text-decoration: none; color: white; margin: 2px;">
|
||||
@ -458,15 +458,19 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="container-5" class="column columnfade pointer advanced card" style=" overflow-y: auto;">
|
||||
|
||||
<div id="dropButton"><i class="las la-chevron-down" onclick="dropDownButtonAction()"></i></div>
|
||||
|
||||
<div id="container-5" class="column columnfade pointer card advanced" style=" overflow-y: auto;">
|
||||
<h2><span data-translate="share-local-video-file">Stream Media File</span></h2>
|
||||
<div class="container-inner">
|
||||
|
||||
<br /><br />
|
||||
SELECT THE VIDEO FILE TO SHARE<br /><br />
|
||||
<input id="fileselector" onchange="session.publishFile(this,event);" type="file" accept="video/*,audio/*" alt="Hold CTRL (or CMD) to select multiple files" title="Hold CTRL (or CMD) to select multiple files" multiple/>
|
||||
<p style="margin:10px">Keep this tab visible if using Chrome, else the video playback will stop</p>
|
||||
</div>
|
||||
<p>Keep this tab visible if using Chrome, else the video playback will stop</p>
|
||||
|
||||
<div class="outer close">
|
||||
<div class="inner">
|
||||
<label class="labelclass">
|
||||
@ -474,17 +478,18 @@
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div id="container-6" class="column columnfade pointer" style=" overflow-y: auto;">
|
||||
<h2><span data-translate="share-website-iframe">Share Remote Website</span></h2>
|
||||
|
||||
<div id="container-6" class="column columnfade pointer card advanced" style=" overflow-y: auto;">
|
||||
<h2><span data-translate="share-website-iframe">Share Website</span></h2>
|
||||
<i style="margin-top:30px;font-size:560%;overflow:hidden;" class="las la-broadcast-tower"></i>
|
||||
<div class="container-inner">
|
||||
|
||||
<br /><br />
|
||||
Enter the URL website you wish to share.<br /><br />
|
||||
<input id="iframeURL" type="text" style="margin:10px; border:2px solid; padding:10px; width:400px;" title="Enter an HTTPS URL" multiple/><br />
|
||||
<button onclick="loadIframe(getById('iframeURL').value);" >Preview</button>
|
||||
<button onclick="this.innerHTML = 'Update';session.publishIFrame(getById('iframeURL').value);" >Share</button><br />
|
||||
<button onclick="this.innerHTML = 'Update'; session.publishIFrame(getById('iframeURL').value);" >Share</button><br />
|
||||
<small>Remote website must be CORS/IFrame compatible with full SSL-encryption enabled.</small>
|
||||
<div id="iFramePreview" style=" width: 1280px; height: 720px; margin: auto; padding: 10px;"></div>
|
||||
</div>
|
||||
@ -497,6 +502,17 @@
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div id="container-7" class="column columnfade pointer card advanced" style=" overflow-y: auto;" onclick="window.location = 'https://s10.fun/speedtest';">
|
||||
<h2><span data-translate="run-a-speed-test">Run a Speed Test</span></h2>
|
||||
<i style="margin-top:30px;font-size:600%;overflow:hidden;" <i class="las la-tachometer-alt"></i>
|
||||
</div>
|
||||
|
||||
<div id="container-8" class="column columnfade pointer card advanced" style=" overflow-y: auto;" onclick="window.location = 'https://guides.obs.ninja';">
|
||||
<h2><span data-translate="read-the-guides">Browse the Guides</span></h2>
|
||||
<i style="margin-top:30px;font-size:600%;overflow:hidden;" <i class="las la-book-open"></i>
|
||||
</div>
|
||||
|
||||
<p></p>
|
||||
<div id="info" class="fullcolumn columnfade">
|
||||
<center>
|
||||
@ -724,8 +740,8 @@
|
||||
</div></div>
|
||||
</div>
|
||||
|
||||
<div id="chatModule" style="display:none;">
|
||||
<a target="popup" style="cursor:pointer;" onclick="createPopoutChat();">💢</a>
|
||||
<div id="chatModule" style="display:none;text-align:right">
|
||||
<a target="popup" style="cursor:pointer;text-align:right;color:#a3b7e9;" onclick="createPopoutChat();"><i class="las la-external-link-alt"></i></a>
|
||||
<div id="chatBody">
|
||||
<div class="inMessage" data-translate='welcome-to-obs-ninja-chat'>
|
||||
Welcome to OBS.Ninja! You can send text messages directly to connected peers from here.
|
||||
|
||||
39
main.css
39
main.css
@ -799,7 +799,16 @@ label {
|
||||
.advanced {
|
||||
display: none !important
|
||||
}
|
||||
|
||||
#dropButton{
|
||||
font-size: 2em;
|
||||
display: block;
|
||||
margin: auto;
|
||||
background-color: #5555;
|
||||
width: 100px;
|
||||
/* padding: 30px; */
|
||||
border-radius: 30px;
|
||||
cursor:pointer;
|
||||
}
|
||||
.fullcolumn {
|
||||
float: left;
|
||||
display: inline-block;
|
||||
@ -818,10 +827,10 @@ label {
|
||||
/* Create four equal columns that floats next to each other */
|
||||
|
||||
.column {
|
||||
float: left;
|
||||
display: inline-block;
|
||||
margin: 1.8%;
|
||||
min-width: 300px;
|
||||
max-width: 500px;
|
||||
width: 20%;
|
||||
padding: 25px;
|
||||
height: 220px;
|
||||
@ -915,6 +924,14 @@ img {
|
||||
background-position: 50% 65%;
|
||||
background-image: url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCAxMjkgMTI5IiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAxMjkgMTI5IiB3aWR0aD0iNTEycHgiIGhlaWdodD0iNTEycHgiPgogIDxnPgogICAgPGc+CiAgICAgIDxwYXRoIGQ9Im0xOC43LDEyMi41aDkxLjZjMi4zLDAgNC4xLTEuOCA0LjEtNC4xdi0xMDcuOWMwLTIuMy0xLjgtNC4xLTQuMS00LjFoLTY4LjdjLTAuMywwLTAuNywwLTEsMC4xLTAuMSwwLTAuMiwwLjEtMC4yLDAuMS0wLjMsMC4xLTAuNSwwLjItMC44LDAuMy0wLjEsMC4xLTAuMiwwLjEtMC4zLDAuMi0wLjMsMC4yLTAuNiwwLjQtMC44LDAuN2wtMjIuOSwyN2MtMC4zLDAuMy0wLjUsMC43LTAuNywxLjEtMC4xLDAuMS0wLjEsMC4zLTAuMSwwLjQtMC4xLDAuMy0wLjEsMC42LTAuMiwwLjkgMCwwLjEgMCwwLjEgMCwwLjJ2ODAuOWMtMS4wNjU4MWUtMTQsMi40IDEuOSw0LjIgNC4xLDQuMnptMTguOC0xMDAuOHYxMS44aC0xMGwxMC0xMS44em0tMTQuNywxOS45aDE4LjhjMi4zLDAgNC4xLTEuOCA0LjEtNC4xdi0yMi45aDYwLjV2OTkuN2gtODMuNHYtNzIuN3oiIGZpbGw9IiMwMDAwMDAiLz4KICAgICAgPHBhdGggZD0ibTk0LDUwLjVoLTU5Yy0yLjMsMC00LjEsMS44LTQuMSw0LjEgMCwyLjMgMS44LDQuMSA0LjEsNC4xaDU5YzIuMywwIDQuMS0xLjggNC4xLTQuMSAwLTIuMy0xLjgtNC4xLTQuMS00LjF6IiBmaWxsPSIjMDAwMDAwIi8+CiAgICAgIDxwYXRoIGQ9Im05NCw3MC4zaC01OWMtMi4zLDAtNC4xLDEuOC00LjEsNC4xIDAsMi4zIDEuOCw0LjEgNC4xLDQuMWg1OWMyLjMsMCA0LjEtMS44IDQuMS00LjEgMC0yLjItMS44LTQuMS00LjEtNC4xeiIgZmlsbD0iIzAwMDAwMCIvPgogICAgPC9nPgogIDwvZz4KPC9zdmc+Cg==)
|
||||
}
|
||||
|
||||
#container-6 {
|
||||
|
||||
}
|
||||
|
||||
#container-7 {
|
||||
|
||||
}
|
||||
.container-inner {
|
||||
display: none;
|
||||
background-color: rgb(221, 221, 221);
|
||||
@ -1168,14 +1185,6 @@ video {
|
||||
background-image: url("data:image/svg+xml,%3Csvg viewBox='-42 0 512 512.002' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m210.351562 246.632812c33.882813 0 63.222657-12.152343 87.195313-36.128906 23.972656-23.972656 36.125-53.304687 36.125-87.191406 0-33.875-12.152344-63.210938-36.128906-87.191406-23.976563-23.96875-53.3125-36.121094-87.191407-36.121094-33.886718 0-63.21875 12.152344-87.191406 36.125s-36.128906 53.308594-36.128906 87.1875c0 33.886719 12.15625 63.222656 36.132812 87.195312 23.976563 23.96875 53.3125 36.125 87.1875 36.125zm0 0'/%3E%3Cpath d='m426.128906 393.703125c-.691406-9.976563-2.089844-20.859375-4.148437-32.351563-2.078125-11.578124-4.753907-22.523437-7.957031-32.527343-3.308594-10.339844-7.808594-20.550781-13.371094-30.335938-5.773438-10.15625-12.554688-19-20.164063-26.277343-7.957031-7.613282-17.699219-13.734376-28.964843-18.199219-11.226563-4.441407-23.667969-6.691407-36.976563-6.691407-5.226563 0-10.28125 2.144532-20.042969 8.5-6.007812 3.917969-13.035156 8.449219-20.878906 13.460938-6.707031 4.273438-15.792969 8.277344-27.015625 11.902344-10.949219 3.542968-22.066406 5.339844-33.039063 5.339844-10.972656 0-22.085937-1.796876-33.046874-5.339844-11.210938-3.621094-20.296876-7.625-26.996094-11.898438-7.769532-4.964844-14.800782-9.496094-20.898438-13.46875-9.75-6.355468-14.808594-8.5-20.035156-8.5-13.3125 0-25.75 2.253906-36.972656 6.699219-11.257813 4.457031-21.003906 10.578125-28.96875 18.199219-7.605469 7.28125-14.390625 16.121094-20.15625 26.273437-5.558594 9.785157-10.058594 19.992188-13.371094 30.339844-3.199219 10.003906-5.875 20.945313-7.953125 32.523437-2.058594 11.476563-3.457031 22.363282-4.148437 32.363282-.679688 9.796875-1.023438 19.964844-1.023438 30.234375 0 26.726562 8.496094 48.363281 25.25 64.320312 16.546875 15.746094 38.441406 23.734375 65.066406 23.734375h246.53125c26.625 0 48.511719-7.984375 65.0625-23.734375 16.757813-15.945312 25.253906-37.585937 25.253906-64.324219-.003906-10.316406-.351562-20.492187-1.035156-30.242187zm0 0'/%3E%3C/svg%3E");
|
||||
}
|
||||
|
||||
video::-webkit-media-controls-current-time-display {
|
||||
display: none;
|
||||
}
|
||||
|
||||
video::-webkit-media-controls-time-remaining-display {
|
||||
display: none;
|
||||
}
|
||||
|
||||
video::-webkit-media-controls-timeline {
|
||||
display: none;
|
||||
}
|
||||
@ -1184,6 +1193,15 @@ video::-webkit-media-controls-timeline-container {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
audio::-webkit-media-controls-overlay-play-button, video::-webkit-media-controls-overlay-play-button {
|
||||
display: none;
|
||||
}
|
||||
|
||||
audio::-webkit-media-controls-play-button, video::-webkit-media-controls-play-button {
|
||||
display: none;
|
||||
}
|
||||
|
||||
video::-webkit-media-controls-toggle-closed-captions-button {
|
||||
display: none;
|
||||
}
|
||||
@ -1211,6 +1229,7 @@ video.clean::-webkit-media-controls-timeline-container {
|
||||
transform: scaleX(-1);
|
||||
-webkit-transform: scaleX(-1);
|
||||
}
|
||||
|
||||
.context-menu {
|
||||
display: none;
|
||||
position: absolute;
|
||||
|
||||
174
main.js
174
main.js
@ -852,6 +852,20 @@ if (urlParams.has("autojoin") || urlParams.has("autostart") || urlParams.has("aj
|
||||
session.autostart = true;
|
||||
}
|
||||
|
||||
if (urlParams.has('noiframe') || urlParams.has('noiframes') || urlParams.has('nif')){
|
||||
|
||||
session.noiframe = urlParams.get('noiframe') || urlParams.get('noiframes') || urlParams.get('nif');
|
||||
|
||||
if (!(session.noiframe)){
|
||||
session.noiframe=[];
|
||||
} else {
|
||||
session.noiframe = session.noiframe.split(",");
|
||||
}
|
||||
log("disable iframe playback");
|
||||
log(session.noiframe);
|
||||
}
|
||||
|
||||
|
||||
|
||||
if (urlParams.has('novideo') || urlParams.has('nv') || urlParams.has('hidevideo') || urlParams.has('showonly') ){
|
||||
|
||||
@ -1198,7 +1212,11 @@ if (urlParams.has('channeloffset')){
|
||||
log("max channels is 32; channels offset");
|
||||
session.audioEffects=true;
|
||||
}
|
||||
|
||||
if (urlParams.has('enhance')){
|
||||
//if (parseInt(urlParams.get('enhance')>0){
|
||||
session.enhance = true;//parseInt(urlParams.get('enhance'));
|
||||
//}
|
||||
}
|
||||
|
||||
if (urlParams.has('maxviewers') || urlParams.has('mv') ){
|
||||
|
||||
@ -1529,38 +1547,43 @@ window.onmessage = function(e){ // iFRAME support
|
||||
stats.inbound_stats[session.rpcs[i].streamID] = session.rpcs[i].stats;
|
||||
}
|
||||
|
||||
for (var uuid in session.pcs){
|
||||
session.pcs[uuid].getStats().then(function(stats){
|
||||
stats.forEach(stat=>{
|
||||
if (stat.type=="outbound-rtp"){
|
||||
if (stat.kind=="video"){
|
||||
|
||||
if ("qualityLimitationReason" in stat){
|
||||
session.pcs[uuid].stats.quality_Limitation_Reason = stat.qualityLimitationReason;
|
||||
}
|
||||
if ("framesPerSecond" in stat){
|
||||
session.pcs[uuid].stats.resolution = stat.frameWidth+" x "+ stat.frameHeight +" @ "+stat.framesPerSecond;
|
||||
}
|
||||
if ("encoderImplementation" in stat){
|
||||
session.pcs[uuid].stats.encoder = stat.encoderImplementation;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
});
|
||||
}
|
||||
|
||||
stats.outbound_stats = {};
|
||||
for (var i in session.pcs){
|
||||
stats.outbound_stats[i] = session.pcs[i].stats;
|
||||
for (var uuid in session.pcs){
|
||||
setTimeout(function(UUID){
|
||||
session.pcs[UUID].getStats().then(function(stats){
|
||||
stats.forEach(stat=>{
|
||||
if (stat.type=="outbound-rtp"){
|
||||
if (stat.kind=="video"){
|
||||
|
||||
if ("qualityLimitationReason" in stat){
|
||||
session.pcs[UUID].stats.quality_Limitation_Reason = stat.qualityLimitationReason;
|
||||
}
|
||||
if ("framesPerSecond" in stat){
|
||||
session.pcs[UUID].stats.resolution = stat.frameWidth+" x "+ stat.frameHeight +" @ "+stat.framesPerSecond;
|
||||
}
|
||||
if ("encoderImplementation" in stat){
|
||||
session.pcs[UUID].stats.encoder = stat.encoderImplementation;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
return;
|
||||
});
|
||||
return;
|
||||
});
|
||||
},0,uuid);
|
||||
}
|
||||
parent.postMessage({"stats": stats }, "*");
|
||||
setTimeout(function(){
|
||||
stats.outbound_stats = {};
|
||||
for (var i in session.pcs){
|
||||
stats.outbound_stats[i] = session.pcs[i].stats;
|
||||
}
|
||||
parent.postMessage({"stats": stats }, "*");
|
||||
},1000);
|
||||
}
|
||||
|
||||
if ("getLoudness" in e.data){
|
||||
log("GOT OUDNESS REQUEST");
|
||||
log("GOT LOUDNESS REQUEST");
|
||||
if (e.data.getLoudness == true){
|
||||
var loudness = {};
|
||||
for (var i in session.rpcs){
|
||||
@ -1574,7 +1597,7 @@ window.onmessage = function(e){ // iFRAME support
|
||||
}
|
||||
|
||||
if ("getStreamIDs" in e.data){
|
||||
log("GOT OUDNESS REQUEST");
|
||||
log("GOT LOUDNESS REQUEST");
|
||||
if (e.data.getStreamIDs == true){
|
||||
var streamIDs = {};
|
||||
for (var i in session.rpcs){
|
||||
@ -2099,31 +2122,38 @@ function printMyStats(menu){ // see: setupStatsMenu
|
||||
}
|
||||
menu.innerHTML+="<button onclick='session.forcePLI(null,event);'>Send Keyframe to Viewers</button>";
|
||||
for (var uuid in session.pcs){
|
||||
session.pcs[uuid].getStats().then(function(stats){
|
||||
stats.forEach(stat=>{
|
||||
if (stat.type=="outbound-rtp"){
|
||||
if (stat.kind=="video"){
|
||||
|
||||
if ("qualityLimitationReason" in stat){
|
||||
session.pcs[uuid].stats.quality_Limitation_Reason = stat.qualityLimitationReason;
|
||||
setTimeout(function(UUID){
|
||||
session.pcs[UUID].getStats().then(function(stats){
|
||||
stats.forEach(stat=>{
|
||||
if (stat.type=="outbound-rtp"){
|
||||
if (stat.kind=="video"){
|
||||
if ("qualityLimitationReason" in stat){
|
||||
session.pcs[UUID].stats.quality_Limitation_Reason = stat.qualityLimitationReason;
|
||||
}
|
||||
if ("framesPerSecond" in stat){
|
||||
session.pcs[UUID].stats.resolution = stat.frameWidth+" x "+ stat.frameHeight +" @ "+stat.framesPerSecond;
|
||||
}
|
||||
if ("encoderImplementation" in stat){
|
||||
session.pcs[UUID].stats.encoder = stat.encoderImplementation;
|
||||
}
|
||||
|
||||
}
|
||||
if ("framesPerSecond" in stat){
|
||||
session.pcs[uuid].stats.resolution = stat.frameWidth+" x "+ stat.frameHeight +" @ "+stat.framesPerSecond;
|
||||
}
|
||||
if ("encoderImplementation" in stat){
|
||||
session.pcs[uuid].stats.encoder = stat.encoderImplementation;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
return;
|
||||
});
|
||||
printViewValues(session.pcs[UUID].stats);
|
||||
menu.innerHTML+="<hr>";
|
||||
try{
|
||||
getById("menuStatsBox").scrollLeft = scrollLeft;
|
||||
getById("menuStatsBox").scrollTop = scrollTop;
|
||||
} catch(e){}
|
||||
return;
|
||||
}).catch(()=>{
|
||||
printViewValues(session.pcs[UUID].stats);
|
||||
menu.innerHTML+="<hr>";
|
||||
});
|
||||
printViewValues(session.pcs[uuid].stats);
|
||||
menu.innerHTML+="<br /><br />";
|
||||
try{
|
||||
getById("menuStatsBox").scrollLeft = scrollLeft;
|
||||
getById("menuStatsBox").scrollTop = scrollTop;
|
||||
} catch(e){}
|
||||
});
|
||||
|
||||
},0,uuid);
|
||||
}
|
||||
try{
|
||||
getById("menuStatsBox").scrollLeft = scrollLeft;
|
||||
@ -4837,21 +4867,34 @@ function dragElement(elmnt) {
|
||||
function loadIframe(iframesrc){ // this is pretty important if you want to avoid camera permission popup problems. You can also call it automatically via: <body onload=>loadIframe();"> , but don't call it before the page loads.
|
||||
|
||||
var iframe = document.createElement("iframe");
|
||||
var iframeContainer = getById("iFramePreview");
|
||||
iframe.allow="autoplay;camera;microphone";
|
||||
iframe.allowtransparency="true";
|
||||
iframe.allowfullscreen ="true";
|
||||
iframe.style.width="100%";
|
||||
iframe.style.height="100%";
|
||||
|
||||
iframe.style.border = "10px dashed rgb(64 65 62)";
|
||||
|
||||
if (iframesrc==""){
|
||||
iframesrc="./";
|
||||
}
|
||||
|
||||
if (document.getElementById("mainmenu")){
|
||||
var m = getById("mainmenu");
|
||||
m.remove();
|
||||
}
|
||||
iframe.src = iframesrc;
|
||||
iframeContainer.appendChild(iframe);
|
||||
return iframe
|
||||
}
|
||||
|
||||
function dropDownButtonAction(ele){
|
||||
var ele = getById("dropButton");
|
||||
if (ele){
|
||||
ele.parentNode.removeChild(ele);
|
||||
getById('container-5').classList.remove('advanced');
|
||||
getById('container-8').classList.remove('advanced');
|
||||
getById('container-6').classList.remove('advanced');
|
||||
getById('container-7').classList.remove('advanced');
|
||||
}
|
||||
}
|
||||
|
||||
function updateConstraintSliders(){
|
||||
log("updateConstraintSliders");
|
||||
@ -6156,9 +6199,13 @@ function timeSince(date) {
|
||||
var chatUpdateTimeout = null;
|
||||
var messageList = []
|
||||
|
||||
function sendChatMessage(){ // filtered + visual
|
||||
function sendChatMessage(chatMsg = false){ // filtered + visual
|
||||
var data = {};
|
||||
var msg = document.getElementById('chatInput').value;
|
||||
if (chatMsg===false){
|
||||
var msg = document.getElementById('chatInput').value;
|
||||
} else {
|
||||
var msg = chatMsg;
|
||||
}
|
||||
if (msg==""){return;}
|
||||
sendChat(msg); // send message to peers
|
||||
data.time = Date.now();
|
||||
@ -6168,7 +6215,8 @@ function sendChatMessage(){ // filtered + visual
|
||||
document.getElementById('chatInput').value = "";
|
||||
messageList.push(data);
|
||||
messageList = messageList.slice(-100);
|
||||
if(session.broadcastChannel!==false){
|
||||
if (session.broadcastChannel!==false){
|
||||
log(session.broadcastChannel);
|
||||
session.broadcastChannel.postMessage(data);
|
||||
}
|
||||
updateMessages();
|
||||
@ -6188,9 +6236,13 @@ function createPopoutChat(){
|
||||
log(randid);
|
||||
window.open('./popout?id='+randid,'popup','width=600,height=480,toolbar=no,menubar=no,resizable=yes');
|
||||
session.broadcastChannel = new BroadcastChannel(randid);
|
||||
setTimeout(function(){
|
||||
session.broadcastChannel.postMessage({messageList:messageList}); /// all data. delayed to ensure it loads. Should probably have a callback instead.
|
||||
},5000);
|
||||
session.broadcastChannel.onmessage = function (e) {
|
||||
if ("loaded" in e.data){
|
||||
session.broadcastChannel.postMessage({messageList:messageList});
|
||||
} else if ("msg" in e.data){
|
||||
sendChatMessage(e.data.msg);
|
||||
}
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
|
||||
53
popout.html
53
popout.html
@ -7,6 +7,23 @@
|
||||
<script type="text/javascript" crossorigin="anonymous" src="./thirdparty/qrcode.min.js"></script>
|
||||
<script type="text/javascript" src="./thirdparty/jquery.min.js"></script>
|
||||
<link rel="stylesheet" href="./main.css?ver=22" />
|
||||
<style>
|
||||
#chatModule{
|
||||
bottom: 1px;
|
||||
position: fixed;
|
||||
align-self: center;
|
||||
width: 100%;
|
||||
}
|
||||
#chatInput{
|
||||
color: #000;
|
||||
background-color: #FFFE;
|
||||
max-width: 700px;
|
||||
min-width: 390px;
|
||||
font-size: 105%;
|
||||
margin-left: 10px;
|
||||
padding: 3px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="chatModule" >
|
||||
@ -50,6 +67,7 @@ if (urlParams.has("id")){
|
||||
var bid = urlParams.get("id");
|
||||
}
|
||||
var bc = new BroadcastChannel(bid);
|
||||
bc.postMessage({"loaded":true});
|
||||
bc.onmessage = function (e) {
|
||||
//if (e.source != iframe.contentWindow){return} // reject messages send from other iframes
|
||||
console.log(e);
|
||||
@ -64,6 +82,31 @@ bc.onmessage = function (e) {
|
||||
}
|
||||
}
|
||||
};
|
||||
function sanitize(string) {
|
||||
var temp = document.createElement('div');
|
||||
temp.textContent = string;
|
||||
return temp.innerHTML;
|
||||
}
|
||||
|
||||
function EnterButtonChat(event){
|
||||
// Number 13 is the "Enter" key on the keyboard
|
||||
var key = event.which || event.keyCode;
|
||||
if (key === 13) {
|
||||
// Cancel the default action, if needed
|
||||
event.preventDefault();
|
||||
// Trigger the button element with a click
|
||||
sendChatMessage();
|
||||
}
|
||||
}
|
||||
|
||||
function sendChatMessage(chatMsg = false){ // filtered + visual
|
||||
var msg = document.getElementById('chatInput').value;
|
||||
msg = sanitize(msg);
|
||||
if (msg==""){return;}
|
||||
console.log(msg);
|
||||
bc.postMessage({"msg":msg})
|
||||
document.getElementById('chatInput').value = "";
|
||||
}
|
||||
|
||||
function timeSince(date) {
|
||||
|
||||
@ -95,16 +138,6 @@ function timeSince(date) {
|
||||
|
||||
|
||||
|
||||
function toggleQualityDirector(bitrate, UUID, ele = null){ // ele is specific to the button in the director's room
|
||||
var eles = ele.parentNode.childNodes;
|
||||
for (i in eles){
|
||||
eles[i].className="";
|
||||
}
|
||||
ele.className="pressed";
|
||||
session.requestRateLimit(bitrate, UUID);
|
||||
}
|
||||
|
||||
|
||||
function updateMessages(){
|
||||
document.getElementById("chatBody").innerHTML = "";
|
||||
for (i in messageList){
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user