86 lines
2.5 KiB
HTML
86 lines
2.5 KiB
HTML
<section>
|
|
@if (movies.length > 0) {
|
|
<!-- If at least one film has been uploaded -->
|
|
@if (playMovie === "") {
|
|
<app-header [browse]="true"></app-header>
|
|
@if (this.checkScreenWidth()) {
|
|
<app-hero-banner
|
|
[currentMovie]="currentMovie"
|
|
(playMovie)="playVideo($event)"
|
|
(movieIsUploadedChange)="onMovieIsUploadedChange($event)"
|
|
></app-hero-banner>
|
|
} @else {
|
|
<div class="spacer"></div>
|
|
}
|
|
<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',
|
|
'not-available': !movieIsUploaded['480']
|
|
}"
|
|
[disabled]="!movieIsUploaded['480'] || currentResolution === '480p'"
|
|
(click)="changeResolution('480p')"
|
|
>
|
|
480p
|
|
</button>
|
|
<button
|
|
[ngClass]="{
|
|
'resolution-btn': true,
|
|
active: currentResolution === '720p',
|
|
'not-available': !movieIsUploaded['720']
|
|
}"
|
|
[disabled]="!movieIsUploaded['720'] || currentResolution === '720p'"
|
|
(click)="changeResolution('720p')"
|
|
>
|
|
720p
|
|
</button>
|
|
<button
|
|
[ngClass]="{
|
|
'resolution-btn': true,
|
|
active: currentResolution === '1080p',
|
|
'not-available': !movieIsUploaded['1080']
|
|
}"
|
|
[disabled]="!movieIsUploaded['1080'] || 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>
|
|
}
|