From c68cb8fffba0b2b96ef1bbeba8ee2853653cbd1a Mon Sep 17 00:00:00 2001
From: Pliable Pixels <pliablepixels@gmail.com>
Date: Tue, 28 Apr 2020 10:49:14 -0400
Subject: video playback mods

---
 www/css/style.css               | 10 ++++++++++
 www/js/EventCtrl.js             |  4 +++-
 www/js/EventModalCtrl.js        | 14 ++++++++------
 www/templates/events-modal.html | 10 +++++++++-
 4 files changed, 30 insertions(+), 8 deletions(-)

(limited to 'www')

diff --git a/www/css/style.css b/www/css/style.css
index 49b608c1..56ae80de 100644
--- a/www/css/style.css
+++ b/www/css/style.css
@@ -205,6 +205,16 @@ Credit: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
     transform: translate(-50%, -50%);
 }
 
+.header-centered {
+  background: black;
+  color: #cccccc;
+  border-color: #ba3e3e;
+  border-style: none;
+  opacity: 80%;
+  transform: translate(-50%, -50%);
+} 
+
+
 .event-modal-play {
     opacity: 80%;
     transform: translate(-50%, -50%);
diff --git a/www/js/EventCtrl.js b/www/js/EventCtrl.js
index eed6bc44..b195d6eb 100644
--- a/www/js/EventCtrl.js
+++ b/www/js/EventCtrl.js
@@ -2694,6 +2694,8 @@ angular.module('zmApp.controllers')
         });
     }
 
+
+    
     //--------------------------------------------------------
     //We need to destroy because we are instantiating
     // it on open
@@ -2708,7 +2710,7 @@ angular.module('zmApp.controllers')
         }
       }
      
-      
+      $ionicLoading.hide();
       NVR.setAwake(false);
       if ($scope.modal !== undefined) {
         $scope.modal.remove();
diff --git a/www/js/EventModalCtrl.js b/www/js/EventModalCtrl.js
index 37210c22..2cc08bf7 100644
--- a/www/js/EventModalCtrl.js
+++ b/www/js/EventModalCtrl.js
@@ -245,14 +245,14 @@ angular.module('zmApp.controllers').controller('EventModalCtrl', ['$scope', '$ro
       }
     }
 
-    $ionicLoading.show({
-      template: "<ion-spinner icon='ripple' class='spinner-energized'></ion-spinner><br/>" + $translate.instant('kVideoLoading') + "...",
-
-    });
-
+  
+    $scope.isVideoLoading = true;
+ 
    
   };
 
+  
+
   $scope.onPlaybackUpdate = function (rate) {
    
 
@@ -274,6 +274,7 @@ angular.module('zmApp.controllers').controller('EventModalCtrl', ['$scope', '$ro
   $scope.onCanPlay = function () {
 
     $ionicLoading.hide();
+    $scope.isVideoLoading = false;
     NVR.debug("This video can be played");
     
     var rate = NVR.getLogin().videoPlaybackSpeed;
@@ -1092,7 +1093,7 @@ angular.module('zmApp.controllers').controller('EventModalCtrl', ['$scope', '$ro
     $scope.alarm_images = [];
     $scope.snapshotFrameId = 1;
     currentStreamState = streamState.STOPPED;
-    
+    $scope.isVideoLoading = false;
 
 
   });
@@ -1110,6 +1111,7 @@ angular.module('zmApp.controllers').controller('EventModalCtrl', ['$scope', '$ro
 
   $scope.$on('modal.shown', function (e, m) {
 
+    $scope.isVideoLoading = false;
     $scope.displayControls = true;
     $ionicLoading.hide();
     if (m.id != 'footage')
diff --git a/www/templates/events-modal.html b/www/templates/events-modal.html
index cd34bb0e..531d4488 100644
--- a/www/templates/events-modal.html
+++ b/www/templates/events-modal.html
@@ -53,7 +53,7 @@
                 </div>
               </div>
 
-
+             
 
               <div ng-if="isPaused" style="position:absolute; top:50%; left:50%;white-space:nowrap;overflow:hidden;z-index:999"
                 class="header-paused">
@@ -64,6 +64,14 @@
           </div>
           <!-- no default video -->
           <div ng-if="defaultVideo!==undefined && defaultVideo!='' && !isSnapShot() && !isStreamStopped()">
+
+             
+            <div ng-if="isVideoLoading" style="position:absolute; top:50%; left:50%;white-space:nowrap;overflow:hidden;z-index:999999"
+            class="header-centered animated pulse infinite">
+            &nbsp;
+            {{'kVideoLoading' | translate}}...&nbsp;
+          </div>
+
             <div ng-if="videoIsReady">
 
            
-- 
cgit v1.2.3