From febf15812f8097777add816f00a8f730d4c3d9df Mon Sep 17 00:00:00 2001
From: digital-gnome <31593470+digital-gnome@users.noreply.github.com>
Date: Fri, 29 Sep 2017 21:44:57 -0400
Subject: [PATCH 01/10] Add start times to getNearEvents

---
 web/ajax/status.php | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/web/ajax/status.php b/web/ajax/status.php
index 84399989d..ab5d61050 100644
--- a/web/ajax/status.php
+++ b/web/ajax/status.php
@@ -367,7 +367,7 @@ function getNearEvents() {
   else
     $midSql = '';
 
-  $sql = "select E.Id as Id from Events as E inner join Monitors as M on E.MonitorId = M.Id where $sortColumn ".($sortOrder=='asc'?'<=':'>=')." '".$event[$_REQUEST['sort_field']]."'".$_REQUEST['filter']['sql'].$midSql." order by $sortColumn ".($sortOrder=='asc'?'desc':'asc');
+  $sql = "select E.Id as Id, E.StartTime as StartTime from Events as E inner join Monitors as M on E.MonitorId = M.Id where $sortColumn ".($sortOrder=='asc'?'<=':'>=')." '".$event[$_REQUEST['sort_field']]."'".$_REQUEST['filter']['sql'].$midSql." order by $sortColumn ".($sortOrder=='asc'?'desc':'asc');
   $result = dbQuery( $sql );
   while ( $id = dbFetchNext( $result, 'Id' ) ) {
     if ( $id == $eventId ) {
@@ -376,7 +376,7 @@ function getNearEvents() {
     }
   }
 
-  $sql = "select E.Id as Id from Events as E inner join Monitors as M on E.MonitorId = M.Id where $sortColumn ".($sortOrder=='asc'?'>=':'<=')." '".$event[$_REQUEST['sort_field']]."'".$_REQUEST['filter']['sql'].$midSql." order by $sortColumn $sortOrder";
+  $sql = "select E.Id as Id, E.StartTime as StartTime from Events as E inner join Monitors as M on E.MonitorId = M.Id where $sortColumn ".($sortOrder=='asc'?'>=':'<=')." '".$event[$_REQUEST['sort_field']]."'".$_REQUEST['filter']['sql'].$midSql." order by $sortColumn $sortOrder";
   $result = dbQuery( $sql );
   while ( $id = dbFetchNext( $result, 'Id' ) ) {
     if ( $id == $eventId ) {
@@ -388,6 +388,8 @@ function getNearEvents() {
   $result = array( 'EventId'=>$eventId );
   $result['PrevEventId'] = empty($prevEvent)?0:$prevEvent['Id'];
   $result['NextEventId'] = empty($nextEvent)?0:$nextEvent['Id'];
+  $result['PrevEventStartTime'] = empty($prevEvent)?0:$prevEvent['StartTime'];
+  $result['NextEventStartTime'] = empty($nextEvent)?0:$nextEvent['StartTime'];
   $result['PrevEventDefVideoPath'] = empty($prevEvent)?0:(getEventDefaultVideoPath($prevEvent));
   $result['NextEventDefVideoPath'] = empty($nextEvent)?0:(getEventDefaultVideoPath($nextEvent));
   return( $result );

From 5f42bf4fe50aba2e816067086ed5f6f92d6c0f65 Mon Sep 17 00:00:00 2001
From: digital-gnome <31593470+digital-gnome@users.noreply.github.com>
Date: Fri, 29 Sep 2017 21:47:52 -0400
Subject: [PATCH 02/10] Change CSS to class, add class to php

I needed the styling for the video.js buttons.  The fallback mjpeg player used ids.
---
 web/skins/classic/css/classic/views/event.css | 12 ++++++------
 web/skins/classic/css/dark/views/event.css    | 12 ++++++------
 web/skins/classic/css/flat/views/event.css    | 12 ++++++------
 web/skins/classic/views/event.php             |  2 +-
 4 files changed, 19 insertions(+), 19 deletions(-)

diff --git a/web/skins/classic/css/classic/views/event.css b/web/skins/classic/css/classic/views/event.css
index e80710772..eb0a4a76a 100644
--- a/web/skins/classic/css/classic/views/event.css
+++ b/web/skins/classic/css/classic/views/event.css
@@ -106,32 +106,32 @@
 #monitorStatus #monitorState {
 }
 
-#dvrControls {
+dvrControls {
     margin-top: 3px;
     margin-bottom: 2px;
     text-align: center;
 }
 
-#dvrControls input {
+dvrControls input {
     height: 20px;
     width: 28px;
     padding-bottom: 3px;
     margin: 0 3px;
 }
 
-#dvrControls input[disabled=disabled] {
+dvrControls input[disabled=disabled] {
     color: #aaaaaa;
 }
 
-#dvrControls input.active {
+dvrControls input.active {
     border: 1px solid blue;
 }
 
-#dvrControls input.inactive {
+dvrControls input.inactive {
     border: 1px solid green;
 }
 
-#dvrControls input.unavail {
+dvrControls input.unavail {
     border: 1px solid red;
 }
 
diff --git a/web/skins/classic/css/dark/views/event.css b/web/skins/classic/css/dark/views/event.css
index 13ac0cc0b..be59571f2 100644
--- a/web/skins/classic/css/dark/views/event.css
+++ b/web/skins/classic/css/dark/views/event.css
@@ -89,32 +89,32 @@
 #monitorStatus #monitorState {
 }
 
-#dvrControls {
+dvrControls {
     margin-top: 3px;
     margin-bottom: 2px;
     text-align: center;
 }
 
-#dvrControls input {
+dvrControls input {
     height: 20px;
     width: 28px;
     padding-bottom: 3px;
     margin: 0 3px;
 }
 
-#dvrControls input[disabled=disabled] {
+dvrControls input[disabled=disabled] {
     color: #aaaaaa;
 }
 
-#dvrControls input.active {
+dvrControls input.active {
     border: 1px solid blue;
 }
 
-#dvrControls input.inactive {
+dvrControls input.inactive {
     border: 1px solid green;
 }
 
-#dvrControls input.unavail {
+dvrControls input.unavail {
     border: 1px solid red;
 }
 
diff --git a/web/skins/classic/css/flat/views/event.css b/web/skins/classic/css/flat/views/event.css
index a41c56a38..dc11e7d58 100644
--- a/web/skins/classic/css/flat/views/event.css
+++ b/web/skins/classic/css/flat/views/event.css
@@ -98,36 +98,36 @@
 #monitorStatus #monitorState {
 }
 
-#dvrControls {
+dvrControls {
     margin-top: 3px;
     margin-bottom: 2px;
     text-align: center;
 }
 
-#dvrControls input {
+dvrControls input {
     padding: 10px 10px;
     width: 50px;
     margin: 0 3px;
     font-weight: 900;
 }
 
-#dvrControls input[disabled=disabled] {
+dvrControls input[disabled=disabled] {
     color: #aaaaaa;
 }
 
-#dvrControls input.active {
+dvrControls input.active {
     border: 0;
     background-color: #2ecc71;
     color: #fff;
 }
 
-#dvrControls input.inactive {
+dvrControls input.inactive {
     border: 0;
     background-color: #e67e22;
     color: #fff;
 }
 
-#dvrControls input.unavail {
+dvrControls input.unavail {
     background-color: #ccc;
     border: 0;
     cursor: default;
diff --git a/web/skins/classic/views/event.php b/web/skins/classic/views/event.php
index e9e29f33b..25951fa23 100644
--- a/web/skins/classic/views/event.php
+++ b/web/skins/classic/views/event.php
@@ -186,7 +186,7 @@ if ( ZM_WEB_STREAM_METHOD == 'mpeg' && ZM_MPEG_LIVE_FORMAT ) {
   }
 } // end if stream method
 ?>
-        <p id="dvrControls">
+        <p id="dvrControls" class="dvrControls">
           <input type="button" value="&lt;+" id="prevBtn" title="<?php echo translate('Prev') ?>" class="inactive" onclick="streamPrev( true );"/>
           <input type="button" value="&lt;&lt;" id="fastRevBtn" title="<?php echo translate('Rewind') ?>" class="inactive" disabled="disabled" onclick="streamFastRev( true );"/>
           <input type="button" value="&lt;" id="slowRevBtn" title="<?php echo translate('StepBack') ?>" class="unavail" disabled="disabled" onclick="streamSlowRev( true );"/>

From 22af70601e14351d782ff74d9f448de2a8143dd4 Mon Sep 17 00:00:00 2001
From: digital-gnome <31593470+digital-gnome@users.noreply.github.com>
Date: Fri, 29 Sep 2017 21:49:58 -0400
Subject: [PATCH 03/10] Convert to ampersand in filters

Querys weren't working because it was passing &amp; instead of &.  Nothing else appeared to be using these.
---
 web/skins/classic/views/js/event.js.php | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/web/skins/classic/views/js/event.js.php b/web/skins/classic/views/js/event.js.php
index f4a14f1fe..b8dbd8d94 100644
--- a/web/skins/classic/views/js/event.js.php
+++ b/web/skins/classic/views/js/event.js.php
@@ -33,8 +33,8 @@ var eventData = {
     Length: '<?php echo $Event->Length() ?>'
 };
 
-var filterQuery = '<?php echo isset($filterQuery)?validJsStr($filterQuery):'' ?>';
-var sortQuery = '<?php echo isset($sortQuery)?validJsStr($sortQuery):'' ?>';
+var filterQuery = '<?php echo isset($filterQuery)?validJsStr(htmlspecialchars_decode($filterQuery)):'' ?>';
+var sortQuery = '<?php echo isset($sortQuery)?validJsStr(htmlspecialchars_decode($sortQuery)):'' ?>';
 
 var scale = <?php echo $scale ?>;
 var canEditEvents = <?php echo canEdit( 'Events' )?'true':'false' ?>;

From 5f203fc813304c71d5f0568e063cf0fdbd561328 Mon Sep 17 00:00:00 2001
From: digital-gnome <31593470+digital-gnome@users.noreply.github.com>
Date: Fri, 29 Sep 2017 21:52:02 -0400
Subject: [PATCH 04/10] JS logic for video.js navigation

---
 web/skins/classic/views/js/event.js | 22 +++++++++++++++++++---
 1 file changed, 19 insertions(+), 3 deletions(-)

diff --git a/web/skins/classic/views/js/event.js b/web/skins/classic/views/js/event.js
index 20beaa885..dc1cdb832 100644
--- a/web/skins/classic/views/js/event.js
+++ b/web/skins/classic/views/js/event.js
@@ -164,13 +164,23 @@ function streamFastRev( action ) {
 }
 
 function streamPrev( action ) {
-  if ( action )
+  if ( action ) {
+    if ( vid ) {
+      location.replace(thisUrl + '?view=event&eid=' + prevEventId + filterQuery + sortQuery);
+      return;
+    }
     streamReq.send( streamParms+"&command="+CMD_PREV );
+  }
 }
 
 function streamNext( action ) {
-  if ( action )
+  if ( action ) {
+    if ( vid ) {
+      location.replace(thisUrl + '?view=event&eid=' + nextEventId + filterQuery + sortQuery);
+      return;
+    }
     streamReq.send( streamParms+"&command="+CMD_NEXT );
+  }
 }
 
 function streamZoomIn( x, y ) {
@@ -251,6 +261,8 @@ function eventQuery( eventId ) {
 
 var prevEventId = 0;
 var nextEventId = 0;
+var prevEventStartTime = 0;
+var nextEventStartTime = 0;
 var PrevEventDefVideoPath = "";
 var NextEventDefVideoPath = "";
 
@@ -259,6 +271,8 @@ function getNearEventsResponse( respObj, respText ) {
     return;
   prevEventId = respObj.nearevents.PrevEventId;
   nextEventId = respObj.nearevents.NextEventId;
+  prevEventStartTime = Date.parse(respObj.nearevents.PrevEventStartTime);
+  nextEventStartTime = Date.parse(respObj.nearevents.NextEventStartTime);
   PrevEventDefVideoPath = respObj.nearevents.PrevEventDefVideoPath;
   NextEventDefVideoPath = respObj.nearevents.NextEventDefVideoPath;
 
@@ -266,12 +280,14 @@ function getNearEventsResponse( respObj, respText ) {
   if ( prevEventBtn ) prevEventBtn.disabled = !prevEventId;
   var nextEventBtn = $('nextEventBtn');
   if ( nextEventBtn ) nextEventBtn.disabled = !nextEventId;
+  if (prevEventId == 0) $j('#prevBtnVjs').prop('disabled', true);
+  if (nextEventId == 0) $j('#nextBtnVjs').prop('disabled', true);
 }
 
 var nearEventsReq = new Request.JSON( { url: thisUrl, method: 'get', timeout: AJAX_TIMEOUT, link: 'cancel', onSuccess: getNearEventsResponse } );
 
 function nearEventsQuery( eventId ) {
-  var parms = "view=request&request=status&entity=nearevents&id="+eventId;
+  var parms = "view=request&request=status&entity=nearevents&id="+eventId+filterQuery+sortQuery;
   nearEventsReq.send( parms );
 }
 

From 0e2b7d1b522a67e0bb7e8eeed9161ccc872baf74 Mon Sep 17 00:00:00 2001
From: digital-gnome <31593470+digital-gnome@users.noreply.github.com>
Date: Fri, 29 Sep 2017 21:52:52 -0400
Subject: [PATCH 05/10] End of video logic

---
 web/skins/classic/views/event.php | 31 +++++++++++++++++++++++++++++++
 1 file changed, 31 insertions(+)

diff --git a/web/skins/classic/views/event.php b/web/skins/classic/views/event.php
index 25951fa23..a67a564df 100644
--- a/web/skins/classic/views/event.php
+++ b/web/skins/classic/views/event.php
@@ -167,6 +167,37 @@ if ( $Event->DefaultVideo() ) {
         var duration = <?php echo $Event->Length() ?>, startTime = '<?php echo $Event->StartTime() ?>';
 
         addVideoTimingTrack(document.getElementById('videoobj'), LabelFormat, monitorName, duration, startTime);
+
+        nearEventsQuery( eventData.Id );
+
+        var video = videojs('videoobj').ready(function(){
+          var player = this;
+          player.on('ended', function() {
+            switch(replayMode.value) {
+              case 'none':
+                break;
+              case 'single':
+                player.play();
+                break;
+              case 'all':
+                <!--nextEventStartTime.getTime() is a mootools workaround, highjacks Date.parse-->
+                var gapDuration = (new Date().getTime()) + (nextEventStartTime.getTime() - <?php echo (strtotime($Event->StartTime()) + $Event->Length())*1000 ?>);
+                var x = setInterval(function() {
+                  var now = new Date().getTime();
+                  var remainder = new Date(Math.round(gapDuration - now)).toISOString().substr(11,8);;
+                  $j("#replayAllCountDown").html(remainder + " to next event.");
+                  if (remainder < 0) {
+                    clearInterval(x);
+                    streamNext( true );
+                  }
+                }, 1000);
+                break;
+              case 'gapless':
+                streamNext( true );
+                break;
+            }
+          });
+        });
         </script>
 <?php
 }  // end if DefaultVideo

From 7c72ff1fd951536e22015aa45dd1ab37fbbc216f Mon Sep 17 00:00:00 2001
From: digital-gnome <31593470+digital-gnome@users.noreply.github.com>
Date: Fri, 29 Sep 2017 21:53:15 -0400
Subject: [PATCH 06/10] Navigation buttons for video.ja

---
 web/skins/classic/views/event.php | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/web/skins/classic/views/event.php b/web/skins/classic/views/event.php
index a67a564df..0cbcdbf01 100644
--- a/web/skins/classic/views/event.php
+++ b/web/skins/classic/views/event.php
@@ -199,6 +199,13 @@ if ( $Event->DefaultVideo() ) {
           });
         });
         </script>
+
+      <p id="replayAllCountDown"></p>
+      <p id="dvrControlsVjs" class="dvrControls">
+        <input type="button" value="&lt;+" id="prevBtnVjs" title="<?php echo translate('Prev') ?>" class="active" onclick="streamPrev( true );"/>
+        <input type="button" value="+&gt;" id="nextBtnVjs" title="<?php echo translate('Next') ?>" class="active" onclick="streamNext( true );"/>
+      </p>
+
 <?php
 }  // end if DefaultVideo
 ?>

From 48a3e5eaa637fcb8057c64cf2c0007e6655ca210 Mon Sep 17 00:00:00 2001
From: digital-gnome <31593470+digital-gnome@users.noreply.github.com>
Date: Sat, 30 Sep 2017 16:35:03 -0400
Subject: [PATCH 07/10] Move logic to .js file.

---
 web/skins/classic/views/event.php   | 30 +---------------------------
 web/skins/classic/views/js/event.js | 31 +++++++++++++++++++++++++++++
 2 files changed, 32 insertions(+), 29 deletions(-)

diff --git a/web/skins/classic/views/event.php b/web/skins/classic/views/event.php
index eeb7ca7c2..04d5c31ec 100644
--- a/web/skins/classic/views/event.php
+++ b/web/skins/classic/views/event.php
@@ -169,35 +169,7 @@ if ( $Event->DefaultVideo() ) {
         addVideoTimingTrack(document.getElementById('videoobj'), LabelFormat, monitorName, duration, startTime);
 
         nearEventsQuery( eventData.Id );
-
-        var video = videojs('videoobj').ready(function(){
-          var player = this;
-          player.on('ended', function() {
-            switch(replayMode.value) {
-              case 'none':
-                break;
-              case 'single':
-                player.play();
-                break;
-              case 'all':
-                <!--nextEventStartTime.getTime() is a mootools workaround, highjacks Date.parse-->
-                var gapDuration = (new Date().getTime()) + (nextEventStartTime.getTime() - <?php echo (strtotime($Event->StartTime()) + $Event->Length())*1000 ?>);
-                var x = setInterval(function() {
-                  var now = new Date().getTime();
-                  var remainder = new Date(Math.round(gapDuration - now)).toISOString().substr(11,8);;
-                  $j("#replayAllCountDown").html(remainder + " to next event.");
-                  if (remainder < 0) {
-                    clearInterval(x);
-                    streamNext( true );
-                  }
-                }, 1000);
-                break;
-              case 'gapless':
-                streamNext( true );
-                break;
-            }
-          });
-        });
+        vjsReplay(<?php echo (strtotime($Event->StartTime()) + $Event->LEngth())*1000 ?>);
         </script>
 
       <p id="replayAllCountDown"></p>
diff --git a/web/skins/classic/views/js/event.js b/web/skins/classic/views/js/event.js
index dc1cdb832..5f2d9d11c 100644
--- a/web/skins/classic/views/js/event.js
+++ b/web/skins/classic/views/js/event.js
@@ -1,5 +1,36 @@
 var vid = null;
 
+function vjsReplay(endTime) {
+  var video = videojs('videoobj').ready(function(){
+    var player = this;
+    player.on('ended', function() {
+      switch(replayMode.value) {
+        case 'none':
+          break;
+        case 'single':
+          player.play();
+          break;
+        case 'all':
+//          nextEventStartTime.getTime() is a mootools workaround, highjacks Date.parse
+          var gapDuration = (new Date().getTime()) + (nextEventStartTime.getTime() - endTime);
+          var x = setInterval(function() {
+            var now = new Date().getTime();
+            var remainder = new Date(Math.round(gapDuration - now)).toISOString().substr(11,8);;
+            $j("#replayAllCountDown").html(remainder + " to next event.");
+            if (remainder < 0) {
+              clearInterval(x);
+              streamNext( true );
+            }
+          }, 1000);
+          break;
+        case 'gapless':
+          streamNext( true );
+          break;
+      }
+    });
+  });
+}
+
 function setButtonState( element, butClass ) {
   if ( element ) {
     element.className = butClass;

From c35face630fd7eae92a067427d15f5c101d8a324 Mon Sep 17 00:00:00 2001
From: digital-gnome <31593470+digital-gnome@users.noreply.github.com>
Date: Mon, 2 Oct 2017 10:52:55 -0400
Subject: [PATCH 08/10] LengthTypo

---
 web/skins/classic/views/event.php | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web/skins/classic/views/event.php b/web/skins/classic/views/event.php
index 04d5c31ec..bb8f8f2bc 100644
--- a/web/skins/classic/views/event.php
+++ b/web/skins/classic/views/event.php
@@ -169,7 +169,7 @@ if ( $Event->DefaultVideo() ) {
         addVideoTimingTrack(document.getElementById('videoobj'), LabelFormat, monitorName, duration, startTime);
 
         nearEventsQuery( eventData.Id );
-        vjsReplay(<?php echo (strtotime($Event->StartTime()) + $Event->LEngth())*1000 ?>);
+        vjsReplay(<?php echo (strtotime($Event->StartTime()) + $Event->Length())*1000 ?>);
         </script>
 
       <p id="replayAllCountDown"></p>

From 33a3e04f43b9f81e6451eb4f8a86a71d81400c48 Mon Sep 17 00:00:00 2001
From: digital-gnome <31593470+digital-gnome@users.noreply.github.com>
Date: Mon, 2 Oct 2017 15:40:18 -0400
Subject: [PATCH 09/10] Fix class selector

---
 web/skins/classic/css/classic/views/event.css | 12 ++++++------
 web/skins/classic/css/dark/views/event.css    | 12 ++++++------
 web/skins/classic/css/flat/views/event.css    | 12 ++++++------
 3 files changed, 18 insertions(+), 18 deletions(-)

diff --git a/web/skins/classic/css/classic/views/event.css b/web/skins/classic/css/classic/views/event.css
index eb0a4a76a..e3c666156 100644
--- a/web/skins/classic/css/classic/views/event.css
+++ b/web/skins/classic/css/classic/views/event.css
@@ -106,32 +106,32 @@
 #monitorStatus #monitorState {
 }
 
-dvrControls {
+.dvrControls {
     margin-top: 3px;
     margin-bottom: 2px;
     text-align: center;
 }
 
-dvrControls input {
+.dvrControls input {
     height: 20px;
     width: 28px;
     padding-bottom: 3px;
     margin: 0 3px;
 }
 
-dvrControls input[disabled=disabled] {
+.dvrControls input[disabled=disabled] {
     color: #aaaaaa;
 }
 
-dvrControls input.active {
+.dvrControls input.active {
     border: 1px solid blue;
 }
 
-dvrControls input.inactive {
+.dvrControls input.inactive {
     border: 1px solid green;
 }
 
-dvrControls input.unavail {
+.dvrControls input.unavail {
     border: 1px solid red;
 }
 
diff --git a/web/skins/classic/css/dark/views/event.css b/web/skins/classic/css/dark/views/event.css
index be59571f2..de53a6ab5 100644
--- a/web/skins/classic/css/dark/views/event.css
+++ b/web/skins/classic/css/dark/views/event.css
@@ -89,32 +89,32 @@
 #monitorStatus #monitorState {
 }
 
-dvrControls {
+.dvrControls {
     margin-top: 3px;
     margin-bottom: 2px;
     text-align: center;
 }
 
-dvrControls input {
+.dvrControls input {
     height: 20px;
     width: 28px;
     padding-bottom: 3px;
     margin: 0 3px;
 }
 
-dvrControls input[disabled=disabled] {
+.dvrControls input[disabled=disabled] {
     color: #aaaaaa;
 }
 
-dvrControls input.active {
+.dvrControls input.active {
     border: 1px solid blue;
 }
 
-dvrControls input.inactive {
+.dvrControls input.inactive {
     border: 1px solid green;
 }
 
-dvrControls input.unavail {
+.dvrControls input.unavail {
     border: 1px solid red;
 }
 
diff --git a/web/skins/classic/css/flat/views/event.css b/web/skins/classic/css/flat/views/event.css
index dc11e7d58..2fae0321d 100644
--- a/web/skins/classic/css/flat/views/event.css
+++ b/web/skins/classic/css/flat/views/event.css
@@ -98,36 +98,36 @@
 #monitorStatus #monitorState {
 }
 
-dvrControls {
+.dvrControls {
     margin-top: 3px;
     margin-bottom: 2px;
     text-align: center;
 }
 
-dvrControls input {
+.dvrControls input {
     padding: 10px 10px;
     width: 50px;
     margin: 0 3px;
     font-weight: 900;
 }
 
-dvrControls input[disabled=disabled] {
+.dvrControls input[disabled=disabled] {
     color: #aaaaaa;
 }
 
-dvrControls input.active {
+.dvrControls input.active {
     border: 0;
     background-color: #2ecc71;
     color: #fff;
 }
 
-dvrControls input.inactive {
+.dvrControls input.inactive {
     border: 0;
     background-color: #e67e22;
     color: #fff;
 }
 
-dvrControls input.unavail {
+.dvrControls input.unavail {
     background-color: #ccc;
     border: 0;
     cursor: default;

From 9b241ee370fdb4f3c7a7b7d2af8d13063802702a Mon Sep 17 00:00:00 2001
From: digital-gnome <31593470+digital-gnome@users.noreply.github.com>
Date: Mon, 2 Oct 2017 15:41:04 -0400
Subject: [PATCH 10/10] Also change class

With the css class properly set it turns out this wasn't working.
---
 web/skins/classic/views/js/event.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/web/skins/classic/views/js/event.js b/web/skins/classic/views/js/event.js
index 5f2d9d11c..29ca7aedf 100644
--- a/web/skins/classic/views/js/event.js
+++ b/web/skins/classic/views/js/event.js
@@ -311,8 +311,8 @@ function getNearEventsResponse( respObj, respText ) {
   if ( prevEventBtn ) prevEventBtn.disabled = !prevEventId;
   var nextEventBtn = $('nextEventBtn');
   if ( nextEventBtn ) nextEventBtn.disabled = !nextEventId;
-  if (prevEventId == 0) $j('#prevBtnVjs').prop('disabled', true);
-  if (nextEventId == 0) $j('#nextBtnVjs').prop('disabled', true);
+  if (prevEventId == 0) $j('#prevBtnVjs').prop('disabled', true).attr('class', 'unavail');
+  if (nextEventId == 0) $j('#nextBtnVjs').prop('disabled', true).attr('class', 'unavail');
 }
 
 var nearEventsReq = new Request.JSON( { url: thisUrl, method: 'get', timeout: AJAX_TIMEOUT, link: 'cancel', onSuccess: getNearEventsResponse } );