From 5bbe9b40e7406e1313086381fad9b9012fb3ac8d Mon Sep 17 00:00:00 2001
From: digital-gnome <31593470+digital-gnome@users.noreply.github.com>
Date: Tue, 3 Oct 2017 19:26:48 -0400
Subject: [PATCH 1/4] renderAlarmCues function

Generates the html for alarmcues and passes it to JS var
---
 web/skins/classic/views/js/event.js.php | 77 +++++++++++++++++++++++++
 1 file changed, 77 insertions(+)

diff --git a/web/skins/classic/views/js/event.js.php b/web/skins/classic/views/js/event.js.php
index f4a14f1fe..e18ab44c9 100644
--- a/web/skins/classic/views/js/event.js.php
+++ b/web/skins/classic/views/js/event.js.php
@@ -47,3 +47,80 @@ var canStreamNative = <?php echo canStreamNative()?'true':'false' ?>;
 //
 var deleteString = "<?php echo translate('Delete') ?>";
 var causeString = "<?php echo translate('AttrCause') ?>";
+
+//
+// AlarmCues
+//
+<?php
+function renderAlarmCues () {
+  global $Event, $scale;
+  $sql = 'SELECT *, unix_timestamp(TimeStamp) AS UnixTimeStamp FROM Frames WHERE EventID = ? ORDER BY FrameId';
+  $frames = dbFetchAll($sql, NULL, array($_REQUEST['eid']));
+  if (count($frames)) {
+    $width = reScale($Event->Width(), $scale);
+    $lastFrame = end($frames);
+    $lastTime = $lastFrame['Delta'] * 100;
+    $ratio = $width / $lastTime;
+    $minAlarm = ceil(1 / $ratio);
+    $spanTimeStart = 0;
+    $spanTimeEnd = 0;
+    $alarmed = 0;
+    $alarmHtml = "";
+    $pixSkewNone = 0;
+    $pixSkewAlarm = 0;
+    $skip = 0;
+    foreach ($frames as $key => $frame) {
+      if ($frame['Type'] == "Alarm" && $alarmed == 0) { //From nothing to alarm.  End nothing and start alarm.
+        if ($skip > $key) continue;
+        $alarmed = 1;
+        if ($frame['Delta'] == 0) continue; //If event starts with alarm
+        $spanTimeEnd = $frame['Delta'] * 100;
+        $spanTime = $spanTimeEnd - $spanTimeStart;
+        $pix = $ratio * $spanTime;
+        $pixSkewNone += $pix - round($pix);
+        $pix = round($pix);
+        if (($pixSkewNone > 1 || $pixSkewNone < -1) && $pix + round($pixSkewNone) > 0) { //add skew if it's a pixel and won't zero span
+          $pix += round($pixSkewNone);
+          $pixSkewNone = $pixSkewNone - round($pixSkewNone);
+        }
+        $alarmHtml .= "<span class=\"alarmCue noneCue\" style=\"width:" . $pix . "px;\"></span>";
+        $spanTimeStart = $spanTimeEnd;
+      } elseif ($frame['Type'] !== "Alarm" && $alarmed == 1) { //from Alarm to nothing.  End alarm and start nothing.
+        if ($skip > $key) continue;
+        $futNone = 0;
+        $keyPlus = $key + 1;
+        while ($futNone < $minAlarm) { //check ahead to see if there's enough for a none.
+          if (!array_key_exists($keyPlus, $frames )) break; //check if end of event
+          $futNone = ($frames[$keyPlus]['Delta'] * 100) - ($frame['Delta'] * 100);
+          if ($frames[$keyPlus]['Type'] == "Alarm") {
+            $skip = $keyPlus;
+            continue 2;
+          }
+          $keyPlus +=1;
+        }
+        if ((($frame['Delta'] * 100) - $spanTimeStart) < $minAlarm && (array_key_exists($keyPlus, $frames))) continue; //alarm short and more event
+        $spanTimeEnd = $frame['Delta'] * 100;
+        $spanTime = $spanTimeEnd - $spanTimeStart;
+        $alarmed = 0;
+        $pix = $ratio * $spanTime;
+        $pixSkewAlarm += $pix - round($pix);
+        $pix = round($pix);
+        if (($pixSkewAlarm > 1 || $pixSkewAlarm < -1) && $pix + round($pixSkewAlarm) > 0) {
+          $pix += round($pixSkewAlarm);
+          $pixSkewAlarm = $pixSkewAlarm - round($pixSkewAlarm);
+        }
+        $alarmHtml .= "<span class=\"alarmCue\" style=\"width:" . $pix . "px;\"></span>";
+        $spanTimeStart = $spanTimeEnd;
+      } elseif ($frame['Type'] == "Alarm" && $alarmed == 1 && !array_key_exists($key+1, $frames)) { // event ends on alarm
+        $spanTimeEnd = $frame['Delta'] * 100;
+        $spanTime = $spanTimeEnd - $spanTimeStart;
+        $alarmed = 0;
+        $pix = round($ratio * $spanTime);
+        $alarmHtml .= "<span class=\"alarmCue\" style=\"width:" . $pix . "px;\"></span>";
+      }
+    }
+    echo $alarmHtml;
+  }
+}
+?>
+var alarmHtml = '<?php renderAlarmCues (); ?>';

