From 2b86bb2012b45e07260257abcb59a910cf8ec9fa Mon Sep 17 00:00:00 2001 From: 4gray Date: Tue, 16 Apr 2024 14:24:36 +0200 Subject: [PATCH] refactor(home): convert module to standalone --- src/app/app-routing.module.ts | 4 +- .../drag-drop-file-upload.directive.ts | 1 + .../home/file-upload/file-upload.component.ts | 11 +++-- src/app/home/home.component.html | 6 +-- src/app/home/home.component.spec.ts | 41 +++++++------------ src/app/home/home.component.ts | 13 ++++++ src/app/home/home.module.ts | 13 ------ src/app/home/home.routing.ts | 16 -------- .../playlist-item.component.html | 2 +- .../playlist-item.component.spec.ts | 29 ++++++------- .../playlist-item/playlist-item.component.ts | 38 ++++++++++------- .../recent-playlists.component.html | 18 +++----- .../recent-playlists.component.spec.ts | 17 ++++++-- .../recent-playlists.component.ts | 31 +++++++++++++- src/app/player/player.module.ts | 2 + src/app/shared/shared.module.ts | 16 +------- 16 files changed, 126 insertions(+), 132 deletions(-) delete mode 100644 src/app/home/home.module.ts delete mode 100644 src/app/home/home.routing.ts diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index 135e5eb64..cd692d063 100644 --- a/src/app/app-routing.module.ts +++ b/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', diff --git a/src/app/home/file-upload/drag-drop-file-upload.directive.ts b/src/app/home/file-upload/drag-drop-file-upload.directive.ts index 3ae9f731b..04970c3a5 100644 --- a/src/app/home/file-upload/drag-drop-file-upload.directive.ts +++ b/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 { diff --git a/src/app/home/file-upload/file-upload.component.ts b/src/app/home/file-upload/file-upload.component.ts index 8e73c22c6..6f27153d9 100644 --- a/src/app/home/file-upload/file-upload.component.ts +++ b/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 = new EventEmitter(); + }>(); + @Output() fileRejected = new EventEmitter(); @Output() addClicked = new EventEmitter(); allowedContentTypes = [ diff --git a/src/app/home/home.component.html b/src/app/home/home.component.html index abe145e6b..060ac0d6b 100644 --- a/src/app/home/home.component.html +++ b/src/app/home/home.component.html @@ -2,9 +2,7 @@ - + /> - - + diff --git a/src/app/home/home.component.spec.ts b/src/app/home/home.component.spec.ts index c42af23e5..60e9d5108 100644 --- a/src/app/home/home.component.spec.ts +++ b/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(); - 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(); }); diff --git a/src/app/home/home.component.ts b/src/app/home/home.component.ts index aa1fe8f7a..df37de3d8 100644 --- a/src/app/home/home.component.ts +++ b/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 */ diff --git a/src/app/home/home.module.ts b/src/app/home/home.module.ts deleted file mode 100644 index 95f5a8227..000000000 --- a/src/app/home/home.module.ts +++ /dev/null @@ -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 {} diff --git a/src/app/home/home.routing.ts b/src/app/home/home.routing.ts deleted file mode 100644 index de7a83b5b..000000000 --- a/src/app/home/home.routing.ts +++ /dev/null @@ -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 {} diff --git a/src/app/home/recent-playlists/playlist-item/playlist-item.component.html b/src/app/home/recent-playlists/playlist-item/playlist-item.component.html index 95abd21cc..58676a55b 100644 --- a/src/app/home/recent-playlists/playlist-item/playlist-item.component.html +++ b/src/app/home/recent-playlists/playlist-item/playlist-item.component.html @@ -101,4 +101,4 @@ - + diff --git a/src/app/home/recent-playlists/playlist-item/playlist-item.component.spec.ts b/src/app/home/recent-playlists/playlist-item/playlist-item.component.spec.ts index 69caecdb1..44d6cc33b 100644 --- a/src/app/home/recent-playlists/playlist-item/playlist-item.component.spec.ts +++ b/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; - 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); diff --git a/src/app/home/recent-playlists/playlist-item/playlist-item.component.ts b/src/app/home/recent-playlists/playlist-item/playlist-item.component.ts index 89d99e77d..7466c52ab 100644 --- a/src/app/home/recent-playlists/playlist-item/playlist-item.component.ts +++ b/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 = new EventEmitter(); - - /** Emits on playlist refresh click */ - @Output() refreshClicked: EventEmitter = new EventEmitter(); - - /** Emits on playlist remove click */ - @Output() removeClicked: EventEmitter = new EventEmitter(); - - /** Emits on playlist edit click */ - @Output() editPlaylistClicked: EventEmitter = - new EventEmitter(); + @Output() editPlaylistClicked = new EventEmitter(); + @Output() playlistClicked = new EventEmitter(); + @Output() refreshClicked = new EventEmitter(); + @Output() removeClicked = new EventEmitter(); } diff --git a/src/app/home/recent-playlists/recent-playlists.component.html b/src/app/home/recent-playlists/recent-playlists.component.html index 3055f6882..2a2650d31 100644 --- a/src/app/home/recent-playlists/recent-playlists.component.html +++ b/src/app/home/recent-playlists/recent-playlists.component.html @@ -47,7 +47,7 @@ }} - + + />

{{ migrationMessage }}

@@ -89,25 +89,19 @@ } @placeholder {
- +
+ /> + />
- +
diff --git a/src/app/home/recent-playlists/recent-playlists.component.spec.ts b/src/app/home/recent-playlists/recent-playlists.component.spec.ts index 5966f0fad..82cf8040d 100644 --- a/src/app/home/recent-playlists/recent-playlists.component.spec.ts +++ b/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(); })); diff --git a/src/app/home/recent-playlists/recent-playlists.component.ts b/src/app/home/recent-playlists/recent-playlists.component.ts index 564e55ad0..e3b08350e 100644 --- a/src/app/home/recent-playlists/recent-playlists.component.ts +++ b/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(''); diff --git a/src/app/player/player.module.ts b/src/app/player/player.module.ts index 9217c9d0a..e6147e9f6 100644 --- a/src/app/player/player.module.ts +++ b/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, diff --git a/src/app/shared/shared.module.ts b/src/app/shared/shared.module.ts index b6a42b7c3..3763621b0 100644 --- a/src/app/shared/shared.module.ts +++ b/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 {}