refactor: get rid of flex-layout dependency

package-lock.json

@@ -11,7 +11,6 @@
             "dependencies": {
                 "@angular/animations": "14.0.6",
                 "@angular/cdk": "14.0.5",
-                "@angular/flex-layout": "14.0.0-beta.40",
                 "@angular/material": "14.0.5",
                 "@electron/remote": "2.0.8",
                 "@ngrx/effects": "14.3.2",
@@ -1083,21 +1082,6 @@
                 "zone.js": "~0.11.4"
             }
         },
-        "node_modules/@angular/flex-layout": {
-            "version": "14.0.0-beta.40",
-            "resolved": "https://registry.npmjs.org/@angular/flex-layout/-/flex-layout-14.0.0-beta.40.tgz",
-            "integrity": "sha512-lYi2BKovNk5u2wmj/AMIMqfUzCBEt99Wu/Gfa+1mUIlw3voKCmIsV2XYBhX4adRdD+dRagY3Opger43JR7PXEw==",
-            "dependencies": {
-                "tslib": "^2.3.0"
-            },
-            "peerDependencies": {
-                "@angular/cdk": "^14.0.0",
-                "@angular/common": "^14.0.0",
-                "@angular/core": "^14.0.0",
-                "@angular/platform-browser": "^14.0.0",
-                "rxjs": "^6.5.3 || ^7.4.0"
-            }
-        },
         "node_modules/@angular/forms": {
             "version": "14.0.6",
             "resolved": "https://registry.npmjs.org/@angular/forms/-/forms-14.0.6.tgz",
@@ -29983,14 +29967,6 @@
                 "tslib": "^2.3.0"
             }
         },
-        "@angular/flex-layout": {
-            "version": "14.0.0-beta.40",
-            "resolved": "https://registry.npmjs.org/@angular/flex-layout/-/flex-layout-14.0.0-beta.40.tgz",
-            "integrity": "sha512-lYi2BKovNk5u2wmj/AMIMqfUzCBEt99Wu/Gfa+1mUIlw3voKCmIsV2XYBhX4adRdD+dRagY3Opger43JR7PXEw==",
-            "requires": {
-                "tslib": "^2.3.0"
-            }
-        },
         "@angular/forms": {
             "version": "14.0.6",
             "resolved": "https://registry.npmjs.org/@angular/forms/-/forms-14.0.6.tgz",

package.json

@@ -53,7 +53,6 @@
     "dependencies": {
         "@angular/animations": "14.0.6",
         "@angular/cdk": "14.0.5",
-        "@angular/flex-layout": "14.0.0-beta.40",
         "@angular/material": "14.0.5",
         "@electron/remote": "2.0.8",
         "@ngrx/effects": "14.3.2",

src/app/player/components/epg-list/epg-list.component.html

@@ -1,15 +1,11 @@
 <ng-container *ngIf="channel; else noEpg">
     <!-- channel info panel -->
-    <div fxFlex="120px" id="channel-info" color="primary" fxLayout="column">
-        <div fxFlex="79px" fxLayout="row" fxLayoutGap="10px">
-            <div
-                fxFlex="60px"
-                class="channel-icon"
-                fxLayoutAlign="center center"
-            >
+    <div id="channel-header" color="primary">
+        <div class="channel-info">
+            <div class="channel-icon">
                 <img *ngIf="channel?.icon" [src]="channel.icon" width="48" />
             </div>
-            <div fxFlex="100" fxFlexAlign="center">
+            <div class="channel-details">
                 <div class="channel-name">
                     {{ channel?.name[0]?.value }}
                 </div>
@@ -23,24 +19,20 @@
             </div>
         </div>
         <mat-divider></mat-divider>
-        <div fxFlex="40px" fxLayout="row" id="date-navigator">
+        <div id="date-navigator">
             <button
-                fxFlex="40px"
+                class="previous-day"
                 mat-icon-button
                 (click)="changeDate('prev')"
                 [matTooltip]="'EPG.PREVIOUS_DAY' | translate"
             >
                 <mat-icon>chevron_left</mat-icon>
             </button>
-            <span
-                class="selected-date"
-                fxFlex="100"
-                fxLayoutAlign="center center"
-            >
+            <span class="selected-date">
                 {{ dateToday | momentDate: 'YYYYMMDD':'MMMM Do, dddd' }}</span
             >
             <button
-                fxFlex="40px"
+                class="next-day"
                 mat-icon-button
                 (click)="changeDate('next')"
                 [matTooltip]="'EPG.NEXT_DAY' | translate"
@@ -53,7 +45,7 @@
 
     <!-- program list -->
     <mat-selection-list
-        fxFlex
+        id="program-list"
         [multiple]="false"
         *ngIf="timeshiftUntil$ | async as timeshiftUntil"
     >

src/app/player/components/epg-list/epg-list.component.scss

@@ -13,9 +13,44 @@
     border-bottom: 1px dashed #666;
 }
 
-#channel-info {
+
+#channel-header {
+    flex-direction: column;
+    box-sizing: border-box;
+    display: flex;
+    flex: 1 1 120px;
+    max-height: 120px;
+    min-height: 120px;
+
+    .channel-info {
+        flex-direction: row;
+        box-sizing: border-box;
+        display: flex;
+        flex: 1 1 79px;
+        max-height: 79px;
+        min-height: 79px;
+    }
+
     .channel-icon {
         overflow: hidden;
+        margin-right: 10px;
+        place-content: center;
+        align-items: center;
+        flex-direction: row;
+        box-sizing: border-box;
+        display: flex;
+        flex: 1 1 60px;
+        max-width: 60px;
+        min-width: 60px;
+    }
+
+    .channel-details {
+        flex: 1 1 100%;
+        box-sizing: border-box;
+        max-width: 100%;
+        align-self: center;
+        display: flex;
+        flex-direction: column;
     }
 
     .channel-name {
@@ -32,12 +67,45 @@
     }
 }
 
