-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #361 from COS301-SE-2024/feat/updatedInsights
Feat/updated insights
- Loading branch information
Showing
7 changed files
with
199 additions
and
112 deletions.
There are no files selected for viewing
4 changes: 2 additions & 2 deletions
4
Frontend/src/app/components/organisms/bottom-player/bottom-player.component.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -48,3 +48,4 @@ | |
| /* Add any other properties that change on hover to be neutralized */ | ||
| } | ||
|
|
||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
20 changes: 10 additions & 10 deletions
20
Frontend/src/app/components/organisms/song-cards/song-cards.component.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,27 +1,27 @@ | ||
| <div [ngClass]="this.moodComponentClasses[this.moodService.getCurrentMood()]" class="flex items-center mb-5 hover:cursor-pointer bg-default-backgrounddark rounded-lg p-1 group" | ||
| <div class="bg-stone-950 flex items-center mb-5 hover:cursor-pointer bg-default-backgrounddark rounded-lg p-1 group" | ||
| (click)="playTrack(card.id)"> | ||
| <!-- Image on the left --> | ||
| <div class="mr-4 flex-shrink-0" [style.width]="imgSize"> | ||
| <img [src]="card?.imageUrl || 'path/to/default-image.jpg'" | ||
| alt="Card image" | ||
| class="w-1/4 rounded-lg mr-2.5 w-full h-auto" | ||
| [style.width]="imgSize" | ||
| <img [src]="card?.imageUrl || 'path/to/default-image.jpg'" | ||
| alt="Card image" | ||
| class="w-1/4 rounded-lg mr-2.5 w-full h-auto" | ||
| [style.width]="imgSize" | ||
| [style.height]="imgSize"> | ||
| </div> | ||
| <!-- Text on the right --> | ||
| <div class="flex-grow"> | ||
| <!-- First text with icon --> | ||
| <div class="flex items-center"> | ||
| <img *ngIf="card.explicit" src="../../../../assets/images/explicit-dark.png" alt="Explicit Icon" class="w-6 h-6 mr-2"> | ||
| <h1 class="font-weight: bold;">{{ card.text }}</h1> | ||
| <h1 class="font-weight: bold; text-white">{{ card.text }}</h1> | ||
| </div> | ||
| <!-- Second text (underneath the first text) --> | ||
| <p class="font-weight: bold;">{{ card.secondaryText }}</p> | ||
| <p class="font-weight: bold; text-white">{{ card.secondaryText }}</p> | ||
| </div> | ||
| <app-echo-button | ||
| [width]="svgSize" | ||
| [height]="svgSize" | ||
| [width]="svgSize" | ||
| [height]="svgSize" | ||
| (buttonClick)="onEchoButtonClick($event)" | ||
| class="opacity-0 group-hover:opacity-100 transition-opacity duration-300"> | ||
| </app-echo-button> | ||
| </div> | ||
| </div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,19 @@ | ||
| /* Custom Scrollbar Styling */ | ||
| #center::-webkit-scrollbar { | ||
| width: 12px; | ||
| } | ||
|
|
||
| #center::-webkit-scrollbar-track { | ||
| background: #3b3b3b; /* Dark background for the scrollbar track */ | ||
| border-radius: 10px; | ||
| } | ||
|
|
||
| #center::-webkit-scrollbar-thumb { | ||
| background-color: #7e7e7e; /* Thumb color */ | ||
| border-radius: 10px; | ||
| border: 3px solid #3b3b3b; /* Padding around the scrollbar thumb */ | ||
| } | ||
|
|
||
| #center::-webkit-scrollbar-thumb:hover { | ||
| background-color: #b0b0b0; /* Lighter color on hover */ | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,11 +1,57 @@ | ||
| <div class="w-full h-full"> | ||
| <canvas class="w-full h-full" id="MyChart"></canvas> | ||
| <button [ngClass]="moodComponentClasses[this.moodService.getCurrentMood()]" class="font-medium rounded-lg text-sm px-4 py-2.5 text-center" (click)="nextChartType()">Next</button> | ||
| </div> | ||
| <div id="center" class=" rounded-xl no-scrollbar border border-stone-950 overflow-y-scroll bg-stone-950 opacity-90 p-4" style="height: 72vh; width: 75vw;"> | ||
| <h1 class="text-3xl font-bold text-white text-center mb-6">Listening Insights</h1> | ||
|
|
||
| <!-- Widgets Grid --> | ||
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6 mb-8"> | ||
| <div class="bg-stone-900 shadow-lg rounded-lg p-6 text-center"> | ||
| <h2 class="text-2xl font-semibold text-white">Top Mood</h2> | ||
| <p class="text-xl text-gray-300">Joy</p> | ||
| </div> | ||
| <div class="bg-stone-900 shadow-lg rounded-lg p-6 text-center"> | ||
| <h2 class="text-2xl font-semibold text-white">Total Listening Time</h2> | ||
| <p class="text-xl text-gray-300">42 hrs</p> | ||
| </div> | ||
| <div class="bg-stone-900 shadow-lg rounded-lg p-6 text-center"> | ||
| <h2 class="text-2xl font-semibold text-white">Most Listened Artist</h2> | ||
| <p class="text-xl text-gray-300">The Weeknd</p> | ||
| </div> | ||
| <div class="bg-stone-900 shadow-lg rounded-lg p-6 text-center"> | ||
| <h2 class="text-2xl font-semibold text-white">Most Played Track</h2> | ||
| <p class="text-xl text-gray-300">Blinding Lights</p> | ||
| </div> | ||
| <div class="bg-stone-900 shadow-lg rounded-lg p-6 text-center"> | ||
| <h2 class="text-2xl font-semibold text-white">Top Genre</h2> | ||
| <p class="text-xl text-gray-300">Pop</p> | ||
| </div> | ||
| <div class="bg-stone-900 shadow-lg rounded-lg p-6 text-center"> | ||
| <h2 class="text-2xl font-semibold text-white">Average Song Duration</h2> | ||
| <p class="text-xl text-gray-300">3 min 45 sec</p> | ||
| </div> | ||
| <div class="bg-stone-900 shadow-lg rounded-lg p-6 text-center"> | ||
| <h2 class="text-2xl font-semibold text-white">Most Active Day</h2> | ||
| <p class="text-xl text-gray-300">Saturday</p> | ||
| </div> | ||
| <div class="bg-stone-900 shadow-lg rounded-lg p-6 text-center"> | ||
| <h2 class="text-2xl font-semibold text-white">Unique Artists Listened</h2> | ||
| <p class="text-xl text-gray-300">28</p> | ||
| </div> | ||
| </div> | ||
|
|
||
| <!-- Mood Distribution Chart --> | ||
| <div class="bg-stone-950 shadow-lg rounded-lg p-6 mb-8"> | ||
| <h2 class="text-2xl font-semibold text-white mb-4">Mood Distribution</h2> | ||
| <canvas id="MoodChart" class="w-full h-64"></canvas> | ||
| </div> | ||
|
|
||
| <!-- Listening by Service (Spotify/YouTube) --> | ||
| <div class="bg-stone-950 shadow-lg rounded-lg p-6 mb-8"> | ||
| <h2 class="text-2xl font-semibold text-white mb-4">Listening by Service</h2> | ||
| <canvas id="ServiceChart" class="w-full h-64"></canvas> | ||
| </div> | ||
|
|
||
| <!-- <div *ngIf="screenSize === 'mobile'" class="mobile-layout"> | ||
| <div [ngClass]="backgroundMoodClasses[this.moodService.getCurrentMood()]" class="min-h-screen grid grid-cols-5 grid-rows-6 gap-4 px-6 py-3 lg:px-8" style="overflow: auto;"> | ||
| <canvas class="left-1/2 top-1/2 pt-12" id="MyChart" ></canvas> | ||
| <!-- Top Genres Chart --> | ||
| <div class="bg-stone-950 shadow-lg rounded-lg p-6"> | ||
| <h2 class="text-2xl font-semibold text-white mb-4">Top Genres</h2> | ||
| <canvas id="GenreChart" class="w-full h-64"></canvas> | ||
| </div> | ||
| <button [ngClass]="moodComponentClasses[this.moodService.getCurrentMood()]" class="font-medium rounded-lg text-sm px-4 py-2.5 text-center" (click)="nextChartType()">Next</button> | ||
| </div> --> | ||
| </div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters