#139 - if use zms is enabled, first grab a snapshot for a quick display and then change to streaming after "x" seconds

Former-commit-id: 0e048c7201a799902ea98395284cf06c8bcd79ff

3 files changed, 43 insertions, 6 deletions

diff --git a/www/js/ModalCtrl.js b/www/js/ModalCtrl.js
index 252ee953..8d36d467 100644
--- a/www/js/ModalCtrl.js
+++ b/www/js/ModalCtrl.js
@@ -47,6 +47,24 @@ angular.module('zmApp.controllers').controller('ModalCtrl', ['$scope', '$rootSco
     var ld = ZMDataModel.getLogin();
     
     $scope.streamMode = ld.useNphZms ? "jpeg":"single";
+    $scope.currentStreamMode = 'single';
+     ZMDataModel.zmLog ("Using stream mode " + $scope.currentStreamMode);
+    
+    if (ld.useNphZms == true)
+    {
+        ZMDataModel.zmLog ("Setting timer to play nph-zms mode");
+        // first 5 seconds, load a snapshot, then switch to real FPS display
+        // this is to avoid initial image load delay
+        // FIXME: 5 seconds fair?
+        $timeout( function()
+                 { 
+                    $scope.currentStreamMode = 'jpeg';
+                    ZMDataModel.zmLog ("Switching playback via nphzms");
+        },zm.nphSwitchTimer);
+    }
+    
+    
+    
     ZMDataModel.zmDebug ("Setting playback to " + $scope.streamMode);
     
     
@@ -274,13 +292,14 @@ $scope.togglePresets = function()
     console.log ("Changing preset to " + $scope.presetOn);
     
       var element = angular.element(document.getElementById("presetlist"));
-
-        if (!$scope.presetOn) {
+        // bring it in
+        if ($scope.presetOn) {
+            element.removeClass("animated fadeOutUp");
+           
+            
+        } else {
             element.removeClass("animated fadeInDown");
             element.addClass("animated fadeOutUp");
-        } else {
-            element.removeClass("animated fadeOutUp");
-            element.addClass("animated fadeInDown");
         }
 
     
@@ -514,6 +533,22 @@ $scope.togglePresets = function()
 
             element.removeClass(slidein);
             $scope.animationInProgress = false;
+            
+            ZMDataModel.zmLog ("New image loaded in");
+            var ld = ZMDataModel.getLogin();
+            if (ld.useNphZms == true)
+            {
+                 $scope.currentStreamMode = 'single';
+                ZMDataModel.zmLog ("Setting timer to play nph-zms mode");
+                // first 5 seconds, load a snapshot, then switch to real FPS display
+                // this is to avoid initial image load delay
+                // FIXME: 5 seconds fair?
+                $timeout( function()
+                         { 
+                            $scope.currentStreamMode = 'jpeg';
+                            ZMDataModel.zmLog ("Switching playback via nphzms");
+                },zm.nphSwitchTimer);
+            }
 
         }
 
diff --git a/www/js/app.js b/www/js/app.js
index 3209e3dd..c9bb9f9b 100644
--- a/www/js/app.js
+++ b/www/js/app.js
@@ -64,6 +64,7 @@ angular.module('zmApp', [
     desktopUrl: "/zm",
     desktopApiUrl: "/api/zm",
     latestRelease: "https://api.github.com/repos/pliablepixels/zmNinja/releases/latest",
+    nphSwitchTimer:6000,
 
 })
 
diff --git a/www/templates/monitors-modal.html b/www/templates/monitors-modal.html
index 9d4abec2..5b7d5670 100644
--- a/www/templates/monitors-modal.html
+++ b/www/templates/monitors-modal.html
@@ -18,9 +18,10 @@
                         
                             
                             <div ng-if="!animationInProgress" >
+                                
                                 <img  style="width:100vw; height:100vh" imageonload="finishedLoadingImage()"
                                      image-spinner-loader="lines"
-                                     image-spinner-src="{{LoginData.streamingurl}}/nph-zms?mode={{streamMode}}&monitor={{monitorId}}{{$root.authSession}}&rand={{$root.modalRand}}" ng-class="{'object-fit_cover':imageFit==false, 'object-fit_contain':imageFit==true}" 
+                                     image-spinner-src="{{LoginData.streamingurl}}/nph-zms?mode={{currentStreamMode}}&monitor={{monitorId}}{{$root.authSession}}&rand={{$root.modalRand}}" ng-class="{'object-fit_cover':imageFit==false, 'object-fit_contain':imageFit==true}" 
                                      on-swipe-left="onSwipe(monitorId,1)" 
                                      on-swipe-right="onSwipe(monitorId,-1)" />