Fixing trailers

This commit is contained in:
Zoe Roux 2021-03-27 01:42:11 +01:00
parent 46a5b53af0
commit 2bb34c20b1
3 changed files with 14 additions and 10 deletions

View File

@ -1,3 +1,2 @@
<iframe *ngIf="this.getYtTrailer()" id="ytplayer" type="text/html" height="100%" width="100%" <iframe id="frame" height="100%" width="100%"
[src]="this.getYtTrailer()" frameborder="0" allowfullscreen allow="autoplay"></iframe>
frameborder="0" allowfullscreen allow="autoplay"></iframe>

View File

@ -1,4 +1,4 @@
.panel .mat-dialog-container ::ng-deep .panel .mat-dialog-container
{ {
overflow-y: hidden; overflow-y: hidden;
} }

View File

@ -1,4 +1,4 @@
import { Component, Inject } from "@angular/core"; import { AfterViewInit, Component, Inject } from "@angular/core";
import { MAT_DIALOG_DATA, MatDialogRef } from "@angular/material/dialog"; import { MAT_DIALOG_DATA, MatDialogRef } from "@angular/material/dialog";
import { DomSanitizer, SafeUrl } from "@angular/platform-browser"; import { DomSanitizer, SafeUrl } from "@angular/platform-browser";
@ -7,19 +7,24 @@ import { DomSanitizer, SafeUrl } from "@angular/platform-browser";
templateUrl: "./trailer-dialog.component.html", templateUrl: "./trailer-dialog.component.html",
styleUrls: ["./trailer-dialog.component.scss"] styleUrls: ["./trailer-dialog.component.scss"]
}) })
export class TrailerDialogComponent export class TrailerDialogComponent implements AfterViewInit
{ {
constructor(public dialogRef: MatDialogRef<TrailerDialogComponent>, constructor(public dialogRef: MatDialogRef<TrailerDialogComponent>,
public sanitizer: DomSanitizer, public sanitizer: DomSanitizer,
@Inject(MAT_DIALOG_DATA) public trailer: string) @Inject(MAT_DIALOG_DATA) public trailer: string)
{} {}
getYtTrailer(): SafeUrl getYtTrailer(): string
{ {
if (!this.trailer.includes("youtube.com")) if (!this.trailer.includes("youtube.com"))
return null; return null;
const ytID: string = this.trailer.substring(this.trailer.indexOf("watch?v=") + 8); const ytID: string = this.trailer.substring(this.trailer.indexOf("watch?v=") + 8);
const uri: string = `https://www.youtube.com/embed/${ytID}?autoplay=1`; return `https://www.youtube.com/embed/${ytID}?autoplay=1`;
return this.sanitizer.bypassSecurityTrustResourceUrl(uri); }
ngAfterViewInit(): void
{
const frame = <HTMLIFrameElement>document.getElementById("frame")
frame.src = this.getYtTrailer();
} }
} }