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

rename & design upload movie component

Browse source
This commit is contained in:
Chneemann 2024-08-14 10:24:06 +02:00
parent 38e5456bca
commit 27232e1421
11 changed files with 201 additions and 77 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
frontend/src/app/components/home/browse/browse.component.html
View file

@ -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) {
<app-new-movie
(toggleNewMovieOverview)="toggleNewMovieOverview($event)"
></app-new-movie>
@if (uploadMovieOverview) {
<app-upload-movie
(toggleUploadMovieOverview)="toggleUploadMovieOverview($event)"
></app-upload-movie>
}

21
frontend/src/app/components/home/browse/browse.component.ts
View file

@ -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) {
this.newMovieOverview = value;
toggleUploadMovieOverview(value: any) {
console.log(value);
this.uploadMovieOverview = value;
}
}

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

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

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

@ -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();
});
});

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

@ -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);
}
}

94
frontend/src/app/components/home/browse/upload-movie/upload-movie.component.html Normal file
View file

@ -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>

17
frontend/src/app/components/home/browse/new-movie/new-movie.component.scss → frontend/src/app/components/home/browse/upload-movie/upload-movie.component.scss
View file

@ -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;
}

21
frontend/src/app/components/home/browse/upload-movie/upload-movie.component.spec.ts Normal file
View file

@ -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();
});
});

38
frontend/src/app/components/home/browse/upload-movie/upload-movie.component.ts Normal file
View file

@ -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');
}
}
}

9
frontend/src/assets/style/auth-layout.scss
View file

@ -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;
}
}

20
frontend/src/assets/style/form.scss
View file

@ -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%;
}
}