Updating packets to their new version

angular.json

@@ -23,6 +23,7 @@
 						"polyfills": "src/polyfills.ts",
 						"tsConfig": "tsconfig.json",
 						"aot": false,
+						"buildOptimizer": false,
 						"assets": [
 							"src/assets",
 							{

package.json

@@ -16,20 +16,20 @@
 		"not IE 9-11"
 	],
 	"dependencies": {
-        "@angular/animations": "^11.2.6",
+		"@angular/animations": "^12.1.4",
-        "@angular/cdk": "^11.2.5",
+		"@angular/cdk": "^12.1.4",
-        "@angular/common": "^11.2.6",
+		"@angular/common": "^12.1.4",
-        "@angular/compiler": "^11.2.6",
+		"@angular/compiler": "^12.1.4",
-        "@angular/core": "^11.2.6",
+		"@angular/core": "^12.1.4",
-        "@angular/forms": "^11.2.6",
+		"@angular/forms": "^12.1.4",
-        "@angular/material": "^11.2.5",
+		"@angular/material": "^12.1.4",
-        "@angular/platform-browser": "^11.2.6",
+		"@angular/platform-browser": "^12.1.4",
-        "@angular/platform-browser-dynamic": "^11.2.6",
+		"@angular/platform-browser-dynamic": "^12.1.4",
-        "@angular/router": "^11.2.6",
+		"@angular/router": "^12.1.4",
-        "angular-auth-oidc-client": "11.6.4",
+		"angular-auth-oidc-client": "^12.0.2",
-        "bootstrap": "^4.6.0",
+		"bootstrap": "^5.0.2",
 		"detect-browser": "^5.2.0",
-        "hls.js": "^1.0.1",
+		"hls.js": "^1.0.7",
 		"jquery": "^3.6.0",
 		"libass-wasm": "AnonymusRaccoon/JavascriptSubtitlesOctopus",
 		"ngx-infinite-scroll": "^10.0.1",
@@ -38,18 +38,18 @@
 		"zone.js": "^0.11.4"
 	},
 	"devDependencies": {
-        "@angular-devkit/build-angular": "^0.1102.5",
+		"@angular-devkit/build-angular": "^12.1.4",
-        "@angular/cli": "^11.2.5",
+		"@angular/cli": "^12.1.4",
-        "@angular/compiler-cli": "^11.2.6",
+		"@angular/compiler-cli": "^12.1.4",
-        "@angular/language-service": "^11.2.6",
+		"@angular/language-service": "^12.1.4",
-        "@types/bootstrap": "^5.0.9",
+		"@types/bootstrap": "^5.0.17",
 		"@types/hls.js": "^0.13.3",
-        "@types/jquery": "^3.5.5",
+		"@types/jquery": "^3.5.6",
-        "@types/node": "^14.14.41",
+		"@types/node": "^16.4.10",
-        "@types/video.js": "^7.3.15",
+		"@types/video.js": "^7.3.26",
-        "codelyzer": "^6.0.1",
+		"codelyzer": "^6.0.2",
-        "ts-node": "~9.1.1",
+		"ts-node": "~10.1.0",
 		"tslint": "^6.1.3",
-        "typescript": "<4.2"
+		"typescript": "4.3.5"
 	}
 }

src/app/auth/auth.module.ts

@@ -1,6 +1,6 @@
 import { CommonModule } from "@angular/common";
 import { HTTP_INTERCEPTORS, HttpClient } from "@angular/common/http";
-import { APP_INITIALIZER, NgModule } from "@angular/core";
+import { NgModule } from "@angular/core";
 import { FormsModule } from "@angular/forms";
 import { MatButtonModule } from "@angular/material/button";
 import { MatCardModule } from "@angular/material/card";
@@ -16,7 +16,7 @@ import { MatSliderModule } from "@angular/material/slider";
 import { MatTabsModule } from "@angular/material/tabs";
 import { MatTooltipModule } from "@angular/material/tooltip";
 import { RouterModule } from "@angular/router";
-import { AuthModule as OidcModule, LogLevel, OidcConfigService } from "angular-auth-oidc-client";
+import { AuthModule as OidcModule, LogLevel } from "angular-auth-oidc-client";
 import { tap } from "rxjs/operators";
 import { AccountComponent } from "./account/account.component";
 import { LogoutComponent } from "./logout/logout.component";
@@ -25,27 +25,6 @@ import { AuthGuard } from "./misc/authenticated-guard.service";
 import { AuthorizerInterceptor } from "./misc/authorizer-interceptor.service";
 import { UnauthorizedComponent } from "./unauthorized/unauthorized.component";
 
