#252 should work now

Former-commit-id: d49ab80a48e00c4d1fda1d6cdb3d24969849d268

3 files changed, 144 insertions, 204 deletions

diff --git a/www/css/style.css b/www/css/style.css
index 05e4907b..0261e6e2 100644
--- a/www/css/style.css
+++ b/www/css/style.css
@@ -975,21 +975,35 @@ body { font-family: sans-serif; }
   position:absolute;
   width: 80%;
   height: 20px;
-  bottom:70px;
+  bottom:80px;
   left:20px;
   opacity:1;
   z-index:99;
    
 }
 
+
+#event_canvas_video {
+  position:absolute;
+  width: 100%;
+  height: 20px;
+  bottom:140px;
+  left:0px;
+  opacity:1;
+  z-index:99;
+   
+}
+
+
+
 #event_slider {
   position:absolute;
   width: 80%;
   height: 20px;
-  bottom:50px;
+  bottom:60px;
   left:20px;
   opacity:1;
-   z-index:100;
+   z-index:9999;
       
    
 }
@@ -997,32 +1011,15 @@ body { font-family: sans-serif; }
 #event_rate_text {
   position:absolute;
   width: 80%;
-  bottom:10px;
+  bottom:20px;
   left:43px;
   opacity:1;
   color:#fff;
-  z-index:100;
+  z-index:9998;
       
    
 }
-/*
-#event_slider {
-    width: 100%;
-  height: 100%;
-  position: absolute;
-  top: 50%;
-  left: 0;
-}
 
-#event_canvas
-{
-position:absolute;
-    bottom:30px;
-    left:30px;
-    z-index:99;
-    opacity:1;
-    width:100%;
-}*/
 
 
 
