From dbf8a8498178f6abe6c1b7e59dcd3b1521a319e8 Mon Sep 17 00:00:00 2001
From: csantosm <4a.santos@gmail.com>
Date: Wed, 3 Aug 2022 18:38:37 +0200
Subject: [PATCH] openvidu-components: Used proxy for requesting the recording
 thumbnail

---
 .../admin/dashboard/dashboard.component.html   |  2 +-
 .../src/lib/openvidu-angular.module.ts         |  3 ++-
 .../src/lib/pipes/recording.pipe.ts            | 18 ++++++++++++++++++
 3 files changed, 21 insertions(+), 2 deletions(-)

diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/admin/dashboard/dashboard.component.html b/openvidu-components-angular/projects/openvidu-angular/src/lib/admin/dashboard/dashboard.component.html
index 741959aa..b80d87c0 100644
--- a/openvidu-components-angular/projects/openvidu-angular/src/lib/admin/dashboard/dashboard.component.html
+++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/admin/dashboard/dashboard.component.html
@@ -72,7 +72,7 @@
 									(recording.properties.outputMode === 'COMPOSED' ||
 										recording.properties.outputMode === 'COMPOSED_QUICK_START')
 								"
-								[src]="recording.thumbnailB64"
+								[src]="recording.url | thumbnailUrl"
 							/>
 							<div class="video-btns">
 								<button
diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/openvidu-angular.module.ts b/openvidu-components-angular/projects/openvidu-angular/src/lib/openvidu-angular.module.ts
index 22cd9ba7..d03a7018 100644
--- a/openvidu-components-angular/projects/openvidu-angular/src/lib/openvidu-angular.module.ts
+++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/openvidu-angular.module.ts
@@ -18,7 +18,7 @@ import { DeleteDialogComponent } from './components/dialogs/delete-recording.com
 import { LinkifyPipe } from './pipes/linkify.pipe';
 import { TranslatePipe } from './pipes/translate.pipe';
 import { StreamTypesEnabledPipe, ParticipantStreamsPipe } from './pipes/participant.pipe';
-import { DurationFromSecondsPipe, SearchByStringPropertyPipe } from './pipes/recording.pipe';
+import { DurationFromSecondsPipe, SearchByStringPropertyPipe, ThumbnailFromUrlPipe } from './pipes/recording.pipe';
 
 import { OpenViduAngularConfig } from './config/openvidu-angular.config';
 import { CdkOverlayContainer } from './config/custom-cdk-overlay';
@@ -102,6 +102,7 @@ const privateComponents = [
 		ParticipantStreamsPipe,
 		DurationFromSecondsPipe,
 		SearchByStringPropertyPipe,
+		ThumbnailFromUrlPipe,
 		StreamTypesEnabledPipe,
 		TranslatePipe
 	],
diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/pipes/recording.pipe.ts b/openvidu-components-angular/projects/openvidu-angular/src/lib/pipes/recording.pipe.ts
index 0c771064..29199f92 100644
--- a/openvidu-components-angular/projects/openvidu-angular/src/lib/pipes/recording.pipe.ts
+++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/pipes/recording.pipe.ts
@@ -50,3 +50,21 @@ export class SearchByStringPropertyPipe implements PipeTransform {
 		});
 	  }
 }
+
+/**
+ * @internal
+ */
+ @Pipe({
+	name: 'thumbnailUrl'
+})
+export class ThumbnailFromUrlPipe implements PipeTransform {
+	transform(url: string): string {
+		if(url.includes('.mp4')){
+			const lastPart = url.split('/').pop();
+			let thumbnailUrl = lastPart?.replace('mp4', 'jpg');
+			thumbnailUrl = `recordings/${thumbnailUrl?.split('.')[0]}/${thumbnailUrl}`;
+			return thumbnailUrl;
+		}
+		return '';
+	}
+}