videoflix/frontend/src/app/components/home/browse/hero-banner/hero-banner.component.html
2024-08-31 07:28:11 +02:00

83 lines
1.9 KiB
HTML

<section
[ngClass]="{
fullVh: !screenWidth
}"
>
<div
class="movie-banner"
[ngStyle]="{
'background-image':
'url(' +
environmentBaseUrl +
'/media/thumbnails/' +
currentMovie[0]?.id +
'/' +
currentMovie[0]?.file_name +
'_1080p.jpg' +
')',
}"
[ngClass]="{
fullVhBanner: !screenWidth
}"
></div>
@if (currentMovie.length > 0) {
<div
class="content"
[ngClass]="{
fullVhContent: !screenWidth
}"
>
<div class="title">{{ currentMovie[0].title }}</div>
<div
class="description hide-scrollbar"
[ngClass]="{
fullVhDescription: !screenWidth
}"
>
{{ currentMovie[0].description }}
</div>
<div class="buttons">
<app-btn-small
*ngIf="!screenWidth"
[imgPath]="'back'"
[imgRadius]="'24px'"
(click)="backToCategory([])"
></app-btn-small>
<app-btn-large
[value]="'Play'"
[imgPath]="'play'"
[imgReverse]="true"
[disabled]="!isAnyResolutionUploaded()"
(click)="
playMovieId(
environmentBaseUrl +
'/media/videos/' +
currentMovie[0]?.id +
'/' +
currentMovie[0]?.file_name
)
"
></app-btn-large>
<div class="favorite-img" (click)="toggleLikeMovie(currentMovie[0].id)">
@if(checkLikeMovies(currentMovie[0].id)) {
<img
class="filled"
src="./../../../../assets/img/favorite-filled.svg"
alt=""
/>
} @else {
<img
class="outlined"
src="./../../../../assets/img/favorite-outlined.svg"
alt=""
/>
}
</div>
<p *ngIf="!isAnyResolutionUploaded()">
(The video is being converted)
<a (click)="refreshPage(currentMovie)">Refresh</a>
</p>
</div>
</div>
}
</section>