From 023d26199c32883e544a013369a5b69e2f84a558 Mon Sep 17 00:00:00 2001
From: Rueben  van der Westhuizen <91849806+21434809@users.noreply.github.com>
Date: Fri, 27 Sep 2024 10:22:26 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=93=90Refactor=20mood=20component=20HTML?=
 =?UTF-8?q?=20-=20Update=20album=20art=20display?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 Frontend/src/app/pages/mood/mood.component.html | 14 +++++++++-----
 Frontend/src/app/pages/mood/mood.component.ts   |  8 ++++++--
 2 files changed, 15 insertions(+), 7 deletions(-)

diff --git a/Frontend/src/app/pages/mood/mood.component.html b/Frontend/src/app/pages/mood/mood.component.html
index 5b5cb351..a72ce6a7 100644
--- a/Frontend/src/app/pages/mood/mood.component.html
+++ b/Frontend/src/app/pages/mood/mood.component.html
@@ -1,14 +1,18 @@
-<div class="col-start-1 col-span-5 row-start-2 row-span-4 pl-2">
-    <div style="background-color: rgba(0, 0, 0, 0.7);" class="rounded-lg overflow-hidden h-full relative p-8">
+<div class="col-start-1 col-span-5 row-start-2 row-span-4 pl-2 pr-2" style="height: 72vh;">
+    <div  class="rounded-lg overflow-hidden h-full relative p-8">
         <app-back-button></app-back-button>
         <app-page-title class="text-5xl font-bold text-center mb-6">{{title}}</app-page-title>
 
         <div class="grid grid-cols-5 gap-3">
-            <div *ngFor="let album of albums" class="album-art flex flex-col items-center">
-                <img [src]="album.imageUrl" alt="{{ album.title }}" class="w-32 h-32 object-cover rounded-md">
+            <div *ngFor="let album of albums" class="album-art flex flex-col items-center hover:cursor-pointer group">
+                <div class="relative">
+                    <img [src]="album.imageUrl" alt="{{ album.title }}" class="w-32 h-32 object-cover rounded-md">
+                    <app-play-icon [switchMood]="false" (click)="playTrack(album.title,album.artist)" [width]="'7vh'" class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100">
+                    </app-play-icon>
+                </div>
                 <p class="text-center text-white text-lg font-semibold">{{ album.title }}</p>
                 <p class="text-center text-sm text-white text-gray-500">{{ album.artist }}</p>
             </div>
         </div>
     </div>
-</div>
+</div>
\ No newline at end of file
diff --git a/Frontend/src/app/pages/mood/mood.component.ts b/Frontend/src/app/pages/mood/mood.component.ts
index 40605a53..2770935d 100644
--- a/Frontend/src/app/pages/mood/mood.component.ts
+++ b/Frontend/src/app/pages/mood/mood.component.ts
@@ -10,12 +10,16 @@ import { ProfileComponent } from '../profile/profile.component';
 import { MoodDropDownComponent } from '../../components/organisms/mood-drop-down/mood-drop-down.component';
 import { BackButtonComponent } from '../../components/atoms/back-button/back-button.component';
 import { PageTitleComponent } from '../../components/atoms/page-title/page-title.component';
-import { Track } from '../../services/search.service';  // <-- Use Track interface
+import { Track } from '../../services/search.service';
+import { ProviderService } from "../../services/provider.service";
+import { YouTubeService } from "../../services/youtube.service";
+import { SpotifyService } from "../../services/spotify.service";  // <-- Use Track interface
+import { PlayIconComponent } from '../../components/organisms/play-icon/play-icon.component';
 
 @Component({
   selector: 'app-mood',
   standalone: true,
-  imports: [NgForOf, NgIf, NgClass, NgSwitch, NgSwitchCase, NavbarComponent, SearchBarComponent, ProfileComponent, MoodDropDownComponent, BackButtonComponent, PageTitleComponent],
+  imports: [NgForOf, NgIf, NgClass, NgSwitch, NgSwitchCase, NavbarComponent, SearchBarComponent, ProfileComponent, MoodDropDownComponent, BackButtonComponent, PageTitleComponent,PlayIconComponent],
   templateUrl: './mood.component.html',
   styleUrls: ['./mood.component.css']
 })