81 lines
1.9 KiB
HTML
81 lines
1.9 KiB
HTML
<section
|
|
[ngClass]="{
|
|
fullVh: !screenWidth
|
|
}"
|
|
>
|
|
<div
|
|
class="movie-banner"
|
|
[ngClass]="{
|
|
fullVhBanner: !screenWidth
|
|
}"
|
|
>
|
|
<!-- Fallback image is displayed before the video is loaded -->
|
|
<img *ngIf="!isVideoLoaded" [src]="thumbnailUrl" class="fallback-image" />
|
|
<video
|
|
#videoElement
|
|
*ngIf="currentMovie[0].id"
|
|
[src]="videoUrl"
|
|
poster="{{ thumbnailUrl }}"
|
|
autoplay
|
|
muted
|
|
loop
|
|
playsinline
|
|
class="video-banner"
|
|
(canplay)="onVideoLoad()"
|
|
(error)="onVideoError()"
|
|
></video>
|
|
</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(playUrl, currentMovie[0].id)"
|
|
></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>
|