diff --git a/client/src/app/shared/components/video-player/video-player.component.html b/client/src/app/shared/components/video-player/video-player.component.html
index 70f3f3c6b..be6c84268 100644
--- a/client/src/app/shared/components/video-player/video-player.component.html
+++ b/client/src/app/shared/components/video-player/video-player.component.html
@@ -3,15 +3,27 @@
-
diff --git a/client/src/app/shared/components/video-player/video-player.component.scss b/client/src/app/shared/components/video-player/video-player.component.scss
index c9b7c4b3f..c5dac1408 100644
--- a/client/src/app/shared/components/video-player/video-player.component.scss
+++ b/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;
}
diff --git a/client/src/app/shared/components/video-player/video-player.component.spec.ts b/client/src/app/shared/components/video-player/video-player.component.spec.ts
index ebce6dac2..a5bf60261 100644
--- a/client/src/app/shared/components/video-player/video-player.component.spec.ts
+++ b/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);
+ });
});
diff --git a/client/src/app/shared/components/video-player/video-player.component.ts b/client/src/app/shared/components/video-player/video-player.component.ts
index f4381ab5a..ef2f443ea 100644
--- a/client/src/app/shared/components/video-player/video-player.component.ts
+++ b/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 = url.split('=');
+ if (urlParts?.length && typeof urlParts[1] === 'string') {
+ return urlParts[1];
+ }
+ return '';
+ }
+
private determineContentTypeByUrl(url: string): MimeType {
if (url) {
if (url.startsWith('rtmp')) {