From ea4b9486aafbeff970f3dceb72071e48f741e9c3 Mon Sep 17 00:00:00 2001
From: digital-gnome <31593470+digital-gnome@users.noreply.github.com>
Date: Tue, 3 Oct 2017 19:28:06 -0400
Subject: [PATCH 2/4] alarmCues CSS

also function.php to load new vjs override file
---
 web/skins/classic/css/classic/views/event.css | 21 +++++++
 web/skins/classic/css/dark/views/event.css    | 25 +++++++++
 web/skins/classic/css/flat/views/event.css    | 19 ++++++-
 web/skins/classic/includes/functions.php      |  1 +
 web/skins/classic/js/video-js-skin.css        | 56 +++++++++++++++++++
 5 files changed, 121 insertions(+), 1 deletion(-)
 create mode 100644 web/skins/classic/js/video-js-skin.css

diff --git a/web/skins/classic/css/classic/views/event.css b/web/skins/classic/css/classic/views/event.css
index e80710772..4d096a665 100644
--- a/web/skins/classic/css/classic/views/event.css
+++ b/web/skins/classic/css/classic/views/event.css
@@ -1,3 +1,20 @@
+.alarmCue {
+    background-color: #222222;
+    height: 1.5em;
+    text-align: left;
+    margin: 0 auto 0 auto;
+}
+
+.alarmCue span {
+    background-color:red;
+    height: 1.5em;
+    display: inline-block;
+}
+
+span.noneCue {
+    background: none;
+}
+
 #dataBar {
     width: 100%;
     margin: 2px auto;
@@ -13,6 +30,10 @@
     padding: 2px;
 }
 
+#eventVideo {
+   display: inline-block;
+}
+
 #menuBar1 {
     width: 100%;
     padding: 3px 0;
diff --git a/web/skins/classic/css/dark/views/event.css b/web/skins/classic/css/dark/views/event.css
index 13ac0cc0b..02209d528 100644
--- a/web/skins/classic/css/dark/views/event.css
+++ b/web/skins/classic/css/dark/views/event.css
@@ -1,3 +1,24 @@
+.alarmCue {
+    background-color: #222222;
+    height: 1.5em;
+    text-align: left;
+    margin: 0 auto 0 auto;
+}
+
+.alarmCue span {
+    background-color:red;
+    height: 1.5em;
+    display: inline-block;
+}
+
+span.noneCue {
+    background: none;
+}
+
+#eventVideo {
+    display: inline-block;
+}
+
 #dataBar {
     width: 100%;
     margin: 2px auto;
@@ -233,6 +254,10 @@
     background: #dddddd;
 }
 
+#eventVideo {
+display: inline-block;
+}
+
 #thumbsKnob {
     width: 8px;
     height: 10px;
diff --git a/web/skins/classic/css/flat/views/event.css b/web/skins/classic/css/flat/views/event.css
index a41c56a38..3d03f199c 100644
--- a/web/skins/classic/css/flat/views/event.css
+++ b/web/skins/classic/css/flat/views/event.css
@@ -1,3 +1,20 @@
+.alarmCue {
+    background-color: #222222;
+    height: 1.5em;
+    text-align: left;
+    margin: 0 auto 0 auto;
+}
+
+.alarmCue span {
+    background-color:red;
+    height: 1.5em;
+    display: inline-block;
+}
+
+span.noneCue {
+    background: none;
+}
+
 #dataBar {
     width: 100%;
     margin: 2px auto;
@@ -254,7 +271,7 @@
     background-color: #444444;
 }
 #eventVideo {
-    position: relative;
+    display: inline-block;
 }
 
 #video-controls {
