From 3f0d5442db72654bb48ec6a6c98ddcaeef6d89a2 Mon Sep 17 00:00:00 2001
From: Zoe Roux <zoe.roux@sdg.moe>
Date: Sat, 4 Apr 2020 03:06:02 +0200
Subject: [PATCH] Implementing an episode's more button with a download option

---
 .../episodes-list.component.html              |  40 +++--
 .../episodes-list.component.scss              | 140 ++++++++++--------
 2 files changed, 106 insertions(+), 74 deletions(-)

diff --git a/src/app/episodes-list/episodes-list.component.html b/src/app/episodes-list/episodes-list.component.html
index 7ceeeecf..5456e3c7 100644
--- a/src/app/episodes-list/episodes-list.component.html
+++ b/src/app/episodes-list/episodes-list.component.html
@@ -1,21 +1,31 @@
 <div class="root">
 	<div class="episodes" #scrollView (scroll)="onScroll()">
-		<a class="episode" *ngFor="let episode of this.episodes" #episodeDom routerLink="/watch/{{episode.link}}" href="/watch/{{episode.link}}">
-			<div matRipple class="img" [style.background-image]="sanitize(episode.thumb)">
-				<button mat-icon-button class="playBtn"><i class="material-icons playIcon">play_circle_outline</i></button>
-			</div>
-			<ng-container *ngIf="displayShowTitle; else noTitle;">
-				<h6 *ngIf="episode.seasonNumber != 0; else elseBlock;" class="title">{{episode.showTitle}} - S{{episode.seasonNumber}}:E{{episode.episodeNumber}}</h6>
-				<ng-template #elseBlock><h6 class="title">{{episode.showTitle}}</h6></ng-template>
-				<p class="subtitle">{{episode.title}}</p>
-			</ng-container>
-			<ng-template #noTitle>
-				<h6 *ngIf="episode.seasonNumber != 0; else elseBlock;" class="title">S{{episode.seasonNumber}}:E{{episode.episodeNumber}} - {{episode.title}}</h6>
-				<ng-template #elseBlock><h6 class="title">{{episode.title}}</h6></ng-template>
-				<p class="overview">{{episode.overview}}</p>
-			</ng-template>
-		</a>
+		<div class="episode" *ngFor="let episode of this.episodes" #episodeDom >
+			<button mat-icon-button class="moreBtn" [matMenuTriggerFor]="more" [matMenuTriggerData]="{episode: episode}"><i class="material-icons">more_vert</i></button>
+			<a routerLink="/watch/{{episode.link}}" href="/watch/{{episode.link}}">
+				<div matRipple class="img" [style.background-image]="sanitize(episode.thumb)">
+					<button mat-icon-button class="playBtn"><i class="material-icons playIcon">play_circle_outline</i></button>
+				</div>
+				<ng-container *ngIf="displayShowTitle; else noTitle;">
+					<h6 *ngIf="episode.seasonNumber != 0; else elseBlock;" class="title">{{episode.showTitle}} - S{{episode.seasonNumber}}:E{{episode.episodeNumber}}</h6>
+					<ng-template #elseBlock><h6 class="title">{{episode.showTitle}}</h6></ng-template>
+					<p class="subtitle">{{episode.title}}</p>
+				</ng-container>
+				<ng-template #noTitle>
+					<h6 *ngIf="episode.seasonNumber != 0; else elseBlock;" class="title">S{{episode.seasonNumber}}:E{{episode.episodeNumber}} - {{episode.title}}</h6>
+					<ng-template #elseBlock><h6 class="title">{{episode.title}}</h6></ng-template>
+					<p class="overview">{{episode.overview}}</p>
+				</ng-template>
+			</a>
+		</div>
 	</div>
+	
+	<mat-menu #more="matMenu">
+		<ng-template matMenuContent let-episode="episode">
+			<a [href]="'/video/' + episode.link" download><button mat-menu-item>Download episode</button></a>
+		</ng-template>
+	</mat-menu>
+	
 	<button mat-raised-button color="accent" class="scrollBtn leftBtn d-none" #leftBtn (click)="scrollLeft()"><mat-icon>arrow_left</mat-icon></button>
 	<button mat-raised-button color="accent" class="scrollBtn rightBtn" #rightBtn (click)="scrollRight()"><mat-icon>arrow_right</mat-icon></button>
 </div>
