chore: update angular material

angular.json

@@ -31,7 +31,7 @@
                             "src/assets",
                             "src/manifest.webmanifest"
                         ],
-                        "styles": ["src/styles.scss"],
+                        "styles": ["./node_modules/@angular/material/prebuilt-themes/indigo-pink.css","src/styles.scss"],
                         "scripts": [],
                         "customWebpackConfig": {
                             "path": "./angular.webpack.js",

package.json

@@ -52,8 +52,8 @@
     },
     "dependencies": {
         "@angular/animations": "15.1.1",
-        "@angular/cdk": "14.0.5",
-        "@angular/material": "14.0.5",
+        "@angular/cdk": "15.2.7",
+        "@angular/material": "15.2.7",
         "@electron/remote": "2.0.8",
         "@ngrx/effects": "15.1.0",
         "@ngrx/entity": "15.1.0",
@@ -72,7 +72,6 @@
         "hls.js": "1.2.7",
         "iptv-playlist-parser": "0.8.0",
         "lodash": "4.17.21",
-        "material-icons": "0.3.1",
         "moment": "2.29.4",
         "nedb-promises": "6.0.3",
         "ngx-indexed-db": "9.4.2",

src/app/home/recent-playlists/playlist-info/playlist-info.component.spec.ts

@@ -7,7 +7,7 @@ import {
     ReactiveFormsModule,
     UntypedFormBuilder,
 } from '@angular/forms';
-import { MatDialogModule, MAT_DIALOG_DATA } from '@angular/material/dialog';
+import { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { Actions } from '@ngrx/effects';
 import { provideMockActions } from '@ngrx/effects/testing';

src/app/home/recent-playlists/playlist-info/playlist-info.component.ts

@@ -6,11 +6,11 @@ import {
     ReactiveFormsModule,
     UntypedFormBuilder,
     UntypedFormGroup,
-    Validators
+    Validators,
 } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
 import { MatCheckboxModule } from '@angular/material/checkbox';
-import { MatDialogModule, MAT_DIALOG_DATA } from '@angular/material/dialog';
+import { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
 import { MatIconModule } from '@angular/material/icon';
 import { MatInputModule } from '@angular/material/input';
 import { Store } from '@ngrx/store';

src/app/home/recent-playlists/playlist-item/playlist-item.component.html

@@ -1,9 +1,9 @@
 <mat-list-item cdkDrag (click)="playlistClicked.emit(item._id)">
-    <mat-icon mat-list-icon cdkDragHandle class="drag-icon"
+    <mat-icon matListItemAvatar cdkDragHandle class="drag-icon"
         >drag_indicator</mat-icon
     >
     <mat-icon
-        mat-list-icon
+        matListItemAvatar
         class="upload-type-icon"
         *ngIf="item?.url"
         [matTooltip]="
@@ -12,14 +12,14 @@
         >cloud</mat-icon
     >
     <mat-icon
-        mat-list-icon
+        matListItemAvatar
         class="upload-type-icon"
         *ngIf="!item?.url"
         [matTooltip]="'HOME.PLAYLISTS.ADDED_VIA_FILE' | translate"
         >folder</mat-icon
     >
-    <div mat-line>{{ item.title || item.filename }}</div>
-    <div mat-line class="meta">
+    <div matListItemTitle>{{ item.title || item.filename }}</div>
+    <div matListItemLine class="meta">
         {{ 'HOME.PLAYLISTS.CHANNELS' | translate }}: {{ item.count }}
         <ng-container *ngIf="item.importDate?.length > 3">
             | {{ 'HOME.PLAYLISTS.ADDED' | translate }}:
@@ -39,33 +39,36 @@
             >
         </ng-container>
     </div>
-    <button
-        *ngIf="item.url || item.filePath"
-        mat-icon-button
-        class="refresh-btn"
-        color="accent"
-        (click)="$event.stopPropagation(); refreshClicked.emit(item)"
-        [matTooltip]="'HOME.PLAYLISTS.REFRESH' | translate"
-    >
-        <mat-icon>sync</mat-icon>
-    </button>
-    <button
-        mat-icon-button
-        color="accent"
-        class="edit-btn"
-        (click)="$event.stopPropagation(); editPlaylistClicked.emit(item)"
-        [matTooltip]="'HOME.PLAYLISTS.SHOW_DETAILS' | translate"
-    >
-        <mat-icon>edit</mat-icon>
-    </button>
-    <button
-        mat-icon-button
-        color="accent"
-        class="delete-btn"
-        (click)="$event.stopPropagation(); removeClicked.emit(item._id)"
-        [matTooltip]="'HOME.PLAYLISTS.REMOVE' | translate"
-    >
-        <mat-icon>delete</mat-icon>
-    </button>
-    <mat-divider></mat-divider>
+    <span matListItemMeta>
+        <button
+            *ngIf="item.url || item.filePath"
+            mat-icon-button
+            class="refresh-btn"
+            color="accent"
+            (click)="$event.stopPropagation(); refreshClicked.emit(item)"
+            [matTooltip]="'HOME.PLAYLISTS.REFRESH' | translate"
+        >
+            <mat-icon>sync</mat-icon>
+        </button>
+        <button
+            mat-icon-button
+            color="accent"
+            class="edit-btn"
+            (click)="$event.stopPropagation(); editPlaylistClicked.emit(item)"
+            [matTooltip]="'HOME.PLAYLISTS.SHOW_DETAILS' | translate"
+        >
+            <mat-icon>edit</mat-icon>
+        </button>
+
+        <button
+            mat-icon-button
+            color="accent"
+            class="delete-btn"
+            (click)="$event.stopPropagation(); removeClicked.emit(item._id)"
+            [matTooltip]="'HOME.PLAYLISTS.REMOVE' | translate"
+        >
+            <mat-icon>delete</mat-icon>
+        </button>
+    </span>
 </mat-list-item>
+<mat-divider></mat-divider>

src/app/home/recent-playlists/playlist-item/playlist-item.component.scss

@@ -28,7 +28,8 @@ mat-list-item {
 
 .drag-icon {
     cursor: move;
-    margin-left: -20px;
+    margin-left: 0;
+    margin-right: 0;
 }
 
 ::ng-deep {

src/app/home/recent-playlists/recent-playlists.component.html

@@ -5,9 +5,11 @@
         *ngIf="playlists$ | async as playlists"
     >
         <mat-list-item *ngIf="playlists.length === 0">
-            <mat-icon class="favorites-icon" mat-list-icon>search</mat-icon>
-            <div mat-line>{{ 'HOME.PLAYLISTS.NO_PLAYLISTS' | translate }}</div>
-            <div mat-line class="meta">
+            <mat-icon class="favorites-icon" matListItemAvatar>search</mat-icon>
+            <div matListItemTitle>
+                {{ 'HOME.PLAYLISTS.NO_PLAYLISTS' | translate }}
+            </div>
+            <div matListItemLine class="meta">
                 {{ 'HOME.PLAYLISTS.ADD_FIRST' | translate }}
             </div>
         </mat-list-item>
@@ -15,15 +17,15 @@
             *ngIf="playlists.length > 0"
             (click)="getPlaylist('GLOBAL_FAVORITES')"
         >
-            <mat-icon class="favorites-icon" mat-list-icon>star</mat-icon>
-            <div mat-line>
+            <mat-icon class="favorites-icon" matListItemAvatar>star</mat-icon>
+            <div matListItemTitle>
                 {{ 'HOME.PLAYLISTS.GLOBAL_FAVORITES' | translate }}
             </div>
-            <div mat-line class="meta">
+            <div matListItemLine class="meta">
                 {{ 'HOME.PLAYLISTS.GLOBAL_FAVORITES_DESCRIPTION' | translate }}
             </div>
-            <mat-divider></mat-divider>
         </mat-list-item>
+        <mat-divider></mat-divider>
 
         <app-playlist-item
             *ngFor="let item of playlists; last as last"

src/app/home/text-import/text-import.component.scss

@@ -4,5 +4,5 @@ button {
 }
 
 textarea {
-    height: calc(100vh - 300px);
+    height: calc(100vh - 300px) !important;
 }

src/app/home/url-upload/url-upload.component.html

@@ -8,7 +8,9 @@
         />
     </mat-form-field>
     <mat-card *ngIf="!isElectron">
-        {{ 'HOME.URL_UPLOAD.CORS_NOTE' | translate }}
+        <mat-card-content>
+            {{ 'HOME.URL_UPLOAD.CORS_NOTE' | translate }}
+        </mat-card-content>
     </mat-card>
     <button
         class="add-button"

src/app/player/components/channel-list-container/channel-list-container.component.scss

@@ -37,10 +37,8 @@
         border-radius: 0 !important;
     }
 
-    .mat-tab-label,
-    .mat-tab-label-active {
-        min-width: 0 !important;
-        padding: 15px !important;
+    .mat-mdc-tab.mdc-tab {
+        padding: 0 5px;
     }
 }
 

src/app/player/components/channel-list-container/channel-list-item/channel-list-item.component.scss

@@ -1,6 +1,9 @@
 .channel-logo {
     max-height: 48px;
     overflow: hidden;
+    border-radius: 0;
+    margin-left: 10px;
+    margin-right: 5px;
 }
 
 .channel-name {
@@ -27,5 +30,6 @@
 
 .drag-icon {
     cursor: move;
-    margin-left: -20px;
+    margin-left: 0;
+    margin-right: 0;
 }

src/app/player/components/channel-list-container/channel-list-item/channel-list-item.component.ts

@@ -4,37 +4,42 @@ import { Component, EventEmitter, Input, Output } from '@angular/core';
     selector: 'app-channel-list-item',
     styleUrls: ['./channel-list-item.component.scss'],
     template: `<mat-list-item
-        cdkDrag
-        [cdkDragDisabled]="!isDraggable"
-        cdkDragPreviewContainer="parent"
-        [class.active]="selected"
-        (click)="clicked.emit()"
-        data-test-id="channel-item"
-    >
-        <mat-icon
-            *ngIf="isDraggable"
-            mat-list-icon
-            cdkDragHandle
-            class="drag-icon"
-            >drag_indicator</mat-icon
+            cdkDrag
+            [cdkDragDisabled]="!isDraggable"
+            cdkDragPreviewContainer="parent"
+            [class.active]="selected"
+            (click)="clicked.emit()"
+            data-test-id="channel-item"
         >
-        <div class="channel-logo" *ngIf="logo">
-            <img [src]="logo" width="48" onerror="this.style.display='none'" />
-        </div>
-        <p matLine class="channel-name">
-            {{ name }}
-        </p>
-        <button
-            *ngIf="showFavoriteButton"
-            mat-icon-button
-            color="primary"
-            [matTooltip]="'CHANNELS.REMOVE_FAVORITE' | translate"
-            (click)="favoriteToggled.emit($event)"
-        >
-            <mat-icon color="accent">star</mat-icon>
-        </button>
-        <mat-divider></mat-divider
-    ></mat-list-item>`,
+            <mat-icon
+                *ngIf="isDraggable"
+                matListItemIcon
+                cdkDragHandle
+                class="drag-icon"
+                >drag_indicator</mat-icon
+            >
+            <div matListItemAvatar class="channel-logo" *ngIf="logo">
+                <img
+                    [src]="logo"
+                    width="48"
+                    onerror="this.style.display='none'"
+                />
+            </div>
+            <p matListItemLine class="channel-name">
+                {{ name }}
+            </p>
+            <button
+                *ngIf="showFavoriteButton"
+                mat-icon-button
+                matListItemMeta
+                color="primary"
+                [matTooltip]="'CHANNELS.REMOVE_FAVORITE' | translate"
+                (click)="favoriteToggled.emit($event)"
+            >
+                <mat-icon color="accent">star</mat-icon>
+            </button>
+        </mat-list-item>
+        <mat-divider></mat-divider>`,
 })
 export class ChannelListItemComponent {
     @Input() isDraggable = false;

src/app/player/components/epg-list/epg-item-description/epg-item-description.component.spec.ts

@@ -1,10 +1,10 @@
-import { By } from '@angular/platform-browser';
-import { MockPipe, MockModule } from 'ng-mocks';
-import { TranslatePipe } from '@ngx-translate/core';
-import { MatDialogModule, MAT_DIALOG_DATA } from '@angular/material/dialog';
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
-import { EpgItemDescriptionComponent } from './epg-item-description.component';
+import { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
+import { By } from '@angular/platform-browser';
+import { TranslatePipe } from '@ngx-translate/core';
+import { MockModule, MockPipe } from 'ng-mocks';
 import { EpgProgram } from '../../../models/epg-program.model';
+import { EpgItemDescriptionComponent } from './epg-item-description.component';
 
 describe('EpgItemDescriptionComponent', () => {
     let component: EpgItemDescriptionComponent;

src/app/player/components/epg-list/epg-item-description/epg-item-description.component.ts

@@ -1,6 +1,6 @@
+import { Component, Inject } from '@angular/core';
 import { MAT_DIALOG_DATA } from '@angular/material/dialog';
 import { EpgProgram } from './../../../models/epg-program.model';
-import { Component, Inject } from '@angular/core';
 
 @Component({
     selector: 'app-epg-item-description',

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

@@ -21,9 +21,9 @@
 >
 <span
     (click)="$event.stopPropagation(); showDescription(item)"
+    matListItemMeta
     *ngIf="item.desc.length > 0"
     class="description-icon"
     [matTooltip]="'EPG.PROGRAM_DIALOG.SHOW_PROGRAM_DETAILS' | translate"
     ><mat-icon>info</mat-icon></span
 >
-<mat-divider></mat-divider>

src/app/player/components/epg-list/epg-list-item/epg-list-item.component.spec.ts

@@ -1,16 +1,16 @@
 /* eslint-disable @typescript-eslint/unbound-method */
-import { MatTooltipModule } from '@angular/material/tooltip';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { MatDialog, MatDialogModule } from '@angular/material/dialog';
 import { MatIconModule } from '@angular/material/icon';
-import { TranslatePipe } from '@ngx-translate/core';
 import { MatListModule } from '@angular/material/list';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { TranslatePipe } from '@ngx-translate/core';
+import * as moment from 'moment';
+import { MockModule, MockPipe } from 'ng-mocks';
 import { MomentDatePipe } from './../../../../shared/pipes/moment-date.pipe';
 import { EpgProgram } from './../../../models/epg-program.model';
-import { MockModule, MockPipe } from 'ng-mocks';
-import { MatDialog, MatDialogModule } from '@angular/material/dialog';
-import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
-import { EpgListItemComponent } from './epg-list-item.component';
 import { EpgItemDescriptionComponent } from './../epg-item-description/epg-item-description.component';
-import * as moment from 'moment';
+import { EpgListItemComponent } from './epg-list-item.component';
 
 const EPG_PROGRAM_ITEM = {
     start: moment(Date.now()).format('YYYYMMDD'),

src/app/player/components/epg-list/epg-list-item/epg-list-item.component.ts

@@ -1,7 +1,7 @@
-import { EpgItemDescriptionComponent } from './../epg-item-description/epg-item-description.component';
-import { MatDialog } from '@angular/material/dialog';
 import { Component, Input } from '@angular/core';
+import { MatDialog } from '@angular/material/dialog';
 import { EpgProgram } from '../../../models/epg-program.model';
+import { EpgItemDescriptionComponent } from './../epg-item-description/epg-item-description.component';
 
 @Component({
     selector: 'app-epg-list-item',

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

@@ -57,14 +57,14 @@
                         else timeshiftItem
                     "
                 >
-                    <div matLine>
+                    <div matListItemLine>
                         <app-epg-list-item
                             [timeshiftUntil]="timeshiftUntil"
                             [timeNow]="timeNow"
                             [item]="item"
                         ></app-epg-list-item>
                     </div>
-                    <p matLine>{{ item?.title[0]?.value }}</p>
+                    <p matListItemLine>{{ item?.title[0]?.value }}</p>
                 </mat-list-item>
                 <ng-template #timeshiftItem>
                     <mat-list-option
@@ -80,22 +80,26 @@
                             )
                         "
                     >
-                        <div matLine>
+                        <div matListItemLine>
                             <app-epg-list-item
                                 [timeshiftUntil]="timeshiftUntil"
                                 [timeNow]="timeNow"
                                 [item]="item"
                             ></app-epg-list-item>
                         </div>
-                        <p matLine [innerHTML]="item?.title[0]?.value"></p>
+                        <p
+                            matListItemLine
+                            [innerHTML]="item?.title[0]?.value"
+                        ></p>
                     </mat-list-option>
                 </ng-template>
+                <mat-divider></mat-divider>
             </ng-container>
         </ng-container>
         <ng-template #epgNotAvailable>
-            <mat-list-option>{{
-                'EPG.EPG_NOT_AVAILABLE_DATE' | translate
-            }}</mat-list-option>
+            <p class="epg-not-available">
+                {{ 'EPG.EPG_NOT_AVAILABLE_DATE' | translate }}
+            </p>
         </ng-template>
     </mat-selection-list>
 </ng-container>

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

@@ -71,6 +71,10 @@
     box-sizing: border-box;
 }
 
+.epg-not-available {
+    padding: 0 10px;
+}
+
 mat-selection-list {
     overflow: auto;
 }
@@ -97,14 +101,10 @@ mat-selection-list {
     .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/player/components/epg-list/epg-list.component.spec.ts

@@ -172,9 +172,10 @@ describe('EpgListComponent', () => {
         jest.spyOn(mockStore, 'dispatch');
         component.setEpgProgram(MOCKED_PROGRAMS.items[0], false, true);
         expect(mockStore.dispatch).toHaveBeenCalledTimes(1);
-        expect(mockStore.dispatch).toHaveBeenCalledWith(
-            {program: MOCKED_PROGRAMS.items[0], type: expect.stringContaining('epg program')}
-        );
+        expect(mockStore.dispatch).toHaveBeenCalledWith({
+            program: MOCKED_PROGRAMS.items[0],
+            type: expect.stringContaining('epg program'),
+        });
     });
 
     it('should reset active epg program', () => {

src/app/player/components/video-player/sidebar/sidebar.component.scss

@@ -27,6 +27,10 @@
     }
 }
 
+.mat-drawer-inner-container {
+    overflow: hidden;
+}
+
 .recent-playlists {
     height: calc(100vh - 60px);
     overflow: auto;

src/app/player/components/video-player/video-player.component.scss

@@ -8,6 +8,7 @@
 
 .mat-drawer-content {
     background: #000;
+    color: #fff;
     overflow: hidden;
 }
 

src/app/player/components/video-player/video-player.component.spec.ts

@@ -34,7 +34,6 @@ class MatSnackBarStub {
 describe('VideoPlayerComponent', () => {
     let component: VideoPlayerComponent;
     let fixture: ComponentFixture<VideoPlayerComponent>;
-    let channels;
     let mockStore: MockStore;
     const actions$ = new Observable<Actions>();
 

src/app/player/components/video-player/video-player.component.ts

@@ -13,9 +13,9 @@ import { ActivatedRoute } from '@angular/router';
 import { Store } from '@ngrx/store';
 import { StorageMap } from '@ngx-pwa/local-storage';
 import {
+    Observable,
     combineLatestWith,
     filter,
-    Observable,
     skipWhile,
     switchMap,
 } from 'rxjs';

src/app/services/epg.service.spec.ts

@@ -12,7 +12,7 @@ describe('EpgService', () => {
             providers: [
                 EpgService,
                 MockProviders(DataService, TranslateService, MatSnackBar),
-                provideMockStore()
+                provideMockStore(),
             ],
             imports: [MockModule(MatSnackBarModule)],
         });
@@ -45,7 +45,10 @@ describe('EpgService', () => {
             jest.spyOn(channelStore, 'dispatch');
             service.onEpgFetchDone();
             expect(snackbar.open).toHaveBeenCalledTimes(1);
-            expect(channelStore.dispatch).toHaveBeenCalledWith({value: true, type: expect.stringContaining('active epg')});
+            expect(channelStore.dispatch).toHaveBeenCalledWith({
+                value: true,
+                type: expect.stringContaining('active epg'),
+            });
         }
     ));
 });

src/app/settings/settings.component.ts

@@ -240,6 +240,7 @@ export class SettingsComponent implements OnInit {
             null,
             {
                 duration: 2000,
+                horizontalPosition: 'left',
             }
         );
     }

src/app/shared/components/confirm-dialog/confirm-dialog.component.ts

@@ -1,6 +1,6 @@
 import { Component, Inject } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
-import { MatDialogModule, MAT_DIALOG_DATA } from '@angular/material/dialog';
+import { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
 import { TranslateModule } from '@ngx-translate/core';
 import { ConfirmDialogData } from './confirm-dialog-data.interface';
 @Component({

src/index.html

@@ -20,6 +20,15 @@
         <link rel="manifest" href="manifest.webmanifest" />
         <link rel="apple-touch-icon" href="assets/icons/apple-touch-icon.png" />
         <link rel="icon" type="image/x-icon" href="assets/icons/favicon.ico" />
+        <link rel="preconnect" href="https://fonts.gstatic.com" />
+        <link
+            href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap"
+            rel="stylesheet"
+        />
+        <link
+            href="https://fonts.googleapis.com/icon?family=Material+Icons"
+            rel="stylesheet"
+        />
         <script>
             if (global === undefined) {
                 var global = window;

src/styles.scss

@@ -1,8 +1,3 @@
-$material-icons-font-path: '~material-icons/iconfont/';
-
-/* You can add global styles to this file, and also import other style files */
-@import '@angular/material/prebuilt-themes/indigo-pink.css';
-@import 'material-icons/iconfont/material-icons.scss';
 @import '@angular/material/theming';
 @import 'themes/';
 @import '@yangkghjh/videojs-aspect-ratio-panel/dist/videojs-aspect-ratio-panel.css';
@@ -15,7 +10,7 @@ html {
     margin: 0;
     padding: 0;
     height: 100%;
-    font-family: Arial, Helvetica, sans-serif;
+    font-family: Roboto, 'Helvetica Neue', sans-serif;
 }
 
 @media (display-mode: standalone) {
@@ -73,10 +68,11 @@ textarea,
 }
 
 .about-dialog-overlay {
-    .mat-dialog-container {
+    .mat-mdc-dialog-surface {
         text-align: center;
         background: black !important;
         color: #fff !important;
+        padding: 10px;
     }
 }