Merge pull request #3849 from IgorA100/patch-9

Fix: Responsive design with use bootstrap for live view
2024-03-04 09:41:23 -05:00 · 2024-03-04 09:41:23 -05:00 · 7d142faeef
parent 89de8b7765 a370ce19ea
commit 7d142faeef
6 changed files with 150 additions and 88 deletions
--- a/web/js/MonitorStream.js
+++ b/web/js/MonitorStream.js
@ -112,7 +112,7 @@ function MonitorStream(monitorData) {
        width = monitor_frame.css('width');
        height = Math.round(parseInt(this.height) * newscale / 100)+'px';
      } else {
-        const newSize = scaleToFit(this.width, this.height, $j(img), $j(this.bottomElement));
+        const newSize = scaleToFit(this.width, this.height, $j(img), $j(this.bottomElement), $j('#wrapperMonitor'));
        width = newSize.width+'px';
        height = newSize.height+'px';
        newscale = parseInt(newSize.autoScale);
--- a/web/skins/classic/css/base/views/control.css
+++ b/web/skins/classic/css/base/views/control.css
@ -1,15 +1,15 @@
 .ptzControls {
-    vertical-align: top;
+/*    vertical-align: top;
    margin: 10px auto 0;
-    width: 150px;
+    width: 150px;*/
 }

 .ptzControls::after {
-  visibility: hidden;
+/*  visibility: hidden;
  display: block;
  content: "";
  clear: both;
-  height: 0;
+  height: 0;*/
 }

 .ptzControls input.ptzTextBtn {
--- a/web/skins/classic/css/base/views/watch.css
+++ b/web/skins/classic/css/base/views/watch.css
@ -2,8 +2,11 @@
 }

 .container-fluid {
-  padding-left: 0;
-  padding-right: 0;
+/*  padding-left: 0;
+  padding-right: 0;*/
+}
+#wrapperMonitor .buttons {
+  display: inline-block;
 }

 #sidebar {
@ -13,6 +16,8 @@

 #sidebar .nav {
  flex-wrap: nowrap;
+  text-align: left;
+  overflow: auto;
 }

 #menuControls {
