From bdc845289147029547cdad75b8b0978f155651aa Mon Sep 17 00:00:00 2001
From: Isaac Connor <isaac@zoneminder.com>
Date: Tue, 15 Aug 2023 17:58:48 -0400
Subject: [PATCH] Add a button to toggle ptz controls. Put ptz controls into a
 right hand sidebar.

---
 web/skins/classic/css/base/views/control.css | 14 ++++-----
 web/skins/classic/views/js/watch.js          | 22 +++++++++++---
 web/skins/classic/views/watch.php            | 31 +++++++++++++-------
 3 files changed, 44 insertions(+), 23 deletions(-)

diff --git a/web/skins/classic/css/base/views/control.css b/web/skins/classic/css/base/views/control.css
index ffb9c03d2c..2aab00f9de 100644
--- a/web/skins/classic/css/base/views/control.css
+++ b/web/skins/classic/css/base/views/control.css
@@ -1,7 +1,7 @@
 .ptzControls {
     vertical-align: top;
     margin: 10px auto 0;
-    width: 90%;
+    width: 150px;
 }
 
 .ptzControls::after {
@@ -23,6 +23,8 @@
 
 .ptzControls .controlsPanel {
     margin: 0 auto;
+    display: flex;
+    flex-wrap: wrap;
 }
 
 .ptzControls input[type=image] {
@@ -67,28 +69,22 @@
 }
 
 .ptzControls .controlsPanel .focusControls {
-    float: left;
 }
 
 .ptzControls .controlsPanel .zoomControls {
-    float: left;
 }
 
 .ptzControls .controlsPanel .irisControls {
-    float: right;
     text-align: center;
 }
 
 .ptzControls .controlsPanel .whiteControls {
-    float: right;
     width: 120px;
     text-align: center;
 }
 
 .ptzControls .controlsPanel .pantiltPanel {
     margin: 0 auto;
-    height: 180px;
-    float: left;
     width: 100px;
 }
 
@@ -99,13 +95,14 @@
     padding: 1px;
     width: 100px;
     height: 100px;
+    display: flex;
+    flex-wrap: wrap;
 }
 
 .ptzControls .controlsPanel .pantiltPanel .pantiltControls .arrowBtn {
     width: 32px;
     height: 32px;
     cursor: pointer;
-    float: left;
 }
 
 .ptzControls .controlsPanel .pantiltPanel .pantiltControls .upLeftBtn {
@@ -146,7 +143,6 @@
 
 .ptzControls .controlsPanel .powerControls,
 .ptzControls .presetControls div {
-    margin: 5px 200px 5px 180px;
 }
 
 .ptzControls .presetControls button {
diff --git a/web/skins/classic/views/js/watch.js b/web/skins/classic/views/js/watch.js
index 5a04eaf0c5..cbd5f56578 100644
--- a/web/skins/classic/views/js/watch.js
+++ b/web/skins/classic/views/js/watch.js
@@ -871,6 +871,7 @@ function initPage() {
   } else {
     cyclePause();
   }
+  bindButton('#ptzToggle', 'click', null, ptzToggle);
 } // initPage
 
 function watchFullscreen() {
@@ -941,12 +942,11 @@ function cyclePrev() {
 
 function cyclePeriodChange() {
   const cyclePeriodSelect = $j('#cyclePeriod');
-  secondsToCycle = cyclePeriodSelect.val();
-  setCookie('zmCyclePeriod', secondsToCycle);
+  setCookie('zmCyclePeriod', cyclePeriodSelect.val());
 }
 function cycleToggle(e) {
-  sidebar = $j('#sidebar');
-  button = $j('#cycleToggle');
+  const sidebar = $j('#sidebar');
+  const button = $j('#cycleToggle');
   if (sidebar.is(":visible")) {
     sidebar.hide();
     setCookie('zmCycleShow', false);
@@ -958,6 +958,20 @@ function cycleToggle(e) {
   button.toggleClass('btn-primary');
 }
 
+function ptzToggle(e) {
+  const controls = $j('#ptzControls');
+  const button = $j('#ptzToggle');
+  if (controls.is(":visible")) {
+    controls.hide();
+    setCookie('ptzShow', false);
+  } else {
+    controls.show();
+    setCookie('ptzShow', true);
+  }
+  button.toggleClass('btn-secondary');
+  button.toggleClass('btn-primary');
+}
+
 function changeRate(e) {
   const newvalue = $j(e).val();
   if (1) {
diff --git a/web/skins/classic/views/watch.php b/web/skins/classic/views/watch.php
index a5730878d9..569d9e19b4 100644
--- a/web/skins/classic/views/watch.php
+++ b/web/skins/classic/views/watch.php
@@ -103,7 +103,15 @@
   $showCycle = $_COOKIE['zmCycleShow'] == 'true';
 }
 #Whether to show the controls button
-$showPtzControls = ( ZM_OPT_CONTROL && $monitor->Controllable() && canView('Control') && $monitor->Type() != 'WebSite' );
+$hasPtzControls = ( ZM_OPT_CONTROL && $monitor->Controllable() && canView('Control') && $monitor->Type() != 'WebSite' );
+$showPtzControls = false;
+if ($hasPtzControls) {
+  if (isset($_REQUEST['ptzShow']) and ($_REQUEST['ptzShow'] == 'true')) {
+    $showPtzControls = true;
+  } else if (isset($_COOKIE['ptzShow'])) {
+    $showPtzControls = $_COOKIE['ptzShow'] == 'true';
+  }
+}
 
 $options = array();
 if (0) {
@@ -212,6 +220,9 @@
         <button type="button" id="cycleToggle" class="btn <?php echo $showCycle ? 'btn-primary':'btn-secondary'?>" title="<?php echo translate('Toggle cycle sidebar')?>">
             <span class="material-icons md-18">view_carousel</span>
         </button>
+        <button type="button" id="ptzToggle" class="btn <?php echo $showPtzControls ? 'btn-primary':'btn-secondary'?>" title="<?php echo translate('Toggle PTZ Controls')?>">
+            <span class="material-icons md-18">open_with</span>
+        </button>
         <span id="rateControl">
           <label><?php echo translate('Rate') ?>:</label>
           <?php
@@ -355,15 +366,6 @@
       </div><!--dvrButtons-->
 <?php } // end if $monitor->Type() != 'WebSite' ?>
 <?php
-if ( $showPtzControls ) {
-    foreach ( getSkinIncludes('includes/control_functions.php') as $includeFile )
-        require_once $includeFile;
-?>
-      <div id="ptzControls" class="ptzControls">
-      <?php echo ptzControls($monitor) ?>
-      </div>
-<?php
-}
 if ( canView('Events') && ($monitor->Type() != 'WebSite') ) {
 ?>
       <!-- Table styling handled by bootstrap-tables -->
@@ -412,6 +414,15 @@ class="table-sm table-borderless"
       </div>
     </div>
 <?php
+if ( $hasPtzControls ) {
+    foreach ( getSkinIncludes('includes/control_functions.php') as $includeFile )
+        require_once $includeFile;
+?>
+      <div id="ptzControls" class="ptzControls"<?php echo $showPtzControls ? '' : ' style="display:none;"'?>>
+      <?php echo ptzControls($monitor) ?>
+      </div>
+<?php
+}
 }
 ?>
     </div>