Updated Angular to version 11

- ngx-videogular was replaced by @videogular/ngx-videogular
4 years ago · 3f10986cdf
parent f425b9842f
commit 3f10986cdf
47 changed files with 5397 additions and 7084 deletions
--- a/.browserslistrc
+++ b/.browserslistrc
--- a/README.md
+++ b/README.md
@ -6,7 +6,7 @@
 [![GitHub issues badge](https://img.shields.io/github/issues/Tzahi12345/YoutubeDL-Material)](https://github.com/Tzahi12345/YoutubeDL-Material/issues)
 [![License badge](https://img.shields.io/github/license/Tzahi12345/YoutubeDL-Material)](https://github.com/Tzahi12345/YoutubeDL-Material/blob/master/LICENSE.md)

-YoutubeDL-Material is a Material Design frontend for [youtube-dl](https://rg3.github.io/youtube-dl/). It's coded using [Angular 9](https://angular.io/) for the frontend, and [Node.js](https://nodejs.org/) on the backend.
+YoutubeDL-Material is a Material Design frontend for [youtube-dl](https://rg3.github.io/youtube-dl/). It's coded using [Angular 11](https://angular.io/) for the frontend, and [Node.js](https://nodejs.org/) on the backend.

 Now with [Docker](#Docker) support!

--- a/angular.json
+++ b/angular.json
@ -45,8 +45,6 @@
              ],
              "optimization": true,
              "outputHashing": "all",
-              "sourceMap": false,
-              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -18,19 +18,20 @@
  },
  "private": true,
  "dependencies": {
-    "@angular-devkit/core": "^9.0.6",
-    "@angular/animations": "^9.1.0",
-    "@angular/cdk": "^9.2.0",
-    "@angular/common": "^9.1.0",
-    "@angular/compiler": "^9.1.0",
-    "@angular/core": "^9.0.7",
-    "@angular/forms": "^9.1.0",
-    "@angular/localize": "^9.1.0",
-    "@angular/material": "^9.2.0",
-    "@angular/platform-browser": "^9.1.0",
-    "@angular/platform-browser-dynamic": "^9.1.0",
-    "@angular/router": "^9.1.0",
+    "@angular-devkit/core": "^11.0.4",
+    "@angular/animations": "^11.0.4",
+    "@angular/cdk": "^11.0.2",
+    "@angular/common": "^11.0.4",
+    "@angular/compiler": "^11.0.4",
+    "@angular/core": "^11.0.4",
+    "@angular/forms": "^11.0.4",
+    "@angular/localize": "^11.0.4",
+    "@angular/material": "^11.0.2",
+    "@angular/platform-browser": "^11.0.4",
+    "@angular/platform-browser-dynamic": "^11.0.4",
+    "@angular/router": "^11.0.4",
    "@ngneat/content-loader": "^5.0.0",
+    "@videogular/ngx-videogular": "^2.1.0",
    "core-js": "^2.4.1",
    "file-saver": "^2.0.2",
    "filesize": "^6.1.0",
@ -39,35 +40,34 @@
    "ng-lazyload-image": "^7.0.1",
    "ngx-avatar": "^4.0.0",
    "ngx-file-drop": "^9.0.1",
-    "ngx-videogular": "^9.0.1",
-    "rxjs": "^6.5.3",
+    "rxjs": "^6.6.3",
    "rxjs-compat": "^6.0.0-rc.0",
-    "tslib": "^1.10.0",
-    "typescript": "~3.7.5",
+    "tslib": "^2.0.0",
+    "typescript": "~4.0.5",
    "web-animations-js": "^2.3.2",
    "zone.js": "~0.10.2"
  },
  "devDependencies": {
-    "@angular-devkit/build-angular": "^0.901.0",
-    "@angular/cli": "^9.0.7",
-    "@angular/compiler-cli": "^9.0.7",
-    "@angular/language-service": "^9.0.7",
+    "@angular-devkit/build-angular": "^0.1100.4",
+    "@angular/cli": "^11.0.4",
+    "@angular/compiler-cli": "^11.0.4",
+    "@angular/language-service": "^11.0.4",
    "@types/core-js": "^2.5.2",
    "@types/file-saver": "^2.0.1",
-    "@types/jasmine": "2.5.45",
+    "@types/jasmine": "~3.6.0",
    "@types/node": "^12.11.1",
-    "codelyzer": "^5.1.2",
+    "codelyzer": "^6.0.0",
    "electron": "^8.0.1",
-    "jasmine-core": "~2.6.2",
-    "jasmine-spec-reporter": "~4.1.0",
-    "karma": "~1.7.0",
-    "karma-chrome-launcher": "~2.1.1",
+    "jasmine-core": "~3.6.0",
+    "jasmine-spec-reporter": "~5.0.0",
+    "karma": "~5.0.0",
+    "karma-chrome-launcher": "~3.1.0",
    "karma-cli": "~1.0.1",
-    "karma-coverage-istanbul-reporter": "^1.2.1",
-    "karma-jasmine": "~1.1.0",
-    "karma-jasmine-html-reporter": "^0.2.2",
-    "protractor": "~5.1.2",
+    "karma-coverage-istanbul-reporter": "~3.0.2",
+    "karma-jasmine": "~4.0.0",
+    "karma-jasmine-html-reporter": "^1.5.0",
+    "protractor": "~7.0.0",
    "ts-node": "~3.0.4",
-    "tslint": "~5.3.2"
+    "tslint": "~6.1.0"
  }
 }
--- a/src/app/app-routing.module.ts
+++ b/src/app/app-routing.module.ts
@ -19,7 +19,7 @@ const routes: Routes = [
 ];

@NgModule({
-  imports: [RouterModule.forRoot(routes, { useHash: true })],
+  imports: [RouterModule.forRoot(routes, { useHash: true, relativeLinkResolution: 'legacy' })],
  exports: [RouterModule]
 })
 export class AppRoutingModule { }
--- a/src/app/app.component.spec.ts
+++ b/src/app/app.component.spec.ts
@ -1,9 +1,9 @@
-import { TestBed, async } from '@angular/core/testing';
+import { TestBed, waitForAsync } from '@angular/core/testing';

 import { AppComponent } from './app.component';

 describe('AppComponent', () => {
-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
    TestBed.configureTestingModule({
      declarations: [
        AppComponent
@ -11,19 +11,19 @@ describe('AppComponent', () => {
    }).compileComponents();
  }));

-  it('should create the app', async(() => {
+  it('should create the app', waitForAsync(() => {
    const fixture = TestBed.createComponent(AppComponent);
    const app = fixture.debugElement.componentInstance;
    expect(app).toBeTruthy();
  }));

-  it(`should have as title 'app'`, async(() => {
+  it(`should have as title 'app'`, waitForAsync(() => {
    const fixture = TestBed.createComponent(AppComponent);
    const app = fixture.debugElement.componentInstance;
    expect(app.title).toEqual('app');
  }));

-  it('should render title in a h1 tag', async(() => {
+  it('should render title in a h1 tag', waitForAsync(() => {
    const fixture = TestBed.createComponent(AppComponent);
    fixture.detectChanges();
    const compiled = fixture.debugElement.nativeElement;
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@ -39,7 +39,10 @@ import { RouterModule } from '@angular/router';
 import { AppRoutingModule } from './app-routing.module';
 import { MainComponent } from './main/main.component';
 import { PlayerComponent } from './player/player.component';
-import { VgCoreModule, VgControlsModule, VgOverlayPlayModule, VgBufferingModule } from 'ngx-videogular';
+import { VgControlsModule } from '@videogular/ngx-videogular/controls';
+import { VgBufferingModule } from '@videogular/ngx-videogular/buffering';
+import { VgOverlayPlayModule } from '@videogular/ngx-videogular/overlay-play';
+import { VgCoreModule } from '@videogular/ngx-videogular/core';
 import { InputDialogComponent } from './input-dialog/input-dialog.component';
 import { LazyLoadImageModule, IsVisibleProps } from 'ng-lazyload-image';
 import { audioFilesMouseHovering, videoFilesMouseHovering, audioFilesOpened, videoFilesOpened } from './main/main.component';
--- a/src/app/components/custom-playlists/custom-playlists.component.spec.ts
+++ b/src/app/components/custom-playlists/custom-playlists.component.spec.ts
@ -1,4 +1,4 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';

 import { CustomPlaylistsComponent } from './custom-playlists.component';

@ -6,7 +6,7 @@ describe('CustomPlaylistsComponent', () => {
  let component: CustomPlaylistsComponent;
  let fixture: ComponentFixture<CustomPlaylistsComponent>;

-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
    TestBed.configureTestingModule({
      declarations: [ CustomPlaylistsComponent ]
    })
--- a/src/app/components/downloads/downloads.component.spec.ts
+++ b/src/app/components/downloads/downloads.component.spec.ts
@ -1,4 +1,4 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';

 import { DownloadsComponent } from './downloads.component';

@ -6,7 +6,7 @@ describe('DownloadsComponent', () => {
  let component: DownloadsComponent;
  let fixture: ComponentFixture<DownloadsComponent>;

-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
    TestBed.configureTestingModule({
      declarations: [ DownloadsComponent ]
    })
--- a/src/app/components/login/login.component.spec.ts
+++ b/src/app/components/login/login.component.spec.ts
@ -1,4 +1,4 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';

 import { LoginComponent } from './login.component';

@ -6,7 +6,7 @@ describe('LoginComponent', () => {
  let component: LoginComponent;
  let fixture: ComponentFixture<LoginComponent>;

-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
    TestBed.configureTestingModule({
      declarations: [ LoginComponent ]
    })
--- a/src/app/components/logs-viewer/logs-viewer.component.spec.ts
+++ b/src/app/components/logs-viewer/logs-viewer.component.spec.ts
@ -1,4 +1,4 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';

 import { LogsViewerComponent } from './logs-viewer.component';

@ -6,7 +6,7 @@ describe('LogsViewerComponent', () => {
  let component: LogsViewerComponent;
  let fixture: ComponentFixture<LogsViewerComponent>;

-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
    TestBed.configureTestingModule({
      declarations: [ LogsViewerComponent ]
    })
--- a/src/app/components/manage-role/manage-role.component.spec.ts
+++ b/src/app/components/manage-role/manage-role.component.spec.ts
@ -1,4 +1,4 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';

 import { ManageRoleComponent } from './manage-role.component';

@ -6,7 +6,7 @@ describe('ManageRoleComponent', () => {
  let component: ManageRoleComponent;
  let fixture: ComponentFixture<ManageRoleComponent>;

-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
    TestBed.configureTestingModule({
      declarations: [ ManageRoleComponent ]
    })
--- a/src/app/components/manage-user/manage-user.component.spec.ts
+++ b/src/app/components/manage-user/manage-user.component.spec.ts
@ -1,4 +1,4 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';

 import { ManageUserComponent } from './manage-user.component';

@ -6,7 +6,7 @@ describe('ManageUserComponent', () => {
  let component: ManageUserComponent;
  let fixture: ComponentFixture<ManageUserComponent>;

-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
    TestBed.configureTestingModule({
      declarations: [ ManageUserComponent ]
    })
--- a/src/app/components/modify-users/modify-users.component.spec.ts
+++ b/src/app/components/modify-users/modify-users.component.spec.ts
@ -1,4 +1,4 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';

 import { ModifyUsersComponent } from './modify-users.component';

@ -6,7 +6,7 @@ describe('ModifyUsersComponent', () => {
  let component: ModifyUsersComponent;
  let fixture: ComponentFixture<ModifyUsersComponent>;

-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
    TestBed.configureTestingModule({
      declarations: [ ModifyUsersComponent ]
    })
--- a/src/app/components/recent-videos/recent-videos.component.spec.ts
+++ b/src/app/components/recent-videos/recent-videos.component.spec.ts
@ -1,4 +1,4 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';

 import { RecentVideosComponent } from './recent-videos.component';

@ -6,7 +6,7 @@ describe('RecentVideosComponent', () => {
  let component: RecentVideosComponent;
  let fixture: ComponentFixture<RecentVideosComponent>;

-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
    TestBed.configureTestingModule({
      declarations: [ RecentVideosComponent ]
    })
--- a/src/app/components/twitch-chat/twitch-chat.component.spec.ts
+++ b/src/app/components/twitch-chat/twitch-chat.component.spec.ts
@ -1,4 +1,4 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';

 import { TwitchChatComponent } from './twitch-chat.component';

@ -6,7 +6,7 @@ describe('TwitchChatComponent', () => {
  let component: TwitchChatComponent;
  let fixture: ComponentFixture<TwitchChatComponent>;

-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
    TestBed.configureTestingModule({
      declarations: [ TwitchChatComponent ]
    })
--- a/src/app/components/unified-file-card/unified-file-card.component.spec.ts
+++ b/src/app/components/unified-file-card/unified-file-card.component.spec.ts
@ -1,4 +1,4 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';

 import { UnifiedFileCardComponent } from './unified-file-card.component';

@ -6,7 +6,7 @@ describe('UnifiedFileCardComponent', () => {
  let component: UnifiedFileCardComponent;
  let fixture: ComponentFixture<UnifiedFileCardComponent>;

-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
    TestBed.configureTestingModule({
      declarations: [ UnifiedFileCardComponent ]
    })
--- a/src/app/create-playlist/create-playlist.component.spec.ts
+++ b/src/app/create-playlist/create-playlist.component.spec.ts
@ -1,4 +1,4 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';

 import { CreatePlaylistComponent } from './create-playlist.component';

@ -6,7 +6,7 @@ describe('CreatePlaylistComponent', () => {
  let component: CreatePlaylistComponent;
  let fixture: ComponentFixture<CreatePlaylistComponent>;

-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
    TestBed.configureTestingModule({
      declarations: [ CreatePlaylistComponent ]
    })
--- a/src/app/dialogs/about-dialog/about-dialog.component.spec.ts
+++ b/src/app/dialogs/about-dialog/about-dialog.component.spec.ts
@ -1,4 +1,4 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';

 import { AboutDialogComponent } from './about-dialog.component';

@ -6,7 +6,7 @@ describe('AboutDialogComponent', () => {
  let component: AboutDialogComponent;
  let fixture: ComponentFixture<AboutDialogComponent>;

-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
    TestBed.configureTestingModule({
      declarations: [ AboutDialogComponent ]
    })
--- a/src/app/dialogs/add-user-dialog/add-user-dialog.component.spec.ts
+++ b/src/app/dialogs/add-user-dialog/add-user-dialog.component.spec.ts
@ -1,4 +1,4 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';

 import { AddUserDialogComponent } from './add-user-dialog.component';

@ -6,7 +6,7 @@ describe('AddUserDialogComponent', () => {
  let component: AddUserDialogComponent;
  let fixture: ComponentFixture<AddUserDialogComponent>;

-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
    TestBed.configureTestingModule({
      declarations: [ AddUserDialogComponent ]
    })
--- a/src/app/dialogs/arg-modifier-dialog/arg-modifier-dialog.component.spec.ts
+++ b/src/app/dialogs/arg-modifier-dialog/arg-modifier-dialog.component.spec.ts
@ -1,4 +1,4 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';

 import { ArgModifierDialogComponent } from './arg-modifier-dialog.component';

@ -6,7 +6,7 @@ describe('ArgModifierDialogComponent', () => {
  let component: ArgModifierDialogComponent;
  let fixture: ComponentFixture<ArgModifierDialogComponent>;

-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
    TestBed.configureTestingModule({
      declarations: [ ArgModifierDialogComponent ]
    })
--- a/src/app/dialogs/confirm-dialog/confirm-dialog.component.spec.ts
+++ b/src/app/dialogs/confirm-dialog/confirm-dialog.component.spec.ts
@ -1,4 +1,4 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';

 import { ConfirmDialogComponent } from './confirm-dialog.component';

@ -6,7 +6,7 @@ describe('ConfirmDialogComponent', () => {
  let component: ConfirmDialogComponent;
  let fixture: ComponentFixture<ConfirmDialogComponent>;

-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
    TestBed.configureTestingModule({
      declarations: [ ConfirmDialogComponent ]
    })
--- a/src/app/dialogs/cookies-uploader-dialog/cookies-uploader-dialog.component.spec.ts
+++ b/src/app/dialogs/cookies-uploader-dialog/cookies-uploader-dialog.component.spec.ts
@ -1,4 +1,4 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';

 import { CookiesUploaderDialogComponent } from './cookies-uploader-dialog.component';

@ -6,7 +6,7 @@ describe('CookiesUploaderDialogComponent', () => {
  let component: CookiesUploaderDialogComponent;
  let fixture: ComponentFixture<CookiesUploaderDialogComponent>;

-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
    TestBed.configureTestingModule({
      declarations: [ CookiesUploaderDialogComponent ]
    })
--- a/src/app/dialogs/edit-category-dialog/edit-category-dialog.component.spec.ts
+++ b/src/app/dialogs/edit-category-dialog/edit-category-dialog.component.spec.ts
@ -1,4 +1,4 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';

 import { EditCategoryDialogComponent } from './edit-category-dialog.component';

@ -6,7 +6,7 @@ describe('EditCategoryDialogComponent', () => {
  let component: EditCategoryDialogComponent;
  let fixture: ComponentFixture<EditCategoryDialogComponent>;

-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
    TestBed.configureTestingModule({
      declarations: [ EditCategoryDialogComponent ]
    })
--- a/src/app/dialogs/edit-subscription-dialog/edit-subscription-dialog.component.spec.ts
+++ b/src/app/dialogs/edit-subscription-dialog/edit-subscription-dialog.component.spec.ts
@ -1,4 +1,4 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';

 import { EditSubscriptionDialogComponent } from './edit-subscription-dialog.component';

@ -6,7 +6,7 @@ describe('EditSubscriptionDialogComponent', () => {
  let component: EditSubscriptionDialogComponent;
  let fixture: ComponentFixture<EditSubscriptionDialogComponent>;

-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
    TestBed.configureTestingModule({
      declarations: [ EditSubscriptionDialogComponent ]
    })
--- a/src/app/dialogs/modify-playlist/modify-playlist.component.spec.ts
+++ b/src/app/dialogs/modify-playlist/modify-playlist.component.spec.ts
@ -1,4 +1,4 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';

 import { ModifyPlaylistComponent } from './modify-playlist.component';

@ -6,7 +6,7 @@ describe('ModifyPlaylistComponent', () => {
  let component: ModifyPlaylistComponent;
  let fixture: ComponentFixture<ModifyPlaylistComponent>;

-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
    TestBed.configureTestingModule({
      declarations: [ ModifyPlaylistComponent ]
    })
--- a/src/app/dialogs/set-default-admin-dialog/set-default-admin-dialog.component.spec.ts
+++ b/src/app/dialogs/set-default-admin-dialog/set-default-admin-dialog.component.spec.ts
@ -1,4 +1,4 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';

 import { SetDefaultAdminDialogComponent } from './set-default-admin-dialog.component';

@ -6,7 +6,7 @@ describe('SetDefaultAdminDialogComponent', () => {
  let component: SetDefaultAdminDialogComponent;
  let fixture: ComponentFixture<SetDefaultAdminDialogComponent>;

-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
    TestBed.configureTestingModule({
      declarations: [ SetDefaultAdminDialogComponent ]
    })
--- a/src/app/dialogs/share-media-dialog/share-media-dialog.component.spec.ts
+++ b/src/app/dialogs/share-media-dialog/share-media-dialog.component.spec.ts
@ -1,4 +1,4 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';

 import { ShareMediaDialogComponent } from './share-media-dialog.component';

@ -6,7 +6,7 @@ describe('ShareMediaDialogComponent', () => {
  let component: ShareMediaDialogComponent;
  let fixture: ComponentFixture<ShareMediaDialogComponent>;

-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
    TestBed.configureTestingModule({
      declarations: [ ShareMediaDialogComponent ]
    })
--- a/src/app/dialogs/subscribe-dialog/subscribe-dialog.component.spec.ts
+++ b/src/app/dialogs/subscribe-dialog/subscribe-dialog.component.spec.ts
@ -1,4 +1,4 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';

 import { SubscribeDialogComponent } from './subscribe-dialog.component';

@ -6,7 +6,7 @@ describe('SubscribeDialogComponent', () => {
  let component: SubscribeDialogComponent;
  let fixture: ComponentFixture<SubscribeDialogComponent>;

-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
    TestBed.configureTestingModule({
      declarations: [ SubscribeDialogComponent ]
    })
--- a/src/app/dialogs/subscription-info-dialog/subscription-info-dialog.component.spec.ts
+++ b/src/app/dialogs/subscription-info-dialog/subscription-info-dialog.component.spec.ts
@ -1,4 +1,4 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';

 import { SubscriptionInfoDialogComponent } from './subscription-info-dialog.component';

@ -6,7 +6,7 @@ describe('SubscriptionInfoDialogComponent', () => {
  let component: SubscriptionInfoDialogComponent;
  let fixture: ComponentFixture<SubscriptionInfoDialogComponent>;

-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
    TestBed.configureTestingModule({
      declarations: [ SubscriptionInfoDialogComponent ]
    })
--- a/src/app/dialogs/update-progress-dialog/update-progress-dialog.component.spec.ts
+++ b/src/app/dialogs/update-progress-dialog/update-progress-dialog.component.spec.ts
@ -1,4 +1,4 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';

 import { UpdateProgressDialogComponent } from './update-progress-dialog.component';

@ -6,7 +6,7 @@ describe('UpdateProgressDialogComponent', () => {
  let component: UpdateProgressDialogComponent;
  let fixture: ComponentFixture<UpdateProgressDialogComponent>;

-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
    TestBed.configureTestingModule({
      declarations: [ UpdateProgressDialogComponent ]
    })
--- a/src/app/dialogs/user-profile-dialog/user-profile-dialog.component.spec.ts
+++ b/src/app/dialogs/user-profile-dialog/user-profile-dialog.component.spec.ts
@ -1,4 +1,4 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';

 import { UserProfileDialogComponent } from './user-profile-dialog.component';

@ -6,7 +6,7 @@ describe('UserProfileDialogComponent', () => {
  let component: UserProfileDialogComponent;
  let fixture: ComponentFixture<UserProfileDialogComponent>;

-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
    TestBed.configureTestingModule({
      declarations: [ UserProfileDialogComponent ]
    })
--- a/src/app/dialogs/video-info-dialog/video-info-dialog.component.spec.ts
+++ b/src/app/dialogs/video-info-dialog/video-info-dialog.component.spec.ts
@ -1,4 +1,4 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';

 import { VideoInfoDialogComponent } from './video-info-dialog.component';

@ -6,7 +6,7 @@ describe('VideoInfoDialogComponent', () => {
  let component: VideoInfoDialogComponent;
  let fixture: ComponentFixture<VideoInfoDialogComponent>;

-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
    TestBed.configureTestingModule({
      declarations: [ VideoInfoDialogComponent ]
    })
--- a/src/app/download-item/download-item.component.spec.ts
+++ b/src/app/download-item/download-item.component.spec.ts
@ -1,4 +1,4 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';

 import { DownloadItemComponent } from './download-item.component';

@ -6,7 +6,7 @@ describe('DownloadItemComponent', () => {
  let component: DownloadItemComponent;
  let fixture: ComponentFixture<DownloadItemComponent>;

-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
    TestBed.configureTestingModule({
      declarations: [ DownloadItemComponent ]
    })
--- a/src/app/file-card/file-card.component.spec.ts
+++ b/src/app/file-card/file-card.component.spec.ts
@ -1,4 +1,4 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';

 import { FileCardComponent } from './file-card.component';

@ -6,7 +6,7 @@ describe('FileCardComponent', () => {
  let component: FileCardComponent;
  let fixture: ComponentFixture<FileCardComponent>;

-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
    TestBed.configureTestingModule({
      declarations: [ FileCardComponent ]
    })
--- a/src/app/input-dialog/input-dialog.component.spec.ts
+++ b/src/app/input-dialog/input-dialog.component.spec.ts
@ -1,4 +1,4 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';

 import { InputDialogComponent } from './input-dialog.component';

@ -6,7 +6,7 @@ describe('InputDialogComponent', () => {
  let component: InputDialogComponent;
  let fixture: ComponentFixture<InputDialogComponent>;

-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
    TestBed.configureTestingModule({
      declarations: [ InputDialogComponent ]
    })
--- a/src/app/main/main.component.spec.ts
+++ b/src/app/main/main.component.spec.ts
@ -1,4 +1,4 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';

 import { MainComponent } from './main.component';

@ -6,7 +6,7 @@ describe('MainComponent', () => {
  let component: MainComponent;
  let fixture: ComponentFixture<MainComponent>;

-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
    TestBed.configureTestingModule({
      declarations: [ MainComponent ]
    })
--- a/src/app/player/player.component.spec.ts
+++ b/src/app/player/player.component.spec.ts
@ -1,4 +1,4 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';

 import { PlayerComponent } from './player.component';

@ -6,7 +6,7 @@ describe('PlayerComponent', () => {
  let component: PlayerComponent;
  let fixture: ComponentFixture<PlayerComponent>;

-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
    TestBed.configureTestingModule({
      declarations: [ PlayerComponent ]
    })
--- a/src/app/player/player.component.ts
+++ b/src/app/player/player.component.ts
@ -1,5 +1,5 @@
 import { Component, OnInit, HostListener, EventEmitter, OnDestroy, AfterViewInit, ViewChild } from '@angular/core';
-import { VgAPI } from 'ngx-videogular';
+import { VgApiService } from '@videogular/ngx-videogular/core';
 import { PostsService } from 'app/posts.services';
 import { ActivatedRoute, Router } from '@angular/router';
 import { MatDialog } from '@angular/material/dialog';
@ -31,7 +31,7 @@ export class PlayerComponent implements OnInit, AfterViewInit, OnDestroy {

  currentIndex = 0;
  currentItem: IMedia = null;
-  api: VgAPI;
+  api: VgApiService;
  api_ready = false;

  // params
@ -272,7 +272,7 @@ export class PlayerComponent implements OnInit, AfterViewInit, OnDestroy {
    this.original_playlist = JSON.stringify(this.playlist);
  }

-  onPlayerReady(api: VgAPI) {
+  onPlayerReady(api: VgApiService) {
      this.api = api;
      this.api_ready = true;

--- a/src/app/settings/settings.component.spec.ts
+++ b/src/app/settings/settings.component.spec.ts
@ -1,4 +1,4 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';

 import { SettingsComponent } from './settings.component';

@ -6,7 +6,7 @@ describe('SettingsComponent', () => {
  let component: SettingsComponent;
  let fixture: ComponentFixture<SettingsComponent>;

-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
    TestBed.configureTestingModule({
      declarations: [ SettingsComponent ]
    })
--- a/src/app/subscription/subscription-file-card/subscription-file-card.component.spec.ts
+++ b/src/app/subscription/subscription-file-card/subscription-file-card.component.spec.ts
@ -1,4 +1,4 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';

 import { SubscriptionFileCardComponent } from './subscription-file-card.component';

@ -6,7 +6,7 @@ describe('SubscriptionFileCardComponent', () => {
  let component: SubscriptionFileCardComponent;
  let fixture: ComponentFixture<SubscriptionFileCardComponent>;

-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
    TestBed.configureTestingModule({
      declarations: [ SubscriptionFileCardComponent ]
    })
--- a/src/app/subscription/subscription/subscription.component.spec.ts
+++ b/src/app/subscription/subscription/subscription.component.spec.ts
@ -1,4 +1,4 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';

 import { SubscriptionComponent } from './subscription.component';

@ -6,7 +6,7 @@ describe('SubscriptionComponent', () => {
  let component: SubscriptionComponent;
  let fixture: ComponentFixture<SubscriptionComponent>;

-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
    TestBed.configureTestingModule({
      declarations: [ SubscriptionComponent ]
    })
--- a/src/app/subscriptions/subscriptions.component.spec.ts
+++ b/src/app/subscriptions/subscriptions.component.spec.ts
@ -1,4 +1,4 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';

 import { SubscriptionsComponent } from './subscriptions.component';

@ -6,7 +6,7 @@ describe('SubscriptionsComponent', () => {
  let component: SubscriptionsComponent;
  let fixture: ComponentFixture<SubscriptionsComponent>;

-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
    TestBed.configureTestingModule({
      declarations: [ SubscriptionsComponent ]
    })
--- a/src/app/updater/updater.component.spec.ts
+++ b/src/app/updater/updater.component.spec.ts
@ -1,4 +1,4 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';

 import { UpdaterComponent } from './updater.component';

@ -6,7 +6,7 @@ describe('UpdaterComponent', () => {
  let component: UpdaterComponent;
  let fixture: ComponentFixture<UpdaterComponent>;

-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
    TestBed.configureTestingModule({
      declarations: [ UpdaterComponent ]
    })
--- a/tsconfig.json
+++ b/tsconfig.json
@ -20,6 +20,6 @@
      "es2016",
      "dom"
    ],
-    "module": "esnext"
+    "module": "es2020"
  }
 }
--- a/tslint.json
+++ b/tslint.json
@ -13,6 +13,9 @@
    "curly": true,
    "eofline": true,
    "forin": true,
+    "deprecation": {
+      "severity": "warning"
+    },
    "import-blacklist": [
      true
    ],
@ -62,7 +65,6 @@
    "no-trailing-whitespace": true,
    "no-unnecessary-initializer": true,
    "no-unused-expression": true,
-    "no-use-before-declare": true,
    "no-var-keyword": true,
    "object-literal-sort-keys": false,
    "one-line": [