rename & design upload movie component

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

@@ -34,12 +34,12 @@
   <div class="add-button">
     <app-btn-small
       [imgPath]="'add'"
-      (click)="toggleNewMovieOverview(true)"
+      (click)="toggleUploadMovieOverview(true)"
     ></app-btn-small>
   </div>
 </section>
-@if (newMovieOverview) {
+@if (uploadMovieOverview) {
-<app-new-movie
+<app-upload-movie
-  (toggleNewMovieOverview)="toggleNewMovieOverview($event)"
+  (toggleUploadMovieOverview)="toggleUploadMovieOverview($event)"
-></app-new-movie>
+></app-upload-movie>
 }

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

@@ -1,15 +1,13 @@
-import { Component, ElementRef, OnInit, ViewChild } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 import { HeaderComponent } from '../../../shared/components/header/header.component';
 import { HeroBannerComponent } from './hero-banner/hero-banner.component';
 import { CategoriesComponent } from './categories/categories.component';
 import { AuthService } from '../../../services/auth.service';
 import { MovieService } from '../../../services/movie.service';
-import { Observable, Subscription } from 'rxjs';
 import { CommonModule } from '@angular/common';
 import { VideoPlayerComponent } from './vjs-player/vjs-player.component';
-import { BtnLargeComponent } from '../../../shared/components/buttons/btn-large/btn-large.component';
 import { BtnSmallComponent } from '../../../shared/components/buttons/btn-small/btn-small.component';
-import { NewMovieComponent } from './new-movie/new-movie.component';
+import { UploadMovieComponent } from './upload-movie/upload-movie.component';
 
 @Component({
   selector: 'app-browse',
@@ -21,23 +19,22 @@ import { NewMovieComponent } from './new-movie/new-movie.component';
     CategoriesComponent,
     VideoPlayerComponent,
     BtnSmallComponent,
-    NewMovieComponent,
+    UploadMovieComponent,
   ],
   templateUrl: './browse.component.html',
   styleUrl: './browse.component.scss',
 })
 export class BrowseComponent implements OnInit {
   movies: any[] = [];
+  currentMovie: any[] = [];
+  playMovie: string = '';
+  uploadMovieOverview: boolean = false;
 
   constructor(
     private authService: AuthService,
     private movieService: MovieService
   ) {}
 
-  currentMovie: any[] = [];
-  playMovie: string = '';
-  newMovieOverview: boolean = false;
-
   async ngOnInit() {
     await this.loadAllMovies();
     this.currentMovie.length === 0 ? this.loadRandomMovie() : null;
@@ -68,7 +65,9 @@ export class BrowseComponent implements OnInit {
     }
   }
 
-  toggleNewMovieOverview(value: any) {
+  toggleUploadMovieOverview(value: any) {
-    this.newMovieOverview = value;
+    console.log(value);
+
+    this.uploadMovieOverview = value;
   }
 }

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

@@ -1,5 +0,0 @@
-<div class="overlay" (click)="newMovieOverview()">
-  <div class="overlay-content" (click)="stopPropagation($event)">
-    <p>new-movie works!</p>
-  </div>
-</div>

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

@@ -1,23 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { NewMovieComponent } from './new-movie.component';
-
-describe('NewMovieComponent', () => {
-  let component: NewMovieComponent;
-  let fixture: ComponentFixture<NewMovieComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [NewMovieComponent]
-    })
-    .compileComponents();
-    
-    fixture = TestBed.createComponent(NewMovieComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

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

@@ -1,20 +0,0 @@
-import { Component, EventEmitter, Output } from '@angular/core';
-
-@Component({
-  selector: 'app-new-movie',
-  standalone: true,
-  imports: [],
-  templateUrl: './new-movie.component.html',
-  styleUrl: './new-movie.component.scss',
-})
-export class NewMovieComponent {
-  @Output() toggleNewMovieOverview = new EventEmitter<boolean>();
-
-  stopPropagation(event: MouseEvent) {
-    event.stopPropagation();
-  }
-
-  newMovieOverview() {
-    this.toggleNewMovieOverview.emit(false);
-  }
-}

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

@@ -0,0 +1,94 @@
+<div class="overlay" (click)="uploadMovieOverview()">
+  <div class="center" (click)="stopPropagation($event)">
+    <div class="content">
+      <div class="headline">Upload Movie</div>
+      <form
+        #movieForm="ngForm"
+        (ngSubmit)="onSubmit(movieForm)"
+        onsubmit="return false"
+        (input)="this.errorService.clearError()"
+      >
+        <input
+          type="text"
+          id="title"
+          name="title"
+          #title="ngModel"
+          placeholder="Title"
+          [(ngModel)]="movieData.title"
+          [class.error-border]="!title.valid && title.touched"
+          required
+        />
+        <div class="error-msg">
+          @if (!title.valid && title.touched) {
+          <p>Please enter a movie title</p>
+          }
+        </div>
+        <textarea
+          id="description"
+          name="description"
+          #description="ngModel"
+          placeholder="Description"
+          [(ngModel)]="movieData.description"
+          [class.error-border]="!description.valid && description.touched"
+          rows="4"
+          required
+        ></textarea>
+        <div class="error-msg">
+          @if (!description.valid && description.touched) {
+          <p>Please enter a movie description</p>
+          }
+        </div>
+        <select
+          id="filmGenre"
+          name="filmGenre"
+          #filmGenre="ngModel"
+          [(ngModel)]="movieData.filmGenre"
+          [class.error-border]="!filmGenre.valid && filmGenre.touched"
+          required
+        >
+          <option value="action">Action</option>
+          <option value="adventure">Adventure</option>
+          <option value="comedy">Comedy</option>
+          <option value="drama">Drama</option>
+          <option value="horror">Horror</option>
+          <option value="science_fiction">Science Fiction</option>
+          <option value="fantasy">Fantasy</option>
+          <option value="romance">Romance</option>
+          <option value="thriller">Thriller</option>
+          <option value="mystery">Mystery</option>
+          <option value="crime">Crime</option>
+          <option value="animation">Animation</option>
+          <option value="documentary">Documentary</option>
+          <option value="musical">Musical</option>
+          <option value="war">War</option>
+          <option value="western">Western</option>
+          <option value="other">Miscellaneous</option>
+        </select>
+        <div class="error-msg">
+          @if (!filmGenre.valid && filmGenre.touched) {
+          <p>Please enter a movie genre</p>
+          }
+        </div>
+        <input
+          type="file"
+          id="videoFile"
+          name="videoFile"
+          #videoFile="ngModel"
+          placeholder="Video file"
+          [(ngModel)]="movieData.videoFile"
+          [class.error-border]="!videoFile.valid && videoFile.touched"
+          required
+        />
+        <div class="error-msg">
+          @if (!videoFile.valid && videoFile.touched) {
+          <p>Please enter the movie file</p>
+          }
+        </div>
+        <app-btn-large
+          [value]="'Get Started'"
+          [disabled]="!movieData.title"
+        ></app-btn-large>
+      </form>
+    </div>
+  </div>
+</div>

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

@@ -1,4 +1,10 @@
 @import "./../../../../../assets/style/colors.scss";
+@import "./../../../../../assets/style/form.scss";
+@import "./../../../../../assets/style/auth-layout.scss";
+
+.center {
+  text-align: center;
+}
 
 // Overlay
 
@@ -17,14 +23,3 @@
   align-items: center;
   z-index: 999;
 }
-
-.overlay-mobile {
-  position: fixed;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  width: 100vw;
-  height: 100vh;
-  z-index: 999;
-}

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

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

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

@@ -0,0 +1,38 @@
+import { CommonModule } from '@angular/common';
+import { Component, EventEmitter, Output } from '@angular/core';
+import { FormsModule, NgForm } from '@angular/forms';
+import { ErrorService } from '../../../../services/error.service';
+import { BtnLargeComponent } from '../../../../shared/components/buttons/btn-large/btn-large.component';
+@Component({
+  selector: 'app-upload-movie',
+  standalone: true,
+  imports: [CommonModule, FormsModule, BtnLargeComponent],
+  templateUrl: './upload-movie.component.html',
+  styleUrl: './upload-movie.component.scss',
+})
+export class UploadMovieComponent {
+  @Output() toggleUploadMovieOverview = new EventEmitter<boolean>();
+
+  movieData = {
+    title: '',
+    description: '',
+    filmGenre: '',
+    videoFile: '',
+  };
+
+  constructor(public errorService: ErrorService) {}
+
+  stopPropagation(event: MouseEvent) {
+    event.stopPropagation();
+  }
+
+  uploadMovieOverview() {
+    this.toggleUploadMovieOverview.emit(false);
+  }
+
+  async onSubmit(ngForm: NgForm) {
+    if (ngForm.submitted && ngForm.form.valid) {
+      console.log('send');
+    }
+  }
+}

frontend/src/assets/style/auth-layout.scss

@@ -54,6 +54,9 @@ section {
 @media screen and (max-width: 660px) {
   .content {
     padding: 43px 24px;
+    .headline {
+      font-size: 36px;
+    }
   }
 }
 
@@ -62,3 +65,9 @@ section {
     width: 80%;
   }
 }
+
+@media screen and (max-width: 400px) {
+  .content {
+    padding: 24px 18px;
+  }
+}

frontend/src/assets/style/form.scss

@@ -3,7 +3,9 @@ form {
   flex-direction: column;
   align-items: center;
   justify-content: space-between;
-  input {
+  input,
+  textarea,
+  select {
     width: 90%;
     padding: 12px 18px;
     box-sizing: border-box;
@@ -13,6 +15,7 @@ form {
     border-radius: 12px;
     font-size: 18px;
     font-weight: 400;
+    resize: none;
     transition: background-color 250ms ease-in-out, color 250ms ease-in-out,
       border-color 250ms ease-in-out;
     &::placeholder {
@@ -23,6 +26,17 @@ form {
       background-color: rgba($white, 0.1);
     }
   }
+  input::file-selector-button {
+    width: fit-content;
+    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
+    border-radius: 6px;
+    padding: 6px;
+    color: $white;
+    background-color: blue;
+    border: 1px solid blue;
+    transition: 300ms ease-in-out;
+    cursor: pointer;
+  }
   .error-border {
     border: 1px solid $red;
     color: $red;
@@ -66,7 +80,9 @@ form {
 
 @media screen and (max-width: 600px) {
   form {
-    input {
+    input,
+    textarea,
+    select {
       width: 100%;
     }
   }