merge code to load video.js etc on Event view
This commit is contained in:
Isaac Connor
parent
5500d7bbc0
commit
f851daca68
|
|
@ -50,6 +50,7 @@ require_once( 'includes/config.php' );
|
|||
require_once( 'includes/logger.php' );
|
||||
require_once( 'includes/Server.php' );
|
||||
require_once( 'includes/Storage.php' );
|
||||
require_once( 'includes/Event.php' );
|
||||
require_once( 'includes/Monitor.php' );
|
||||
|
||||
if ( isset($_SERVER["HTTPS"]) && $_SERVER["HTTPS"] == 'on' )
|
||||
|
|
|
|||
|
|
@ -24,6 +24,7 @@ $new_views = array('login');
|
|||
function xhtmlHeaders( $file, $title )
|
||||
{
|
||||
global $css;
|
||||
global $skin;
|
||||
$skinCssFile = getSkinFile( 'css/'.$css.'/skin.css' );
|
||||
$skinCssPhpFile = getSkinFile( 'css/'.$css.'/skin.css.php' );
|
||||
|
||||
|
|
@ -44,7 +45,7 @@ function xhtmlHeaders( $file, $title )
|
|||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maxiumum-scale=1.0, user-scalable=no">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">
|
||||
<title><?php echo ZM_WEB_TITLE_PREFIX ?> - <?php echo validHtmlStr($title) ?></title>
|
||||
<link rel="icon" type="image/ico" href="graphics/favicon.ico"/>
|
||||
<link rel="shortcut icon" href="graphics/favicon.ico"/>
|
||||
|
|
@ -81,6 +82,12 @@ function xhtmlHeaders( $file, $title )
|
|||
<script type="text/javascript" src="js/overlay.js"></script>
|
||||
<?php if ( $title == 'Login' && (defined('ZM_OPT_USE_GOOG_RECAPTCHA') && ZM_OPT_USE_GOOG_RECAPTCHA) ) { ?>
|
||||
<script src='https://www.google.com/recaptcha/api.js'></script>
|
||||
<?php } else if ( $title == 'Event' ) {
|
||||
?>
|
||||
<link href="skins/<?php echo $skin ?>/js/video-js.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>
|
||||
<?php }
|
||||
if ( $skinJsPhpFile )
|
||||
{
|
||||
|
|
|
|||
|
|
@ -18,36 +18,35 @@
|
|||
// Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA.
|
||||
//
|
||||
|
||||
if ( !canView( 'Events' ) )
|
||||
{
|
||||
$view = "error";
|
||||
if ( !canView( 'Events' ) ) {
|
||||
$view = 'error';
|
||||
return;
|
||||
}
|
||||
|
||||
$eid = validInt( $_REQUEST['eid'] );
|
||||
$fid = !empty($_REQUEST['fid'])?validInt($_REQUEST['fid']):1;
|
||||
|
||||
$sql = 'SELECT E.*,M.Name AS MonitorName,E.Width,E.Height,M.DefaultRate,M.DefaultScale,M.VideoWriter,M.SaveJPEGs,M.Orientation,M.LabelFormat FROM Events AS E INNER JOIN Monitors AS M ON E.MonitorId = M.Id WHERE E.Id = ?';
|
||||
$sql_values = array( $eid );
|
||||
|
||||
$Event = new Event( $eid );
|
||||
$Monitor = $Event->Monitor();
|
||||
if ( $user['MonitorIds'] ) {
|
||||
$monitor_ids = explode( ',', $user['MonitorIds'] );
|
||||
$sql .= ' AND MonitorId IN (' .implode( ',', array_fill(0,count($monitor_ids),'?') ) . ')';
|
||||
$sql_values = array_merge( $sql_values, $monitor_ids );
|
||||
$monitor_ids = explode( ',', $user['MonitorIds'] );
|
||||
if ( count($monitor_ids) and ! in_array( $Event->MonitorId(), $monitor_ids ) ) {
|
||||
$view = 'error';
|
||||
return;
|
||||
}
|
||||
}
|
||||
$event = dbFetchOne( $sql, NULL, $sql_values );
|
||||
|
||||
if ( isset( $_REQUEST['rate'] ) )
|
||||
$rate = validInt($_REQUEST['rate']);
|
||||
else
|
||||
$rate = reScale( RATE_BASE, $event['DefaultRate'], ZM_WEB_DEFAULT_RATE );
|
||||
$rate = reScale( RATE_BASE, $Monitor->DefaultRate(), ZM_WEB_DEFAULT_RATE );
|
||||
|
||||
if ( isset( $_REQUEST['scale'] ) ) {
|
||||
$scale = validInt($_REQUEST['scale']);
|
||||
} else if ( isset( $_COOKIE['zmEventScale'.$event['MonitorId']] ) ) {
|
||||
$scale = $_COOKIE['zmEventScale'.$event['MonitorId']];
|
||||
} else if ( isset( $_COOKIE['zmEventScale'.$Event->MonitorId()] ) ) {
|
||||
$scale = $_COOKIE['zmEventScale'.$Event->MonitorId()];
|
||||
} else {
|
||||
$scale = reScale( SCALE_BASE, $event['DefaultScale'], ZM_WEB_DEFAULT_SCALE );
|
||||
$scale = reScale( SCALE_BASE, $Monitor->DefaultScale(), ZM_WEB_DEFAULT_SCALE );
|
||||
}
|
||||
|
||||
$replayModes = array(
|
||||
|
|
@ -73,10 +72,11 @@ else {
|
|||
// videojs zoomrotate only when direct recording
|
||||
$Zoom = 1;
|
||||
$Rotation = 0;
|
||||
if ( $event['VideoWriter'] == "2" ) {
|
||||
$Rotation = $event['Orientation'];
|
||||
if ( in_array($event['Orientation'],array("90","270")))
|
||||
$Zoom = $event['Height']/$event['Width'];
|
||||
if ( $Monitor->VideoWriter() == '2' ) {
|
||||
# Passthrough
|
||||
$Rotation = $Event->Orientation();
|
||||
if ( in_array($Event->Orientation(),array('90','270')) )
|
||||
$Zoom = $Event->Height()/$Event->Width();
|
||||
}
|
||||
|
||||
parseSort();
|
||||
|
|
@ -84,7 +84,7 @@ parseFilter( $_REQUEST['filter'] );
|
|||
$filterQuery = $_REQUEST['filter']['query'];
|
||||
|
||||
$panelSections = 40;
|
||||
$panelSectionWidth = (int)ceil(reScale($event['Width'],$scale)/$panelSections);
|
||||
$panelSectionWidth = (int)ceil(reScale($Event->Width(),$scale)/$panelSections);
|
||||
$panelWidth = ($panelSections*$panelSectionWidth-1);
|
||||
|
||||
$connkey = generateConnKey();
|
||||
|
|
@ -96,110 +96,101 @@ xhtmlHeaders(__FILE__, translate('Event') );
|
|||
<body>
|
||||
<div id="page">
|
||||
<div id="content">
|
||||
<?php
|
||||
if ( ! $Event->Id() ) {
|
||||
echo 'Event was not found.';
|
||||
} else {
|
||||
?>
|
||||
<div id="dataBar">
|
||||
<table id="dataTable" class="major" cellspacing="0">
|
||||
<tr>
|
||||
<td><span id="dataId" title="<?php echo translate('Id') ?>"><?php echo $event['Id'] ?></span></td>
|
||||
<td><span id="dataCause" title="<?php echo $event['Notes']?validHtmlStr($event['Notes']):translate('AttrCause') ?>"><?php echo validHtmlStr($event['Cause']) ?></span></td>
|
||||
<td><span id="dataTime" title="<?php echo translate('Time') ?>"><?php echo strftime( STRF_FMT_DATETIME_SHORT, strtotime($event['StartTime'] ) ) ?></span></td>
|
||||
<td><span id="dataDuration" title="<?php echo translate('Duration') ?>"><?php echo $event['Length'] ?></span>s</td>
|
||||
<td><span id="dataFrames" title="<?php echo translate('AttrFrames')."/".translate('AttrAlarmFrames') ?>"><?php echo $event['Frames'] ?>/<?php echo $event['AlarmFrames'] ?></span></td>
|
||||
<td><span id="dataScore" title="<?php echo translate('AttrTotalScore')."/".translate('AttrAvgScore')."/".translate('AttrMaxScore') ?>"><?php echo $event['TotScore'] ?>/<?php echo $event['AvgScore'] ?>/<?php echo $event['MaxScore'] ?></span></td>
|
||||
<td><span id="dataId" title="<?php echo translate('Id') ?>"><?php echo $Event->Id() ?></span></td>
|
||||
<td><span id="dataCause" title="<?php echo $Event->Notes()?validHtmlStr($Event->Notes()):translate('AttrCause') ?>"><?php echo validHtmlStr($Event->Cause()) ?></span></td>
|
||||
<td><span id="dataTime" title="<?php echo translate('Time') ?>"><?php echo strftime( STRF_FMT_DATETIME_SHORT, strtotime($Event->StartTime() ) ) ?></span></td>
|
||||
<td><span id="dataDuration" title="<?php echo translate('Duration') ?>"><?php echo $Event->Length() ?></span>s</td>
|
||||
<td><span id="dataFrames" title="<?php echo translate('AttrFrames')."/".translate('AttrAlarmFrames') ?>"><?php echo $Event->Frames() ?>/<?php echo $Event->AlarmFrames() ?></span></td>
|
||||
<td><span id="dataScore" title="<?php echo translate('AttrTotalScore')."/".translate('AttrAvgScore')."/".translate('AttrMaxScore') ?>"><?php echo $Event->TotScore() ?>/<?php echo $Event->AvgScore() ?>/<?php echo $Event->MaxScore() ?></span></td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
<div id="menuBar1">
|
||||
<div id="scaleControl"><label for="scale"><?php echo translate('Scale') ?></label><?php echo buildSelect( "scale", $scales, "changeScale();" ); ?></div>
|
||||
<div id="replayControl"><label for="replayMode"><?php echo translate('Replay') ?></label><?php echo buildSelect( "replayMode", $replayModes, "changeReplayMode();" ); ?></div>
|
||||
<div id="nameControl"><input type="text" id="eventName" name="eventName" value="<?php echo validHtmlStr($event['Name']) ?>" size="16"/><input type="button" value="<?php echo translate('Rename') ?>" onclick="renameEvent()"<?php if ( !canEdit( 'Events' ) ) { ?> disabled="disabled"<?php } ?>/></div>
|
||||
<div id="nameControl"><input type="text" id="eventName" name="eventName" value="<?php echo validHtmlStr($Event->Name()) ?>" size="16"/><input type="button" value="<?php echo translate('Rename') ?>" onclick="renameEvent()"<?php if ( !canEdit( 'Events' ) ) { ?> disabled="disabled"<?php } ?>/></div>
|
||||
</div>
|
||||
<div id="menuBar2">
|
||||
<div id="closeWindow"><a href="#" onclick="closeWindow();"><?php echo translate('Close') ?></a></div>
|
||||
<?php
|
||||
if ( canEdit( 'Events' ) )
|
||||
{
|
||||
if ( canEdit( 'Events' ) ) {
|
||||
?>
|
||||
<div id="deleteEvent"><a href="#" onclick="deleteEvent()"><?php echo translate('Delete') ?></a></div>
|
||||
<div id="editEvent"><a href="#" onclick="editEvent()"><?php echo translate('Edit') ?></a></div>
|
||||
<div id="archiveEvent" class="hidden"><a href="#" onclick="archiveEvent()"><?php echo translate('Archive') ?></a></div>
|
||||
<div id="unarchiveEvent" class="hidden"><a href="#" onclick="unarchiveEvent()"><?php echo translate('Unarchive') ?></a></div>
|
||||
<?php if ( $Event->DefaultVideo() ) { ?>
|
||||
<div id="downloadEventFile"><a href="<?php echo $Event->getStreamSrc()?>">Download MP4</a></div>
|
||||
<?php
|
||||
}
|
||||
if ( canView( 'Events' ) )
|
||||
{
|
||||
} // end if Event->DefaultVideo
|
||||
} // end if can edit Events
|
||||
if ( canView( 'Events' ) ) {
|
||||
?>
|
||||
<div id="framesEvent"><a href="#" onclick="showEventFrames()"><?php echo translate('Frames') ?></a></div>
|
||||
<?php
|
||||
if ( $event['SaveJPEGs'] & 3 )
|
||||
{
|
||||
if ( $Event->SaveJPEGs() & 3 ) { // Analysis or Jpegs
|
||||
?>
|
||||
<div id="stillsEvent"<?php if ( $streamMode == 'still' ) { ?> class="hidden"<?php } ?>><a href="#" onclick="showStills()"><?php echo translate('Stills') ?></a></div>
|
||||
<?php
|
||||
}
|
||||
} // has frames or analysis
|
||||
?>
|
||||
<div id="videoEvent"<?php if ( $streamMode == 'video' ) { ?> class="hidden"<?php } ?>><a href="#" onclick="showVideo()"><?php echo translate('Video') ?></a></div>
|
||||
<div id="exportEvent"><a href="#" onclick="exportEvent()"><?php echo translate('Export') ?></a></div>
|
||||
<div id="videoEvent"><a href="#" onclick="videoEvent();"><?php echo translate('Video') ?></a></div>
|
||||
<div id="exportEvent"><a href="#" onclick="exportEvent();"><?php echo translate('Export') ?></a></div>
|
||||
</div>
|
||||
<div id="eventVideo" class="">
|
||||
<?php
|
||||
if ( $event['DefaultVideo'] )
|
||||
{
|
||||
if ( $Event->DefaultVideo() ) {
|
||||
?>
|
||||
<div id="videoFeed">
|
||||
<video id="videoobj" class="video-js vjs-default-skin" width="<?php echo reScale( $event['Width'], $scale ) ?>" height="<?php echo reScale( $event['Height'], $scale ) ?>" data-setup='{ "controls": true, "playbackRates": [0.5, 1, 1.5, 2, 4, 8, 16, 32, 64, 128, 256], "autoplay": true, "preload": "auto", "plugins": { "zoomrotate": { "rotate": "<?php echo $Rotation ?>", "zoom": "<?php echo $Zoom ?>"}}}'>
|
||||
<source src="<?php echo getEventDefaultVideoPath($event) ?>" type="video/mp4">
|
||||
<video id="videoobj" class="video-js vjs-default-skin" width="<?php echo reScale( $Event->Width(), $scale ) ?>" height="<?php echo reScale( $Event->Height(), $scale ) ?>" data-setup='{ "controls": true, "playbackRates": [0.5, 1, 1.5, 2, 4, 8, 16, 32, 64, 128, 256], "autoplay": true, "preload": "auto", "plugins": { "zoomrotate": { "zoom": "<?php echo $Zoom ?>"}}}'>
|
||||
<source src="<?php echo $Event->getStreamSrc( array( "mode=mpeg&format=h264" ) ); ?>" type="video/mp4">
|
||||
Your browser does not support the video tag.
|
||||
</video>
|
||||
</div>
|
||||
<!--script>includeVideoJs();</script-->
|
||||
<link href="//vjs.zencdn.net/4.11/video-js.css" rel="stylesheet">
|
||||
<script src="//vjs.zencdn.net/4.11/video.js"></script>
|
||||
<script src="./js/videojs.zoomrotate.js"></script>
|
||||
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.min.js"></script>
|
||||
<script>
|
||||
var LabelFormat = "<?php echo validJsStr($event['LabelFormat'])?>";
|
||||
var monitorName = "<?php echo validJsStr($event['MonitorName'])?>";
|
||||
var duration = <?php echo $event['Length'] ?>, startTime = '<?php echo $event['StartTime'] ?>';
|
||||
|
||||
addVideoTimingTrack(document.getElementById('videoobj'), LabelFormat, monitorName, duration, startTime);
|
||||
</script>
|
||||
<!--script>includeVideoJs();</script-->
|
||||
<script>
|
||||
var LabelFormat = "<?php echo validJsStr($Monitor->LabelFormat())?>";
|
||||
var monitorName = "<?php echo validJsStr($Monitor->Name())?>";
|
||||
var duration = <?php echo $Event->Length() ?>, startTime = '<?php echo $Event->StartTime() ?>';
|
||||
|
||||
addVideoTimingTrack(document.getElementById('videoobj'), LabelFormat, monitorName, duration, startTime);
|
||||
</script>
|
||||
<?php
|
||||
}
|
||||
else
|
||||
{
|
||||
} // end if DefaultVideo
|
||||
?>
|
||||
<div id="imageFeed">
|
||||
<div id="imageFeed" <?php if ( $Event->DefaultVideo() ) { ?>class="hidden"<?php } ?> >
|
||||
<?php
|
||||
if ( ZM_WEB_STREAM_METHOD == 'mpeg' && ZM_MPEG_LIVE_FORMAT )
|
||||
{
|
||||
if ( ZM_WEB_STREAM_METHOD == 'mpeg' && ZM_MPEG_LIVE_FORMAT ) {
|
||||
$streamSrc = getStreamSrc( array( "source=event", "mode=mpeg", "event=".$eid, "frame=".$fid, "scale=".$scale, "rate=".$rate, "bitrate=".ZM_WEB_VIDEO_BITRATE, "maxfps=".ZM_WEB_VIDEO_MAXFPS, "format=".ZM_MPEG_REPLAY_FORMAT, "replay=".$replayMode ) );
|
||||
outputVideoStream( "evtStream", $streamSrc, reScale( $event['Width'], $scale ), reScale( $event['Height'], $scale ), ZM_MPEG_LIVE_FORMAT );
|
||||
}
|
||||
else
|
||||
{
|
||||
outputVideoStream( "evtStream", $streamSrc, reScale( $Event->Width(), $scale ), reScale( $Event->Height(), $scale ), ZM_MPEG_LIVE_FORMAT );
|
||||
} else {
|
||||
$streamSrc = getStreamSrc( array( "source=event", "mode=jpeg", "event=".$eid, "frame=".$fid, "scale=".$scale, "rate=".$rate, "maxfps=".ZM_WEB_VIDEO_MAXFPS, "replay=".$replayMode) );
|
||||
if ( canStreamNative() )
|
||||
{
|
||||
outputImageStream( "evtStream", $streamSrc, reScale( $event['Width'], $scale ), reScale( $event['Height'], $scale ), validHtmlStr($event['Name']) );
|
||||
if ( canStreamNative() ) {
|
||||
outputImageStream( "evtStream", $streamSrc, reScale( $Event->Width(), $scale ), reScale( $Event->Height(), $scale ), validHtmlStr($Event->Name()) );
|
||||
} else {
|
||||
outputHelperStream( "evtStream", $streamSrc, reScale( $Event->Width(), $scale ), reScale( $Event->Height(), $scale ) );
|
||||
}
|
||||
else
|
||||
{
|
||||
outputHelperStream( "evtStream", $streamSrc, reScale( $event['Width'], $scale ), reScale( $event['Height'], $scale ) );
|
||||
}
|
||||
}
|
||||
} // end if stream method
|
||||
?>
|
||||
</div>
|
||||
<p id="dvrControls">
|
||||
<input type="button" value="<+" id="prevBtn" title="<?php echo translate('Prev') ?>" class="inactive" onclick="streamPrev( true )"/>
|
||||
<input type="button" value="<<" id="fastRevBtn" title="<?php echo translate('Rewind') ?>" class="inactive" disabled="disabled" onclick="streamFastRev( true )"/>
|
||||
<input type="button" value="<" id="slowRevBtn" title="<?php echo translate('StepBack') ?>" class="unavail" disabled="disabled" onclick="streamSlowRev( true )"/>
|
||||
<input type="button" value="||" id="pauseBtn" title="<?php echo translate('Pause') ?>" class="inactive" onclick="streamPause( true )"/>
|
||||
<input type="button" value="|>" id="playBtn" title="<?php echo translate('Play') ?>" class="active" disabled="disabled" onclick="streamPlay( true )"/>
|
||||
<input type="button" value=">" id="slowFwdBtn" title="<?php echo translate('StepForward') ?>" class="unavail" disabled="disabled" onclick="streamSlowFwd( true )"/>
|
||||
<input type="button" value=">>" id="fastFwdBtn" title="<?php echo translate('FastForward') ?>" class="inactive" disabled="disabled" onclick="streamFastFwd( true )"/>
|
||||
<input type="button" value="–" id="zoomOutBtn" title="<?php echo translate('ZoomOut') ?>" class="avail" onclick="streamZoomOut()"/>
|
||||
<input type="button" value="+>" id="nextBtn" title="<?php echo translate('Next') ?>" class="inactive" onclick="streamNext( true )"/>
|
||||
<input type="button" value="<+" id="prevBtn" title="<?php echo translate('Prev') ?>" class="inactive" onclick="streamPrev( true );"/>
|
||||
<input type="button" value="<<" id="fastRevBtn" title="<?php echo translate('Rewind') ?>" class="inactive" disabled="disabled" onclick="streamFastRev( true );"/>
|
||||
<input type="button" value="<" id="slowRevBtn" title="<?php echo translate('StepBack') ?>" class="unavail" disabled="disabled" onclick="streamSlowRev( true );"/>
|
||||
<input type="button" value="||" id="pauseBtn" title="<?php echo translate('Pause') ?>" class="inactive" onclick="streamPause( true );"/>
|
||||
<input type="button" value="|>" id="playBtn" title="<?php echo translate('Play') ?>" class="active" disabled="disabled" onclick="streamPlay( true );"/>
|
||||
<input type="button" value=">" id="slowFwdBtn" title="<?php echo translate('StepForward') ?>" class="unavail" disabled="disabled" onclick="streamSlowFwd( true );"/>
|
||||
<input type="button" value=">>" id="fastFwdBtn" title="<?php echo translate('FastForward') ?>" class="inactive" disabled="disabled" onclick="streamFastFwd( true );"/>
|
||||
<input type="button" value="–" id="zoomOutBtn" title="<?php echo translate('ZoomOut') ?>" class="avail" onclick="streamZoomOut();"/>
|
||||
<input type="button" value="+>" id="nextBtn" title="<?php echo translate('Next') ?>" class="inactive" onclick="streamNext( true );"/>
|
||||
</p>
|
||||
<div id="replayStatus">
|
||||
<span id="mode"><?php echo translate('Mode') ?>: <span id="modeValue"> </span></span>
|
||||
|
|
@ -208,23 +199,14 @@ else
|
|||
<span id="zoom"><?php echo translate('Zoom') ?>: <span id="zoomValue"></span>x</span>
|
||||
</div>
|
||||
<div id="progressBar" class="invisible">
|
||||
<?php
|
||||
for ( $i = 0; $i < $panelSections; $i++ )
|
||||
{
|
||||
?>
|
||||
<?php for ( $i = 0; $i < $panelSections; $i++ ) { ?>
|
||||
<div class="progressBox" id="progressBox<?php echo $i ?>" title=""></div>
|
||||
<?php
|
||||
}
|
||||
?>
|
||||
<?php } ?>
|
||||
</div>
|
||||
<?php
|
||||
}
|
||||
?>
|
||||
</div>
|
||||
</div>
|
||||
<?php
|
||||
if ($event['SaveJPEGs'] & 3)
|
||||
{
|
||||
<?php
|
||||
if ($Event->SaveJPEGs() & 3) { // frames or analysis
|
||||
?>
|
||||
<div id="eventStills" class="hidden">
|
||||
<div id="eventThumbsPanel">
|
||||
|
|
@ -261,9 +243,10 @@ if ($event['SaveJPEGs'] & 3)
|
|||
</div>
|
||||
</div>
|
||||
<?php
|
||||
}
|
||||
}
|
||||
} // end if SaveJPEGs() & 3 Analysis or Jpegs
|
||||
} // end if canView
|
||||
} // end if Event exists
|
||||
?>
|
||||
</div>
|
||||
</div><!--page-->
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,10 @@
|
|||
var vid = null;
|
||||
|
||||
function setButtonState( element, butClass ) {
|
||||
element.className = butClass;
|
||||
element.disabled = (butClass != 'inactive');
|
||||
if ( element ) {
|
||||
element.className = butClass;
|
||||
element.disabled = (butClass != 'inactive');
|
||||
}
|
||||
}
|
||||
|
||||
function changeScale() {
|
||||
|
|
@ -10,16 +14,16 @@ function changeScale() {
|
|||
var newWidth = ( baseWidth * scale ) / SCALE_BASE;
|
||||
var newHeight = ( baseHeight * scale ) / SCALE_BASE;
|
||||
|
||||
if(vid) {
|
||||
if ( vid ) {
|
||||
// Using video.js
|
||||
vid.width = newWidth;
|
||||
vid.height = newHeight;
|
||||
} else {
|
||||
streamScale( scale );
|
||||
var streamImg = document.getElementById('evtStream');
|
||||
streamImg.style.width = newWidth + "px";
|
||||
streamImg.style.height = newHeight + "px";
|
||||
Cookie.write( 'zmEventScale'+eventData.MonitorId, scale, { duration: 10*365 } );
|
||||
/*Stream could be an applet so can't use moo tools*/
|
||||
var streamImg = document.getElementById('evtStream');
|
||||
streamImg.style.width = newWidth + "px";
|
||||
streamImg.style.height = newHeight + "px";
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -70,10 +74,17 @@ function getCmdResponse( respObj, respText ) {
|
|||
|
||||
updateProgressBar();
|
||||
|
||||
if ( streamStatus.auth ) {
|
||||
// Try to reload the image stream.
|
||||
var streamImg = document.getElementById('evtStream');
|
||||
if ( streamImg )
|
||||
streamImg.src = streamImg.src.replace( /auth=\w+/i, 'auth='+streamStatus.auth );
|
||||
} // end if haev a new auth hash
|
||||
|
||||
streamCmdTimer = streamQuery.delay( streamTimeout );
|
||||
}
|
||||
|
||||
var streamReq = new Request.JSON( { url: thisUrl, method: 'post', timeout: AJAX_TIMEOUT, link: 'chain', onSuccess: getCmdResponse } );
|
||||
var streamReq = new Request.JSON( { url: thisUrl, method: 'get', timeout: AJAX_TIMEOUT, link: 'chain', onSuccess: getCmdResponse } );
|
||||
|
||||
function streamPause( action ) {
|
||||
setButtonState( $('pauseBtn'), 'active' );
|
||||
|
|
@ -182,7 +193,9 @@ function getEventResponse( respObj, respText ) {
|
|||
return;
|
||||
|
||||
eventData = respObj.event;
|
||||
if ( !$('eventStills').hasClass( 'hidden' ) && currEventId != eventData.Id )
|
||||
var eventStills = $('eventStills');
|
||||
|
||||
if ( eventStills && !$('eventStills').hasClass( 'hidden' ) && currEventId != eventData.Id )
|
||||
resetEventStills();
|
||||
currEventId = eventData.Id;
|
||||
|
||||
|
|
@ -214,7 +227,7 @@ function getEventResponse( respObj, respText ) {
|
|||
nearEventsQuery( eventData.Id );
|
||||
}
|
||||
|
||||
var eventReq = new Request.JSON( { url: thisUrl, method: 'post', timeout: AJAX_TIMEOUT, link: 'cancel', onSuccess: getEventResponse } );
|
||||
var eventReq = new Request.JSON( { url: thisUrl, method: 'get', timeout: AJAX_TIMEOUT, link: 'cancel', onSuccess: getEventResponse } );
|
||||
|
||||
function eventQuery( eventId ) {
|
||||
var eventParms = "view=request&request=status&entity=event&id="+eventId;
|
||||
|
|
@ -234,11 +247,13 @@ function getNearEventsResponse( respObj, respText ) {
|
|||
PrevEventDefVideoPath = respObj.nearevents.PrevEventDefVideoPath;
|
||||
NextEventDefVideoPath = respObj.nearevents.NextEventDefVideoPath;
|
||||
|
||||
$('prevEventBtn').disabled = !prevEventId;
|
||||
$('nextEventBtn').disabled = !nextEventId;
|
||||
var prevEventBtn = $('prevEventBtn');
|
||||
if ( prevEventBtn ) prevEventBtn.disabled = !prevEventId;
|
||||
var nextEventBtn = $('nextEventBtn');
|
||||
if ( nextEventBtn ) nextEventBtn.disabled = !nextEventId;
|
||||
}
|
||||
|
||||
var nearEventsReq = new Request.JSON( { url: thisUrl, method: 'post', timeout: AJAX_TIMEOUT, link: 'cancel', onSuccess: getNearEventsResponse } );
|
||||
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;
|
||||
|
|
@ -263,7 +278,7 @@ function loadEventThumb( event, frame, loadImage ) {
|
|||
thumbImg.removeEvents( 'click' );
|
||||
thumbImg.addEvent( 'click', function() { locateImage( frame.FrameId, true ); } );
|
||||
if ( loadImage )
|
||||
loadEventImage( event, frame );
|
||||
loadEventImage( event, frame );
|
||||
} ).pass( loadImage )
|
||||
}
|
||||
);
|
||||
|
|
@ -337,8 +352,12 @@ function loadEventImage( event, frame ) {
|
|||
function hideEventImageComplete() {
|
||||
var eventImg = $('eventImage');
|
||||
var thumbImg = $('eventThumb'+$('eventImage').getProperty( 'alt' ));
|
||||
thumbImg.removeClass('selected');
|
||||
thumbImg.setOpacity( 1.0 );
|
||||
if ( thumbImg ) {
|
||||
thumbImg.removeClass('selected');
|
||||
thumbImg.setOpacity( 1.0 );
|
||||
} else {
|
||||
console.log("Unable to find eventThumb at " + 'eventThumb'+$('eventImage').getProperty( 'alt' ) );
|
||||
}
|
||||
$('prevImageBtn').disabled = true;
|
||||
$('nextImageBtn').disabled = true;
|
||||
$('eventImagePanel').setStyle( 'display', 'none' );
|
||||
|
|
@ -355,7 +374,7 @@ function resetEventStills() {
|
|||
$('eventThumbs').empty();
|
||||
if ( true || !slider ) {
|
||||
slider = new Slider( $('thumbsSlider'), $('thumbsKnob'), {
|
||||
/*steps: eventData.Frames,*/
|
||||
/*steps: eventData.Frames,*/
|
||||
onChange: function( step ) {
|
||||
if ( !step )
|
||||
step = 0;
|
||||
|
|
@ -392,7 +411,7 @@ function getFrameResponse( respObj, respText ) {
|
|||
loadEventThumb( eventData, frame, respObj.loopback=="true" );
|
||||
}
|
||||
|
||||
var frameReq = new Request.JSON( { url: thisUrl, method: 'post', timeout: AJAX_TIMEOUT, link: 'chain', onSuccess: getFrameResponse } );
|
||||
var frameReq = new Request.JSON( { url: thisUrl, method: 'get', timeout: AJAX_TIMEOUT, link: 'chain', onSuccess: getFrameResponse } );
|
||||
|
||||
function frameQuery( eventId, frameId, loadImage ) {
|
||||
var parms = "view=request&request=status&entity=frameimage&id[0]="+eventId+"&id[1]="+frameId+"&loopback="+loadImage;
|
||||
|
|
@ -510,7 +529,7 @@ function getActResponse( respObj, respText ) {
|
|||
eventQuery( eventData.Id );
|
||||
}
|
||||
|
||||
var actReq = new Request.JSON( { url: thisUrl, method: 'post', timeout: AJAX_TIMEOUT, link: 'cancel', onSuccess: getActResponse } );
|
||||
var actReq = new Request.JSON( { url: thisUrl, method: 'get', timeout: AJAX_TIMEOUT, link: 'cancel', onSuccess: getActResponse } );
|
||||
|
||||
function actQuery( action, parms ) {
|
||||
var actParms = "view=request&request=event&id="+eventData.Id+"&action="+action;
|
||||
|
|
@ -551,19 +570,29 @@ function showEventFrames() {
|
|||
|
||||
function showVideo() {
|
||||
$('eventStills').addClass( 'hidden' );
|
||||
$('imageFeed').addClass('hidden');
|
||||
$('eventVideo').removeClass( 'hidden' );
|
||||
|
||||
$('stillsEvent').removeClass( 'hidden' );
|
||||
$('videoEvent').addClass( 'hidden' );
|
||||
|
||||
streamMode = 'video';
|
||||
|
||||
}
|
||||
|
||||
function showStills() {
|
||||
$('eventStills').removeClass( 'hidden' );
|
||||
$('imageFeed').removeClass('hidden');
|
||||
$('eventVideo').addClass( 'hidden' );
|
||||
|
||||
if (vid && ( vid.paused != true ) ) {
|
||||
// Pause the video
|
||||
vid.pause();
|
||||
|
||||
// Update the button text to 'Play'
|
||||
//if ( playButton )
|
||||
//playButton.innerHTML = "Play";
|
||||
}
|
||||
|
||||
$('stillsEvent').addClass( 'hidden' );
|
||||
$('videoEvent').removeClass( 'hidden' );
|
||||
|
||||
|
|
@ -577,7 +606,7 @@ function showStills() {
|
|||
offset: { 'x': 0, 'y': 0 },
|
||||
transition: Fx.Transitions.Quad.easeInOut
|
||||
}
|
||||
);
|
||||
);
|
||||
}
|
||||
resetEventStills();
|
||||
$(window).addEvent( 'resize', updateStillsSizes );
|
||||
|
|
@ -588,6 +617,10 @@ function showFrameStats() {
|
|||
createPopup( '?view=stats&eid='+eventData.Id+'&fid='+fid, 'zmStats', 'stats', eventData.Width, eventData.Height );
|
||||
}
|
||||
|
||||
function videoEvent() {
|
||||
createPopup( '?view=video&eid='+eventData.Id, 'zmVideo', 'video', eventData.Width, eventData.Height );
|
||||
}
|
||||
|
||||
|
||||
function drawProgressBar() {
|
||||
var barWidth = 0;
|
||||
|
|
@ -629,6 +662,8 @@ function updateProgressBar() {
|
|||
} // end if
|
||||
} // end function
|
||||
);
|
||||
$('progressBar').setStyle( 'width', barWidth );
|
||||
$('progressBar').removeClass( 'invisible' );
|
||||
} // end if eventData && streamStatus
|
||||
} // end function updateProgressBar()
|
||||
|
||||
|
|
@ -740,9 +775,12 @@ function setupListener() {
|
|||
|
||||
function initPage() {
|
||||
//FIXME prevent blocking...not sure what is happening or best way to unblock
|
||||
vid=$('videoobj');
|
||||
if (vid) {
|
||||
/*setupListener();
|
||||
if ( $('videoobj') ) {
|
||||
vid = videojs("videoobj");
|
||||
}
|
||||
if ( vid ) {
|
||||
/*
|
||||
setupListener();
|
||||
vid.removeAttribute("controls");
|
||||
/* window.videoobj.oncanplay=null;
|
||||
window.videoobj.currentTime=window.videoobj.currentTime-1;
|
||||
|
|
|
|||
|
|
@ -26,11 +26,11 @@ var SCALE_BASE = <?php echo SCALE_BASE ?>;
|
|||
var connKey = '<?php echo $connkey ?>';
|
||||
|
||||
var eventData = {
|
||||
Id: <?php echo $event['Id'] ?>,
|
||||
MonitorId: <?php echo $event['MonitorId'] ?>,
|
||||
Width: <?php echo $event['Width'] ?>,
|
||||
Height: <?php echo $event['Height'] ?>,
|
||||
Length: <?php echo $event['Length'] ?>
|
||||
Id: '<?php echo $Event->Id() ?>',
|
||||
MonitorId: '<?php echo $Event->MonitorId() ?>',
|
||||
Width: '<?php echo $Event->Width() ?>',
|
||||
Height: '<?php echo $Event->Height() ?>',
|
||||
Length: '<?php echo $Event->Length() ?>'
|
||||
};
|
||||
|
||||
var filterQuery = '<?php echo isset($filterQuery)?validJsStr($filterQuery):'' ?>';
|
||||
|
|
|
|||
Loading…
Reference in New Issue