From a592dfb8aa4fb84a857686339320e340e2be4418 Mon Sep 17 00:00:00 2001
From: Isaac Connor <isaac@zoneminder.com>
Date: Thu, 2 Feb 2023 18:47:37 -0500
Subject: [PATCH] Put alarm cues at the bottom of video area instead of
 overlapping progress bar.

---
 web/skins/classic/views/event.php   | 7 ++++++-
 web/skins/classic/views/js/event.js | 4 ++--
 2 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/web/skins/classic/views/event.php b/web/skins/classic/views/event.php
index 7bcc19449..841a9ee69 100644
--- a/web/skins/classic/views/event.php
+++ b/web/skins/classic/views/event.php
@@ -258,6 +258,11 @@ if ($video_tag) {
           <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 id="progressBar" style="width: 100%;">
+          <div id="alarmCues" style="width: 100%;"></div>
+          <div class="progressBox" id="progressBox" title="" style="width: 0%;"></div>
+          <div id="indicator" style="display: none;"></div>
+        </div><!--progressBar-->
 <?php
 } else {
 if ( (ZM_WEB_STREAM_METHOD == 'mpeg') && ZM_MPEG_LIVE_FORMAT ) {
@@ -275,7 +280,7 @@ if ( (ZM_WEB_STREAM_METHOD == 'mpeg') && ZM_MPEG_LIVE_FORMAT ) {
 } // end if stream method
 ?>
         <div id="progressBar" style="width: 100%;">
-        <div id="alarmCues" style="width: 100%;"></div>
+          <div id="alarmCues" style="width: 100%;"></div>
           <div class="progressBox" id="progressBox" title="" style="width: 0%;"></div>
           <div id="indicator" style="display: none;"></div>
         </div><!--progressBar-->
diff --git a/web/skins/classic/views/js/event.js b/web/skins/classic/views/js/event.js
index 9a0e269ba..109162246 100644
--- a/web/skins/classic/views/js/event.js
+++ b/web/skins/classic/views/js/event.js
@@ -310,7 +310,7 @@ function getCmdResponse(respObj, respText) {
   }
   if (streamStatus.progress > parseFloat(eventData.Length)) {
     console.log("Limiting progress to " + streamStatus.progress + ' >= ' + parseFloat(eventData.Length) );
-    streamStatus.progress = parseFloat(eventData.Length);
+    //streamStatus.progress = parseFloat(eventData.Length);
   } //Limit progress to reality
 
   var eventId = streamStatus.event;
@@ -1004,7 +1004,7 @@ function initPage() {
   if (document.getElementById('videoobj')) {
     vid = videojs('videoobj');
     addVideoTimingTrack(vid, LabelFormat, eventData.MonitorName, eventData.Length, eventData.StartDateTime);
-    $j('.vjs-progress-control').append('<div id="alarmCues" class="alarmCues"></div>');//add a place for videojs only on first load
+    //$j('.vjs-progress-control').append('<div id="alarmCues" class="alarmCues"></div>');//add a place for videojs only on first load
     vid.on('ended', vjsReplay);
     vid.on('play', vjsPlay);
     vid.on('pause', pauseClicked);