From 5cc6c6c1f3cdaf96fc4adf19acff73f0006ccae9 Mon Sep 17 00:00:00 2001 From: Lorenzo Miniero Date: Wed, 6 Dec 2023 16:32:18 +0100 Subject: [PATCH] Update demos and docs to Bootstrap 5.x (#3300) --- docs/doxy-boot.js | 81 ++++++++++----------- docs/header.html | 55 +++++++-------- html/admin.html | 136 +++++++++++++++++++----------------- html/admin.js | 116 ++++++++++++++++++------------ html/audiobridgetest.html | 69 +++++++++--------- html/audiobridgetest.js | 114 ++++++++++++++++-------------- html/canvas.html | 112 ++++++++++++++--------------- html/canvas.js | 65 ++++++++--------- html/citeus.html | 33 ++++----- html/css/demo.css | 72 ++++++++++++++----- html/demos.html | 33 ++++----- html/devicetest.html | 136 +++++++++++++++++++----------------- html/devicetest.js | 104 ++++++++++++++------------- html/docs/index.html | 23 +++--- html/e2etest.html | 86 +++++++++++------------ html/e2etest.js | 73 ++++++++++--------- html/echotest.html | 90 ++++++++++++------------ html/echotest.js | 73 ++++++++++--------- html/index.html | 21 +++--- html/multiopus.html | 84 +++++++++++----------- html/multiopus.js | 67 +++++++++--------- html/mvideoroomtest.html | 112 ++++++++++++++--------------- html/mvideoroomtest.js | 78 ++++++++++----------- html/navbar.html | 93 ++++++++++++------------ html/nosiptest.html | 56 +++++++-------- html/nosiptest.js | 30 ++++---- html/recordplaytest.html | 82 +++++++++++----------- html/recordplaytest.js | 37 +++++----- html/screensharingtest.html | 54 +++++++------- html/screensharingtest.js | 39 ++++------- html/siptest.html | 131 +++++++++++++++++----------------- html/siptest.js | 130 +++++++++++++++++----------------- html/streamingtest.html | 68 +++++++++--------- html/streamingtest.js | 123 +++++++++++++------------------- html/support.html | 21 +++--- html/textroomtest.html | 62 ++++++++-------- html/textroomtest.js | 12 ++-- html/videocalltest.html | 116 +++++++++++++++--------------- html/videocalltest.js | 99 +++++++++++++------------- html/videoroomtest.html | 112 ++++++++++++++--------------- html/videoroomtest.js | 89 ++++++++++------------- html/virtualbg.html | 70 +++++++++---------- html/virtualbg.js | 71 +++++++++---------- html/webaudio.html | 70 +++++++++---------- html/webaudio.js | 11 ++- 45 files changed, 1721 insertions(+), 1688 deletions(-) diff --git a/docs/doxy-boot.js b/docs/doxy-boot.js index d13a5508f1..7cf579c90b 100644 --- a/docs/doxy-boot.js +++ b/docs/doxy-boot.js @@ -1,65 +1,68 @@ $(document).ready(function() { - $("div.headertitle").addClass("page-header"); + $("div.headertitle").addClass("pb-2 mt-4 mb-2 border-bottom"); $("div.title").addClass("h1"); - - $('li > a[href="index.html"] > span').before(" "); + + $('li > a[href="index.html"] > span').before(" "); // $('li > a[href="index.html"] > span').text("CoActionOS"); - $('li > a[href="modules.html"] > span').before(" "); - $('li > a[href="namespaces.html"] > span').before(" "); - $('li > a[href="annotated.html"] > span').before(" "); - $('li > a[href="classes.html"] > span').before(" "); - $('li > a[href="inherits.html"] > span').before(" "); - $('li > a[href="functions.html"] > span').before(" "); - $('li > a[href="functions_func.html"] > span').before(" "); - $('li > a[href="functions_vars.html"] > span').before(" "); - $('li > a[href="functions_enum.html"] > span').before(" "); - $('li > a[href="functions_eval.html"] > span').before(" "); - $('img[src="ftv2ns.png"]').replaceWith('N '); - $('img[src="ftv2cl.png"]').replaceWith('C '); - - $("ul.tablist").addClass("nav nav-pills nav-justified"); + $('li > a[href="modules.html"] > span').before(" "); + $('li > a[href="namespaces.html"] > span').before(" "); + $('li > a[href="annotated.html"] > span').before(" "); + $('li > a[href="classes.html"] > span').before(" "); + $('li > a[href="inherits.html"] > span').before(" "); + $('li > a[href="functions.html"] > span').before(" "); + $('li > a[href="functions_func.html"] > span').before(" "); + $('li > a[href="functions_vars.html"] > span').before(" "); + $('li > a[href="functions_enum.html"] > span').before(" "); + $('li > a[href="functions_eval.html"] > span').before(" "); + $('img[src="ftv2ns.png"]').replaceWith('N '); + $('img[src="ftv2cl.png"]').replaceWith('C '); + + $("ul.tablist").addClass("nav nav-pills nav-fill"); $("ul.tablist").css("margin-top", "0.5em"); $("ul.tablist").css("margin-bottom", "0.5em"); - $("li.current").addClass("active"); + $("ul.tablist > li").addClass("nav-item"); + $("ul.tablist > li > a").addClass("nav-link"); + $("li.current").children().addClass("active"); $("iframe").attr("scrolling", "yes"); - + $("#nav-path > ul").addClass("breadcrumb"); - + $("table.params").addClass("table"); $("div.ingroups").wrapInner(""); + $("div.ingroups > small > a").addClass("text-muted"); $("div.levels").css("margin", "0.5em"); - $("div.levels > span").addClass("btn btn-default btn-xs"); + $("div.levels > span").addClass("btn btn-secondary btn-sm"); $("div.levels > span").css("margin-right", "0.25em"); - + $("table.directory").addClass("table table-striped"); - $("div.summary > a").addClass("btn btn-default btn-xs"); + $("div.summary > a").addClass("btn btn-secondary btn-sm"); $("table.fieldtable").addClass("table"); - $(".fragment").addClass("well"); - $(".memitem").addClass("panel panel-default"); - $(".memproto").addClass("panel-heading"); - $(".memdoc").addClass("panel-body"); - $("span.mlabel").addClass("label label-info"); - + $(".fragment").addClass("card card-body bg-gray"); + $(".memitem").addClass("card"); + $(".memproto").addClass("card-header"); + $(".memdoc").addClass("card-body"); + $("span.mlabel").addClass("badge bg-info"); + $("table.memberdecls").addClass("table"); $("[class^=memitem]").addClass("active"); - - $("div.ah").addClass("btn btn-default"); + + $("div.ah").addClass("btn btn-secondary"); $("span.mlabels").addClass("pull-right"); $("table.mlabels").css("width", "100%") $("td.mlabels-right").addClass("pull-right"); - $("div.ttc").addClass("panel panel-info"); - $("div.ttname").addClass("panel-heading"); - $("div.ttdef,div.ttdoc,div.ttdeci").addClass("panel-body"); - - $('div.tabs').addClass('container well'); - $('div.tabs2').addClass('container well'); - $('div.tabs3').addClass('container well'); + $("div.ttc").addClass("card card-info"); + $("div.ttname").addClass("card-header"); + $("div.ttdef,div.ttdoc,div.ttdeci").addClass("card-body"); + + $('div.tabs').addClass('container card card-body bg-gray mb-3'); + $('div.tabs2').addClass('container card card-body bg-gray mb-3'); + $('div.tabs3').addClass('container card card-body bg-gray mb-3'); $('div.header').addClass('container'); $('div.contents').addClass('container'); $('div.groupHeader').addClass('alert-link').parent().parent().addClass('alert alert-info'); - + $('#MSearchBox').remove();//.parent().appendTo('#topmenu'); $('code').each(function() { $(this).html($(this).html().replace("–", "--")); } ); diff --git a/docs/header.html b/docs/header.html index fb93c1b79b..71dca3ff1c 100644 --- a/docs/header.html +++ b/docs/header.html @@ -7,47 +7,46 @@ $title - + + $treeview $search $mathjax $extrastylesheet - + - +
-Fork me on GitHub +Fork me on GitHub - +
diff --git a/html/admin.html b/html/admin.html index 8b445e751a..821632132a 100644 --- a/html/admin.html +++ b/html/admin.html @@ -5,50 +5,51 @@ Janus WebRTC Server (multistream): Admin/Monitor - - - + + + + - + - + -Fork me on GitHub +Fork me on GitHub - +
+
-
+

Janus WebRTC Server: Admin/Monitor

-
+
-
+

This is just an example of how you can build an UI on top of the existing Admin/Monitor interface. This page will only work as it is if you enabled the API (which is disabled by default) @@ -83,45 +84,50 @@

Janus WebRTC Server: Admin/Monitor

you enabled the stored-token authentication mechanism in Janus, of course.

-

Server Info

+
Server Info
+
+ +
+
+
Dependencies
- +
-

Dependencies

+
Plugins
- +
-

Plugins

+
Transports
- +
-

Transports

+
Event handlers
- +
-

Event handlers

+
Loggers
- +
-

Settings

+
Settings
-

Plugins

+
Plugins
- -
+
    +
@@ -131,17 +137,17 @@
Request
Response
- 

+									

 								

 							

 						

 					

 					

-						
Transports

+						
Transports

 						

 							

-								
-								

+								
    
+								

 							

 							

 								

@@ -151,42 +157,44 @@ 
Tweak/Query

 								

 								

 									
Response

-									

+									

 								

 							

 						

 					

 					

-						

-							
Sessions (0) 

-							

-							

-						

-						

-							
Handles () 

-							

+						

+							

+								
Sessions (0) 

+								

+								

 							

-						

-						

-							
Handle Info 

-							

-								
-								
-								
+							

+								
Handles () 

+								

+								

 							

-							

+							

+								
Handle Info 

+								

+									
+									
+									
+								

+								

+								

 							

 						

 					

 					

-						
Stored Tokens 

+						
Stored Tokens 

 						

 							

 							

diff --git a/html/admin.js b/html/admin.js
index 6f569e9833..e2a68ccd3c 100644
--- a/html/admin.js
+++ b/html/admin.js
@@ -10,7 +10,7 @@ if(window.location.protocol === 'http:')
 else
 	server = "https://" + window.location.hostname + ":7889/admin";
 // If you don't want the page to prompt you for a password, insert it here
-var secret = "";
+var secret = "janusoverlord";
 
 var session = null;		// Selected session
 var handle = null;		// Selected handle
@@ -49,12 +49,12 @@ function promptAccessDetails() {
 	let serverPlaceholder = "Insert the address of the Admin API backend";
 	let secretPlaceholder = "Insert the Admin API secret";
 	bootbox.alert({
-		message: "
" +
-			"	" +
+		message: "
" +
+			"	" +
 			"	" +
 			"
" +
-			"
" +
-			"	" +
+			"
" +
+			"	" +
 			"	" +
 			"
",
 		closeButton: false,
@@ -103,14 +103,16 @@ function updateServerInfo() {
 			}
 			console.log("Got server info:");
 			console.log(json);
-			var pluginsJson = json.plugins;
+			let pluginsJson = json.plugins;
 			let transportsJson = json.transports;
 			let eventsJson = json.events;
+			let loggersJson = json.loggers;
 			delete json.janus;
 			delete json.transaction;
 			delete json.plugins;
 			delete json.transports;
 			delete json.events;
+			delete json.loggers;
 			$('#server-details').empty();
 			for(let k in json) {
 				if(k === "dependencies") {
@@ -158,7 +160,9 @@ function updateServerInfo() {
 					'');
 				pluginsIndex.push(p);
 				$('#plugins-list').append(
-					''+p+''
+					'' +
+						'' + p + '' +
+					''
 				);
 				$('#plugin-'+(pluginsIndex.length-1)).click(function(event) {
 					event.preventDefault();
@@ -190,7 +194,9 @@ function updateServerInfo() {
 					'');
 				transportsIndex.push(t);
 				$('#transports-list').append(
-					''+t+''
+					'' +
+						'' + t + '' +
+					''
 				);
 				$('#transport-'+(transportsIndex.length-1)).click(function(event) {
 					event.preventDefault();
@@ -220,13 +226,31 @@ function updateServerInfo() {
 					'	' + v.version_string + '' +
 					'');
 			}
+			$('#server-loggers').html(
+				'' +
+				'	Name' +
+				'	Author' +
+				'	Description' +
+				'	Version' +
+				''
+			);
+			for(let e in loggersJson) {
+				let v = loggersJson[e];
+				$('#server-loggers').append(
+					'' +
+					'	' + v.name + '' +
+					'	' + v.author + '' +
+					'	' + v.description + '' +
+					'	' + v.version_string + '' +
+					'');
+			}
 			// Unlock tabs
-			$('#admintabs li').removeClass('disabled');
+			$('#admintabs li a').removeClass('disabled');
 			// Refresh settings now
 			updateSettings();
 			// Refresh sessions and handles now
-			$('#handles').hide();
-			$('#info').hide();
+			$('#handles').addClass('hide');
+			$('#info').addClass('hide');
 			$('#update-sessions').click(updateSessions);
 			$('#update-handles').click(updateHandles);
 			$('#update-handle').click(updateHandleInfo);
@@ -256,7 +280,7 @@ function updateServerInfo() {
 			});
 			// Only check tokens if the mechanism is enabled
 			if(!json["auth_token"]) {
-				$('a[href=#tokens]').parent().addClass('disabled');
+				$('a[href=#tokens]').addClass('disabled');
 				$('a[href=#tokens]').attr('href', '#').unbind('click').click(function (e) { e.preventDefault(); return false; });
 			} else {
 				updateTokens();
@@ -593,7 +617,7 @@ function resetPluginRequest() {
 		'	' +
 		'' +
 		'' +
-		'	' +
+		'	' +
 		'	' +
 		'	' +
 		'	' +
@@ -659,7 +683,7 @@ function addPluginMessageAttribute() {
 		'			' +
 		'		' +
 		'	' +
-		'	' +
+		'	' +
 		''
 	);
 	$('#rmattr' + num).click(function() {
@@ -724,7 +748,7 @@ function resetTransportRequest() {
 		'	' +
 		'' +
 		'' +
-		'	' +
+		'	' +
 		'	' +
 		'	' +
 		'	' +
@@ -790,7 +814,7 @@ function addTransportMessageAttribute() {
 		'			' +
 		'		' +
 		'	' +
-		'	' +
+		'	' +
 		''
 	);
 	$('#rmtrattr' + num).click(function() {
@@ -880,10 +904,10 @@ function updateSessions() {
 				handle = null;
 				currentHandle = null;
 				$('#handles-list').empty();
-				$('#handles').hide();
+				$('#handles').addClass('hide');
 				$('#handle-info').empty();
-				$('#options').hide();
-				$('#info').hide();
+				$('#options').addClass('hide');
+				$('#info').addClass('hide');
 				return;
 			}
 			console.log("Got sessions:");
@@ -894,7 +918,9 @@ function updateSessions() {
 			for(let i=0; i'+s+''
+					'' +
+						'' + s + '' +
+					''
 				);
 				$('#session-'+s).click(function() {
 					let sh = $(this).text();
@@ -905,10 +931,10 @@ function updateSessions() {
 					handle = null;
 					currentHandle = null;
 					$('#handles-list').empty();
-					$('#handles').show();
+					$('#handles').removeClass('hide');
 					$('#handle-info').empty();
-					$('#options').hide();
-					$('#info').hide();
+					$('#options').addClass('hide');
+					$('#info').addClass('hide');
 					updateHandles();
 				});
 			}
@@ -921,10 +947,10 @@ function updateSessions() {
 					handle = null;
 					currentHandle = null;
 					$('#handles-list').empty();
-					$('#handles').hide();
+					$('#handles').addClass('hide');
 					$('#handle-info').empty();
-					$('#options').hide();
-					$('#info').hide();
+					$('#options').addClass('hide');
+					$('#info').addClass('hide');
 				}
 			}
 			setTimeout(function() {
@@ -944,10 +970,10 @@ function updateSessions() {
 			handle = null;
 			currentHandle = null;
 			$('#handles-list').empty();
-			$('#handles').hide();
+			$('#handles').addClass('hide');
 			$('#handle-info').empty();
-			$('#options').hide();
-			$('#info').hide();
+			$('#options').addClass('hide');
+			$('#info').addClass('hide');
 			if(!prompting && !alerted) {
 				alerted = true;
 				bootbox.alert("Couldn't contact the backend: is Janus down, or is the Admin/Monitor interface disabled?", function() {
@@ -1002,7 +1028,9 @@ function updateHandles() {
 			for(let i=0; i'+h+''
+					'' +
+						'' + h + '' +
+					''
 				);
 				$('#handle-'+h).click(function() {
 					let hi = $(this).text();
@@ -1013,8 +1041,8 @@ function updateHandles() {
 					$('#handles-list a').removeClass('active');
 					$('#handle-'+hi).addClass('active');
 					$('#handle-info').empty();
-					$('#options').hide();
-					$('#info').show();
+					$('#options').addClass('hide');
+					$('#info').removeClass('hide');
 					updateHandleInfo();
 				});
 			}
@@ -1026,8 +1054,8 @@ function updateHandles() {
 					handle = null;
 					currentHandle = null;
 					$('#handle-info').empty();
-					$('#options').hide();
-					$('#info').hide();
+					$('#options').addClass('hide');
+					$('#info').addClass('hide');
 				}
 			}
 			setTimeout(function() {
@@ -1115,7 +1143,7 @@ function updateHandleInfo(refresh) {
 				$('#update-handle').removeClass('fa-spin').click(updateHandleInfo);
 			}, 1000);
 			// Show checkboxes
-			$('#options').removeClass('hide').show();
+			$('#options').removeClass('hide');
 			// If the related box is checked, autorefresh this handle info every tot seconds
 			if($('#autorefresh')[0].checked) {
 				setTimeout(function() {
@@ -1150,13 +1178,13 @@ function updateHandleInfo(refresh) {
 
 function rawHandleInfo() {
 	// Just use 
 and show the handle info as it is
-	$('#handle-info').html('
' + JSON.stringify(handleInfo, null, 4) + '
');
+	$('#handle-info').html('
' + JSON.stringify(handleInfo, null, 4) + '
');
 }
 
 function prettyHandleInfo() {
 	// Prettify the handle info, processing it and turning it into tables
 	$('#handle-info').html('
');
-	$('#options').hide();
+	$('#options').addClass('hide');
 	for(let k in handleInfo) {
 		let v = handleInfo[k];
 		if(k === "plugin_specific") {
@@ -1318,7 +1346,7 @@ function prettyHandleInfo() {
 				'');
 		}
 	}
-	$('#options').show();
+	$('#options').removeClass('hide');
 }
 
 // Tokens
@@ -1380,17 +1408,17 @@ function updateTokens() {
 			}
 			$('#auth-tokens').append(
 				'' +
-				'	' +
+				'	' +
 				'	
' +
 				'	' +
 				'');
-			let pluginsCheckboxes = "";
+			let pluginsCheckboxes = '';
 			for(let i in plugins) {
 				let plugin = plugins[i];
 				pluginsCheckboxes +=
-					'
' +
-					'