Add button to show/hide inactive streams

voc · Feb 25, 2023 · 0c2cecc · 0c2cecc
1 parent eab3911
commit 0c2cecc
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 4 deletions.
diff --git a/assets/css/_overview.less b/assets/css/_overview.less
@@ -115,6 +115,39 @@ body.overview {
 		.panel-body h2 {
 			margin: 0;
 		}
+
+		&.inactive-stream {
+			display: none;
+		}
+	}
+
+	input.show-inactive {
+		display: none;
+	}
+	.show-inactive-toggle {
+		width: ~"calc(100% - 30px)";
+		margin-left: 15px;
+
+		.show-inactive-text {
+			display: inline;
+		}
+		.hide-inactive-text {
+			display: none;
+		}
+	}
+	input[type="checkbox"]:checked.show-inactive {
+		~ .room {
+			display: block;
+		}
+
+		~ .show-inactive-toggle {
+			.show-inactive-text {
+				display: none;
+			}
+			.hide-inactive-text {
+				display: inline;
+			}
+		}
 	}
 
 	.recordings a {

diff --git a/assets/js/lustiges-script.js b/assets/js/lustiges-script.js
@@ -303,15 +303,16 @@ $(function() {
 $(function() {
 	var
 		roomSelector = '.room.has-preview',
-		previewSelector = roomSelector + ' .preview';
+		previewSelector = roomSelector + ' .preview',
+		inactiveClass = 'inactive-stream';
 
 	$(previewSelector).each(function() {
 		var
 			$teaser = $(this),
 			$room = $teaser.parents(roomSelector);
 
 		$teaser.on('error', function() {
-			$room.addClass('hidden');
+			$room.addClass(inactiveClass);
 		});
 	});
 
@@ -330,9 +331,9 @@ $(function() {
 
 			$preload.on('load', function() {
 				$teaser.prop('src', $preload.prop('src'));
-				$room.removeClass('hidden');
+				$room.removeClass(inactiveClass);
 			}).on('error', function() {
-				$room.addClass('hidden');
+				$room.addClass(inactiveClass);
 			}).prop('src', src + '?'+(new Date()).getTime());
 		});
 	}, 1000*60);

diff --git a/template/overview.phtml b/template/overview.phtml
@@ -10,6 +10,7 @@
 			</div>
 		<? endif ?>
 		<div class="row room-group room-group-n<?=h($i++)?> room-group-<?=h(slugify($group))?>">
+			<input type="checkbox" class="show-inactive" id="show-inactive-<?=h(slugify($group))?>-toggle" />
 
 			<?
 				/* 
@@ -128,6 +129,11 @@
 					<div class="clearfix"></div>
 				<? endif ?>
 			<? endforeach ?>
+			<label for="show-inactive-<?=h(slugify($group))?>-toggle" class="btn btn-default show-inactive-toggle">
+				<span class="show-inactive-text">Show</span>
+				<span class="hide-inactive-text">Hide</span>
+				inactive streams
+			</label>
 		</div>
 	<? endforeach ?>