diff --git a/src/app/episodes-list/episodes-list.component.scss b/src/app/episodes-list/episodes-list.component.scss
index fa783ea9..b51e4ec7 100644
--- a/src/app/episodes-list/episodes-list.component.scss
+++ b/src/app/episodes-list/episodes-list.component.scss
@@ -52,9 +52,8 @@
 	padding: .25rem;
 	flex-shrink: 0;
 	width: 55%;
-	cursor: pointer;
-	color: inherit;
-	text-decoration: inherit;
+	outline: none;
+	position: relative;
 
 	@include media-breakpoint-up(sm)
 	{
@@ -76,74 +75,97 @@
 		width: 18%;
 	}
 
-	.img
-	{
-		width: 100%;
-		height: 0;
-		padding-top: 56.25%;
-		background-color: #333333;
-		background-size: contain;
-		position: relative;
 
-		> button
-		{
-			position: absolute;
-			top: 0;
-			bottom: 0;
-			left: 0;
-			right: 0;
-			margin: auto;
-			width: 64px;
-			height: 64px;
-			outline: none;
-			display: none;
+	> .moreBtn
+	{
+		position: absolute;
+		top: 2%;
+		right: 2%;
+		width: 36px;
+		height: 36px;
+		outline: none;
+		display: none;
+		z-index: 255
+	}
+	
+	> a {
+		cursor: pointer;
+		color: inherit;
+		text-decoration: inherit;
+		outline: none;
+
+		.img {
+			width: 100%;
+			height: 0;
+			padding-top: 56.25%;
+			background-color: #333333;
+			background-size: contain;
+			position: relative;
+
+			> .playBtn {
+				position: absolute;
+				top: 0;
+				bottom: 0;
+				left: 0;
+				right: 0;
+				margin: auto;
+				width: 64px;
+				height: 64px;
+				outline: none;
+				display: none;
+			}
 		}
-	}
 
-	.title
-	{
-		padding-top: .2rem;
-		font-weight: 600;
-		margin-bottom: 0;
-		display: -webkit-box;
-		-webkit-line-clamp: 1;
-		-webkit-box-orient: vertical;
-		overflow: hidden;
-	}
+		.title {
+			padding-top: .2rem;
+			font-weight: 600;
+			margin-bottom: 0;
+			display: -webkit-box;
+			-webkit-line-clamp: 1;
+			-webkit-box-orient: vertical;
+			overflow: hidden;
+		}
 
-	.overview
-	{
-		font-weight: 300;
-		display: -webkit-box;
-		-webkit-line-clamp: 4;
-		-webkit-box-orient: vertical;
-		overflow: hidden;
-	}
+		.overview {
+			font-weight: 300;
+			display: -webkit-box;
+			-webkit-line-clamp: 4;
+			-webkit-box-orient: vertical;
+			overflow: hidden;
+		}
 
-	.subtitle
-	{
-		font-weight: 300;
-		display: -webkit-box;
-		-webkit-line-clamp: 1;
-		-webkit-box-orient: vertical;
-		overflow: hidden;
+		.subtitle {
+			font-weight: 300;
+			display: -webkit-box;
+			-webkit-line-clamp: 1;
+			-webkit-box-orient: vertical;
+			overflow: hidden;
+		}
 	}
 
 	&:host-context(.hoverEnabled) &:hover
 	{
-		.img
+		.moreBtn
 		{
-			outline: solid var(--accentColor);
-
-			.playBtn
-			{
-				display: block;
-			}
+			display: block;
 		}
-
-		.title
+		
+		> a 
 		{
-			text-decoration: underline;
+			.img 
+			{
+				outline: solid var(--accentColor);
+
+				.playBtn 
+				{
+					display: block;
+				}
+			}
+
+			.title
+			{
+				text-decoration: underline;
+			}
 		}
 	}
 }