diff options
Diffstat (limited to 'www')
| -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 |
4 files changed, 30 insertions, 8 deletions
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"> |