ci: update angular material and other dependencies

package.json

@@ -27,7 +27,7 @@
         "build": "npm run electron:serve-tsc && ng build --base-href ./",
         "build:dev": "npm run build -- -c dev",
         "build:prod": "npm run build -- -c production",
-        "ng:serve": "ng serve",
+        "ng:serve": "ng serve -c dev",
         "ng:serve:web": "ng serve -c web -o",
         "electron:serve-tsc": "tsc -p tsconfig.serve.json",
         "electron:serve": "wait-on tcp:4200 && npm run electron:serve-tsc && npx electron . --serve",
@@ -44,12 +44,12 @@
         "lint": "ng lint"
     },
     "devDependencies": {
-        "@angular-builders/custom-webpack": "9.2.0",
+        "@angular-builders/custom-webpack": "12.1.0",
         "@angular-devkit/build-angular": "12.1.0",
-        "@angular-eslint/builder": "0.0.1-alpha.32",
-        "@angular-eslint/eslint-plugin": "0.0.1-alpha.32",
-        "@angular-eslint/eslint-plugin-template": "0.0.1-alpha.32",
-        "@angular-eslint/template-parser": "0.0.1-alpha.32",
+        "@angular-eslint/builder": "12.2.0",
+        "@angular-eslint/eslint-plugin": "12.2.0",
+        "@angular-eslint/eslint-plugin-template": "12.2.0",
+        "@angular-eslint/template-parser": "12.2.0",
         "@angular/cli": "12.1.0",
         "@angular/common": "12.1.0",
         "@angular/compiler": "12.1.0",
@@ -60,8 +60,8 @@
         "@angular/platform-browser": "12.1.0",
         "@angular/platform-browser-dynamic": "12.1.0",
         "@angular/router": "12.1.0",
-        "@commitlint/cli": "11.0.0",
-        "@commitlint/config-conventional": "11.0.0",
+        "@commitlint/cli": "12.1.4",
+        "@commitlint/config-conventional": "12.1.4",
         "@ngx-translate/core": "13.0.0",
         "@ngx-translate/http-loader": "6.0.0",
         "@semantic-release/changelog": "5.0.1",
@@ -89,7 +89,7 @@
         "jest": "26.4.2",
         "jest-preset-angular": "8.3.1",
         "mocha": "7.2.0",
-        "ng-mocks": "11.5.0",
+        "ng-mocks": "12.1.2",
         "npm-run-all": "4.1.5",
         "prettier": "2.3.0",
         "rxjs": "6.6.3",
@@ -99,7 +99,7 @@
         "stylelint-config-standard": "22.0.0",
         "stylelint-scss": "3.19.0",
         "ts-node": "8.10.2",
-        "tslib": "2.1.0",
+        "tslib": "2.3.0",
         "typescript": "4.3.4",
         "wait-on": "5.2.1",
         "webdriver-manager": "12.1.7",
@@ -110,19 +110,19 @@
     },
     "dependencies": {
         "@angular/animations": "12.1.0",
-        "@angular/cdk": "11.1.2",
-        "@angular/flex-layout": "10.0.0-beta.32",
-        "@angular/material": "11.1.2",
+        "@angular/cdk": "12.1.0",
+        "@angular/flex-layout": "12.0.0-beta.34",
+        "@angular/material": "12.1.0",
         "@datorama/akita": "5.2.6",
         "@ngx-pwa/local-storage": "11.1.0",
-        "@types/hls.js": "0.13.3",
-        "@types/video.js": "7.3.11",
+        "@types/hls.js": "1.0.0",
+        "@types/video.js": "7.3.21",
         "@videojs/http-streaming": "2.3.1",
         "about-window": "1.13.4",
         "axios": "0.21.1",
         "custom-electron-titlebar": "3.2.5",
         "epg-parser": "0.1.1",
-        "hls.js": "0.14.16",
+        "hls.js": "1.0.7",
         "iptv-playlist-parser": "0.8.0",
         "lodash": "4.17.21",
         "material-icons": "0.3.1",

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

@@ -8,7 +8,7 @@ import {
     ViewChild,
 } from '@angular/core';
 import { Channel } from '../../../state';
-import * as Hls from 'hls.js';
+import Hls from 'hls.js';
 
 @Component({
     selector: 'app-html-video-player',
@@ -24,7 +24,7 @@ export class HtmlVideoPlayerComponent implements OnChanges, OnDestroy {
     videoPlayer: ElementRef<HTMLVideoElement>;
 
     /** HLS object */
-    hls = new Hls();
+    hls: Hls;
 
     /**
      * Listen for component input changes
@@ -41,24 +41,16 @@ export class HtmlVideoPlayerComponent implements OnChanges, OnDestroy {
      * @param channel given channel object
      */
     playChannel(channel: Channel): void {
+        if (this.hls) this.hls.destroy();
         const url = channel.url + channel.epgParams;
         if (Hls.isSupported()) {
             console.log('... switching channel to ', channel.name, url);
-            this.hls.loadSource(url);
+            this.hls = new Hls();
             this.hls.attachMedia(this.videoPlayer.nativeElement);
+            this.hls.loadSource(url);
             this.handlePlayOperation();
-        } else if (
-            this.videoPlayer.nativeElement.canPlayType(
-                'application/vnd.apple.mpegurl'
-            )
-        ) {
-            this.videoPlayer.nativeElement.src = url;
-            this.videoPlayer.nativeElement.addEventListener(
-                'loadedmetadata',
-                () => {
-                    this.handlePlayOperation();
-                }
-            );
+        } else {
+            console.error('something wrong with hls.js init...');
         }
     }
 
@@ -70,10 +62,10 @@ export class HtmlVideoPlayerComponent implements OnChanges, OnDestroy {
 
         if (playPromise !== undefined) {
             playPromise
-                .then(() => {
+                .then((_) => {
                     // Automatic playback started!
                 })
-                .catch((error) => console.error(error));
+                .catch((error) => {});
         }
     }
 

src/tsconfig.app.json

@@ -13,6 +13,6 @@
         "strictInjectionParameters": true,
         "strictInputAccessModifiers": true,
         "preserveWhitespaces": true,
-        "strictTemplates": true
+        "strictTemplates": false
     }
 }