diff --git a/www/js/EventModalCtrl.js b/www/js/EventModalCtrl.js
index f6c7fe2a..0d33254c 100644
--- a/www/js/EventModalCtrl.js
+++ b/www/js/EventModalCtrl.js
@@ -146,6 +146,7 @@ angular.module('zmApp.controllers').controller('EventModalCtrl', ['$scope', '$ro
     {
         //console.log ("Event timer");
         //console.log ("Event timer");
+        $scope.checkEventOn = true;
         if ($scope.defaultVideo !== undefined && $scope.defaultVideo !='')
         {
             console.log ("playing video, not using zms, skipping event commands");
@@ -228,6 +229,12 @@ angular.module('zmApp.controllers').controller('EventModalCtrl', ['$scope', '$ro
     
     function processEvent(cmd,connkey)
     {
+        
+        if ($scope.blockSlider)
+        {
+            console.log ("Not doing ZMS Command as slider is depressed...");
+            return;
+        }
    
         var loginData = ZMDataModel.getLogin();
          console.log ("sending process Event command to " + loginData.url);
@@ -346,12 +353,19 @@ angular.module('zmApp.controllers').controller('EventModalCtrl', ['$scope', '$ro
 
     };
 
+    $scope.enableSliderBlock = function()
+    {
+        $scope.blockSlider = true;
+    };
    
     $scope.youChangedSlider = function()
     {
+        
         console.log("YOU changed " + $scope.sliderProgress.progress);
         $scope.currentProgress.progress = $scope.sliderProgress.progress;
         $timeout( function () { sendCommand('14',$scope.connKey, '&offset='+$scope.currentProgress.progress);},500);
+        // give this command some time to complete
+        $timeout (function(){$scope.blockSlider = false;},1500);
         
     };
 
@@ -710,6 +724,8 @@ angular.module('zmApp.controllers').controller('EventModalCtrl', ['$scope', '$ro
         $scope.loginData = ZMDataModel.getLogin();
         
         $scope.singleImageQuality = ld.singleImageQuality;
+        $scope.blockSlider = false;
+        $scope.checkEventOn = false;
         //$scope.singleImageQuality = 100;
         
         
@@ -814,16 +830,13 @@ angular.module('zmApp.controllers').controller('EventModalCtrl', ['$scope', '$ro
     
 
     $scope.$on('modal.removed', function (e,m) {
-        
+        $interval.cancel(eventQueryHandle);
         if (m.id != 'footage')
             return;
         
-        //console.log ("************** MODAL INSIDE FOOTAGE CLOSED");
+      
         $scope.isModalActive = false;
-         
-        //console.log("**MODAL REMOVED: Stopping modal timer");
-                $interval.cancel(eventQueryHandle);
-                //$timeout.cancel(eventQueryHandle);
+        
         ZMDataModel.zmDebug ("Modal removed - killing connkey");
         sendCommand(17,$scope.connKey);
         //$timeout (function(){ZMDataModel.stopNetwork("Modal removed inside EventModalCtrl");},400);
diff --git a/www/templates/events-modal.html b/www/templates/events-modal.html
index 51b389f1..bc3d40ac 100644
--- a/www/templates/events-modal.html
+++ b/www/templates/events-modal.html
@@ -1,203 +1,133 @@
-    <div ng-controller="EventModalCtrl">
+<div ng-controller="EventModalCtrl">
     <!-- style="width: 90%; height: 90%; top: 5%; left: 5%; right: 5%; bottom: 5%;"-->
     <ion-modal-view cache-view="false">
         <ion-content style="background-color:#444444" ng-cloak>
 
-            <ion-scroll has-bouncing=false min-zoom=1 zooming="true" direction="xy" style="width: 100%; " delegate-handle="imgscroll" on-swipe-left="onSwipeEvent(nextId,1)"
-                                         on-swipe-right="onSwipeEvent(prevId,-1)">
-                <div  id="full-screen-event" style="height: 100vh;">
-
-
-                    <!--<div ng-if="(defaultVideo=='' || loginData.enableh264==false) && !loginData.useNphZmsForEvents">
-                        
-                        
-                        <ul rn-carousel  rn-carousel-transition="none" rn-swipe-disabled="true" rn-carousel-index="mycarousel.index" rn-carousel-auto-slide="{{eventSpeed}}" rn-carousel-pause-on-hover  rn-platform="{{$root.platformOS}}" rn-carousel-buffered >
-
-
-                            <li ng-repeat="slide in slides">
-                                <div ng-if="!animationInProgress">
-                                    <img  style="width:100vw; height:100vh" imageonload="finishedLoadingImage($index)" 
-                                         image-spinner-src="{{playbackURL}}/index.php?view=image&rand={{$root.rand}}&path={{relativePath}}{{slide.img}}&scale={{loginData.singleImageQuality}}{{$root.authSession}}" 
-                                         image-spinner-loader="lines" 
-                                         ng-class="{'object-fit_cover':imageFit==false, 'object-fit_contain':imageFit==true}" 
-                                         
-                                         />
-                                </div>
-                                <div ng-if="animationInProgress">
-                                    <img   style="width:100vw; height:100vh" imageonload="finishedLoadingImage($index)" 
-                                         image-spinner-src="img/pausevideo.png" 
-                                         image-spinner-loader="lines" 
-                                         class="object-fit_contain"  />
-                                </div>
-                                
-
-                                
-
-                            </li>
-                        </ul>
-                    </div>-->
-                    
+            <ion-scroll has-bouncing=false min-zoom=1 zooming="true" direction="xy" style="width: 100%; " delegate-handle="imgscroll" on-swipe-left="onSwipeEvent(nextId,1)" on-swipe-right="onSwipeEvent(prevId,-1)">
+                <div id="full-screen-event" style="height: 100vh;">
+
+
+
+
                     <!-- route via ZMS -->
-                    
+
                     <div ng-if="( (defaultVideo=='') || (loginData.enableh264==false)) && (loginData.useNphZmsForEvents==true)">
-                       
+
                         <!--<div style="color:white">connkey:{{connKey}}</div>-->
-                        <div style="width:100vw; height:100vh;" >
-                          <img   image-spinner-src="{{loginData.streamingurl}}/nph-zms?source=event&mode=jpeg&event={{eventId}}&frame=1&replay={{currentStreamMode}}&rate=100&connkey={{connKey}}&scale={{singleImageQuality}}{{$root.authSession}}" ng-class="{'object-fit_cover':imageFit==false, 'object-fit_contain':imageFit==true}" on-double-tap="closeModal();"/>
-                          
-                            <div  ng-if="isPaused" style="position:absolute; top:50%; left:50%;white-space:nowrap;overflow:hidden;z-index:999"
-                             class="header-paused">
-                            &nbsp;<i class="ion-pause"></i>
-                               paused&nbsp;
+                        <div style="width:100vw; height:100vh;">
+                            <img image-spinner-src="{{loginData.streamingurl}}/nph-zms?source=event&mode=jpeg&event={{eventId}}&frame=1&replay={{currentStreamMode}}&rate=100&connkey={{connKey}}&scale={{singleImageQuality}}{{$root.authSession}}" ng-class="{'object-fit_cover':imageFit==false, 'object-fit_contain':imageFit==true}" on-double-tap="closeModal();" />
+
+                            <div ng-if="isPaused" style="position:absolute; top:50%; left:50%;white-space:nowrap;overflow:hidden;z-index:999" class="header-paused">
+                                &nbsp;<i class="ion-pause"></i> paused&nbsp;
                             </div>
-                            
+
                         </div>
-                        
-                        
+
+
                     </div>
-                    
+
                     <!-- no default video -->
-                 
+
                     <div ng-if="defaultVideo!==undefined && defaultVideo!='' && loginData.enableh264 == true">
-                        <div  on-double-tap="closeModal();">
+                        <div on-double-tap="closeModal();">
                             <videogular vg-theme="videoObject.config.theme" vg-complete="playbackFinished()">
-                                     <vg-controls>
-                                            <vg-play-pause-button></vg-play-pause-button>
-                                            <vg-scrub-bar>
-                                                <vg-scrub-bar-current-time></vg-scrub-bar-current-time>
-                                            </vg-scrub-bar>
-                                            <vg-time-display>{{ timeLeft | date:'mm:ss':'+0000' }}</vg-time-display>
-                                            <vg-fullscreen-button></vg-fullscreen-button>
-                                            <vg-volume>
-                                                <vg-mute-button></vg-mute-button>
-                                            </vg-volume>
-                                        </vg-controls>
+                                <vg-controls>
+                                    <vg-play-pause-button></vg-play-pause-button>
+                                    <vg-scrub-bar>
+                                        <vg-scrub-bar-current-time></vg-scrub-bar-current-time>
+                                    </vg-scrub-bar>
+                                    <vg-time-display>{{ timeLeft | date:'mm:ss':'+0000' }}</vg-time-display>
+                                    <vg-fullscreen-button></vg-fullscreen-button>
+                                    <vg-volume>
+                                        <vg-mute-button></vg-mute-button>
+                                    </vg-volume>
+                                </vg-controls>
                                 <vg-media vg-src="videoObject.config.sources" vg-native-controls="false">
                                 </vg-media>
                             </videogular>
                         </div>
-                      
+                        <div id="event_canvas_video">
+                            <canvas id="eventchart" width="100%" height="20px"></canvas>
+                        </div>
+
                     </div>
-                    
 
-                </div>
-                <!-- 100vh -->
-            </ion-scroll>
 
-          
 
-        </ion-content>
 
+                </div>
+                <!-- 100vh -->
+            </ion-scroll>
 
-        <!-- <div class="range">
-        <input type="range"  ng-model="ionRange.index" min="0"  max="{{eFramesNum-1}}" >
-      </div>-->
-
-
-</ion-modal-view>
-
-
-<nav  mfb-menu position="tr" effect="zoomin" label="collapse" active-icon="ion-chevron-up" resting-icon="ion-chevron-down" toggling-method="click">
-
-    <a mfb-button icon="ion-arrow-right-c" label="next event" ng-click="jumpToEvent(nextId,1);"></a>
-    <a mfb-button icon="ion-arrow-left-c" label="prev. event" ng-click="jumpToEvent(prevId,-1);"></a>
-    <a mfb-button icon="ion-arrow-resize" label="{{imageFit?'fill screen':'fit screen'}}" ng-click="scaleImage();"></a>
-    
-    <a mfb-button icon="ion-close" label="exit event view" ng-click="closeModal()"> </a>
-
-</nav>
-    
-    
-<!--<nav ng-if="!loginData.useNphZmsForEvents" mfb-menu position="br" effect="zoomin" label="collapse" active-icon="ion-chevron-down" resting-icon="ion-chevron-up" toggling-method="click">
-
-    <a  mfb-button icon="icon-super-speed" label="super speed" ng-click="adjustSpeed('super');"></a>
-    <a  mfb-button icon="icon-normal-speed" label="normal speed" ng-click="adjustSpeed('normal');"></a>
-    <a mfb-button icon="icon-faster" label="faster" ng-click="adjustSpeed('faster');"></a>
-    
-    <a mfb-button icon="icon-slower" label="slower" ng-click="adjustSpeed('slower');"> </a>
-
-</nav>-->
-        
-        
-<nav ng-if="loginData.useNphZmsForEvents" mfb-menu position="br" effect="zoomin" label="collapse" active-icon="ion-chevron-down" resting-icon="ion-chevron-up" toggling-method="click">
-
-    
-    <a  mfb-button icon="ion-skip-backward" label="fast rewind" ng-click="adjustSpeed('fr');"></a>
-    <a  mfb-button icon="ion-skip-forward" label="fast forward" ng-click="adjustSpeed('ff');"></a>
-    <a mfb-button icon="ion-play" label="normal play" ng-click="adjustSpeed('np');"></a>
-    
-    <a mfb-button icon="ion-pause" label="pause" ng-click="adjustSpeed('p');"> </a>
-
-</nav>
-    
-
-
-<div class="events-range-modal-text" >showing event: {{d_eventId}}</div>
-        
-        
-<div id="flyoutmenu" style="position:absolute;bottom:100px;left:10px">
-    <ul>
-        <li ng-if="defaultVideo==''">
-            <a href="" ng-click="toggleGapless()"> <i class="ion-ios-loop-strong"></i>-{{loginData.gapless?"on":"off"}}</a>
-        </li>
-        
-        <li ng-if="defaultVideo==''">
-            <a href="" ng-click="saveEventImageToPhone(false)"> <i class="ion-ios-camera"></i></a>
-        </li>
-        
-        <li ng-if="defaultVideo==''">
-            <a href="" ng-click="saveEventImageToPhone(true)"> <i class="ion-android-notifications"></i></a>
-        </li>
-        
-        <li ng-if="$root.isAlarm">
-            <a data-badge="{{$root.alarmCount}}" class="notification-badge animated infinite tada" href="" ng-click="handleAlarms()"><i class="ion-ios-bell"></i></a>
-        </li>
-        
-        
-        
-    </ul>
-    
-</div>
-
-
-
-
-        <div id="event_canvas">
-            <canvas style="padding-left:23px;
-  padding-right:23px;" id="eventchart" width="auto" height="20px"></canvas>
-        </div>
-        
-        <div id="event_slider">
-            <div class="range" >
-                        <input ng-change="youChangedSlider()" type="range"  min="0" max="{{currentEventDuration}}" ng-model="sliderProgress.progress">
-                        </div>
-        </div>
-        
-        <div id="event_rate_text">
-            @{{currentRate}}x at:{{currentProgress.progress}}s
-        </div>
-  
-    <!--<div class="row">
-        
-       
-            
+            <div ng-if="( (defaultVideo=='') || (loginData.enableh264==false)) && (loginData.useNphZmsForEvents==true)">
                 <div id="event_canvas">
                     <canvas style="padding-left:23px;
-  padding-right:23px;" id="eventchart" width="auto" height="20px"></canvas>
-                   
-                    <div id="event_slider">
-                        <div class="range" >
-                        <input ng-change="youChangedSlider()" type="range"  min="0" max="{{currentEventDuration}}" ng-model="sliderProgress.progress">
-                        </div>
+                        padding-right:23px;" id="eventchart" width="auto" height="20px"></canvas>
+                </div>
+                <div ng-if="checkEventOn" id="event_slider" data-tap-disabled="false">
+                    <div class="range">
+                        <input on-drag="enableSliderBlock()" on-release="youChangedSlider()" type="range" min="0" max="{{currentEventDuration}}" ng-model="sliderProgress.progress">
                     </div>
                 </div>
-           
-            
-        </div>
-        <div class="col col-25" style="line-height:70px">
-            
-            @{{currentRate}}x
-            at:{{currentProgress.progress}}s
-        </div>
-    </div>-->
-</div>
+                <div id="event_rate_text">
+                    @{{currentRate}}x at:{{currentProgress.progress}}s
+                </div>
+            </div>
+
+        </ion-content>
+
+
+
+    </ion-modal-view>
+
+
+    <nav mfb-menu position="tr" effect="zoomin" label="collapse" active-icon="ion-chevron-up" resting-icon="ion-chevron-down" toggling-method="click">
+
+        <a mfb-button icon="ion-arrow-right-c" label="next event" ng-click="jumpToEvent(nextId,1);"></a>
+        <a mfb-button icon="ion-arrow-left-c" label="prev. event" ng-click="jumpToEvent(prevId,-1);"></a>
+        <a mfb-button icon="ion-arrow-resize" label="{{imageFit?'fill screen':'fit screen'}}" ng-click="scaleImage();"></a>
+
+        <a mfb-button icon="ion-close" label="exit event view" ng-click="closeModal()"> </a>
+
+    </nav>
+
+    <nav ng-if="loginData.useNphZmsForEvents" mfb-menu position="br" effect="zoomin" label="collapse" active-icon="ion-chevron-down" resting-icon="ion-chevron-up" toggling-method="click">
+
+
+        <a mfb-button icon="ion-skip-backward" label="fast rewind" ng-click="adjustSpeed('fr');"></a>
+        <a mfb-button icon="ion-skip-forward" label="fast forward" ng-click="adjustSpeed('ff');"></a>
+        <a mfb-button icon="ion-play" label="normal play" ng-click="adjustSpeed('np');"></a>
+
+        <a mfb-button icon="ion-pause" label="pause" ng-click="adjustSpeed('p');"> </a>
+
+    </nav>
+
+
+
+    <div class="events-range-modal-text">showing event: {{d_eventId}}</div>
+
+    <div id="flyoutmenu" style="position:absolute;bottom:100px;left:10px">
+        <ul>
+            <li ng-if="defaultVideo==''">
+                <a href="" ng-click="toggleGapless()"> <i class="ion-ios-loop-strong"></i>-{{loginData.gapless?"on":"off"}}</a>
+            </li>
+
+            <li ng-if="defaultVideo==''">
+                <a href="" ng-click="saveEventImageToPhone(false)"> <i class="ion-ios-camera"></i></a>
+            </li>
+
+            <li ng-if="defaultVideo==''">
+                <a href="" ng-click="saveEventImageToPhone(true)"> <i class="ion-android-notifications"></i></a>
+            </li>
+
+            <li ng-if="$root.isAlarm">
+                <a data-badge="{{$root.alarmCount}}" class="notification-badge animated infinite tada" href="" ng-click="handleAlarms()"><i class="ion-ios-bell"></i></a>
+            </li>
+
+
+
+        </ul>
+
+    </div>
+
+</div>
\ No newline at end of file