--- a/web/skins/classic/css/classic/views/control.css
+++ b/web/skins/classic/css/classic/views/control.css
@ -136,7 +136,7 @@

 .ptzControls .controlsPanel .powerControls,
 .ptzControls .presetControls {
-    margin: 5px 200px 5px 180px;
+    /* margin: 5px 200px 5px 180px; */
 }

 .ptzControls .presetControls input {
--- a/web/skins/classic/views/js/watch.js
+++ b/web/skins/classic/views/js/watch.js
@ -3,9 +3,19 @@ var settingsBtn = $j('#settingsBtn');
 var enableAlmBtn = $j('#enableAlmBtn');
 var forceAlmBtn = $j('#forceAlmBtn');
 var table = $j('#eventList');
+var sidebarView = $j('#sidebar');
+var sidebarControls = $j('#ptzControls');
+var wrapperMonitor = $j('#wrapperMonitor');
 var filterQuery = '&filter[Query][terms][0][attr]=MonitorId&filter[Query][terms][0][op]=%3d&filter[Query][terms][0][val]='+monitorId;
 var idle = 0;

+var classSidebarL = 'col-sm-3'; /* id="sidebar" */
+var classSidebarR = 'col-sm-2'; /* id="ptzControls" */
+var classMonitorW_SB_LR = 'col-sm-7'; /* id="wrapperMonitor" MINIMUM width */
+var classMonitorW_SB_L = 'col-sm-9'; /* id="wrapperMonitor" ONLY WITH LEFT */
+var classMonitorW_SB_R = 'col-sm-10'; /* id="wrapperMonitor" ONLY WITH RIGHT */
+var classMonitorWO_SB = 'col-sm-12'; /* id="wrapperMonitor" MAXIMUM width */
+
 /*
 This is the format of the json object sent by bootstrap-table

@ -118,6 +128,8 @@ function changeSize() {

  monitorStream.setScale('0', width, height);
  $j('#scale').val('0');
+  $j('#sidebar ul').height($j('#wrapperMonitor').height()-$j('#cycleButtons').height());
+
  setCookie('zmWatchScale', '0');
  setCookie('zmWatchWidth', width);
  setCookie('zmWatchHeight', height);
@ -144,6 +156,7 @@ function setScale() {
  if (scale == '0') {
    $j(window).on('resize', endOfResize); //remove resize handler when Scale to Fit is not active
  }
+  changeSize();
 } // end function changeScale

 function getStreamCmdResponse(respObj, respText) {
@ -926,6 +939,8 @@ function initPage() {
      }
    }, 10*1000);
  }
+  changeObjectClass();
+  changeSize();
 } // initPage

 function watchFullscreen() {
@ -1003,31 +1018,33 @@ function cyclePeriodChange() {
  setCookie('zmCyclePeriod', cyclePeriodSelect.val());
 }
 function cycleToggle(e) {
-  const sidebar = $j('#sidebar');
  const button = $j('#cycleToggle');
-  if (sidebar.is(":visible")) {
-    sidebar.hide();
+  if (sidebarView.is(":visible")) {
+    sidebarView.hide();
    setCookie('zmCycleShow', false);
  } else {
-    sidebar.show();
+    sidebarView.show();
    setCookie('zmCycleShow', true);
  }
  button.toggleClass('btn-secondary');
  button.toggleClass('btn-primary');
+  changeObjectClass();
+  changeSize();
 }

 function ptzToggle(e) {
-  const controls = $j('#ptzControls');
  const button = $j('#ptzToggle');
-  if (controls.is(":visible")) {
-    controls.hide();
+  if (sidebarControls.is(":visible")) {
+    sidebarControls.hide();
    setCookie('ptzShow', false);
  } else {
-    controls.show();
+    sidebarControls.show();
    setCookie('ptzShow', true);
  }
  button.toggleClass('btn-secondary');
  button.toggleClass('btn-primary');
+  changeObjectClass();
+  changeSize();
 }

 function changeRate(e) {
@ -1061,5 +1078,25 @@ function getObjdetectModal(eid) {
      });
 }

+function changeObjectClass() { 
+  if (sidebarView.is(":visible") && sidebarControls.is(":visible")) { //LEFT + RIGHT 
+    sidebarView.removeClass(classSidebarL).addClass(classSidebarL);
+    sidebarControls.removeClass(classSidebarR).addClass(classSidebarR);
+    wrapperMonitor.removeClass(classMonitorW_SB_LR).removeClass(classMonitorW_SB_L).removeClass(classMonitorW_SB_R).removeClass(classMonitorWO_SB).addClass(classMonitorW_SB_LR);
+  } else if (sidebarView.is(":visible") && !sidebarControls.is(":visible")) { //LEFT
+    sidebarView.removeClass(classSidebarL).addClass(classSidebarL);
+    sidebarControls.removeClass(classSidebarR);
+    wrapperMonitor.removeClass(classMonitorW_SB_LR).removeClass(classMonitorW_SB_L).removeClass(classMonitorW_SB_R).removeClass(classMonitorWO_SB).addClass(classMonitorW_SB_L);
+  } else if (!sidebarView.is(":visible") && sidebarControls.is(":visible")) { //RIGHT
+    sidebarView.removeClass(classSidebarL);
+    sidebarControls.removeClass(classSidebarR).addClass(classSidebarR);
+    wrapperMonitor.removeClass(classMonitorW_SB_LR).removeClass(classMonitorW_SB_L).removeClass(classMonitorW_SB_R).removeClass(classMonitorWO_SB).addClass(classMonitorW_SB_R);
+  } else if (!sidebarView.is(":visible") && !sidebarControls.is(":visible")) { //NOT
+    sidebarView.removeClass(classSidebarL);
+    sidebarControls.removeClass(classSidebarR);
+    wrapperMonitor.removeClass(classMonitorW_SB_LR).removeClass(classMonitorW_SB_L).removeClass(classMonitorW_SB_R).removeClass(classMonitorWO_SB).addClass(classMonitorWO_SB);
+  }
+}
+
 // Kick everything off
-$j(document).ready(initPage);
+$j( window ).on("load", initPage);
--- a/web/skins/classic/views/watch.php
+++ b/web/skins/classic/views/watch.php
@ -267,10 +267,11 @@ echo htmlSelect('changeRate', $maxfps_options, $options['maxfps']);
    </div><!--flip-->
  </div><!--header-->
  <div class="container-fluid h-100">
-    <div class="row flex-nowrap h-100" id="content">
+    <div id="content">
+      <div class="row flex-nowrap h-100" >
 <?php if (count($monitors)) { ?>
-      <nav id="sidebar" class="h-100"<?php echo $showCycle?'':' style="display:none;"'?>>
-        <div id="cycleButtons" class="buttons">
+        <nav id="sidebar" <?php echo $showCycle?'':' style="display:none;"'?>>
+          <div id="cycleButtons" class="buttons">
 <?php
 $seconds = translate('seconds');
 $minute = translate('minute');
@ -288,30 +289,30 @@ if (!isset($cyclePeriodOptions[ZM_WEB_REFRESH_CYCLE])) {
 }
 echo htmlSelect('cyclePeriod', $cyclePeriodOptions, $period, array('id'=>'cyclePeriod'));
 ?>
-          <span id="secondsToCycle"></span><br/>
-          <button type="button" id="cyclePrevBtn" title="<?php echo translate('PreviousMonitor') ?>">
-          <i class="material-icons md-18">skip_previous</i>
-          </button>
-          <button type="button" id="cyclePauseBtn" title="<?php echo translate('PauseCycle') ?>">
-          <i class="material-icons md-18">pause</i>
-          </button>
-          <button type="button" id="cyclePlayBtn" title="<?php echo translate('PlayCycle') ?>">
-          <i class="material-icons md-18">play_arrow</i>
-          </button>
-          <button type="button" id="cycleNextBtn" title="<?php echo translate('NextMonitor') ?>">
-          <i class="material-icons md-18">skip_next</i>
-          </button>
-        </div>
-        <ul class="nav nav-pills flex-column h-100">
+            <span id="secondsToCycle"></span><br/>
+            <button type="button" id="cyclePrevBtn" title="<?php echo translate('PreviousMonitor') ?>">
+            <i class="material-icons md-18">skip_previous</i>
+            </button>
+            <button type="button" id="cyclePauseBtn" title="<?php echo translate('PauseCycle') ?>">
+            <i class="material-icons md-18">pause</i>
+            </button>
+            <button type="button" id="cyclePlayBtn" title="<?php echo translate('PlayCycle') ?>">
+            <i class="material-icons md-18">play_arrow</i>
+            </button>
+            <button type="button" id="cycleNextBtn" title="<?php echo translate('NextMonitor') ?>">
+            <i class="material-icons md-18">skip_next</i>
+            </button>
+          </div>
+          <ul class="nav nav-pills flex-column">
 <?php
  foreach ($monitors as $m) {
    echo '<li class="nav-item"><a class="nav-link'.( $m->Id() == $monitor->Id() ? ' active' : '' ).'" href="?view=watch&amp;mid='.$m->Id().'">'.$m->Name().'</a></li>';
  }
 ?>
-        </ul>
-      </nav>
-      <div class="container-fluid col-sm-offset-2 h-100 pr-0">
-<div class="Monitor"
+          </ul>
+        </nav>
+        <div id="wrapperMonitor" class="container-fluid col h-100 pr-0"><!--IgorA100 правка-->
+          <div id="Monitor" class="Monitor"
 <?php
 if ($streamMode == 'jpeg') {
  echo 'title="Click to zoom, shift click to pan, ctrl click to zoom out"';
@ -324,11 +325,11 @@ if ($monitor->Type() != 'WebSite') {
 }
 echo $monitor->getStreamHTML($options);
 ?>
-</div>
+          </div><!-- id="Monitor" -->
 <?php
 if ($monitor->Type() != 'WebSite') {
 ?>
-        <div class="buttons" id="dvrControls">
+          <div class="buttons" id="dvrControls">
 <!--
          <button type="button" id="getImageBtn" title="<?php echo translate('Download Image') ?>"/>
 -->
@ -336,49 +337,69 @@ if ($monitor->Type() != 'WebSite') {
 if ($streamMode == 'jpeg') {
  if ($monitor->StreamReplayBuffer() != 0) {
 ?>
-            <button type="button" id="fastRevBtn" title="<?php echo translate('Rewind') ?>" class="unavail" disabled="disabled" data-on-click-true="streamCmdFastRev">
-            <i class="material-icons md-18">fast_rewind</i>
-            </button>
-            <button type="button" id="slowRevBtn" title="<?php echo translate('StepBack') ?>" class="unavail" disabled="disabled" data-on-click-true="streamCmdSlowRev">
-            <i class="material-icons md-18">chevron_right</i>
-            </button>
+              <button type="button" id="fastRevBtn" title="<?php echo translate('Rewind') ?>" class="unavail" disabled="disabled" data-on-click-true="streamCmdFastRev">
+              <i class="material-icons md-18">fast_rewind</i>
+              </button>
+              <button type="button" id="slowRevBtn" title="<?php echo translate('StepBack') ?>" class="unavail" disabled="disabled" data-on-click-true="streamCmdSlowRev">
+              <i class="material-icons md-18">chevron_right</i>
+              </button>
 <?php 
  }
 ?>
-            <button type="button" id="pauseBtn" title="<?php echo translate('Pause') ?>" class="inactive" data-on-click-true="streamCmdPause">
-            <i class="material-icons md-18">pause</i>
-            </button>
-            <button type="button" id="stopBtn" title="<?php echo translate('Stop') ?>" class="unavail" disabled="disabled" data-on-click-true="streamCmdStop" style="display:none;">
-            <i class="material-icons md-18">stop</i>
-            </button>
-            <button type="button" id="playBtn" title="<?php echo translate('Play') ?>" class="active" disabled="disabled" data-on-click-true="streamCmdPlay">
-            <i class="material-icons md-18">play_arrow</i>
-            </button>
+              <button type="button" id="pauseBtn" title="<?php echo translate('Pause') ?>" class="inactive" data-on-click-true="streamCmdPause">
+              <i class="material-icons md-18">pause</i>
+              </button>
+              <button type="button" id="stopBtn" title="<?php echo translate('Stop') ?>" class="unavail" disabled="disabled" data-on-click-true="streamCmdStop" style="display:none;">
+              <i class="material-icons md-18">stop</i>
+              </button>
+              <button type="button" id="playBtn" title="<?php echo translate('Play') ?>" class="active" disabled="disabled" data-on-click-true="streamCmdPlay">
+              <i class="material-icons md-18">play_arrow</i>
+              </button>
 <?php
  if ($monitor->StreamReplayBuffer() != 0) {
 ?>
-            <button type="button" id="slowFwdBtn" title="<?php echo translate('StepForward') ?>" class="unavail" disabled="disabled" data-on-click-true="streamCmdSlowFwd">
-            <i class="material-icons md-18">chevron_right</i>
-            </button>
-            <button type="button" id="fastFwdBtn" title="<?php echo translate('FastForward') ?>" class="unavail" disabled="disabled" data-on-click-true="streamCmdFastFwd">
-            <i class="material-icons md-18">fast_forward</i>
-            </button>
+              <button type="button" id="slowFwdBtn" title="<?php echo translate('StepForward') ?>" class="unavail" disabled="disabled" data-on-click-true="streamCmdSlowFwd">
+              <i class="material-icons md-18">chevron_right</i>
+              </button>
+              <button type="button" id="fastFwdBtn" title="<?php echo translate('FastForward') ?>" class="unavail" disabled="disabled" data-on-click-true="streamCmdFastFwd">
+              <i class="material-icons md-18">fast_forward</i>
+              </button>
 <?php
  }
 ?>
-            <button type="button" id="zoomOutBtn" title="<?php echo translate('ZoomOut') ?>" class="avail" data-on-click="zoomOutClick">
-            <i class="material-icons md-18">zoom_out</i>
-            </button>
-            <button type="button" id="fullscreenBtn" title="<?php echo translate('Fullscreen') ?>" class="avail" data-on-click="watchFullscreen">
-            <i class="material-icons md-18">fullscreen</i>
-            </button>
-            <button type="button" id="allEventsBtn" title="<?php echo translate('All Events') ?>" class="avail" data-on-click="watchAllEvents" data-url="?view=events&page=1&filter%5BQuery%5D%5Bterms%5D%5B0%5D%5Battr%5D=Monitor&filter%5BQuery%5D%5Bterms%5D%5B0%5D%5Bop%5D=%3D&filter%5BQuery%5D%5Bterms%5D%5B0%5D%5Bval%5D=<?php echo $monitor->Id()?>&filter%5BQuery%5D%5Bsort_asc%5D=1&filter%5BQuery%5D%5Bsort_field%5D=StartDateTime&filter%5BQuery%5D%5Bskip_locked%5D=&filter%5BQuery%5D%5Blimit%5D=0"><?php echo translate('All Events') ?> 
-            </button>
+              <button type="button" id="zoomOutBtn" title="<?php echo translate('ZoomOut') ?>" class="avail" data-on-click="zoomOutClick">
+              <i class="material-icons md-18">zoom_out</i>
+              </button>
+              <button type="button" id="fullscreenBtn" title="<?php echo translate('Fullscreen') ?>" class="avail" data-on-click="watchFullscreen">
+              <i class="material-icons md-18">fullscreen</i>
+              </button>
 <?php
 } // end if streamMode==jpeg
 ?>
-      </div><!--dvrButtons-->
+          </div><!--dvrControls-->
 <?php } // end if $monitor->Type() != 'WebSite' ?>
+          <div class="buttons" id="extButton"> 
+              <button type="button" id="allEventsBtn" title="<?php echo translate('All Events') ?>" class="avail" data-on-click="watchAllEvents" data-url="?view=events&page=1&filter%5BQuery%5D%5Bterms%5D%5B0%5D%5Battr%5D=Monitor&filter%5BQuery%5D%5Bterms%5D%5B0%5D%5Bop%5D=%3D&filter%5BQuery%5D%5Bterms%5D%5B0%5D%5Bval%5D=<?php echo $monitor->Id()?>&filter%5BQuery%5D%5Bsort_asc%5D=1&filter%5BQuery%5D%5Bsort_field%5D=StartDateTime&filter%5BQuery%5D%5Bskip_locked%5D=&filter%5BQuery%5D%5Blimit%5D=0"><?php echo translate('All Events') ?> 
+              </button>
+          </div>
+        </div><!-- id="wrapperMonitor" -->
+
+<!-- START Control -->
+<?php
+if ( $hasPtzControls ) {
+    foreach ( getSkinIncludes('includes/control_functions.php') as $includeFile )
+        require_once $includeFile;
+?>
+      <div id="ptzControls" class="col-sm-2 ptzControls"<?php echo $showPtzControls ? '' : ' style="display:none;"'?>>
+      <?php echo ptzControls($monitor) ?>
+      </div>
+<?php
+}
+?>
+<!-- END Control -->
+      </div><!-- class="row" -->
+
+<!-- START table Events -->
 <?php
 if ( canView('Events') && ($monitor->Type() != 'WebSite') ) {
 ?>
@ -427,31 +448,30 @@ if ( canView('Events') && ($monitor->Type() != 'WebSite') ) {

        </table>
      </div>
-    </div>
 <?php
-  if ($hasPtzControls) {
-    foreach (getSkinIncludes('includes/control_functions.php') as $includeFile)
-      require_once $includeFile;
+} //end if ( canView('Events') && ($monitor->Type() != 'WebSite') )
 ?>
-      <div id="ptzControls" class="ptzControls"<?php echo $showPtzControls ? '' : ' style="display:none;"'?>>
-      <?php echo ptzControls($monitor) ?>
-      </div>
-<?php
-    }
-  } # end if hasPtzControls
-?>
-    </div>
+<!-- END table Events -->
+
+    </div><!-- id="content" -->
  </div>
+</div>
 <?php
-   if ($monitor->JanusEnabled()) {
+if ( $monitor->JanusEnabled() ) {
 ?>
  <script src="<?php echo cache_bust('js/adapter.min.js') ?>"></script>
  <script src="/javascript/janus/janus.js"></script>
 <?php
-    } # end if JanusEnabled
-    if ($monitor->RTSP2WebEnabled() and $monitor->RTSP2WebType == 'HLS') {
-      echo '<script src="'.cache_bust('js/hls.js').'"></script>'.PHP_EOL;
-    }
+}
+?>
+<?php
+if ( $monitor->RTSP2WebEnabled() and $monitor->RTSP2WebType == "HLS") {
+?>
+  <script src="<?php echo cache_bust('js/hls.js') ?>"></script>
+<?php
+}
+?>
+<?php
  } else {
    echo "There are no monitors to display\n";
  }