From 3bf2346f5769caaea12e7b27af9bdae90e505662 Mon Sep 17 00:00:00 2001
From: 4gray <serega05@gmail.com>
Date: Mon, 1 Apr 2024 23:29:47 +0200
Subject: [PATCH] feat(xtream): add youtube trailer view

---
 src/app/xtream/vod-details/safe.pipe.ts           | 11 +++++++++++
 .../xtream/vod-details/vod-details.component.html | 15 +++++++++++++++
 .../xtream/vod-details/vod-details.component.ts   |  3 ++-
 3 files changed, 28 insertions(+), 1 deletion(-)
 create mode 100644 src/app/xtream/vod-details/safe.pipe.ts

diff --git a/src/app/xtream/vod-details/safe.pipe.ts b/src/app/xtream/vod-details/safe.pipe.ts
new file mode 100644
index 000000000..d91d2fcec
--- /dev/null
+++ b/src/app/xtream/vod-details/safe.pipe.ts
@@ -0,0 +1,11 @@
+import { Pipe, PipeTransform } from '@angular/core';
+import { DomSanitizer } from '@angular/platform-browser';
+
+@Pipe({ name: 'safe', standalone: true })
+export class SafePipe implements PipeTransform {
+    constructor(private sanitizer: DomSanitizer) {}
+
+    transform(url: string) {
+        return this.sanitizer.bypassSecurityTrustResourceUrl(url);
+    }
+}
diff --git a/src/app/xtream/vod-details/vod-details.component.html b/src/app/xtream/vod-details/vod-details.component.html
index ce1068d46..0995035fd 100644
--- a/src/app/xtream/vod-details/vod-details.component.html
+++ b/src/app/xtream/vod-details/vod-details.component.html
@@ -85,3 +85,18 @@
         </div>
     </div>
 </div>
+<div class="youtube-trailer" *ngIf="item.info.youtube_trailer">
+    <h3>YouTube Trailer</h3>
+    <iframe
+        width="560"
+        height="315"
+        [src]="
+            'https://www.youtube.com/embed/' + item.info?.youtube_trailer | safe
+        "
+        title="YouTube video player"
+        frameborder="0"
+        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+        referrerpolicy="strict-origin-when-cross-origin"
+        allowfullscreen
+    ></iframe>
+</div>
diff --git a/src/app/xtream/vod-details/vod-details.component.ts b/src/app/xtream/vod-details/vod-details.component.ts
index 25e4adf36..fa5ce5b4a 100644
--- a/src/app/xtream/vod-details/vod-details.component.ts
+++ b/src/app/xtream/vod-details/vod-details.component.ts
@@ -13,13 +13,14 @@ import { ActivatedRoute } from '@angular/router';
 import { TranslateModule } from '@ngx-translate/core';
 import { XtreamVodDetails } from '../../../../shared/xtream-vod-details.interface';
 import { PlaylistsService } from '../../services/playlists.service';
+import { SafePipe } from './safe.pipe';
 
 @Component({
     selector: 'app-vod-details',
     templateUrl: './vod-details.component.html',
     styleUrls: ['../detail-view.scss'],
     standalone: true,
-    imports: [MatButtonModule, NgIf, MatIconModule, TranslateModule],
+    imports: [MatButtonModule, NgIf, MatIconModule, SafePipe, TranslateModule],
 })
 export class VodDetailsComponent implements OnInit {
     @Input({ required: true }) item: XtreamVodDetails;