Adding manual recordings control in the WebUI

Author: wberube

res/index.html

@@ -138,7 +138,7 @@
 		}
 
 		function setSource(id, src) {
-			var frame = document.getElementById(id), ext = ".mp4";
+			var frame = document.getElementById(id), ext = '.mp4';
 			if (frame.firstChild) frame.firstChild.src = "#";
 			if (src.indexOf(ext, src.length - ext.length) > -1)
 				frame.innerHTML = '<video id="player" width="100%" autoplay controls> \
@@ -151,6 +151,33 @@
 				while (frame.firstChild) frame.removeChild(frame.firstChild);
 		}
 
+		function toggleRecord(btn) {
+			if (!btn) return;
+
+			var req = new XMLHttpRequest(), act = '';
+			req.onreadystatechange = function() {
+				if (this.readyState != 4 || this.status != 200) return;
+				var dec = JSON.parse(req.responseText);
+				for (var key in dec) {
+					if (!dec.hasOwnProperty(key)) continue;
+					if (key != 'recording') continue;
+					if (dec[key] == true) {
+						btn.innerHTML = 'Stop';
+						btn.className = 'btn error';
+					} else {
+						btn.innerHTML = 'Start';
+						btn.className = 'btn primary';
+					}
+				}
+			}
+			switch (btn.innerHTML) {
+				case 'Start': act = '?start'; break;
+				case 'Stop':  act = '?stop';  break;
+			}
+			req.open('GET', '/api/record' + act);
+			req.send();
+		}
+
 		function every5Sec() {
 			apiRead('status');
 		}
@@ -162,6 +189,7 @@
 			apiRead('mjpeg');
 			apiRead('night');
 			apiRead('record');
+			toggleRecord(document.getElementById('record_state'));
 			apiRead('time');
 
 			duplicateRows('osd', 10);
@@ -245,6 +273,7 @@ <h2 class="unl">Media</h2>
 								<td><input type="number" id="record_segment_size"></td>
 							</tr>
 						</table>
+						<button id="record_state" class="btn" onclick="toggleRecord(this)"></button>
 						<a href="javascript:apiApply('record')" class="btn right">Apply</a>
 					</fieldset>
 				</div>

src/server.c

@@ -1316,7 +1316,7 @@ void respond_request(http_request_t *req) {
             "Content-Type: application/json;charset=UTF-8\r\n"
             "Connection: close\r\n"
             "\r\n"
-            "{\"recording\":%s,\"start_time\":\"%s\",\"continuous\":\"%s\",\"path\":\"%s\","
+            "{\"recording\":%s,\"start_time\":\"%s\",\"continuous\":%s,\"path\":\"%s\","
             "\"filename\":\"%s\",\"segment_duration\":%d,\"segment_size\":%d}",
                 recordOn ? "true" : "false", start_time, app_config.record_continuous ? "true" : "false",
                 app_config.record_path, app_config.record_filename,