Refinements and package upgrades

package.json

@@ -43,7 +43,6 @@
     "karma-jasmine": "~4.0.0",
     "karma-jasmine-html-reporter": "^1.5.0",
     "karma-junit-reporter": "^2.0.1",
-    "tslint": "~6.1.0",
     "typescript": "~4.9.3"
   }
-}
+}

src/app/components/channels/channel-details.component.html

@@ -1,7 +1,7 @@
 <div *ngIf="channel">
     <div class="details-header-text">
         <i (click)="close()" class="pi pi-chevron-left close-button clickable"></i>
-        <img src={{channel.image}} width="50" style="vertical-align:middle" /> {{'ChannelDetails' | translate}}
+        <img src={{channel.image}} class="image-thumb" /> {{'ChannelDetails' | translate}}
     </div>
     <hr>
     <div class="details-header-text">{{channel.name}}</div>

src/app/components/channels/channels-list.component.html

@@ -26,10 +26,10 @@
         </ng-template>
         <ng-template pTemplate="body" let-channel>
             <tr>
-                <td style="min-width:320px">
+                <td class="min-title-column">
                     <div class="p-grid" style="width:100%">
                         <span (click)="onOpenDetails(channel)" class="clickable" class="p-col-7 clickable">
-                            <img class="image-thumb" src={{channel.image}} width="30" style="vertical-align:middle" />
+                            <img class="image-thumb" src={{channel.image}} />
                             {{channel.name}}
                         </span>
                         <span class="p-col-5 clickable right" style="float:right;padding-top:0px">

src/app/components/programs/program-details.component.html

@@ -1,7 +1,7 @@
 <div *ngIf="program">
     <div class="details-header-text">
         <i (click)="close()" class="pi pi-chevron-left close-button clickable"></i>
-        <img src={{program.programimage}} width="50" style="vertical-align:middle" />
+        <img src={{program.programimage}} class="image-thumb" />
         {{program.name}}: {{'ProgramDetailsAndEpisodes' |
         translate}}
     </div>

src/app/components/programs/program-favorites.component.html

@@ -1,10 +1,10 @@
 <p-accordion>
     <p-accordionTab header="{{ 'Favorites' | translate }}">
         <p-table #dt2 [value]="programs" responsiveLayout="stack" [lazy]="false"
-        [globalFilterFields]="['name','channel.name','description']" styleClass="sr-table">
+        [globalFilterFields]="['name','channel.name','description']">
         <ng-template pTemplate="header">
             <tr>
-                <th pSortableColumn="name">{{'ProgramNameTitle' | translate | uppercase }}<p-sortIcon field="name">
+                <th class="min-title-column" pSortableColumn="name">{{'ProgramNameTitle' | translate | uppercase }}<p-sortIcon field="name">
                     </p-sortIcon>
                 </th>
                 <th pSortableColumn="channel.name">{{'ChannelNameTitle' | translate | uppercase }}<p-sortIcon
@@ -17,11 +17,10 @@
         </ng-template>
         <ng-template pTemplate="body" let-program>
             <tr>
-                <td>
+                <td class="min-title-column">
                     <div class="p-grid" style="width:100%">
                         <span (click)="onProgramDetails(program)" class="clickable p-col-8">
-                            <img src={{program.programimage}} height="50" width="50"
-                                style="padding: 4px; vertical-align:middle" />
+                            <img class="image-thumb" src={{program.programimage}} />
                             <span *ngIf="program?.channel" class="prg-chan">
                                 {{program.channel.name}}
                             </span>
@@ -47,6 +46,5 @@
             </tr>
         </ng-template>
     </p-table>
-
     </p-accordionTab>
 </p-accordion>

src/app/components/programs/program-favorites.component.ts

@@ -31,16 +31,27 @@ export class ProgramFavoritesComponent implements OnInit {
         filter((message) => message instanceof FavoriteChangedMessage)
       )
       .subscribe((message: FavoriteChangedMessage) => {
-        this.fetch();
+        if (!message.isFavorite) {
+          this.programs = this.programs.filter(p => p.id != message.programId);
+        } else {
+          this.addNewFavoriteProgram(message.programId);
+        }
       });
 
-      this.fetch();
+      this.fetchAll();
   }
 
-  async fetch() {
+  async fetchAll() {
     this.programs = await this.service.fetchAllFavoritePrograms();
   }
 
+  async addNewFavoriteProgram(programId: number) {
+    let newfavorite = await this.service.fetchProgramWithId(programId);
+    if (newfavorite) {
+      this.programs.push(newfavorite);
+    }  
+  }
+
   onProgramDetails(program: Program) {
     this.broker.sendMessage(new ShowProgramDetailsMessage(program.id));
   }

src/app/components/programs/programs-list.component.html

@@ -4,20 +4,19 @@
     <p-table #dt2 [value]="programs" responsiveLayout="stack" [paginator]="true" [rows]="pageSize" [totalRecords]="totalHits" (onLazyLoad)="loadLazy($event)" [lazy]="true"
         [globalFilterFields]="['name','channel.name','description']" styleClass="sr-table">
         <ng-template pTemplate="caption">
-            <span class="p-d-flex">
-                <p-accordion [activeIndex]="0">
+            <span>
+                <p-accordion>
                     <p-accordionTab header="{{'Categories' | translate}}">
                         <p-selectButton [options]="categoryOptions" [(ngModel)]="localState.selectedCategory" optionLabel="label" optionValue="value"
                         (onChange)="onCategoryChanged($event, dt2)"
                         ></p-selectButton>
-                            </p-accordionTab>
+                    </p-accordionTab>
                 </p-accordion>
-
             </span>
         </ng-template>
         <ng-template pTemplate="header">
             <tr>
-                <th pSortableColumn="name">{{'ProgramNameTitle' | translate | uppercase }}<p-sortIcon field="name">
+                <th class="min-title-column" pSortableColumn="name">{{'ProgramNameTitle' | translate | uppercase }}<p-sortIcon field="name">
                     </p-sortIcon>
                 </th>
                 <th pSortableColumn="channel.name">{{'ChannelNameTitle' | translate | uppercase }}<p-sortIcon
@@ -30,11 +29,10 @@
         </ng-template>
         <ng-template pTemplate="body" let-program>
             <tr>
-                <td>
+                <td class="min-title-column">
                     <div class="p-grid" style="width:100%">
                         <span (click)="onProgramDetails(program)" class="clickable p-col-8">
-                            <img src={{program.programimage}} height="50" width="50"
-                                style="padding: 4px; vertical-align:middle" />
+                            <img src={{program.programimage}} class="image-thumb" />
                             <span *ngIf="program?.channel" class="prg-chan">
                                 {{program.channel.name}}
                             </span>