From b416469f747c7557224cafc0dd3278ac76c576b1 Mon Sep 17 00:00:00 2001
From: Manfred Stock <m-ccc@nfred.ch>
Date: Thu, 29 Dec 2022 15:21:36 +0100
Subject: [PATCH 1/3] Fix CSS selector of teaser image update

The old selector didn't match any elements on the overview page anymore,
which broke the teaser image update.
---
 assets/js/lustiges-script.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/assets/js/lustiges-script.js b/assets/js/lustiges-script.js
index 54deb21d..288404d5 100644
--- a/assets/js/lustiges-script.js
+++ b/assets/js/lustiges-script.js
@@ -302,7 +302,7 @@ $(function() {
 // update teaser images
 $(function() {
 	setInterval(function() {
-		$('.rooms .lecture .teaser').each(function() {
+		$('.room.has-preview .preview').each(function() {
 			var
 				$teaser = $(this),
 				$preload = $('<img />'),

From eab391136c6a2ebecb5344ac3a8ecf9d56f48701 Mon Sep 17 00:00:00 2001
From: Manfred Stock <m-ccc@nfred.ch>
Date: Thu, 29 Dec 2022 15:21:46 +0100
Subject: [PATCH 2/3] Hide room on overview page while preview image fails to
 load

This assumes that a room isn't 'live' when it is configured to have a
preview image but it cannot currently be loaded.
---
 assets/js/lustiges-script.js | 22 ++++++++++++++++++++--
 1 file changed, 20 insertions(+), 2 deletions(-)

diff --git a/assets/js/lustiges-script.js b/assets/js/lustiges-script.js
index 288404d5..7833845d 100644
--- a/assets/js/lustiges-script.js
+++ b/assets/js/lustiges-script.js
@@ -299,12 +299,27 @@ $(function() {
 	});
 });
 
-// update teaser images
+// update teaser images, hide/show room depending on teaser image availability
 $(function() {
+	var
+		roomSelector = '.room.has-preview',
+		previewSelector = roomSelector + ' .preview';
+
+	$(previewSelector).each(function() {
+		var
+			$teaser = $(this),
+			$room = $teaser.parents(roomSelector);
+
+		$teaser.on('error', function() {
+			$room.addClass('hidden');
+		});
+	});
+
 	setInterval(function() {
-		$('.room.has-preview .preview').each(function() {
+		$(previewSelector).each(function() {
 			var
 				$teaser = $(this),
+				$room = $teaser.parents(roomSelector),
 				$preload = $('<img />'),
 				src = $teaser.data('src');
 
@@ -315,6 +330,9 @@ $(function() {
 
 			$preload.on('load', function() {
 				$teaser.prop('src', $preload.prop('src'));
+				$room.removeClass('hidden');
+			}).on('error', function() {
+				$room.addClass('hidden');
 			}).prop('src', src + '?'+(new Date()).getTime());
 		});
 	}, 1000*60);

From 0c2cecc9107b6ffd351ad90c61a24913408dc32c Mon Sep 17 00:00:00 2001
From: Manfred Stock <m-ccc@nfred.ch>
Date: Thu, 23 Feb 2023 12:40:31 +0100
Subject: [PATCH 3/3] Add button to show/hide inactive streams

---
 assets/css/_overview.less    | 33 +++++++++++++++++++++++++++++++++
 assets/js/lustiges-script.js |  9 +++++----
 template/overview.phtml      |  6 ++++++
 3 files changed, 44 insertions(+), 4 deletions(-)

diff --git a/assets/css/_overview.less b/assets/css/_overview.less
index e7c341c3..d8a85c8d 100644
--- 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
index 7833845d..a90929b2 100644
--- a/assets/js/lustiges-script.js
+++ b/assets/js/lustiges-script.js
@@ -303,7 +303,8 @@ $(function() {
 $(function() {
 	var
 		roomSelector = '.room.has-preview',
-		previewSelector = roomSelector + ' .preview';
+		previewSelector = roomSelector + ' .preview',
+		inactiveClass = 'inactive-stream';
 
 	$(previewSelector).each(function() {
 		var
@@ -311,7 +312,7 @@ $(function() {
 			$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
index 3bbd832d..727ac97c 100644
--- 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 ?>