From 05b159088251c6ff0162c437bea2bbce898802cc Mon Sep 17 00:00:00 2001 From: Pliable Pixels Date: Thu, 10 Sep 2020 14:55:11 -0400 Subject: handle whitespaces by making sure our row height is never more than devWidth --- www/js/EventCtrl.js | 74 +++++++++++++++++++++++++++-------------------------- www/js/app.js | 2 +- 2 files changed, 39 insertions(+), 37 deletions(-) (limited to 'www/js') diff --git a/www/js/EventCtrl.js b/www/js/EventCtrl.js index 23fda099..0038579f 100644 --- a/www/js/EventCtrl.js +++ b/www/js/EventCtrl.js @@ -79,9 +79,12 @@ angular.module('zmApp.controllers') $scope.$on('sizechanged', function() { - $timeout (function () { + recomputeRowHeights(); recomputeThumbSize(); - },10); + $scope.eventsBeingLoaded = true; + $timeout (function() { + $scope.eventsBeingLoaded = false; + },20); }); @@ -214,48 +217,53 @@ angular.module('zmApp.controllers') NVR.computeDeviceSize(); }); - - $scope.$on('$ionicView.beforeEnter', function () { - - /* - It's a bleeding mess trying to get this working on - multiple devices and orientations with flex-box, primarily - because I'm not a CSS guru. - - Plus, collection-repeat offers significant performance benefits - and this requires fixed row sizes across all rows. - - The layout I am using: - a) If you are using large thumbs, it's a single column format - b) If you are using small thumbs, it's a two column format - - The max size of the image is in computeThumbnailSize() - */ - + + function recomputeRowHeights() { + NVR.debug ("recomputing row height"); var ld = NVR.getLogin(); if (ld.eventViewThumbs != 'none') { if (ld.eventViewThumbsSize == 'large') { NVR.debug ('Switching to big thumbs style'); $scope.thumbClass = 'large'; - $scope.rowHeightRegular = 450; + $scope.rowHeightRegular = Math.min(450, $rootScope.devWidth); $scope.rowHeightExpanded = $scope.rowHeightRegular + 230; } else { NVR.debug ('using small thumbs style'); $scope.thumbClass = 'small'; - $scope.rowHeightRegular = 250; - $scope.rowHeightExpanded = $scope.rowHeightRegular + 200; + $scope.rowHeightRegular = Math.min(250, $rootScope.devWidth); + $scope.rowHeightExpanded = $scope.rowHeightRegular + 230; } } else { NVR.debug ('No thumbs'); $scope.rowHeightRegular = 170; - $scope.rowHeightExpanded = $scope.rowHeightRegular + 200; + $scope.rowHeightExpanded = $scope.rowHeightRegular + 230; } $scope.rowHeight = $scope.rowHeightRegular; - $scope.mid = ''; + } + + $scope.$on('$ionicView.beforeEnter', function () { + + /* + It's a bleeding mess trying to get this working on + multiple devices and orientations with flex-box, primarily + because I'm not a CSS guru. + + Plus, collection-repeat offers significant performance benefits + and this requires fixed row sizes across all rows. + The layout I am using: + a) If you are using large thumbs, it's a single column format + b) If you are using small thumbs, it's a two column format + + The max size of the image is in computeThumbnailSize() + */ + + recomputeRowHeights(); + $scope.mid = ''; + var ld = NVR.getLogin(); if (ld.eventViewThumbs != 'objdetect_gif') { maxEventsToLoad = 50; } else { @@ -2369,7 +2377,6 @@ angular.module('zmApp.controllers') NVR.debug("EventCtrl:Old event scrub will hide now"); oldEvent.Event.ShowScrub = false; - event.Event.rowHeight = $scope.rowHeightRegular; oldEvent = ""; } @@ -2396,7 +2403,6 @@ angular.module('zmApp.controllers') if (event.Event.ShowScrub == true) // turn on display now { - event.Event.rowHeight = $scope.rowHeightExpanded; if (groupType == 'alarms') { // $ionicListDelegate.canSwipeItems(false); //NVR.debug ("Disabling flag swipe as alarms are swipable"); @@ -2504,7 +2510,6 @@ angular.module('zmApp.controllers') }; - event.Event.rowHeight = $scope.rowHeightExpanded; $ionicScrollDelegate.resize(); $scope.mycarousel.index = 0; @@ -2630,7 +2635,6 @@ angular.module('zmApp.controllers') // // $ionicListDelegate.canSwipeItems(true); // NVR.debug ("enabling options swipe"); - event.Event.rowHeight = $scope.rowHeightRegular; $ionicSideMenuDelegate.canDragContent(true); $ionicScrollDelegate.resize(); @@ -3317,9 +3321,8 @@ angular.module('zmApp.controllers') function recomputeThumbSize() { // NVR.debug("EventCtrl: recompute thumbnails"); - + NVR.debug ("recompute thumbs size"); // remember, devHeight/devWidth upate 300ms after rotation - $timeout ( function () { for (var i = 0; i < $scope.events.length; i++) { var tempMon = NVR.getMonitorObject($scope.events[i].Event.MonitorId); if (tempMon != undefined) { @@ -3339,7 +3342,6 @@ angular.module('zmApp.controllers') } - },500); } @@ -3366,21 +3368,21 @@ angular.module('zmApp.controllers') maxRowHeight = $scope.rowHeight - 190; if (landscape) { // go till 90% of width in large landscape, but restricted to useable row height - return calculateAspectRatioFit(mw, mh, 0.9* $rootScope.devWidth, maxRowHeight); + return calculateAspectRatioFit(mw, mh, 0.95* $rootScope.devWidth, maxRowHeight); } else { // go till 80% of width in large portrait, but restricted to useable row height - return calculateAspectRatioFit(mw, mh, 0.8* $rootScope.devWidth, maxRowHeight); + return calculateAspectRatioFit(mw, mh, 0.95* $rootScope.devWidth, maxRowHeight); } } else { // small - maxRowHeight = $scope.rowHeight - 150; + maxRowHeight = $scope.rowHeight - 120; 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); } else { // go till 30% of width in small portrait, but restricted to useable row height - return calculateAspectRatioFit(mw, mh, 0.3* $rootScope.devWidth, maxRowHeight); + return calculateAspectRatioFit(mw, mh, 0.5* $rootScope.devWidth, maxRowHeight); } } diff --git a/www/js/app.js b/www/js/app.js index a21d2da1..57eb9a3f 100755 --- a/www/js/app.js +++ b/www/js/app.js @@ -1487,7 +1487,7 @@ angular.module('zmApp', [ NVR.computeDeviceSize(); $rootScope.$broadcast('sizechanged'); - },300); + },100); }; -- cgit v1.2.3