Add Support for streams from Nanocosmos

Add a full nanocosmus stream URL.
The URL has to include: "nanocosmos.de"
the ID will be extracted by looking for an equals symbol.
So: something.nanocosmos.de/somethingelse=1234-5678

will detect 1234-5678 as videoID.
The iframe that will be used is fix.

client/src/app/shared/components/video-player/video-player.component.html

@@ -3,15 +3,27 @@
         <div *ngIf="usingVjs">
             <video #vjs class="video-js" controls preload="none"></video>
         </div>
-        <div *ngIf="usingYouTube" class="youtube-player">
+        <div *ngIf="!usingVjs" class="iframe-player">
             <iframe
-                class="youtube-iFrame"
+                *ngIf="usingYouTube"
+                class="player"
                 type="text/html"
                 frameborder="0"
                 allow="autoplay; encrypted-media"
                 allowfullscreen
                 [src]="youTubeVideoUrl | trust: 'resourceUrl'"
             ></iframe>
+
+            <iframe
+                *ngIf="usingNanocosmos"
+                class="player"
+                type="text/html"
+                scrolling="no"
+                frameborder="0"
+                allowfullscreen="true"
+                [src]="nanocosmosVideoUrl | trust: 'resourceUrl'"
+            >
+            </iframe>
         </div>
     </div>
     <div *ngIf="usingVjs && !isUrlOnline" class="is-offline-wrapper">

client/src/app/shared/components/video-player/video-player.component.scss

@@ -52,12 +52,12 @@
             }
         }
 
-        .youtube-player {
+        .iframe-player {
             height: 100%;
             width: 100%;
             display: flex;
 
-            .youtube-iFrame {
+            .player {
                 width: 100%;
                 height: 280px;
             }

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

@@ -25,4 +25,19 @@ describe('VjsPlayerComponent', () => {
     it('should create', () => {
         expect(component).toBeTruthy();
     });
+
+    it('should have the nanocosmos video id as videoId', () => {
+        const url =
+            'https://demo.nanocosmos.de/nanoplayer/embed/1.0.0/nanoplayer.html?entry.rtmp.streamname=abcde-fghij';
+        const id = 'abcde-fghij';
+        component.videoUrl = url;
+        expect(component.videoId).toBe(id);
+    });
+
+    it('should have the nanocosmos as player', () => {
+        const url =
+            'https://demo.nanocosmos.de/nanoplayer/embed/1.0.0/nanoplayer.html?entry.rtmp.streamname=abcde-fghij';
+        component.videoUrl = url;
+        expect(component.usingNanocosmos).toBe(true);
+    });
 });

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

@@ -31,7 +31,8 @@ enum MimeType {
 
 enum Player {
     vjs,
-    youtube
+    youtube,
+    nanocosmos
 }
 
 @Component({
@@ -65,10 +66,14 @@ export class VideoPlayerComponent implements AfterViewInit, OnDestroy {
             if (this.afterViewInitDone) {
                 this.initVjs();
             }
-        } else if (this.usingYouTube) {
+        } else {
             this.stopVJS();
             this.unloadVjs();
-            this.youTubeVideoId = this.getYouTubeVideoId(this.videoUrl);
+            if (this.usingYouTube) {
+                this.videoId = this.getYouTubeVideoId(this.videoUrl);
+            } else if (this.usingNanocosmos) {
+                this.videoId = this.getNanocosmosVideoId(this.videoUrl);
+            }
         }
         this.cd.markForCheck();
     }
@@ -79,7 +84,7 @@ export class VideoPlayerComponent implements AfterViewInit, OnDestroy {
 
     public posterUrl: string;
     public vjsPlayer: videojs.Player;
-    public youTubeVideoId: string;
+    public videoId: string;
     public isUrlOnline: boolean;
     private playerType: Player;
     private mimeType: MimeType;
@@ -95,8 +100,16 @@ export class VideoPlayerComponent implements AfterViewInit, OnDestroy {
         return this.playerType === Player.vjs;
     }
 
+    public get usingNanocosmos(): boolean {
+        return this.playerType === Player.nanocosmos;
+    }
+
     public get youTubeVideoUrl(): string {
-        return `https://www.youtube.com/embed/${this.youTubeVideoId}${this.youtubeQuerryParams}`;
+        return `https://www.youtube.com/embed/${this.videoId}${this.youtubeQuerryParams}`;
+    }
+
+    public get nanocosmosVideoUrl(): string {
+        return `https://demo.nanocosmos.de/nanoplayer/embed/1.0.0/nanoplayer.html?entry.rtmp.streamname=${this.videoId}`;
     }
 
     public constructor(
@@ -208,6 +221,8 @@ export class VideoPlayerComponent implements AfterViewInit, OnDestroy {
     private determinePlayer(videoUrl: string): Player {
         if (videoUrl.includes('youtu.be') || videoUrl.includes('youtube.')) {
             return Player.youtube;
+        } else if (videoUrl.includes('nanocosmos.de')) {
+            return Player.nanocosmos;
         } else {
             return Player.vjs;
         }
@@ -221,6 +236,14 @@ export class VideoPlayerComponent implements AfterViewInit, OnDestroy {
         }
     }
 
+    private getNanocosmosVideoId(url: string): string {
+        const urlParts: Array<String> = url.split('=');
+        if (urlParts?.length && typeof urlParts[1] === 'string') {
+            return urlParts[1];
+        }
+        return '';
+    }
+
     private determineContentTypeByUrl(url: string): MimeType {
         if (url) {
             if (url.startsWith('rtmp')) {