From b721eaa84b5d2ba607daf3a1496515405d208297 Mon Sep 17 00:00:00 2001
From: Arjun Roychowdhury <pliablepixels@gmail.com>
Date: Wed, 4 Nov 2015 11:54:16 -0500
Subject: animated screens as well

---
 www/css/style.css               |  4 ++--
 www/js/EventCtrl.js             | 11 +++++------
 www/templates/events-modal.html | 23 ++++++++++++++++++-----
 3 files changed, 25 insertions(+), 13 deletions(-)

diff --git a/www/css/style.css b/www/css/style.css
index 91ce9830..042b9ee8 100644
--- a/www/css/style.css
+++ b/www/css/style.css
@@ -220,7 +220,7 @@ http://www.cssportal.com/tryit/index.php?file=blog/css-notification-badge */
     position:absolute;
     bottom:60px;
     left:30px;
-    z-index:10;
+    z-index:99;
     opacity:0.7;
     width:70%;
 }
@@ -228,7 +228,7 @@ http://www.cssportal.com/tryit/index.php?file=blog/css-notification-badge */
 .events-range-modal-text 
 {
     position:absolute;
-    bottom:20px;
+    bottom:10px;
     right:10px;
     z-index:10;
     opacity:0.7;
diff --git a/www/js/EventCtrl.js b/www/js/EventCtrl.js
index df63ed16..00bec5d3 100644
--- a/www/js/EventCtrl.js
+++ b/www/js/EventCtrl.js
@@ -16,7 +16,7 @@ angular.module('zmApp.controllers')
         // Controller main
         //---------------------------------------------------
 
-
+        $scope.animationInProgress = false;
         var loginData = ZMDataModel.getLogin();
 
         $scope.hours = [];
@@ -1170,26 +1170,25 @@ angular.module('zmApp.controllers')
             var element = angular.element(document.getElementById("full-screen-event"));
             element.addClass(slideout).one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', outWithOld);
             
+            
+            
             function outWithOld()
             {
                 element.removeClass(slideout);
                 prepareModalEvent(eid);
+                $scope.animationInProgress = true;
                 element.addClass(slidein).one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', inWithNew );
             }
             
             function inWithNew()
             {
                 element.removeClass(slidein);
+                $scope.animationInProgress = false;
             }
 
 
         };
         
-        
-        
-        
-
-        
         //--------------------------------------------------------
         // utility function
         //--------------------------------------------------------
diff --git a/www/templates/events-modal.html b/www/templates/events-modal.html
index 46bffd06..a57e2bcf 100644
--- a/www/templates/events-modal.html
+++ b/www/templates/events-modal.html
@@ -4,15 +4,26 @@
         <ion-content style="background-color:#444444" ng-cloak>
 
             <ion-scroll has-bouncing=false min-zoom=1 zooming="true" direction="xy" style="width: 100%; ">
-                <div  style="height: 100vh;">
+                <div  id="full-screen-event" style="height: 100vh;">
 
 
                     <div ng-if="defaultVideo=='' || loginData.enableh264==false">
                         <ul rn-carousel rn-carousel-buffered rn-carousel-transition="none" rn-swipe-disabled="true" rn-carousel-index="mycarousel.index" rn-carousel-auto-slide="{{calcMsTimer(eFramesNum, eventDur)/1000.0}}" rn-carousel-pause-on-hover  rn-platform="{{$root.platformOS}}">
 
                             <li ng-repeat="slide in slides">
-
-                                <img  imageonload="finishedLoadingImage($index)" image-spinner-src="{{playbackURL}}/index.php?view=image&rand={{$root.rand}}&path={{relativePath}}{{slide.img}}&scale=100" image-spinner-loader="lines" ng-class="{'zm-image-fit':imageFit==true, 'zm-image-crop':imageFit==false}" />
+                                <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-loader="lines" 
+                                         ng-class="{'zm-image-fit':imageFit==true, 'zm-image-crop':imageFit==false}" />
+                                </div>
+                                <div ng-if="animationInProgress">
+                                    <img  imageonload="finishedLoadingImage($index)" 
+                                         image-spinner-src="img/pausevideo.png" 
+                                         image-spinner-loader="lines" 
+                                         ng-class="{'zm-image-fit':imageFit==true, 'zm-image-crop':imageFit==false}" />
+                                </div>
+                                
 
                                 <!--<img id="hello" imageonload="finishedLoadingImage($index)"
                                 image-spinner-src="{{eventBasePath}}{{slide.img}}?rand={{rand}}"
@@ -33,7 +44,7 @@
                         </div>
                       
                     </div>
-
+                    
 
                 </div>
                 <!-- 100vh -->
@@ -61,7 +72,7 @@
     <a mfb-button icon="ion-close" label="exit event view" ng-click="closeModal()"> </a>
 
 </nav>
-<div class="events-range-modal-text" id="full-screen-event">playing event: {{eventId}}</div>
+
 <div class="events-range-modal" ng-if="defaultVideo==''">
 
     <div style="width:90%">
@@ -71,6 +82,8 @@
 
 </div>
 
+<div class="events-range-modal-text" >playing 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>
-- 
cgit v1.2.3