mirror/zoneminder
1
0
Fork 0
mirror of https://github.com/ZoneMinder/zoneminder.git synced 2026-05-14 01:24:34 -04:00
Code Issues Packages Projects Releases Wiki Activity

Fix eventVideo and content div wrapping properly

Browse Source 
Wrap eventVideo div around both videojs and zms.  Consolidate control buttons/status to common set with default values.
This commit is contained in:
digital-gnome
2017-11-14 23:04:05 -05:00
parent ef6cb42c5f
commit a7b02ea3ba
2 changed files with 15 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
web/skins/classic/views/event.php
View File

@@ -137,9 +137,8 @@ if ( canEdit('Events') ) {
<div id="framesEvent"><a href="#" onclick="showEventFrames()"><?php echo translate('Frames') ?></a></div>
<div id="streamEvent" class="hidden"><a href="#" onclick="showStream()"><?php echo translate('Stream') ?></a></div>
<div id="stillsEvent"><a href="#" onclick="showStills()"><?php echo translate('Stills') ?></a></div>
<?php
if ( $Event->DefaultVideo() ) {
if ( $Event->DefaultVideo() ) {
?>
<div id="downloadEventFile"><a href="<?php echo $Event->getStreamSrc(array('mode'=>'mp4'))?>" download>Download MP4</a></div>
<?php
@@ -151,35 +150,17 @@ if ( canEdit('Events') ) {
?>
<div id="exportEvent"><a href="#" onclick="exportEvent();"><?php echo translate('Export') ?></a></div>
</div>
<div id="eventVideo" class="">
<?php
if ( $Event->DefaultVideo() ) {
?>
<div id="eventVideo" class="">
<div id="videoFeed">
<video id="videoobj" class="video-js vjs-default-skin" style="transform: matrix(1, 0, 0, 1, 0, 0)" width="<?php echo reScale( $Event->Width(), $scale ) ?>" height="<?php echo reScale( $Event->Height(), $scale ) ?>" data-setup='{ "controls": true, "autoplay": true, "preload": "auto", "plugins": { "zoomrotate": { "zoom": "<?php echo $Zoom ?>"}}}'>
<source src="<?php echo $Event->getStreamSrc( array( 'mode'=>'mpeg','format'=>'h264' ) ); ?>" type="video/mp4">
<track id="monitorCaption" kind="captions" label="English" srclang="en" src='data:plain/text;charset=utf-8,"WEBVTT\n\n 00:00:00.000 --> 00:00:01.000 ZoneMinder"' default>
Your browser does not support the video tag.
</video>
</div>
<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" onclick="streamFastRev( true );"/>
<input type="button" value="&lt;" 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="pauseClicked();"/>
<input type="button" value="|>" id="playBtn" title="<?php echo translate('Play') ?>" class="active" disabled="disabled" onclick="playClicked();"/>
<input type="button" value="&gt;" id="slowFwdBtn" title="<?php echo translate('StepForward') ?>" class="unavail" disabled="disabled" onclick="streamSlowFwd( true );"/>
<input type="button" value="&gt;&gt;" id="fastFwdBtn" title="<?php echo translate('FastForward') ?>" class="inactive" onclick="streamFastFwd( true );"/>
<input type="button" value="&ndash;" id="zoomOutBtn" title="<?php echo translate('ZoomOut') ?>" class="unavail" disabled="disabled" onclick="streamZoomOut();"/>
<input type="button" value="+&gt;" 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">Replay</span></span>
<span id="rate"><?php echo translate('Rate') ?>: <span id="rateValue"><?php echo $rate/100 ?></span>x</span>
<span id="progress"><?php echo translate('Progress') ?>: <span id="progressValue">0</span>s</span>
<span id="zoom"><?php echo translate('Zoom') ?>: <span id="zoomValue">1</span>x</span>
</div>
</div><!--eventVideo-->
</div><!--videoFeed-->
<?php
} // end if DefaultVideo
?>
@@ -202,6 +183,8 @@ if ( ZM_WEB_STREAM_METHOD == 'mpeg' && ZM_MPEG_LIVE_FORMAT ) {
<div id="progressBar" style="width: <?php echo reScale($Event->Width(), $scale);?>px;">
<div class="progressBox" id="progressBox" title="" style="width: 0%;"></div>
</div><!--progressBar-->
</div><!--imageFeed-->
<?php } /*end if !DefaultVideo*/ ?>
<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" onclick="streamFastRev( true );"/>
@@ -215,13 +198,11 @@ if ( ZM_WEB_STREAM_METHOD == 'mpeg' && ZM_MPEG_LIVE_FORMAT ) {
</p>
<div id="replayStatus">
<span id="mode"><?php echo translate('Mode') ?>: <span id="modeValue">Replay</span></span>
<span id="rate"><?php echo translate('Rate') ?>: <span id="rateValue"></span>x</span>
<span id="progress"><?php echo translate('Progress') ?>: <span id="progressValue"></span>s</span>
<span id="rate"><?php echo translate('Rate') ?>: <span id="rateValue"><?php echo $rate/100 ?></span>x</span>
<span id="progress"><?php echo translate('Progress') ?>: <span id="progressValue">0</span>s</span>
<span id="zoom"><?php echo translate('Zoom') ?>: <span id="zoomValue">1</span>x</span>
</div>
</div><!--imageFeed-->
</div>
<?php } /*end if !DefaultVideo*/ ?>
</div><!--eventVideo-->
<div id="eventStills" class="hidden">
<div id="eventThumbsPanel">
<div id="eventThumbs">
@@ -259,6 +240,7 @@ if ( ZM_WEB_STREAM_METHOD == 'mpeg' && ZM_MPEG_LIVE_FORMAT ) {
<?php
} // end if Event exists
?>
</div><!--content-->
</div><!--page-->
</body>
</html>

20
web/skins/classic/views/js/event.js
View File

@@ -292,8 +292,8 @@ function playClicked( ) {
if (vid.paused()) {
vid.play();
} else {
vjsPlay();
}
vjsPlay(); //handles fast forward and rewind
}
} else {
streamReq.send( streamParms+"&command="+CMD_PLAY );
streamPlay();
@@ -407,7 +407,7 @@ function streamNext(action) {
$j(".vjsMessage").remove();//This shouldn't happen
if (nextEventId == 0) { //handles deleting last event.
pauseClicked();
let hideContainer = $j( vid ? "#eventVideo" : "#imageFeed");
let hideContainer = $j('#eventVideo');
let hideStream = $j(vid ? "#videoobj" : "#evtStream").height() + (vid ? 0 :$j("#progressBar").height());
hideContainer.prepend('<p class="vjsMessage" style="height: ' + hideStream + 'px; line-height: ' + hideStream + 'px;">No more events</p>');
if (vid == null) zmsBroke = true;
@@ -703,7 +703,7 @@ function resetEventStills() {
} ).set( 0 );
}
if ( $('eventThumbs').getStyle( 'height' ).match( /^\d+/ ) < (parseInt(eventData.Height)+80) )
$('eventThumbs').setStyle( 'height', ($j(vid ? '#videoobj' : 'evtStream').height())+'px' );
$('eventThumbs').setStyle( 'height', ($j(vid ? '#videoobj' : '#evtStream').height())+'px' );
}
function getFrameResponse( respObj, respText ) {
@@ -886,11 +886,7 @@ function showEventFrames() {
function showStream() {
$('eventStills').addClass( 'hidden' );
if (vid) {
$('eventVideo').removeClass( 'hidden' );
} else {
$('imageFeed').removeClass('hidden');
}
$('eventVideo').removeClass( 'hidden' );
$('stillsEvent').removeClass( 'hidden' );
$('streamEvent').addClass( 'hidden' );
@@ -900,11 +896,7 @@ function showStream() {
function showStills() {
$('eventStills').removeClass( 'hidden' );
if (vid) {
$('eventVideo').addClass( 'hidden' );
} else {
$('imageFeed').addClass('hidden');
}
$('eventVideo').addClass( 'hidden' );
if (vid && ( vid.paused != true ) ) {
// Pause the video