From 3260a975edb8a545319651c8790e3e49a8df2751 Mon Sep 17 00:00:00 2001
From: Zoe Roux <zoe.roux@sdg.moe>
Date: Sat, 4 Apr 2020 01:51:10 +0200
Subject: [PATCH] Implementing trailers

---
 src/app/app.module.ts                         |  4 +++-
 .../show-details/show-details.component.html  |  2 +-
 .../show-details/show-details.component.ts    |  9 +++++++-
 .../trailer-dialog.component.html             |  3 +++
 .../trailer-dialog.component.scss             |  0
 .../trailer-dialog.component.ts               | 21 +++++++++++++++++++
 6 files changed, 36 insertions(+), 3 deletions(-)
 create mode 100644 src/app/trailer-dialog/trailer-dialog.component.html
 create mode 100644 src/app/trailer-dialog/trailer-dialog.component.scss
 create mode 100644 src/app/trailer-dialog/trailer-dialog.component.ts

diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 4382ce92..10b3b828 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -33,6 +33,7 @@ import {MatDialogModule} from '@angular/material/dialog';
 import {FallbackDirective} from "./misc/fallback.directive";
 import {AuthModule} from "./auth/auth.module";
 import {AuthRoutingModule} from "./auth/auth-routing.module";
+import { TrailerDialogComponent } from './trailer-dialog/trailer-dialog.component';
 
 
 @NgModule({
@@ -48,7 +49,8 @@ import {AuthRoutingModule} from "./auth/auth-routing.module";
 		PeopleListComponent,
 		ShowsListComponent,
 		PasswordValidator,
-		FallbackDirective
+		FallbackDirective,
+		TrailerDialogComponent
 	],
 	imports: [
 		BrowserModule,
diff --git a/src/app/show-details/show-details.component.html b/src/app/show-details/show-details.component.html
index c77c95ac..52412fb5 100644
--- a/src/app/show-details/show-details.component.html
+++ b/src/app/show-details/show-details.component.html
@@ -15,7 +15,7 @@
 				<button mat-mini-fab matTooltipPosition="above" matTooltip="Play" class="mr-3" (click)="playClicked()">
 					<mat-icon>play_arrow</mat-icon>
 				</button>
-				<button *ngIf="this.show.trailerUrl" mat-icon-button matTooltipPosition="above" matTooltip="Trailer">
+				<button *ngIf="this.show.trailerUrl" mat-icon-button matTooltipPosition="above" matTooltip="Trailer" (click)="openTrailer()">
 					<mat-icon>local_movies</mat-icon>
 				</button>
 				<button mat-icon-button matTooltipPosition="above" matTooltip="Download">
diff --git a/src/app/show-details/show-details.component.ts b/src/app/show-details/show-details.component.ts
index 7c71fb0e..b5601621 100644
--- a/src/app/show-details/show-details.component.ts
+++ b/src/app/show-details/show-details.component.ts
@@ -5,6 +5,8 @@ import { Title } from '@angular/platform-browser';
 import {ActivatedRoute, Router} from '@angular/router';
 import { Episode } from "../../models/episode";
 import { Show } from "../../models/show";
+import {MatDialog} from "@angular/material/dialog";
+import {TrailerDialogComponent} from "../trailer-dialog/trailer-dialog.component";
 
 @Component({
 	selector: 'app-show-details',
@@ -20,7 +22,7 @@ export class ShowDetailsComponent implements OnInit
 	private toolbar: HTMLElement;
 	private backdrop: HTMLElement;
 
-	constructor(private route: ActivatedRoute, private http: HttpClient, private snackBar: MatSnackBar, private title: Title, private router: Router)
+	constructor(private route: ActivatedRoute, private http: HttpClient, private snackBar: MatSnackBar, private title: Title, private router: Router, private dialog: MatDialog)
 	{
 		this.route.queryParams.subscribe(params =>
 		{
@@ -87,4 +89,9 @@ export class ShowDetailsComponent implements OnInit
 			this.snackBar.open("An unknow error occured while getting episodes.", null, { horizontalPosition: "left", panelClass: ['snackError'], duration: 2500 });
 		});
 	}
+
+	openTrailer()
+	{
+		this.dialog.open(TrailerDialogComponent, {width: "80%", height: "50vw", data: this.show.trailerUrl});
+	}
 }
diff --git a/src/app/trailer-dialog/trailer-dialog.component.html b/src/app/trailer-dialog/trailer-dialog.component.html
new file mode 100644
index 00000000..6742f413
--- /dev/null
+++ b/src/app/trailer-dialog/trailer-dialog.component.html
@@ -0,0 +1,3 @@
+<iframe *ngIf="this.getYtTrailer()" id="ytplayer" type="text/html" height="100%" width="100%"
+        [src]="this.getYtTrailer()"
+        frameborder="0" allowfullscreen allow="autoplay"></iframe>
\ No newline at end of file
diff --git a/src/app/trailer-dialog/trailer-dialog.component.scss b/src/app/trailer-dialog/trailer-dialog.component.scss
new file mode 100644
index 00000000..e69de29b
diff --git a/src/app/trailer-dialog/trailer-dialog.component.ts b/src/app/trailer-dialog/trailer-dialog.component.ts
new file mode 100644
index 00000000..61a9e0bc
--- /dev/null
+++ b/src/app/trailer-dialog/trailer-dialog.component.ts
@@ -0,0 +1,21 @@
+import {Component, Inject} from '@angular/core';
+import {MAT_DIALOG_DATA, MatDialogRef} from "@angular/material/dialog";
+import {DomSanitizer} from "@angular/platform-browser";
+
+@Component({
+  selector: 'app-trailer-dialog',
+  templateUrl: './trailer-dialog.component.html',
+  styleUrls: ['./trailer-dialog.component.scss']
+})
+export class TrailerDialogComponent 
+{
+	constructor(public dialogRef: MatDialogRef<TrailerDialogComponent>, public sanitizer: DomSanitizer,  @Inject(MAT_DIALOG_DATA) public trailer: string) {}
+
+	getYtTrailer()
+	{
+		if (!this.trailer.includes("youtube.com"))
+			return null;
+		let uri = "https://www.youtube.com/embed/" + this.trailer.substring(this.trailer.indexOf("watch?v=") + 8) + "?autoplay=1";
+		return this.sanitizer.bypassSecurityTrustResourceUrl(uri);
+	}
+}