videoflix/frontend/src/app/components/home/browse/browse.component.html

77 lines
2.2 KiB
HTML

<section>
@if (currentMovie[0]) {
<!-- If at least one film has been uploaded -->
@if (playMovie === "") {
<app-header [browse]="true"></app-header>
<app-hero-banner
[currentMovie]="currentMovie"
(playMovie)="playVideo($event)"
></app-hero-banner>
<app-categories
[movies]="movies"
[currentMovie]="currentMovie[0]?.id"
(currentMovieId)="currentMovieId($event)"
></app-categories>
} @else {
<div class="video-overlay">
<div class="video-header">
<div class="back-button" (click)="closeVideo()">
<img src="./../../../../assets/img/back.svg" alt="Back" />
</div>
<div class="resolution-controls">
<button
[ngClass]="{
'resolution-btn': true,
active: currentResolution === '480p'
}"
[disabled]="currentResolution === '480p'"
(click)="changeResolution('480p')"
>
480p
</button>
<button
[ngClass]="{
'resolution-btn': true,
active: currentResolution === '720p'
}"
[disabled]="currentResolution === '720p'"
(click)="changeResolution('720p')"
>
720p
</button>
<button
[ngClass]="{
'resolution-btn': true,
active: currentResolution === '1080p'
}"
[disabled]="currentResolution === '1080p'"
(click)="changeResolution('1080p')"
>
1080p
</button>
</div>
<div class="logo">
<img src="./../../../../assets/img/logo_ci.svg" alt="Logo" />
</div>
</div>
<app-video-player [playMovie]="playMovie"></app-video-player>
</div>
} } @else {
<!-- If the database is empty -->
<app-header [browse]="true"></app-header>
<div class="error">
<h2>Unfortunately there are no films available in the database.</h2>
</div>
}
<div class="add-button">
<app-btn-small
[imgPath]="'add'"
(click)="toggleUploadMovieOverview(true)"
></app-btn-small>
</div>
</section>
@if (uploadMovieOverview) {
<app-upload-movie
(toggleUploadMovieOverview)="toggleUploadMovieOverview($event)"
></app-upload-movie>
}