refactor: improve ccomponents/modules structure

Extracted all related video player components to the own module.
Removed unused components and directives.

src/app/app-routing.module.ts

@@ -1,7 +1,5 @@
 import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
-import { PageNotFoundComponent } from './shared/components';
-import { VideoPlayerComponent } from './video-player/video-player.component';
 
 const routes: Routes = [
     {
@@ -11,7 +9,8 @@ const routes: Routes = [
     },
     {
         path: 'iptv',
-        component: VideoPlayerComponent,
+        loadChildren: () =>
+            import('./player/player.module').then((m) => m.PlayerModule),
     },
     {
         path: 'settings',
@@ -20,7 +19,7 @@ const routes: Routes = [
     },
     {
         path: '**',
-        component: PageNotFoundComponent,
+        redirectTo: '',
     },
 ];
 

src/app/app.module.ts

@@ -5,7 +5,6 @@ import { AppRoutingModule } from './app-routing.module';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { BrowserModule } from '@angular/platform-browser';
 import { CommonModule } from '@angular/common';
-import { FilterPipeModule } from 'ngx-filter-pipe';
 import { HttpClientModule, HttpClient } from '@angular/common/http';
 import { NgModule } from '@angular/core';
 import { SharedModule } from './shared/shared.module';
@@ -15,10 +14,6 @@ import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
 import { TranslateHttpLoader } from '@ngx-translate/http-loader';
 
 import { AppComponent } from './app.component';
-import { VideoPlayerComponent } from './video-player/video-player.component';
-import { ChannelListContainerComponent } from './channel-list-container/channel-list-container.component';
-import { VjsPlayerComponent } from './vjs-player/vjs-player.component';
-import { HtmlVideoPlayerComponent } from './html-video-player/html-video-player.component';
 
 // AoT requires an exported function for factories
 export function HttpLoaderFactory(http: HttpClient): TranslateHttpLoader {
@@ -26,19 +21,12 @@ export function HttpLoaderFactory(http: HttpClient): TranslateHttpLoader {
 }
 
 @NgModule({
-    declarations: [
-        AppComponent,
-        ChannelListContainerComponent,
-        VideoPlayerComponent,
-        VjsPlayerComponent,
-        HtmlVideoPlayerComponent,
-    ],
+    declarations: [AppComponent],
     imports: [
         AppRoutingModule,
         BrowserAnimationsModule,
         BrowserModule,
         CommonModule,
-        FilterPipeModule,
         HttpClientModule,
         SharedModule,
         TranslateModule.forRoot({

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

@@ -1,8 +1,8 @@
 /* eslint-disable @typescript-eslint/unbound-method */
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { ChannelListContainerComponent } from './channel-list-container.component';
-import { ChannelQuery } from '../state/channel.query';
-import { ChannelStore } from '../state/channel.store';
+import { ChannelQuery } from '../../../state/channel.query';
+import { ChannelStore } from '../../../state/channel.store';
 import { MatSnackBar, MatSnackBarModule } from '@angular/material/snack-bar';
 import { MatInputModule } from '@angular/material/input';
 import { MatIconModule } from '@angular/material/icon';
@@ -14,8 +14,8 @@ import { FormsModule } from '@angular/forms';
 import { RouterTestingModule } from '@angular/router/testing';
 import { FilterPipeModule } from 'ngx-filter-pipe';
 import { By } from '@angular/platform-browser';
-import { createChannel } from '../state';
-import * as MOCKED_PLAYLIST from '../../mocks/playlist.json';
+import { createChannel } from '../../../state';
+import * as MOCKED_PLAYLIST from '../../../../mocks/playlist.json';
 
 class MatSnackBarStub {
     open(): void {}

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

@@ -1,5 +1,5 @@
-import { Component, Input, Output, EventEmitter } from '@angular/core';
-import { Channel, ChannelStore, ChannelQuery } from '../state';
+import { Component, Input } from '@angular/core';
+import { Channel, ChannelStore, ChannelQuery } from '../../../state';
 
 import * as _ from 'lodash';
 import { MatSnackBar } from '@angular/material/snack-bar';

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

@@ -6,7 +6,7 @@ import {
     SimpleChanges,
     ViewChild,
 } from '@angular/core';
-import { Channel } from '../state';
+import { Channel } from '../../../state';
 import * as Hls from 'hls.js';
 
 @Component({

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

@@ -2,15 +2,15 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { VideoPlayerComponent } from './video-player.component';
 import { MockComponent, MockModule } from 'ng-mocks';
-import { ChannelListContainerComponent } from '../channel-list-container/channel-list-container.component';
+import { ChannelListContainerComponent } from '../../../channel-list-container/channel-list-container.component';
 import { VjsPlayerComponent } from '../vjs-player/vjs-player.component';
 import { MatSidenavModule } from '@angular/material/sidenav';
 import { MatIconModule } from '@angular/material/icon';
 import { MatToolbarModule } from '@angular/material/toolbar';
 import { MatSnackBar } from '@angular/material/snack-bar';
-import { ChannelStore } from '../state/channel.store';
-import * as MOCKED_PLAYLIST from '../../mocks/playlist.json';
-import { createChannel } from '../state';
+import { ChannelStore } from '../../../state/channel.store';
+import * as MOCKED_PLAYLIST from '../../../../mocks/playlist.json';
+import { createChannel } from '../../../state';
 import { HtmlVideoPlayerComponent } from '../html-video-player/html-video-player.component';
 
 class MatSnackBarStub {

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

@@ -1,11 +1,14 @@
 import { Component, OnInit, ViewChild } from '@angular/core';
-import { ChannelQuery, Channel, ChannelStore } from '../state';
+import { ChannelQuery, Channel, ChannelStore } from '../../../state';
 import { Observable } from 'rxjs';
 import { tap } from 'rxjs/operators';
 import { MatSidenav } from '@angular/material/sidenav';
-import { ElectronService } from '../services/electron.service';
+import { ElectronService } from '../../../services/electron.service';
 import { StorageMap } from '@ngx-pwa/local-storage';
-import { Settings, VideoPlayerType } from '../settings/settings.interface';
+import {
+    Settings,
+    VideoPlayerType,
+} from '../../../settings/settings.interface';
 import { MatSnackBar } from '@angular/material/snack-bar';
 
 /** Settings key in storage */

src/app/player/player.module.ts

@@ -0,0 +1,21 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ChannelListContainerComponent } from './components/channel-list-container/channel-list-container.component';
+import { HtmlVideoPlayerComponent } from './components/html-video-player/html-video-player.component';
+import { VideoPlayerComponent } from './components/video-player/video-player.component';
+import { VjsPlayerComponent } from './components/vjs-player/vjs-player.component';
+import { RouterModule, Routes } from '@angular/router';
+import { SharedModule } from 'app/shared/shared.module';
+
+const routes: Routes = [{ path: '', component: VideoPlayerComponent }];
+
+@NgModule({
+    imports: [CommonModule, RouterModule.forChild(routes), SharedModule],
+    declarations: [
+        ChannelListContainerComponent,
+        HtmlVideoPlayerComponent,
+        VideoPlayerComponent,
+        VjsPlayerComponent,
+    ],
+})
+export class PlayerModule {}

src/app/shared/components/index.ts

@@ -1,2 +1 @@
-export * from './page-not-found/page-not-found.component';
 export * from './header/header.component';

src/app/shared/components/page-not-found/page-not-found.component.html

@@ -1,3 +0,0 @@
-<p>
-  page-not-found works!
-</p>

src/app/shared/components/page-not-found/page-not-found.component.spec.ts

@@ -1,25 +0,0 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { PageNotFoundComponent } from './page-not-found.component';
-
-describe('PageNotFoundComponent', () => {
-  let component: PageNotFoundComponent;
-  let fixture: ComponentFixture<PageNotFoundComponent>;
-
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      declarations: [PageNotFoundComponent]
-    })
-      .compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(PageNotFoundComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

src/app/shared/components/page-not-found/page-not-found.component.ts

@@ -1,12 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-
-@Component({
-  selector: 'app-page-not-found',
-  templateUrl: './page-not-found.component.html',
-  styleUrls: ['./page-not-found.component.scss']
-})
-export class PageNotFoundComponent implements OnInit {
-  constructor() {}
-
-  ngOnInit(): void {}
-}

src/app/shared/directives/index.ts

@@ -1 +0,0 @@
-export * from './webview/webview.directive';

src/app/shared/directives/webview/webview.directive.spec.ts

@@ -1,8 +0,0 @@
-import { WebviewDirective } from './webview.directive';
-
-describe('WebviewDirective', () => {
-  it('should create an instance', () => {
-    const directive = new WebviewDirective();
-    expect(directive).toBeTruthy();
-  });
-});

src/app/shared/directives/webview/webview.directive.ts

@@ -1,8 +0,0 @@
-import { Directive } from '@angular/core';
-
-@Directive({
-  selector: 'webview'
-})
-export class WebviewDirective {
-  constructor() { }
-}

src/app/shared/shared.module.ts

@@ -1,31 +1,31 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
-
 import { TranslateModule } from '@ngx-translate/core';
 import { FlexLayoutModule } from '@angular/flex-layout';
-import { PageNotFoundComponent, HeaderComponent } from './components/';
-import { WebviewDirective } from './directives/';
+import { HeaderComponent } from './components/';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { MaterialModule } from 'app/material.module';
+import { FilterPipeModule } from 'ngx-filter-pipe';
 
 @NgModule({
-    declarations: [PageNotFoundComponent, HeaderComponent, WebviewDirective],
+    declarations: [HeaderComponent],
     imports: [
         CommonModule,
-        TranslateModule,
+        FilterPipeModule,
+        FlexLayoutModule,
         FormsModule,
         MaterialModule,
-        FlexLayoutModule,
         ReactiveFormsModule,
+        TranslateModule,
     ],
     exports: [
-        TranslateModule,
-        WebviewDirective,
-        FormsModule,
-        MaterialModule,
+        FilterPipeModule,
         FlexLayoutModule,
+        FormsModule,
         HeaderComponent,
+        MaterialModule,
         ReactiveFormsModule,
+        TranslateModule,
     ],
 })
 export class SharedModule {}