diff --git a/frontend/src/app/components/home/hero-banner/hero-banner.component.html b/frontend/src/app/components/home/hero-banner/hero-banner.component.html index 00133eb..7e500a9 100644 --- a/frontend/src/app/components/home/hero-banner/hero-banner.component.html +++ b/frontend/src/app/components/home/hero-banner/hero-banner.component.html @@ -4,7 +4,7 @@ }" >
- @if (currentMovie.length > 0) { + @if (currentVideo.length > 0) {
-
{{ currentMovie[0].title }}
+
{{ currentVideo[0].title }}
- {{ currentMovie[0].description }} + {{ currentVideo[0].description }}
-
- @if(checkLikeMovies(currentMovie[0].id)) { +
+ @if(checkLikeVideos(currentVideo[0].id)) { (The video is being converted) - Refresh + Refresh

}
diff --git a/frontend/src/app/components/home/hero-banner/hero-banner.component.scss b/frontend/src/app/components/home/hero-banner/hero-banner.component.scss index 203fc87..66aa73a 100644 --- a/frontend/src/app/components/home/hero-banner/hero-banner.component.scss +++ b/frontend/src/app/components/home/hero-banner/hero-banner.component.scss @@ -4,7 +4,7 @@ section { height: 400px; } -.movie-banner { +.video-banner { height: 400px; position: relative; overflow: hidden; @@ -134,7 +134,7 @@ section { hue-rotate(342deg) brightness(94%) contrast(119%); } -.movie-banner { +.video-banner { background-size: cover; background-position: center; background-repeat: no-repeat; 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 407dfbc..6c25f01 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 @@ -25,17 +25,17 @@ import { ResolutionService } from '../../../services/resolution.service'; }) export class HeroBannerComponent implements OnChanges { @ViewChild('videoElement') videoElementRef!: ElementRef; - @Input() currentMovie: any[] = []; + @Input() currentVideo: any[] = []; @Input() isWideScreen: boolean = false; - @Input() favoriteMovies: any[] = []; - @Input() watchedMovies: any[] = []; - @Output() playMovie = new EventEmitter(); - @Output() movieIsUploadedChange = new EventEmitter<{ + @Input() favoriteVideos: any[] = []; + @Input() watchedVideos: any[] = []; + @Output() playVideo = new EventEmitter(); + @Output() videoIsUploadedChange = new EventEmitter<{ [resolution: string]: boolean; }>(); @Output() refreshChange = new EventEmitter(); - @Output() moviesChange = new EventEmitter(); - @Output() favoriteMovieChange = new EventEmitter(); + @Output() videosChange = new EventEmitter(); + @Output() favoriteVideoChange = new EventEmitter(); isVideoLoaded: boolean = false; videoUrl: string = ''; @@ -44,7 +44,7 @@ export class HeroBannerComponent implements OnChanges { environmentBaseUrl: string = environment.baseUrl; availableResolutions: string[]; - movieIsUploaded: { [resolution: string]: boolean }; + videoIsUploaded: { [resolution: string]: boolean }; constructor( private videoService: VideoService, @@ -53,7 +53,7 @@ export class HeroBannerComponent implements OnChanges { ) { this.availableResolutions = this.resolutionService.getAvailableResolutions(); - this.movieIsUploaded = this.resolutionService.initMovieIsUploaded(); + this.videoIsUploaded = this.resolutionService.initVideoIsUploaded(); } ngAfterViewInit() { @@ -69,20 +69,20 @@ export class HeroBannerComponent implements OnChanges { } getVideoUrls() { - this.playUrl = `${this.environmentBaseUrl}/media/videos/${this.currentMovie[0]?.id}/${this.currentMovie[0]?.file_name}`; - this.thumbnailUrl = `${this.environmentBaseUrl}/media/thumbnails/${this.currentMovie[0]?.id}/${this.currentMovie[0]?.file_name}_1080p.jpg`; - this.videoUrl = `${this.environmentBaseUrl}/media/thumbnails/${this.currentMovie[0]?.id}/${this.currentMovie[0]?.file_name}_video-thumbnail.mp4`; + 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`; } ngOnChanges(changes: SimpleChanges) { - if (changes['currentMovie'] && this.currentMovie.length > 0) { - const movieId = this.currentMovie[0]?.id; - if (movieId) { + if (changes['currentVideo'] && this.currentVideo.length > 0) { + const videoId = this.currentVideo[0]?.id; + if (videoId) { this.videoService - .isVideoResolutionUploaded(movieId) + .isVideoResolutionUploaded(videoId) .subscribe((resolutions) => { - this.movieIsUploaded = resolutions; - this.movieIsUploadedChange.emit(this.movieIsUploaded); + this.videoIsUploaded = resolutions; + this.videoIsUploadedChange.emit(this.videoIsUploaded); }); setTimeout(() => this.videoSpeed(), 0); this.getVideoUrls(); @@ -97,49 +97,49 @@ export class HeroBannerComponent implements OnChanges { } } - toggleLikeMovie(movieId: number): void { - if (this.favoriteMovies.includes(movieId)) { - this.favoriteMovies = this.favoriteMovies.filter((id) => id !== movieId); + toggleLikeVideo(videoId: number): void { + if (this.favoriteVideos.includes(videoId)) { + this.favoriteVideos = this.favoriteVideos.filter((id) => id !== videoId); } else { - this.favoriteMovies.push(movieId); + this.favoriteVideos.push(videoId); } - this.favoriteMovieChange.emit(this.favoriteMovies); + this.favoriteVideoChange.emit(this.favoriteVideos); } - toggleWatchedMovie(movieId: number): void { - if (this.watchedMovies.includes(movieId)) { - this.watchedMovies = this.watchedMovies.filter((id) => id !== movieId); + toggleWatchedVideo(videoId: number): void { + if (this.watchedVideos.includes(videoId)) { + this.watchedVideos = this.watchedVideos.filter((id) => id !== videoId); } else { - this.watchedMovies.push(movieId); + this.watchedVideos.push(videoId); } - this.updateWatchedMovies(); + this.updateWatchedVideos(); } - updateWatchedMovies() { + updateWatchedVideos() { const body = { - watched_videos: this.watchedMovies, + watched_videos: this.watchedVideos, }; - this.userService.updateWatchedMovies(body); + this.userService.updateWatchedVideos(body); } - checkLikeMovies(videoId: number) { - return this.favoriteMovies.includes(videoId); + checkLikeVideos(videoId: number) { + return this.favoriteVideos.includes(videoId); } isAnyResolutionAvailable(): boolean { - return Object.values(this.movieIsUploaded).some((available) => available); + return Object.values(this.videoIsUploaded).some((available) => available); } - refreshPage(newMovies: any[]) { - this.refreshChange.emit(newMovies); + refreshPage(newVideos: any[]) { + this.refreshChange.emit(newVideos); } - backToCategory(newMovies: any[]) { - this.moviesChange.emit(newMovies); + backToCategory(newVideos: any[]) { + this.videosChange.emit(newVideos); } - playMovieId(videoPath: string, videoId: number) { - this.playMovie.emit(videoPath); - this.toggleWatchedMovie(videoId); + playVideoId(videoPath: string, videoId: number) { + this.playVideo.emit(videoPath); + this.toggleWatchedVideo(videoId); } } diff --git a/frontend/src/app/components/home/home.component.html b/frontend/src/app/components/home/home.component.html index fe20928..be989da 100644 --- a/frontend/src/app/components/home/home.component.html +++ b/frontend/src/app/components/home/home.component.html @@ -1,40 +1,40 @@
- @if (!isLoading && movies.length > 0) { + @if (!isLoading && videos.length > 0) { - @if (playMovie === "") { + @if (playVideo === "") {
- + } @else {
@@ -50,10 +50,10 @@ [ngClass]="{ 'resolution-btn': true, active: currentResolution === resolution, - 'not-available': !movieIsUploaded[resolution] + 'not-available': !videoIsUploaded[resolution] }" [disabled]=" - !movieIsUploaded[resolution] || currentResolution === resolution + !videoIsUploaded[resolution] || currentResolution === resolution " (click)="changeResolution(resolution)" > @@ -73,9 +73,9 @@ Logo
- +
- } } @if (!isLoading && movies.length === 0) { + } } @if (!isLoading && videos.length === 0) {
@@ -85,12 +85,12 @@
-@if (uploadMovieOverview) { - +@if (uploadVideoOverview) { + } diff --git a/frontend/src/app/components/home/home.component.ts b/frontend/src/app/components/home/home.component.ts index 8e7d31d..20ae1c1 100644 --- a/frontend/src/app/components/home/home.component.ts +++ b/frontend/src/app/components/home/home.component.ts @@ -6,7 +6,7 @@ import { VideoService } from '../../services/video.service'; import { CommonModule } from '@angular/common'; import { VideoPlayerComponent } from './video-player/video-player.component'; import { BtnSmallComponent } from '../../shared/components/buttons/btn-small/btn-small.component'; -import { UploadMovieComponent } from './upload-movie/upload-movie.component'; +import { UploadVideoComponent } from './upload-video/upload-video.component'; import { UserService } from '../../services/user.service'; import { ResolutionService } from '../../services/resolution.service'; @@ -20,24 +20,24 @@ import { ResolutionService } from '../../services/resolution.service'; CategoriesComponent, VideoPlayerComponent, BtnSmallComponent, - UploadMovieComponent, + UploadVideoComponent, ], templateUrl: './home.component.html', styleUrl: './home.component.scss', }) export class HomeComponent implements OnInit { @ViewChild(VideoPlayerComponent) videoPlayer!: VideoPlayerComponent; - movies: any[] = []; - favoriteMovies: number[] = []; - watchedMovies: number[] = []; - currentMovie: any[] = []; - playMovie: string = ''; + videos: any[] = []; + favoriteVideos: number[] = []; + watchedVideos: number[] = []; + currentVideo: any[] = []; + playVideo: string = ''; isLoading: boolean = true; - uploadMovieOverview: boolean = false; + uploadVideoOverview: boolean = false; availableResolutions: string[]; currentResolution: string; - movieIsUploaded: { [resolution: string]: boolean }; + videoIsUploaded: { [resolution: string]: boolean }; constructor( private videoService: VideoService, @@ -47,46 +47,46 @@ export class HomeComponent implements OnInit { this.availableResolutions = this.resolutionService.getAvailableResolutions(); this.currentResolution = this.resolutionService.getDefaultResolution(); - this.movieIsUploaded = this.resolutionService.initMovieIsUploaded(); + this.videoIsUploaded = this.resolutionService.initVideoIsUploaded(); } async ngOnInit() { - this.loadLikedAndWatchedMovies(); - await this.loadAllMovies(); + this.loadLikedAndWatchedVideos(); + await this.loadAllVideos(); if (this.isWideScreen()) { - this.currentMovie.length === 0 ? this.loadRandomMovie() : null; + this.currentVideo.length === 0 ? this.loadRandomVideo() : null; } } - async loadLikedAndWatchedMovies() { + async loadLikedAndWatchedVideos() { try { - const userData = await this.userService.getLikedAndWatchedMovies(); - this.favoriteMovies = userData.liked_videos; - this.watchedMovies = userData.watched_videos; + const userData = await this.userService.getLikedAndWatchedVideos(); + this.favoriteVideos = userData.liked_videos; + this.watchedVideos = userData.watched_videos; } catch (error) { console.error(error); } } - updateLikeMovies() { + updateLikeVideos() { const body = { - liked_videos: this.favoriteMovies, + liked_videos: this.favoriteVideos, }; - this.userService.updateLikedMovies(body); + this.userService.updateLikedVideos(body); } - onRefreshPage(updatedMovies: any[]) { - this.currentMovie = []; + onRefreshPage(updatedVideos: any[]) { + this.currentVideo = []; setTimeout(() => { - this.currentMovie = updatedMovies; + this.currentVideo = updatedVideos; }, 1); } - onMoviesChange(updatedMovies: any[]) { + onVideosChange(updatedVideos: any[]) { if (this.isWideScreen()) { - this.loadRandomMovie(); + this.loadRandomVideo(); } else { - this.currentMovie = updatedMovies; + this.currentVideo = updatedVideos; } } @@ -94,60 +94,60 @@ export class HomeComponent implements OnInit { return window.innerWidth > 600; } - onMovieIsUploadedChange(newStatus: { [resolution: string]: boolean }) { - this.movieIsUploaded = newStatus; + onVideoIsUploadedChange(newStatus: { [resolution: string]: boolean }) { + this.videoIsUploaded = newStatus; } - onFavoriteMovieChange(favoriteMovies: any) { - this.favoriteMovies = favoriteMovies; - this.updateLikeMovies(); + onFavoriteVideoChange(favoriteVideos: any) { + this.favoriteVideos = favoriteVideos; + this.updateLikeVideos(); } changeResolution(resolution: string) { - if (this.videoPlayer && this.movieIsUploaded[resolution]) { + if (this.videoPlayer && this.videoIsUploaded[resolution]) { this.videoPlayer.switchResolution(resolution); this.currentResolution = resolution; } } - async loadAllMovies() { + async loadAllVideos() { this.isLoading = true; try { - this.movies = await this.videoService.getAllVideos(); + this.videos = await this.videoService.getAllVideos(); } finally { this.isLoading = false; } } closeVideo(): void { - this.playMovie = ''; + this.playVideo = ''; } - playVideo(videoPath: string) { + playVideoPath(videoPath: string) { this.currentResolution = '720p'; - this.playMovie = videoPath; + this.playVideo = videoPath; } - loadRandomMovie(): void { - const randomIndex = Math.floor(Math.random() * this.movies.length); - this.currentMovie = [this.movies[randomIndex]]; + loadRandomVideo(): void { + const randomIndex = Math.floor(Math.random() * this.videos.length); + this.currentVideo = [this.videos[randomIndex]]; } - currentMovieId(movieId: number) { - let index = this.movies.findIndex((movie) => movie.id === movieId); + currentVideoId(videoId: number) { + let index = this.videos.findIndex((video) => video.id === videoId); if (index !== -1) { - this.currentMovie = []; - this.currentMovie.push(this.movies[index]); + this.currentVideo = []; + this.currentVideo.push(this.videos[index]); } } isAnyResolutionUnavailable(): boolean { return this.availableResolutions.some( - (resolution) => !this.movieIsUploaded[resolution] + (resolution) => !this.videoIsUploaded[resolution] ); } - toggleUploadMovieOverview(value: any) { - this.uploadMovieOverview = value; + toggleUploadVideoOverview(value: any) { + this.uploadVideoOverview = value; } } diff --git a/frontend/src/app/components/home/upload-movie/upload-movie.component.html b/frontend/src/app/components/home/upload-video/upload-video.component.html similarity index 79% rename from frontend/src/app/components/home/upload-movie/upload-movie.component.html rename to frontend/src/app/components/home/upload-video/upload-video.component.html index a5f57e9..87d08a4 100644 --- a/frontend/src/app/components/home/upload-movie/upload-movie.component.html +++ b/frontend/src/app/components/home/upload-video/upload-video.component.html @@ -1,10 +1,10 @@ -
+
-
Upload Movie
+
Upload Video
@@ -14,13 +14,13 @@ name="title" #title="ngModel" placeholder="Title" - [(ngModel)]="movieData.title" + [(ngModel)]="videoData.title" [class.error-border]="!title.valid && title.touched" required />
@if (!title.valid && title.touched) { -

Please enter a movie title

+

Please enter a video title

}
@if (!description.valid && description.touched) { -

Please enter a movie description

+

Please enter a video description

}