From 81bbcb2ad297031f36385359ac9a86e8874e796b Mon Sep 17 00:00:00 2001
From: Mathieu Strypsteen <mathieu@strypsteen.me>
Date: Fri, 27 Oct 2023 15:40:01 +0200
Subject: [PATCH] Add warning on camera feed disconnect

---
 content/assets/scripts/cammie.js | 21 ++++++++++++++++++++-
 content/cammie.erb               |  9 +++++++--
 2 files changed, 27 insertions(+), 3 deletions(-)

diff --git a/content/assets/scripts/cammie.js b/content/assets/scripts/cammie.js
index d8442fe5..dc72d481 100644
--- a/content/assets/scripts/cammie.js
+++ b/content/assets/scripts/cammie.js
@@ -23,8 +23,27 @@ debounce = function(func, wait, initial) {
   };
 };
 
+var cammieError = false;
 function cammie_error() {
-	$("#cammie-feed").attr("src","/assets/images/cammie_down.svg")
+  cammieError = true;
+  document.getElementById("cammie-ctrls").remove();
+  document.getElementById("cammie-ctrls-2").remove();
+  $("#cammie-feed").attr("src","/assets/images/cammie_down.svg")
+}
+var cammieTimerStarted = false;
+function cammie_loaded() {
+  if (cammieTimerStarted) {
+    return;
+  }
+  showWarning = function() {
+    if (!cammieError) {
+      document.getElementById("cammieFeedDisconnected").classList.remove("is-hidden");
+      document.getElementById("cammie-ctrls").remove();
+      document.getElementById("cammie-ctrls-2").remove();
+    }
+  };
+  setTimeout(showWarning, 25000);
+  cammieTimerStarted = true;
 }
 
 $("#cammie-ctrls").mousemove(debounce(function() {
diff --git a/content/cammie.erb b/content/cammie.erb
index b75898a5..20ce22f1 100644
--- a/content/cammie.erb
+++ b/content/cammie.erb
@@ -16,9 +16,14 @@ socket.on('replymessage', function(obj) {
 <% end %>
 
 <section id="cammie-section">
+  <div id="cammieFeedDisconnected" class="notification is-danger is-light is-hidden">
+    Camera feed automatically disconnected due to inactivity, reload the page to resume viewing
+    <br>
+    Cammie is meant for checking if the kelder is busy before coming and shouldn't be left open for longer periods of time
+  </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">
@@ -59,7 +64,7 @@ socket.on('replymessage', function(obj) {
     </div>
   </div>
 
-  <nav class="columns mt-0">
+  <nav id="cammie-ctrls-2" class="columns mt-0">
     <div class="column">
       <button class="button is-primary is-full-width ctrl" data-command="set_pos" data-x="43" data-y="15">
         Kleine tafel