various tweaks for playback of events

Former-commit-id: 49b3055c54e7832d5f3264b8f280084924f607d6

5 files changed, 74 insertions, 53 deletions

diff --git a/www/external/angular-carousel.js b/www/external/angular-carousel.js
index 3f3d24c9..452ea227 100644
--- a/www/external/angular-carousel.js
+++ b/www/external/angular-carousel.js
@@ -29,7 +29,7 @@ angular.module('angular-carousel')
 // so slide does not progress if image is not loaded or gets an error
 // imageLoadingDataShare is the factory that has a value
 // of 0 if no image is being loaded, -1 if there was an error and 1 if an image is currently being loaded
-.directive('rnCarouselAutoSlide', ['$interval','$timeout', 'imageLoadingDataShare', 'stopOrPlay', function($interval,$timeout, imageLoadingDataShare, stopOrPlay ) {
+.directive('rnCarouselAutoSlide', ['$interval','$timeout', 'imageLoadingDataShare', 'carouselUtils', function($interval,$timeout, imageLoadingDataShare, carouselUtils ) {
   return {
     restrict: 'A',
     link: function (scope, element, attrs) {
@@ -38,14 +38,16 @@ angular.module('angular-carousel')
         var stopAutoPlay = function() {
             if (scope.autoSlider) {
 		//console.log ("Cancelling timer");
-                $interval.cancel(scope.autoSlider);
+                //$interval.cancel(scope.autoSlider);
                 scope.autoSlider = null;
             }
         };
         var restartTimer = function() {
-	    if (stopOrPlay.isStopped() == false)
+	    //console.log ("restart timer");
+	    if (carouselUtils.isStopped() == false)
 	    {
-	    	//console.log ("Timer restart rnForceStop "+ stopOrPlay.get());
+	    	//console.log ("Timer restart rnForceStop "+ carouselUtils.get());
+		//console.log ("Calling autoslide because isStopped is false");
             	scope.autoSlide();
 	    }
 	    else {console.log ("Not sliding as stop=true");}
@@ -53,21 +55,21 @@ angular.module('angular-carousel')
 	//PP - don't auto play if user taps
 	var toggleAutoPlay = function() {
 		//scope.rnForceStop = !scope.rnForceStop;
-		stopOrPlay.set(!stopOrPlay.get());
-		//console.log ("Autoplay is " + stopOrPlay.get());
+		carouselUtils.setStop(!carouselUtils.getStop());
+		//console.log ("Autoplay is " + carouselUtils.get());
 		if (scope.autoSlider )
 		{
             // PP - If autoslide was on and we tapped, stop auto slide
 			//scope.rnForceStop = true; //PP
-			stopOrPlay.set (true);
-			console.log ("***RN: Stopping Play rnForceStop is "+stopOrPlay.get());
+			carouselUtils.setStop (true);
+			console.log ("***RN: Stopping Play rnForceStop is "+carouselUtils.getStop());
 			stopAutoPlay();
 		}
 		else
 		{
 			//scope.rnForceStop = false; //PP
-			stopOrPlay.set (false);
-			console.log ("***RN: Starting Play rnForceStop is "+stopOrPlay.get());
+			carouselUtils.setStop (false);
+			console.log ("***RN: Starting Play rnForceStop is "+carouselUtils.getStop());
 			restartTimer();
 		}
 	};
@@ -75,7 +77,7 @@ angular.module('angular-carousel')
 // start with autoplay and require tap to stop
 	console.log ("*** Setting rnForceStop to false and watching");
 	//scope.rnForceStop = false; // PP
-	stopOrPlay.set (false);
+	carouselUtils.setStop (false);
         scope.$watch('carouselIndex', restartTimer);
 
         if (attrs.hasOwnProperty('rnCarouselPauseOnHover') && attrs.rnCarouselPauseOnHover !== 'false'){
@@ -250,15 +252,15 @@ angular.module('angular-carousel').run(['$templateCache', function($templateCach
     }])
 
     //PP
-    .factory ('stopOrPlay', function() {
-	var stoporplay = false;
+    .factory ('carouselUtils', function() {
+	var isstopped = false;
 	var duration = 0;
 	return {
 
 		setDuration: function (val)
 		{
 			duration = val;
-			console.log (">>>>>>>>>>>>>>>> DURATION SET TO " + duration);
+			console.log (">>>>>>>>>>>>>>>> DURATION SET TO (secs) " + duration);
 		},
 
 		getDuration: function ()
@@ -266,21 +268,21 @@ angular.module('angular-carousel').run(['$templateCache', function($templateCach
 			return duration;
 		},
 		
-		set: function(val)
+		setStop: function(val)
 		{
-			stoporplay = val;
+			isstopped = val;
 		},
-		get: function()
+		getStop: function()
 		{
-			return stoporplay;
+			return isstopped;
 		},
 		isStopped: function()
 		{
-			return stoporplay;
+			return isstopped;
 		},
 		hello: function()
 		{
-			console.log ("Hello from stopOrPlay");
+			console.log ("Hello from carouselUtils");
 		}
 
 	}
@@ -297,8 +299,8 @@ angular.module('angular-carousel').run(['$templateCache', function($templateCach
         };
     })
 
-    .directive('rnCarousel', ['$swipe', '$window', '$document', '$parse', '$compile', '$timeout', '$interval', 'computeCarouselSlideStyle', 'createStyleString', 'Tweenable', 'imageLoadingDataShare', 'stopOrPlay',
-        function($swipe, $window, $document, $parse, $compile, $timeout, $interval, computeCarouselSlideStyle, createStyleString, Tweenable, imageLoadingDataShare, stopOrPlay) {
+    .directive('rnCarousel', ['$swipe', '$window', '$document', '$parse', '$compile', '$timeout', '$interval', 'computeCarouselSlideStyle', 'createStyleString', 'Tweenable', 'imageLoadingDataShare', 'carouselUtils',
+        function($swipe, $window, $document, $parse, $compile, $timeout, $interval, computeCarouselSlideStyle, createStyleString, Tweenable, imageLoadingDataShare, carouselUtils) {
             // internal ids to allow multiple instances
             var carouselId = 0,
                 // in absolute pixels, at which distance the slide stick to the edge on release
@@ -430,7 +432,7 @@ angular.module('angular-carousel').run(['$templateCache', function($templateCach
                         }
 
                         scope.nextSlide = function(slideOptions) {
-			   if (stopOrPlay.isStopped()==true)
+			   if (carouselUtils.isStopped()==true)
 				return;
 			   
                             var index = scope.carouselIndex + 1;
@@ -443,12 +445,8 @@ angular.module('angular-carousel').run(['$templateCache', function($templateCach
 			// and we don't mess up the rate
                           if (imageLoadingDataShare.get() != 1) // PP- If the image is still being loaded, hold on, don't change
 			   {
-				//if (!locked ) {
-				if (1 ) {
-                               		 goToSlide(index, slideOptions);
-                            	}
+                               	goToSlide(index, slideOptions);
 			//	console.log ("loaded carousel is " + scope.carouselIndex);
-			//console.log ("Image is still loading, not skipping slides");
 
 			   }  
 			   else
@@ -457,9 +455,11 @@ angular.module('angular-carousel').run(['$templateCache', function($templateCach
 				// so playback total time is not affected
 			
                                 scope.carouselIndex = index;
+				//console.log ("Image is still loading, not skipping slides, index at "+index);
                                 updateBufferIndex();
 				//console.log ("NOT LOADED but advancing carousel to " + scope.carouselIndex);
-			   }
+			   	
+}
 			   
                         };
 
@@ -590,16 +590,17 @@ angular.module('angular-carousel').run(['$templateCache', function($templateCach
                         if (iAttributes.rnCarouselAutoSlide!==undefined) {
                             // PP was parseInt, changed to parseFloat so I can specify fractions of seconds
                             var duration = parseFloat(iAttributes.rnCarouselAutoSlide, 10) || options.autoSlideDuration;
-			    stopOrPlay.setDuration(duration);
+			    carouselUtils.setDuration(duration);
 			    console.log ("Setting duration - should only happen once");
                             scope.autoSlide = function() {
+				//console.log ("Inside autoslide");
                                 if (scope.autoSlider) {
-                                    $interval.cancel(scope.autoSlider);
+                                    //$interval.cancel(scope.autoSlider);
                                     scope.autoSlider = null;
                                 }
-				if (stopOrPlay.isStopped() == false) //PP - don't move slide if this variable is set
+				if (carouselUtils.isStopped() == false) //PP - don't move slide if this variable is set
 				{
-					var mydur = stopOrPlay.getDuration();
+					var mydur = carouselUtils.getDuration();
 
 					// what happens if mydur needs to be less than a millisecond?
 					var mydurms = mydur * 1000.0;
@@ -611,7 +612,7 @@ angular.module('angular-carousel').run(['$templateCache', function($templateCach
 						
 					}
 					//console.log ("Setting next slide duration at " + mydur *1000);
-                                	scope.autoSlider = $interval(function() {
+                                	scope.autoSlider = $timeout(function() {
 					//console.log ("setting time to " + mydurms);
                                     	//if (!locked && !pressed ) {
                                     	if (1 ) {
@@ -641,7 +642,7 @@ angular.module('angular-carousel').run(['$templateCache', function($templateCach
                             if (angular.isFunction(indexModel.assign)) {
                                 /* check if this property is assignable then watch it */
                                 scope.$watch('carouselIndex', function(newValue) {
-				    if (stopOrPlay.isStopped() == false)
+				    if (carouselUtils.isStopped() == false)
                                     	updateParentIndex(newValue);
                                 });
 				scope.$parent.$watch(function () {
diff --git a/www/js/ModalCtrl.js b/www/js/ModalCtrl.js
index 5093f100..1e3a8e80 100644
--- a/www/js/ModalCtrl.js
+++ b/www/js/ModalCtrl.js
@@ -4,7 +4,7 @@
 /* global saveAs, cordova,StatusBar,angular,console,ionic, moment */
 
 
-angular.module('zmApp.controllers').controller('ModalCtrl', ['$scope', '$rootScope', 'zm', 'ZMDataModel', '$ionicSideMenuDelegate', '$timeout', '$interval', '$ionicModal', '$ionicLoading', '$http', '$state', '$stateParams', '$ionicHistory', '$ionicScrollDelegate', '$q', '$sce', 'stopOrPlay', function ($scope, $rootScope, zm, ZMDataModel, $ionicSideMenuDelegate, $timeout, $interval, $ionicModal, $ionicLoading, $http, $state, $stateParams, $ionicHistory, $ionicScrollDelegate, $q, $sce, stopOrPlay) {
+angular.module('zmApp.controllers').controller('ModalCtrl', ['$scope', '$rootScope', 'zm', 'ZMDataModel', '$ionicSideMenuDelegate', '$timeout', '$interval', '$ionicModal', '$ionicLoading', '$http', '$state', '$stateParams', '$ionicHistory', '$ionicScrollDelegate', '$q', '$sce', 'carouselUtils', function ($scope, $rootScope, zm, ZMDataModel, $ionicSideMenuDelegate, $timeout, $interval, $ionicModal, $ionicLoading, $http, $state, $stateParams, $ionicHistory, $ionicScrollDelegate, $q, $sce, carouselUtils) {
 
 
     // from parent scope
@@ -616,23 +616,23 @@ angular.module('zmApp.controllers').controller('ModalCtrl', ['$scope', '$rootSco
         
             case "super":
                 $scope.eventSpeed = 20/$scope.event.Event.Frames;
-                stopOrPlay.setDuration($scope.eventSpeed);
+                carouselUtils.setDuration($scope.eventSpeed);
                 break;
             case "normal":
                $scope.eventSpeed = $scope.event.Event.Length/$scope.event.Event.Frames;
                 //$scope.eventSpeed = 5;
-                stopOrPlay.setDuration($scope.eventSpeed);
+                carouselUtils.setDuration($scope.eventSpeed);
                 
                 break;
             case "faster":
                 $scope.eventSpeed = $scope.eventSpeed / 2;
                 if ($scope.eventSpeed <20/$scope.event.Event.Frames)
                         $scope.eventSpeed = 10/$scope.event.Event.Frames;
-                stopOrPlay.setDuration($scope.eventSpeed);
+                carouselUtils.setDuration($scope.eventSpeed);
                 break;
             case "slower":
                  $scope.eventSpeed = $scope.eventSpeed * 2;
-                 stopOrPlay.setDuration($scope.eventSpeed);
+                 carouselUtils.setDuration($scope.eventSpeed);
                 
                 break;
             default:
@@ -1064,7 +1064,7 @@ angular.module('zmApp.controllers').controller('ModalCtrl', ['$scope', '$rootSco
     {
          $scope.$watch('ionRange.index', function () {
           //  
-            if (stopOrPlay.get() == true)
+            if (carouselUtils.getStop() == true)
                     return;
             $scope.mycarousel.index = parseInt($scope.ionRange.index) - 1;
            //  console.log ("***ION RANGE CHANGED TO " + $scope.mycarousel.index);
@@ -1091,13 +1091,13 @@ angular.module('zmApp.controllers').controller('ModalCtrl', ['$scope', '$rootSco
                     if (!$scope.modal ||  $scope.modal.isShown()==false)
                     {
                         console.log ("quick scrub playback over");
-                        stopOrPlay.set(true);
+                        carouselUtils.setStop(true);
                         $scope.ionRange.index = 0;
                         $scope.mycarousel.index = 1;
                     }
                    
                 }
-            if (stopOrPlay.get() == true)
+            if (carouselUtils.getStop() == true)
                     return;
             $scope.ionRange.index = ($scope.mycarousel.index + 1).toString();
            // console.log ("***IONRANGE RANGE CHANGED TO " + $scope.ionRange.index);
diff --git a/www/js/app.js b/www/js/app.js
index 1d81f958..d9df6594 100644
--- a/www/js/app.js
+++ b/www/js/app.js
@@ -1,6 +1,6 @@
 /* jshint -W041 */
 /* jslint browser: true*/
-/* global cordova,StatusBar,angular,console,alert,PushNotification, moment */
+/* global cordova,StatusBar,angular,console,alert,PushNotification, moment ,ionic */
 
 
 var appVersion = "0.0.0";
@@ -135,8 +135,8 @@ angular.module('zmApp', [
 // This directive is adapted from https://github.com/paveisistemas/ionic-image-lazy-load
 // I've removed lazyLoad and only made it show a spinner when an image is loading
 //--------------------------------------------------------------------------------------------
-.directive('imageSpinnerSrc', ['$document', '$compile', 'imageLoadingDataShare',
-    function ($document, $compile, imageLoadingDataShare) {
+.directive('imageSpinnerSrc', ['$document', '$compile', 'imageLoadingDataShare', '$timeout',
+    function ($document, $compile, imageLoadingDataShare, $timeout) {
         return {
             restrict: 'A',
             scope: {
@@ -164,22 +164,40 @@ angular.module('zmApp', [
                 $element.bind('error', function () {
                     // console.log ("DIRECTIVE: IMAGE ERROR");
                     loader.remove();
-                    imageLoadingDataShare.set(0);
+                    
 
                     var url = 'img/novideo.png';
                     $element.prop('src', url);
+                    imageLoadingDataShare.set(0);
                 });
+                
+                function waitForFrame1()
+                    {
+                        ionic.DomUtil.requestAnimationFrame (
+                            function () {imageLoadingDataShare.set(0); 
+                                         //console.log ("IMAGE LOADED");
+                                        });
+                        
+                    }
 
                 function loadImage() {
                     $element.bind("load", function (e) {
                         if ($attributes.imageSpinnerLoader) {
-                            // console.log ("DIRECTIVE: IMAGE LOADED");
+                            //console.log ("DIRECTIVE: IMAGE LOADED");
                             loader.remove();
-                            imageLoadingDataShare.set(0);
+                            //imageLoadingDataShare.set(0);
+                            //console.log ("rendered");
+                            
+                            // lets wait for 2 frames for animation
+                            // to render - hoping this will improve tear 
+                            // of images
+                           ionic.DomUtil.requestAnimationFrame (
+                               function () {waitForFrame1();});
+                            
                         }
                     });
 
-
+                    
 
 
                     if ($scope.imageSpinnerBackgroundImage == "true") {
@@ -189,7 +207,9 @@ angular.module('zmApp', [
                                 loader.remove();
                             }
                             // set style attribute on element (it will load image)
-                            $element[0].style.backgroundImage = 'url(' + $attributes.imageSpinnerSrc + ')';
+                              if (imageLoadingDataShare.get() != 1) 
+                              
+                                $element[0].style.backgroundImage = 'url(' + $attributes.imageSpinnerSrc + ')';
                         };
                         bgImg.src = $attributes.imageSpinnerSrc;
                         
diff --git a/www/templates/events-modal.html b/www/templates/events-modal.html
index 84a983da..a09a5575 100644
--- a/www/templates/events-modal.html
+++ b/www/templates/events-modal.html
@@ -14,7 +14,7 @@
                             
                             
 <!--Speed:{{eventSpeed}}-->
-<ul rn-carousel rn-carousel-buffered 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>
+<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">
diff --git a/www/templates/events.html b/www/templates/events.html
index 57dbf082..b0fb3a43 100644
--- a/www/templates/events.html
+++ b/www/templates/events.html
@@ -133,7 +133,7 @@
                         
                         
                         <div ng-if="groupType=='alarms'">
-                            <br/>
+                            <br/><br/>
                           
                             <div style="height:190px">
                                 <p>scroll <i class="icon ion-arrow-left-c"></i>