Adding a play button for movies

This commit is contained in:
Zoe Roux 2020-03-01 04:26:27 +01:00
parent 9d7ee54bdf
commit 1d8d59fe48
2 changed files with 11 additions and 3 deletions

View File

@ -12,7 +12,7 @@
<ng-template #elseBlock><h2 class="date">{{show.startYear}}</h2></ng-template> <ng-template #elseBlock><h2 class="date">{{show.startYear}}</h2></ng-template>
</div> </div>
<div class="buttons"> <div class="buttons">
<button mat-mini-fab matTooltipPosition="above" matTooltip="Play" class="mr-3"> <button mat-mini-fab matTooltipPosition="above" matTooltip="Play" class="mr-3" (click)="playClicked()">
<mat-icon>play_arrow</mat-icon> <mat-icon>play_arrow</mat-icon>
</button> </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">

View File

@ -2,7 +2,7 @@ import { HttpClient } from "@angular/common/http";
import { Component, OnInit } from '@angular/core'; import { Component, OnInit } from '@angular/core';
import { MatSnackBar } from "@angular/material/snack-bar"; import { MatSnackBar } from "@angular/material/snack-bar";
import { Title } from '@angular/platform-browser'; import { Title } from '@angular/platform-browser';
import { ActivatedRoute } from '@angular/router'; import {ActivatedRoute, Router} from '@angular/router';
import { Episode } from "../../models/episode"; import { Episode } from "../../models/episode";
import { Show } from "../../models/show"; import { Show } from "../../models/show";
@ -20,7 +20,7 @@ export class ShowDetailsComponent implements OnInit
private toolbar: HTMLElement; private toolbar: HTMLElement;
private backdrop: HTMLElement; private backdrop: HTMLElement;
constructor(private route: ActivatedRoute, private http: HttpClient, private snackBar: MatSnackBar, private title: Title) constructor(private route: ActivatedRoute, private http: HttpClient, private snackBar: MatSnackBar, private title: Title, private router: Router)
{ {
this.route.queryParams.subscribe(params => this.route.queryParams.subscribe(params =>
{ {
@ -58,6 +58,14 @@ export class ShowDetailsComponent implements OnInit
{ {
let opacity: number = 2 * window.scrollY / this.backdrop.clientHeight; let opacity: number = 2 * window.scrollY / this.backdrop.clientHeight;
this.toolbar.setAttribute("style", `background-color: rgba(0, 0, 0, ${opacity}) !important`); this.toolbar.setAttribute("style", `background-color: rgba(0, 0, 0, ${opacity}) !important`);
};
playClicked()
{
if (this.show.isMovie)
this.router.navigate(["/watch/" + this.show.slug]);
else
this.router.navigate(["/watch/" + this.show.slug + "-s1e1"]);
} }
getEpisodes() getEpisodes()