Chneemann/videoflix
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix: Optimize video & thumbnail load

Browse source
This commit is contained in:
Chneemann 2024-09-12 04:38:32 +02:00
parent 16a6e351d4
commit 41fee56a49
2 changed files with 16 additions and 43 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

49
frontend/src/app/components/home/browse/hero-banner/hero-banner.component.html
View file

@ -10,29 +10,12 @@
}"
>
<!-- Fallback image is displayed before the video is loaded -->
<img
*ngIf="!isVideoLoaded"
[src]="
environmentBaseUrl +
'/media/thumbnails/' +
currentMovie[0]?.id +
'/' +
currentMovie[0]?.file_name +
'_1080p.jpg'
"
class="fallback-image"
/>
<img *ngIf="!isVideoLoaded" [src]="thumbnailUrl" class="fallback-image" />
<video
#videoElement
*ngIf="currentMovie[0]?.file_name"
[src]="
environmentBaseUrl +
'/media/thumbnails/' +
currentMovie[0]?.id +
'/' +
currentMovie[0]?.file_name +
'_video-thumbnail.mp4'
"
*ngIf="currentMovie[0].id"
[src]="videoUrl"
poster="{{ thumbnailUrl }}"
autoplay
muted
loop
@ -40,19 +23,7 @@
class="video-banner"
(canplay)="onVideoLoad()"
(error)="onVideoError()"
>
<img
[src]="
environmentBaseUrl +
'/media/thumbnails/' +
currentMovie[0]?.id +
'/' +
currentMovie[0]?.file_name +
'_1080p.jpg'
"
alt="Fallback image"
/>
</video>
></video>
</div>
@if (currentMovie.length > 0) {
@ -83,15 +54,7 @@
[imgPath]="'play'"
[imgReverse]="true"
[disabled]="!isAnyResolutionUploaded()"
(click)="
playMovieId(
environmentBaseUrl +
'/media/videos/' +
currentMovie[0]?.id +
'/' +
currentMovie[0]?.file_name
)
"
(click)="playMovieId(playUrl)"
></app-btn-large>
<div class="favorite-img" (click)="toggleLikeMovie(currentMovie[0].id)">
@if(checkLikeMovies(currentMovie[0].id)) {

10
frontend/src/app/components/home/browse/hero-banner/hero-banner.component.ts
View file

@ -36,6 +36,9 @@ export class HeroBannerComponent implements OnChanges {
@Output() favoriteMovieChange = new EventEmitter<any[]>();
isVideoLoaded: boolean = false;
videoUrl: string = '';
thumbnailUrl: string = '';
playUrl: string = '';
environmentBaseUrl: string = environment.baseUrl;
movieIsUploaded: { [resolution: string]: boolean } = {
'320': true,
@ -59,6 +62,12 @@ export class HeroBannerComponent implements OnChanges {
this.isVideoLoaded = false;
}
getVideoUrls() {
this.playUrl = `${this.environmentBaseUrl}/media/videos/${this.currentMovie[0]?.id}/${this.currentMovie[0]?.file_name}`;
this.videoUrl = `${this.environmentBaseUrl}/media/thumbnails/${this.currentMovie[0]?.id}/${this.currentMovie[0]?.file_name}_video-thumbnail.mp4`;
this.thumbnailUrl = `${this.environmentBaseUrl}/media/thumbnails/${this.currentMovie[0]?.id}/${this.currentMovie[0]?.file_name}_1080p.jpg`;
}
ngOnChanges(changes: SimpleChanges) {
if (changes['currentMovie'] && this.currentMovie.length > 0) {
const movieId = this.currentMovie[0]?.id;
@ -70,6 +79,7 @@ export class HeroBannerComponent implements OnChanges {
this.movieIsUploadedChange.emit(this.movieIsUploaded);
});
setTimeout(() => this.videoSpeed(), 0);
this.getVideoUrls();
}
}
}