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

dedicated new stats page added & pause button fix;

Browse Source 
Lots of small changes, mainly to accommodate the in-development mixer and stats pages

improvements to the language support also added

This is definitely a beta commit, as there is a lot that is needing testing
This commit is contained in:
Steve Seguin 2022-05-14 19:21:07 -04:00 committed by GitHub
parent 5f8afd1b3c
commit 9046bcdb38
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
20 changed files with 5848 additions and 739 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

121
control.html Normal file
View File

@ -0,0 +1,121 @@
<html>
<head>
<style>
body {
margin:0;
padding:0;
height:100%;
width:100%;
border:0;
overflow:hidden;
}
</style>
</head>
<body id="body">
<button onclick='send({"abc1231":[0,0,50,50],abc1232:[50,0,50,50],abc1233:[0,50,50,50],abc1234:[50,50,50,50]});'>2x2</button>
<button onclick='send({"abc1231":[0,0,100,100],abc1232:[0, 0, 0, 0 ],abc1233:[0,0,0,0],abc1234:[0,0,0,0]});'>1</button>
<button onclick='send({"abc1231":[0,0,50 ,100],abc1232:[50,0,100,100],abc1233:[0,0,0,0],abc1234:[0,0,0,0]});'>2x1</button>
<button onclick='send({"abc1231":[0,0,100,100],abc1232:[70,70,20,20],abc1233:[0,0,0,0],abc1234:[0,0,0,0]});'>Pip</button>
<script>
function updateURL(param, force=false) {
var para = param.split('=')[0];
if (!(urlParams.has(para)) || (force)){
if (history.pushState){
var arr = window.location.href.split('?');
var newurl;
if (arr.length > 1 && arr[1] !== '') {
newurl = window.location.href + '&' +param;
} else {
newurl = window.location.href + '?' +param;
}
window.history.pushState({path:newurl},'',newurl);
}
}
}
(function (w) {
w.URLSearchParams = w.URLSearchParams || function (searchString) {
var self = this;
self.searchString = searchString;
self.get = function (name) {
var results = new RegExp('[\?&]' + name + '=([^&#]*)').exec(self.searchString);
if (results == null) {
return null;
}
else {
return decodeURI(results[1]) || 0;
}
};
};
})(window);
var urlParams = new URLSearchParams(window.location.search);
function generateStreamID(){
var text = "";
var possible = "ABCDEFGHJKLMNPQRSTUVWXYZabcdefghijkmnpqrstuvwxyz23456789";
for (var i = 0; i < 7; i++){
text += possible.charAt(Math.floor(Math.random() * possible.length));
}
return text;
};
var roomID = "undefined";
if (urlParams.has("room")){
roomID = urlParams.get("room");
} else {
roomID = generateStreamID();
updateURL("room="+roomID);
}
var url = document.URL.substr(0,document.URL.lastIndexOf('/'));
navigator.clipboard.writeText(url+"/mixer?room="+roomID).then(() => {
/* clipboard successfully set */
}, () => {
/* clipboard write failed */
});
document.getElementById("body").innerHTML+=url+"/mixer?room="+roomID;
var socket = new WebSocket("wss://api.action.wtf:666");
socket.onclose = function (){
setTimeout(function(){window.location.reload(true);},100);
};
socket.onopen = function (){
socket.send(JSON.stringify({"join":roomID}));
}
socket.addEventListener('message', function (event) {
if (event.data){
var data = JSON.parse(event.data);
log(data);
}
});
socket.onclose = function (){
setTimeout(function(){window.location.reload(true);},100);
};
var counter=0;
function send(scene){
counter+=1;
socket.send(JSON.stringify({"msg":true, "scene":scene, "id":counter}));
}
</script>
</body>
</html>

23
electron.html
View File

