refactor(home): convert module to standalone

src/app/app-routing.module.ts

@@ -4,8 +4,8 @@ import { RouterModule, Routes } from '@angular/router';
 const routes: Routes = [
     {
         path: '',
-        loadChildren: () =>
-            import('./home/home.module').then((m) => m.HomeModule),
+        loadComponent: () =>
+            import('./home/home.component').then((c) => c.HomeComponent),
     },
     {
         path: 'playlists',

src/app/home/file-upload/drag-drop-file-upload.directive.ts

@@ -6,6 +6,7 @@ import {
     Output,
 } from '@angular/core';
 @Directive({
+    standalone: true,
     selector: '[appDragDropFileUpload]',
 })
 export class DragDropFileUploadDirective {

src/app/home/file-upload/file-upload.component.ts

@@ -1,22 +1,21 @@
 import { Component, EventEmitter, Output } from '@angular/core';
 import { MatIconModule } from '@angular/material/icon';
 import { TranslateModule } from '@ngx-translate/core';
+import { DragDropFileUploadDirective } from './drag-drop-file-upload.directive';
 
 @Component({
     standalone: true,
-    imports: [MatIconModule, TranslateModule],
+    imports: [DragDropFileUploadDirective, MatIconModule, TranslateModule],
     selector: 'app-file-upload',
     templateUrl: './file-upload.component.html',
     styleUrls: ['./file-upload.component.scss'],
 })
 export class FileUploadComponent {
-    /** Emits after successful file selection */
-    @Output() fileSelected: EventEmitter<{
+    @Output() fileSelected = new EventEmitter<{
         uploadEvent: Event;
         file: File;
-    }> = new EventEmitter();
-
-    @Output() fileRejected: EventEmitter<string> = new EventEmitter();
+    }>();
+    @Output() fileRejected = new EventEmitter<string>();
     @Output() addClicked = new EventEmitter<void>();
 
     allowedContentTypes = [

src/app/home/home.component.html

@@ -2,9 +2,7 @@
     <app-header
         [title]="'HOME.TITLE' | translate"
         [subtitle]="'HOME.SUBTITLE' | translate"
-    ></app-header>
-
+    />
     <app-recent-playlists class="recent-playlists" />
-
-    <mat-progress-bar *ngIf="isLoading" mode="indeterminate"></mat-progress-bar>
+    <mat-progress-bar *ngIf="isLoading" mode="indeterminate" />
 </div>

src/app/home/home.component.spec.ts

@@ -1,23 +1,15 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { MatIconModule } from '@angular/material/icon';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { MatDialogModule } from '@angular/material/dialog';
 import { MatProgressBarModule } from '@angular/material/progress-bar';
 import { MatSnackBar, MatSnackBarModule } from '@angular/material/snack-bar';
-import { MatTabsModule } from '@angular/material/tabs';
-import { RouterTestingModule } from '@angular/router/testing';
+import { ActivatedRoute, RouterModule } from '@angular/router';
 import { Actions } from '@ngrx/effects';
 import { provideMockActions } from '@ngrx/effects/testing';
 import { MockStore, provideMockStore } from '@ngrx/store/testing';
-import {
-    TranslateModule,
-    TranslatePipe,
-    TranslateService,
-} from '@ngx-translate/core';
-import { MockComponent, MockModule, MockPipe, MockProvider } from 'ng-mocks';
-import { NgxIndexedDBModule, NgxIndexedDBService } from 'ngx-indexed-db';
+import { TranslateModule, TranslateService } from '@ngx-translate/core';
+import { MockComponents, MockModule, MockProvider } from 'ng-mocks';
 import { Observable } from 'rxjs';
-import { FileUploadComponent } from '../home/file-upload/file-upload.component';
 import { RecentPlaylistsComponent } from '../home/recent-playlists/recent-playlists.component';
-import { UrlUploadComponent } from '../home/url-upload/url-upload.component';
 import { DataService } from '../services/data.service';
 import { ElectronServiceStub } from '../services/electron.service.stub';
 import { HeaderComponent } from '../shared/components/header/header.component';
@@ -30,35 +22,31 @@ describe('HomeComponent', () => {
     let mockStore: MockStore;
     const actions$ = new Observable<Actions>();
 
-    beforeEach(() => {
+    beforeEach(waitForAsync(() => {
         TestBed.configureTestingModule({
             declarations: [
                 HomeComponent,
-                MockComponent(HeaderComponent),
-                MockComponent(FileUploadComponent),
-                MockComponent(RecentPlaylistsComponent),
-                MockComponent(UrlUploadComponent),
-                MockPipe(TranslatePipe),
+                MockComponents(HeaderComponent, RecentPlaylistsComponent),
             ],
             imports: [
-                MockModule(MatTabsModule),
-                MockModule(MatIconModule),
                 MockModule(MatProgressBarModule),
                 MockModule(MatSnackBarModule),
-                MockModule(RouterTestingModule),
-                MockModule(NgxIndexedDBModule),
                 MockModule(TranslateModule),
+                MockModule(RouterModule),
+                MockModule(MatDialogModule),
             ],
             providers: [
+                MockProvider(ActivatedRoute, {
+                    snapshot: { component: '' } as any,
+                }),
+                MockProvider(TranslateService),
                 MockProvider(MatSnackBar),
                 { provide: DataService, useClass: ElectronServiceStub },
-                MockProvider(TranslateService),
-                MockProvider(NgxIndexedDBService),
                 provideMockStore(),
                 provideMockActions(actions$),
             ],
         }).compileComponents();
-    });
+    }));
 
     beforeEach(() => {
         fixture = TestBed.createComponent(HomeComponent);
@@ -68,7 +56,6 @@ describe('HomeComponent', () => {
         mockStore = TestBed.inject(MockStore);
         mockStore.setState({});
 
-        TestBed.inject(NgxIndexedDBService);
         fixture.detectChanges();
     });
 

src/app/home/home.component.ts

@@ -1,15 +1,28 @@
+import { NgIf } from '@angular/common';
 import { Component, NgZone } from '@angular/core';
+import { MatProgressBarModule } from '@angular/material/progress-bar';
 import { MatSnackBar } from '@angular/material/snack-bar';
 import { Store } from '@ngrx/store';
+import { TranslateModule } from '@ngx-translate/core';
 import { ERROR, PLAYLIST_PARSE_RESPONSE } from '../../../shared/ipc-commands';
 import { Playlist } from '../../../shared/playlist.interface';
 import { DataService } from '../services/data.service';
+import { HeaderComponent } from '../shared/components/header/header.component';
 import { addPlaylist } from '../state/actions';
+import { RecentPlaylistsComponent } from './recent-playlists/recent-playlists.component';
 
 @Component({
+    standalone: true,
     selector: 'app-home',
     templateUrl: './home.component.html',
     styleUrls: ['./home.component.scss'],
+    imports: [
+        HeaderComponent,
+        MatProgressBarModule,
+        NgIf,
+        RecentPlaylistsComponent,
+        TranslateModule,
+    ],
 })
 export class HomeComponent {
     /** Loading spinner state */

src/app/home/home.module.ts

@@ -1,13 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { NgModule } from '@angular/core';
-import { HeaderComponent } from '../shared/components/header/header.component';
-import { SharedModule } from '../shared/shared.module';
-import { DragDropFileUploadDirective } from './file-upload/drag-drop-file-upload.directive';
-import { HomeComponent } from './home.component';
-import { HomeRoutingModule } from './home.routing';
-
-@NgModule({
-    imports: [CommonModule, HeaderComponent, HomeRoutingModule, SharedModule],
-    declarations: [DragDropFileUploadDirective, HomeComponent],
-})
-export class HomeModule {}

src/app/home/home.routing.ts

@@ -1,16 +0,0 @@
-import { NgModule } from '@angular/core';
-import { Routes, RouterModule } from '@angular/router';
-import { HomeComponent } from './home.component';
-
-const routes: Routes = [
-    {
-        path: '',
-        component: HomeComponent,
-    },
-];
-
-@NgModule({
-    imports: [RouterModule.forChild(routes)],
-    exports: [RouterModule],
-})
-export class HomeRoutingModule {}

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

@@ -101,4 +101,4 @@
         </button>
     </span>
 </mat-list-item>
-<mat-divider></mat-divider>
+<mat-divider />

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

@@ -1,29 +1,26 @@
-/* tslint:disable:no-unused-variable */
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { MatIconModule } from '@angular/material/icon';
 import { MatListModule } from '@angular/material/list';
 import { MatTooltipModule } from '@angular/material/tooltip';
-import { TranslatePipe, TranslateService } from '@ngx-translate/core';
-import { MockModule, MockPipe, MockProviders } from 'ng-mocks';
+import { TranslateModule } from '@ngx-translate/core';
+import { MockModule } from 'ng-mocks';
 import { PlaylistItemComponent } from './playlist-item.component';
 
 describe('PlaylistItemComponent', () => {
     let component: PlaylistItemComponent;
     let fixture: ComponentFixture<PlaylistItemComponent>;
 
-    beforeEach(
-        waitForAsync(() => {
-            TestBed.configureTestingModule({
-                declarations: [PlaylistItemComponent, MockPipe(TranslatePipe)],
-                providers: [MockProviders(TranslateService)],
-                imports: [
-                    MockModule(MatIconModule),
-                    MockModule(MatListModule),
-                    MockModule(MatTooltipModule),
-                ],
-            }).compileComponents();
-        })
-    );
+    beforeEach(waitForAsync(() => {
+        TestBed.configureTestingModule({
+            declarations: [PlaylistItemComponent],
+            imports: [
+                MockModule(MatIconModule),
+                MockModule(MatListModule),
+                MockModule(MatTooltipModule),
+                MockModule(TranslateModule),
+            ],
+        }).compileComponents();
+    }));
 
     beforeEach(() => {
         fixture = TestBed.createComponent(PlaylistItemComponent);

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

@@ -1,27 +1,37 @@
+import { DragDropModule } from '@angular/cdk/drag-drop';
+import { DatePipe, NgIf } from '@angular/common';
 import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { MatDividerModule } from '@angular/material/divider';
+import { MatIconModule } from '@angular/material/icon';
+import { MatListModule } from '@angular/material/list';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { TranslateModule } from '@ngx-translate/core';
 import { PlaylistMeta } from '../../../shared/playlist-meta.type';
 
 @Component({
+    standalone: true,
     selector: 'app-playlist-item',
     templateUrl: './playlist-item.component.html',
     styleUrls: ['./playlist-item.component.scss'],
+    imports: [
+        DatePipe,
+        DragDropModule,
+        MatButtonModule,
+        MatDividerModule,
+        MatIconModule,
+        MatListModule,
+        MatTooltipModule,
+        NgIf,
+        TranslateModule,
+    ],
 })
 export class PlaylistItemComponent {
-    /** Playlist item */
     @Input() item: PlaylistMeta;
-
     @Input() showActions = true;
 
-    /** Emits on playlist selection */
-    @Output() playlistClicked: EventEmitter<string> = new EventEmitter();
-
-    /** Emits on playlist refresh click */
-    @Output() refreshClicked: EventEmitter<PlaylistMeta> = new EventEmitter();
-
-    /** Emits on playlist remove click */
-    @Output() removeClicked: EventEmitter<string> = new EventEmitter();
-
-    /** Emits on playlist edit click */
-    @Output() editPlaylistClicked: EventEmitter<PlaylistMeta> =
-        new EventEmitter();
+    @Output() editPlaylistClicked = new EventEmitter<PlaylistMeta>();
+    @Output() playlistClicked = new EventEmitter<string>();
+    @Output() refreshClicked = new EventEmitter<PlaylistMeta>();
+    @Output() removeClicked = new EventEmitter<string>();
 }

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

@@ -47,7 +47,7 @@
                         }}
                     </div>
                 </mat-list-item>
-                <mat-divider></mat-divider>
+                <mat-divider />
 
                 <app-playlist-item
                     *ngFor="
@@ -61,7 +61,7 @@
                     (playlistClicked)="getPlaylist(item)"
                     (refreshClicked)="refreshPlaylist($event)"
                     (removeClicked)="removeClicked($event)"
-                ></app-playlist-item>
+                />
 
                 <div *ngIf="isMigrationPossible" id="migration-container">
                     <p>{{ migrationMessage }}</p>
@@ -89,25 +89,19 @@
     } @placeholder {
         <div id="skeleton-container">
             <div class="skeleton-item" *ngFor="let a of [].constructor(10)">
-                <ngx-skeleton-loader
-                    count="1"
-                    appearance="circle"
-                ></ngx-skeleton-loader>
+                <ngx-skeleton-loader count="1" appearance="circle" />
                 <div class="text">
                     <ngx-skeleton-loader
                         count="1"
                         [theme]="{ width: '30%', height: '20px' }"
-                    ></ngx-skeleton-loader>
+                    />
                     <ngx-skeleton-loader
                         count="1"
                         [theme]="{ width: '50%', height: '10px' }"
-                    ></ngx-skeleton-loader>
+                    />
                 </div>
                 <div class="actions">
-                    <ngx-skeleton-loader
-                        count="2"
-                        appearance="circle"
-                    ></ngx-skeleton-loader>
+                    <ngx-skeleton-loader count="2" appearance="circle" />
                 </div>
             </div>
         </div>

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

@@ -1,14 +1,16 @@
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { MatDialog, MatDialogModule } from '@angular/material/dialog';
+import { MatDividerModule } from '@angular/material/divider';
 import { MatIconModule } from '@angular/material/icon';
+import { MatInputModule } from '@angular/material/input';
 import { MatListModule } from '@angular/material/list';
 import { MatSnackBar } from '@angular/material/snack-bar';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { Actions } from '@ngrx/effects';
 import { provideMockActions } from '@ngrx/effects/testing';
 import { MockStore, provideMockStore } from '@ngrx/store/testing';
-import { TranslatePipe, TranslateService } from '@ngx-translate/core';
-import { MockModule, MockPipe, MockProvider } from 'ng-mocks';
+import { TranslateModule, TranslateService } from '@ngx-translate/core';
+import { MockComponent, MockModule, MockProvider } from 'ng-mocks';
 import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
 import { Observable } from 'rxjs';
 import { PLAYLIST_UPDATE } from '../../../../shared/ipc-commands';
@@ -17,6 +19,7 @@ import { DialogService } from '../../services/dialog.service';
 import { ElectronServiceStub } from '../../services/electron.service.stub';
 import { PlaylistMeta } from '../../shared/playlist-meta.type';
 import { initialPlaylistMetaState } from '../../state/playlists.state';
+import { PlaylistItemComponent } from './playlist-item/playlist-item.component';
 import { RecentPlaylistsComponent } from './recent-playlists.component';
 
 describe('RecentPlaylistsComponent', () => {
@@ -30,21 +33,27 @@ describe('RecentPlaylistsComponent', () => {
 
     beforeEach(waitForAsync(() => {
         TestBed.configureTestingModule({
-            declarations: [RecentPlaylistsComponent, MockPipe(TranslatePipe)],
+            declarations: [
+                MockComponent(PlaylistItemComponent),
+                RecentPlaylistsComponent,
+            ],
             imports: [
                 MockModule(MatDialogModule),
+                MockModule(MatDividerModule),
                 MockModule(MatListModule),
                 MockModule(MatIconModule),
+                MockModule(MatInputModule),
                 MockModule(MatTooltipModule),
                 MockModule(NgxSkeletonLoaderModule),
+                MockModule(TranslateModule),
             ],
             providers: [
                 { provide: DataService, useClass: ElectronServiceStub },
-                MockProvider(TranslateService),
                 MockProvider(DialogService),
                 MatSnackBar,
                 provideMockStore(),
                 provideMockActions(actions$),
+                MockProvider(TranslateService),
             ],
         }).compileComponents();
     }));

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

@@ -1,4 +1,9 @@
-import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';
+import {
+    CdkDragDrop,
+    DragDropModule,
+    moveItemInArray,
+} from '@angular/cdk/drag-drop';
+import { AsyncPipe, NgFor, NgIf } from '@angular/common';
 import {
     Component,
     EventEmitter,
@@ -7,11 +12,17 @@ import {
     OnDestroy,
     Output,
 } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
 import { MatDialog } from '@angular/material/dialog';
+import { MatDividerModule } from '@angular/material/divider';
+import { MatIconModule } from '@angular/material/icon';
+import { MatInputModule } from '@angular/material/input';
+import { MatListModule } from '@angular/material/list';
 import { MatSnackBar } from '@angular/material/snack-bar';
 import { Router } from '@angular/router';
 import { Store } from '@ngrx/store';
-import { TranslateService } from '@ngx-translate/core';
+import { TranslateModule, TranslateService } from '@ngx-translate/core';
+import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
 import { BehaviorSubject, combineLatest, map } from 'rxjs';
 import { GLOBAL_FAVORITES_PLAYLIST_ID } from '../../../../shared/constants';
 import { IpcCommand } from '../../../../shared/ipc-command.class';
@@ -36,11 +47,27 @@ import {
 import { DialogService } from './../../services/dialog.service';
 import { PlaylistMeta } from './../../shared/playlist-meta.type';
 import { PlaylistInfoComponent } from './playlist-info/playlist-info.component';
+import { PlaylistItemComponent } from './playlist-item/playlist-item.component';
 
 @Component({
+    standalone: true,
     selector: 'app-recent-playlists',
     templateUrl: './recent-playlists.component.html',
     styleUrls: ['./recent-playlists.component.scss'],
+    imports: [
+        AsyncPipe,
+        DragDropModule,
+        MatButtonModule,
+        MatDividerModule,
+        MatIconModule,
+        MatInputModule,
+        MatListModule,
+        NgFor,
+        NgIf,
+        NgxSkeletonLoaderModule,
+        PlaylistItemComponent,
+        TranslateModule,
+    ],
 })
 export class RecentPlaylistsComponent implements OnDestroy {
     searchQuery = new BehaviorSubject('');

src/app/player/player.module.ts

@@ -2,6 +2,7 @@ import { OverlayModule } from '@angular/cdk/overlay';
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
+import { RecentPlaylistsComponent } from '../home/recent-playlists/recent-playlists.component';
 import { SharedModule } from '../shared/shared.module';
 import { AudioPlayerComponent } from './components/audio-player/audio-player.component';
 import { ChannelListContainerComponent } from './components/channel-list-container/channel-list-container.component';
@@ -28,6 +29,7 @@ const routes: Routes = [{ path: '', component: VideoPlayerComponent }];
         EpgItemDescriptionComponent,
         HtmlVideoPlayerComponent,
         OverlayModule,
+        RecentPlaylistsComponent,
         RouterModule.forChild(routes),
         SharedModule,
         VjsPlayerComponent,

src/app/shared/shared.module.ts

@@ -1,47 +1,33 @@
-import { DragDropModule } from '@angular/cdk/drag-drop';
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { TranslateModule } from '@ngx-translate/core';
 import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
-import { NgxWhatsNewModule } from 'ngx-whats-new';
-import { PlaylistItemComponent } from '../home/recent-playlists/playlist-item/playlist-item.component';
-import { RecentPlaylistsComponent } from '../home/recent-playlists/recent-playlists.component';
 import { MaterialModule } from '../material.module';
 import { FilterPipe } from './pipes/filter.pipe';
 import { MomentDatePipe } from './pipes/moment-date.pipe';
 
 @NgModule({
-    declarations: [
-        MomentDatePipe,
-        RecentPlaylistsComponent,
-        PlaylistItemComponent,
-    ],
+    declarations: [MomentDatePipe],
     imports: [
         FilterPipe,
         CommonModule,
         FormsModule,
         MaterialModule,
-        NgxWhatsNewModule,
         ReactiveFormsModule,
         TranslateModule,
-        DragDropModule,
         NgxSkeletonLoaderModule.forRoot({
             animation: 'pulse',
             loadingText: 'This item is actually loading...',
         }),
     ],
     exports: [
-        DragDropModule,
         FilterPipe,
         FormsModule,
         MaterialModule,
-        NgxWhatsNewModule,
         MomentDatePipe,
         ReactiveFormsModule,
         TranslateModule,
-        RecentPlaylistsComponent,
-        PlaylistItemComponent,
     ],
 })
 export class SharedModule {}