Cutlery/Kyoo
1
0
Fork 0
mirror of https://github.com/zoriya/Kyoo.git synced 2025-07-08 10:44:20 -04:00
Code Issues Packages Projects Releases Wiki Activity

Implementing an episode's more button with a download option

Browse Source
This commit is contained in:
Zoe Roux 2020-04-04 03:06:02 +02:00
parent 9e32eb6a4d
commit 3f0d5442db
2 changed files with 106 additions and 74 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
src/app/episodes-list/episodes-list.component.html
View File

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

140
src/app/episodes-list/episodes-list.component.scss
View File

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