Cutlery/Kyoo
1
0
Fork 0
mirror of https://github.com/zoriya/Kyoo.git synced 2025-07-08 18:54:22 -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="root">
<div class="episodes" #scrollView (scroll)="onScroll()"> <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 class="episode" *ngFor="let episode of this.episodes" #episodeDom >
<div matRipple class="img" [style.background-image]="sanitize(episode.thumb)"> <button mat-icon-button class="moreBtn" [matMenuTriggerFor]="more" [matMenuTriggerData]="{episode: episode}"><i class="material-icons">more_vert</i></button>
<button mat-icon-button class="playBtn"><i class="material-icons playIcon">play_circle_outline</i></button> <a routerLink="/watch/{{episode.link}}" href="/watch/{{episode.link}}">
</div> <div matRipple class="img" [style.background-image]="sanitize(episode.thumb)">
<ng-container *ngIf="displayShowTitle; else noTitle;"> <button mat-icon-button class="playBtn"><i class="material-icons playIcon">play_circle_outline</i></button>
<h6 *ngIf="episode.seasonNumber != 0; else elseBlock;" class="title">{{episode.showTitle}} - S{{episode.seasonNumber}}:E{{episode.episodeNumber}}</h6> </div>
<ng-template #elseBlock><h6 class="title">{{episode.showTitle}}</h6></ng-template> <ng-container *ngIf="displayShowTitle; else noTitle;">
<p class="subtitle">{{episode.title}}</p> <h6 *ngIf="episode.seasonNumber != 0; else elseBlock;" class="title">{{episode.showTitle}} - S{{episode.seasonNumber}}:E{{episode.episodeNumber}}</h6>
</ng-container> <ng-template #elseBlock><h6 class="title">{{episode.showTitle}}</h6></ng-template>
<ng-template #noTitle> <p class="subtitle">{{episode.title}}</p>
<h6 *ngIf="episode.seasonNumber != 0; else elseBlock;" class="title">S{{episode.seasonNumber}}:E{{episode.episodeNumber}} - {{episode.title}}</h6> </ng-container>
<ng-template #elseBlock><h6 class="title">{{episode.title}}</h6></ng-template> <ng-template #noTitle>
<p class="overview">{{episode.overview}}</p> <h6 *ngIf="episode.seasonNumber != 0; else elseBlock;" class="title">S{{episode.seasonNumber}}:E{{episode.episodeNumber}} - {{episode.title}}</h6>
</ng-template> <ng-template #elseBlock><h6 class="title">{{episode.title}}</h6></ng-template>
</a> <p class="overview">{{episode.overview}}</p>
</ng-template>
</a>
</div>
</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 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> <button mat-raised-button color="accent" class="scrollBtn rightBtn" #rightBtn (click)="scrollRight()"><mat-icon>arrow_right</mat-icon></button>
</div> </div>

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

@ -52,9 +52,8 @@
padding: .25rem; padding: .25rem;
flex-shrink: 0; flex-shrink: 0;
width: 55%; width: 55%;
cursor: pointer; outline: none;
color: inherit; position: relative;
text-decoration: inherit;
@include media-breakpoint-up(sm) @include media-breakpoint-up(sm)
{ {
@ -76,74 +75,97 @@
width: 18%; width: 18%;
} }
.img
{
width: 100%;
height: 0;
padding-top: 56.25%;
background-color: #333333;
background-size: contain;
position: relative;
> button > .moreBtn
{ {
position: absolute; position: absolute;
top: 0; top: 2%;
bottom: 0; right: 2%;
left: 0; width: 36px;
right: 0; height: 36px;
margin: auto; outline: none;
width: 64px; display: none;
height: 64px; z-index: 255
outline: none; }
display: none;
> 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 .title {
{ padding-top: .2rem;
padding-top: .2rem; font-weight: 600;
font-weight: 600; margin-bottom: 0;
margin-bottom: 0; display: -webkit-box;
display: -webkit-box; -webkit-line-clamp: 1;
-webkit-line-clamp: 1; -webkit-box-orient: vertical;
-webkit-box-orient: vertical; overflow: hidden;
overflow: hidden; }
}
.overview .overview {
{ font-weight: 300;
font-weight: 300; display: -webkit-box;
display: -webkit-box; -webkit-line-clamp: 4;
-webkit-line-clamp: 4; -webkit-box-orient: vertical;
-webkit-box-orient: vertical; overflow: hidden;
overflow: hidden; }
}
.subtitle .subtitle {
{ font-weight: 300;
font-weight: 300; display: -webkit-box;
display: -webkit-box; -webkit-line-clamp: 1;
-webkit-line-clamp: 1; -webkit-box-orient: vertical;
-webkit-box-orient: vertical; overflow: hidden;
overflow: hidden; }
} }
&:host-context(.hoverEnabled) &:hover &:host-context(.hoverEnabled) &:hover
{ {
.img .moreBtn
{ {
outline: solid var(--accentColor); display: block;
.playBtn
{
display: block;
}
} }
.title > a
{ {
text-decoration: underline; .img
{
outline: solid var(--accentColor);
.playBtn
{
display: block;
}
}
.title
{
text-decoration: underline;
}
} }
} }
} }