Implementing trailers

This commit is contained in:
Zoe Roux 2020-04-04 01:51:10 +02:00
parent e91fc94789
commit 3260a975ed
6 changed files with 36 additions and 3 deletions

View File

@ -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,

View File

@ -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">

View File

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

View File

@ -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>

View File

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