Merge branch 'storageareas' of github.com:connortechnology/ZoneMinder into storageareas

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['PrevEventDefVideoPath'] = empty($prevEvent)?0:(getEventDefaultVideoPath($prevEvent['Id']));
-  $result['NextEventDefVideoPath'] = empty($nextEvent)?0:(getEventDefaultVideoPath($nextEvent));
+  $result['NextEventDefVideoPath'] = empty($nextEvent)?0:(getEventDefaultVideoPath($nextEvent['Id']));
   return( $result );
 }
 

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'];
 }
 

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;

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;

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 {

web/skins/classic/includes/functions.php

@@ -101,6 +101,7 @@ if ( file_exists( "skins/$skin/css/$css/graphics/favicon.ico" ) ) {
   } 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>

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;
+}

web/skins/classic/views/event.php

@@ -219,6 +219,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 } /*end if !DefaultVideo*/ ?>
@@ -264,5 +265,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>

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 (); ?>';