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 --> <!-- Fallback image is displayed before the video is loaded -->
<img <img *ngIf="!isVideoLoaded" [src]="thumbnailUrl" class="fallback-image" />
*ngIf="!isVideoLoaded"
[src]="
environmentBaseUrl +
'/media/thumbnails/' +
currentMovie[0]?.id +
'/' +
currentMovie[0]?.file_name +
'_1080p.jpg'
"
class="fallback-image"
/>
<video <video
#videoElement #videoElement
*ngIf="currentMovie[0]?.file_name" *ngIf="currentMovie[0].id"
[src]=" [src]="videoUrl"
environmentBaseUrl + poster="{{ thumbnailUrl }}"
'/media/thumbnails/' +
currentMovie[0]?.id +
'/' +
currentMovie[0]?.file_name +
'_video-thumbnail.mp4'
"
autoplay autoplay
muted muted
loop loop
@ -40,19 +23,7 @@
class="video-banner" class="video-banner"
(canplay)="onVideoLoad()" (canplay)="onVideoLoad()"
(error)="onVideoError()" (error)="onVideoError()"
> ></video>
<img
[src]="
environmentBaseUrl +
'/media/thumbnails/' +
currentMovie[0]?.id +
'/' +
currentMovie[0]?.file_name +
'_1080p.jpg'
"
alt="Fallback image"
/>
</video>
</div> </div>
@if (currentMovie.length > 0) { @if (currentMovie.length > 0) {
@ -83,15 +54,7 @@
[imgPath]="'play'" [imgPath]="'play'"
[imgReverse]="true" [imgReverse]="true"
[disabled]="!isAnyResolutionUploaded()" [disabled]="!isAnyResolutionUploaded()"
(click)=" (click)="playMovieId(playUrl)"
playMovieId(
environmentBaseUrl +
'/media/videos/' +
currentMovie[0]?.id +
'/' +
currentMovie[0]?.file_name
)
"
></app-btn-large> ></app-btn-large>
<div class="favorite-img" (click)="toggleLikeMovie(currentMovie[0].id)"> <div class="favorite-img" (click)="toggleLikeMovie(currentMovie[0].id)">
@if(checkLikeMovies(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[]>(); @Output() favoriteMovieChange = new EventEmitter<any[]>();
isVideoLoaded: boolean = false; isVideoLoaded: boolean = false;
videoUrl: string = '';
thumbnailUrl: string = '';
playUrl: string = '';
environmentBaseUrl: string = environment.baseUrl; environmentBaseUrl: string = environment.baseUrl;
movieIsUploaded: { [resolution: string]: boolean } = { movieIsUploaded: { [resolution: string]: boolean } = {
'320': true, '320': true,
@ -59,6 +62,12 @@ export class HeroBannerComponent implements OnChanges {
this.isVideoLoaded = false; 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) { ngOnChanges(changes: SimpleChanges) {
if (changes['currentMovie'] && this.currentMovie.length > 0) { if (changes['currentMovie'] && this.currentMovie.length > 0) {
const movieId = this.currentMovie[0]?.id; const movieId = this.currentMovie[0]?.id;
@ -70,6 +79,7 @@ export class HeroBannerComponent implements OnChanges {
this.movieIsUploadedChange.emit(this.movieIsUploaded); this.movieIsUploadedChange.emit(this.movieIsUploaded);
}); });
setTimeout(() => this.videoSpeed(), 0); setTimeout(() => this.videoSpeed(), 0);
this.getVideoUrls();
} }
} }
} }