Added search

Xeue · Sep 3, 2023 · ebdfc57 · ebdfc57
1 parent 5a3dce7
commit ebdfc57
Show file tree

Hide file tree

Showing 12 changed files with 65 additions and 9,884 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "homestudio-remote",
-  "version": "1.10.1",
+  "version": "1.11.0",
   "description": "Homestudio for on-site production",
   "main": "server.js",
   "scripts": {

diff --git a/server.js b/server.js
@@ -70,6 +70,7 @@ let configLoaded = false;
 		config.require('systemName', [], 'What is the name of the system/job');
 		config.require('defaultLayout', {'thumnail': 'Thumnails Only', 'basic':'Basic Presets','advanced': 'Advanced With Editor'}, 'What should the default view be when a user connects');
 		config.require('allowLowres', {true: 'Yes', false: 'No'}, 'Generate lowres proxys for small pips');
+		config.require('allowSearch', {true: 'Yes', false: 'No'}, 'Enable search for long thumbnail lists');
 		config.require('reconnectTimeoutSeconds', [], 'How long should a stream wait before trying to reconnect in the GUI');
 		config.require('loggingLevel', {'A':'All', 'D':'Debug', 'W':'Warnings', 'E':'Errors'}, 'Set logging level:');
 		config.require('createLogFile', {true: 'Yes', false: 'No'}, 'Save Logs to local file');
@@ -86,6 +87,7 @@ let configLoaded = false;
 		config.default('homestudioKey', '');
 		config.default('defaultLayout', 'basic');
 		config.default('allowLowres', true);
+		config.default('allowSearch', true);
 		config.default('createLogFile', true);
 		config.default('debugLineNum', false);
 		config.default('printPings', false);
@@ -411,7 +413,8 @@ function expressRoutes(expressApp) {
 		host: config.get('host'),
 		dockerCommand: dockerCommand,
 		reconnectTimeoutSeconds: config.get('reconnectTimeoutSeconds'),
-		allowLowres: config.get('allowLowres')
+		allowLowres: config.get('allowLowres'),
+		allowSearch: config.get('allowSearch')
 	}}
 
 	expressApp.get('/',  (req, res) =>  {

diff --git a/static/css/home.css b/static/css/home.css
@@ -114,9 +114,6 @@ nav.drag {
   overflow: hidden;
   background-color: rgb(49, 61, 72);
   border: solid 2px rgb(49, 61, 72);
-  max-width: 300px;
-  min-width: 120px;
-  width: 15vw;
   opacity: 1;
   transition: 0.3s;
 }
@@ -140,9 +137,12 @@ nav.drag {
   outline: rgba(25, 117, 234, 0.67) solid 3px;
 }
 
-#tumbList {
+#thumbList {
   padding-left: .25rem !important;
   transition: 0.3s;
+  max-width: 300px;
+  min-width: 120px;
+  width: 15vw;
 }
 
 .triple #camThree {
@@ -229,7 +229,7 @@ nav.drag {
       opacity: 0;
   }
 
-  #tumbList {
+  #thumbList {
       padding-left: 0rem !important;
   }
 
@@ -240,7 +240,7 @@ nav.drag {
       opacity: 1;
   }
 
-  main:has(.selectedPlayer) aside#tumbList {
+  main:has(.selectedPlayer) aside#thumbList {
       padding-left: 0.25rem !important;
   }
 

