diff options
| -rw-r--r-- | config.xml | 3 | ||||
| -rw-r--r-- | package.json | 4 | ||||
| -rw-r--r-- | www/css/style.css | 10 | ||||
| -rw-r--r-- | www/js/EventCtrl.js | 4 | ||||
| -rw-r--r-- | www/js/EventModalCtrl.js | 14 | ||||
| -rw-r--r-- | www/templates/events-modal.html | 10 |
6 files changed, 37 insertions, 8 deletions
@@ -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"> + + {{'kVideoLoading' | translate}}... + </div> + <div ng-if="videoIsReady"> |