diff options
| -rw-r--r-- | www/js/EventCtrl.js | 88 | ||||
| -rw-r--r-- | www/templates/events.html | 16 |
2 files changed, 61 insertions, 43 deletions
diff --git a/www/js/EventCtrl.js b/www/js/EventCtrl.js index d4338370..159a0451 100644 --- a/www/js/EventCtrl.js +++ b/www/js/EventCtrl.js @@ -79,15 +79,46 @@ angular.module('zmApp.controllers') $scope.$on('sizechanged', function() { - recomputeRowHeights(); - recomputeThumbSize(); + //recomputeRowHeights(); + //recomputeThumbSize(); $scope.$apply(); + $ionicScrollDelegate.resize(); // $scope.eventsBeingLoaded = true; - /* $timeout (function() { - $scope.eventsBeingLoaded = false; - },300);*/ + $timeout (function() { + navTitle(); + },300); }); + + $scope.getRowHeight = function (event) { + var ld = NVR.getLogin(); + var rowHeight = 134; // ViewThumbs == none + var scrubHeight = 274; + if (ld.eventViewThumbs != 'none') { + var tempMon = NVR.getMonitorObject(event.Event.MonitorId); + if (tempMon != undefined) { + var mw = parseInt(tempMon.Monitor.Width); + var mh = parseInt(tempMon.Monitor.Height); + var mo = parseInt(tempMon.Monitor.Orientation); + var th = computeThumbnailSize(mw, mh, mo); + event.Event.thumbWidth = th.w; + event.Event.thumbHeight = th.h; + + if (ld.eventViewThumbsSize == 'large') { + rowHeight = th.h + 144; + } + else { + rowHeight = th.h + 82; + } + } + } + if (event.Event.ShowScrub) { + return (rowHeight + scrubHeight); + } + else { + return (rowHeight); + } + }; //we come here is TZ is updated after the view loads var tzu = $scope.$on('tz-updated', function () { @@ -226,19 +257,12 @@ angular.module('zmApp.controllers') if (ld.eventViewThumbsSize == 'large') { NVR.debug ('Switching to big thumbs style'); $scope.thumbClass = 'large'; - $scope.rowHeightRegular = Math.min(450, $rootScope.devWidth); - $scope.rowHeightExpanded = $scope.rowHeightRegular + 230; } else { NVR.debug ('using small thumbs style'); $scope.thumbClass = 'small'; - $scope.rowHeightRegular = Math.min(250, $rootScope.devWidth); - $scope.rowHeightExpanded = $scope.rowHeightRegular + 230; - } } else { NVR.debug ('No thumbs'); - $scope.rowHeightRegular = 170; - $scope.rowHeightExpanded = $scope.rowHeightRegular + 230; } @@ -483,6 +507,7 @@ angular.module('zmApp.controllers') $scope.monitors = message; currEventsPage = 1; maxEventsPage = 1; + $scope.navTitle = ""; if ($scope.monitors.length == 0) { var pTitle = $translate.instant('kNoMonitors'); @@ -574,7 +599,7 @@ angular.module('zmApp.controllers') myevents[i].Event.MonitorName = NVR.getMonitorName(myevents[i].Event.MonitorId); myevents[i].Event.ShowScrub = false; - myevents[i].Event.rowHeight = $scope.rowHeightRegular; + //myevents[i].Event.rowHeight = $scope.rowHeightRegular; // now construct base path @@ -2272,21 +2297,20 @@ angular.module('zmApp.controllers') if (!$ionicScrollDelegate.$getByHandle("mainScroll")) $scope.navTitle = ""; if (!$ionicScrollDelegate.$getByHandle("mainScroll").getScrollPosition()) $scope.navTitle = ""; var scrl = parseFloat($ionicScrollDelegate.$getByHandle("mainScroll").getScrollPosition().top); - eventHeight = $scope.rowHeight; - if (eventHeight == 0 && !$scope.eventsBeingLoaded && document.getElementById('item-0') != null) { - eventHeight = document.getElementById('item-0').offsetHeight; - //NVR.debug("scrl: " + scrl + ", eventHeight: " + eventHeight); - } - var item = 0; - if (eventHeight) { - item = Math.floor(scrl / eventHeight); - } + //NVR.debug("scrl: " + scrl + ", events[0].Event.Height: " + eventHeight + ", item: " + item); - if ($scope.events == undefined || !$scope.events.length || $scope.events[item] == undefined) { + if ($scope.events == undefined || !$scope.events.length) { $scope.navTitle = ""; } else { - //return prettifyDate($scope.events[item].Event.StartTime); - $scope.navTitle = ($scope.events[item].Event.humanizeTime); + var eventHeightCounter = 0; + //loop until we pass the event... + for (var i = 0; i < $scope.events.length; i++) { + eventHeightCounter = eventHeightCounter + $scope.getRowHeight($scope.events[i]); + if ( eventHeightCounter > scrl ) { + $scope.navTitle = ($scope.events[i].Event.humanizeTime); + break; + } + } } $scope.$evalAsync(); //return Math.random(); @@ -2380,6 +2404,8 @@ angular.module('zmApp.controllers') oldEvent.Event.ShowScrub = false; oldEvent = ""; } + + var currentRowHeight = $scope.getRowHeight(event); event.Event.ShowScrub = !event.Event.ShowScrub; @@ -2621,9 +2647,9 @@ angular.module('zmApp.controllers') // console.log("top location is " + toplocation); var distdiff = parseInt($rootScope.devHeight) - toplocation - objheight; - if (distdiff < $scope.rowHeight) // size of the scroller with bars + if (distdiff < currentRowHeight) // size of the scroller with bars { - scrollbynumber = $scope.rowHeight - distdiff; + scrollbynumber = currentRowHeight - distdiff; $ionicScrollDelegate.$getByHandle("mainScroll").scrollBy(0, scrollbynumber, true); // we need to scroll up to make space @@ -3092,7 +3118,7 @@ angular.module('zmApp.controllers') // console.log ("***** MULTISERVER BASE URL FOR EVENTS " + myevents[i].Event.recordingURL); myevents[i].Event.ShowScrub = false; - myevents[i].Event.rowHeight = $scope.rowHeightRegular; + //myevents[i].Event.rowHeight = $scope.rowHeightRegular; // get thumbW/H @@ -3291,7 +3317,7 @@ angular.module('zmApp.controllers') var th = computeThumbnailSize(mw, mh, mo); myevents[currentPagePosition].Event.thumbWidth = th.w; myevents[currentPagePosition].Event.thumbHeight = th.h; - myevents[currentPagePosition].Event.rowHeight = $scope.rowHeight; + //myevents[currentPagePosition].Event.rowHeight = $scope.rowHeight; // myevents[currentPagePosition].Event.rowHeight = th.h + 50; // console.log ("************* RH:"+myevents[currentPagePosition].Event.rowHeight); } @@ -3366,7 +3392,7 @@ angular.module('zmApp.controllers') var maxRowHeight; if (ld.eventViewThumbsSize == 'large') { - maxRowHeight = $scope.rowHeight - 190; + maxRowHeight = Math.min(0.7* $rootScope.devHeight, 450); if (landscape) { // go till 90% of width in large landscape, but restricted to useable row height return calculateAspectRatioFit(mw, mh, 0.95* $rootScope.devWidth, maxRowHeight); @@ -3377,7 +3403,7 @@ angular.module('zmApp.controllers') } } else { // small - maxRowHeight = $scope.rowHeight - 120; + maxRowHeight = 250; if (landscape) { // go till 50% of width in small landscape, but restricted to useable row height return calculateAspectRatioFit(mw, mh, 0.5* $rootScope.devWidth, maxRowHeight); diff --git a/www/templates/events.html b/www/templates/events.html index 199a9b85..6588f741 100644 --- a/www/templates/events.html +++ b/www/templates/events.html @@ -33,7 +33,7 @@ <ion-list show-delete="eventList.showDelete"> <ion-item force-refresh-images="true" collection-repeat="event in events| filter:search.text | eventListFilter" force-refresh-images=true - item-height="event.Event.ShowScrub? rowHeightExpanded:rowHeight" id="item-{{$index}}" on-swipe-left="checkSwipe($index);" force-refresh-images="true" > + item-height="getRowHeight(event)" id="item-{{$index}}" on-swipe-left="checkSwipe($index);" force-refresh-images="true" > <!-- item headers: date/time --> <div class="row" style="padding-top:0px; padding-bottom:10px"> @@ -50,7 +50,7 @@ </div> </div> - <div class="col events-list-text" style="margin-top:-20px;padding:0px; "> + <div class="col events-list-text" style="margin-top:-20px;padding:0px; width:unset; flex:unset;"> <div style="float:right;background-color:#444;color:#fff;font-size:11px;opacity:0.7;border-radius: 0px 0px 5px 5px;"> <i class="ion-calendar"></i> {{prettifyDate(event.Event.StartTime)}} {{tzAbbr}} </div> @@ -62,7 +62,7 @@ <div class="col events-list-text"> <!-- data --> <!-- for largeThumbs show image in this column --> <div ng-if="loginData.eventViewThumbs!='none' && thumbClass=='large'" width="100%" style="padding: 5px;"> - <br/><img bg-color="#6C7A89" ng-src="{{constructThumbnail(event)}}" + <img bg-color="#6C7A89" ng-src="{{constructThumbnail(event)}}" on-tap="closeIfOpen(event);openModalWithSnapshot(event)" width="{{event.Event.thumbWidth}}px" height="{{event.Event.thumbHeight}}px" fallback-src="img/noimage.png" style="display: block; margin: auto;" /> </div> @@ -145,10 +145,8 @@ | translate}}</ion-option-button> <!-- this is the event scrub/alarm frames area --> - <div ng-if="isGroupShown(event)" style="min-height: 50px;"> + <div class="row" ng-if="isGroupShown(event)" style="min-height: 50px;padding-top: 5px;margin-top: 0px;"> <div ng-if="groupType=='alarms'"> - <br /> - <br /> <div> <p> <!--scroll <i class="icon ion-arrow-left-c"></i> @@ -188,9 +186,6 @@ </div> <div ng-if="groupType=='scrub'"> <div ng-if="event.Event.DefaultVideo=='' || loginData.enableh264==false"> - <br /> - <br /> - <br /> <div style="width:90%"> <input ng-model="ionRange.index" type="text" id="mySlider1" slider options="slider_options" /> </div> @@ -214,9 +209,6 @@ </div> <!-- no DefaultVideo --> <div ng-if="event.Event.DefaultVideo!='' && loginData.enableh264 == true"> - <br /> - <br /> - <br /> <div class="videogular-container"> <videogular vg-theme="event.Event.video.config.theme" vg-plays-inline="'true'" vg-auto-play="'true'" vg-responsive="true" vg-can-play="eventCanPlay()" vg-player-ready="readyToPlay($API)"> |