+#program-list {
+    flex: 1 1 1e-9px;
+    box-sizing: border-box;
+}
+
 mat-selection-list {
     overflow: auto;
 }
 
 #date-navigator {
+    flex-direction: row;
+    box-sizing: border-box;
+    display: flex;
+    flex: 1 1 40px;
+    max-height: 40px;
+    min-height: 40px;
+
     .selected-date {
         font-size: 0.9em;
+        place-content: center;
+        align-items: center;
+        flex-direction: row;
+        box-sizing: border-box;
+        display: flex;
+        flex: 1 1 100%;
+        max-width: 100%;
+    }
+
+    .previous-day {
+        flex: 1 1 40px;
+        box-sizing: border-box;
+        max-width: 40px;
+        min-width: 40px;
+    }
+
+    .next-day {
+        flex: 1 1 40px;
+        box-sizing: border-box;
+        max-width: 40px;
+        min-width: 40px;
     }
 }

src/app/settings/settings.component.ts

@@ -134,6 +134,7 @@ export class SettingsComponent implements OnInit {
         if (!Array.isArray(epgUrls)) {
             epgUrls = [epgUrls];
         }
+        epgUrls = epgUrls.filter((url) => url !== '');
 
         for (const url of epgUrls) {
             this.epgUrl.push(
@@ -209,8 +210,13 @@ export class SettingsComponent implements OnInit {
         this.settingsForm.markAsPristine();
         // check whether the epg url was changed or not
         if (this.isElectron) {
-            if (this.settingsForm.value.epgUrl) {
-                this.epgService.fetchEpg(this.settingsForm.value.epgUrl);
+            let epgUrls = this.settingsForm.value.epgUrl;
+            if (epgUrls) {
+                if (!Array.isArray(epgUrls)) {
+                    epgUrls = [epgUrls];
+                }
+                epgUrls = epgUrls.filter((url) => url !== '');
+                this.epgService.fetchEpg(epgUrls);
             }
         }
         this.translate.use(this.settingsForm.value.language);

src/app/shared/shared.module.ts

@@ -1,7 +1,6 @@
 import { DragDropModule } from '@angular/cdk/drag-drop';
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
-import { FlexLayoutModule } from '@angular/flex-layout';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { TranslateModule } from '@ngx-translate/core';
 import { NgxWhatsNewModule } from 'ngx-whats-new';
@@ -25,7 +24,6 @@ import { MomentDatePipe } from './pipes/moment-date.pipe';
     ],
     imports: [
         CommonModule,
-        FlexLayoutModule,
         FormsModule,
         MaterialModule,
         NgxWhatsNewModule,
@@ -36,7 +34,6 @@ import { MomentDatePipe } from './pipes/moment-date.pipe';
     exports: [
         ConfirmDialogComponent,
         FilterPipe,
-        FlexLayoutModule,
         FormsModule,
         HeaderComponent,
         MaterialModule,