@ -155,9 +155,6 @@
}
}
#messageDiv {
font-size: .7em;
color: #DDD;
@ -313,8 +310,6 @@
</div>
</div>
<div id="version"></div>
<script>
/*
* Copyright (c) 2020 Steve Seguin. All Rights Reserved.
@ -371,7 +366,7 @@ function resetHistory(){
var urlParams = new URLSearchParams(window.location.search);
if ((location.hostname.toLowerCase() == "vdo.ninja") || (location.hostname.toLowerCase() == "obs.ninja")){
if (location.hostname.toLowerCase() == "vdo.ninja"){
try {
if (navigator.userAgent.toLowerCase().indexOf(' electron/') > -1) {
function compareVersions(version){
@ -383,13 +378,13 @@ if ((location.hostname.toLowerCase() == "vdo.ninja") || (location.hostname.toLow
console.log("recentVersion: "+data.tag_name);
var recentVersion = data.tag_name.split(".");
var ood = false;
if (recentVersion[0]>version[0]){
if (parseInt(recentVersion[0])>parseInt(version[0])){
ood = true;
} else if (recentVersion[0]==version[0]) {
if (recentVersion[1]>version[1]){
} else if (parseInt(recentVersion[0])==parseInt(version[0])) {
if (parseInt(recentVersion[1])>parseInt(version[1])){
ood = true;
} else if (recentVersion[1]==version[1]) {
if (recentVersion[2]>version[2]){
} else if (parseInt(recentVersion[1])==parseInt(version[1])) {
if (parseInt(recentVersion[2])>parseInt(version[2])){
ood = true;
}
}
@ -401,9 +396,11 @@ if ((location.hostname.toLowerCase() == "vdo.ninja") || (location.hostname.toLow
}).catch(console.error);
}
if (urlParams.has('version') || urlParams.has('ver')){
var ver = urlParams.get('version') || urlParams.get('ver');
var ver = urlParams.get('version') || urlParams.get('ver') || false;
console.log("version: "+ver);
compareVersions(ver);
if (ver){
compareVersions(ver);
}
} else{
document.getElementById("version").innerHTML = "Elevate app privilleges to see current version";
try{

2
iframe.html
View File

@ -41,7 +41,7 @@
var iframe = document.createElement("iframe");
var iframeContainer = document.createElement("div");
var iframesrc = document.getElementById("viewlink").value;
iframe.allow = "autoplay;camera;microphone;fullscreen;picture-in-picture;display-capture;";
iframe.allow = "midi;geolocation;autoplay;camera;microphone;fullscreen;picture-in-picture;display-capture;";
if (iframesrc==""){
iframesrc="./";

128
index.html
View File

@ -55,7 +55,7 @@
<meta property="twitter:image" content="./media/vdoNinja_logo_full.png" />
<meta name="msapplication-TileColor" content="#da532c" />
<meta name="theme-color" content="#ffffff" />
<link rel="stylesheet" href="./main.css?ver=153" />
<link rel="stylesheet" href="./main.css?ver=155" />
<script type="text/javascript" crossorigin="anonymous" src="./thirdparty/adapter.min.js"></script>
<style id="lightbox-animations" type="text/css"></style>
<!-- <link rel="manifest" href="manifest.json" /> -->
@ -80,7 +80,7 @@
<link itemprop="url" href="./media/vdoNinja_logo_full.png" />
</span>
<script type="text/javascript" crossorigin="anonymous" src="./thirdparty/CodecsHandler.js?ver=37"></script>
<script type="text/javascript" crossorigin="anonymous" src="./webrtc.js?ver=438"></script>
<script type="text/javascript" crossorigin="anonymous" src="./webrtc.js?ver=445"></script>
<input id="zoomSlider" type="range" style="display: none;" />
<div id="header">
@ -336,7 +336,7 @@
<br />
</ul>
<br /><br />
<i>Looking to just chat and not direct?</i>
<i data-translate="looking-to-just-chat-and-not-direct">Looking to just chat and not direct?</i>
<button onclick="jumptoroom2()" class="gobutton" style="width:100%;" alt="Enter the room as the group's director" title="You'll enter as the room's director">
<span data-translate="join-the-room-basic">Join the room as a Participant, rather than a director</span>
</button>
@ -373,10 +373,10 @@
<p><span data-translate="privacy-disabled">Privacy warning: The director will be able to remotely change your camera and microphone.</span></p>
</div>
<span id="guestTips" style="display:none">
<p>For the best possible experience, make sure</p>
<span><i class="las la-plug"></i><span>Your device is powered</span></span>
<span><i class="las la-ethernet"></i><span>Your connection is hardwired instead of wifi</span></span>
<span><i class="las la-headphones"></i><span>You are using headphones / earphones</span></span>
<p data-translate="for-the-best-possible-experience-make-sure">For the best possible experience, make sure</p>
<span><i class="las la-plug"></i><span data-translate="your-device-is-powered">Your device is powered</span></span>
<span><i class="las la-ethernet"></i><span data-translate="your-connection-is-hardwired-instead-of-wifi">Your connection is hardwired instead of wifi</span></span>
<span><i class="las la-headphones"></i><span data-translate="you-are-using-headphones-earphones">You are using headphones / earphones</span></span>
</span>
<span id="videoMenu" class="videoMenu">
<i class="las la-video"></i><span data-translate="video-source"> Video Source </span>
@ -782,11 +782,31 @@
<i style="margin-top:30px;font-size:600%;overflow:hidden;" class="las la-tachometer-alt"></i>
</div>
<div id="container-8" class="column columnfade pointer rounded card advanced" style="overflow: hidden;" onclick="window.location = 'https://guides.vdo.ninja';">
<h2><span data-translate="read-the-guides">Browse the Guides</span></h2>
<div id="container-8" class="column columnfade pointer rounded card advanced" style="overflow: hidden;" onclick="window.location = './mixer.html';">
<h2><span data-translate="try-the-mixer-out">Try out the Mixer</span></h2>
<i style="margin-top:30px;font-size:600%;overflow:hidden;" class="las la-blender"></i>
</div>
<div id="container-9" class="column columnfade pointer rounded card advanced" style="overflow: hidden;" onclick="window.location = 'https://guides.vdo.ninja';">
<h2><span data-translate="read-the-guides">Basic Usage Guides</span></h2>
<i style="margin-top:30px;font-size:600%;overflow:hidden;" class="las la-book-open"></i>
</div>
<div id="container-10" class="column columnfade pointer rounded card advanced" style="overflow: hidden;" onclick="window.location = 'https://docs.vdo.ninja';">
<h2><span data-translate="get-full-documentation">Full Documentation</span></h2>
<i style="margin-top:30px;font-size:600%;overflow:hidden;" class="las la-info"></i>
</div>
<div id="container-11" class="column columnfade pointer rounded card advanced" style="overflow: hidden;" onclick="window.location = 'https://github.vdo.ninja';">
<h2><span data-translate="get-the-source-code">Source Code</span></h2>
<i style="margin-top:30px;font-size:600%;overflow:hidden;" class="las la-code-branch"></i>
</div>
<div id="container-12" class="column columnfade pointer rounded card advanced" style="overflow: hidden;" onclick="window.location = 'https://docs.vdo.ninja/getting-started/sponsor';">
<h2><span data-translate="show-your-support">Show Your Support</span></h2>
<i style="margin-top:30px;font-size:600%;overflow:hidden;" class="las la-heartbeat"></i>
</div>
<p></p>
<div id="info" class="fullcolumn columnfade">
<center>
@ -800,7 +820,7 @@
<br />
<li>Youtube video
<i class="lab la-youtube"></i>
<a href="https://www.youtube.com/watch?v=vLpRzMjUDaE&list=PLWodc2tCfAH1WHjl4WAOOoRSscJ8CHACe&index=2" alt="Youtube video demoing VDO.Ninja">Demoing it here</a>
<a href="https://www.youtube.com/watch?v=QaA_6aOP9z8&list=PLWodc2tCfAH1l_LDvEyxEqFf42hOBKqQM&index=1" alt="Youtube video demoing VDO.Ninja">Demoing it here</a>
</li>
<br />
@ -886,7 +906,7 @@
<div class='directorContainer half' id='directorLinks1' style='display:none;margin-top:0;'>
<div class='directorBlock'>
<h2 title="Invite a guest or camera source to publish into the group room" style="margin-top: 5px;"><i class="las la-video director-link-icons" ></i> INVITE A GUEST</h2>
<h2 title="Invite a guest or camera source to publish into the group room" style="margin-top: 5px;"><i class="las la-video director-link-icons" ></i><span data-translate="invite-a-guest">INVITE A GUEST</span></h2>
<span style="margin:5px; line-height: 1.6;" data-translate='invite-users-to-join'>Guests can use the link to join the group room</span>
<a onclick='copyFunction(this,event)' id="director_block_1" class='task grabLinks' style='cursor:copy;background-color: #0003;'></a>
<span style="display:block;">
@ -897,8 +917,8 @@
</label>
<span data-translate="guests-hear-others" style="line-height:0;position:relative;top:-3px;">Guests hear others</span>
</span>
<button class='pull-right grey' style='font-size:1.15em' onclick='copyFunction(getById("director_block_1"),event)'><i class='las la-copy'></i>Copy link</button>
<button class='pull-right grey' style='font-size:1.15em' id="showCustomizerButton1" onclick='showCustomizer(1,this)'><i class='las la-tools'></i>Customize</button>
<button class='pull-right grey' style='font-size:1.15em' onclick='copyFunction(getById("director_block_1"),event)'><i class='las la-copy'></i><span data-translate="copy-link">Copy link</span></button>
<button class='pull-right grey' style='font-size:1.15em' id="showCustomizerButton1" onclick='showCustomizer(1,this)'><i class='las la-tools'></i><span data-translate="customize">Customize</span></button>
<span>
</div>
</div>
@ -916,8 +936,8 @@
</label>
<span data-translate="auto-add-guests" style="line-height:0;position:relative;top:-3px;">Auto-add guests</span>
</span>
<button class='pull-right grey' style='font-size:1.15em' onclick='copyFunction(getById("director_block_3"),event)'><i class='las la-copy'></i>Copy link</button>
<button class='pull-right grey' style='font-size:1.15em' id="showCustomizerButton3" onclick='showCustomizer(3,this)'><i class='las la-tools'></i>Customize</button>
<button class='pull-right grey' style='font-size:1.15em' onclick='copyFunction(getById("director_block_3"),event)'><i class='las la-copy'></i><span data-translate="copy-link">Copy link</span></button>
<button class='pull-right grey' style='font-size:1.15em' id="showCustomizerButton3" onclick='showCustomizer(3,this)'><i class='las la-tools'></i><span data-translate="customize">Customize</span></button>
<span>
</div>
@ -1223,11 +1243,10 @@
</div>
<div></div>
<div id='guestFeeds' style="display:none"><div id='deleteme'>
<div class='vidcon directorMargins' id='fakeguest1' style='min-height: 300px;text-align: center;'><h2>Guest 1</h2><i class='las la-user-circle' style='font-size:8em; margin: 20px 0px;' aria-hidden='true'></i></div>
<div class='vidcon directorMargins' id='fakeguest2' style='min-height: 300px;text-align: center;'><h2>Guest 2</h2><i class='las la-user-circle' style='font-size:8em; margin: 20px 0px;' aria-hidden='true'></i></div>
<div class='vidcon directorMargins' id='fakeguest3' style='min-height: 300px;text-align: center;'><h2>Guest 3</h2><i class='las la-user-circle' style='font-size:8em; margin: 20px 0px;' aria-hidden='true'></i></div>
<div class='vidcon directorMargins' id='fakeguest4' style='min-height: 300px;text-align: center;'><h2>Guest 4</h2><i class='las la-user-circle' style='font-size:8em; margin: 20px 0px;' aria-hidden='true'></i></div>
<h4 style='color:#CCC;margin:20px 20px 0 20px;' id='fakeguestinfo' data-translate='more-than-four-can-join' >These four guest slots are just for demonstration. More than four guests can actually join a room.</h4>
<div class='vidcon directorMargins' id='fakeguest1' style='min-height: 300px;text-align: center;'><h2><span data-translate="guest-1">Guest 1</span></h2><i class='las la-user-circle' style='font-size:8em; margin: 20px 0px;' aria-hidden='true'></i></div>
<div class='vidcon directorMargins' id='fakeguest2' style='min-height: 300px;text-align: center;'><h2><span data-translate="guest-2">Guest 2</span></h2><i class='las la-user-circle' style='font-size:8em; margin: 20px 0px;' aria-hidden='true'></i></div>
<div class='vidcon directorMargins' id='fakeguest3' style='min-height: 300px;text-align: center;'><h2><span data-translate="guest-3">Guest 3</span></h2><i class='las la-user-circle' style='font-size:8em; margin: 20px 0px;' aria-hidden='true'></i></div>
<div class='vidcon directorMargins' id='fakeguest4' style='min-height: 300px;text-align: center;'><h2><span data-translate="guest-4">Guest 4</span></h2><i class='las la-user-circle' style='font-size:8em; margin: 20px 0px;' aria-hidden='true'></i></div>
</div></div>
</div>
<div id="hiddenElements"></div>
@ -1316,11 +1335,23 @@
<span data-translate="force-keyframe">Rainbow Puke Fix</span>
</button>
<button class="hidden" data-cluster="1" data-action-type="stats-remote" data-value="0" title="Request the statistics of this video in any active scene" onclick="session.sendRequest({'requestStats':'true', }, this.dataset.UUID);">
<button class="hidden" data-cluster="1" data-action-type="stats-remote" data-value="0" title="Request the statistics of this video in any active scene" onclick="toggleSceneStats(this);">
<i class="las la-info-circle"></i>
<span data-translate="stats-remote"> Scene Stats</span>
</button>
<span class="graphSection hidden" data-cluster="1" data-action-type="stats-graphs-bitrate" data-value="0">
<span class="hidden" data-no-scenes="true">No scenes active</span>
</span>
<span class="graphSection hidden" data-cluster="1" data-action-type="stats-graphs-details" data-value="0">
<span data-action-type="stats-graphs-details-container" class="hidden">
<span class="hidden" data-scene-name="true">scene</span>
<span class="hidden" data-bitrate="true">bitrate (kbps)</span>
<span class="hidden" data-resolution="true">resolution</span>
<span class="hidden" data-video-codec="true">video codec</span>
</span>
</span>
<!---- /////// BREAK //////// -->
<span class="hideDropMenu" onclick="toggleByDataset('2');getById('chevarrow4').classList.toggle('bottom');getById('chevarrow4').classList.toggle('right');"><i id="chevarrow4" class="chevron right" aria-hidden="true" style="padding:0px 7px 0 3px;" ></i><span data-translate="additional-controls">Additional controls</span></span>
<span class="hideDropMenu" style="grid-column: 2;" ></span>
@ -1362,7 +1393,7 @@
<div style="text-align: center;font-size: 150%;" data-action-type="order-value" title="Current Index Order of this Video" >0</div>
Mix Order
</span>
<button style="width:34px;margin-left:0;" data-action-type="order-up" title="Shift this Video Up in Order" onclick="changeOrder(1,this.dataset.UUID);">
<button style="width:34px;margin-left:0;height: 29px;" data-action-type="order-up" title="Shift this Video Up in Order" onclick="changeOrder(1,this.dataset.UUID);">
<span data-translate="order-up"><i class="las la-plus"></i></span>
</button>
</span>
@ -1660,12 +1691,18 @@
<div class="advanced" id="grabDirectorSoloLinkParent" title="The solo view link of the Director's video."><i class="las la-user"></i> Director's solo link:<a onclick="copyFunction(this,event)" data-drag="1" draggable="true" id="grabDirectorSoloLink" class="task" ></a></div>
<br />
<button onclick="toggleSettings()" style="width: 135px; background-color:#EFEFEF;padding:9px 12px 10px 2px;margin: 0px 0px 20px 0"><i class="chevron right" style="font-size:150%;top:3px;position:relative;"></i> <b><span data-translate="close-settings">Close Settings</span></b></button>
<button onclick="toggleSettings()" class="toggleSettings"><i class="chevron right" style="font-size:150%;top:3px;position:relative;"></i> <b><span data-translate="close-settings">Close Settings</span></b></button>
<button id='advancedOptionsAudio' onclick="this.classList.toggle('highlight');toggle(getById('popupSelector_constraints_audio'),false,false); getById('popupSelector_constraints_loading').style.visibility='visible';" class="advancedToggle"><i class="las la-sliders-h" style="font-size:150%;top:3px;position:relative;"></i> <b><span class="mobileHide" data-translate="advanced">Advanced </span>Audio</b></button>
<button id='advancedOptionsAudio' onclick="this.classList.toggle('highlight');toggle(getById('popupSelector_constraints_audio'),false,false); getById('popupSelector_constraints_loading').style.visibility='visible';" class="advancedToggle">
<i class="las la-sliders-h" style="font-size:150%;top:3px;position:relative;"></i> <b>Audio</b></button>
<button id='advancedOptionsCamera' onclick="this.classList.toggle('highlight');toggle(getById('popupSelector_constraints_video'),false,false); getById('popupSelector_constraints_loading').style.visibility='visible';" class="advancedToggle"><i class="las la-sliders-h" style="font-size:150%;top:3px;position:relative;"></i> <b><span class="mobileHide" data-translate="advanced">Advanced </span>Video</b></button>
<button id='advancedOptionsCamera' onclick="this.classList.toggle('highlight');toggle(getById('popupSelector_constraints_video'),false,false); getById('popupSelector_constraints_loading').style.visibility='visible';" class="advancedToggle">
<i class="las la-sliders-h" style="font-size:150%;top:3px;position:relative;"></i> <b>Video</b></button>
<span class="mobileHide">
<button id='advancedOptionsGeneral' onclick="this.classList.toggle('highlight');toggle(getById('popupSelector_user_settings'),false,false); getById('popupSelector_user_settings').style.visibility='visible';" style='padding: 10px 12px 12px 8px;margin: 0px 0px 0px 10px;'>
<i class="las la-user-cog" style="font-size:150%;top:1.5px;position:relative;"></i> <b><span data-translate="user">User</span></b></button>
</span>
<span id="popupSelector_constraints_audio" class="popupSelector_constraints" style="display: none;">
@ -1676,7 +1713,12 @@
<span id="popupSelector_constraints_loading" style="display: none; visibility:hidden">
<i class='las la-spinner icn-spinner' style='margin:30px;font-size:400%;color:white;'></i>
</span>
<span id="popupSelector_user_settings" style="display: none; visibility:hidden">
<label title="Choose a hotkey for Hold-to-Talk. If using Electron Capture, elevate privilleges to have it become global">Hold-to-Talk Hot-key</label>
<input type="text" id="pptHotKey" placeholder="press a key here" style="padding-left: 7px;" onkeypress="event.preventDefault;event.stopPropagation();return false;" onkeyup="event.preventDefault;event.stopPropagation();return false;" onkeydown="setHotKey();"/>
<button onclick="setHotKey(false);" style="margin: 0 0 0 4px; border-radius: 5px; padding: 3px 3px;">Clear</button>
</span>
</div>
<nav id="context-menu" class="context-menu">
<ul class="context-menu__items">
@ -1768,6 +1810,18 @@
<span data-translate="show-video-stats">Show Stats</span>
</a>
</li>
<li class="context-menu__item advanced" id="RemoteHangupContextOption">
<a href="#" class="context-menu__link" data-action="RemoteHangup">
<i class="las la-external-link"></i>
<span data-translate="remote-hangup-connection">Remote Hang-up</span>
</a>
</li>
<li class="context-menu__item advanced" id="RemoteReloadContextOption">
<a href="#" class="context-menu__link" data-action="RemoteReload">
<i class="las la-external-link"></i>
<span data-translate="remote-reload-connection">Remote Reload Page</span>
</a>
</li>
</ul>
</nav>
@ -1787,30 +1841,30 @@
<div class="promptModalInner">
<span class='modalClose' onclick="toggleRoomSettings();">×</span>
<span></span>
<h3>Change room settings</h3><br />
<label title="Increase this at your peril. Changes the total inbound video bitrate per guest; mobile devices excluded. Webp-mode also excluded." for="trbSettingInput">Change room video quality:</label>
<h3 data-translate="change-room-settings">Change room settings</h3><br />
<label title="Increase this at your peril. Changes the total inbound video bitrate per guest; mobile devices excluded. Webp-mode also excluded." for="trbSettingInput" data-translate="change-room-video-quality">Change room video quality:</label>
<span style="margin-left: 6px;" id="trbSettingInputFeedback"></span>-kbps
<input id="trbSettingInput" type="range" min="0" max="4000" value="500" onchange="changeTRB(this);" oninput="getById('trbSettingInputFeedback').innerHTML = this.value;" style="width:100%;display:block;" />
<span style="margin: 20px 0 0 0;display:block" id='highlightDirectorSpan' title="Only the director's video will be visible to guests and within group scenes">
<input id="highlightDirector" style="width: 15px; height: 15px; margin:10px;" name="highlightDirector" data-value="0" data-action-type="solo-video" type="checkbox" onchange="requestInfocus(this);" />
<label for="highlightDirector">Highlight Director (only video guests will see)</label>
<label for="highlightDirector" data-translate="highlight-director-only-video-guests-will-see">Highlight Director (only video guests will see)</label>
</span>
<span style="margin: 5px 0 0 0;display:block" id='enableCodirector' title="Allow for remote co-directors">
<span id="coDirectorEnableSpan">
<input id="coDirectorEnable" style="width: 15px; height: 15px; margin:10px;" name="coDirectorEnable" data-value="0" data-action-type="codirector" type="checkbox" onchange="toggleCoDirector(this);" />
<label for="coDirectorEnable">Allow for remote co-directors</label>
<label for="coDirectorEnable" data-translate="allow-for-remote-co-directors">Allow for remote co-directors</label>
</span>
<span style="margin:0;display:none;" id='codirectorSettings'>
<div>
<input id="codirectorSettings_transfer" style="width: 15px; height: 15px; margin:10px;" name="codirectorSettings_transfer" data-value="0" data-action-type="codirector_transfer" type="checkbox" onchange="toggleCoDirector_transfer(this);" />
<label for="codirectorSettings_transfer">Allow co-directors to transfer guests</label>
<label for="codirectorSettings_transfer" data-translate="allow-co-directors-to-transfer-guests">Allow co-directors to transfer guests</label>
</div>
<div style="display:none;">
<input id="codirectorSettings_changeurl" style="width: 15px; height: 15px; margin:10px; " name="codirectorSettings_changeurl" data-value="0" data-action-type="codirector_changeurl" type="checkbox" onchange="toggleCoDirector_changeurl(this);" />
<label for="codirectorSettings_changeurl">Allow co-directors to change a guest's URL</label>
<label for="codirectorSettings_changeurl" data-translate="allow-co-directors-to-change-a-guests-url">Allow co-directors to change a guest's URL</label>
</div>
<div style="margin:8px;">
<label for="codirectorSettings_invite">Basic co-director invite link:</label>
<label for="codirectorSettings_invite" data-translate="basic-co-director-invite-link">Basic co-director invite link:</label>
<input id="codirectorSettings_invite" style="display:block;width: 100%;margin: 3px 0; padding: 4px 5px 3px 5px; border: 1px solid black;" name="codirectorSettings_invite" value="some URL here" type="text" />
</div>
</span>
@ -1881,6 +1935,7 @@
<div id="userList">
</div>
</div>
<div id="signalMeterTemplate" class="signal-meter advanced" data-cpu="0" data-level="0">
<i class="las la-signal"></i>
<i class="las la-fire-alt"></i>
@ -1906,7 +1961,7 @@
<source src="./media/tone.mp3" type="audio/mpeg">
<source src="./media/tone.ogg" type="audio/ogg">
</audio>
<div class="gone advanced" >
<div class="gone" >
<!-- This image is used when dragging elements -->
<img src="./media/favicon-32x32.png" id="dragImage" loading="lazy" />
</div>
@ -2036,13 +2091,14 @@
// session.introOnClean = true; // this will load the page with the webcam selection screen if &push or &room is in the URL; no need to use &webcam.
// session.lowBitrateCutoff = 300; // Set a minimum bitrate (in kbps) before the stream is hidden. Useful for IRL streams maybe
// session.apiserver = "wss://api.vdo.ninja:443"; // specifiy a custom websocket API URL.
// session.darkmode = false; // enable or disable the dark style theme as the default
</script>
<script type="text/javascript" crossorigin="anonymous" src="./thirdparty/aes.js"></script>
<script type="text/javascript" crossorigin="anonymous" id="lib-js" src="./lib.js?ver=294"></script>
<script type="text/javascript" crossorigin="anonymous" id="lib-js" src="./lib.js?ver=320"></script>
<!--
// If you wish to change branding, blank offers a good clean start.
<script type="text/javascript" id="main-js" src="./main.js" data-translation="blank"></script>
-->
<script type="text/javascript" crossorigin="anonymous" id="main-js" src="./main.js?ver=322"></script>
<script type="text/javascript" crossorigin="anonymous" id="main-js" src="./main.js?ver=348"></script>
</body>
</html>

1654
lib.js
View File

File diff suppressed because it is too large Load Diff

161
main.css
View File

@ -81,16 +81,26 @@ table {
.playButton {
border-radius: 50vh;
width: min(50vw, 50vh);
width: min(30vw, 30vh);
cursor: pointer;
opacity: 100%;
margin-top: 10vh;
background-color: #646262;
background-color: #bbb;
background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 122.88 122.88' style='enable-background:new 0 0 122.88 122.88' xml:space='preserve'%3E%3Cstyle type='text/css'%3E.st0%7Bfill-rule:evenodd;clip-rule:evenodd;%7D%3C/style%3E%3Cg%3E%3Cpath class='st0' d='M61.44,0c33.93,0,61.44,27.51,61.44,61.44s-27.51,61.44-61.44,61.44S0,95.37,0,61.44S27.51,0,61.44,0L61.44,0z M83.31,65.24c3.13-2.02,3.12-4.27,0-6.06L50.98,40.6c-2.55-1.6-5.21-0.66-5.14,2.67l0.1,37.55c0.22,3.61,2.28,4.6,5.32,2.93 L83.31,65.24L83.31,65.24z M61.44,12.48c27.04,0,48.96,21.92,48.96,48.96c0,27.04-21.92,48.96-48.96,48.96S12.48,88.48,12.48,61.44 C12.48,34.4,34.4,12.48,61.44,12.48L61.44,12.48z'/%3E%3C/g%3E%3C/svg%3E");
display: inline-block;
height: min(50vw, 50vh);
height: min(30vw, 30vh);
background-repeat: no-repeat;
border: #bbb 3vh solid;
position: absolute;
}
#bigPlayButton>.playButton {
width: min(50vw, 50vh);
margin-top: 10vh;
background-color: #646262;
height: min(50vw, 50vh);
border: #646262 7vh solid;
position: unset;
position: static;
}
.paused {
cursor: pointer;
@ -609,6 +619,56 @@ hr {
.hasMedia > .battery {
display:block;
}
.slotsbar {
border-radius: 6px;
margin: 3.8px 3.8px 0 3.8px;
padding: 0 6px;
box-shadow: 0 0 1px #111;
cursor:grab;
color: white;
text-shadow: 0 0 1px black;
text-align: center;
}
.slotsbar>button{
margin: 0;
padding: 0 10px;
}
.slotsbar:active {
cursor:grabbing;
}
.slotsbar[data-slot='0'] {
background: linear-gradient(145deg, #dadada, #b8b8b8);
}
.slotsbar[data-slot='1'] {
background-color: #00AAAA
}
.slotsbar[data-slot='2'] {
background-color: #FF0000
}
.slotsbar[data-slot='3'] {
background-color: #0000FF
}
.slotsbar[data-slot='4'] {
background-color: #AA00AA
}
.slotsbar[data-slot='5'] {
background-color: #00FF00
}
.slotsbar[data-slot='6'] {
background-color: #AAAA00
}
.slotsbar[data-slot='7'] {
background-color: #AACC44
}
.slotsbar[data-slot='8'] {
background-color: #CCAA44
}
.slotsbar[data-slot='9'] {
background-color: #CC44AA
}
.slotsbar[data-slot='10'] {
background-color: #44AACC
}
.signal-meter{
width: 22px;
@ -1219,7 +1279,7 @@ body {
.advancedToggle {
display:none;
background-color:#EFEFEF;
padding:10px 12px 12px 2px;
padding:10px 12px 12px 8px;
margin: 0px 0px 0px 10px;
}
@ -1509,6 +1569,13 @@ input[type=range]:focus::-ms-fill-upper {
color:white;
text-shadow: 0px 0px 6px #000000FF;
font-weight: 700;
}
#popupSelector_user_settings label{
color:white;
text-shadow: 0px 0px 6px #000000FF;
font-weight: 700;
padding: 0 10px 0 0;
}
.tooltip {
position: relative;
@ -1726,6 +1793,34 @@ label {
animation: fadeout 1s;
opacity: 0!important;
}
.partialFadeout{
opacity: .1 !important;
}
.greyout {
animation: greyout 3s;
opacity: 0.3!important;
}
.graphSection>span {
font-size: 10px;
display: block;
margin: 5.5px;
margin-top: 3px;
}
span[data-action-type="stats-graphs-details-container"]>span{
padding: 1px;
display:block;
}
@keyframes greyout {
0% {
opacity: 1
}
100% {
opacity: 0.3
}
}
@keyframes fadeout {
0% {
@ -1778,22 +1873,34 @@ label {
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);
max-height: 100%;
min-height: 90%;
}
.canvasStats{
background-color: black;
width: calc(100% - 10px);
height: 50px;
margin: 5px;
}
.manualInput{
width: 55px;
display: inline-block;
overflow: scroll;
padding: 1px 0 0 5px;
margin-left: 5px;
}
#add_screen {
padding-bottom: 20px;
}
.soloButton{
padding:5px;word-wrap: break-word; overflow:hidden; white-space: nowrap; overflow: hidden; font-size:0.7em; text-overflow: ellipsis;
}
.lowerRaisedHand{
margin: auto;margin-bottom:10px;display:none;background-color:yellow;
}
.float {
opacity: 0.8;
min-width: 45px;
@ -1904,7 +2011,7 @@ img {
left: 0;
}
.skip-animation .container-inner{
display:block;
display:block;
}
.out-animation {
@ -2272,6 +2379,12 @@ audio.fileshare::-webkit-media-controls-play-button, video.fileshare::-webkit-me
background-color: #f3f3f3;
border: 1px solid #ccc;
}
button.toggleSettings{
width: 135px;
background-color:#EFEFEF;
padding:9px 12px 10px 2px;
margin: 0px 0px 20px 0
}
.selected {
border: solid 3px black;
padding: 4px;
@ -2345,9 +2458,8 @@ audio.fileshare::-webkit-media-controls-play-button, video.fileshare::-webkit-me
}
.gone {
position: absolute;
display: inline-block;
left: -9999px;
position:absolute;
top: -150px;
}
.grabLinks {
display: inline-flex;
@ -2484,7 +2596,6 @@ div.multiselect {
overflow: hidden;
margin: auto auto;
border: 1px solid #ccc;
border-bottom: 0;
display: inline-block;
padding: 4px 10px 10px 10px;
background-color: #f3f3f3;
@ -2831,7 +2942,7 @@ a.task {
position: relative;
margin: 0 0 0 4px;
padding: 0;
width: 33px;
min-width: 25px;
font-size: 0.8em;
top: -4.9px;
}
@ -3155,7 +3266,9 @@ span#guestTips {
position: relative;
display: inline-block;
}
.PPTActive {
box-shadow: 0px 0px 10px green;
}
.video-mute-state {
top: 2vh;
right: 2vh;
@ -3708,6 +3821,14 @@ input:checked + .slider:before {
content: "\f05a"; }
.la-play:before {
content: "\f04b"; }
.la-blender:before {
content: "\f517"; }
.la-heartbeat:before {
content: "\f21e"; }
.la-code-branch:before {
content: "\f126"; }
.la-info:before {
content: "\f129"; }
.la-square:before {
content: "\f0c8"; }
.la-play-circle:before {
@ -3776,6 +3897,8 @@ input:checked + .slider:before {
content: "\f111"; }
.la-binoculars:before {
content: "\f1e5"; }
.la-user-cog:before {
content: "\f4fe"; }
.la-stop-circle:before {
content: "\f28d"; }
.la-redo-alt:before {

435
main.js
View File

@ -42,7 +42,7 @@ async function main(){ // main asyncronous thread; mostly initializes the user s
getById("mainmenu").style.opacity = 1;
}
}
if (location.hostname !== "vdo.ninja" && location.hostname !== "obs.ninja") {
if (location.hostname !== "vdo.ninja" && location.hostname !== "backup.vdo.ninja" && location.hostname !== "obs.ninja") {
if (location.hostname === "rtc.ninja"){
try {
if (session.label === false) {
@ -101,6 +101,17 @@ async function main(){ // main asyncronous thread; mostly initializes the user s
if (urlParams.has('controls') || urlParams.has('videocontrols')) {
session.showControls = true; // show the video control bar
if (urlParams.get('controls') === "false"){
session.showControls = false;
} else if (urlParams.get('controls') === "0"){
session.showControls = false;
} else if (urlParams.get('controls') === "off"){
session.showControls = false;
}
}
if (urlParams.has('nocontrols')) {
session.showControls = false; // show the video control bar
}
if (!isIFrame){
@ -161,7 +172,6 @@ async function main(){ // main asyncronous thread; mostly initializes the user s
window.prompt = function(title, val){
return ipcRenderer.sendSync('prompt', {title, val});
};
ipcRenderer.sendSync('prompt', {title, val});
} catch(e){}
}
@ -190,6 +200,19 @@ async function main(){ // main asyncronous thread; mostly initializes the user s
getById("mutebutton").style.setProperty("display", "none", "important");
}
if (urlParams.has('bgimage')) { // URL or data:base64 image. Becomes local to this viewer only. This is like &avatar, but slightly different. Just CSS in this case
var avatarImg = urlParams.get('bgimage') || false;
if (avatarImg){
try {
avatarImg = decodeURIComponent(avatarImg);
} catch(e){}
try {
avatarImg = 'url("'+avatarImg+'")';
document.documentElement.style.setProperty('--video-background-image', avatarImg);
} catch(e){}
}
}
if (urlParams.has('nomouseevents') || urlParams.has('nme')) {
session.disableMouseEvents = true;
}
@ -355,6 +378,12 @@ async function main(){ // main asyncronous thread; mostly initializes the user s
session.meterStyle = 1;
session.signalMeter = true;
}
session.slotmode = false; // temporary; remove in the future TODO: ## -----------------------
if (urlParams.has('slotmode')){
session.slotmode = true;
}
if (urlParams.has('signalmeter')) {
session.signalMeter = urlParams.get('signalmeter');
@ -423,16 +452,17 @@ async function main(){ // main asyncronous thread; mostly initializes the user s
session.orientation = "portrait";
}
if (session.orientation && session.mobile){
document.addEventListener('fullscreenchange', event => {
document.addEventListener('fullscreenchange', event => {
log("full screen change event");
if (session.orientation && session.mobile){
if (document.fullscreenElement) {
document.exitFullscreen();
}
alert(JSON.stringify(event));
});
}
} else {
updateMixer();
}
});
if (urlParams.has('midi') || urlParams.has('hotkeys')) {
session.midiHotkeys = urlParams.get('midi') || urlParams.get ('hotkeys') || 1;
@ -489,13 +519,11 @@ async function main(){ // main asyncronous thread; mostly initializes the user s
if (urlParams.has('miconly')){
session.videoDevice=0;
session.miconly = true;
getById("add_camera").innerHTML = "Share your Microphone";
miniTranslate(getById("add_camera"), "share-your-mic");
getById("videoMenu").style.display = "none";
miniTranslate(getById("add_camera"), "share-your-mic", "Share your Microphone");
getById("container-3").title = getById("add_camera").innerText;
getById("videoMenu").style.display = "none";
getById("container-3").classList.add("microphoneBackground");
//session.autostart = true;
getById("flipcamerabutton").style.setProperty("display", "none", "important");
getById("mutevideobutton").style.setProperty("display", "none", "important");
getById("videoMenu3").style.setProperty("display", "none", "important");
@ -605,6 +633,7 @@ async function main(){ // main asyncronous thread; mostly initializes the user s
if (urlParams.has('dpi') || urlParams.has('dpr')) {
session.devicePixelRatio = urlParams.get('dpi') || urlParams.get('dpr') || 2.0;
session.devicePixelRatio = parseFloat(session.devicePixelRatio);
} //else if (window.devicePixelRatio && window.devicePixelRatio!==1){
// session.devicePixelRatio = window.devicePixelRatio; // this annoys me to no end.
//}
@ -693,7 +722,7 @@ async function main(){ // main asyncronous thread; mostly initializes the user s
}
if (urlParams.has('crop')){
var crop = parseInt(urlParams.get('crop')) || 0;
var crop = parseFloat(urlParams.get('crop')) || 0;
if (crop>0){
session.forceAspectRatio = 1.7777777778 * (crop/100);
} else if (crop<0){
@ -702,9 +731,6 @@ async function main(){ // main asyncronous thread; mostly initializes the user s
session.forceAspectRatio = 1.3333333333;
}
}
if (urlParams.has('cover')) {
session.cover = true;
document.documentElement.style.setProperty('--fit-style', 'cover');
@ -714,18 +740,27 @@ async function main(){ // main asyncronous thread; mostly initializes the user s
}
if (urlParams.has('record')) {
if (SafariVersion) {
if (!(session.cleanOutput)) {
warnUser("Your browser or device is not supported. Try Chrome if on macOS.");
if (!(session.cleanOutput)) {
if (SafariVersion && !MediaRecorder) {
if (macOS){
warnUser("Your browser may not support local media recording.\n\nTry Chrome instead if on macOS.");
} else {
warnUser("Your browser or device may not support local media recording.\n\nSafari sometimes allows the feature to be enabled via its experimental settings.");
}
} else if (SafariVersion){
if (macOS){
warnUser("It is recommended to use Chrome instead of Safari if doing local media recordings.");
} else {
warnUser("Local media recordings are an experimental feature on Apple devices.\n\nPlease at least test it out a few times first.");
}
}
} else {
session.recordLocal = urlParams.get('record');
}
session.recordLocal = urlParams.get('record');
if (session.recordLocal != parseInt(session.recordLocal)) {
session.recordLocal = 6000;
} else {
session.recordLocal = parseInt(session.recordLocal);
}
if (session.recordLocal != parseInt(session.recordLocal)) {
session.recordLocal = 6000;
} else {
session.recordLocal = parseInt(session.recordLocal);
}
}
if (urlParams.has('autorecord')) {
@ -737,7 +772,6 @@ async function main(){ // main asyncronous thread; mostly initializes the user s
} else {
session.recordLocal = parseInt(session.recordLocal);
}
}
}
if (urlParams.has('autorecordlocal')) {
@ -749,7 +783,6 @@ async function main(){ // main asyncronous thread; mostly initializes the user s
} else {
session.recordLocal = parseInt(session.recordLocal);
}
}
}
if (urlParams.has('autorecordremote')) {
@ -761,7 +794,6 @@ async function main(){ // main asyncronous thread; mostly initializes the user s
} else {
session.recordLocal = parseInt(session.recordLocal);
}
}
}
@ -884,7 +916,7 @@ async function main(){ // main asyncronous thread; mostly initializes the user s
getById("defaultAvatar2").classList.add("selected");
}
} else if (avatar){
avatar = decodeURI(avatar);
avatar = decodeURIComponent(avatar);
session.avatar = document.getElementById("defaultAvatar2");
session.avatar.ready = false;
@ -903,6 +935,9 @@ async function main(){ // main asyncronous thread; mostly initializes the user s
document.getElementById("avatarDiv").classList.remove("advanced");
}
if (urlParams.has('prompt') || urlParams.has('validate') || urlParams.has('approve')){
session.promptAccess = true;
}
if (urlParams.has('js')){ // ie: &js=https%3A%2F%2Fvdo.ninja%2Fexamples%2Ftestjs.js
console.warn("Third-party Javascript has been injected into the code. Security cannot be ensured.");
@ -1413,12 +1448,9 @@ async function main(){ // main asyncronous thread; mostly initializes the user s
}
}
//if (urlParams.has('directorview') || urlParams.has('dv')){
// session.directorView = true;
// if (!session.view){
// session.view = true;
// }
//}
if (urlParams.has('directorview') || urlParams.has('dv')){
session.directorView = true;
}
if (urlParams.has('ruler') || urlParams.has('grid') || urlParams.has('thirds')) {
session.ruleOfThirds=true;
@ -1471,8 +1503,7 @@ async function main(){ // main asyncronous thread; mostly initializes the user s
if (urlParams.has('remote') || urlParams.has('rem')) {
log("remote ENABLED");
session.remote = urlParams.get('remote') || urlParams.get('rem') || "nosecurity";
session.remote = session.remote.trim();
session.remote = urlParams.get('remote') || urlParams.get('rem') || true;
}
if (urlParams.has('latency') || urlParams.has('al') || urlParams.has('audiolatency')) {
@ -1482,7 +1513,6 @@ async function main(){ // main asyncronous thread; mostly initializes the user s
session.disableWebAudio = false;
}
if (urlParams.has('micdelay') || urlParams.has('delay') || urlParams.has('md')) {
log("audio gain ENABLED");
session.micDelay = urlParams.get('micdelay') || urlParams.get('delay') || urlParams.get('md');
@ -1670,6 +1700,8 @@ async function main(){ // main asyncronous thread; mostly initializes the user s
} catch(e){errorlog("variable css failed");}
}
if (urlParams.has('retry')) {
session.forceRetry = parseInt(urlParams.get('retry')) || 30;
}
@ -1677,26 +1709,25 @@ async function main(){ // main asyncronous thread; mostly initializes the user s
setTimeout(function(){session.retryWatchInterval();},30000);
}
var darkmode=false;
try {
if (urlParams.has("darkmode") || urlParams.has("nightmode")){
darkmode = urlParams.get("darkmode") || urlParams.get("nightmode") || null;
if ((darkmode===null) || (darkmode === "")){
darkmode=true;
session.darkmode = urlParams.get("darkmode") || urlParams.get("nightmode") || null;
if ((session.darkmode===null) || (session.darkmode === "")){
session.darkmode=true;
} else if ((darkmode=="false") || (darkmode == "0") || (darkmode == 0) || (darkmode == "off")){
darkmode=false;
session.darkmode=false;
}
} else if (urlParams.has("lightmode") || urlParams.has("lightmode")){
darkmode = false;
session.darkmode = false;
} else {
darkmode = getComputedStyle(document.querySelector(':root')).getPropertyValue('--color-mode').trim();
if (darkmode == "dark"){
darkmode = true;
session.darkmode = getComputedStyle(document.querySelector(':root')).getPropertyValue('--color-mode').trim();
if (session.darkmode == "dark"){
session.darkmode = true;
} else {
darkmode = false;
session.darkmode = false;
}
}
if (darkmode){
if (session.darkmode){
document.body.classList.add("darktheme");
document.querySelector(':root').style.setProperty('--background-color',"#02050c" );
} else {
@ -1790,20 +1821,20 @@ async function main(){ // main asyncronous thread; mostly initializes the user s
}
if (session.videoDevice === 0) {
getById("add_camera").innerHTML = "Share your Microphone";
miniTranslate(getById("add_camera"), "share-your-mic");
getById("previewWebcam").classList.add("miconly");
if (session.audioDevice === 0) {
getById("add_camera").innerHTML = "Click Start to Join";
miniTranslate(getById("add_camera"), "click-start-to-join");
miniTranslate(getById("add_camera"), "click-start-to-join", "Click Start to Join");
getById("container-2").className = 'column columnfade advanced'; // Hide screen share on mobile
getById("container-3").classList.add("skip-animation");
getById("container-3").classList.remove('pointer');
delayedStartupFuncs.push([previewWebcam]);
session.webcamonly = true;
} else {
miniTranslate(getById("add_camera"), "share-your-mic", "Share your Microphone");
getById("container-3").classList.add("microphoneBackground");
}
getById("container-3").title = getById("add_camera").innerText;
}
if (session.mobile){
@ -1994,16 +2025,35 @@ async function main(){ // main asyncronous thread; mostly initializes the user s
if (urlParams.has('codec')) {
log("CODEC CHANGED");
session.codec = urlParams.get('codec').toLowerCase();
if (session.codec=="webp"){
session.webp = true;
session.codec = false;
session.codec = urlParams.get('codec') || false;
if (session.codec){
session.codec = session.codec.toLowerCase();
if (session.codec=="webp"){
session.webp = true;
session.codec = false;
}
}
} else if (OperaGx){
session.codec = "vp8";
warnlog("Defaulting to VP8 manually, as H264 with remote iOS devices is not supported");
}
if (urlParams.has('scenelinkcodec')){ // this is mainly for a niche iframe API use
log("codecGroupFlag CHANGED");
session.codecGroupFlag = urlParams.get('scenelinkcodec') || false;
if (session.codecGroupFlag){
session.codecGroupFlag = "&codec="+session.codecGroupFlag.toLowerCase();
}
}
if (urlParams.has('scenelinkbitrate')){ // this is mainly for a niche iframe API use
log("bitrateGroupFlag CHANGED");
session.bitrateGroupFlag = urlParams.get('scenelinkbitrate') || false;
if (session.bitrateGroupFlag){
session.bitrateGroupFlag = "&totalbitrate="+parseInt(session.bitrateGroupFlag);
}
}
if (urlParams.has('h264profile')) {
session.h264profile = urlParams.get('h264profile') || "42e01f"; // 42001f
session.h264profile = session.h264profile.substring(0, 6);
@ -2120,8 +2170,8 @@ async function main(){ // main asyncronous thread; mostly initializes the user s
log(session.maxvideobitrate);
}
if (urlParams.has('totalroombitrate') || urlParams.has('totalroomvideobitrate') || urlParams.has('trb')) {
session.totalRoomBitrate = urlParams.get('totalroombitrate') || urlParams.get('totalroomvideobitrate') || urlParams.get('trb');
if (urlParams.has('totalroombitrate') || urlParams.has('totalroomvideobitrate') || urlParams.has('trb') || urlParams.has('totalbitrate') || urlParams.has('tb')) {
session.totalRoomBitrate = urlParams.get('totalroombitrate') || urlParams.get('totalroomvideobitrate') || urlParams.get('trb') || urlParams.get('totalbitrate') || urlParams.get('tb') || 0;
session.totalRoomBitrate = parseInt(session.totalRoomBitrate);
if (session.totalRoomBitrate < 1) {
@ -2137,8 +2187,8 @@ async function main(){ // main asyncronous thread; mostly initializes the user s
session.totalRoomBitrate_default = session.totalRoomBitrate; // trb_default doesn't change dynamically, but trb can (per director I guess)
}
if (urlParams.has('maxtotalscenebitrate') || urlParams.has('totalscenebitrate') || urlParams.has('mtsb') || urlParams.has('tsb')) {
session.totalSceneBitrate = urlParams.get('maxtotalscenebitrate') || urlParams.get('totalscenebitrate') || urlParams.get('mtsb') || urlParams.get('tsb') || false;
if (urlParams.has('maxtotalscenebitrate') || urlParams.has('totalscenebitrate') || urlParams.has('mtsb') || urlParams.has('tsb') || urlParams.has('totalbitrate') || urlParams.has('tb')) {
session.totalSceneBitrate = urlParams.get('maxtotalscenebitrate') || urlParams.get('totalscenebitrate') || urlParams.get('mtsb') || urlParams.get('tsb') || urlParams.get('totalbitrate') || urlParams.get('tb') || false;
if (session.totalSceneBitrate){
session.totalSceneBitrate = parseInt(session.totalSceneBitrate);
}
@ -2260,7 +2310,7 @@ async function main(){ // main asyncronous thread; mostly initializes the user s
session.statsMenu = true;
}
if (urlParams.has('datamode')) {
if (urlParams.has('datamode') || urlParams.has('dataonly')) {
session.cleanOutput=true;
session.videoDevice = 0;
session.audioDevice = 0;
@ -2269,6 +2319,7 @@ async function main(){ // main asyncronous thread; mostly initializes the user s
session.noaudio = [];
session.noiframe = [];
session.webcamonly = true;
session.dataMode = true;
}
if (urlParams.has('cleandirector') || urlParams.has('cdv')) {
@ -2846,14 +2897,13 @@ async function main(){ // main asyncronous thread; mostly initializes the user s
getById("info").innerHTML = "";
if (session.videoDevice === 0) {
getById("add_camera").innerHTML = "Share your Microphone";
miniTranslate(getById("add_camera"), "share-your-mic");
miniTranslate(getById("add_camera"), "share-your-mic", "Share your Microphone");
} else {
getById("add_camera").innerHTML = "Share your Camera";
miniTranslate(getById("add_camera"), "share-your-camera");
miniTranslate(getById("add_camera"), "share-your-camera", "Share your Camera");
}
getById("add_screen").innerHTML = "Share your Screen";
miniTranslate(getById("add_screen"), "share-your-screen");
miniTranslate(getById("add_screen"), "share-your-screen", "Share your Screen");
getById("container-2").title = getById("add_screen").innerText;
getById("container-3").title = getById("add_camera").innerText;
getById("passwordRoom").value = "";
getById("videoname1").value = "";
@ -2960,6 +3010,11 @@ async function main(){ // main asyncronous thread; mostly initializes the user s
delayedStartupFuncs.push([previewWebcam]);
}
//if (!session.director && ((ChromeVersion == 86) || (ChromeVersion == 77) || (ChromeVersion == 62) || (ChromeVersion == 51)) && (((session.permaid===false) && session.view) || (session.scene!==false))){
// session.studioSoftware = true; // vmix
if (window.obsstudio){
session.studioSoftware = true;
}
if (session.cleanViewer){
if (session.view && !session.director && session.permaid===false){
session.cleanOutput = true;
@ -3047,8 +3102,13 @@ async function main(){ // main asyncronous thread; mostly initializes the user s
getById("roomid").innerText = session.roomid;
getById("container-1").className = 'column columnfade advanced';
getById("container-4").className = 'column columnfade advanced';
// container 5 is share media file; 6 is share website
getById("container-7").style.display = 'none';
getById("container-8").style.display = 'none';
getById("container-9").style.display = 'none';
getById("container-10").style.display = 'none';
getById("container-11").style.display = 'none';
getById("container-12").style.display = 'none';
getById("mainmenu").style.alignSelf = "center";
getById("mainmenu").classList.add("mainmenuclass");
getById("header").style.alignSelf = "center";
@ -3062,31 +3122,26 @@ async function main(){ // main asyncronous thread; mostly initializes the user s
if (session.roomid.length > 0) {
if (session.videoDevice === 0) {
if (session.audioDevice === 0) {
getById("add_camera").innerHTML = "Join room";
miniTranslate(getById("add_camera"), "join-room");
miniTranslate(getById("add_camera"), "join-room", "Join room");
} else {
getById("add_camera").innerHTML = "Join room with Microphone";
miniTranslate(getById("add_camera"), "join-room-with-mic");
miniTranslate(getById("add_camera"), "join-room-with-mic", "Join room with Microphone");
}
} else {
getById("add_camera").innerHTML = "Join Room with Camera";
miniTranslate(getById("add_camera"), "join-room-with-camera");
miniTranslate(getById("add_camera"), "join-room-with-camera", "Join Room with Camera");
}
getById("add_screen").innerHTML = "Screenshare with Room";
miniTranslate(getById("add_screen"), "share-screen-with-room");
miniTranslate(getById("add_screen"), "share-screen-with-room", "Screenshare with Room");
} else {
if (session.videoDevice === 0) {
getById("add_camera").innerHTML = "Share your Microphone";
miniTranslate(getById("add_camera"), "share-your-mic");
miniTranslate(getById("add_camera"), "share-your-mic", "Share your Microphone");
} else {
getById("add_camera").innerHTML = "Share your Camera";
miniTranslate(getById("add_camera"), "share-your-camera");
miniTranslate(getById("add_camera"), "share-your-camera", "Share your Camera");
}
getById("add_screen").innerHTML = "Share your Screen";
miniTranslate(getById("add_screen"), "share-your-screen");
miniTranslate(getById("add_screen"), "share-your-screen", "Share your Screen");
}
getById("head3").classList.add('advanced');
getById("head3a").classList.add('advanced');
getById("container-2").title = getById("add_screen").innerText;
getById("container-3").title = getById("add_camera").innerText;
if (session.scene !== false) {
getById("container-4").className = 'column columnfade';
@ -3361,6 +3416,8 @@ async function main(){ // main asyncronous thread; mostly initializes the user s
}
}
if (session.sensorData) {
setupSensorData(parseInt(session.sensorData));
}
@ -3421,6 +3478,12 @@ async function main(){ // main asyncronous thread; mostly initializes the user s
if (!ret){warnlog("Not connected yet or no peers available");}
return;
}
if ("PPT" in e.data){
log("PTT activated-webmain");
toggleMute(true);
return; // this is a high-load call, so lets skip the rest of the checks to save cpu.
}
if ("sendChat" in e.data) {
sendChat(e.data.sendChat); // sends to all peers; more options down the road
@ -3429,6 +3492,7 @@ async function main(){ // main asyncronous thread; mostly initializes the user s
// Chat out gets called via getChatMessage function
// Related code: parent.postMessage({"chat": {"msg":-----,"type":----,"time":---} }, "*");
if ("mic" in e.data) { // this should work for the director's mic mute button as well. Needs to be manually enabled the first time still tho.
if (e.data.mic === true) { // unmute
session.muted = false; // set
@ -3611,13 +3675,30 @@ async function main(){ // main asyncronous thread; mostly initializes the user s
if ("sendRequest" in e.data) { // webrtc send to publishers
session.sendRequest(e.data);
}
if ("sendRawMIDI" in e.data) { // webrtc send to publishers
//var msg = {};
//msg.midi = {};
//msg.midi.d = e.data.sendRawMIDI.data; aka [d1,d2,d3];
//msg.midi.c = e.data.sendRawMIDI.channel;
//msg.midi.s = e.data.sendRawMIDI.timestamp;
// e.data.UUID or e.data.streamID or leave empty to send to all
if ("UUID" in e.data){
sendRawMIDI(e.data.sendRawMIDI, e.data.UUID); // send to connection
} else if (e.data.streamID){
sendRawMIDI(e.data.sendRawMIDI, false, e.data.streamID); // send to connection
} else {
sendRawMIDI(e.data.sendRawMIDI); // send to all
}
return; // make it send faster.
}
if ("sendPeers" in e.data) { // webrtc send message to every connected peer; like send and request; a hammer vs a knife.
session.sendPeers(e.data);
}
if ("reload" in e.data) { // reload the page
location.reload();
reloadRequested(); // location.reload();, but with no user prompt (force reload)
}
if ("getStats" in e.data) {
@ -3698,7 +3779,19 @@ async function main(){ // main asyncronous thread; mostly initializes the user s
}
if ("getRemoteStats" in e.data) {
session.sendRequest({"requestStats":true, "remote":session.remote});
if (session.remote){
session.sendRequest({"requestStats":true, "remote":session.remote});
} else {
session.sendRequest({"requestStats":true});
}
}
if ("requestStatsContinuous" in e.data) {
if (session.remote){
session.sendRequest({"requestStatsContinuous":e.data.requestStatsContinuous, "remote":session.remote});
} else {
session.sendRequest({"requestStatsContinuous":e.data.requestStatsContinuous});
}
}
if ("getLoudness" in e.data) {
@ -3794,6 +3887,13 @@ async function main(){ // main asyncronous thread; mostly initializes the user s
switchModes(e.data.previewMode);
}
if ("requestStream" in e.data){
if (e.data.requestStream){ // load a specific stream ID
log("requestStream iframe api");
session.requestStream(e.data.requestStream);
} // don't use if the stream is in your room (as not needed)
} // you can load a stream ID from inside a room that exists outside any room
if (("scene" in e.data) && ("layout" in e.data)){
warnlog("changing layout request via IFRAME API");
issueLayout(e.data.layout, e.data.scene);
@ -3803,7 +3903,6 @@ async function main(){ // main asyncronous thread; mostly initializes the user s
}
}
if (("action" in e.data) && (e.data.action!="null")) { /////////////// reuse the Companion API
var resp = processMessage(e.data); // reuse the companion API
if (resp!==null){
@ -3854,7 +3953,8 @@ async function main(){ // main asyncronous thread; mostly initializes the user s
}
}
};
}
}
if (session.midiHotkeys || session.midiOut!==false) {
@ -3874,62 +3974,23 @@ async function main(){ // main asyncronous thread; mostly initializes the user s
if (session.midiOut===true){
for (var i = 0; i < WebMidi.inputs.length; i++) {
var input = WebMidi.inputs[i];
input.addListener("midimessage", function(e) {
log(e);
var msg = {};
msg.midi = {};
msg.midi.d = e.data;
msg.midi.s = e.timestamp;
if (e.message && e.message.channel){
msg.midi.c = e.message.channel;
}
var list = [];
for (var UUID in session.pcs){
if (session.pcs[UUID].allowMIDI){
if (session.sendMessage(msg, UUID)){
list.push(UUID);
}
}
}
for (var UUID in session.rpcs){
if (session.rpcs[UUID].allowMIDI){ // specific to gstreamer code aplication
if (!list.includes(UUID)){
session.sendRequest(msg, UUID)
}
}
}
});
try {
var input = WebMidi.inputs[i];
input.addListener("midimessage", function(e) {
sendRawMIDI(e);
//var msg = {};
//msg.midi = {};
//msg.midi.d = e.data; aka [d1,d2,d3];
//msg.midi.c = e.channel;
//msg.midi.s = e.timestamp;
});
} catch(e){}
}
} else if (session.midiOut==parseInt(session.midiOut)){
try{
var input = WebMidi.inputs[parseInt(session.midiOut)-1];
input.addListener("midimessage", function(e) {
log(e);
var msg = {};
msg.midi = {};
msg.midi.d = e.data;
msg.midi.s = parseInt(10000*e.timestamp)/10000.0;
if (e.message && e.message.channel){
msg.midi.c = e.message.channel;
}
var list = [];
for (var UUID in session.pcs){
if (session.pcs[UUID].allowMIDI){
if (session.sendMessage(msg, UUID)){
list.push(UUID);
}
}
}
for (var UUID in session.rpcs){
if (session.rpcs[UUID].allowMIDI){ // specific to gstreamer code aplication
if (!list.includes(UUID)){
session.sendRequest(msg, UUID)
}
}
}
sendRawMIDI(e);
});
} catch(e){errorlog(e);};
}
@ -4152,7 +4213,6 @@ async function main(){ // main asyncronous thread; mostly initializes the user s
event.dataTransfer.setDragImage( getById('dragImage'), 24, 24);
event.dataTransfer.setData("text/uri-list", encodeURI(url));
//event.dataTransfer.setData("url", encodeURI(url));
});
@ -4205,19 +4265,9 @@ async function main(){ // main asyncronous thread; mostly initializes the user s
});
}
window.onload = function winonLoad() { // This just keeps people from killing the live stream accidentally. Also give me a headsup that the stream is ending
window.addEventListener("beforeunload", function(e) {
if (!session.noExitPrompt && !session.cleanOutput && (session.permaid!==false || session.director)){
(e || window.event).returnValue = "Are you sure you want to exit?"; //Gecko + IE
return "Are you sure you want to exit?";
} else {
//setTimeout(function(){session.hangup();},0);
return undefined; // ADDED OCT 29th; get rid of popup. Just close the socket connection if the user is refreshing the page. It's one or the other.
}
});
window.addEventListener("beforeunload", confirmUnload);
window.addEventListener("unload", function(e) {
try {
session.ws.close();
@ -4257,7 +4307,10 @@ async function main(){ // main asyncronous thread; mostly initializes the user s
});
document.addEventListener("keydown", event => {
keyDownEvent(event);
});
function keyDownEvent(event){
if ((event.ctrlKey) || (event.metaKey)) { // detect if CTRL is pressed
CtrlPressed = true;
@ -4269,56 +4322,114 @@ async function main(){ // main asyncronous thread; mostly initializes the user s
} else {
AltPressed = false;
}
if (session.disableHotKeys){return;}
if (PPTHotkey){
if (event.target && (event.target.tagName == "INPUT")){
// skip, since an input field is selected
} else if ((PPTHotkey.ctrl === event.ctrlKey) && (PPTHotkey.alt === AltPressed) && (PPTHotkey.meta === event.metaKey) && ((PPTHotkey.key===false) || ((PPTHotkey.key!==false) && (PPTHotkey.key === event.key)))){
if (session.muted && !PPTKeyPressed){
session.muted = false;
PPTKeyPressed = true;
getById("mutebutton").classList.add("PPTActive");
toggleMute(true);
} else if (!PPTKeyPressed){
PPTKeyPressed = true;
getById("mutebutton").classList.add("PPTActive");
}
event.preventDefault();
event.stopPropagation();
return;
} else if (PPTKeyPressed){
PPTKeyPressed = false;
getById("mutebutton").classList.remove("PPTActive");
if (!session.muted){
session.muted = true;
toggleMute(true);
}
event.preventDefault();
event.stopPropagation();
return;
}
}
if (KeyPressedTimeout){
event.preventDefault(); event.stopPropagation();
if (KeyPressedTimeout || PPTKeyPressed){
event.preventDefault();
event.stopPropagation();
return;
}
if (CtrlPressed && event.keyCode) {
if (event.keyCode == 77) { // M
if (event.metaKey) {
if (AltPressed) {
if (!KeyPressedTimeout){
toggleMute(); // macOS
KeyPressedTimeout = Date.now();
event.preventDefault();
event.stopPropagation();
return;
}
}
} else {
if (!KeyPressedTimeout){
toggleMute(); // Windows
KeyPressedTimeout = Date.now();
event.preventDefault();
event.stopPropagation();
return;
}
}
} else if (event.keyCode == 66) { // B
toggleVideoMute();
event.preventDefault();
event.stopPropagation();
return;
}
if (AltPressed){ // CTRL + ALT
if (event.keyCode == 70) { // F
toggleFileshare()();
event.preventDefault();
event.stopPropagation();
return;
} else if (event.keyCode == 67) { // C
cycleCameras();
event.preventDefault();
event.stopPropagation();
return;
} else if (event.keyCode == 83) { // S
toggleScreenShare()();
}
event.preventDefault();
event.stopPropagation();
return;
}
}
}
});
}
document.addEventListener("keyup", event => {
if (PPTKeyPressed){
PPTKeyPressed = false;
getById("mutebutton").classList.remove("PPTActive");
if (!session.muted){
session.muted = true;
toggleMute(true);
}
event.preventDefault();
event.stopPropagation();
return;
}
if (!(event.ctrlKey || event.metaKey)) {
if (CtrlPressed) {
CtrlPressed = false;
for (var i in Callbacks) {
var cb = Callbacks[i];
log(cb.slice(1));
cb[0](...cb.slice(1)); // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax#A_better_apply
}
Callbacks = [];

4
midi.html
View File

@ -107,7 +107,7 @@
<h2>About</h2>
<div>
You can check the console debug logs for added of input/output events and device details.
<br /><br />You can download a virtual MIDI I/O controller for windwos here:<br />
<br /><br />You can download a virtual MIDI I/O controller for Windows here:<br />
http://www.tobias-erichsen.de/software/loopmidi.html
<br /><br />This code uses the WebMIDI.js library, referenced here:<br />
https://github.com/djipco/webmidi
@ -285,7 +285,7 @@ WebMidi.enable(function (err) {
var button = document.createElement("button");
button.innerHTML = "Note G3; Chat";
button.onclick = function(){output.playNote("G3");}; // "speaker" also works in the same way.
button.onclick = function(){console.log("G3");output.playNote("G3");}; // "speaker" also works in the same way.
container.appendChild(button);
var button = document.createElement("button");

700
mixer.html
View File

@ -17,6 +17,7 @@
<style>
:root{
--aspect-ratio: 1.7777777777;
--chat-width: 450px;
}
body{
@ -40,27 +41,113 @@
width: 1280px;
max-height: calc(100vh - 80px);
max-width: calc(100vw - 290px);
background-color: #0002;
border-radius: 3px;
position: absolute;
left: 0;
top: 0;
transition: background-color 0.05s ease-out;
}
iframe.aspectRatio{
max-height: min(calc(100vh - 80px), calc((100vw - 290px) / var(--aspect-ratio)));
max-width: min(calc((100vh - 80px) * var(--aspect-ratio)), calc(100vw - 290px));
max-height: min(calc(100vh - 80px), calc((100vw - 160px) / var(--aspect-ratio)));
max-width: min(calc((100vh - 80px) * var(--aspect-ratio)), calc(100vw - 160px));
height: 720px;
width: 1280px;
}
.gone {
position:absolute;
top: -150px;
}
.message{
background: #3e3e3e00;
color: #FCFCFC;
vertical-align: top;
border: 1px solid #2e445c;
border-radius: 10px;
background: #2e445c;
box-shadow: 5px 5px 10px #121620, -5px -5px 10px #162a36;
}
.inMessage {
color: #000;
margin: 3px;
border-radius: 5px;
background: #FFF;
padding: 5px;
text-align: left;
}
.actionMessage {
color: #000;
margin: 3px;
border-radius: 5px;
background: #FFF;
padding: 5px;
text-align: left;
}
.outMessage {
color: #000;
margin: 3px;
border-radius: 5px;
background: #BCF;
padding: 5px;
text-align: right;
}
#chatBody {
background-color: #0004;
margin: 0 10px 10px 0;
border-radius: 5px;
overflow-y:scroll;
overflow-wrap: anywhere;
bottom: 45px;
position: absolute;
}
#chatBody::-webkit-scrollbar {
width: 0px;
background: transparent; /* make scrollbar transparent */
}
#chatModule {
bottom: 0;
position: fixed;
margin: 10px;
align-self: center;
width: 400px;
max-width: 100%;
z-index:3;
height: calc(100vh - 40px);
overflow: hidden;
right:0;
border: solid 2px #0005;
border-radius: 10px;
padding: 10px;
transition: all .05s ease-in-out;
}
#chatInput {
display: inline-block;
color: #000;
background-color: #FFFE;
width: 324px;
font-size: 105%;
margin-left: 7px;
}
#chatSendBar{
display: inline-block;
bottom: 0px;
position:absolute;
}
#savedroompassword{
width:50px;
}
button[data-state='true']{
background-color:#CEF !important;
}
#inviteOptions{
border: 0;
padding: 0;
display: block;
height: calc(100vh - 80px);
width: calc(100vw - 290px);
width: calc(100vw - 160px);
max-width:100%;
padding: 20px;
margin:0;
@ -72,6 +159,23 @@
box-shadow: inset 20px 20px 40px #556c85,
inset -20px -20px 40px #617c99;
}
input[type="checkbox"] {
width: 20px;
height: 20px;
text-align: center;
vertical-align: middle;
transition: all .2s ease-in-out;
}
input[type="checkbox"]:checked {
transform: scale(1.1);
}
label {
margin: 0 0px 6px 0;
display: inline-block;
font-weight: 600;
}
.ui-widget-header{
background: rgb(225,225,225); /* Old browsers */
background: -moz-linear-gradient(-45deg, rgba(255,255,255,1) 0%, rgba(241,241,241,1) 50%, rgba(225,225,225,1) 51%, rgba(246,246,246,1) 100%); /* FF3.6-15 */
@ -83,18 +187,23 @@
overflow-x: auto;
overflow-y: hidden;
position: absolute;
left: 290px;
width: calc(100vw - 290px);
left: 160px;
width: calc(100vw - 160px - var(--chat-width));
display: flex;
top: 0;
height: 80px;
}
#iframeContainer{
position: absolute;
left: 290px;
left: 160px;
top: 80px;
height: 100%;
}
#vdoninja {
max-width: calc(100vw - 160px - var(--chat-width));
width: 100vw;
}
#viewlink {
width:400px;
}
@ -115,9 +224,30 @@
animation: horizontalShake 2s;
animation-iteration-count: once;
}
#col1>.thing:hover{
animation: enlargeAnimation 2s;
animation-iteration-count: once;
}
#col1>.thing:active{
transform: scale(1.05);
animation:none;
}
.thing:active{
animation:none;
transform: translate(7px, 0px) rotate(0deg);
}
#delete:hover{
animation: none!important;
}
#delete:active{
transform: none!important;
}
@keyframes enlargeAnimation {
0% { transform: scale(1.01); }
20% { transform: scale(1.03); }
80% { transform: scale(1.05); }
100% { transform: scale(1.06); }
}
@keyframes horizontalShake {
0% { transform: translate(3px, 0px) rotate(0deg); }
20% { transform: translate(7px, 0px) rotate(0deg); }
@ -156,6 +286,7 @@
cursor:pointer;
background: linear-gradient(135deg, rgba(238,238,238,1) 60%,rgb(225, 225, 225, 1) 80%,rgb(210, 209, 209, 1) 100%);
}
canvas{
padding:10px;
cursor:pointer;
@ -226,7 +357,7 @@
#sceneSettings{
height: calc(100vh - 80px);
width: calc(100vw - 290px);
width: calc(100vw - 160px);
padding: 20px;
margin:0;
border:0;
@ -259,6 +390,10 @@
opacity: 0;
transition: visibility 0s 0.5s, opacity 0.5s linear;
}
.fade2black{
background-color: 000F;
transition: background-color 0.5s linear;
}
.hidden2{
display:none!important;
}
@ -352,6 +487,7 @@
cursor: crosshair;
margin: 5.5px;
border-radius: 0px;
display:none;
}
.modal {
@ -537,6 +673,7 @@
#demoDrop{
background-color: #30892c;
cursor: help;
display:none;
}
.demoThing{
width: 100px;
@ -551,6 +688,11 @@
border-radius: 6px;
word-wrap: break-word;
box-shadow: inset 6px 6px 6px #dadada1c, inset -6px -6px 6px #27272724;
display:none;
}
#sendChat{
bottom: 1px;
position: relative;
}
</style>
</head>
@ -562,7 +704,7 @@
</div>
</div>
<div class="col" id="col1" ondrop="drop(event)" ondragover="allowDrop(event)" ondragenter="dragenter(event)" title="Drag a stream ID here, to the desired slot, then activate the desired layout" ondragleave="dragleave(event)">
<div class="col hidden" id="col1" ondrop="drop(event)" ondragover="allowDrop(event)" ondragenter="dragenter(event)" title="Drag a stream ID here, to the desired slot, then activate the desired layout" ondragleave="dragleave(event)">
<div class="empty" data-slot="1" >SLOT 1</div>
<div class="empty" data-slot="2">SLOT 2</div>
<div class="empty" data-slot="3">SLOT 3</div>
@ -580,17 +722,39 @@
<button onclick="closeScene();">❌ Close Scene Maker</button>
</div>
</div>
<div id="chatModuleButton" class="hidden" onclick="toggleChat();" style="user-select: none;position: fixed;top: 10px;right: 10px;cursor: pointer;" title="Show the chat window">💬</div>
<div id="chatModule" class="hidden">
<div style="float: right;cursor: pointer;user-select: none;" onclick="toggleChat();" title="Hide the chat window">x</div>
<div id="chatBody" class="message">
<div class="inMessage" data-translate='welcome-to-vdo-ninja-chat'>
Welcome to VDO.Ninja! You can send text messages directly to connected peers from here.
</div>
</div>
<div id="chatSendBar">
<input id="chatInput" placeholder="Enter chat message to send here" onkeypress="EnterButtonChat(event)" />
<button onclick="sendChatMessage()" id='sendChat'>Send</button>
</div>
</div>
<div id="welcomeWindow">
<div class="center-content">
<div class="title"><h1 class="main-heading">Mixer App</h1><h2>Video chat with custom <b>layouts</b></h2></div>
<label for="roomname"><input name="roomname" id="roomname" type="text" placeholder="Room Name" />
<label for="roomname"><input name="roomname" id="roomname" type="text" placeholder="Room Name" /></label>
<font class="tooltip">
<button onclick="randomRoomName();" class="randomRoomName"></button><span class="tooltiptext">Generate a random room name</span>
</font>
<br />
<label for="roompassword"><input name="roompassword" id="roompassword" type="text" placeholder="Room Password (optional)"/><br />
<label for="roompassword"><input name="roompassword" id="roompassword" type="text" placeholder="Room Password (optional)"/></label><br />
<button onclick="startRoom();">Get started!</button><br /><br />
<span id="lastSavedRoom" class="hidden">
<br /><br />
<label for="savedroomname">
<input name="savedroomname" id="savedroomname" type="text" disabled placeholder="Room Name" /></label>
<label for="savedroompassword" id="savedpasswordlabel"><br />
<input name="savedroompassword" id="savedroompassword" disabled type="password" placeholder="Room Password"/></label>
<button onclick="startLastRoom();">Restore last room</button>
</span>
<br /><br />
<div class="footer">
<div>
<a href="https://discord.vdo.ninja" class="discord" target="_blank"></a>
@ -615,6 +779,8 @@
<h4>Remove all Layouts</h4>
<button onclick="wipeLayouts();">This will remove all the scene layouts from the current session.</button><br />
<h4>Load Default Layouts</h4>
<button onclick="resetLayouts();">This will replace all current scene layouts with the initial defaults.</button><br />
<h4>Export settings</h4>
<button onclick="exportSession();">Export all scenes and settings to disk</button><br />
@ -631,13 +797,19 @@
<div id='inviteOptions' class="hidden">
<h2>Invite options</h2>
<h4>Your room name is: <b class="roomname">ROOMNAME</b></h4>
<h4>Create new invite</h4>
<a class="inviteLink">Invite Link</a>
<h3>Create new invite</h3>
<a class="inviteLink" target="_blank">Invite Link</a><i class="inviteLink"></i><br />
<span class="hidden">
<input type="checkbox" /><label>Prompt user for a display name?</label><br />
<input type="checkbox" /><label>Guest can see other guests? (higher CPU for guest)</label><br />
<input type="checkbox" /><label>Guest will join muted? (director can remotely unmute)</label><br />
</span>
<i>You can manually customize the invite link further; see the documentation at <a href="docs.vdo.ninja" target="_blank">docs.vdo.ninja</a></i>
<br /><br />
<button onclick="modal.style.display = 'none';">Close</button>
</div>
</div>
<div id="modal" class="modal">
<div id="modal" class="modal" >
<div class="modal-content">
<span class="close-btn">&times;</span>
<div id="modal-content">
@ -645,7 +817,10 @@
</div>
</div>
</div>
<div class="gone" >
<!-- This image is used when dragging elements -->
<img src="./media/favicon-32x32.png" style="pointer-events: none;" id="dragImage" loading="lazy" />
</div>
<script>
function allowDrop(ev) {
@ -679,6 +854,16 @@
console.log(msg);
}
function toggleChat(){
document.getElementById("chatModule").classList.toggle("fadeout");
document.getElementById("chatModuleButton").classList.toggle("hidden");
if (document.getElementById("chatModule").classList.contains("fadeout")){
document.documentElement.style.setProperty('--chat-width', "0px");
} else {
document.documentElement.style.setProperty('--chat-width', "450px");
}
}
function sanitizeRoomName(roomid) {
if (!roomid){
return false;
@ -721,12 +906,29 @@
roomname = urlParams.get("room") || urlParams.get("dir") || urlParams.get("director");
roomname = sanitizeRoomName(roomname);
}
var savedLastRoom = getStorage("savedRoom");
function randomRoomName(){
var rndroom = generateString(8);
document.getElementById("roomname").value = rndroom;
if (savedLastRoom){
if ("roomname" in savedLastRoom && savedLastRoom.roomname!==false){
document.getElementById("savedroomname").value = savedLastRoom.roomname;
document.getElementById("lastSavedRoom").classList.remove("hidden");
if ("password" in savedLastRoom && savedLastRoom.password!==false){
document.getElementById("savedpasswordlabel").classList.remove("hidden");
document.getElementById("savedroompassword").value = savedLastRoom.password;
} else {
document.getElementById("savedpasswordlabel").classList.add("hidden");
}
}
}
function randomRoomName(){
document.getElementById("roomname").value = generateString(8);
}
function startLastRoom(){
document.getElementById("roomname").value = document.getElementById("savedroomname").value;
document.getElementById("roompassword").type = "password";
document.getElementById("roompassword").value = document.getElementById("savedroompassword").value;
startRoom();
}
function startRoom(){
var pid = document.getElementById("roompassword").value.trim();
if (pid){
@ -755,6 +957,138 @@
}
}
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(){ // filtered + visual
var msg = document.getElementById('chatInput').value;
msg = sanitize(msg);
if (msg==""){return;}
console.log(msg);
iframe.contentWindow.postMessage({ sendChat: msg }, "*");
document.getElementById('chatInput').value = "";
var message = {};
message.label = "You:";
message.type = "sent";
message.msg = msg;
updateMessages(message);
}
function timeSince(date) {
var seconds = Math.floor((new Date() - date) / 1000);
var interval = seconds / 31536000;
if (interval > 1) {
return Math.floor(interval) + " years";
}
interval = seconds / 2592000;
if (interval > 1) {
return Math.floor(interval) + " months";
}
interval = seconds / 86400;
if (interval > 1) {
return Math.floor(interval) + " days";
}
interval = seconds / 3600;
if (interval > 1) {
return Math.floor(interval) + " hours";
}
interval = seconds / 60;
if (interval > 1) {
return Math.floor(interval) + " minutes";
}
return "Seconds ago";
}
function updateMessages(message = false){
if (message){
var time = timeSince(message.time);
var msg = document.createElement("div");
////// KEEP THIS IN /////////
console.log(message.msg); // Display Recieved messages for View-Only clients.
/////////////////////////////
var label = "";
if (message.label){
label = message.label;
}
if (message.type == "sent"){
msg.innerHTML = "<span class='chat_message chat_sent'>"+message.msg + " </span><i><small> <small>- "+time+"</small></small></i><span style='display:none'>"+label+"</span>";
msg.classList.add("outMessage");
} else if (message.type == "recv"){
msg.innerHTML = label+"<span class='chat_message chat_recv'>"+message.msg + " </span><i><small> <small>- "+time+"</small></small></i>";
msg.classList.add("inMessage");
} else if (message.type == "action"){
msg.innerHTML = label+"<span class='chat_message chat_action'>"+message.msg + " </span><i><small> <small>- "+time+"</small></small></i>";
msg.classList.add("actionMessage");
} else if (message.type == "alert"){
msg.innerHTML = "<span class='chat_message chat_alert'>"+message.msg + " </span><i><small> <small>- "+time+"</small></small></i>";
msg.classList.add("inMessage");
} else {
msg.innerHTML = "<span class='chat_message chat_other'>"+message.msg + " </span><i><small> <small>- "+time+"</small></small></i>";
msg.classList.add("inMessage");
}
document.getElementById("chatBody").appendChild(msg);
} else {
document.getElementById("chatBody").innerHTML = "";
for (i in messageList){
var time = timeSince(messageList[i].time);
var msg = document.createElement("div");
////// KEEP THIS IN /////////
console.log(messageList[i].msg); // Display Recieved messages for View-Only clients.
/////////////////////////////
var label = "";
if (messageList[i].label){
label = messageList[i].label;
}
if (messageList[i].type == "sent"){
msg.innerHTML = "<span class='chat_message chat_sent'>"+messageList[i].msg + " </span><i><small> <small>- "+time+"</small></small></i><span style='display:none'>"+label+"</span>";
msg.classList.add("outMessage");
} else if (messageList[i].type == "recv"){
msg.innerHTML = label+"<span class='chat_message chat_recv'>"+messageList[i].msg + " </span><i><small> <small>- "+time+"</small></small></i>";
msg.classList.add("inMessage");
} else if (messageList[i].type == "action"){
msg.innerHTML = label+"<span class='chat_message chat_action'>"+messageList[i].msg + " </span><i><small> <small>- "+time+"</small></small></i>";
msg.classList.add("actionMessage");
} else if (messageList[i].type == "alert"){
msg.innerHTML = "<span class='chat_message chat_alert'>"+messageList[i].msg + " </span><i><small> <small>- "+time+"</small></small></i>";
msg.classList.add("inMessage");
} else {
msg.innerHTML = "<span class='chat_message chat_other'>"+messageList[i].msg + " </span><i><small> <small>- "+time+"</small></small></i>";
msg.classList.add("inMessage");
}
document.getElementById("chatBody").appendChild(msg);
}
}
//if (chatUpdateTimeout){
// clearInterval(chatUpdateTimeout);
//}
document.getElementById("chatBody").scrollTop = document.getElementById("chatBody").scrollHeight;
//chatUpdateTimeout = setTimeout(function(){updateMessages()},60000);
}
function errorlog(e,a=null,b=null){
console.error(e);
}
@ -911,6 +1245,7 @@
} else {
ev.target.appendChild(origThing);
}
document.getElementById("col2").appendChild(document.getElementById("demoDrop"));
document.getElementById("col2").appendChild(document.getElementById("delete"));
var eles = document.querySelectorAll(".thing");
@ -936,7 +1271,7 @@
var slotsNeeded = 1;
var lastLayout = false;
function updateList(){
function updateList(autoadd=false){
//<div id="col2" ondrop="dropRemove(event)" ondragover="allowDrop(event)">
// <div class="thing" draggable="true" ondragstart="drag(event)" id="thing4">THING 4</div>
// <div class="thing" draggable="true" ondragstart="drag(event)" id="thing1">THING 1</div>
@ -1022,7 +1357,14 @@
}catch(e){}
document.getElementById("col2").appendChild(document.getElementById("delete"));
if (autoadd){
var event = new MouseEvent('dblclick', {
'view': window,
'bubbles': true,
'cancelable': true
});
document.getElementById("sid_"+autoadd).dispatchEvent(event);
}
}
var colors = [
@ -1039,116 +1381,98 @@
];
var savedSession = getStorage("savedSession");
var initialLayouts = {};
initialLayouts.layouts = [];
var data = [
{x:0, y:0, w:100, h:100}
];
initialLayouts.layouts.push(data);
var data = [
null,
{x:0, y:0, w:100, h:100}
];
initialLayouts.layouts.push(data);
var data = [
null,
null,
{x:0, y:0, w:100, h:100}
];
initialLayouts.layouts.push(data);
var data = [
null,
null,
null,
{x:0, y:0, w:100, h:100}
];
initialLayouts.layouts.push(data);
var data = [
{x:0, y:0, w:50, h:100, c:false},
{x:50, y:0, w:50, h:100, c:false}
];
initialLayouts.layouts.push(data);
var data = [
{x:70, y:70, w:30, h:30, z:1, c:true},
{x:0, y:0, w:100, h:100,z:0, c:false}
];
initialLayouts.layouts.push(data);
// var data = [
// {x:0, y:0, w:100, h:100,z:0, c:true},
// {x:70, y:70, w:30, h:30, z:1, c:false}
// ];
// initialLayouts.layouts.push(data);
/// var data = [
// {x:0, y:0, w:20, h:20, z:1, c:true},
// {x:0, y:0, w:100, h:100,z:0, c:false}
// ];
// initialLayouts.layouts.push(data);
var data = [
{x:0, y:0, w:50, h:50, c:true},
{x:50, y:0, w:50, h:50, c:true},
{x:0, y:50, w:50, h:50, c:true},
{x:50, y:50, w:50, h:50, c:true}
];
initialLayouts.layouts.push(data);
var data = [
{x:0, y:16.667, w:66.667, h:66.667, c:true},
{x:66.667, y:0, w:33.333, h:33.333, c:true},
{x:66.667, y:33.333, w:33.333, h:33.333, c:true},
{x:66.667, y:66.667, w:33.333, h:33.333, c:true}
];
initialLayouts.layouts.push(data);
// var data = [
// {x:66.667, y:0, w:33.333, h:33.333},
// {x:0, y:16.667, w:66.667, h:66.667},
// {x:66.667, y:33.333, w:33.333, h:33.333},
// {x:66.667, y:66.667, w:33.333, h:33.333}
// ];
// initialLayouts.layouts.push(data);
// var data = [
// null,
// null,
// {x:70, y:70, w:30, h:30, z:1, c:true},
// {x:0, y:0, w:100, h:100,z:0, c:false}
// ];
// initialLayouts.layouts.push(data);
//var data = [
// null,
// null,
// {x:0, y:25, w:50, h:50, c:true},
// {x:50, y:25, w:50, h:50, c:true}
//];
//initialLayouts.layouts.push(data);
if (savedSession){
savedSession = JSON.parse(savedSession);
} else {
savedSession = {};
savedSession.layouts = [];
var data = [
{x:0, y:0, w:100, h:100}
];
savedSession.layouts.push(data);
var data = [
null,
{x:0, y:0, w:100, h:100}
];
savedSession.layouts.push(data);
var data = [
{x:0, y:25, w:50, h:50, c:false},
{x:50, y:25, w:50, h:50, c:false}
];
savedSession.layouts.push(data);
var data = [
{x:70, y:70, w:30, h:30, z:1, c:true},
{x:0, y:0, w:100, h:100,z:0, c:false}
];
savedSession.layouts.push(data);
var data = [
{x:0, y:0, w:100, h:100,z:0, c:true},
{x:70, y:70, w:30, h:30, z:1, c:false}
];
savedSession.layouts.push(data);
var data = [
{x:0, y:0, w:20, h:20, z:1, c:true},
{x:0, y:0, w:100, h:100,z:0, c:false}
];
savedSession.layouts.push(data);
var data = [
{x:0, y:0, w:50, h:50},
{x:50, y:0, w:50, h:50},
{x:0, y:50, w:50, h:50},
{x:50, y:50, w:50, h:50}
];
savedSession.layouts.push(data);
var data = [
{x:0, y:16.667, w:66.667, h:66.667},
{x:66.667, y:0, w:33.333, h:33.333},
{x:66.667, y:33.333, w:33.333, h:33.333},
{x:66.667, y:66.667, w:33.333, h:33.333}
];
savedSession.layouts.push(data);
var data = [
{x:66.667, y:0, w:33.333, h:33.333},
{x:0, y:16.667, w:66.667, h:66.667},
{x:66.667, y:33.333, w:33.333, h:33.333},
{x:66.667, y:66.667, w:33.333, h:33.333}
];
savedSession.layouts.push(data);
var data = [
null,
null,
{x:0, y:0, w:100, h:100}
];
savedSession.layouts.push(data);
var data = [
null,
null,
null,
{x:0, y:0, w:100, h:100}
];
savedSession.layouts.push(data);
var data = [
null,
null,
{x:70, y:70, w:30, h:30, z:1, c:true},
{x:0, y:0, w:100, h:100,z:0, c:false}
];
savedSession.layouts.push(data);
var data = [
null,
null,
{x:0, y:25, w:50, h:50, c:true},
{x:50, y:25, w:50, h:50, c:true}
];
savedSession.layouts.push(data);
savedSession = initialLayouts;
}
var guestPositions = {};
function exportSession() {
var content = JSON.stringify(savedSession);
var fileName = roomname + ".json";
@ -1189,6 +1513,23 @@
}
function resetLayouts(){
var yes = confirm("Are you sure? This will reset all the layouts.");
if (!yes){return;}
document.getElementById("containermenu").innerHTML = "";
drawAddNewLayout2();
drawAddNewLayout3();
savedSession.layouts = initialLayouts.layouts;
for (var i in savedSession.layouts){
drawLayout(savedSession.layouts[i]);
}
saveSession();
}
function wipeLayouts(){
var yes = confirm("Are you sure? This will delete all the layouts.");
@ -1203,6 +1544,7 @@
for (var i in savedSession.layouts){
drawLayout(savedSession.layouts[i]);
}
saveSession();
}
var injectCSS = `
@ -1268,9 +1610,10 @@
var iframe = null;
function loadIframe(){
function loadIframe(){
if (iframe){return;}
iframe = document.createElement("iframe");
var additional = "";
if (password){
additional = "&password="+password;
@ -1278,15 +1621,20 @@
roomname = sanitizeRoomName(roomname);
iframe = document.createElement("iframe");
var iframeContainer = document.getElementById("iframeContainer");
iframe.allow = "autoplay;camera;microphone;fullscreen;picture-in-picture;display-capture;";
iframe.id = "vdoninja";
if (roomname){
var iframesrc = "./index.html?ltb=350&transparent&cleanoutput&director="+roomname+additional+"&b64css="+injectCSS;
var iframesrc = "./index.html?ltb=350&transparent&cleanoutput&slotmode&director="+roomname+additional+"&b64css="+injectCSS;
} else {
roomname = generateString(10);
var iframesrc = "./index.html?ltb=350&transparent&cleanoutput&director="+roomname+additional;
var iframesrc = "./index.html?ltb=350&transparent&cleanoutput&slotmode&director="+roomname+additional+"&b64css="+injectCSS;
}
if (roomname!==false){
setStorage("savedRoom", {roomname:roomname,password:password}, 9999);
}
document.title = "Mixer: "+roomname;
@ -1318,11 +1666,13 @@
if (this.state){
this.innerHTML = "Director View &#x21bb;";
iframe.classList.add("aspectRatio");
iframe.classList.add("fade2black");
this.title = "Switch to the director room mode";
} else {
this.innerHTML = "Scene Preview &#x21bb;";
this.title = "Switch to scene preview mode";
iframe.classList.remove("aspectRatio");
iframe.classList.remove("fade2black");
}
};
@ -1357,7 +1707,7 @@
}
}
};
button.style.display = "block";
button.style.display = "none";
document.getElementById("sources").appendChild(button);
@ -1373,7 +1723,7 @@
var a = document.createElement("a");
a.innerHTML = "Invite Guest Link 📎";
a.href = "./index.html?room="+roomname+"&broadcast"+additional;
a.href = "./index.html?room="+roomname+"&sstype=3&thirds&broadcast"+additional;
a.target = "_blank";
document.getElementById("sources").appendChild(a);
@ -1399,6 +1749,8 @@
drawLayout(savedSession.layouts[i]);
}
document.getElementById("chatModule").classList.remove("hidden");
iframe.src = iframesrc;
iframeContainer.appendChild(iframe);
document.getElementById("container").appendChild(iframeContainer);
@ -1417,46 +1769,52 @@
eventer(messageEvent, function (e) {
if (e.source != iframe.contentWindow){return} // reject messages send from other iframes
console.log(e.data);
if ("action" in e.data){
///var outputWindow = document.createElement("div");
//outputWindow.innerHTML = "event: "+e.data.action+"<br />";
//outputWindow.style.border="1px dotted black";
//iframeContainer.appendChild(outputWindow);
//console.log(e.data.action);
if (e.data.action === "view-connection"){
if (e.data.value){
iframe.contentWindow.postMessage({"getStreamIDs":true}, '*');
} else if (e.data.streamID){
for (var i = 0; i < streamIDs.length; i++){
if (e.data.streamID == streamIDs[i]){
streamIDs.splice(i,1);
if (document.getElementById("sid_"+e.data.streamID)){
document.getElementById("sid_"+e.data.streamID).classList.add("disconnected");
document.getElementById("sid_"+e.data.streamID).title = "Not currently connected, but can still be placed";
}
}
}
updateList();
}
}
<!-- if (e.data.action === "view-connection"){ -->
<!-- if (e.data.value){ -->
<!-- iframe.contentWindow.postMessage({"getStreamIDs":true}, '*'); -->
<!-- } else if (e.data.streamID){ -->
<!-- for (var i = 0; i < streamIDs.length; i++){ -->
<!-- if (e.data.streamID == streamIDs[i]){ -->
<!-- streamIDs.splice(i,1); -->
<!-- if (document.getElementById("sid_"+e.data.streamID)){ -->
<!-- document.getElementById("sid_"+e.data.streamID).classList.add("disconnected"); -->
<!-- document.getElementById("sid_"+e.data.streamID).title = "Not currently connected, but can still be placed"; -->
<!-- } -->
<!-- } -->
<!-- } -->
<!-- updateList(e.data.streamID); -->
<!-- } -->
<!-- } -->
if (e.data.action === "slot-updated"){
guestPositions[e.data.value] = e.data.streamID; // value is slot ID
}
}
console.log(e.data);
if (e.data.action && (e.data.action == "scene-connected")){
if (lastLayout && lastLayout.scene == e.data.value){
iframe.contentWindow.postMessage(lastLayout, '*');
}
}
if ("streamIDs" in e.data){
streamIDs = [];
for (var key in e.data.streamIDs){
streamIDs.push(key);
}
updateList();
console.log(streamIDs);
}
<!-- if ("streamIDs" in e.data){ -->
<!-- streamIDs = []; -->
<!-- for (var key in e.data.streamIDs){ -->
<!-- streamIDs.push(key); -->
<!-- updateList(key); -->
<!-- } -->
<!-- console.log(streamIDs); -->
<!-- } -->
});
}
@ -1512,8 +1870,12 @@
ele.innerText = roomname;
});
document.querySelectorAll("a.inviteLink").forEach(ele=>{
ele.href = "./index.html?room="+roomname+"&broadcast"+additional;
document.querySelectorAll(".inviteLink").forEach(ele=>{
if (ele.tagName == "A"){
ele.href = "./index.html?room="+roomname+"&broadcast"+additional;
} else if (ele.tagName == "I"){
ele.innerHTML = "URL + ?room="+roomname+"&broadcast"+additional;
}
});
@ -2013,18 +2375,12 @@
console.log(layout);
var combined = {};
for (var i=0;i<layout.length;i++){
//layout[i].z = i;
if (!layout[i]){continue;}
if (!("slot" in layout[i])){
//console.log("no slot");
//if (!(null in combined)){
// combined[null] = [];
//}
//combined[null].push(layout[i]);
continue;
}
try {
var stream = document.querySelector(".thing[data-slot='"+(parseInt(layout[i].slot)+1)+"'");
var stream = guestPositions[parseInt(layout[i].slot)+1]; // slot 1 is index of 0, but slot 0 is considered NULL; I need to stream line this a bit
} catch(e){
errorlog(e);
continue;
@ -2035,13 +2391,11 @@
if (!stream){
if (layout[i].defaultStreamID){
if (!document.querySelector(".thing[data-slot][data-sid='"+layout[i].defaultStreamID+"']")){
combined[layout[i].defaultStreamID] = layout[i];
}
combined[layout[i].defaultStreamID] = layout[i];
}
continue;
}
combined[stream.dataset.sid] = layout[i];
combined[stream] = layout[i];
}
} else {
var layout = null;

1711
remotemidi.html Normal file
View File

File diff suppressed because one or more lines are too long

673
stats.css Normal file
View File

@ -0,0 +1,673 @@
:root{
--aspect-ratio: 1.7777777777;
--chat-width: 450px;
}
#sources{
display:none;
}
#col1{
display:none;
}
body{
padding:0;
margin:0;
width:100%;
height:100%;
background-color: #c9c9c9;
font-family: 'Sora', sans-serif;
overflow: hidden;
position: absolute;
background: #2e445c;
box-shadow: 20px 20px 60px #273a4e, -20px -20px 60px #354e6a;
scrollbar-color:#666 #201c29;
}
header{
color:white;
margin: 10px 0px 0 20px;
max-height: 300px;
}
span{
display:inline-block;
}
iframe {
border: 0;
padding: 0;
display: block;
height: 100%;
width: 100%;
background-color: #0000;
border-radius: 3px;
position: absolute;
left: 0;
top: 0;
transition: background-color 0.05s ease-out;
}
iframe.aspectRatio{
max-height: min(calc(100vh - 80px), calc((100vw - 290px) / var(--aspect-ratio)));
max-width: min(calc((100vh - 80px) * var(--aspect-ratio)), calc(100vw - 290px));
height: 720px;
width: 1280px;
}
.popup-message {
display: none;
align-text: center;
position: absolute;
z-index: 35 !important;
padding: 5px !important;
border-radius: 3px;
min-width: 180px !important;
background-color: #fff !important;
border: solid 1px #dfdfdf !important;
box-shadow: 1px 1px 2px #cfcfcf !important;
}
.context-menu--active {
display: block !important;
}
.context-menu__items {
list-style: none !important;
margin: 0;
padding: 0;
}
.context-menu__item {
display: block;
margin-bottom: 4px !important;
}
.context-menu__item:last-child {
margin-bottom: 0 !important;
}
.context-menu__link {
display: block;
padding: 4px 12px;
color: #0066aa !important;
text-decoration: none;
}
button.menuButtons{
background-color: #b4c5ca !important;
background: linear-gradient(135deg, #c2d2d7 60%,#c7d3d7 80%, #a3b5ba 100%)
}
.context-menu__link:hover {
color: #fff !important;
background-color: #0066aa !important;
}
.message{
background: #3e3e3e00;
color: #FCFCFC;
vertical-align: top;
border: 1px solid #2e445c;
border-radius: 10px;
background: #2e445c;
box-shadow: 5px 5px 10px #121620, -5px -5px 10px #162a36;
}
.inMessage {
color: #000;
margin: 3px;
border-radius: 5px;
background: #FFF;
padding: 5px;
text-align: left;
}
.actionMessage {
color: #000;
margin: 3px;
border-radius: 5px;
background: #FFF;
padding: 5px;
text-align: left;
}
.outMessage {
color: #000;
margin: 3px;
border-radius: 5px;
background: #BCF;
padding: 5px;
text-align: right;
}
#chatBody {
background-color: #0004;
margin: 0 10px 10px 0;
border-radius: 5px;
overflow-y:scroll;
overflow-wrap: anywhere;
bottom: 45px;
position: absolute;
}
#chatBody::-webkit-scrollbar {
width: 0px;
background: transparent; /* make scrollbar transparent */
}
#chatModule {
bottom: 0;
position: fixed;
margin: 10px;
align-self: center;
width: 400px;
max-width: 100%;
z-index:3;
height: calc(100vh - 40px);
overflow: hidden;
right:0;
border: solid 2px #0005;
border-radius: 10px;
padding: 10px;
transition: all .2s ease-in-out;
}
#chatInput {
display: inline-block;
color: #000;
background-color: #FFFE;
width: 324px;
font-size: 105%;
margin-left: 7px;
}
#chatSendBar{
display: inline-block;
bottom: 0px;
position:absolute;
}
#savedroompassword{
width:50px;
}
button[data-state='true']{
background-color:#CEF !important;
}
#inviteOptions{
border: 0;
padding: 0;
display: block;
height: calc(100vh - 80px);
width: calc(100vw - 290px);
max-width:100%;
padding: 20px;
margin:0;
border:0;
display: inline-block;
background-color: #DDD;
border-radius: 18px;
background: #5b748f;
box-shadow: inset 20px 20px 40px #556c85,
inset -20px -20px 40px #617c99;
}
input[type="checkbox"] {
width: 20px;
height: 20px;
text-align: center;
vertical-align: middle;
transition: all .2s ease-in-out;
}
input[type="checkbox"]:checked {
transform: scale(1.1);
}
label {
margin: 0 0px 6px 0;
display: inline-block;
font-weight: 600;
}
.ui-widget-header{
background: rgb(225,225,225); /* Old browsers */
background: -moz-linear-gradient(-45deg, rgba(255,255,255,1) 0%, rgba(241,241,241,1) 50%, rgba(225,225,225,1) 51%, rgba(246,246,246,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(-45deg, rgba(255,255,255,1) 0%,rgba(241,241,241,1) 50%,rgba(225,225,225,1) 51%,rgba(246,246,246,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg, rgba(255,255,255,1) 0%,rgba(241,241,241,1) 50%,rgba(225,225,225,1) 51%,rgba(246,246,246,1) 100%);
}
#iframeContainer{
height: 100%;
width: 100%;
max-width: calc(100vw - var(--chat-width));
display:inline-block;
position:relative;
}
#graphs{
height: 100%;
width: 100%;
max-width: 400px;
display:inline-block;
position:relative;
}
.graph{
display:inline-block;
width:50px;
position:relative;
}
#viewlink {
width:400px;
}
#container {
display:block;
padding: 0;
margin: 0 auto;
width: 100%;
}
.disconnected{
border: 4px dotted red!important;
padding: 6px 0.25em 0.25em 0.25em!important;
outline: dashed 2px black!important;
}
.thing:hover{
animation: horizontalShake 2s;
animation-iteration-count: once;
}
#col1>.thing:hover{
animation: enlargeAnimation 2s;
animation-iteration-count: once;
}
#col1>.thing:active{
transform: scale(1.05);
animation:none;
}
.thing:active{
animation:none;
transform: translate(7px, 0px) rotate(0deg);
}
#delete:hover{
animation: none!important;
}
#delete:active{
transform: none!important;
}
@keyframes enlargeAnimation {
0% { transform: scale(1.01); }
20% { transform: scale(1.03); }
80% { transform: scale(1.05); }
100% { transform: scale(1.06); }
}
@keyframes horizontalShake {
0% { transform: translate(3px, 0px) rotate(0deg); }
20% { transform: translate(7px, 0px) rotate(0deg); }
80% { transform: translate(8px, 0px) rotate(0deg); }
100% { transform: translate(-1px, 0px) rotate(0deg); }
}
.shake {
animation: shake 0.5s;
animation-iteration-count: once;
}
@keyframes shake {
0% { transform: translate(1px, 1px) rotate(0deg); }
10% { transform: translate(-1px, -2px) rotate(-1deg); }
20% { transform: translate(-3px, 0px) rotate(1deg); }
30% { transform: translate(3px, 2px) rotate(0deg); }
40% { transform: translate(1px, -1px) rotate(1deg); }
50% { transform: translate(-1px, 2px) rotate(-1deg); }
60% { transform: translate(-3px, 1px) rotate(0deg); }
70% { transform: translate(3px, 1px) rotate(-1deg); }
80% { transform: translate(-1px, -1px) rotate(1deg); }
90% { transform: translate(1px, 2px) rotate(0deg); }
100% { transform: translate(1px, -2px) rotate(-1deg); }
}
input{
padding:5px;
margin:5px;
border-radius: 3px;
}
.menuButton{
width: 92%;
}
button{
padding:5px;
margin:5px;
border-radius: 3px;
cursor:pointer;
background: linear-gradient(135deg, rgba(238,238,238,1) 60%,rgb(225, 225, 225, 1) 80%,rgb(210, 209, 209, 1) 100%);
}
canvas{
padding:10px;
cursor:pointer;
border-radius: 10px;
box-shadow: 2px 2px 6px #273a4e, -2px -2px 6px #354e6a;
}
h2 {
text-shadow: 0 0 2px #a7a7a7;
color: #000b3a;
}
.inline{
display:inline-block;
}
table {
font-size: 1em;
}
::-webkit-scrollbar {
width: 15px;
}
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 13px rgb(0 0 0 / 90%);
border-radius: 4px;
}
::-webkit-scrollbar-thumb {
border-radius: 4px;
-webkit-box-shadow: inset 0 0 16px rgb(150 150 150 / 100%);
border: solid 3px transparent;
}
.ui-draggable, .ui-droppable {
background-position: top;
}
.draggable { width: 150px; height: 150px; padding: 0; margin:0; border:0; }
.resizable { width: 150px; height: 150px; padding: 0; margin:0; border:0; }
.resizable h3 { text-align: center; margin: 0; cursor: grab; border: 1px solid black;}
.ui-menu { width: 150px; }
.ui-state-selected {
background-color: #64b1ff;
}
.ui-state-disabled {
background-color: grey;
}
.widget {
background-color: #DDD;
position: absolute;
}
#canvas{
background-color: #000;
width: 1280px;
height: 720px;
margin:0;
padding:0;
border:0;
display: inline-block;
}
#sceneSettings{
height: calc(100vh - 80px);
width: calc(100vw - 290px);
padding: 20px;
margin:0;
border:0;
display: inline-block;
background-color: #DDD;
border-radius: 18px;
background: #5b748f;
box-shadow: inset 20px 20px 40px #556c85,
inset -20px -20px 40px #617c99;
}
#sceneSettings > h2{
margin: 4px;
}
.settings {
display: block;
background: #c0e3ff;
position: absolute;
top: 100px;
left: 100px;
z-Index:20;
}
.hidden {
display:none!important;
}
.fadeout {
visibility: hidden;
opacity: 0;
transition: visibility 0s 0.5s, opacity 0.5s linear;
}
.fade2black{
background-color: 000F;
transition: background-color 0.5s linear;
}
.hidden2{
display:none!important;
}
.hidden3{
display:none!important;
}
.thing {
width: 100px;
padding: 10px 0.5em 0.5em 0.5em;
margin: 6px;
border: #565656 solid 1px;
background: rgba(0,0,0,0.8);
color: white;
font-family: sans-serif;
cursor: grab;
text-align: center;
border-radius: 6px;
word-wrap: break-word;
box-shadow: inset 6px 6px 6px #dadada1c, inset -6px -6px 6px #27272724;
}
.empty {
width: 100px;
padding: 10px 0.5em 0 0.5em;
margin: 0.5em 0.4em;
background: rgba(0,0,0,0.8);
color: white;
font-family: sans-serif;
user-select: none;
text-align: center;
border-radius: 6px;
height: 1.7em;
cursor: crosshair;
border: 1px solid black;
}
.col {
width: 130px;
height: calc(100vh - 20px);
padding: 5px;
border: 1px solid;
border-radius: 5px;
position: relative;
float: left;
user-select: none;
}
.pressed>canvas{
border: solid 2px black;
background-color: #FFFA;
}
button.pressed {
background-color: #CEF;
}
.editButton{
display:none;
position:absolute;
margin: 20px 14px;
z-index:2;
}
.setButton{
display:none;
position:absolute;
margin: 20px 57px;
z-index:2;
}
.canvasContainer{
display:inline-block;
}
.canvasContainer>canvas{
transform: scale(calc( var(--aspect-ratio) / (16 / 9)), 1);
}
.pressed>button{
display:inline-block;
}
b {
text-shadow: 0 0 1px #f4f4f4;
}
a {
display: inline-block;
margin: 5px;
background-color: #c9c9c9;
border: 2px solid black;
padding: 4px;
border-radius: 6px;
cursor:pointer;
}
#delete {
background-color: rgb(191 191 191);
text-align: center;
border: 1px solid black;
color: black;
cursor: crosshair;
margin: 5.5px;
border-radius: 0px;
}
.modal {
display: none;
position: fixed;
padding-top: 50px;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgb(0, 0, 0);
background-color: rgba(0, 0, 0, 0.5);
z-Index: 20;
}
.modal-content {
position: relative;
padding: 20px;
margin: auto;
width: 75%;
-webkit-animation-name: animatetop;
-webkit-animation-duration: 0.4s;
animation-name: animatetop;
animation-duration: 0.4s;
border-radius: 4px;
background-color: #e2e2e2;
background-image: url("data:image/svg+xml,%3Csvg width='6' height='6' viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%239C92AC' fill-opacity='0.1' fill-rule='evenodd'%3E%3Cpath d='M5 0h1L0 6V5zM6 5v1H5z'/%3E%3C/g%3E%3C/svg%3E");
}
.close-btn {
float: right;
color: lightgray;
font-size: 24px;
font-weight: bold;
}
.close-btn:hover {
color: darkgray;
cursor:pointer;
}
@-webkit-keyframes animatetop {
from {top:-300px; opacity:0}
to {top:0; opacity:1}
}
@keyframes animatetop {
from {top:-300px; opacity:0}
to {top:0; opacity:1}
}
#welcomeWindow{
display:none;
position:absolute;
top:0;
left:0;
width:100vw;
height:100vh;
z-index:5;
background: #2775dc;
box-shadow: 20px 20px 60px #51729d,
-20px -20px 60px #6d9ad5;
background: -moz-linear-gradient(-45deg, rgba(59,103,158,1) 2%, rgba(43,136,217,1) 50%, rgba(32,124,202,1) 79%, rgba(89, 165, 224,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(-45deg, rgba(59,103,158,1) 2%,rgba(56, 134, 202,1) 50%,rgba(32,124,202,1) 79%,rgba(89, 165, 224,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg, rgba(59,103,158,1) 2%,rgba(56, 134, 202,1) 50%,rgba(32,124,202,1) 79%,rgba(89, 165, 224,1) 100%);
background: linear-gradient(135deg, rgba(59,103,158,1) 2%,rgba(56, 134, 202,1) 50%,rgba(32,124,202,0.8) 79%,rgba(89, 165, 224,1) 100%), url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' width='500' height='500'%3E%3Cfilter id='noise' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3CfeBlend mode='screen'/%3E%3C/filter%3E%3Crect width='500' height='500' filter='url(%23noise)' opacity='0.5'/%3E%3C/svg%3E");
}
.center-content{
align-content: center;
margin: 20px auto;
display: block;
width: 500px;
max-width: 100%;
}
.footer {
bottom: 0;
display: inline-block;
vertical-align: middle;
margin: 5px 20px;
height: 28px;
display: flex;
align-items: center;
position: fixed;
right: 0;
}
.footer>div{
align-items: center;
}
.graphTitle{
color:white;
}
.discord{
background-image: url("data:image/svg+xml,%3Csvg width='71' height='55' viewBox='0 0 71 55' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0)'%3E%3Cpath d='M60.1045 4.8978C55.5792 2.8214 50.7265 1.2916 45.6527 0.41542C45.5603 0.39851 45.468 0.440769 45.4204 0.525289C44.7963 1.6353 44.105 3.0834 43.6209 4.2216C38.1637 3.4046 32.7345 3.4046 27.3892 4.2216C26.905 3.0581 26.1886 1.6353 25.5617 0.525289C25.5141 0.443589 25.4218 0.40133 25.3294 0.41542C20.2584 1.2888 15.4057 2.8186 10.8776 4.8978C10.8384 4.9147 10.8048 4.9429 10.7825 4.9795C1.57795 18.7309 -0.943561 32.1443 0.293408 45.3914C0.299005 45.4562 0.335386 45.5182 0.385761 45.5576C6.45866 50.0174 12.3413 52.7249 18.1147 54.5195C18.2071 54.5477 18.305 54.5139 18.3638 54.4378C19.7295 52.5728 20.9469 50.6063 21.9907 48.5383C22.0523 48.4172 21.9935 48.2735 21.8676 48.2256C19.9366 47.4931 18.0979 46.6 16.3292 45.5858C16.1893 45.5041 16.1781 45.304 16.3068 45.2082C16.679 44.9293 17.0513 44.6391 17.4067 44.3461C17.471 44.2926 17.5606 44.2813 17.6362 44.3151C29.2558 49.6202 41.8354 49.6202 53.3179 44.3151C53.3935 44.2785 53.4831 44.2898 53.5502 44.3433C53.9057 44.6363 54.2779 44.9293 54.6529 45.2082C54.7816 45.304 54.7732 45.5041 54.6333 45.5858C52.8646 46.6197 51.0259 47.4931 49.0921 48.2228C48.9662 48.2707 48.9102 48.4172 48.9718 48.5383C50.038 50.6034 51.2554 52.5699 52.5959 54.435C52.6519 54.5139 52.7526 54.5477 52.845 54.5195C58.6464 52.7249 64.529 50.0174 70.6019 45.5576C70.6551 45.5182 70.6887 45.459 70.6943 45.3942C72.1747 30.0791 68.2147 16.7757 60.1968 4.9823C60.1772 4.9429 60.1437 4.9147 60.1045 4.8978ZM23.7259 37.3253C20.2276 37.3253 17.3451 34.1136 17.3451 30.1693C17.3451 26.225 20.1717 23.0133 23.7259 23.0133C27.308 23.0133 30.1626 26.2532 30.1066 30.1693C30.1066 34.1136 27.28 37.3253 23.7259 37.3253ZM47.3178 37.3253C43.8196 37.3253 40.9371 34.1136 40.9371 30.1693C40.9371 26.225 43.7636 23.0133 47.3178 23.0133C50.9 23.0133 53.7545 26.2532 53.6986 30.1693C53.6986 34.1136 50.9 37.3253 47.3178 37.3253Z' fill='%23ffffff'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0'%3E%3Crect width='71' height='55' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
background-size: contain;
background-repeat: no-repeat;
width:14px;
height:10px;
border:0;
background-color:#0000;
}
.github {
background-image: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z'/%3E%3C/svg%3E");
background-size: contain;
width:10px;
height:10px;
border:0;
background-color:#0000;
}
.tooltip {
z-index: 100;
}
.tooltip .tooltiptext {
visibility: hidden;
background-color: #333;
color: #fff;
text-align: center;
border-radius: 3px;
padding: 3px;
overflow: auto;
margin: 0; position:relative;
font-family: "Noto Color Emoji", "Apple Color Emoji", "Segoe UI Emoji", Times, Symbola, Aegyptus,Code2000, Code2001, Code2002, Musica, serif, LastResort;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
.randomPassword{
width: 24px;
height: 24px;
background-size: contain;
background-repeat: no-repeat;
border-radius: 5px;
background: rgb(238,238,238);
background-image: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 29 29'%3E%3Cpath d='M18 9v-3c-1 0-3.308-.188-4.506 2.216l-4.218 8.461c-1.015 2.036-3.094 3.323-5.37 3.323h-3.906v-2h3.906c1.517 0 2.903-.858 3.58-2.216l4.218-8.461c1.356-2.721 3.674-3.323 6.296-3.323v-3l6 4-6 4zm-9.463 1.324l1.117-2.242c-1.235-2.479-2.899-4.082-5.748-4.082h-3.906v2h3.906c2.872 0 3.644 2.343 4.631 4.324zm15.463 8.676l-6-4v3c-3.78 0-4.019-1.238-5.556-4.322l-1.118 2.241c1.021 2.049 2.1 4.081 6.674 4.081v3l6-4z'/%3E%3C/svg%3E"), linear-gradient(135deg, rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%);
}
#demoDrop{
background-color: #30892c;
cursor: help;
}
.demoThing{
width: 100px;
padding: 10px 0.5em 0.5em 0.5em;
margin: 6px;
border: #565656 solid 1px;
background: rgba(0,0,0,0.8);
color: white;
font-family: sans-serif;
cursor: grab;
text-align: center;
border-radius: 6px;
word-wrap: break-word;
box-shadow: inset 6px 6px 6px #dadada1c, inset -6px -6px 6px #27272724;
}
#roomtitle{
display:block;
font-size:200%;
font-weight: 700;
}
#streamsConnected{
display:inline-block;
}

959
stats.html Normal file
View File

File diff suppressed because one or more lines are too long

2
translations/cs.json
View File

@ -211,7 +211,7 @@
"previously-was-1280": "Previously was: 1280"
},
"innerHTML": {
"logo-header": "<font id=\"qos\" style=\"color: white;\">O</font>BS.Ninja ",
"logo-header": "<font id=\"qos\" style=\"color: white;\">V</font>DO.Ninja ",
"copy-this-url": "Zkopírujte tuhle URL do OBS \"Browser Source\"",
"you-are-in-the-control-center": "Jsi v administraci místnosti",
"joining-room": "Připojujete se",

2
translations/fr.json
View File

@ -211,7 +211,7 @@
"previously-was-1280": "Previously was: 1280"
},
"innerHTML": {
"logo-header": "<font id=\"qos\" style=\"color: white;\">O</font>BS.Ninja ",
"logo-header": "<font id=\"qos\" style=\"color: white;\">V</font>DO.Ninja ",
"copy-this-url": "Copiez cette URL dans un OBS \"Browser Source\"",
"you-are-in-the-control-center": "Vous êtes dans le centre de contrôle de la pièce",
"joining-room": "Vous rejoignez la salle",

2
translations/it.json
View File

@ -211,7 +211,7 @@
"previously-was-1280": "Previously was: 1280"
},
"innerHTML": {
"logo-header": "<font id=\"qos\" style=\"color: white;\">O</font>BS.Ninja ",
"logo-header": "<font id=\"qos\" style=\"color: white;\">V</font>DO.Ninja ",
"copy-this-url": "Copia questo URL in un OBS \"Browser Source\"",
"you-are-in-the-control-center": "Sei nel pannello di controllo",
"joining-room": "Ti stai unendo alla stanza",

2
translations/ja.json
View File

@ -211,7 +211,7 @@
"previously-was-1280": "Previously was: 1280"
},
"innerHTML": {
"logo-header": "<font id=\"qos\" style=\"color: white;\">O</font>BS.Ninja ",
"logo-header": "<font id=\"qos\" style=\"color: white;\">V</font>DO.Ninja ",
"copy-this-url": "このURLをOBSの「ブラウザソース」に追加",
"you-are-in-the-control-center": "ルーム管理センター",
"joining-room": "ルームに参加しています",

2
translations/pt.json
View File

@ -211,7 +211,7 @@
"previously-was-1280": "Previously was: 1280"
},
"innerHTML": {
"logo-header": "<font id=\"qos\" style=\"color: white;\">O</font>BS.Ninja ",
"logo-header": "<font id=\"qos\" style=\"color: white;\">V</font>DO.Ninja ",
"copy-this-url": "Copie este URL para uma \"Browser Source\" do OBS",
"you-are-in-the-control-center": "Está no Centro de Controlo da Sala",
"joining-room": "Está a entrar na sala",

2
translations/tr.json
View File

@ -232,7 +232,7 @@
"previously-was-1280": "Previously was: 1280"
},
"innerHTML": {
"logo-header": "<font id=\"qos\" style=\"color: white;\">O</font>BS.Ninja ",
"logo-header": "<font id=\"qos\" style=\"color: white;\">V</font>DO.Ninja ",
"copy-this-url": "Bu URL'yi bir OBS \"Tarayıcı Kaynağına\" kopyalayın",
"you-are-in-the-control-center": "Odanın kontrol merkezindesiniz",
"joining-room": "Odaya bağlanıyorsunuz",

2
translations/uk.json
View File

@ -232,7 +232,7 @@
"previously-was-1280": "Previously was: 1280"
},
"innerHTML": {
"logo-header": "\n\t<font id=\"qos\">O</font>BS.Ninja \n",
"logo-header": "\n\t<font id=\"qos\">V</font>DO.Ninja \n",
"copy-this-url": "Скопіюйте цей URL в OBS \"Browser Source\"",
"you-are-in-the-control-center": "Контрольний центр кімнати: ",
"joining-room": "Ви у кімнаті",

2
webrtc.js
View File

File diff suppressed because one or more lines are too long