-export function loadConfig(oidcConfigService: OidcConfigService): () => Promise<any>
-{
-	return () => oidcConfigService.withConfig({
-		stsServer: window.location.origin,
-		redirectUrl: "/",
-		postLogoutRedirectUri: "/logout",
-		clientId: "kyoo.webapp",
-		responseType: "code",
-		triggerAuthorizationResultEvent: false,
-		scope: "openid profile offline_access kyoo.read kyoo.write kyoo.play kyoo.admin",
-		silentRenew: true,
-		silentRenewUrl: "/silent.html",
-		useRefreshToken: true,
-		startCheckSession: true,
-
-		forbiddenRoute: "/forbidden",
-		unauthorizedRoute: "/unauthorized",
-		logLevel: LogLevel.Warn
-	});
-}
-
 @NgModule({
 	declarations: [
 		AuthPipe,
@@ -69,20 +48,31 @@ export function loadConfig(oidcConfigService: OidcConfigService): () => Promise<
 		FormsModule,
 		MatTabsModule,
 		MatCheckboxModule,
-		OidcModule.forRoot(),
+		OidcModule.forRoot({
+			config: {
+				authority: window.location.origin,
+				redirectUrl: "/",
+				postLogoutRedirectUri: "/logout",
+				clientId: "kyoo.webapp",
+				responseType: "code",
+				triggerAuthorizationResultEvent: false,
+				scope: "openid profile offline_access kyoo.read kyoo.write kyoo.play kyoo.admin",
+				silentRenew: true,
+				silentRenewUrl: "/silent.html",
+				useRefreshToken: true,
+				startCheckSession: true,
+
+				forbiddenRoute: "/forbidden",
+				unauthorizedRoute: "/unauthorized",
+				logLevel: LogLevel.Warn
+			}
+		}),
 		RouterModule
 	],
 	entryComponents: [
 		AccountComponent
 	],
 	providers: [
-		OidcConfigService,
-		{
-			provide: APP_INITIALIZER,
-			useFactory: loadConfig,
-			deps: [OidcConfigService],
-			multi: true
-		},
 		AuthGuard.guards,
 		{
 			provide: HTTP_INTERCEPTORS,

src/app/auth/auth.service.ts

@@ -1,7 +1,7 @@
 import { Injectable } from "@angular/core";
-import { OidcSecurityService } from "angular-auth-oidc-client";
+import { LoginResponse, OidcSecurityService } from "angular-auth-oidc-client";
 import { Account } from "../models/account";
-import {HttpClient} from "@angular/common/http";
+import { HttpClient } from "@angular/common/http";
 
 @Injectable({
 	providedIn: "root"
@@ -14,20 +14,20 @@ export class AuthService
 	constructor(private oidcSecurityService: OidcSecurityService, private http: HttpClient)
 	{
 		this.oidcSecurityService.checkAuth()
-			.subscribe((auth: boolean) => this.isAuthenticated = auth);
+			.subscribe((auth: LoginResponse) => this.isAuthenticated = auth.isAuthenticated);
 		this.oidcSecurityService.userData$.subscribe(x =>
 		{
-			if (x == null)
+			if (x?.userData == null)
 			{
 				this.account = null;
 				this.isAuthenticated = false;
 				return;
 			}
 			this.account = {
-				email: x.email,
+				email: x.userData.email,
-				username: x.username,
+				username: x.userData.username,
-				picture: x.picture,
+				picture: x.userData.picture,
-				permissions: x.permissions?.split(",") ?? []
+				permissions: x.userData.permissions?.split(",") ?? []
 			};
 		});
 	}

src/app/auth/misc/auth.pipe.ts

@@ -15,7 +15,7 @@ export class AuthPipe implements PipeTransform
 	{
 		if (this.oidcSecurity === undefined)
 			this.oidcSecurity = this.injector.get(OidcSecurityService);
-		const token: string = this.oidcSecurity.getToken();
+		const token: string = this.oidcSecurity.getAccessToken();
 		if (!token)
 			return uri;
 		const headers: HttpHeaders = new HttpHeaders({Authorization: "Bearer " + token});

src/app/auth/misc/authorizer-interceptor.service.ts

@@ -22,7 +22,7 @@ export class AuthorizerInterceptor implements HttpInterceptor
 			return next.handle(request);
 		if (this.oidcSecurity === undefined)
 			this.oidcSecurity = this.injector.get(OidcSecurityService);
-		const token: string = this.oidcSecurity.getToken();
+		const token: string = this.oidcSecurity.getAccessToken();
 		if (token)
 			request = request.clone({setHeaders: {Authorization: "Bearer " + token}});
 		return next.handle(request);

src/app/pages/player/player.component.ts

@@ -244,7 +244,7 @@ export class PlayerComponent implements OnInit, OnDestroy, AfterViewInit
 			this.oidcSecurity = this.injector.get(OidcSecurityService);
 		this.hlsPlayer.config.xhrSetup = xhr =>
 		{
-			const token: string = this.oidcSecurity.getToken();
+			const token: string = this.oidcSecurity.getAccessToken();
 			if (token)
 				xhr.setRequestHeader("Authorization", "Bearer " + token);
 		};

src/styles.scss

@@ -12,8 +12,8 @@ $theme-colors: (
 	"textPrimary": #ffffff
 );
 
-$body-bg: theme-color("primary");
+$body-bg: map-get($theme-colors, "primary");
-$body-color: theme-color("textPrimary");
+$body-color: map-get($theme-colors, "textPrimary");
 $font-family-base: "Roboto", Arial, sans-serif;
 
 p
@@ -95,8 +95,8 @@ mat-icon
 
 .snackError
 {
-	background-color: theme-color("accentColor");
+	background-color: map-get($theme-colors, "accentColor");
-	color: theme-color("textPrimary");
+	color: map-get($theme-colors, "textPrimary");
 }
 
 .scroll-row