gapless playback control as well as control for image quality in event view

7 files changed, 93 insertions, 24 deletions

diff --git a/www/css/style.css b/www/css/style.css
index b3afe635..615dae78 100644
--- a/www/css/style.css
+++ b/www/css/style.css
@@ -204,6 +204,16 @@ http://www.cssportal.com/tryit/index.php?file=blog/css-notification-badge */
     opacity:1;
 }
 
+
+.events-modal-gapless-icon
+{
+    position:absolute;
+    bottom:120px;
+    left:20px;
+    z-index:10;
+    opacity:0.7;
+}
+
 .events-range
 {
     position:absolute;
diff --git a/www/js/DataModel.js b/www/js/DataModel.js
index c6a7dba7..4afd4ad4 100644
--- a/www/js/DataModel.js
+++ b/www/js/DataModel.js
@@ -35,6 +35,7 @@ angular.module('zmApp.controllers')
         'streamingurl': "",
         'maxFPS': "3", // image streaming FPS
         'montageQuality': "50", // montage streaming quality in %
+        'singleImageQuality': "50", // single streaming quality in %
         'useSSL':false, // "1" if HTTPS
         'keepAwake':true, // don't dim/dim during live view
         'isUseAuth':true, // true if user wants ZM auth
@@ -50,6 +51,7 @@ angular.module('zmApp.controllers')
         'persistMontageOrder':false,
          'onTapScreen':'events',
          'enableh264':true,
+         'gapless':false,
         
     };
      
@@ -209,6 +211,12 @@ angular.module('zmApp.controllers')
                     window.localStorage.getItem("montageQuality");
 
             }
+            
+            if (window.localStorage.getItem("singleImageQuality") != undefined) {
+                loginData.singleImageQuality =
+                    window.localStorage.getItem("singleImageQuality");
+
+            }
 
             if (window.localStorage.getItem("password") != undefined) {
                 loginData.password =
@@ -278,6 +286,14 @@ angular.module('zmApp.controllers')
                 console.log("montageQuality  " + loginData.montageQuality);
 
             }
+            
+            if (window.localStorage.getItem("singleImageQuality") != undefined) {
+                loginData.singleImageQuality =
+                    window.localStorage.getItem("singleImageQuality");
+               
+
+            }
+            
              if (window.localStorage.getItem("useSSL") != undefined) {
                  var sslvalue =  window.localStorage.getItem("useSSL");
                 loginData.useSSL = (sslvalue == "1") ? true:false;
@@ -302,6 +318,10 @@ angular.module('zmApp.controllers')
                 loginData.enableh264 = (enableh264 == "1") ? true:false;
             }
             
