feat(xtream): add youtube trailer view

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);
+    }
+}

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>

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;