97 lines
3.1 KiB
HTML
97 lines
3.1 KiB
HTML
<section>
|
|
<div *ngIf="isLoading"></div>
|
|
@if (!isLoading && videos.length > 0) {
|
|
<!-- If at least one film has been uploaded -->
|
|
@if (playVideo === "") {
|
|
<app-header
|
|
(videosChange)="onVideosChange($event)"
|
|
[showFullLogo]="false"
|
|
></app-header>
|
|
<!-- Hero Banner -->
|
|
<app-hero-banner
|
|
*ngIf="
|
|
currentVideo !== null || (this.isWideScreen() && currentVideo !== null)
|
|
"
|
|
[videos]="videos"
|
|
[isWideScreen]="isWideScreen()"
|
|
[currentVideo]="currentVideo"
|
|
[favoriteVideos]="favoriteVideos"
|
|
[watchedVideos]="watchedVideos"
|
|
(playVideo)="playVideoPath($event)"
|
|
(videoIsUploadedChange)="onVideoIsUploadedChange($event)"
|
|
(videosChange)="onVideosChange($event)"
|
|
(refreshChange)="onRefreshPage($event)"
|
|
(favoriteVideoChange)="onFavoriteVideoChange($event)"
|
|
></app-hero-banner>
|
|
<!-- Spacer -->
|
|
<div *ngIf="!this.isWideScreen()" class="spacer"></div>
|
|
<!-- Video Categories -->
|
|
<app-categories
|
|
*ngIf="
|
|
this.isWideScreen() || (!this.isWideScreen() && currentVideo !== null)
|
|
"
|
|
[videos]="videos"
|
|
[currentVideo]="currentVideo"
|
|
[favoriteVideos]="favoriteVideos"
|
|
[watchedVideos]="watchedVideos"
|
|
(currentVideoId)="currentVideoId($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="center">
|
|
<div class="resolution-controls">
|
|
<!-- Resolution buttons -->
|
|
@for (resolution of availableResolutions; track $index) {
|
|
<button
|
|
[ngClass]="{
|
|
'resolution-btn': true,
|
|
active: currentResolution === resolution,
|
|
'not-available': !videoIsUploaded[resolution]
|
|
}"
|
|
[disabled]="
|
|
!videoIsUploaded[resolution] || currentResolution === resolution
|
|
"
|
|
(click)="changeResolution(resolution)"
|
|
>
|
|
{{ resolution }}
|
|
</button>
|
|
}
|
|
</div>
|
|
<!-- Resolution instructions -->
|
|
@if (isAnyResolutionUnavailable()) {
|
|
<p>
|
|
(If a button cannot be selected, the video will be converted, which
|
|
may take a few seconds.)
|
|
</p>
|
|
}
|
|
</div>
|
|
<div class="logo">
|
|
<img src="./../../../../assets/img/logo_ci.svg" alt="Logo" />
|
|
</div>
|
|
</div>
|
|
<app-video-player [playVideo]="playVideo"></app-video-player>
|
|
</div>
|
|
} } @if (!isLoading && videos.length === 0) {
|
|
<!-- If the database is empty -->
|
|
<app-header [showFullLogo]="false"></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)="toggleUploadVideoOverview(true)"
|
|
></app-btn-small>
|
|
</div>
|
|
</section>
|
|
@if (uploadVideoOverview) {
|
|
<app-upload-video
|
|
(toggleUploadVideoOverview)="toggleUploadVideoOverview($event)"
|
|
(uploadedVideo)="onVideoUploaded($event)"
|
|
></app-upload-video>
|
|
}
|