refactor: optimize code structure and readability

frontend/src/app/components/home/browse/categories/categories.component.html

@@ -29,11 +29,11 @@
   <!-- Genre columns -->
   @for (filmGenre of filmGenres; track filmGenre) {
   <!-- Movies by genre -->
-  @if (allMovies(filmGenre.code).length > 0) {
+  @if (getAllMovies(filmGenre.code).length > 0) {
   <div class="category">
     <p>{{ filmGenre.name }}</p>
     <app-movie-list
-      [movies]="allMovies(filmGenre.code)"
+      [movies]="getAllMovies(filmGenre.code)"
       [currentMovie]="currentMovie"
       [watchedMovies]="watchedMovies"
       (currentMovieId)="openCurrentMovie($event)"

frontend/src/app/components/home/browse/categories/categories.component.ts

@@ -48,12 +48,6 @@ export class CategoriesComponent implements AfterViewInit {
     { code: 'western', name: 'Western' },
   ];
 
-  getFavoriteMovies() {
-    return this.movies.filter((movie) =>
-      this.favoriteMovies.includes(movie.id)
-    );
-  }
-
   ngAfterViewInit() {
     this.checkScroll();
   }
@@ -63,10 +57,16 @@ export class CategoriesComponent implements AfterViewInit {
     this.currentMovieId.emit(movieId);
   }
 
-  allMovies(filmGenre: string) {
+  getAllMovies(filmGenre: string) {
     return this.movies.filter((movie) => movie.film_genre === filmGenre);
   }
 
+  getFavoriteMovies() {
+    return this.movies.filter((movie) =>
+      this.favoriteMovies.includes(movie.id)
+    );
+  }
+
   recentMovies() {
     const today = new Date();
     const dayOfWeek = today.getDay();
@@ -80,12 +80,6 @@ export class CategoriesComponent implements AfterViewInit {
     });
   }
 
-  getThumbnailUrl(movieId: number, fileName: string): string {
-    return `${environment.baseUrl}/media/thumbnails/${movieId}/${fileName}_480p.jpg`;
-  }
-
-  // Category scroll
-
   @HostListener('window:resize')
   onResize() {
     this.checkScroll();
@@ -108,24 +102,4 @@ export class CategoriesComponent implements AfterViewInit {
       }
     });
   }
-
-  scrollLeft(event: MouseEvent) {
-    const button = event.target as HTMLElement;
-    const container = button
-      .closest('.category')
-      ?.querySelector('.movies') as HTMLElement;
-    if (container) {
-      container.scrollLeft -= 217;
-    }
-  }
-
-  scrollRight(event: MouseEvent) {
-    const button = event.target as HTMLElement;
-    const container = button
-      .closest('.category')
-      ?.querySelector('.movies') as HTMLElement;
-    if (container) {
-      container.scrollLeft += 217;
-    }
-  }
 }

frontend/src/app/components/home/browse/categories/movie-list/movie-list.component.html

@@ -10,7 +10,7 @@
       />
     </div>
     <div *ngIf="watchedMovies.includes(movie.id)" class="watched">
-      <img src="./../../../../../assets/img/open-eye.svg" alt="" />
+      <img src="./assets/img/open-eye.svg" alt="" />
     </div>
   </div>
   }
@@ -20,13 +20,13 @@
     <img
       class="scroll-left"
       (click)="scrollLeft($event)"
-      src="./../../../../../assets/img/arrow_back.svg"
+      src="./assets/img/arrow_back.svg"
       alt=""
     />
     <img
       class="scroll-right"
       (click)="scrollRight($event)"
-      src="./../../../../../assets/img/arrow_forward.svg"
+      src="./assets/img/arrow_forward.svg"
       alt=""
     />
   </div>

frontend/src/app/components/home/browse/hero-banner/hero-banner.component.ts

