feat: add new video.js based player

src/app/app.module.ts

@@ -21,6 +21,7 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { RecentPlaylistsComponent } from './recent-playlists/recent-playlists.component';
 import { ChannelListContainerComponent } from './channel-list-container/channel-list-container.component';
 import { FilterPipeModule } from 'ngx-filter-pipe';
+import { VjsPlayerComponent } from './vjs-player/vjs-player.component';
 
 // AoT requires an exported function for factories
 export function HttpLoaderFactory(http: HttpClient): TranslateHttpLoader {
@@ -34,6 +35,7 @@ export function HttpLoaderFactory(http: HttpClient): TranslateHttpLoader {
         PlaylistUploaderComponent,
         VideoPlayerComponent,
         RecentPlaylistsComponent,
+        VjsPlayerComponent,
     ],
     imports: [
         CommonModule,

src/app/vjs-player/vjs-player.component.html

@@ -0,0 +1,9 @@
+<video
+    #target
+    class="video-js"
+    controls
+    muted
+    playsinline
+    preload="none"
+    data-setup='{"liveui": true, "muted": false}'
+></video>

src/app/vjs-player/vjs-player.component.scss

@@ -0,0 +1,7 @@
+@import '~video.js/dist/video-js.css';
+
+.video-js {
+    position: relative !important;
+    width: 100% !important;
+    height: auto !important;
+}

src/app/vjs-player/vjs-player.component.ts

@@ -0,0 +1,65 @@
+// vjs-player.component.ts
+import {
+    Component,
+    ElementRef,
+    Input,
+    OnDestroy,
+    OnInit,
+    ViewChild,
+    ViewEncapsulation,
+    SimpleChanges,
+} from '@angular/core';
+import videoJs from 'video.js';
+
+@Component({
+    selector: 'app-vjs-player',
+    templateUrl: './vjs-player.component.html',
+    styleUrls: ['./vjs-player.component.scss'],
+    encapsulation: ViewEncapsulation.None,
+})
+export class VjsPlayerComponent implements OnInit, OnDestroy {
+    /** DOM-element reference */
+    @ViewChild('target', { static: true }) target: ElementRef;
+    /** Options of VideoJs player (see: https://github.com/videojs/video.js/blob/mastertutorial-options.html) */
+    @Input() options: videoJs.ComponentOptions;
+    /** VideoJs object */
+    player: videoJs.Player;
+
+    /**
+     * Instantiate Video.js on component init
+     */
+    ngOnInit(): void {
+        this.player = videoJs(
+            this.target.nativeElement,
+            {
+                ...this.options,
+                /* responsive: true,
+                limitRenditionByPlayerDimensions: false, */
+                fluid: true,
+                autoplay: true,
+            },
+            function onPlayerReady() {
+                this.volume(100);
+            }
+        );
+    }
+
+    /**
+     * Replaces the url source of the player with the changed source url
+     * @param changes contains changed channel object
+     */
+    ngOnChanges(changes: SimpleChanges): void {
+        if (changes.options.previousValue) {
+            this.player.src(changes.options.currentValue.sources[0]);
+        }
+    }
+
+    /**
+     * Removes the players HTML reference on destroy
+     */
+    ngOnDestroy(): void {
+        if (this.player) {
+            this.player.dispose();
+        }
+    }
+}