From 91b1d7bbeb8cd726a26dea8b0ea4f7e3e9cc38f0 Mon Sep 17 00:00:00 2001
From: Isaac Connor <isaac@zoneminder.com>
Date: Mon, 2 Mar 2020 11:52:32 -0500
Subject: [PATCH] alter setButtonState to take either an id or an element so
 that we can log the missing element

---
 web/skins/classic/js/skin.js        |   5 +-
 web/skins/classic/views/js/watch.js | 136 ++++++++++++++--------------
 2 files changed, 71 insertions(+), 70 deletions(-)

diff --git a/web/skins/classic/js/skin.js b/web/skins/classic/js/skin.js
index 9e9e80764..dd965a39f 100644
--- a/web/skins/classic/js/skin.js
+++ b/web/skins/classic/js/skin.js
@@ -558,7 +558,8 @@ function scaleToFit(baseWidth, baseHeight, scaleEl, bottomEl) {
   return {width: Math.floor(newWidth), height: Math.floor(newHeight), autoScale: autoScale};
 }
 
-function setButtonState(element, butClass) {
+function setButtonState(element_id, butClass) {
+  var element = $(element_id);
   if ( element ) {
     element.className = butClass;
     if (butClass == 'unavail' || (butClass == 'active' && (element.id == 'pauseBtn' || element.id == 'playBtn'))) {
@@ -567,6 +568,6 @@ function setButtonState(element, butClass) {
       element.disabled = false;
     }
   } else {
-    console.log('Element was null in setButtonState');
+    console.log('Element was null or not found in setButtonState. id:'+element_id);
   }
 }
diff --git a/web/skins/classic/views/js/watch.js b/web/skins/classic/views/js/watch.js
index 7fd25d603..d4ee2dc34 100644
--- a/web/skins/classic/views/js/watch.js
+++ b/web/skins/classic/views/js/watch.js
@@ -197,9 +197,9 @@ function getStreamCmdResponse(respObj, respText) {
 
       $('zoomValue').set('text', streamStatus.zoom);
       if ( streamStatus.zoom == '1.0' ) {
-        setButtonState($('zoomOutBtn'), 'unavail');
+        setButtonState('zoomOutBtn', 'unavail');
       } else {
-        setButtonState($('zoomOutBtn'), 'inactive');
+        setButtonState('zoomOutBtn', 'inactive');
       }
 
       if ( canEditMonitors ) {
@@ -260,107 +260,107 @@ function getStreamCmdResponse(respObj, respText) {
 }
 
 function streamCmdPause( action ) {
-  setButtonState( $('pauseBtn'), 'active' );
-  setButtonState( $('playBtn'), 'inactive' );
-  setButtonState( $('stopBtn'), 'inactive' );
-  setButtonState( $('fastFwdBtn'), 'inactive' );
-  setButtonState( $('slowFwdBtn'), 'inactive' );
-  setButtonState( $('slowRevBtn'), 'inactive' );
-  setButtonState( $('fastRevBtn'), 'inactive' );
+  setButtonState('pauseBtn', 'active');
+  setButtonState('playBtn', 'inactive');
+  setButtonState('stopBtn', 'inactive');
+  setButtonState('fastFwdBtn', 'inactive');
+  setButtonState('slowFwdBtn', 'inactive');
+  setButtonState('slowRevBtn', 'inactive');
+  setButtonState('fastRevBtn', 'inactive');
   if ( action ) {
     streamCmdReq.send( streamCmdParms+"&command="+CMD_PAUSE );
   }
 }
 
 function streamCmdPlay( action ) {
-  setButtonState( $('pauseBtn'), 'inactive' );
-  setButtonState( $('playBtn'), 'active' );
+  setButtonState('pauseBtn', 'inactive');
+  setButtonState('playBtn', 'active');
   if ( streamStatus.delayed == true ) {
-    setButtonState( $('stopBtn'), 'inactive' );
-    setButtonState( $('fastFwdBtn'), 'inactive' );
-    setButtonState( $('slowFwdBtn'), 'inactive' );
-    setButtonState( $('slowRevBtn'), 'inactive' );
-    setButtonState( $('fastRevBtn'), 'inactive' );
+    setButtonState('stopBtn', 'inactive');
+    setButtonState('fastFwdBtn', 'inactive');
+    setButtonState('slowFwdBtn', 'inactive');
+    setButtonState('slowRevBtn', 'inactive');
+    setButtonState('fastRevBtn', 'inactive');
   } else {
-    setButtonState( $('stopBtn'), 'unavail' );
-    setButtonState( $('fastFwdBtn'), 'unavail' );
-    setButtonState( $('slowFwdBtn'), 'unavail' );
-    setButtonState( $('slowRevBtn'), 'unavail' );
-    setButtonState( $('fastRevBtn'), 'unavail' );
+    setButtonState('stopBtn', 'unavail');
+    setButtonState('fastFwdBtn', 'unavail');
+    setButtonState('slowFwdBtn', 'unavail');
+    setButtonState('slowRevBtn', 'unavail');
+    setButtonState('fastRevBtn', 'unavail');
   }
   if ( action ) {
-    streamCmdReq.send( streamCmdParms+"&command="+CMD_PLAY );
+    streamCmdReq.send(streamCmdParms+"&command="+CMD_PLAY);
   }
 }
 
 function streamCmdStop( action ) {
-  setButtonState( $('pauseBtn'), 'inactive' );
-  setButtonState( $('playBtn'), 'unavail' );
-  setButtonState( $('stopBtn'), 'active' );
-  setButtonState( $('fastFwdBtn'), 'unavail' );
-  setButtonState( $('slowFwdBtn'), 'unavail' );
-  setButtonState( $('slowRevBtn'), 'unavail' );
-  setButtonState( $('fastRevBtn'), 'unavail' );
+  setButtonState('pauseBtn', 'inactive');
+  setButtonState('playBtn', 'unavail');
+  setButtonState('stopBtn', 'active');
+  setButtonState('fastFwdBtn', 'unavail');
+  setButtonState('slowFwdBtn', 'unavail');
+  setButtonState('slowRevBtn', 'unavail');
+  setButtonState('fastRevBtn', 'unavail');
   if ( action ) {
-    streamCmdReq.send( streamCmdParms+"&command="+CMD_STOP );
+    streamCmdReq.send(streamCmdParms+"&command="+CMD_STOP);
   }
-  setButtonState( $('stopBtn'), 'unavail' );
-  setButtonState( $('playBtn'), 'active' );
+  setButtonState('stopBtn', 'unavail');
+  setButtonState('playBtn', 'active');
 }
 
 function streamCmdFastFwd( action ) {
-  setButtonState( $('pauseBtn'), 'inactive' );
-  setButtonState( $('playBtn'), 'inactive' );
-  setButtonState( $('stopBtn'), 'inactive' );
-  setButtonState( $('fastFwdBtn'), 'inactive' );
-  setButtonState( $('slowFwdBtn'), 'inactive' );
-  setButtonState( $('slowRevBtn'), 'inactive' );
-  setButtonState( $('fastRevBtn'), 'inactive' );
+  setButtonState('pauseBtn', 'inactive');
+  setButtonState('playBtn', 'inactive');
+  setButtonState('stopBtn', 'inactive');
+  setButtonState('fastFwdBtn', 'inactive');
+  setButtonState('slowFwdBtn', 'inactive');
+  setButtonState('slowRevBtn', 'inactive');
+  setButtonState('fastRevBtn', 'inactive');
   if ( action ) {
-    streamCmdReq.send( streamCmdParms+"&command="+CMD_FASTFWD );
+    streamCmdReq.send(streamCmdParms+"&command="+CMD_FASTFWD);
   }
 }
 
 function streamCmdSlowFwd( action ) {
-  setButtonState( $('pauseBtn'), 'inactive' );
-  setButtonState( $('playBtn'), 'inactive' );
-  setButtonState( $('stopBtn'), 'inactive' );
-  setButtonState( $('fastFwdBtn'), 'inactive' );
-  setButtonState( $('slowFwdBtn'), 'active' );
-  setButtonState( $('slowRevBtn'), 'inactive' );
-  setButtonState( $('fastRevBtn'), 'inactive' );
+  setButtonState('pauseBtn', 'inactive');
+  setButtonState('playBtn', 'inactive');
+  setButtonState('stopBtn', 'inactive');
+  setButtonState('fastFwdBtn', 'inactive');
+  setButtonState('slowFwdBtn', 'active');
+  setButtonState('slowRevBtn', 'inactive');
+  setButtonState('fastRevBtn', 'inactive');
   if ( action ) {
-    streamCmdReq.send( streamCmdParms+"&command="+CMD_SLOWFWD );
+    streamCmdReq.send(streamCmdParms+"&command="+CMD_SLOWFWD);
   }
-  setButtonState( $('pauseBtn'), 'active' );
-  setButtonState( $('slowFwdBtn'), 'inactive' );
+  setButtonState('pauseBtn', 'active');
+  setButtonState('slowFwdBtn', 'inactive');
 }
 
 function streamCmdSlowRev( action ) {
-  setButtonState( $('pauseBtn'), 'inactive' );
-  setButtonState( $('playBtn'), 'inactive' );
-  setButtonState( $('stopBtn'), 'inactive' );
-  setButtonState( $('fastFwdBtn'), 'inactive' );
-  setButtonState( $('slowFwdBtn'), 'inactive' );
-  setButtonState( $('slowRevBtn'), 'active' );
-  setButtonState( $('fastRevBtn'), 'inactive' );
+  setButtonState('pauseBtn', 'inactive');
+  setButtonState('playBtn', 'inactive');
+  setButtonState('stopBtn', 'inactive');
+  setButtonState('fastFwdBtn', 'inactive');
+  setButtonState('slowFwdBtn', 'inactive');
+  setButtonState('slowRevBtn', 'active');
+  setButtonState('fastRevBtn', 'inactive');
   if ( action ) {
-    streamCmdReq.send( streamCmdParms+"&command="+CMD_SLOWREV );
+    streamCmdReq.send(streamCmdParms+"&command="+CMD_SLOWREV);
   }
-  setButtonState( $('pauseBtn'), 'active' );
-  setButtonState( $('slowRevBtn'), 'inactive' );
+  setButtonState('pauseBtn', 'active');
+  setButtonState('slowRevBtn', 'inactive');
 }
 
 function streamCmdFastRev( action ) {
-  setButtonState( $('pauseBtn'), 'inactive' );
-  setButtonState( $('playBtn'), 'inactive' );
-  setButtonState( $('stopBtn'), 'inactive' );
-  setButtonState( $('fastFwdBtn'), 'inactive' );
-  setButtonState( $('slowFwdBtn'), 'inactive' );
-  setButtonState( $('slowRevBtn'), 'inactive' );
-  setButtonState( $('fastRevBtn'), 'inactive' );
+  setButtonState('pauseBtn', 'inactive');
+  setButtonState('playBtn', 'inactive');
+  setButtonState('stopBtn', 'inactive');
+  setButtonState('fastFwdBtn', 'inactive');
+  setButtonState('slowFwdBtn', 'inactive');
+  setButtonState('slowRevBtn', 'inactive');
+  setButtonState('fastRevBtn', 'inactive');
   if ( action ) {
-    streamCmdReq.send( streamCmdParms+"&command="+CMD_FASTREV );
+    streamCmdReq.send(streamCmdParms+"&command="+CMD_FASTREV);
   }
 }