@@ -65,8 +65,8 @@ export class HeroBannerComponent implements OnChanges {
 
   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`;
+    this.videoUrl = `${this.environmentBaseUrl}/media/thumbnails/${this.currentMovie[0]?.id}/${this.currentMovie[0]?.file_name}_video-thumbnail.mp4`;
   }
 
   ngOnChanges(changes: SimpleChanges) {

frontend/src/app/components/home/browse/upload-movie/upload-movie.component.html

@@ -76,7 +76,7 @@
           name="videoFile"
           placeholder="Video file"
           (change)="onFileChange($event)"
-          accept="video/*"
+          accept="video/mp4"
           required
         />
         <div class="error-msg">

frontend/src/app/components/home/browse/upload-movie/upload-movie.component.ts

@@ -21,7 +21,7 @@ import { LoadingDialogComponent } from '../../../../shared/components/loading-di
 export class UploadMovieComponent {
   @Output() toggleUploadMovieOverview = new EventEmitter<boolean>();
   errorMsgFileSize: string | null = null;
-  maxFileSizeMB = 50;
+  maxFileSizeMB = 20;
 
   movieData = {
     title: '',

frontend/src/app/services/auth.service.ts

@@ -10,7 +10,7 @@ import { UserService } from './user.service';
 export class AuthService {
   errorMsg: string | null = null;
   passwordFieldType: string = 'password';
-  passwordIcon: string = './../../../assets/img/close-eye.svg';
+  passwordIcon: string = './assets/img/close-eye.svg';
 
   constructor(private http: HttpClient, private userService: UserService) {}
 
@@ -22,9 +22,9 @@ export class AuthService {
 
   toggleIcon() {
     this.passwordIcon =
-      this.passwordIcon === './../../../assets/img/close-eye.svg'
+      this.passwordIcon === './assets/img/close-eye.svg'
-        ? './../../../assets/img/open-eye.svg'
+        ? './assets/img/open-eye.svg'
-        : './../../../assets/img/close-eye.svg';
+        : './assets/img/close-eye.svg';
   }
 
   async register(body: any) {
@@ -89,7 +89,7 @@ export class AuthService {
       authToken = sessionStorage.getItem('authToken');
     }
     return new HttpHeaders({
-      Authorization: `Token ${authToken}`, // Ensure this matches your backend
+      Authorization: `Token ${authToken}`,
     });
   }
 }

frontend/src/app/shared/components/buttons/btn-large/btn-large.component.html

@@ -5,11 +5,7 @@
   [ngClass]="{ reverse: imgReverse }"
 >
   @if(imgPath) {
-  <img
+  <img src="./assets/img/{{ imgPath }}.svg" alt="{{ imgPath }}" class="icon" />
-    src="./../../../../assets/img/{{ imgPath }}.svg"
-    alt="{{ imgPath }}"
-    class="icon"
-  />
   }
   <p>{{ value }}</p>
 </button>

frontend/src/app/shared/components/buttons/btn-small/btn-small.component.html

@@ -7,7 +7,7 @@
   }"
 >
   <img
-    src="./../../../../assets/img/{{ imgPath }}.svg"
+    src="./assets/img/{{ imgPath }}.svg"
     alt="{{ imgPath }}"
     class="icon"
     [ngStyle]="{

frontend/src/app/shared/components/error-toast/error-toast.component.html

@@ -2,12 +2,12 @@
   <section class="slide-in" (click)="stopPropagation($event)">
     <div class="left"></div>
     <div class="content">
-      <img src="./../../../../assets/img/attention.svg" alt="Achtung" />
+      <img src="./assets/img/attention.svg" alt="Attention" />
       <p>{{ errorText }}</p>
     </div>
     <div class="line"></div>
     <div class="close-btn" (click)="closeError()">
-      <img src="./../../../../assets/img/close.svg" alt="Schließen" />
+      <img src="./assets/img/close.svg" alt="Close" />
     </div>
   </section>
 </div>

frontend/src/app/shared/components/header/header.component.html

@@ -1,17 +1,17 @@
 <header>
   @if (showFullLogo) {
   <div class="logo-full" routerLink="/">
-    <img src="./../../../../assets/img/logo_full.svg" alt="" />
+    <img src="./assets/img/logo_full.svg" alt="" />
   </div>
   <div class="logo-mobile" routerLink="/">
-    <img src="./../../../../assets/img/logo_ci.svg" alt="" />
+    <img src="./assets/img/logo_ci.svg" alt="" />
   </div>
   <div class="btn">
     <app-btn-large [value]="'Log in'" routerLink="/login"></app-btn-large>
   </div>
   } @else {
   <div class="logo" (click)="backToOverview([])">
-    <img src="./../../../../assets/img/logo_ci.svg" alt="" />
+    <img src="./assets/img/logo_ci.svg" alt="" />
   </div>
   <div class="btn">
     <app-btn-large

frontend/src/app/shared/components/legal-information/imprint/imprint.component.html

@@ -1,13 +1,13 @@
 <section>
   <header>
     <div class="logo-full" routerLink="/">
-      <img src="./../../../../assets/img/logo_full.svg" alt="" />
+      <img src="./assets/img/logo_full.svg" alt="" />
     </div>
     <div class="logo-mobile" routerLink="/">
-      <img src="./../../../../assets/img/logo_ci.svg" alt="" />
+      <img src="./assets/img/logo_ci.svg" alt="" />
     </div>
     <div class="back-button" (click)="backClicked()">
-      <img src="./../../../../assets/img/back.svg" alt="Back" />
+      <img src="./assets/img/back.svg" alt="Back" />
     </div>
   </header>
   <div class="content">

frontend/src/app/shared/components/legal-information/privacy-policy/privacy-policy.component.html

@@ -1,13 +1,13 @@
 <section>
   <header>
     <div class="logo-full" routerLink="/">
-      <img src="./../../../../assets/img/logo_full.svg" alt="" />
+      <img src="./assets/img/logo_full.svg" alt="" />
     </div>
     <div class="logo-mobile" routerLink="/">
-      <img src="./../../../../assets/img/logo_ci.svg" alt="" />
+      <img src="./assets/img/logo_ci.svg" alt="" />
     </div>
     <div class="back-button" (click)="backClicked()">
-      <img src="./../../../../assets/img/back.svg" alt="Back" />
+      <img src="./assets/img/back.svg" alt="Back" />
     </div>
   </header>
   <div class="content">