From 49ee94a06ad7f1d20c3847205d602c1b23f715c5 Mon Sep 17 00:00:00 2001
From: gysmo38 <frederic@leroux.im>
Date: Fri, 29 May 2020 14:24:14 +0200
Subject: [PATCH] Add record icon on camera image

---
 firmware_mod/www/cgi-bin/live.cgi |  3 +++
 firmware_mod/www/js/live.js       | 15 +++++++++++++++
 firmware_mod/www/live.html        |  5 +++--
 3 files changed, 21 insertions(+), 2 deletions(-)

diff --git a/firmware_mod/www/cgi-bin/live.cgi b/firmware_mod/www/cgi-bin/live.cgi
index 70119e9..e2ee4b8 100755
--- a/firmware_mod/www/cgi-bin/live.cgi
+++ b/firmware_mod/www/cgi-bin/live.cgi
@@ -94,6 +94,9 @@ if [ -n "$F_cmd" ]; then
   motion_mqtt_video)
     motion_mqtt_video $F_action
     ;;
+  recording)
+    recording $F_action
+    ;;
   *)
     echo "Unsupported command '$F_cmd'"
     ;;
diff --git a/firmware_mod/www/js/live.js b/firmware_mod/www/js/live.js
index dcbc4bd..a742a27 100755
--- a/firmware_mod/www/js/live.js
+++ b/firmware_mod/www/js/live.js
@@ -60,6 +60,19 @@ function PTZControl(view) {
     }
 }
 
+function record(action) {
+    $.get("cgi-bin/live.cgi",{cmd: "recording", action: action},function (result) {
+        if (action == "on" || result == "ON\n") {
+            $("#btn-record span").attr("style","color:red");
+            $("#btn-record").attr("onclick","record('off')");
+        }
+        else {
+            $("#btn-record span").removeAttr("style");
+            $("#btn-record").attr("onclick","record('on')");
+        }
+    });
+}
+
 //Function to show control buttons
 function camControl(view) {
     if( view == "show") {
@@ -122,6 +135,8 @@ function onLoad() {
         $("#hostname").html(hostname);
     });
 
+    //Get record status 
+    record("status");
     // Make liveview self refresh
     $("#liveview").attr("onload", "scheduleRefreshJob('live','refreshLiveImage()',1000);");
 }
diff --git a/firmware_mod/www/live.html b/firmware_mod/www/live.html
index 7772caa..de005d2 100755
--- a/firmware_mod/www/live.html
+++ b/firmware_mod/www/live.html
@@ -23,8 +23,9 @@
         
       </div>
         <div id="cam-control" class="w3-display-bottomright w3-container w3-hide">
-          <button id="btn-ptz" class="w3-button w3-circle w3-black" onclick="PTZControl('show')"> <i class="fa fa-arrows-alt"></i></button>
-          <button id="btn-settings" class="w3-button w3-circle w3-black" onclick="w3_open()"> <i class="fa fa-cog"></i></button>
+          <button id="btn-record" class="w3-button w3-circle w3-black" onclick="record('on')" title="Record On/Off"><span><i class="fas fa-video"></i></span></button>
+          <button id="btn-ptz" class="w3-button w3-circle w3-black" onclick="PTZControl('show')" title="PTZ Control"> <i class="fa fa-arrows-alt"></i></button>
+          <button id="btn-settings" class="w3-button w3-circle w3-black" onclick="w3_open()" title="Camera settings"> <i class="fa fa-cog"></i></button>
           <p></p>
         </div>
     </div>