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

refactor: rename remaining movie variables to video

Browse source
This commit is contained in:
Chneemann 2025-04-30 04:22:24 +02:00
parent 3cd3f44dea
commit ffb6ba4a5b
13 changed files with 190 additions and 190 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -4,7 +4,7 @@
}" }"
> >
<div <div
class="movie-banner" class="video-banner"
[ngClass]="{ [ngClass]="{
fullVhBanner: !isWideScreen fullVhBanner: !isWideScreen
}" }"
@ -13,7 +13,7 @@
<img *ngIf="!isVideoLoaded" [src]="thumbnailUrl" class="fallback-image" /> <img *ngIf="!isVideoLoaded" [src]="thumbnailUrl" class="fallback-image" />
<video <video
#videoElement #videoElement
*ngIf="currentMovie[0].id" *ngIf="currentVideo[0].id"
[src]="videoUrl" [src]="videoUrl"
poster="{{ thumbnailUrl }}" poster="{{ thumbnailUrl }}"
autoplay autoplay
@ -26,21 +26,21 @@
></video> ></video>
</div> </div>
@if (currentMovie.length > 0) { @if (currentVideo.length > 0) {
<div <div
class="content" class="content"
[ngClass]="{ [ngClass]="{
fullVhContent: !isWideScreen fullVhContent: !isWideScreen
}" }"
> >
<div class="title">{{ currentMovie[0].title }}</div> <div class="title">{{ currentVideo[0].title }}</div>
<div <div
class="description hide-scrollbar" class="description hide-scrollbar"
[ngClass]="{ [ngClass]="{
fullVhDescription: !isWideScreen fullVhDescription: !isWideScreen
}" }"
> >
{{ currentMovie[0].description }} {{ currentVideo[0].description }}
</div> </div>
<div class="buttons"> <div class="buttons">
<app-btn-small <app-btn-small
@ -54,10 +54,10 @@
[imgPath]="'play'" [imgPath]="'play'"
[imgReverse]="true" [imgReverse]="true"
[disabled]="!isAnyResolutionAvailable()" [disabled]="!isAnyResolutionAvailable()"
(click)="playMovieId(playUrl, currentMovie[0].id)" (click)="playVideoId(playUrl, currentVideo[0].id)"
></app-btn-large> ></app-btn-large>
<div class="favorite-img" (click)="toggleLikeMovie(currentMovie[0].id)"> <div class="favorite-img" (click)="toggleLikeVideo(currentVideo[0].id)">
@if(checkLikeMovies(currentMovie[0].id)) { @if(checkLikeVideos(currentVideo[0].id)) {
<img <img
class="filled" class="filled"
src="./../../../../assets/img/favorite-filled.svg" src="./../../../../assets/img/favorite-filled.svg"
@ -74,7 +74,7 @@
@if (!isAnyResolutionAvailable()) { @if (!isAnyResolutionAvailable()) {
<p> <p>
(The video is being converted) (The video is being converted)
<a (click)="refreshPage(currentMovie)">Refresh</a> <a (click)="refreshPage(currentVideo)">Refresh</a>
</p> </p>
} }
</div> </div>

4
frontend/src/app/components/home/hero-banner/hero-banner.component.scss
View file

@ -4,7 +4,7 @@ section {
height: 400px; height: 400px;
} }
.movie-banner { .video-banner {
height: 400px; height: 400px;
position: relative; position: relative;
overflow: hidden; overflow: hidden;
@ -134,7 +134,7 @@ section {
hue-rotate(342deg) brightness(94%) contrast(119%); hue-rotate(342deg) brightness(94%) contrast(119%);
} }
.movie-banner { .video-banner {
background-size: cover; background-size: cover;
background-position: center; background-position: center;
background-repeat: no-repeat; background-repeat: no-repeat;

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

@ -25,17 +25,17 @@ import { ResolutionService } from '../../../services/resolution.service';
}) })
export class HeroBannerComponent implements OnChanges { export class HeroBannerComponent implements OnChanges {
@ViewChild('videoElement') videoElementRef!: ElementRef<HTMLVideoElement>; @ViewChild('videoElement') videoElementRef!: ElementRef<HTMLVideoElement>;
@Input() currentMovie: any[] = []; @Input() currentVideo: any[] = [];
@Input() isWideScreen: boolean = false; @Input() isWideScreen: boolean = false;
@Input() favoriteMovies: any[] = []; @Input() favoriteVideos: any[] = [];
@Input() watchedMovies: any[] = []; @Input() watchedVideos: any[] = [];
@Output() playMovie = new EventEmitter<string>(); @Output() playVideo = new EventEmitter<string>();
@Output() movieIsUploadedChange = new EventEmitter<{ @Output() videoIsUploadedChange = new EventEmitter<{
[resolution: string]: boolean; [resolution: string]: boolean;
}>(); }>();
@Output() refreshChange = new EventEmitter<any[]>(); @Output() refreshChange = new EventEmitter<any[]>();
@Output() moviesChange = new EventEmitter<any[]>(); @Output() videosChange = new EventEmitter<any[]>();
@Output() favoriteMovieChange = new EventEmitter<any[]>(); @Output() favoriteVideoChange = new EventEmitter<any[]>();
isVideoLoaded: boolean = false; isVideoLoaded: boolean = false;
videoUrl: string = ''; videoUrl: string = '';
@ -44,7 +44,7 @@ export class HeroBannerComponent implements OnChanges {
environmentBaseUrl: string = environment.baseUrl; environmentBaseUrl: string = environment.baseUrl;
availableResolutions: string[]; availableResolutions: string[];
movieIsUploaded: { [resolution: string]: boolean }; videoIsUploaded: { [resolution: string]: boolean };
constructor( constructor(
private videoService: VideoService, private videoService: VideoService,
@ -53,7 +53,7 @@ export class HeroBannerComponent implements OnChanges {
) { ) {
this.availableResolutions = this.availableResolutions =
this.resolutionService.getAvailableResolutions(); this.resolutionService.getAvailableResolutions();
this.movieIsUploaded = this.resolutionService.initMovieIsUploaded(); this.videoIsUploaded = this.resolutionService.initVideoIsUploaded();
} }
ngAfterViewInit() { ngAfterViewInit() {
@ -69,20 +69,20 @@ export class HeroBannerComponent implements OnChanges {
} }
getVideoUrls() { getVideoUrls() {
this.playUrl = `${this.environmentBaseUrl}/media/videos/${this.currentMovie[0]?.id}/${this.currentMovie[0]?.file_name}`; this.playUrl = `${this.environmentBaseUrl}/media/videos/${this.currentVideo[0]?.id}/${this.currentVideo[0]?.file_name}`;
this.thumbnailUrl = `${this.environmentBaseUrl}/media/thumbnails/${this.currentMovie[0]?.id}/${this.currentMovie[0]?.file_name}_1080p.jpg`; this.thumbnailUrl = `${this.environmentBaseUrl}/media/thumbnails/${this.currentVideo[0]?.id}/${this.currentVideo[0]?.file_name}_1080p.jpg`;
this.videoUrl = `${this.environmentBaseUrl}/media/thumbnails/${this.currentMovie[0]?.id}/${this.currentMovie[0]?.file_name}_video-thumbnail.mp4`; this.videoUrl = `${this.environmentBaseUrl}/media/thumbnails/${this.currentVideo[0]?.id}/${this.currentVideo[0]?.file_name}_video-thumbnail.mp4`;
} }
ngOnChanges(changes: SimpleChanges) { ngOnChanges(changes: SimpleChanges) {
if (changes['currentMovie'] && this.currentMovie.length > 0) { if (changes['currentVideo'] && this.currentVideo.length > 0) {
const movieId = this.currentMovie[0]?.id; const videoId = this.currentVideo[0]?.id;
if (movieId) { if (videoId) {
this.videoService this.videoService
.isVideoResolutionUploaded(movieId) .isVideoResolutionUploaded(videoId)
.subscribe((resolutions) => { .subscribe((resolutions) => {
this.movieIsUploaded = resolutions; this.videoIsUploaded = resolutions;
this.movieIsUploadedChange.emit(this.movieIsUploaded); this.videoIsUploadedChange.emit(this.videoIsUploaded);
}); });
setTimeout(() => this.videoSpeed(), 0); setTimeout(() => this.videoSpeed(), 0);
this.getVideoUrls(); this.getVideoUrls();
@ -97,49 +97,49 @@ export class HeroBannerComponent implements OnChanges {
} }
} }
toggleLikeMovie(movieId: number): void { toggleLikeVideo(videoId: number): void {
if (this.favoriteMovies.includes(movieId)) { if (this.favoriteVideos.includes(videoId)) {
this.favoriteMovies = this.favoriteMovies.filter((id) => id !== movieId); this.favoriteVideos = this.favoriteVideos.filter((id) => id !== videoId);
} else { } else {
this.favoriteMovies.push(movieId); this.favoriteVideos.push(videoId);
} }
this.favoriteMovieChange.emit(this.favoriteMovies); this.favoriteVideoChange.emit(this.favoriteVideos);
} }
toggleWatchedMovie(movieId: number): void { toggleWatchedVideo(videoId: number): void {
if (this.watchedMovies.includes(movieId)) { if (this.watchedVideos.includes(videoId)) {
this.watchedMovies = this.watchedMovies.filter((id) => id !== movieId); this.watchedVideos = this.watchedVideos.filter((id) => id !== videoId);
} else { } else {
this.watchedMovies.push(movieId); this.watchedVideos.push(videoId);
} }
this.updateWatchedMovies(); this.updateWatchedVideos();
} }
updateWatchedMovies() { updateWatchedVideos() {
const body = { const body = {
watched_videos: this.watchedMovies, watched_videos: this.watchedVideos,
}; };
this.userService.updateWatchedMovies(body); this.userService.updateWatchedVideos(body);
} }
checkLikeMovies(videoId: number) { checkLikeVideos(videoId: number) {
return this.favoriteMovies.includes(videoId); return this.favoriteVideos.includes(videoId);
} }
isAnyResolutionAvailable(): boolean { isAnyResolutionAvailable(): boolean {
return Object.values(this.movieIsUploaded).some((available) => available); return Object.values(this.videoIsUploaded).some((available) => available);
} }
refreshPage(newMovies: any[]) { refreshPage(newVideos: any[]) {
this.refreshChange.emit(newMovies); this.refreshChange.emit(newVideos);
} }
backToCategory(newMovies: any[]) { backToCategory(newVideos: any[]) {
this.moviesChange.emit(newMovies); this.videosChange.emit(newVideos);
} }
playMovieId(videoPath: string, videoId: number) { playVideoId(videoPath: string, videoId: number) {
this.playMovie.emit(videoPath); this.playVideo.emit(videoPath);
this.toggleWatchedMovie(videoId); this.toggleWatchedVideo(videoId);
} }
} }

56
frontend/src/app/components/home/home.component.html
View file

@ -1,40 +1,40 @@
<section> <section>
<div *ngIf="isLoading"></div> <div *ngIf="isLoading"></div>
@if (!isLoading && movies.length > 0) { @if (!isLoading && videos.length > 0) {
<!-- If at least one film has been uploaded --> <!-- If at least one film has been uploaded -->
@if (playMovie === "") { @if (playVideo === "") {
<app-header <app-header
(moviesChange)="onMoviesChange($event)" (videosChange)="onVideosChange($event)"
[showFullLogo]="false" [showFullLogo]="false"
></app-header> ></app-header>
<!-- Hero Banner --> <!-- Hero Banner -->
<app-hero-banner <app-hero-banner
*ngIf=" *ngIf="
currentMovie.length === 1 || currentVideo.length === 1 ||
(this.isWideScreen() && currentMovie.length > 1) (this.isWideScreen() && currentVideo.length > 1)
" "
[isWideScreen]="isWideScreen()" [isWideScreen]="isWideScreen()"
[currentMovie]="currentMovie" [currentVideo]="currentVideo"
[favoriteMovies]="favoriteMovies" [favoriteVideos]="favoriteVideos"
[watchedMovies]="watchedMovies" [watchedVideos]="watchedVideos"
(playMovie)="playVideo($event)" (playVideo)="playVideoPath($event)"
(movieIsUploadedChange)="onMovieIsUploadedChange($event)" (videoIsUploadedChange)="onVideoIsUploadedChange($event)"
(moviesChange)="onMoviesChange($event)" (videosChange)="onVideosChange($event)"
(refreshChange)="onRefreshPage($event)" (refreshChange)="onRefreshPage($event)"
(favoriteMovieChange)="onFavoriteMovieChange($event)" (favoriteVideoChange)="onFavoriteVideoChange($event)"
></app-hero-banner> ></app-hero-banner>
<!-- Spacer --> <!-- Spacer -->
<div *ngIf="!this.isWideScreen()" class="spacer"></div> <div *ngIf="!this.isWideScreen()" class="spacer"></div>
<!-- Movie Categories --> <!-- Video Categories -->
<app-categories <app-categories
*ngIf=" *ngIf="
this.isWideScreen() || (!this.isWideScreen() && currentMovie.length === 0) this.isWideScreen() || (!this.isWideScreen() && currentVideo.length === 0)
" "
[videos]="movies" [videos]="videos"
[currentVideo]="currentMovie[0]?.id" [currentVideo]="currentVideo[0]?.id"
[favoriteVideos]="favoriteMovies" [favoriteVideos]="favoriteVideos"
[watchedVideos]="watchedMovies" [watchedVideos]="watchedVideos"
(currentVideoId)="currentMovieId($event)" (currentVideoId)="currentVideoId($event)"
></app-categories> ></app-categories>
} @else { } @else {
<div class="video-overlay"> <div class="video-overlay">
@ -50,10 +50,10 @@
[ngClass]="{ [ngClass]="{
'resolution-btn': true, 'resolution-btn': true,
active: currentResolution === resolution, active: currentResolution === resolution,
'not-available': !movieIsUploaded[resolution] 'not-available': !videoIsUploaded[resolution]
}" }"
[disabled]=" [disabled]="
!movieIsUploaded[resolution] || currentResolution === resolution !videoIsUploaded[resolution] || currentResolution === resolution
" "
(click)="changeResolution(resolution)" (click)="changeResolution(resolution)"
> >
@ -73,9 +73,9 @@
<img src="./../../../../assets/img/logo_ci.svg" alt="Logo" /> <img src="./../../../../assets/img/logo_ci.svg" alt="Logo" />
</div> </div>
</div> </div>
<app-video-player [playMovie]="playMovie"></app-video-player> <app-video-player [playVideo]="playVideo"></app-video-player>
</div> </div>
} } @if (!isLoading && movies.length === 0) { } } @if (!isLoading && videos.length === 0) {
<!-- If the database is empty --> <!-- If the database is empty -->
<app-header [showFullLogo]="false"></app-header> <app-header [showFullLogo]="false"></app-header>
<div class="error"> <div class="error">
@ -85,12 +85,12 @@
<div class="add-button"> <div class="add-button">
<app-btn-small <app-btn-small
[imgPath]="'add'" [imgPath]="'add'"
(click)="toggleUploadMovieOverview(true)" (click)="toggleUploadVideoOverview(true)"
></app-btn-small> ></app-btn-small>
</div> </div>
</section> </section>
@if (uploadMovieOverview) { @if (uploadVideoOverview) {
<app-upload-movie <app-upload-video
(toggleUploadMovieOverview)="toggleUploadMovieOverview($event)" (toggleUploadVideoOverview)="toggleUploadVideoOverview($event)"
></app-upload-movie> ></app-upload-video>
} }

94
frontend/src/app/components/home/home.component.ts
View file

@ -6,7 +6,7 @@ import { VideoService } from '../../services/video.service';
import { CommonModule } from '@angular/common'; import { CommonModule } from '@angular/common';
import { VideoPlayerComponent } from './video-player/video-player.component'; import { VideoPlayerComponent } from './video-player/video-player.component';
import { BtnSmallComponent } from '../../shared/components/buttons/btn-small/btn-small.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 { UserService } from '../../services/user.service';
import { ResolutionService } from '../../services/resolution.service'; import { ResolutionService } from '../../services/resolution.service';
@ -20,24 +20,24 @@ import { ResolutionService } from '../../services/resolution.service';
CategoriesComponent, CategoriesComponent,
VideoPlayerComponent, VideoPlayerComponent,
BtnSmallComponent, BtnSmallComponent,
UploadMovieComponent, UploadVideoComponent,
], ],
templateUrl: './home.component.html', templateUrl: './home.component.html',
styleUrl: './home.component.scss', styleUrl: './home.component.scss',
}) })
export class HomeComponent implements OnInit { export class HomeComponent implements OnInit {
@ViewChild(VideoPlayerComponent) videoPlayer!: VideoPlayerComponent; @ViewChild(VideoPlayerComponent) videoPlayer!: VideoPlayerComponent;
movies: any[] = []; videos: any[] = [];
favoriteMovies: number[] = []; favoriteVideos: number[] = [];
watchedMovies: number[] = []; watchedVideos: number[] = [];
currentMovie: any[] = []; currentVideo: any[] = [];
playMovie: string = ''; playVideo: string = '';
isLoading: boolean = true; isLoading: boolean = true;
uploadMovieOverview: boolean = false; uploadVideoOverview: boolean = false;
availableResolutions: string[]; availableResolutions: string[];
currentResolution: string; currentResolution: string;
movieIsUploaded: { [resolution: string]: boolean }; videoIsUploaded: { [resolution: string]: boolean };
constructor( constructor(
private videoService: VideoService, private videoService: VideoService,
@ -47,46 +47,46 @@ export class HomeComponent implements OnInit {
this.availableResolutions = this.availableResolutions =
this.resolutionService.getAvailableResolutions(); this.resolutionService.getAvailableResolutions();
this.currentResolution = this.resolutionService.getDefaultResolution(); this.currentResolution = this.resolutionService.getDefaultResolution();
this.movieIsUploaded = this.resolutionService.initMovieIsUploaded(); this.videoIsUploaded = this.resolutionService.initVideoIsUploaded();
} }
async ngOnInit() { async ngOnInit() {
this.loadLikedAndWatchedMovies(); this.loadLikedAndWatchedVideos();
await this.loadAllMovies(); await this.loadAllVideos();
if (this.isWideScreen()) { if (this.isWideScreen()) {
this.currentMovie.length === 0 ? this.loadRandomMovie() : null; this.currentVideo.length === 0 ? this.loadRandomVideo() : null;
} }
} }
async loadLikedAndWatchedMovies() { async loadLikedAndWatchedVideos() {
try { try {
const userData = await this.userService.getLikedAndWatchedMovies(); const userData = await this.userService.getLikedAndWatchedVideos();
this.favoriteMovies = userData.liked_videos; this.favoriteVideos = userData.liked_videos;
this.watchedMovies = userData.watched_videos; this.watchedVideos = userData.watched_videos;
} catch (error) { } catch (error) {
console.error(error); console.error(error);
} }
} }
updateLikeMovies() { updateLikeVideos() {
const body = { const body = {
liked_videos: this.favoriteMovies, liked_videos: this.favoriteVideos,
}; };
this.userService.updateLikedMovies(body); this.userService.updateLikedVideos(body);
} }
onRefreshPage(updatedMovies: any[]) { onRefreshPage(updatedVideos: any[]) {
this.currentMovie = []; this.currentVideo = [];
setTimeout(() => { setTimeout(() => {
this.currentMovie = updatedMovies; this.currentVideo = updatedVideos;
}, 1); }, 1);
} }
onMoviesChange(updatedMovies: any[]) { onVideosChange(updatedVideos: any[]) {
if (this.isWideScreen()) { if (this.isWideScreen()) {
this.loadRandomMovie(); this.loadRandomVideo();
} else { } else {
this.currentMovie = updatedMovies; this.currentVideo = updatedVideos;
} }
} }
@ -94,60 +94,60 @@ export class HomeComponent implements OnInit {
return window.innerWidth > 600; return window.innerWidth > 600;
} }
onMovieIsUploadedChange(newStatus: { [resolution: string]: boolean }) { onVideoIsUploadedChange(newStatus: { [resolution: string]: boolean }) {
this.movieIsUploaded = newStatus; this.videoIsUploaded = newStatus;
} }
onFavoriteMovieChange(favoriteMovies: any) { onFavoriteVideoChange(favoriteVideos: any) {
this.favoriteMovies = favoriteMovies; this.favoriteVideos = favoriteVideos;
this.updateLikeMovies(); this.updateLikeVideos();
} }
changeResolution(resolution: string) { changeResolution(resolution: string) {
if (this.videoPlayer && this.movieIsUploaded[resolution]) { if (this.videoPlayer && this.videoIsUploaded[resolution]) {
this.videoPlayer.switchResolution(resolution); this.videoPlayer.switchResolution(resolution);
this.currentResolution = resolution; this.currentResolution = resolution;
} }
} }
async loadAllMovies() { async loadAllVideos() {
this.isLoading = true; this.isLoading = true;
try { try {
this.movies = await this.videoService.getAllVideos(); this.videos = await this.videoService.getAllVideos();
} finally { } finally {
this.isLoading = false; this.isLoading = false;
} }
} }
closeVideo(): void { closeVideo(): void {
this.playMovie = ''; this.playVideo = '';
} }
playVideo(videoPath: string) { playVideoPath(videoPath: string) {
this.currentResolution = '720p'; this.currentResolution = '720p';
this.playMovie = videoPath; this.playVideo = videoPath;
} }
loadRandomMovie(): void { loadRandomVideo(): void {
const randomIndex = Math.floor(Math.random() * this.movies.length); const randomIndex = Math.floor(Math.random() * this.videos.length);
this.currentMovie = [this.movies[randomIndex]]; this.currentVideo = [this.videos[randomIndex]];
} }
currentMovieId(movieId: number) { currentVideoId(videoId: number) {
let index = this.movies.findIndex((movie) => movie.id === movieId); let index = this.videos.findIndex((video) => video.id === videoId);
if (index !== -1) { if (index !== -1) {
this.currentMovie = []; this.currentVideo = [];
this.currentMovie.push(this.movies[index]); this.currentVideo.push(this.videos[index]);
} }
} }
isAnyResolutionUnavailable(): boolean { isAnyResolutionUnavailable(): boolean {
return this.availableResolutions.some( return this.availableResolutions.some(
(resolution) => !this.movieIsUploaded[resolution] (resolution) => !this.videoIsUploaded[resolution]
); );
} }
toggleUploadMovieOverview(value: any) { toggleUploadVideoOverview(value: any) {
this.uploadMovieOverview = value; this.uploadVideoOverview = value;
} }
} }

36
frontend/src/app/components/home/upload-movie/upload-movie.component.html → frontend/src/app/components/home/upload-video/upload-video.component.html
View file

@ -1,10 +1,10 @@
<div class="overlay" (click)="closeMovieUploadOverview()"> <div class="overlay" (click)="closeVideoUploadOverview()">
<div class="center" (click)="stopPropagation($event)"> <div class="center" (click)="stopPropagation($event)">
<div class="content"> <div class="content">
<div class="headline">Upload Movie</div> <div class="headline">Upload Video</div>
<form <form
#movieForm="ngForm" #videoForm="ngForm"
(ngSubmit)="onSubmit(movieForm)" (ngSubmit)="onSubmit(videoForm)"
onsubmit="return false" onsubmit="return false"
(input)="this.errorService.clearError()" (input)="this.errorService.clearError()"
> >
@ -14,13 +14,13 @@
name="title" name="title"
#title="ngModel" #title="ngModel"
placeholder="Title" placeholder="Title"
[(ngModel)]="movieData.title" [(ngModel)]="videoData.title"
[class.error-border]="!title.valid && title.touched" [class.error-border]="!title.valid && title.touched"
required required
/> />
<div class="error-msg"> <div class="error-msg">
@if (!title.valid && title.touched) { @if (!title.valid && title.touched) {
<p>Please enter a movie title</p> <p>Please enter a video title</p>
} }
</div> </div>
<textarea <textarea
@ -28,21 +28,21 @@
name="description" name="description"
#description="ngModel" #description="ngModel"
placeholder="Description" placeholder="Description"
[(ngModel)]="movieData.description" [(ngModel)]="videoData.description"
[class.error-border]="!description.valid && description.touched" [class.error-border]="!description.valid && description.touched"
rows="4" rows="4"
required required
></textarea> ></textarea>
<div class="error-msg"> <div class="error-msg">
@if (!description.valid && description.touched) { @if (!description.valid && description.touched) {
<p>Please enter a movie description</p> <p>Please enter a video description</p>
} }
</div> </div>
<select <select
id="filmGenre" id="filmGenre"
name="filmGenre" name="filmGenre"
#filmGenre="ngModel" #filmGenre="ngModel"
[(ngModel)]="movieData.filmGenre" [(ngModel)]="videoData.filmGenre"
[class.error-border]="!filmGenre.valid && filmGenre.touched" [class.error-border]="!filmGenre.valid && filmGenre.touched"
required required
> >
@ -86,17 +86,17 @@
<app-btn-large <app-btn-large
[type]="'button'" [type]="'button'"
[value]="'Close'" [value]="'Close'"
(click)="closeMovieUploadOverview()" (click)="closeVideoUploadOverview()"
></app-btn-large> ></app-btn-large>
<app-btn-large <app-btn-large
[type]="'submit'" [type]="'submit'"
[value]="'Upload Movie'" [value]="'Upload Video'"
[disabled]=" [disabled]="
!movieData.title || !videoData.title ||
!movieData.description || !videoData.description ||
!movieData.filmGenre || !videoData.filmGenre ||
!movieData.videoFile || !videoData.videoFile ||
movieData.send videoData.send
" "
></app-btn-large> ></app-btn-large>
</div> </div>
@ -104,8 +104,8 @@
</div> </div>
</div> </div>
</div> </div>
@if(movieData.send){ @if(videoData.send){
<app-loading-dialog <app-loading-dialog
loadingMsg="Movie is uploading, please be patient a moment." loadingMsg="Video is uploading, please be patient a moment."
></app-loading-dialog> ></app-loading-dialog>
} }

0
frontend/src/app/components/home/upload-movie/upload-movie.component.scss → frontend/src/app/components/home/upload-video/upload-video.component.scss
View file

12
frontend/src/app/components/home/upload-movie/upload-movie.component.spec.ts → frontend/src/app/components/home/upload-video/upload-video.component.spec.ts
View file

@ -1,16 +1,16 @@
import { ComponentFixture, TestBed } from '@angular/core/testing'; import { ComponentFixture, TestBed } from '@angular/core/testing';
import { UploadMovieComponent } from './upload-movie.component'; import { UploadVideoComponent } from './upload-video.component';
describe('UploadMovieComponent', () => { describe('UploadVideoComponent', () => {
let component: UploadMovieComponent; let component: UploadVideoComponent;
let fixture: ComponentFixture<UploadMovieComponent>; let fixture: ComponentFixture<UploadVideoComponent>;
beforeEach(async () => { beforeEach(async () => {
await TestBed.configureTestingModule({ await TestBed.configureTestingModule({
imports: [UploadMovieComponent], imports: [UploadVideoComponent],
}).compileComponents(); }).compileComponents();
fixture = TestBed.createComponent(UploadMovieComponent); fixture = TestBed.createComponent(UploadVideoComponent);
component = fixture.componentInstance; component = fixture.componentInstance;
fixture.detectChanges(); fixture.detectChanges();
}); });

34
frontend/src/app/components/home/upload-movie/upload-movie.component.ts → frontend/src/app/components/home/upload-video/upload-video.component.ts
View file

@ -7,7 +7,7 @@ import { VideoService } from '../../../services/video.service';
import { LoadingDialogComponent } from '../../../shared/components/loading-dialog/loading-dialog.component'; import { LoadingDialogComponent } from '../../../shared/components/loading-dialog/loading-dialog.component';
@Component({ @Component({
selector: 'app-upload-movie', selector: 'app-upload-video',
standalone: true, standalone: true,
imports: [ imports: [
CommonModule, CommonModule,
@ -15,15 +15,15 @@ import { LoadingDialogComponent } from '../../../shared/components/loading-dialo
BtnLargeComponent, BtnLargeComponent,
LoadingDialogComponent, LoadingDialogComponent,
], ],
templateUrl: './upload-movie.component.html', templateUrl: './upload-video.component.html',
styleUrl: './upload-movie.component.scss', styleUrl: './upload-video.component.scss',
}) })
export class UploadMovieComponent { export class UploadVideoComponent {
@Output() toggleUploadMovieOverview = new EventEmitter<boolean>(); @Output() toggleUploadVideoOverview = new EventEmitter<boolean>();
errorMsgFileSize: string | null = null; errorMsgFileSize: string | null = null;
maxFileSizeMB = 20; maxFileSizeMB = 20;
movieData = { videoData = {
title: '', title: '',
description: '', description: '',
filmGenre: '', filmGenre: '',
@ -40,8 +40,8 @@ export class UploadMovieComponent {
event.stopPropagation(); event.stopPropagation();
} }
closeMovieUploadOverview() { closeVideoUploadOverview() {
this.toggleUploadMovieOverview.emit(false); this.toggleUploadVideoOverview.emit(false);
} }
onFileChange(event: any) { onFileChange(event: any) {
@ -52,7 +52,7 @@ export class UploadMovieComponent {
isOneFile(event: any) { isOneFile(event: any) {
const file = event.target.files[0]; const file = event.target.files[0];
if (file) { if (file) {
this.movieData.videoFile = file; this.videoData.videoFile = file;
} }
} }
isFileSize(event: any) { isFileSize(event: any) {
@ -72,12 +72,12 @@ export class UploadMovieComponent {
if (!ngForm.submitted || !ngForm.form.valid) return; if (!ngForm.submitted || !ngForm.form.valid) return;
try { try {
this.movieData.send = true; this.videoData.send = true;
let formData = this.createFormData(); let formData = this.createFormData();
await this.videoService.uploadVideo(formData); await this.videoService.uploadVideo(formData);
ngForm.resetForm(); ngForm.resetForm();
this.closeMovieUploadOverview(); this.closeVideoUploadOverview();
this.movieData.send = false; this.videoData.send = false;
window.location.reload(); window.location.reload();
this.errorService.clearError(); this.errorService.clearError();
} catch (error) { } catch (error) {
@ -87,11 +87,11 @@ export class UploadMovieComponent {
private createFormData(): FormData { private createFormData(): FormData {
const formData = new FormData(); const formData = new FormData();
formData.append('title', this.movieData.title); formData.append('title', this.videoData.title);
formData.append('description', this.movieData.description); formData.append('description', this.videoData.description);
formData.append('film_genre', this.movieData.filmGenre); formData.append('film_genre', this.videoData.filmGenre);
if (this.movieData.videoFile) { if (this.videoData.videoFile) {
formData.append('video_file', this.movieData.videoFile); formData.append('video_file', this.videoData.videoFile);
} }
return formData; return formData;
} }

6
frontend/src/app/components/home/video-player/video-player.component.ts
View file

@ -10,7 +10,7 @@ import Hls from 'hls.js';
styleUrls: ['./video-player.component.scss'], styleUrls: ['./video-player.component.scss'],
}) })
export class VideoPlayerComponent implements OnInit, OnDestroy { export class VideoPlayerComponent implements OnInit, OnDestroy {
@Input() playMovie: string = ''; @Input() playVideo: string = '';
private hls: Hls | null = null; private hls: Hls | null = null;
private videoElement: HTMLVideoElement | null = null; private videoElement: HTMLVideoElement | null = null;
@ -52,7 +52,7 @@ export class VideoPlayerComponent implements OnInit, OnDestroy {
*/ */
private initializePlayer(): void { private initializePlayer(): void {
this.videoElement = this.elementRef.nativeElement.querySelector('video'); this.videoElement = this.elementRef.nativeElement.querySelector('video');
if (!this.playMovie || !this.videoElement) return; if (!this.playVideo || !this.videoElement) return;
this.resolutionUrls = this.getResolutionUrls(); this.resolutionUrls = this.getResolutionUrls();
const defaultUrl = this.resolutionUrls[this.defaultResolution]; const defaultUrl = this.resolutionUrls[this.defaultResolution];
@ -74,7 +74,7 @@ export class VideoPlayerComponent implements OnInit, OnDestroy {
return Object.fromEntries( return Object.fromEntries(
this.resolutionService this.resolutionService
.getAvailableResolutions() .getAvailableResolutions()
.map((res) => [res, `${this.playMovie}_${res}.m3u8`]) .map((res) => [res, `${this.playVideo}_${res}.m3u8`])
); );
} }

2
frontend/src/app/services/resolution.service.ts
View file

@ -16,7 +16,7 @@ export class ResolutionService {
/** /**
* Initializes an object that sets all resolutions to `false` * Initializes an object that sets all resolutions to `false`
*/ */
initMovieIsUploaded(): { [resolution: string]: boolean } { initVideoIsUploaded(): { [resolution: string]: boolean } {
return Object.fromEntries( return Object.fromEntries(
this.AVAILABLE_RESOLUTIONS.map((resolution) => [resolution, false]) this.AVAILABLE_RESOLUTIONS.map((resolution) => [resolution, false])
); );

24
frontend/src/app/services/user.service.ts
View file

@ -14,45 +14,45 @@ export class UserService {
constructor(private apiService: ApiService) {} constructor(private apiService: ApiService) {}
/** /**
* Fetch the list of movies liked and watched by the current user * Fetch the list of videos liked and watched by the current user
* *
* @returns a promise resolving to an object with two properties: * @returns a promise resolving to an object with two properties:
* - `liked_movies`: a list of movie IDs liked by the current user * - `liked_videos`: a list of video IDs liked by the current user
* - `watched_movies`: a list of movie IDs watched by the current user * - `watched_videos`: a list of video IDs watched by the current user
*/ */
getLikedAndWatchedMovies(): Promise<any> { getLikedAndWatchedVideos(): Promise<any> {
return firstValueFrom( return firstValueFrom(
this.apiService.get(`/users/${this.currentUserId}/`, true) this.apiService.get(`/users/${this.currentUserId}/`, true)
); );
} }
/** /**
* Update the list of liked movies for the current user * Update the list of liked videos for the current user
* *
* @param likedMovies a list of movie IDs liked by the current user * @param likedVideos a list of video IDs liked by the current user
* @returns a promise resolved when the update is successful * @returns a promise resolved when the update is successful
*/ */
updateLikedMovies(likedMovies: any): Promise<any> { updateLikedVideos(likedVideos: any): Promise<any> {
return firstValueFrom( return firstValueFrom(
this.apiService.put( this.apiService.put(
`/users/liked/${this.currentUserId}/`, `/users/liked/${this.currentUserId}/`,
likedMovies, likedVideos,
true true
) )
); );
} }
/** /**
* Update the list of watched movies for the current user * Update the list of watched videos for the current user
* *
* @param watchedMovies a list of movie IDs watched by the current user * @param watchedVideos a list of video IDs watched by the current user
* @returns a promise resolved when the update is successful * @returns a promise resolved when the update is successful
*/ */
updateWatchedMovies(watchedMovies: any): Promise<any> { updateWatchedVideos(watchedVideos: any): Promise<any> {
return firstValueFrom( return firstValueFrom(
this.apiService.put( this.apiService.put(
`/users/watched/${this.currentUserId}/`, `/users/watched/${this.currentUserId}/`,
watchedMovies, watchedVideos,
true true
) )
); );

12
frontend/src/app/shared/components/header/header.component.ts
View file

@ -13,7 +13,7 @@ import { TokenService } from '../../../services/token.service';
}) })
export class HeaderComponent { export class HeaderComponent {
@Input() showFullLogo: boolean = true; @Input() showFullLogo: boolean = true;
@Output() moviesChange = new EventEmitter<any[]>(); @Output() videosChange = new EventEmitter<any[]>();
constructor( constructor(
private authService: AuthService, private authService: AuthService,
@ -21,12 +21,12 @@ export class HeaderComponent {
) {} ) {}
/** /**
* Emits the moviesChange event with the newMovies array as the payload. * Emits the videosChange event with the newVideos array as the payload.
* This is used to reset the movies displayed in the movie-list component. * This is used to reset the videos displayed in the video-list component.
* @param newMovies The new array of movies to be displayed. * @param newVideos The new array of videos to be displayed.
*/ */
backToOverview(newMovies: any[]) { backToOverview(newVideos: any[]) {
this.moviesChange.emit(newMovies); this.videosChange.emit(newVideos);
} }
/** /**