From a939419b3bd57505952c5bcca21cf244e325c387 Mon Sep 17 00:00:00 2001 From: 21797545 Date: Thu, 5 Sep 2024 09:29:01 +0200 Subject: [PATCH 01/47] =?UTF-8?q?=F0=9F=8E=89Playlists=20controller=20&=20?= =?UTF-8?q?service?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../controller/playlist.controller.ts | 10 ++++++ .../src/playlist/services/playlist.service.ts | 34 +++++++++++++++++++ 2 files changed, 44 insertions(+) create mode 100644 Backend/src/playlist/controller/playlist.controller.ts create mode 100644 Backend/src/playlist/services/playlist.service.ts diff --git a/Backend/src/playlist/controller/playlist.controller.ts b/Backend/src/playlist/controller/playlist.controller.ts new file mode 100644 index 00000000..5f5b1bd1 --- /dev/null +++ b/Backend/src/playlist/controller/playlist.controller.ts @@ -0,0 +1,10 @@ +import { Body, Controller, Get, HttpException, HttpStatus, Post, Put, UnauthorizedException } from "@nestjs/common"; +import { PlaylistService } from "../services/playlist.service"; + +@Controller("playlist") +export class SpotifyController +{ + constructor(private readonly playlistService: PlaylistService) + { + } +} diff --git a/Backend/src/playlist/services/playlist.service.ts b/Backend/src/playlist/services/playlist.service.ts new file mode 100644 index 00000000..ab258d73 --- /dev/null +++ b/Backend/src/playlist/services/playlist.service.ts @@ -0,0 +1,34 @@ +import { Injectable, HttpException, HttpStatus } from "@nestjs/common"; +import { HttpService } from "@nestjs/axios"; +import { firstValueFrom, lastValueFrom } from "rxjs"; +import { createSupabaseClient } from "../../supabase/services/supabaseClient"; +import { SupabaseService } from "../../supabase/services/supabase.service"; +import { accessKey } from "../../config"; + +@Injectable() +export class PlaylistService +{ + constructor(private httpService: HttpService, private supabaseService: SupabaseService) + { + } + + +} + +interface PlaylistTrack +{ + id: string; + name: string; + albumName: string; + albumImageUrl: string; + artistName: string; + previewUrl: string | null; + spotifyUrl: string | null; + youtubeUrl: string | null; +} + +interface Playlist +{ + tracks: PlaylistTrack[]; +} + From 0e3040f9539ef1d2b9fb245b2b7c688eacde5967 Mon Sep 17 00:00:00 2001 From: 21797545 Date: Thu, 5 Sep 2024 09:29:34 +0200 Subject: [PATCH 02/47] =?UTF-8?q?=F0=9F=9A=80Method=20to=20get=20current?= =?UTF-8?q?=20playback=20state=20for=20YouTube=20service?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../bottom-player/bottom-player.component.ts | 2 +- Frontend/src/app/services/youtube.service.ts | 17 ++++++++++++++++- 2 files changed, 17 insertions(+), 2 deletions(-) diff --git a/Frontend/src/app/components/organisms/bottom-player/bottom-player.component.ts b/Frontend/src/app/components/organisms/bottom-player/bottom-player.component.ts index 52b26659..85f48a49 100644 --- a/Frontend/src/app/components/organisms/bottom-player/bottom-player.component.ts +++ b/Frontend/src/app/components/organisms/bottom-player/bottom-player.component.ts @@ -307,7 +307,7 @@ export class BottomPlayerComponent implements AfterViewInit, OnDestroy else { const volume = event.target.value; - this.youtubeService.adjustVolume(volume); + this.youtubeService.setVolume(volume); } } diff --git a/Frontend/src/app/services/youtube.service.ts b/Frontend/src/app/services/youtube.service.ts index 9167e694..5228657e 100644 --- a/Frontend/src/app/services/youtube.service.ts +++ b/Frontend/src/app/services/youtube.service.ts @@ -22,9 +22,11 @@ export class YouTubeService private isReady = new ReplaySubject(1); private isPlayingSubject = new BehaviorSubject(false); private currentTrackInfoSubject = new BehaviorSubject(null); + private playbackProgressSubject = new BehaviorSubject(0); isPlaying$ = this.isPlayingSubject.asObservable(); currentTrackInfo$ = this.currentTrackInfoSubject.asObservable(); + playbackProgress$ = this.playbackProgressSubject.asObservable(); private apiKey = "YOUR_YOUTUBE_API_KEY"; private apiUrl = "https://www.googleapis.com/youtube/v3/videos"; @@ -193,7 +195,7 @@ export class YouTubeService this.player.destroy(); } - adjustVolume(newVolume: number) + setVolume(newVolume: number) { this.player.setVolume(newVolume); } @@ -208,4 +210,17 @@ export class YouTubeService this.player.previousVideo(); } + // Method to get the progress of the currently playing track + public getCurrentPlaybackState(): void + { + if (this.player) + { + const duration = this.player.getDuration(); + const currTime = this.player.getCurrentTime(); + this.playbackProgressSubject.next((currTime / duration) * 100); + } + } + + + } From 30b53c07945a2488b0d87b0a9949b4a17c89b36c Mon Sep 17 00:00:00 2001 From: Rueben van der Westhuizen <91849806+21434809@users.noreply.github.com> Date: Tue, 3 Sep 2024 18:28:22 +0200 Subject: [PATCH 03/47] =?UTF-8?q?=F0=9F=9A=A7new=20background=20component?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- Frontend/src/app/app.component.html | 32 ++++++++-------- Frontend/src/app/app.component.ts | 6 ++- Frontend/src/app/app.routes.ts | 3 +- .../background-animation.component.css | 38 +++++++++++++++++++ .../background-animation.component.html | 5 +++ .../background-animation.component.spec.ts | 23 +++++++++++ .../background-animation.component.ts | 35 +++++++++++++++++ 7 files changed, 123 insertions(+), 19 deletions(-) create mode 100644 Frontend/src/app/components/organisms/background-animation/background-animation.component.css create mode 100644 Frontend/src/app/components/organisms/background-animation/background-animation.component.html create mode 100644 Frontend/src/app/components/organisms/background-animation/background-animation.component.spec.ts create mode 100644 Frontend/src/app/components/organisms/background-animation/background-animation.component.ts diff --git a/Frontend/src/app/app.component.html b/Frontend/src/app/app.component.html index 58d18215..d830667e 100644 --- a/Frontend/src/app/app.component.html +++ b/Frontend/src/app/app.component.html @@ -2,25 +2,25 @@
-
-
- - - -
+
+
+ + + + +
-
- -
- -
+
+ + +
+
- +
+
- -
- - + +
\ No newline at end of file diff --git a/Frontend/src/app/app.component.ts b/Frontend/src/app/app.component.ts index b778c334..d4669e93 100644 --- a/Frontend/src/app/app.component.ts +++ b/Frontend/src/app/app.component.ts @@ -10,6 +10,7 @@ import { SideBarComponent } from "./components/organisms/side-bar/side-bar.compo import { ProviderService } from "./services/provider.service"; import { PageHeaderComponent } from "./components/molecules/page-header/page-header.component"; import { MoodService } from "./services/mood-service.service"; +import { BackgroundAnimationComponent } from "./components/organisms/background-animation/background-animation.component"; //template imports import { HeaderComponent } from "./components/organisms/header/header.component"; @@ -17,7 +18,7 @@ import { OtherNavComponent } from "./components/templates/desktop/other-nav/othe import { LeftComponent } from "./components/templates/desktop/left/left.component"; import { AuthService } from "./services/auth.service"; import { PlayerStateService } from "./services/player-state.service"; - + @Component({ selector: "app-root", standalone: true, @@ -29,7 +30,8 @@ import { PlayerStateService } from "./services/player-state.service"; PageHeaderComponent, HeaderComponent, OtherNavComponent, - LeftComponent + LeftComponent, + BackgroundAnimationComponent ], templateUrl: "./app.component.html", styleUrls: ["./app.component.css"] diff --git a/Frontend/src/app/app.routes.ts b/Frontend/src/app/app.routes.ts index 8314fc65..b457eaec 100644 --- a/Frontend/src/app/app.routes.ts +++ b/Frontend/src/app/app.routes.ts @@ -15,6 +15,7 @@ import { InsightsComponent } from "./pages/insights/insights.component"; import { HelpMenuComponent } from "./pages/help-menu/help-menu.component"; import { LoginComponentview} from "./views/login/login.component"; + export const routes: Routes = [ { path: "landing", component: LandingPageComponent }, { path: "login", component: LoginComponent }, @@ -31,7 +32,7 @@ export const routes: Routes = [ { path: "search", component: SearchComponent}, { path: "newlogin", component: LoginComponentview}, { path: "library", component: UserLibraryComponent}, - { path: "search", component: SearchComponent} + { path: "search", component: SearchComponent}, ]; @NgModule({ diff --git a/Frontend/src/app/components/organisms/background-animation/background-animation.component.css b/Frontend/src/app/components/organisms/background-animation/background-animation.component.css new file mode 100644 index 00000000..03e1e019 --- /dev/null +++ b/Frontend/src/app/components/organisms/background-animation/background-animation.component.css @@ -0,0 +1,38 @@ +@keyframes moveBlob { + 0% { + transform: translate(0, 0); + } + 25% { + transform: translate(150px, -100px); + } + 50% { + transform: translate(-100px, 200px); + } + 75% { + transform: translate(100px, -50px); + } + 100% { + transform: translate(0, 0); + } +} + +.blob { + animation: moveBlob 40s infinite ease-in-out; +} + +.blob:nth-child(1) { + top: 10%; + left: 20%; +} + +.blob:nth-child(2) { + top: 30%; + left: 70%; + animation-delay: 10s; +} + +.blob:nth-child(3) { + top: 60%; + left: 40%; + animation-delay: 20s; +} \ No newline at end of file diff --git a/Frontend/src/app/components/organisms/background-animation/background-animation.component.html b/Frontend/src/app/components/organisms/background-animation/background-animation.component.html new file mode 100644 index 00000000..61b31ca2 --- /dev/null +++ b/Frontend/src/app/components/organisms/background-animation/background-animation.component.html @@ -0,0 +1,5 @@ +
+
+
+
+
\ No newline at end of file diff --git a/Frontend/src/app/components/organisms/background-animation/background-animation.component.spec.ts b/Frontend/src/app/components/organisms/background-animation/background-animation.component.spec.ts new file mode 100644 index 00000000..f14bf339 --- /dev/null +++ b/Frontend/src/app/components/organisms/background-animation/background-animation.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { BackgroundAnimationComponent } from './background-animation.component'; + +describe('BackgroundAnimationComponent', () => { + let component: BackgroundAnimationComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [BackgroundAnimationComponent] + }) + .compileComponents(); + + fixture = TestBed.createComponent(BackgroundAnimationComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/Frontend/src/app/components/organisms/background-animation/background-animation.component.ts b/Frontend/src/app/components/organisms/background-animation/background-animation.component.ts new file mode 100644 index 00000000..28712ec1 --- /dev/null +++ b/Frontend/src/app/components/organisms/background-animation/background-animation.component.ts @@ -0,0 +1,35 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-background-animation', + standalone: true, + imports: [], + templateUrl: './background-animation.component.html', + styleUrls: ['./background-animation.component.css'] +}) +export class BackgroundAnimationComponent implements OnInit { + ngOnInit(): void { + if (typeof document !== 'undefined') { + const blobs = document.querySelectorAll('.blob'); + + function changeBlobColor(color: string) { + blobs.forEach((blob) => { + (blob as HTMLElement).style.backgroundColor = color; + }); + } + + // Initial color + changeBlobColor('#FF6B6B'); + + // Tween to a new color after 8 seconds + setTimeout(() => { + changeBlobColor('#6A0572'); + }, 8000); + + // Optional: Further tween to another color after 16 seconds + setTimeout(() => { + changeBlobColor('#FEB692'); + }, 16000); + } + } +} \ No newline at end of file From cecc0137bb85148026e2f6d8ea2088976e64f806 Mon Sep 17 00:00:00 2001 From: Rueben van der Westhuizen <91849806+21434809@users.noreply.github.com> Date: Tue, 3 Sep 2024 18:57:24 +0200 Subject: [PATCH 04/47] =?UTF-8?q?=F0=9F=9A=A7fixed=20bakcground=20position?= =?UTF-8?q?ing?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- Frontend/src/app/app.component.html | 20 +++++++++---------- .../background-animation.component.html | 2 +- 2 files changed, 11 insertions(+), 11 deletions(-) diff --git a/Frontend/src/app/app.component.html b/Frontend/src/app/app.component.html index d830667e..820dca8f 100644 --- a/Frontend/src/app/app.component.html +++ b/Frontend/src/app/app.component.html @@ -4,23 +4,23 @@
- - - - -
+ + + + +
- - -
+ + +
- +
- +
\ No newline at end of file diff --git a/Frontend/src/app/components/organisms/background-animation/background-animation.component.html b/Frontend/src/app/components/organisms/background-animation/background-animation.component.html index 61b31ca2..e641045b 100644 --- a/Frontend/src/app/components/organisms/background-animation/background-animation.component.html +++ b/Frontend/src/app/components/organisms/background-animation/background-animation.component.html @@ -1,4 +1,4 @@ -
+
From 7dbaf03dc2b54ebb03f4757e1f64d04448ea7449 Mon Sep 17 00:00:00 2001 From: Rueben van der Westhuizen <91849806+21434809@users.noreply.github.com> Date: Tue, 3 Sep 2024 21:16:12 +0200 Subject: [PATCH 05/47] =?UTF-8?q?=F0=9F=8E=89new=20background=20Blob=20ani?= =?UTF-8?q?mation=20component=20w/=20mood=20colors?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- Frontend/src/app/app.component.html | 7 +- Frontend/src/app/app.component.ts | 2 - .../background-animation.component.css | 79 +++++++++++++++---- .../background-animation.component.html | 8 +- .../background-animation.component.ts | 29 ++----- 5 files changed, 75 insertions(+), 50 deletions(-) diff --git a/Frontend/src/app/app.component.html b/Frontend/src/app/app.component.html index 820dca8f..39d6b142 100644 --- a/Frontend/src/app/app.component.html +++ b/Frontend/src/app/app.component.html @@ -1,10 +1,10 @@ +
- @@ -13,8 +13,7 @@
-
- +
@@ -23,4 +22,4 @@
-
\ No newline at end of file +
diff --git a/Frontend/src/app/app.component.ts b/Frontend/src/app/app.component.ts index d4669e93..d9d28dd8 100644 --- a/Frontend/src/app/app.component.ts +++ b/Frontend/src/app/app.component.ts @@ -59,8 +59,6 @@ export class AppComponent implements OnInit { private playerStateService: PlayerStateService, @Inject(PLATFORM_ID) private platformId: Object, ) { - this.currentMood = this.moodService.getCurrentMood(); - this.moodComponentClasses = this.moodService.getComponentMoodClasses(); this.backgroundMoodClasses = this.moodService.getBackgroundMoodClasses(); updates.versionUpdates.subscribe(event => { if (event.type === "VERSION_READY") { diff --git a/Frontend/src/app/components/organisms/background-animation/background-animation.component.css b/Frontend/src/app/components/organisms/background-animation/background-animation.component.css index 03e1e019..4a0e5c96 100644 --- a/Frontend/src/app/components/organisms/background-animation/background-animation.component.css +++ b/Frontend/src/app/components/organisms/background-animation/background-animation.component.css @@ -1,38 +1,83 @@ -@keyframes moveBlob { +@keyframes moveBlob1 { 0% { transform: translate(0, 0); } - 25% { - transform: translate(150px, -100px); + 20% { + transform: translate(20vw, -10vh); } - 50% { - transform: translate(-100px, 200px); + 40% { + transform: translate(-15vw, 25vh); } - 75% { - transform: translate(100px, -50px); + 60% { + transform: translate(10vw, -20vh); + } + 80% { + transform: translate(-5vw, 15vh); } 100% { transform: translate(0, 0); } } -.blob { - animation: moveBlob 40s infinite ease-in-out; +@keyframes moveBlob2 { + 0% { + transform: translate(0, 0); + } + 20% { + transform: translate(-20vw, 10vh); + } + 40% { + transform: translate(15vw, -25vh); + } + 60% { + transform: translate(-10vw, 20vh); + } + 80% { + transform: translate(5vw, -15vh); + } + 100% { + transform: translate(0, 0); + } +} + +@keyframes moveBlob3 { + 0% { + transform: translate(0, 0); + } + 20% { + transform: translate(10vw, 20vh); + } + 40% { + transform: translate(-25vw, -15vh); + } + 60% { + transform: translate(20vw, 10vh); + } + 80% { + transform: translate(-15vw, -5vh); + } + 100% { + transform: translate(0, 0); + } } .blob:nth-child(1) { - top: 10%; - left: 20%; + top: 10vh; + left: 20vw; + animation: moveBlob1 40s infinite ease-in-out; + animation-delay: 1s; /* No delay for the first child */ } .blob:nth-child(2) { - top: 30%; - left: 70%; - animation-delay: 10s; + top: 30vh; + left: 70vw; + animation: moveBlob2 40s infinite ease-in-out; + animation-delay: 3s; /* Delay for the second child */ } .blob:nth-child(3) { - top: 60%; - left: 40%; - animation-delay: 20s; + top: 60vh; + left: 40vw; + animation: moveBlob3 40s infinite ease-in-out; + animation-delay: 4s; /* Delay for the third child */ } \ No newline at end of file diff --git a/Frontend/src/app/components/organisms/background-animation/background-animation.component.html b/Frontend/src/app/components/organisms/background-animation/background-animation.component.html index e641045b..50f68e92 100644 --- a/Frontend/src/app/components/organisms/background-animation/background-animation.component.html +++ b/Frontend/src/app/components/organisms/background-animation/background-animation.component.html @@ -1,5 +1,5 @@ -
-
-
-
+
+
+
+
\ No newline at end of file diff --git a/Frontend/src/app/components/organisms/background-animation/background-animation.component.ts b/Frontend/src/app/components/organisms/background-animation/background-animation.component.ts index 28712ec1..882e5e93 100644 --- a/Frontend/src/app/components/organisms/background-animation/background-animation.component.ts +++ b/Frontend/src/app/components/organisms/background-animation/background-animation.component.ts @@ -1,4 +1,5 @@ import { Component, OnInit } from '@angular/core'; +import { MoodService } from '../../../services/mood-service.service'; @Component({ selector: 'app-background-animation', @@ -7,29 +8,11 @@ import { Component, OnInit } from '@angular/core'; templateUrl: './background-animation.component.html', styleUrls: ['./background-animation.component.css'] }) -export class BackgroundAnimationComponent implements OnInit { - ngOnInit(): void { - if (typeof document !== 'undefined') { - const blobs = document.querySelectorAll('.blob'); +export class BackgroundAnimationComponent { + backgroundMoodColorClasses!: { [key: string]: string }; - function changeBlobColor(color: string) { - blobs.forEach((blob) => { - (blob as HTMLElement).style.backgroundColor = color; - }); - } - - // Initial color - changeBlobColor('#FF6B6B'); - - // Tween to a new color after 8 seconds - setTimeout(() => { - changeBlobColor('#6A0572'); - }, 8000); - - // Optional: Further tween to another color after 16 seconds - setTimeout(() => { - changeBlobColor('#FEB692'); - }, 16000); - } + constructor(public moodService: MoodService) { + this.backgroundMoodColorClasses = moodService.getMoodColors(); } + } \ No newline at end of file From 59ade0d09f1dab39fdddfbba2c40e5f91c2ccb31 Mon Sep 17 00:00:00 2001 From: Rueben van der Westhuizen <91849806+21434809@users.noreply.github.com> Date: Tue, 3 Sep 2024 22:37:29 +0200 Subject: [PATCH 06/47] =?UTF-8?q?=F0=9F=93=90fixed=20echoing=20module?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../background-animation.component.html | 6 +- .../side-bar/side-bar.component.html | 56 ++++++++----------- .../organisms/side-bar/side-bar.component.ts | 6 +- .../song-cards/song-cards.component.html | 2 +- .../song-cards/song-cards.component.ts | 29 ++++------ .../src/app/services/mood-service.service.ts | 6 +- 6 files changed, 45 insertions(+), 60 deletions(-) diff --git a/Frontend/src/app/components/organisms/background-animation/background-animation.component.html b/Frontend/src/app/components/organisms/background-animation/background-animation.component.html index 50f68e92..8b2300b8 100644 --- a/Frontend/src/app/components/organisms/background-animation/background-animation.component.html +++ b/Frontend/src/app/components/organisms/background-animation/background-animation.component.html @@ -1,5 +1,5 @@
-
-
-
+
+
+
\ No newline at end of file diff --git a/Frontend/src/app/components/organisms/side-bar/side-bar.component.html b/Frontend/src/app/components/organisms/side-bar/side-bar.component.html index 8961ba8e..e8820140 100644 --- a/Frontend/src/app/components/organisms/side-bar/side-bar.component.html +++ b/Frontend/src/app/components/organisms/side-bar/side-bar.component.html @@ -1,35 +1,25 @@ -
-
-
-
-
-
-
- -
-
- -
-
-
-
- -
-
+
+
+
+
+
+ +
+
+ +
+
+
+
+
- - \ No newline at end of file diff --git a/Frontend/src/app/components/organisms/side-bar/side-bar.component.ts b/Frontend/src/app/components/organisms/side-bar/side-bar.component.ts index 411d8247..039b4527 100644 --- a/Frontend/src/app/components/organisms/side-bar/side-bar.component.ts +++ b/Frontend/src/app/components/organisms/side-bar/side-bar.component.ts @@ -42,7 +42,7 @@ export class SideBarComponent implements OnInit } title: string = "Home"; - selectedOption: string = "upNext"; + selectedOption: string = "recentListening"; upNextCardData: any[] = []; recentListeningCardData: any[] = []; @@ -198,9 +198,11 @@ export class SideBarComponent implements OnInit } return text; } - closeModal() { this.isEchoModalVisible = false; } + handleEchoTrack(eventData: { trackName: string, artistName: string, event: MouseEvent }) { + this.echoTrack(eventData.trackName, eventData.artistName, eventData.event); + } } diff --git a/Frontend/src/app/components/organisms/song-cards/song-cards.component.html b/Frontend/src/app/components/organisms/song-cards/song-cards.component.html index c522b0f1..d4062416 100644 --- a/Frontend/src/app/components/organisms/song-cards/song-cards.component.html +++ b/Frontend/src/app/components/organisms/song-cards/song-cards.component.html @@ -13,7 +13,7 @@

{{ card.secondaryText }}

- + diff --git a/Frontend/src/app/components/organisms/song-cards/song-cards.component.ts b/Frontend/src/app/components/organisms/song-cards/song-cards.component.ts index 73021396..252c135a 100644 --- a/Frontend/src/app/components/organisms/song-cards/song-cards.component.ts +++ b/Frontend/src/app/components/organisms/song-cards/song-cards.component.ts @@ -1,7 +1,6 @@ -import { Component, Input } from '@angular/core'; +import { Component, Input,EventEmitter, Output } from '@angular/core'; import { CommonModule } from '@angular/common'; import { ProviderService } from "../../../services/provider.service"; -import { SearchService } from "../../../services/search.service"; import { SpotifyService } from "../../../services/spotify.service"; @Component({ @@ -13,14 +12,19 @@ import { SpotifyService } from "../../../services/spotify.service"; }) export class SongCardsComponent { @Input() card: any; + @Output() echoTrackEvent = new EventEmitter<{ trackName: string, artistName: string, event: MouseEvent }>(); + echoTracks: any[] = []; isEchoModalVisible: boolean = false; constructor( - private providerService: ProviderService , - private searchService: SearchService , - private spotifyService: SpotifyService -) {} + private providerService: ProviderService , + private spotifyService: SpotifyService) {} + + onEchoButtonClick(event: MouseEvent) { + event.stopPropagation(); + this.echoTrackEvent.emit({ trackName: this.card.text, artistName: this.card.secondaryText, event }); + } async playTrack(trackId: string): Promise { if (this.providerService.getProviderName() === "spotify") @@ -29,16 +33,5 @@ constructor( } } - async echoTrack(trackName: string, artistName: string, event: MouseEvent): Promise - { - event.stopPropagation(); - this.searchService.echo(trackName, artistName).then(tracks => - { - this.echoTracks = tracks; - this.isEchoModalVisible = true; - }).catch(error => - { - console.error("Error echoing track: ", error); - }); - } + } diff --git a/Frontend/src/app/services/mood-service.service.ts b/Frontend/src/app/services/mood-service.service.ts index 31a3bf09..0b2bb337 100644 --- a/Frontend/src/app/services/mood-service.service.ts +++ b/Frontend/src/app/services/mood-service.service.ts @@ -40,7 +40,7 @@ export class MoodService { private _componentMoodClassesHover = { - Neutral: 'bg-default text-default-text hover:bg-default-dark focus:ring-default-dark fill-default font-semibold shadow-sm transition-colors duration-mood ease-in-out', + Neutral: 'bg-default text-default-text hover:bg-default-dark focus:ring-default-dark fill-default font-semibold shadow-sm transition-colors', Anger: 'bg-anger text-anger-text hover:bg-anger-dark focus:ring-anger-dark fill-anger-dark transition-colors duration-mood ease-in-out', Admiration: 'bg-admiration text-admiration-text hover:bg-admiration-dark focus:ring-admiration-dark hover:text-admiration fill-admiration-dark transition-colors duration-mood ease-in-out', Fear: 'bg-fear text-fear-text hover:bg-fear-dark focus:ring-fear-dark fill-fear-dark transition-colors duration-mood ease-in-out', @@ -71,7 +71,7 @@ export class MoodService { }; private _componentMoodClasses = { - Neutral: 'bg-default-component text-default-text focus:ring-default-dark fill-default transition-colors duration-mood ease-in-out', + Neutral: 'bg-default-component text-default-text focus:ring-default-dark fill-default transition-colors', Anger: 'bg-anger text-anger-text focus:ring-anger-dark fill-anger-dark transition-colors duration-mood ease-in-out', Admiration: 'bg-admiration text-admiration-text focus:ring-admiration-dark fill-admiration-dark transition-colors duration-mood ease-in-out', Fear: 'bg-fear text-fear-text focus:ring-fear-dark fill-fear-dark transition-colors duration-mood ease-in-out', @@ -105,7 +105,7 @@ export class MoodService { Admiration: 'bg-admiration-dark transition-colors duration-mood ease-in-out', Fear: 'bg-fear-dark transition-colors duration-mood ease-in-out', Joy: 'bg-joy-dark transition-colors duration-mood ease-in-out', - Neutral: 'bg-default-dark transition-colors duration-mood ease-in-out', + Neutral: 'bg-default-dark transition-colors ', Amusement: 'bg-amusement-dark transition-colors duration-mood ease-in-out', Annoyance: 'bg-annoyance-dark transition-colors duration-mood ease-in-out', Approval: 'bg-approval-dark transition-colors duration-mood ease-in-out', From 484c5bf061ac8509a95dc9973a92112cd4e76e61 Mon Sep 17 00:00:00 2001 From: Rueben van der Westhuizen <91849806+21434809@users.noreply.github.com> Date: Tue, 3 Sep 2024 22:37:45 +0200 Subject: [PATCH 07/47] =?UTF-8?q?=F0=9F=9A=80created=20skeletone=20song=20?= =?UTF-8?q?card?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../skeleton-song-card.component.css | 0 .../skeleton-song-card.component.html | 17 ++++++++++++++ .../skeleton-song-card.component.spec.ts | 23 +++++++++++++++++++ .../skeleton-song-card.component.ts | 12 ++++++++++ 4 files changed, 52 insertions(+) create mode 100644 Frontend/src/app/components/atoms/skeleton-song-card/skeleton-song-card.component.css create mode 100644 Frontend/src/app/components/atoms/skeleton-song-card/skeleton-song-card.component.html create mode 100644 Frontend/src/app/components/atoms/skeleton-song-card/skeleton-song-card.component.spec.ts create mode 100644 Frontend/src/app/components/atoms/skeleton-song-card/skeleton-song-card.component.ts diff --git a/Frontend/src/app/components/atoms/skeleton-song-card/skeleton-song-card.component.css b/Frontend/src/app/components/atoms/skeleton-song-card/skeleton-song-card.component.css new file mode 100644 index 00000000..e69de29b diff --git a/Frontend/src/app/components/atoms/skeleton-song-card/skeleton-song-card.component.html b/Frontend/src/app/components/atoms/skeleton-song-card/skeleton-song-card.component.html new file mode 100644 index 00000000..6a590e87 --- /dev/null +++ b/Frontend/src/app/components/atoms/skeleton-song-card/skeleton-song-card.component.html @@ -0,0 +1,17 @@ +
+ +
+
+
+ +
+ +
+
+
+
+ +
+
+
+
\ No newline at end of file diff --git a/Frontend/src/app/components/atoms/skeleton-song-card/skeleton-song-card.component.spec.ts b/Frontend/src/app/components/atoms/skeleton-song-card/skeleton-song-card.component.spec.ts new file mode 100644 index 00000000..fdf52bdf --- /dev/null +++ b/Frontend/src/app/components/atoms/skeleton-song-card/skeleton-song-card.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { SkeletonSongCardComponent } from './skeleton-song-card.component'; + +describe('SkeletonSongCardComponent', () => { + let component: SkeletonSongCardComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [SkeletonSongCardComponent] + }) + .compileComponents(); + + fixture = TestBed.createComponent(SkeletonSongCardComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/Frontend/src/app/components/atoms/skeleton-song-card/skeleton-song-card.component.ts b/Frontend/src/app/components/atoms/skeleton-song-card/skeleton-song-card.component.ts new file mode 100644 index 00000000..0f2e6749 --- /dev/null +++ b/Frontend/src/app/components/atoms/skeleton-song-card/skeleton-song-card.component.ts @@ -0,0 +1,12 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-skeleton-song-card', + standalone: true, + imports: [], + templateUrl: './skeleton-song-card.component.html', + styleUrl: './skeleton-song-card.component.css' +}) +export class SkeletonSongCardComponent { + +} From 9dc4126d7bce04bbd3bfeb495e844240f9704986 Mon Sep 17 00:00:00 2001 From: Rueben van der Westhuizen <91849806+21434809@users.noreply.github.com> Date: Tue, 3 Sep 2024 22:54:04 +0200 Subject: [PATCH 08/47] =?UTF-8?q?=F0=9F=8E=89added=20skeleton=20song=20car?= =?UTF-8?q?d?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../side-bar/side-bar.component.html | 15 ++- .../organisms/side-bar/side-bar.component.ts | 123 +++++++----------- 2 files changed, 58 insertions(+), 80 deletions(-) diff --git a/Frontend/src/app/components/organisms/side-bar/side-bar.component.html b/Frontend/src/app/components/organisms/side-bar/side-bar.component.html index e8820140..85ea5ec1 100644 --- a/Frontend/src/app/components/organisms/side-bar/side-bar.component.html +++ b/Frontend/src/app/components/organisms/side-bar/side-bar.component.html @@ -1,4 +1,4 @@ -
+
@@ -10,16 +10,21 @@
-
- -
+ +
+ +
+ + + +