diff --git a/frontend/src/app/components/home/categories/categories.component.ts b/frontend/src/app/components/home/categories/categories.component.ts index 96bc191..8f5bf8b 100644 --- a/frontend/src/app/components/home/categories/categories.component.ts +++ b/frontend/src/app/components/home/categories/categories.component.ts @@ -11,8 +11,7 @@ import { import { environment } from '../../../../environments/environment'; import { VideoListComponent } from './video-list/video-list.component'; import { FilmGenreService } from '../../../services/film-genre.service'; -import { Subject, takeUntil } from 'rxjs'; -import { FilmGenre } from '../../../interfaces/film-genre.interface'; +import { Video } from '../../../interfaces/video.interface'; @Component({ selector: 'app-categories', @@ -22,8 +21,8 @@ import { FilmGenre } from '../../../interfaces/film-genre.interface'; styleUrl: './categories.component.scss', }) export class CategoriesComponent implements AfterViewInit { - @Input() videos: any[] = []; - @Input() currentVideo: number = 0; + @Input() videos: Video[] = []; + @Input() currentVideo: Video | null = null; @Input() favoriteVideos: any[] = []; @Input() watchedVideos: any[] = []; @Output() currentVideoId = new EventEmitter(); @@ -40,8 +39,11 @@ export class CategoriesComponent implements AfterViewInit { } openCurrentVideo(videoId: number) { - this.currentVideo = videoId; - this.currentVideoId.emit(videoId); + const video = this.videos.find((v) => v.id === videoId); + if (video) { + this.currentVideo = video; + this.currentVideoId.emit(videoId); + } } getAllVideos(filmGenre: string) { diff --git a/frontend/src/app/components/home/categories/video-list/video-list.component.html b/frontend/src/app/components/home/categories/video-list/video-list.component.html index c2aebe9..7bfa132 100644 --- a/frontend/src/app/components/home/categories/video-list/video-list.component.html +++ b/frontend/src/app/components/home/categories/video-list/video-list.component.html @@ -4,7 +4,7 @@
- @if (currentVideo.length > 0) { + @if (currentVideo !== null) {
-
{{ currentVideo[0].title }}
+
{{ currentVideo.title }}
- {{ currentVideo[0].description }} + {{ currentVideo.description }}
+ @if (!isWideScreen) { + } -
- @if(checkLikeVideos(currentVideo[0].id)) { +
+ @if(checkLikeVideos(currentVideo)) { (The video is being converted) - Refresh + Refresh

}
diff --git a/frontend/src/app/components/home/hero-banner/hero-banner.component.ts b/frontend/src/app/components/home/hero-banner/hero-banner.component.ts index 6c25f01..159e39e 100644 --- a/frontend/src/app/components/home/hero-banner/hero-banner.component.ts +++ b/frontend/src/app/components/home/hero-banner/hero-banner.component.ts @@ -15,6 +15,7 @@ import { environment } from '../../../../environments/environment'; import { BtnSmallComponent } from '../../../shared/components/buttons/btn-small/btn-small.component'; import { UserService } from '../../../services/user.service'; import { ResolutionService } from '../../../services/resolution.service'; +import { Video } from '../../../interfaces/video.interface'; @Component({ selector: 'app-hero-banner', @@ -25,15 +26,16 @@ import { ResolutionService } from '../../../services/resolution.service'; }) export class HeroBannerComponent implements OnChanges { @ViewChild('videoElement') videoElementRef!: ElementRef; - @Input() currentVideo: any[] = []; + @Input() videos: Video[] = []; + @Input() currentVideo: Video | null = null; @Input() isWideScreen: boolean = false; - @Input() favoriteVideos: any[] = []; - @Input() watchedVideos: any[] = []; + @Input() favoriteVideos: number[] = []; + @Input() watchedVideos: number[] = []; @Output() playVideo = new EventEmitter(); @Output() videoIsUploadedChange = new EventEmitter<{ [resolution: string]: boolean; }>(); - @Output() refreshChange = new EventEmitter(); + @Output() refreshChange = new EventEmitter(); @Output() videosChange = new EventEmitter(); @Output() favoriteVideoChange = new EventEmitter(); @@ -69,14 +71,16 @@ export class HeroBannerComponent implements OnChanges { } getVideoUrls() { - this.playUrl = `${this.environmentBaseUrl}/media/videos/${this.currentVideo[0]?.id}/${this.currentVideo[0]?.file_name}`; - this.thumbnailUrl = `${this.environmentBaseUrl}/media/thumbnails/${this.currentVideo[0]?.id}/${this.currentVideo[0]?.file_name}_1080p.jpg`; - this.videoUrl = `${this.environmentBaseUrl}/media/thumbnails/${this.currentVideo[0]?.id}/${this.currentVideo[0]?.file_name}_video-thumbnail.mp4`; + if (this.currentVideo) { + this.playUrl = `${this.environmentBaseUrl}/media/videos/${this.currentVideo.id}/${this.currentVideo.file_name}`; + this.thumbnailUrl = `${this.environmentBaseUrl}/media/thumbnails/${this.currentVideo.id}/${this.currentVideo.file_name}_1080p.jpg`; + this.videoUrl = `${this.environmentBaseUrl}/media/thumbnails/${this.currentVideo.id}/${this.currentVideo.file_name}_video-thumbnail.mp4`; + } } ngOnChanges(changes: SimpleChanges) { - if (changes['currentVideo'] && this.currentVideo.length > 0) { - const videoId = this.currentVideo[0]?.id; + if (changes['currentVideo'] && this.currentVideo !== null) { + const videoId = this.currentVideo.id; if (videoId) { this.videoService .isVideoResolutionUploaded(videoId) @@ -97,13 +101,19 @@ export class HeroBannerComponent implements OnChanges { } } - toggleLikeVideo(videoId: number): void { - if (this.favoriteVideos.includes(videoId)) { - this.favoriteVideos = this.favoriteVideos.filter((id) => id !== videoId); - } else { - this.favoriteVideos.push(videoId); + toggleLikeVideo(video: Video): void { + if (video.id !== undefined) { + const videoId = video.id; + + if (this.favoriteVideos.includes(videoId)) { + this.favoriteVideos = this.favoriteVideos.filter( + (id) => id !== videoId + ); + } else { + this.favoriteVideos.push(videoId); + } + this.favoriteVideoChange.emit(this.favoriteVideos); } - this.favoriteVideoChange.emit(this.favoriteVideos); } toggleWatchedVideo(videoId: number): void { @@ -122,24 +132,29 @@ export class HeroBannerComponent implements OnChanges { this.userService.updateWatchedVideos(body); } - checkLikeVideos(videoId: number) { - return this.favoriteVideos.includes(videoId); + checkLikeVideos(video: Video) { + if (video.id !== undefined) { + return this.favoriteVideos.includes(video.id); + } + return false; } isAnyResolutionAvailable(): boolean { return Object.values(this.videoIsUploaded).some((available) => available); } - refreshPage(newVideos: any[]) { - this.refreshChange.emit(newVideos); + refreshPage() { + this.refreshChange.emit(this.currentVideo ? [this.currentVideo] : []); } - backToCategory(newVideos: any[]) { - this.videosChange.emit(newVideos); + backToCategory() { + this.videosChange.emit([]); } - playVideoId(videoPath: string, videoId: number) { - this.playVideo.emit(videoPath); - this.toggleWatchedVideo(videoId); + playVideoId(videoPath: string, video: Video) { + if (video.id !== undefined) { + this.playVideo.emit(videoPath); + this.toggleWatchedVideo(video.id); + } } } diff --git a/frontend/src/app/components/home/home.component.html b/frontend/src/app/components/home/home.component.html index be989da..952cc1e 100644 --- a/frontend/src/app/components/home/home.component.html +++ b/frontend/src/app/components/home/home.component.html @@ -10,9 +10,9 @@ { - this.currentVideo = updatedVideos; + this.currentVideo = + updatedVideos && updatedVideos.length > 0 ? updatedVideos[0] : null; }, 1); } - onVideosChange(updatedVideos: any[]) { + onVideosChange(updatedVideos: Video[]) { if (this.isWideScreen()) { this.loadRandomVideo(); } else { - this.currentVideo = updatedVideos; + this.currentVideo = updatedVideos[0] || null; } } @@ -98,7 +100,7 @@ export class HomeComponent implements OnInit { this.videoIsUploaded = newStatus; } - onFavoriteVideoChange(favoriteVideos: any) { + onFavoriteVideoChange(favoriteVideos: number[]) { this.favoriteVideos = favoriteVideos; this.updateLikeVideos(); } @@ -130,14 +132,13 @@ export class HomeComponent implements OnInit { loadRandomVideo(): void { const randomIndex = Math.floor(Math.random() * this.videos.length); - this.currentVideo = [this.videos[randomIndex]]; + this.currentVideo = this.videos[randomIndex] || null; } currentVideoId(videoId: number) { - let index = this.videos.findIndex((video) => video.id === videoId); - if (index !== -1) { - this.currentVideo = []; - this.currentVideo.push(this.videos[index]); + const video = this.videos.find((v) => v.id === videoId); + if (video) { + this.currentVideo = video; } } @@ -147,7 +148,7 @@ export class HomeComponent implements OnInit { ); } - toggleUploadVideoOverview(value: any) { + toggleUploadVideoOverview(value: boolean) { this.uploadVideoOverview = value; } } diff --git a/frontend/src/app/interfaces/video.interface.ts b/frontend/src/app/interfaces/video.interface.ts new file mode 100644 index 0000000..138b64d --- /dev/null +++ b/frontend/src/app/interfaces/video.interface.ts @@ -0,0 +1,10 @@ +export interface Video { + id?: number; + creator: number; + created_at: string; + title: string; + description: string; + film_genre: string; + video_file: string; + file_name: string; +} diff --git a/frontend/src/app/services/video.service.ts b/frontend/src/app/services/video.service.ts index c77ae3c..2ee50ef 100644 --- a/frontend/src/app/services/video.service.ts +++ b/frontend/src/app/services/video.service.ts @@ -3,6 +3,7 @@ import { catchError, firstValueFrom, map, Observable, of } from 'rxjs'; import { ApiService } from './api.service'; import { AuthService } from './auth.service'; import { ResolutionService } from './resolution.service'; +import { Video } from '../interfaces/video.interface'; @Injectable({ providedIn: 'root', @@ -33,7 +34,7 @@ export class VideoService { * * @returns a promise resolving to an array of video objects */ - getAllVideos(): Promise { + getAllVideos(): Promise { return firstValueFrom(this.apiService.get('/videos/', true)); } @@ -53,7 +54,7 @@ export class VideoService { * @param formData the FormData object representing the video to upload * @returns a promise resolved when the upload is successful */ - uploadVideo(formData: FormData): Promise { + uploadVideo(formData: FormData): Promise