+
+ @for (resolution of availableResolutions; track $index) {
-
-
+ }
-
+
+ @if (isAnyResolutionUnavailable()) {
+
(If a button cannot be selected, the video will be converted, which
may take a few seconds.)
+ }
diff --git a/frontend/src/app/components/home/home.component.ts b/frontend/src/app/components/home/home.component.ts
index ca9c755..cadcd5f 100644
--- a/frontend/src/app/components/home/home.component.ts
+++ b/frontend/src/app/components/home/home.component.ts
@@ -33,11 +33,12 @@ export class HomeComponent implements OnInit {
playMovie: string = '';
isLoading: boolean = true;
uploadMovieOverview: boolean = false;
- currentResolution: '360p' | '720p' | '1080p' = '720p';
+ availableResolutions: string[] = ['360p', '720p', '1080p'];
+ currentResolution = '720p';
movieIsUploaded: { [resolution: string]: boolean } = {
- '360': false,
- '720': false,
- '1080': false,
+ '360p': false,
+ '720p': false,
+ '1080p': false,
};
constructor(
@@ -98,8 +99,8 @@ export class HomeComponent implements OnInit {
this.updateLikeMovies();
}
- changeResolution(resolution: '360p' | '720p' | '1080p') {
- if (this.videoPlayer && this.movieIsUploaded[resolution.replace('p', '')]) {
+ changeResolution(resolution: string) {
+ if (this.videoPlayer && this.movieIsUploaded[resolution]) {
this.videoPlayer.switchResolution(resolution);
this.currentResolution = resolution;
}
@@ -109,6 +110,7 @@ export class HomeComponent implements OnInit {
this.isLoading = true;
try {
this.movies = await this.movieService.getAllMovies();
+ console.log(this.movies);
} finally {
this.isLoading = false;
}
@@ -136,6 +138,12 @@ export class HomeComponent implements OnInit {
}
}
+ isAnyResolutionUnavailable(): boolean {
+ return this.availableResolutions.some(
+ (resolution) => !this.movieIsUploaded[resolution]
+ );
+ }
+
toggleUploadMovieOverview(value: any) {
this.uploadMovieOverview = value;
}
diff --git a/frontend/src/app/components/home/video-player/video-player.component.ts b/frontend/src/app/components/home/video-player/video-player.component.ts
index b756bf0..af58c70 100644
--- a/frontend/src/app/components/home/video-player/video-player.component.ts
+++ b/frontend/src/app/components/home/video-player/video-player.component.ts
@@ -62,7 +62,7 @@ export class VideoPlayerComponent implements OnInit, OnDestroy {
}
}
- public switchResolution(resolution: '360p' | '720p' | '1080p') {
+ public switchResolution(resolution: string) {
if (this.resolutionUrls[resolution]) {
if (this.hls) {
this.hls.loadSource(this.resolutionUrls[resolution]);
diff --git a/frontend/src/app/services/movie.service.ts b/frontend/src/app/services/movie.service.ts
index 144df3e..10f82cc 100644
--- a/frontend/src/app/services/movie.service.ts
+++ b/frontend/src/app/services/movie.service.ts
@@ -1,12 +1,5 @@
import { Injectable } from '@angular/core';
-import {
- BehaviorSubject,
- catchError,
- firstValueFrom,
- map,
- Observable,
- of,
-} from 'rxjs';
+import { catchError, firstValueFrom, map, Observable, of } from 'rxjs';
import { ApiService } from './api.service';
import { AuthService } from './auth.service';
@@ -14,7 +7,10 @@ import { AuthService } from './auth.service';
providedIn: 'root',
})
export class MovieService {
- private movieCache: { [key: number]: { [resolution: string]: boolean } } = {};
+ private movieCache: {
+ [key: number]: { [resolution: string]: boolean };
+ } = {};
+ private readonly availableResolutions = ['360p', '720p', '1080p'];
constructor(
private apiService: ApiService,
@@ -53,35 +49,36 @@ export class MovieService {
}
/**
- * Checks if a movie with the given video ID has been uploaded in the following resolutions: 360p, 720p, 1080p.
+ * Check if a movie is available in all resolutions on the server.
+ * This method caches the result to avoid unnecessary requests.
*
* @param videoID the ID of the movie to check
- * @returns an observable that emits an object with the following properties:
- * - '360': a boolean indicating whether the movie has been uploaded in 360p resolution
- * - '720': a boolean indicating whether the movie has been uploaded in 720p resolution
- * - '1080': a boolean indicating whether the movie has been uploaded in 1080p resolution
+ * @returns a promise resolving to an object with the available resolutions
+ * as keys and booleans indicating the availability as values.
*/
isMovieResolutionUploaded(
videoID: number
): Observable<{ [resolution: string]: boolean }> {
- const cachedRes = this.movieCache[videoID];
- if (cachedRes && Object.values(cachedRes).every(Boolean)) {
- return new BehaviorSubject(cachedRes).asObservable();
+ const cachedResolutions = this.movieCache[videoID];
+
+ if (cachedResolutions && Object.values(cachedResolutions).every(Boolean)) {
+ return of(cachedResolutions);
}
return this.apiService.get(`/video/movie/${videoID}/`, true).pipe(
map((res: any) => {
- const resolutions = {
- '360': res['360'] || false,
- '720': res['720'] || false,
- '1080': res['1080'] || false,
- };
+ const resolutions = Object.fromEntries(
+ this.availableResolutions.map((r) => [r, !!res[r]])
+ );
this.movieCache[videoID] = resolutions;
return resolutions;
}),
- catchError(() => {
+ catchError((error) => {
+ console.error('Failed to fetch movie resolutions', error);
this.authService.logout();
- return of({ '360': false, '720': false, '1080': false });
+ return of(
+ Object.fromEntries(this.availableResolutions.map((r) => [r, false]))
+ );
})
);
}