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

refactor: optimize code structure and readability

Browse source
This commit is contained in:
Chneemann 2025-04-21 09:17:09 +02:00
parent 31f1041164
commit 9c14319236
13 changed files with 33 additions and 63 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

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

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

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

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

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

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

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

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

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

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

@ -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: '',

10
frontend/src/app/services/auth.service.ts
View file

@ -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'
? './../../../assets/img/open-eye.svg'
: './../../../assets/img/close-eye.svg';
this.passwordIcon === './assets/img/close-eye.svg'
? './assets/img/open-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}`,
});
}
}

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

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

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

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

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

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

6
frontend/src/app/shared/components/header/header.component.html
View file

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

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

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

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

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