web app: More scrolling issues fixes

Changed to dynamically find the row size so that scrolling will work for
all browsers and all themes.

Add back themes removed since thay now work with these changes

mythtv/html/assets/themes/themes.json

@@ -78,6 +78,30 @@
             "CSS": "luna-pink.css",
             "Image": "luna-pink.png"
         },
+        {
+            "Category": "Material Design Compact",
+            "Name": "Indigo Light",
+            "CSS": "mdc-light-indigo.css",
+            "Image": "md-light-indigo.svg"
+        },
+        {
+            "Category": "Material Design Compact",
+            "Name": "Deep Purple Light",
+            "CSS": "mdc-light-deeppurple.css",
+            "Image": "md-light-deeppurple.svg"
+        },
+        {
+            "Category": "Material Design Compact",
+            "Name": "Indigo Dark",
+            "CSS": "mdc-dark-indigo.css",
+            "Image": "md-dark-indigo.svg"
+        },
+        {
+            "Category": "Material Design Compact",
+            "Name": "Deep Purple Dark",
+            "CSS": "mdc-dark-deeppurple.css",
+            "Image": "md-dark-deeppurple.svg"
+        },
         {
             "Category": "Legacy",
             "Name": "Nova",
@@ -126,6 +150,12 @@
             "CSS": "saga-purple.css",
             "Image": "saga-purple.png"
         },
