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']; } diff --git a/web/skins/classic/css/classic/views/event.css b/web/skins/classic/css/classic/views/event.css index e3c666156..ca80c978c 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 de53a6ab5..01962c146 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 2fae0321d..0f5ffbdd4 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 edacb880f..50d0a7d6c 100644 --- a/web/skins/classic/includes/functions.php +++ b/web/skins/classic/includes/functions.php @@ -101,6 +101,7 @@ if ( file_exists( "skins/$skin/css/$css/graphics/favicon.ico" ) ) { } else if ( $title == 'Event' ) { ?> + 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; +} diff --git a/web/skins/classic/views/event.php b/web/skins/classic/views/event.php index d970a6ffc..1be8c378d 100644 --- a/web/skins/classic/views/event.php +++ b/web/skins/classic/views/event.php @@ -219,6 +219,7 @@ if ( ZM_WEB_STREAM_METHOD == 'mpeg' && ZM_MPEG_LIVE_FORMAT ) {
+
@@ -264,5 +265,11 @@ if ( ZM_WEB_STREAM_METHOD == 'mpeg' && ZM_MPEG_LIVE_FORMAT ) { } // end if Event exists ?> + + diff --git a/web/skins/classic/views/js/event.js.php b/web/skins/classic/views/js/event.js.php index b8dbd8d94..23e6eb827 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 = ; // var deleteString = ""; var causeString = ""; + +// +// AlarmCues +// +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 .= ""; + $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 .= ""; + $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 .= ""; + } + } + echo $alarmHtml; + } +} +?> +var alarmHtml = '';