video playback mods

6 files changed, 37 insertions, 8 deletions

diff --git a/config.xml b/config.xml
index e608d999..af743578 100644
--- a/config.xml
+++ b/config.xml
@@ -186,6 +186,9 @@
     <plugin name="cordova-plugin-app-version" spec="0.1.9" />
     <plugin name="cordova-plugin-inappbrowser" spec="https://github.com/apache/cordova-plugin-inappbrowser.git" />
     <plugin name="cordova-plugin-statusbar" spec="~2.4.4-dev" />
+    <plugin name="cordova-plugin-ionic-webview" spec="https://github.com/pliablepixels/cordova-plugin-ionic-webview.git">
+        <variable name="ANDROID_SUPPORT_ANNOTATIONS_VERSION" value="27.+" />
+    </plugin>
     <plugin name="cordova-plugin-media-pp-fork" spec="^1.0.2-dev" />
     <engine name="android" spec="8.0.0" />
     <engine name="ios" spec="5.1.1" />
diff --git a/package.json b/package.json
index f85c8304..609cc8e4 100644
--- a/package.json
+++ b/package.json
@@ -61,6 +61,9 @@
       "cordova-plugin-inappbrowser": {},
       "cordova-plugin-app-version": {},
       "cordova-plugin-statusbar-pp-fork": {},
+      "cordova-plugin-ionic-webview": {
+        "ANDROID_SUPPORT_ANNOTATIONS_VERSION": "27.+"
+      },
       "cordova-plugin-media-pp-fork": {}
     }
   },
@@ -86,6 +89,7 @@
     "cordova-plugin-inappbrowser": "git+https://github.com/apache/cordova-plugin-inappbrowser.git",
     "cordova-plugin-insomnia": "^4.3.0",
     "cordova-plugin-ionic-keyboard": "2.2.0",
+    "cordova-plugin-ionic-webview": "git+https://github.com/pliablepixels/cordova-plugin-ionic-webview.git",
     "cordova-plugin-media-pp-fork": "^1.0.2-dev",
     "cordova-plugin-multi-window": "0.0.3",
     "cordova-plugin-network-information": "^2.0.2",
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">