diff --git a/web/skins/classic/includes/functions.php b/web/skins/classic/includes/functions.php
index 67e5c645c..854b36401 100644
--- a/web/skins/classic/includes/functions.php
+++ b/web/skins/classic/includes/functions.php
@@ -94,6 +94,7 @@ function xhtmlHeaders( $file, $title ) {
   } else if ( $title == 'Event' ) {
 ?>
   <link href="skins/<?php echo $skin ?>/js/video-js.css" rel="stylesheet">
+  <link href="skins/<?php echo $skin ?>/js/video-js-skin.css" rel="stylesheet">
   <script src="skins/<?php echo $skin ?>/js/video.js"></script>
   <script src="./js/videojs.zoomrotate.js"></script>
   <script src="skins/<?php echo $skin ?>/js/moment.min.js"></script>
diff --git a/web/skins/classic/js/video-js-skin.css b/web/skins/classic/js/video-js-skin.css
new file mode 100644
index 000000000..447c22c44
--- /dev/null
+++ b/web/skins/classic/js/video-js-skin.css
@@ -0,0 +1,56 @@
+.vjs-tt-cue {
+  margin-bottom: .75em;
+}
+
+.vjs-menu {
+  z-index: 5;
+}
+
+.vjs-default-skin .vjs-playback-rate.vjs-menu-button .vjs-menu .vjs-menu-content {
+  width: 5em;
+}
+
+.vjs-default-skin.vjs-user-inactive:hover .vjs-progress-control {
+  font-size: .3em;
+}
+
+.vjs-default-skin.vjs-has-started.vjs-user-inactive.vjs-playing .vjs-control-bar.vjs-zm {
+  visibility: visible;
+  opacity: 1;
+  bottom: -2em;
+  -webkit-transition: all .2s;
+  -moz-transition: all .2s;
+  -o-transition: all .2s;
+  transition: all .2s
+}
+
+.vjs-default-skin.vjs-has-started.vjs-user-inactive.vjs-playing .vjs-control,
+.vjs-default-skin.vjs-has-started.vjs-user-inactive.vjs-playing .vjs-time-divider {
+  display: none;
+}
+
+.vjs-default-skin .vjs-progress-holder .vjs-play-progress, .vjs-default-skin .vjs-progress-holder .vjs-load-progress {
+  height: 1em;
+}
+
+.vjs-progress-holder.vjs-slider {
+  background-color: transparent;
+  z-index: 1;
+}
+
+.vjs-progress-control.vjs-control {
+  background-color: rgba(7, 20, 30, 0.8);
+  height: 1.3em;
+  top: -1.3em;
+  display: block !important;
+}
+
+.vjs-control div.alarmCue {
+  position: relative;
+  top: -1.3em;
+  background: none;
+}
+
+.vjs-control .alarmCue {
+  height: 1.3em;
+}

From 398600d5f20ba262b10242489db6d267950f5bd4 Mon Sep 17 00:00:00 2001
From: digital-gnome <31593470+digital-gnome@users.noreply.github.com>
Date: Tue, 3 Oct 2017 19:28:28 -0400
Subject: [PATCH 3/4] Placement for alarmCues

---
 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 e0b97e768..2fd52728f 100644
--- a/web/skins/classic/views/event.php
+++ b/web/skins/classic/views/event.php
@@ -208,6 +208,7 @@ if ( ZM_WEB_STREAM_METHOD == 'mpeg' && ZM_MPEG_LIVE_FORMAT ) {
            <div class="progressBox" id="progressBox<?php echo $i ?>" title=""></div>
 <?php } ?>
         </div><!--progressBar-->
+        <div id="alarmCueJpeg" class="alarmCue" style="width: <?php echo reScale($Event->Width(), $scale);?>px;"><?php renderAlarmCues ();?></div>
       </div><!--imageFeed-->
       </div>
 <?php 
@@ -252,5 +253,11 @@ if ( ZM_WEB_STREAM_METHOD == 'mpeg' && ZM_MPEG_LIVE_FORMAT ) {
 } // end if Event exists
 ?>
   </div><!--page-->
+<!-- Alarm Cues on video.  -->
+<script type="text/javascript">
+  alarmHtml = '<div class="alarmCue">' + alarmHtml + '</div>'
+  $j(".vjs-progress-control").append(alarmHtml);
+  $j(".vjs-control-bar").addClass("vjs-zm");
+</script>
 </body>
 </html>

From e23b4a0d5dfa45b84e233dfdcc9af99ecde88b55 Mon Sep 17 00:00:00 2001
From: digital-gnome <31593470+digital-gnome@users.noreply.github.com>
Date: Sat, 7 Oct 2017 11:56:15 -0400
Subject: [PATCH 4/4] Fix event path

---
 web/ajax/status.php        | 4 ++--
 web/includes/functions.php | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/web/ajax/status.php b/web/ajax/status.php
index ab5d61050..ed185d918 100644
--- a/web/ajax/status.php
+++ b/web/ajax/status.php
@@ -390,8 +390,8 @@ function getNearEvents() {
   $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));
+  $result['PrevEventDefVideoPath'] = empty($prevEvent)?0:(getEventDefaultVideoPath($prevEvent['Id']));
+  $result['NextEventDefVideoPath'] = empty($nextEvent)?0:(getEventDefaultVideoPath($nextEvent['Id']));
   return( $result );
 }
 
diff --git a/web/includes/functions.php b/web/includes/functions.php
index 6b8ee47dc..aa3f3124d 100644
--- a/web/includes/functions.php
+++ b/web/includes/functions.php
@@ -471,7 +471,7 @@ function getEventPath( $event ) {
 
 function getEventDefaultVideoPath( $event ) {
   $Event = new Event( $event );
-  return $Event->getStreamSrc( array( "mode=mpeg&format=h264" ) );
+  return $Event->getStreamSrc( array( "mode"=>"mpeg", "format"=>"h264" ) );
   //$Event->Path().'/'.$event['DefaultVideo'];
 }