refactor: rename MoviesListComponent to VideoListComponent and update variables accordingly

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

@@ -1,43 +1,42 @@
-@if (movies.length > 0) {
+@if (videos.length > 0) {
 <section class="hide-scrollbar">
-  <!--  New movies this week -->
-  @if (recentMovies().length > 0) {
+  <!--  New videos this week -->
+  @if (recentVideos().length > 0) {
   <div class="category">
-    <p>New movies added this week</p>
-    <app-movie-list
-      [movies]="recentMovies()"
-      [currentMovie]="currentMovie"
-      [watchedMovies]="watchedMovies"
-      (currentMovieId)="openCurrentMovie($event)"
-    ></app-movie-list>
+    <p>New videos added this week</p>
+    <app-video-list
+      [videos]="recentVideos()"
+      [currentVideo]="currentVideo"
+      [watchedVideos]="watchedVideos"
+      (currentVideoId)="openCurrentVideo($event)"
+    ></app-video-list>
   </div>
   }
 
   <!-- Favorites -->
-  @if (favoriteMovies.length > 0) {
+  @if (favoriteVideos.length > 0) {
   <div class="category">
     <p>Favorites</p>
-    <app-movie-list
-      [movies]="getFavoriteMovies()"
-      [currentMovie]="currentMovie"
-      [watchedMovies]="watchedMovies"
-      (currentMovieId)="openCurrentMovie($event)"
-    ></app-movie-list>
+    <app-video-list
+      [videos]="getFavoriteVideos()"
+      [currentVideo]="currentVideo"
+      [watchedVideos]="watchedVideos"
+      (currentVideoId)="openCurrentVideo($event)"
+    ></app-video-list>
   </div>
   }
 
   <!-- Genre columns -->
   @for (filmGenre of filmGenres; track filmGenre) {
-  <!-- Movies by genre -->
-  @if (getAllMovies(filmGenre.code).length > 0) {
+  <!-- Videos by genre -->
+  @if (getAllVideos(filmGenre.code).length > 0) {
   <div class="category">
-    <p>{{ filmGenre.name }}</p>
-    <app-movie-list
-      [movies]="getAllMovies(filmGenre.code)"
-      [currentMovie]="currentMovie"
-      [watchedMovies]="watchedMovies"
-      (currentMovieId)="openCurrentMovie($event)"
-    ></app-movie-list>
+    <app-video-list
+      [videos]="getAllVideos(filmGenre.code)"
+      [currentVideo]="currentVideo"
+      [watchedVideos]="watchedVideos"
+      (currentVideoId)="openCurrentVideo($event)"
+    ></app-video-list>
   </div>
   } }
 </section>

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

@@ -8,21 +8,21 @@ import {
   Output,
 } from '@angular/core';
 import { environment } from '../../../../environments/environment';
-import { MoviesListComponent } from './movie-list/movie-list.component';
+import { VideoListComponent } from './video-list/video-list.component';
 
 @Component({
   selector: 'app-categories',
   standalone: true,
-  imports: [CommonModule, MoviesListComponent],
+  imports: [CommonModule, VideoListComponent],
   templateUrl: './categories.component.html',
   styleUrl: './categories.component.scss',
 })
 export class CategoriesComponent implements AfterViewInit {
-  @Input() movies: any[] = [];
-  @Input() currentMovie: number = 0;
-  @Input() favoriteMovies: any[] = [];
-  @Input() watchedMovies: any[] = [];
-  @Output() currentMovieId = new EventEmitter<number>();
+  @Input() videos: any[] = [];
+  @Input() currentVideo: number = 0;
+  @Input() favoriteVideos: any[] = [];
+  @Input() watchedVideos: any[] = [];
+  @Output() currentVideoId = new EventEmitter<number>();
 
   environmentBaseUrl: string = environment.baseUrl;
   isScrollable: boolean = false;
@@ -52,31 +52,31 @@ export class CategoriesComponent implements AfterViewInit {
     this.checkScroll();
   }
 
-  openCurrentMovie(movieId: number) {
-    this.currentMovie = movieId;
-    this.currentMovieId.emit(movieId);
+  openCurrentVideo(videoId: number) {
+    this.currentVideo = videoId;
+    this.currentVideoId.emit(videoId);
   }
 
-  getAllMovies(filmGenre: string) {
-    return this.movies.filter((movie) => movie.film_genre === filmGenre);
+  getAllVideos(filmGenre: string) {
+    return this.videos.filter((video) => video.film_genre === filmGenre);
   }
 
-  getFavoriteMovies() {
-    return this.movies.filter((movie) =>
-      this.favoriteMovies.includes(movie.id)
+  getFavoriteVideos() {
+    return this.videos.filter((video) =>
+      this.favoriteVideos.includes(video.id)
     );
   }
 
-  recentMovies() {
+  recentVideos() {
     const today = new Date();
     const dayOfWeek = today.getDay();
 
     const lastMonday = new Date(today);
     lastMonday.setDate(today.getDate() - ((dayOfWeek + 6) % 7));
 
-    return this.movies.filter((movie) => {
-      const movieDate = new Date(movie.created_at);
-      return movieDate >= lastMonday && movieDate <= today;
+    return this.videos.filter((video) => {
+      const videoDate = new Date(video.created_at);
+      return videoDate >= lastMonday && videoDate <= today;
     });
   }
 
@@ -87,7 +87,7 @@ export class CategoriesComponent implements AfterViewInit {
 
   checkScroll() {
     const containers = document.querySelectorAll(
-      '.movies'
+      '.videos'
     ) as NodeListOf<HTMLElement>;
     containers.forEach((container) => {
       const scrollButtons = container.parentElement?.querySelector(

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

@@ -1,15 +1,15 @@
-<div class="movies">
-  <!-- List of movies -->
-  @for (movie of movies; track movie) {
-  <div class="movie" (click)="openCurrentMovie(movie.id)">
+<div class="videos">
+  <!-- List of videos -->
+  @for (video of videos; track video) {
+  <div class="video" (click)="openCurrentVideo(video.id)">
     <div class="banner">
       <img
-        [ngClass]="{ selected: movie.id === currentMovie }"
-        [src]="getThumbnailUrl(movie.id, movie.file_name)"
+        [ngClass]="{ selected: video.id === currentVideo }"
+        [src]="getThumbnailUrl(video.id, video.file_name)"
         alt=""
       />
     </div>
-    <div *ngIf="watchedMovies.includes(movie.id)" class="watched">
+    <div *ngIf="watchedVideos.includes(video.id)" class="watched">
       <img src="./assets/img/open-eye.svg" alt="" />
     </div>
   </div>

frontend/src/app/components/home/categories/video-list/video-list.component.scss

@@ -1,6 +1,6 @@
 @use "./../../../../../assets/style/colors.scss" as *;
 
-.movies {
+.videos {
   display: flex;
   overflow-x: auto;
   overflow-y: hidden;
@@ -9,11 +9,11 @@
   padding-bottom: 24px;
 }
 
-.movies::-webkit-scrollbar {
+.videos::-webkit-scrollbar {
   display: none;
 }
 
-.movie {
+.video {
   position: relative;
   width: 213px;
   height: 120px;

frontend/src/app/components/home/categories/video-list/video-list.component.spec.ts

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

frontend/src/app/components/home/categories/video-list/video-list.component.ts

@@ -3,33 +3,33 @@ import { environment } from '../../../../../environments/environment';
 import { CommonModule } from '@angular/common';
 
 @Component({
-  selector: 'app-movie-list',
+  selector: 'app-video-list',
   standalone: true,
   imports: [CommonModule],
-  templateUrl: './movie-list.component.html',
-  styleUrls: ['./movie-list.component.scss'],
+  templateUrl: './video-list.component.html',
+  styleUrls: ['./video-list.component.scss'],
 })
-export class MoviesListComponent {
-  @Input() movies: any[] = [];
-  @Input() currentMovie: number = 0;
-  @Input() watchedMovies: any[] = [];
-  @Input() movieCategory: string = '';
-  @Output() currentMovieId = new EventEmitter<number>();
+export class VideoListComponent {
+  @Input() videos: any[] = [];
+  @Input() currentVideo: number = 0;
+  @Input() watchedVideos: any[] = [];
+  @Input() videoCategory: string = '';
+  @Output() currentVideoId = new EventEmitter<number>();
 
-  getThumbnailUrl(movieId: number, fileName: string): string {
-    return `${environment.baseUrl}/media/thumbnails/${movieId}/${fileName}_480p.jpg`;
+  getThumbnailUrl(videoId: number, fileName: string): string {
+    return `${environment.baseUrl}/media/thumbnails/${videoId}/${fileName}_480p.jpg`;
   }
 
-  openCurrentMovie(movieId: number) {
-    this.currentMovie = movieId;
-    this.currentMovieId.emit(movieId);
+  openCurrentVideo(videoId: number) {
+    this.currentVideo = videoId;
+    this.currentVideoId.emit(videoId);
   }
 
   scrollLeft(event: MouseEvent) {
     const button = event.target as HTMLElement;
     const container = button
       .closest('.category')
-      ?.querySelector('.movies') as HTMLElement;
+      ?.querySelector('.videos') as HTMLElement;
     if (container) {
       container.scrollLeft -= 217;
     }
@@ -39,7 +39,7 @@ export class MoviesListComponent {
     const button = event.target as HTMLElement;
     const container = button
       .closest('.category')
-      ?.querySelector('.movies') as HTMLElement;
+      ?.querySelector('.videos') as HTMLElement;
     if (container) {
       container.scrollLeft += 217;
     }

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

@@ -30,11 +30,11 @@
     *ngIf="
       this.isWideScreen() || (!this.isWideScreen() && currentMovie.length === 0)
     "
-    [movies]="movies"
-    [currentMovie]="currentMovie[0]?.id"
-    [favoriteMovies]="favoriteMovies"
-    [watchedMovies]="watchedMovies"
-    (currentMovieId)="currentMovieId($event)"
+    [videos]="movies"
+    [currentVideo]="currentMovie[0]?.id"
+    [favoriteVideos]="favoriteMovies"
+    [watchedVideos]="watchedMovies"
+    (currentVideoId)="currentMovieId($event)"
   ></app-categories>
   } @else {
   <div class="video-overlay">