From 17cf83a4f2e2e3b1d6de23373928a6bf6bd94747 Mon Sep 17 00:00:00 2001
From: Chneemann <Andre-Ke@gmx.de>
Date: Sat, 3 Aug 2024 18:21:35 +0200
Subject: [PATCH] =?UTF-8?q?video=20player=20hinzugef=C3=BCgt?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../home/browse/browse.component.html         | 25 +++++++-
 .../home/browse/browse.component.scss         | 63 +++++++++++++++++++
 .../home/browse/browse.component.ts           |  9 +++
 .../hero-banner/hero-banner.component.html    |  1 +
 .../hero-banner/hero-banner.component.ts      | 14 ++++-
 frontend/src/assets/img/back.svg              |  1 +
 6 files changed, 111 insertions(+), 2 deletions(-)
 create mode 100644 frontend/src/assets/img/back.svg

diff --git a/frontend/src/app/components/home/browse/browse.component.html b/frontend/src/app/components/home/browse/browse.component.html
index 4f009d3..8fda278 100644
--- a/frontend/src/app/components/home/browse/browse.component.html
+++ b/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>
diff --git a/frontend/src/app/components/home/browse/browse.component.scss b/frontend/src/app/components/home/browse/browse.component.scss
index 0dc1050..c8ec50a 100644
--- a/frontend/src/app/components/home/browse/browse.component.scss
+++ b/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%;
+}
diff --git a/frontend/src/app/components/home/browse/browse.component.ts b/frontend/src/app/components/home/browse/browse.component.ts
index 5bfb9e8..8f49671 100644
--- a/frontend/src/app/components/home/browse/browse.component.ts
+++ b/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]];
diff --git a/frontend/src/app/components/home/browse/hero-banner/hero-banner.component.html b/frontend/src/app/components/home/browse/hero-banner/hero-banner.component.html
index 085ca82..8bce778 100644
--- a/frontend/src/app/components/home/browse/hero-banner/hero-banner.component.html
+++ b/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>
   }
diff --git a/frontend/src/app/components/home/browse/hero-banner/hero-banner.component.ts b/frontend/src/app/components/home/browse/hero-banner/hero-banner.component.ts
index bdc3d3f..3f4034f 100644
--- a/frontend/src/app/components/home/browse/hero-banner/hero-banner.component.ts
+++ b/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}`;
   }
diff --git a/frontend/src/assets/img/back.svg b/frontend/src/assets/img/back.svg
new file mode 100644
index 0000000..c67ba8a
--- /dev/null
+++ b/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>
\ No newline at end of file