video player hinzugefügt

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

@@ -1,9 +1,32 @@
 <section>
+  @if (playMovie === "") {
   <app-header [browse]="true"></app-header>
-  <app-hero-banner [currentMovie]="currentMovie"></app-hero-banner>
+  <app-hero-banner
+    [currentMovie]="currentMovie"
+    (playMovie)="playVideo($event)"
+  ></app-hero-banner>
   <app-categories
     [movies]="movies"
     [currentMovie]="currentMovie[0].id"
     (currentMovieId)="currentMovieId($event)"
   ></app-categories>
+  } @else {
+  <div class="video-overlay">
+    <div class="video-header">
+      <div class="back-button" (click)="closeVideo()">
+        <img src="./../../../../assets/img/back.svg" alt="Back" />
+      </div>
+      <div class="logo">
+        <img src="./../../../../assets/img/logo_ci.svg" alt="Logo" />
+      </div>
+    </div>
+    <video width="100%" height="100%" controls autoplay>
+      <source
+        src="./../../../../assets/movies/{{ playMovie }}"
+        type="video/mp4"
+      />
+      Your browser does not support the video tag.
+    </video>
+  </div>
+  }
 </section>

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

@@ -5,3 +5,66 @@ section {
   width: 100vw;
   background-color: $black;
 }
+
+.video-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.8);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+  overflow: hidden; /* Verhindert, dass das Video aus dem Overlay herausragt */
+  position: relative;
+}
+
+.video-header {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 24px 48px;
+  background: rgba(0, 0, 0, 0.5);
+  z-index: 1001;
+  opacity: 0;
+  transition: opacity 300ms ease-in-out;
+}
+
+.video-overlay:hover .video-header {
+  opacity: 1;
+}
+
+.back-button {
+  cursor: pointer;
+  background: none;
+  border: none;
+  padding: 0;
+  img {
+    width: 24px;
+    height: 24px;
+    filter: brightness(0) saturate(100%) invert(100%) sepia(6%) saturate(312%)
+      hue-rotate(234deg) brightness(113%) contrast(100%);
+    transition: filter 300ms ease-in-out;
+    &:hover {
+      filter: brightness(0) saturate(100%) invert(13%) sepia(90%)
+        saturate(7329%) hue-rotate(344deg) brightness(105%) contrast(117%);
+    }
+  }
+}
+
+.logo img {
+  width: 32px;
+  height: auto;
+}
+
+.video-overlay video {
+  width: 100%;
+  height: 100%;
+}

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

@@ -35,11 +35,20 @@ export class BrowseComponent implements OnInit {
   ];
 
   currentMovie: any[] = [];
+  playMovie: string = '';
 
   ngOnInit(): void {
     this.currentMovie.length === 0 ? this.loadRandomMovie() : null;
   }
 
+  closeVideo(): void {
+    this.playMovie = '';
+  }
+
+  playVideo(videoPath: string) {
+    this.playMovie = videoPath;
+  }
+
   loadRandomMovie(): void {
     const randomIndex = Math.floor(Math.random() * this.movies.length);
     this.currentMovie = [this.movies[randomIndex]];

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

@@ -12,6 +12,7 @@
       [value]="'Play'"
       [imgPath]="'play'"
       [imgReverse]="true"
+      (click)="playMovieId(currentMovie[0].videoPath)"
     ></app-btn-large>
   </div>
   }

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

@@ -1,5 +1,11 @@
 import { CommonModule } from '@angular/common';
-import { Component, ElementRef, Input } from '@angular/core';
+import {
+  Component,
+  ElementRef,
+  EventEmitter,
+  Input,
+  Output,
+} from '@angular/core';
 import { BtnLargeComponent } from '../../../../shared/components/btn-large/btn-large.component';
 
 @Component({
@@ -11,12 +17,18 @@ import { BtnLargeComponent } from '../../../../shared/components/btn-large/btn-l
 })
 export class HeroBannerComponent {
   @Input() currentMovie: any[] = [];
+  @Output() playMovie = new EventEmitter<string>();
 
   constructor(private el: ElementRef) {}
 
   ngAfterViewInit() {
     this.truncateText();
   }
+
+  playMovieId(videoPath: string) {
+    this.playMovie.emit(videoPath);
+  }
+
   getImagePath(): string {
     return `./../../../../../assets/movies/banner/${this.currentMovie[0]?.imgPath}`;
   }

frontend/src/assets/img/back.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e8eaed"><path d="m313-440 224 224-57 56-320-320 320-320 57 56-224 224h487v80H313Z"/></svg>