+            if (window.localStorage.getItem("gapless") != undefined) {
+                var gapless = window.localStorage.getItem("gapless");
+                loginData.gapless = (gapless == "1") ? true:false;
+            }
             
             if (window.localStorage.getItem("usePin") != undefined) {
                  var pinValue =  window.localStorage.getItem("usePin");
@@ -436,7 +456,8 @@ angular.module('zmApp.controllers')
             window.localStorage.setItem("canSwipeMonitors", loginData.canSwipeMonitors?"1":"0");
             window.localStorage.setItem("persistMontageOrder", loginData.persistMontageOrder?"1":"0");
             
-             window.localStorage.setItem("enableh264", loginData.enableh264?"1":"0");
+            window.localStorage.setItem("enableh264", loginData.enableh264?"1":"0");
+            window.localStorage.setItem("gapless", loginData.gapless?"1":"0");
             
             window.localStorage.setItem("pinCode", loginData.pinCode);
             
@@ -445,6 +466,7 @@ angular.module('zmApp.controllers')
             window.localStorage.setItem("keepAwake", loginData.keepAwake?"1":"0");
             window.localStorage.setItem("maxMontage", loginData.maxMontage);
             window.localStorage.setItem("montageQuality", loginData.montageQuality);
+              window.localStorage.setItem("singleImageQuality", loginData.singleImageQuality);
             window.localStorage.setItem("refreshSec", loginData.refreshSec);
             
             
diff --git a/www/js/DevOptionsCtrl.js b/www/js/DevOptionsCtrl.js
index fe92877d..57e694df 100644
--- a/www/js/DevOptionsCtrl.js
+++ b/www/js/DevOptionsCtrl.js
@@ -82,6 +82,12 @@ angular.module('zmApp.controllers').controller('zmApp.DevOptionsCtrl', ['$scope'
             (parseInt($scope.loginData.montageQuality) > 70)) {
             $scope.loginData.montageQuality = zm.defaultMontageQuality.toString();
         }
+        
+        
+        if ((parseInt($scope.loginData.singleImageQuality) < zm.safeImageQuality) ||
+            (parseInt($scope.loginData.singleImageQuality) > 100)) {
+            $scope.loginData.singleImageQuality = zm.safeImageQuality.toString();
+        }
 
 
         ZMDataModel.zmDebug("SaveDevOptions: Saving to disk");
diff --git a/www/js/EventCtrl.js b/www/js/EventCtrl.js
index 5e9cff09..0f16ed31 100644
--- a/www/js/EventCtrl.js
+++ b/www/js/EventCtrl.js
@@ -657,21 +657,30 @@ angular.module('zmApp.controllers')
         {
             // currentEvent is updated with the currently playing event in prepareModalEvent()
             ZMDataModel.zmLog ("Playback of event " + currentEvent.Event.Id + " is finished");
-            neighborEvents(currentEvent.Event.Id)
-                            .then(function (success) {
-                
-                                    // lets give a second before gapless transition to the next event
-                                    $timeout ( function() {
-                                    $scope.nextId = success.next;
-                                    $scope.prevId = success.prev;
-                                    ZMDataModel.zmDebug ("Gapless move to event " + $scope.nextId);
-                                    jumpToEvent($scope.nextId, 1);
-                                    },1000);
-                                },
-                                function (error) {
-                                    ZMDataModel.zmDebug("Error in neighbor call " + JSON.stringify(error));
-                                });
             
+            if ($scope.loginData.gapless)
+            {
+            
+                neighborEvents(currentEvent.Event.Id)
+                                .then(function (success) {
+
+                                        // lets give a second before gapless transition to the next event
+                                        $timeout ( function() {
+                                        $scope.nextId = success.next;
+                                        $scope.prevId = success.prev;
+                                        ZMDataModel.zmDebug ("Gapless move to event " + $scope.nextId);
+                                        jumpToEvent($scope.nextId, 1);
+                                        },1000);
+                                    },
+                                    function (error) {
+                                        ZMDataModel.zmDebug("Error in neighbor call " +
+                                                            JSON.stringify(error));
+                                    });
+            }
+            else
+            {
+                ZMDataModel.zmDebug ("not going to next event, gapless is off");
+            }
         }
 
         //-------------------------------------------------------------------------
@@ -1226,7 +1235,14 @@ angular.module('zmApp.controllers')
 
         }
 
-
+        $scope.toggleGapless = function()
+        {
+            
+            $scope.loginData.gapless = !$scope.loginData.gapless;
+            ZMDataModel.setLogin($scope.loginData);
+            
+        };
+        
         //--------------------------------------------------------
         //Navigate to next/prev event in full screen mode
         //--------------------------------------------------------
diff --git a/www/js/app.js b/www/js/app.js
index eda3db27..dcc80ae6 100644
--- a/www/js/app.js
+++ b/www/js/app.js
@@ -43,6 +43,7 @@ angular.module('zmApp', [
     loginInterval: 300000, //5m*60s*1000 - ZM auto login after 5 mins
     loadingTimeout: 15000,
     safeMontageLimit: 10,
+    safeImageQuality:10,
     maxFPS: 30,
     defaultFPS: 3,
     maxMontageQuality: 70,
diff --git a/www/templates/devoptions.html b/www/templates/devoptions.html
index 0be0758f..dfefa7d2 100644
--- a/www/templates/devoptions.html
+++ b/www/templates/devoptions.html
@@ -18,37 +18,46 @@
             </span>
 
              <div class="item item-input-inset">
-                frame update (seconds)&nbsp;
+                Playback Frame update (seconds)&nbsp;
                 <label class="item-input-wrapper">
                     <input type="tel" placeholder="min is 1s" ng-model="loginData.refreshSec">
                 </label>
             </div>
             
             <div class="item item-input-inset">
-                Max Monitors in Montage&nbsp;
+                Max monitors in montage&nbsp;
                 <label class="item-input-wrapper">
                     <input type="tel" placeholder="be careful" ng-model="loginData.maxMontage">
                 </label>
             </div>
 
+            <!--
             <div class="item item-input-inset">
-                Max FPS for streaming&nbsp;
+                maxfps for streaming&nbsp;
                 <label class="item-input-wrapper">
                     <input type="tel" placeholder="max is 30" ng-model="loginData.maxFPS">
                 </label>
             </div>
+            -->
 
             <div class="item item-input-inset">
-                Montage Streaming Quality(%)&nbsp;
+                Montage event scale(%)&nbsp;
                 <label class="item-input-wrapper">
                     <input type="tel" placeholder="max is 70" ng-model="loginData.montageQuality">
                 </label>
             </div>
             
+            <div class="item item-input-inset">
+                 Event image scale(%)&nbsp;
+                <label class="item-input-wrapper">
+                    <input type="tel" placeholder="" ng-model="loginData.singleImageQuality">
+                </label>
+            </div>
+            
             <label>
             <ion-toggle ng-model="loginData.enableDebug"
                         ng-checked="{{loginData.enableDebug}}"
-                        toggle-class="toggle-calm">Enable Debug Logs</ion-toggle>
+                        toggle-class="toggle-calm">Enable debug logs</ion-toggle>
             </label>
             
             <label>
diff --git a/www/templates/events-modal.html b/www/templates/events-modal.html
index dc0d448b..54340bd3 100644
--- a/www/templates/events-modal.html
+++ b/www/templates/events-modal.html
@@ -13,7 +13,7 @@
                             <li ng-repeat="slide in slides">
                                 <div ng-if="!animationInProgress">
                                     <img  imageonload="finishedLoadingImage($index)" 
-                                         image-spinner-src="{{playbackURL}}/index.php?view=image&rand={{$root.rand}}&path={{relativePath}}{{slide.img}}&scale=100" 
+                                         image-spinner-src="{{playbackURL}}/index.php?view=image&rand={{$root.rand}}&path={{relativePath}}{{slide.img}}&scale={{loginData.singleImageQuality}}" 
                                          image-spinner-loader="lines" 
                                          ng-class="{'zm-image-fit':imageFit==true, 'zm-image-crop':imageFit==false}" />
                                 </div>
@@ -93,12 +93,17 @@
 
 </div>
 
-<div class="events-range-modal-text" >playing event: {{eventId}}</div>
+<div class="events-range-modal-text" >showing event: {{eventId}}</div>
 
 <span class="event-modal-alarm-badge">
             <a data-badge="{{$root.alarmCount}}" class="animated infinite tada button icon  ion-ios-bell notification-badge button-assertive" 
                     ng-click="handleAlarms();" ng-if="$root.isAlarm" ></a>
-        </span>
+</span>
+
+
+<span class="events-modal-gapless-icon">
+        <a ng-class="loginData.gapless? 'button button-small button-stable' : 'button button-small button-assertive' " href="" ng-click="toggleGapless()">gapless: {{loginData.gapless?"on":"off"}}</a>
+    </span>
 
 <!--
     <nav mfb-menu position="bl" effect="zoomin" label="collapse"