+        {
+            "Category": "Tailwind Light",
+            "Name": "Tailwind Light",
+            "CSS": "tailwind-light.css",
+            "Image": "tailwind-light.png"
+        },
         {
             "Category": "Primeone - 2021",
             "Name": "Vela Blue",

mythtv/html/backend/src/app/dashboard/recordings/recordings.component.html

@@ -39,12 +39,11 @@ <h2>{{ 'dashboard.recordings.heading' | translate }}</h2>
             &nbsp;&nbsp;&nbsp;{{ programs.length }} {{ 'common.rows' | translate }}
         </div>
 
-
-        <p-table *ngIf="showTable" [value]="programs" [totalRecords]="totalRecords"
-            styleClass="p-datatable-sm p-datatable-striped" (onLazyLoad)="loadLazy($event)" [rows]="50" [lazy]="true"
+        <p-table #table *ngIf="showTable" [value]="programs" [totalRecords]="totalRecords"
+            styleClass="p-datatable-sm p-datatable-striped" (onLazyLoad)="loadLazy($event)" [rows]="100" [lazy]="true"
             [rowHover]="true" selectionMode="multiple" [(selection)]="selection" [metaKeySelection]="true"
             dataKey="Recording.RecordedId" (onRowSelect)="onSelectChange()" (onRowUnselect)="onSelectChange()"
-            sortField="Title" [virtualScroll]="true" [virtualScrollItemSize]="42" scrollHeight="flex"
+            sortField="Title" [virtualScroll]="true" scrollHeight="flex"
             [scrollable]="true">
 
             <ng-template pTemplate="caption">
@@ -84,8 +83,8 @@ <h2>{{ 'dashboard.recordings.heading' | translate }}</h2>
                 </tr>
             </ng-template>
             <ng-template pTemplate="body" let-program let-rowIndex="rowIndex">
-                <tr [ngClass]="{'line-through' : program.Recording.RecGroup == 'Deleted'}" [pSelectableRow]="program"
-                    [pSelectableRowIndex]="rowIndex" (contextmenu)="onContextMenu(program,$event)" style="height: 42px">
+                <tr #row [ngClass]="{'line-through' : program.Recording.RecGroup == 'Deleted'}" [pSelectableRow]="program"
+                    [pSelectableRowIndex]="rowIndex" (contextmenu)="onContextMenu(program,$event)" >
                     <td class="p-1 overflow-hidden">
                         <div class="mycell">
                             <div class="mytext">

mythtv/html/backend/src/app/dashboard/recordings/recordings.component.ts

@@ -1,9 +1,9 @@
-import { Component, OnInit, ViewChild } from '@angular/core';
+import { Component, ElementRef, OnInit, QueryList, ViewChild, ViewChildren } from '@angular/core';
 import { NgForm } from '@angular/forms';
 import { TranslateService } from '@ngx-translate/core';
 import { FilterMatchMode, MenuItem, MessageService, SelectItem } from 'primeng/api';
 import { Menu } from 'primeng/menu';
-import { TableLazyLoadEvent } from 'primeng/table';
+import { Table, TableLazyLoadEvent } from 'primeng/table';
 import { PartialObserver } from 'rxjs';
 import { DvrService } from 'src/app/services/dvr.service';
 import { GetRecordedListRequest, UpdateRecordedMetadataRequest } from 'src/app/services/interfaces/dvr.interface';
@@ -22,6 +22,8 @@ export class RecordingsComponent implements OnInit {
 
   @ViewChild("recsform") currentForm!: NgForm;
   @ViewChild("menu") menu!: Menu;
+  @ViewChild('table') table!: Table;
+  @ViewChildren('row') rows!: QueryList<ElementRef>;
 
   programs: ScheduleOrProgram[] = [];
   selection: ScheduleOrProgram[] = [];
@@ -42,6 +44,7 @@ export class RecordingsComponent implements OnInit {
   priorRequest: GetRecordedListRequest = {};
   totalRecords = 0;
   showTable = false;
+  virtualScrollItemSize = 0;
   searchValue = '';
   selectedRecGroup: string | null = null;
 
@@ -221,6 +224,13 @@ export class RecordingsComponent implements OnInit {
       this.programs = [...this.programs]
       this.refreshing = false;
       this.showTable = true;
+      let row = this.rows.get(0);
+      if (row && row.nativeElement.offsetHeight)
+        this.virtualScrollItemSize = row.nativeElement.offsetHeight;
+      if (this.table) {
+        this.table.totalRecords = this.totalRecords;
+        this.table.virtualScrollItemSize = this.virtualScrollItemSize;
+      }
       // setTimeout(() => {
       //   this.recGroups.push(...this.recGroups)
       //   this.selectedRecGroup = this.selectedRecGroup;

mythtv/html/backend/src/app/dashboard/upcoming/upcoming.component.html

@@ -1,14 +1,13 @@
-<div  style="min-width: 960px;">
+<div style="min-width: 960px;">
     <div style="white-space: 'pre-line';">
         <p-toast position="center"></p-toast>
     </div>
     <h2>{{ 'dashboard.upcoming.heading' | translate }}</h2>
     <div class="block card w-full">
         <div style="height: 90vh">
-            <p-table *ngIf="showTable" [value]="programs" scrollHeight="flex" [scrollable]="true"
+            <p-table #table *ngIf="showTable" [value]="programs" scrollHeight="flex" [scrollable]="true"
                 [totalRecords]="totalRecords" styleClass="p-datatable-gridlines p-datatable-sm" [virtualScroll]="true"
-                [virtualScrollItemSize]="42" [rows]="50" [lazy]="true" (onLazyLoad)="loadLazy($event)" [rowHover]="true"
-                sortField="StartTime">
+                [rows]="100" [lazy]="true" (onLazyLoad)="loadLazy($event)" [rowHover]="true" sortField="StartTime">
 
                 <ng-template pTemplate="caption">
                     <!-- Top Buttons -->
@@ -73,7 +72,7 @@ <h2>{{ 'dashboard.upcoming.heading' | translate }}</h2>
                 </ng-template>
 
                 <ng-template pTemplate="body" let-program let-rowIndex="rowIndex">
-                    <tr  style="height: 42px">
+                    <tr #row>
                         <td class="p-1 overflow-hidden">
                             <div class="mycell">
                                 <div class="mytext" [innerHTML]="formatStartDate(program, rowIndex)"></div>

mythtv/html/backend/src/app/dashboard/upcoming/upcoming.component.ts

@@ -1,7 +1,7 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, ElementRef, OnInit, QueryList, ViewChild, ViewChildren } from '@angular/core';
 import { TranslateService } from '@ngx-translate/core';
 import { MessageService } from 'primeng/api';
-import { TableLazyLoadEvent } from 'primeng/table';
+import { Table, TableLazyLoadEvent } from 'primeng/table';
 import { ScheduleLink, SchedulerSummary } from 'src/app/schedule/schedule.component';
 import { DataService } from 'src/app/services/data.service';
 import { DvrService } from 'src/app/services/dvr.service';
@@ -24,6 +24,9 @@ interface RuleListEntry {
 })
 export class UpcomingComponent implements OnInit, SchedulerSummary {
 
+  @ViewChild('table') table!: Table;
+  @ViewChildren('row') rows!: QueryList<ElementRef>;
+
   programs: ScheduleOrProgram[] = [];
   recRules: RuleListEntry[] = [];
   allRecRules: RuleListEntry[] = [];
@@ -42,6 +45,7 @@ export class UpcomingComponent implements OnInit, SchedulerSummary {
   program?: ScheduleOrProgram;
   totalRecords = 0;
   showTable = false;
+  virtualScrollItemSize = 0;
   selectedRule: RuleListEntry | null = null;
 
   constructor(private dvrService: DvrService, private messageService: MessageService,
@@ -144,6 +148,13 @@ export class UpcomingComponent implements OnInit, SchedulerSummary {
       this.programs = [...this.programs]
       this.refreshing = false;
       this.showTable = true;
+      let row = this.rows.get(0);
+      if (row && row.nativeElement.offsetHeight)
+        this.virtualScrollItemSize = row.nativeElement.offsetHeight;
+      if (this.table) {
+        this.table.totalRecords = this.totalRecords;
+        this.table.virtualScrollItemSize = this.virtualScrollItemSize;
+      }
     });
 
   }

mythtv/html/backend/src/app/dashboard/videos/videos.component.html

@@ -6,9 +6,9 @@ <h2>{{ 'dashboard.videos.heading' | translate }}</h2>
     <div class="block card w-full" style="height: 90vh">
         <p-menu #menu [popup]="true" [model]="menuToShow"></p-menu>
         <p-table *ngIf="showTable" #table name="table" [value]="videos" scrollHeight="flex" [scrollable]="true"
-            styleClass="p-datatable-striped p-datatable-sm" [virtualScroll]="true" [rows]="50" [lazy]="true"
+            styleClass="p-datatable-striped p-datatable-sm" [virtualScroll]="true" [rows]="100" [lazy]="true"
             [totalRecords]="totalRecords" (onLazyLoad)="loadLazy($event)" [rowHover]="true" responsiveLayout="scroll"
-            [virtualScrollItemSize]="42" sortField="Title"  [scrollable]="true">
+            sortField="Title" [scrollable]="true">
             <ng-template pTemplate="caption">
                 <!-- Top Buttons -->
                 <div class="flex align-items-center">
@@ -65,15 +65,15 @@ <h2>{{ 'dashboard.videos.heading' | translate }}</h2>
             <ng-template pTemplate="body" let-video>
 
                 <!-- Directory Row -->
-                <tr *ngIf="video.ContentType == 'DIRECTORY'" style="height: 42px">
+                <tr #row *ngIf="video.ContentType == 'DIRECTORY'">
                     <td class="pt-1 pb-0" colspan="7">
                         <button pButton pRipple icon="pi pi-folder" class="p-button-text p-button-primary"
                             (click)="onDirectory(video.Title)" label="{{video.Title}}"></button>
                     </td>
                 </tr>
 
                 <!-- Video Row -->
-                <tr *ngIf="video.ContentType != 'DIRECTORY'" style="height: 42px">
+                <tr *ngIf="video.ContentType != 'DIRECTORY'">
                     <td class="p-1 overflow-hidden">
                         <div class="mycell">
                             <div class="mytext">{{video.Title}}</div>

mythtv/html/backend/src/app/dashboard/videos/videos.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit, ViewChild } from '@angular/core';
+import { Component, ElementRef, OnInit, QueryList, ViewChild, ViewChildren } from '@angular/core';
 import { NgForm } from '@angular/forms';
 import { TranslateService } from '@ngx-translate/core';
 import { MenuItem, MessageService } from 'primeng/api';
@@ -20,6 +20,7 @@ export class VideosComponent implements OnInit {
   @ViewChild("vidsform") currentForm!: NgForm;
   @ViewChild("menu") menu!: Menu;
   @ViewChild("table") table!: Table;
+  @ViewChildren('row') rows!: QueryList<ElementRef>;
 
   videos: VideoMetadataInfo[] = [];
   refreshing = false;
@@ -34,6 +35,7 @@ export class VideosComponent implements OnInit {
   lazyLoadEvent : TableLazyLoadEvent = {};
   totalRecords = 0;
   showTable = false;
+  virtualScrollItemSize = 0;
 
   mnu_markwatched: MenuItem = { label: 'dashboard.recordings.mnu_markwatched', command: (event) => this.markwatched(event, true) };
   mnu_markunwatched: MenuItem = { label: 'dashboard.recordings.mnu_markunwatched', command: (event) => this.markwatched(event, false) };
@@ -73,7 +75,6 @@ export class VideosComponent implements OnInit {
   }
 
   loadLazy(event: TableLazyLoadEvent) {
-    console.log(event)
     this.lazyLoadEvent = event;
     let request: GetVideoListRequest = {
       Sort: "title",
@@ -116,6 +117,13 @@ export class VideosComponent implements OnInit {
       this.videos = [...this.videos]
       this.refreshing = false;
       this.showTable = true;
+      let row = this.rows.get(0);
+      if (row && row.nativeElement.offsetHeight)
+        this.virtualScrollItemSize = row.nativeElement.offsetHeight;
+      if (this.table) {
+        this.table.totalRecords = this.totalRecords;
+        this.table.virtualScrollItemSize = this.virtualScrollItemSize;
+      }
     });
 
   }

mythtv/html/backend/update_themes.sh

@@ -15,23 +15,3 @@ for file in ../assets/themes/*.css ; do
         cp -v node_modules/primeng/resources/themes/$bname/fonts/* ../assets/themes/fonts/
     fi
 done
-
-# These themes are banned because they cause inconsistent row height in tables
-# These are coincidentally also the themes that come with fonts.
-# lara-dark-blue.css
-# lara-dark-indigo.css
-# lara-dark-purple.css
-# lara-dark-teal.css
-# lara-light-blue.css
-# lara-light-indigo.css
-# lara-light-purple.css
-# lara-light-teal.css
-# md-dark-deeppurple.css
-# md-dark-indigo.css
-# md-light-deeppurple.css
-# md-light-indigo.css
-# mdc-dark-deeppurple.css
-# mdc-dark-indigo.css
-# mdc-light-deeppurple.css
-# mdc-light-indigo.css
-# tailwind-light.css