From a1d201d9ba47c170aa614f9a9169eb49622f3781 Mon Sep 17 00:00:00 2001
From: Mathieu Strypsteen <mathieu@strypsteen.me>
Date: Thu, 26 Oct 2023 15:28:23 +0200
Subject: [PATCH] Add warning on camera feed disconnect

---
 content/assets/scripts/cammie.js | 10 ++++++++++
 content/cammie.erb               |  5 ++++-
 2 files changed, 14 insertions(+), 1 deletion(-)

diff --git a/content/assets/scripts/cammie.js b/content/assets/scripts/cammie.js
index d8442fe5..659f135d 100644
--- a/content/assets/scripts/cammie.js
+++ b/content/assets/scripts/cammie.js
@@ -26,6 +26,16 @@ debounce = function(func, wait, initial) {
 function cammie_error() {
 	$("#cammie-feed").attr("src","/assets/images/cammie_down.svg")
 }
+var cammieTimeout = null;
+function cammie_loaded() {
+  if (cammieTimeout) {
+    clearTimeout(cammieTimeout);
+  }
+  showWarning = function() {
+    $("#cammieFeedDisconnected").removeClass("is-hidden");
+  };
+  cammieTimeout = setTimeout(showWarning, 5000);
+}
 
 $("#cammie-ctrls").mousemove(debounce(function() {
   return $(this).removeClass('display');
diff --git a/content/cammie.erb b/content/cammie.erb
index b75898a5..abaecec1 100644
--- a/content/cammie.erb
+++ b/content/cammie.erb
@@ -16,9 +16,12 @@ socket.on('replymessage', function(obj) {
 <% end %>
 
 <section id="cammie-section">
+  <div id="cammieFeedDisconnected" class="notification is-danger is-light is-hidden">
+    Camera feed disconnected, reload the page
+  </div>
   <div id="cammie-body">
     <figure class="image is-16by9">
-      <img id="cammie-feed" alt="cammie" src="https://kelder.zeus.ugent.be/camera/cammie" onerror="cammie_error()">
+      <img id="cammie-feed" alt="cammie" src="https://kelder.zeus.ugent.be/camera/cammie" onerror="cammie_error()" onload="cammie_loaded()">
     </figure>
     <div id="cammie-ctrls">
       <div class="columns is-mobile">