diff --git a/static/js/home.js b/static/js/home.js
@@ -361,6 +361,9 @@ $(document).ready(function() {
 		} else if ($trg.hasClass('layoutConfigSelect')) {
 			setActiveLayout($trg.data('id'));
 			drawConfigLayout();
+		} else if ($trg.is('#thumbclear')) {
+			$('.sourceSelect').removeClass('d-none');
+			$('#thumbinput').val('');
 		} else if (!$trg.hasClass('player-quad') && !$trg.parents('.player-quad').length) {
 			$('.selectedPlayer').removeClass('selectedPlayer');
 		}
@@ -388,16 +391,12 @@ $(document).ready(function() {
 			}
 		} else if ($trg.is('#layoutCols')) {
 			const cols = Number($trg.val());
-			//const oldCols = getActiveLayout().Columns;
 			getActiveLayout().Columns = cols;
 			updateConfigLayout();
-			//getActiveLayout().Columns = oldCols;
 		} else if ($trg.is('#layoutRows')) {
 			const rows = Number($trg.val());
-			//const oldRows = getActiveLayout().Rows;
 			getActiveLayout().Rows = rows;
 			updateConfigLayout();
-			//getActiveLayout().Rows = oldRows;
 		}
 	});
 
@@ -438,10 +437,24 @@ $(document).ready(function() {
 	});
 
 	$(document).keyup(function(e) {
+		const $trg = $(e.target);
 		if (e.key === "Escape") {
 			$('body').removeClass('fullscreen');
 			document.exitFullscreen();
-	   }
+	   } else if ($trg.is('#thumbinput')) {
+			const $sources = $('#thumbCont').children();
+			const search = $trg.val().toLowerCase();
+			$sources.each(function(i, source) {
+				const $source = $(source);
+				const name = $source.attr('data-name').toLowerCase();
+				if (name.includes(search) || search.includes(name)) {
+					$source.removeClass('d-none');
+				} else {
+					$source.addClass('d-none');
+				}
+			});
+			console.log($trg.val());
+		}
    	});
 
 	setInterval(() => {
@@ -600,7 +613,7 @@ $(document).ready(function() {
 				break;
 			}
 			case 'select': {
-				let txt = `<select class="btn btn-outline-light" name="${$td.data('key')}">`;
+				let txt = `<select class="form-control form-select" name="${$td.data('key')}">`;
 				if ($td.data('options')) {
 					const options = $td.data('options').split(',');
 					options.forEach(option => {
@@ -1202,7 +1215,11 @@ function closePlayer($element) {
 		const title = $title.data('title');
 		$title.html(title);
 		$title.data('id', '');
-		OvenPlayer.getPlayerByContainerId($element.attr('id')).remove();
+		if ($element.hasClass('ovenplayer')) {
+			OvenPlayer.getPlayerByContainerId($element.attr('id')).remove();
+		} else {
+
+		}
 		$element.remove();
 		const pip = Number($cont.attr('data-pip'));
 		mapping[pip] = 0;
@@ -1269,10 +1286,11 @@ function renderStreams() {
 }
 
 function buildThumbnails() {
-	$aside = $('#tumbList');
-	$aside.html('');
+	const $aside = $('#thumbList');
+	const $thumbCont = $('#thumbCont');
+	$thumbCont.html('');
 	encoders.forEach(encoder => {
-		$aside.append(`<div class="card text-white mb-1 sourceSelect"
+		$thumbCont.append(`<div class="card text-white mb-1 sourceSelect"
 		id="player-${encoder.Name.replace(/ /g,'-')}-cont"
 		data-id="${encoder.ID}"
 		data-url="${encoder.URL}"
@@ -1287,6 +1305,14 @@ function buildThumbnails() {
 				onerror="if (this.src != 'img/holding.png') this.src = 'img/holding.png';">
 		</div>`);
 	});
+	$("#thumbSearch").remove();
+	if (allowSearch && encoders.length > 4 && layout != 'thumbnail') {
+		$aside.prepend(`<div id="thumbsearch" class="text-white mb-1 input-group position-sticky top-0 z-1" data-bs-theme="dark" style="">
+			<input id="thumbinput" class="form-control form-control-sm" type="text" placeholder="Search">
+			<button id="thumbclear" class="btn btn-secondary btn-sm">⌫</button>
+		</div>`);
+		$('.sourceSelect').removeClass('d-none');
+	}
 }
 
 function loadPips() {