From b688f20a5ffa35bea6415b8d4f566d6cf7d9d6b0 Mon Sep 17 00:00:00 2001
From: Pliable Pixels <pliablepixels@gmail.com>
Date: Wed, 16 Oct 2019 11:03:38 -0400
Subject: #854 toggle controls

---
 www/templates/events-modal.html   |  8 ++++++--
 www/templates/monitors-modal.html | 10 ++++++----
 2 files changed, 12 insertions(+), 6 deletions(-)

(limited to 'www/templates')

diff --git a/www/templates/events-modal.html b/www/templates/events-modal.html
index 466cd18e..be971b52 100644
--- a/www/templates/events-modal.html
+++ b/www/templates/events-modal.html
@@ -35,6 +35,7 @@
 
             
               <img ng-if="!liveFeedMid" id="testaut_events_playwindow" image-spinner-src="{{constructStream()}}" ng-class="{'object-fit_cover':imageFit==false, 'object-fit_contain':imageFit==true}"
+                on-tap="showHideControls();"
                 on-double-tap="closeModal();" img-spinner-w="1024" img-spinner-h="768" image-spinner-loader="lines"
                 imageonload="modalImageLoaded()" on-swipe-left="onSwipeEvent(nextId,1)" on-swipe-right="onSwipeEvent(prevId,-1)" />
 
@@ -42,7 +43,9 @@
               <div ng-if="liveFeedMid">
                 
                 <img id="testaut_events_playwindow" image-spinner-src="{{currentEvent.Event.streamingURL}}/nph-zms?mode=jpeg&monitor={{liveFeedMid}}&connkey={{connKey}}{{$root.authSession}}"
-                  ng-class="{'object-fit_cover':imageFit==false, 'object-fit_contain':imageFit==true}" on-double-tap="closeModal();"
+                  ng-class="{'object-fit_cover':imageFit==false, 'object-fit_contain':imageFit==true}" 
+                  on-tap="showHideControls();"
+                  on-double-tap="closeModal();"
                   img-spinner-w="1024" img-spinner-h="768" image-spinner-loader="lines" imageonload="modalImageLoaded()"
                   on-swipe-left="onSwipeEvent(nextId,1)" on-swipe-right="onSwipeEvent(prevId,-1)" />
                 <div class="events-range-modal-text">
@@ -73,6 +76,7 @@
                   vg-update-state="onPlayerState($state)"
                   vg-update-playback="onPlaybackUpdate($playBack)"
                   vg-plays-inline="videoObject.config.playsInline" vg-theme="videoObject.config.theme" vg-complete="playbackFinished()"
+                  on-tap="showHideControls();"
                   on-double-tap="closeModal();" vg-autoplay="videoObject.config.autoPlay" vg-responsive="videoObject.config.responsive"
                   vg-update-time="videoTime(event.Event.StartTime,$currentTime)" vg-error="onVideoError($event)">
                   <vg-media vg-src="videoObject.config.sources" vg-native-controls="videoObject.config.nativeControls">
@@ -130,7 +134,7 @@
 
 
 
-  <div ng-show="!liveFeedMid">
+  <div ng-show="!liveFeedMid && displayControls">
     <nav mfb-menu position="tr" effect="zoomin" label="{{'kCollapse'|translate}}" active-icon="ion-chevron-down"
       resting-icon="ion-chevron-up" toggling-method="click">
       <a mfb-button icon="ion-arrow-right-c" label="{{'kNextEvent'|translate}}" ng-click="jumpToEvent(nextId,1);"></a>
diff --git a/www/templates/monitors-modal.html b/www/templates/monitors-modal.html
index ff0a11c3..bd64cdd5 100644
--- a/www/templates/monitors-modal.html
+++ b/www/templates/monitors-modal.html
@@ -17,6 +17,7 @@
                 <img id="singlemonitor" style="width:100vw; height:100vh;" image-spinner-loader="lines"
                   image-spinner-src="{{constructSingleStream()}}" ng-class="{'object-fit_cover':imageFit==false, 'object-fit_contain':imageFit==true}"
                   on-swipe-left="onSwipe(monitorId,1)" on-swipe-right="onSwipe(monitorId,-1)" on-double-tap="closeModal();"
+                  on-tap="showHideControls();"
                   imageonload="imageLoaded()" />
               </div>
               <div ng-if="animationInProgress">
@@ -112,7 +113,8 @@
       </div>
     </div>
   </ion-modal-view>
-  <nav id='testaut_monitormodal_nav_button' mfb-menu position="tr" effect="zoomin" label="{{'kCollapse' | translate}}" active-icon="ion-chevron-up"
+
+  <nav ng-if="displayControls" id='testaut_monitormodal_nav_button' mfb-menu position="tr" effect="zoomin" label="{{'kCollapse' | translate}}" active-icon="ion-chevron-up"
     resting-icon="ion-chevron-down" toggling-method="click">
     <button mfb-button icon="ion-arrow-resize" label="{{imageFit? ('kFillScreen' | translate):('kFitScreen' | translate)}}"
       ng-click="scaleImage();">
@@ -122,7 +124,7 @@
     <button mfb-button icon="ion-arrow-expand" label="{{'kControl'| translate}}" ng-click="togglePTZ();">
     </button>
   </nav>
-  <nav mfb-menu position="br" effect="zoomin" label="{{'kCollapse' | translate}}" active-icon="ion-chevron-down"
+  <nav ng-if="displayControls"  mfb-menu position="br" effect="zoomin" label="{{'kCollapse' | translate}}" active-icon="ion-chevron-down"
     resting-icon="ion-chevron-up" toggling-method="click">
     <button mfb-button icon="ion-android-arrow-back" label="{{'kPrevMonitor' | translate}} " ng-click="onTap(monitorId,-1);">
     </button>
@@ -131,7 +133,7 @@
     <button id='testaut_monitormodal_nav_exit_button' mfb-button icon="ion-close" label="{{'kExitLiveView' | translate}}" ng-click="closeModal();">
     </button>
   </nav>
-  <div id="flyoutmenu" style="position:absolute;bottom:80px;left:10px">
+  <div id="flyoutmenu" ng-if="displayControls" style="position:absolute;bottom:80px;left:10px">
     <ul>
 
       <li>
@@ -208,7 +210,7 @@
       </li>
     </ul>
   </div>
-  <div ng-if="!showPTZ" class="monitor-modal-text">{{monitorName}} &nbsp;
+  <div ng-if="!showPTZ && displayControls" class="monitor-modal-text">{{monitorName}} &nbsp;
     <span ng-style="{'background-color':stateColor()}">&nbsp;{{monStatus}}&nbsp;</span>
   </div>
 </div>
-- 
cgit v1.2.3