From a7b02ea3ba05ef84934a2ccbee31bdacf4fe4770 Mon Sep 17 00:00:00 2001
From: digital-gnome <31593470+digital-gnome@users.noreply.github.com>
Date: Tue, 14 Nov 2017 23:04:05 -0500
Subject: [PATCH] Fix eventVideo and content div wrapping properly

Wrap eventVideo div around both videojs and zms.  Consolidate control buttons/status to common set with default values.
---
 web/skins/classic/views/event.php   | 36 ++++++++---------------------
 web/skins/classic/views/js/event.js | 20 +++++-----------
 2 files changed, 15 insertions(+), 41 deletions(-)

diff --git a/web/skins/classic/views/event.php b/web/skins/classic/views/event.php
index da3333470..5d29417f2 100644
--- a/web/skins/classic/views/event.php
+++ b/web/skins/classic/views/event.php
@@ -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>
diff --git a/web/skins/classic/views/js/event.js b/web/skins/classic/views/js/event.js
index 8599cb151..7937b97a0 100644
--- a/web/skins/classic/views/js/event.js
+++ b/web/skins/classic/views/js/event.js
@@ -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