Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

📐 Fixed blank screen issue when deployed on develop #443

Merged
merged 2 commits into from
Oct 7, 2024
Merged

📐 Fixed blank screen issue when deployed on develop #443

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
054e8ac
:triangular_ruler: Removed Spotify init from artist profile page
Douglasj02 Oct 3, 2024
8569fe2
:triangular_ruler: Reverted changes to artist profile
Douglasj02 Oct 3, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
109 changes: 42 additions & 67 deletions Frontend/src/app/pages/artist-profile/artist-profile.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,73 +1,48 @@
<div *ngIf="screenSize === 'desktop'">
<div class="flex flex-col p-6 bg-gray-veryDark bg-opacity-50 rounded-lg max-w-screen-lg">
<!-- Artist Header Section with Image -->
<div class="relative w-full mb-10">
<app-back-button class="absolute left-0"></app-back-button>
<div class="text-5xl text-white font-bold text-center">{{ artist.name }}</div>
</div>

<!-- Artist Info Section (Image, Description, Genres) -->
<div class="flex items-start w-full mb-10 space-x-6">
<!-- Artist Image -->
<div class="w-56 flex-shrink-0">
<img [src]="artist.image" alt="{{ artist.name }}" class="w-full h-full object-cover rounded-lg shadow-md">
</div>

<!-- Artist Description and Genres -->
<div class="text-gray-verylight flex-grow">
<p class="mb-4">{{ artist.description }}</p>
<div class="text-lg font-semibold text-white">Genres: {{ artist.genres.join(', ') }}</div>
</div>
</div>
<div *ngIf="screenSize === 'desktop'" [ngClass]="moodComponentClasses[this.moodService.getCurrentMood()]">
<div class=" flex flex-col justify-center px-6 py-12 lg:px-8">
<div class="flex justify-center items-center">
<app-back-button></app-back-button>
<app-info-bar ></app-info-bar>

<!-- Top Songs Section -->
<div class="w-full text-gray-verylight mb-10">
<h2 class="text-2xl font-bold mb-4 text-pink">Top Songs</h2>
<div class="flex space-x-4 overflow-x-auto scrollable-cards overflow-hidden px-3">
<ng-container *ngFor="let song of artist.topSongs">
<div (click)="playSong(song)">
<app-top-card
[imageUrl]="getAlbumArt(song)"
[text]="song"
[secondaryText]="' '">
</app-top-card>
<div class="card-style bg-stone-950"></div>
</div>
</ng-container>
</div>
</div>
<div class="profile-container">
<div id="profile" class="profile fixed right-4 top-4 mt-5 mr-5 ml-6 h-5/6">
<mat-card class=" shadow-xl p-6 pl-24 pr-4 border border-gray-300 rounded-md h-full relative">
<mat-card-content [ngClass]="moodComponentClasses[this.moodService.getCurrentMood()]" class="bg-gradient-to-b rounded-lg overflow-auto h-full relative">
<div class="text-6xl text-pink mb-10 static">
Kendrick Lamar
</div>
<div class="text-gray-verylight mb-8">
<h2 class="text-lg font-bold mb-2">Songs</h2>
<div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 gap-4">
<div *ngFor="let song of artist.topSongs; let i = index" class="flex flex-col items-center">
<img [src]="getAlbumArt(song)" alt="Album Art" class="w-full h-full object-cover rounded-lg mb-2 aspect-square">
<p class="text-center text-sm text-gray-800 dark:text-white">{{ i + 1 }}. {{ song }}</p>
</div>
</div>
</div>

<!-- Albums Section -->
<div class="w-full text-gray-verylight mb-10">
<h2 class="text-2xl font-bold mb-4 text-pink">Albums</h2>
<div class="flex space-x-4 overflow-x-auto scrollable-cards overflow-hidden px-3">
<ng-container *ngFor="let album of artist.albums">
<div (click)="viewAlbum(album)">
<app-top-card
[imageUrl]="getAlbumArt(album)"
[text]="album"
[secondaryText]="''">
</app-top-card>
<div class="card-style bg-stone-950"></div>
</div>
</ng-container>
</div>
</div>
<div class="text-gray-verylight mb-8">
<h2 class="text-lg font-bold mb-2">Albums</h2>
<div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 gap-4">
<div *ngFor="let album of artist.albums; let i = index" class="flex flex-col items-center">
<img [src]="getAlbumArt(album)" alt="Album Art" class="w-full h-full object-cover rounded-lg mb-2 aspect-square">
<p class="text-center text-sm text-gray-800 dark:text-white">{{ i + 1 }}. {{ album }}</p>
</div>
</div>
</div>

<!-- Playlists Section -->
<div class="w-full text-gray-verylight mb-10">
<h2 class="text-2xl font-bold mb-4 text-pink">Playlists</h2>
<div class="flex space-x-4 overflow-x-auto scrollable-cards overflow-hidden px-3">
<ng-container *ngFor="let playlist of artist.playlists">
<div (click)="viewPlaylist(playlist)">
<app-top-card
[imageUrl]="getAlbumArt(playlist)"
[text]="playlist"
[secondaryText]="''">
</app-top-card>
<div class="card-style bg-stone-950"></div>
</div>
</ng-container>
<div class="text-gray-verylight mb-8">
<h2 class="text-lg font-bold mb-2">Playlists</h2>
<div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 gap-4">
<div *ngFor="let playlist of artist.playlists; let i = index" class="flex flex-col items-center">
<img [src]="getAlbumArt(playlist)" alt="Album Art" class="w-full h-full object-cover rounded-lg mb-2 aspect-square">
<p class="text-center text-sm text-gray-800 dark:text-white">{{ i + 1 }}. {{ playlist }}</p>
</div>
</div>
</div>
</mat-card-content>
</mat-card>
</div>
</div>
</div>
</div>
Expand Down
113 changes: 61 additions & 52 deletions Frontend/src/app/pages/artist-profile/artist-profile.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,31 +16,28 @@ import { SpotifyService } from "../../services/spotify.service";
import { InfoBarComponent } from '../../components/organisms/info-bar/info-bar.component';
import { MoodService } from '../../services/mood-service.service';
import { BackButtonComponent } from '../../components/atoms/back-button/back-button.component';
import { TopCardComponent } from '../../components/molecules/top-card/top-card.component';

@Component({
selector: 'app-artist-profile',
standalone: true,
imports: [
NavbarComponent,
NgIf,
SideBarComponent,
MatCard,
MatCardContent,
MatButtonModule,
MatIconModule,
NgForOf,
EditProfileModalComponent,
CommonModule,
InfoBarComponent,
NgClass,
BackButtonComponent,
TopCardComponent
],
templateUrl: './artist-profile.component.html',
styleUrl: './artist-profile.component.css',
selector: 'app-artist-profile',
standalone: true,
imports: [
NavbarComponent,
NgIf,
SideBarComponent,
MatCard,
MatCardContent,
MatButtonModule,
MatIconModule,
NgForOf,
EditProfileModalComponent,
CommonModule,
InfoBarComponent,
NgClass,
BackButtonComponent,
],
templateUrl: './artist-profile.component.html',
styleUrl: './artist-profile.component.css',
})

export class ArtistProfileComponent implements AfterViewInit {
imgpath: string = 'back.jpg';
screenSize?: string;
Expand All @@ -49,27 +46,28 @@ export class ArtistProfileComponent implements AfterViewInit {
backgroundMoodClasses!:{ [key: string]: string };

artist = {
name: 'Kendrick Lamar',
description: 'Kendrick Lamar is a Grammy-winning rapper and songwriter from Compton, California, known for his thought-provoking lyrics and storytelling. His albums, like Good Kid, M.A.A.D City, To Pimp a Butterfly, and DAMN., explore themes of identity, societal struggles, and personal growth. Widely regarded as one of the most influential voices in hip-hop, Kendricks music blends sharp social commentary with powerful narratives, earning him accolades like the Pulitzer Prize for Music.',
genres: ['Hip-Hop', 'Rap', 'Conscious Hip-Hop'],
image: './assets/images/kendrick.jpg',
topSongs: ['HUMBLE.', 'Swimming Pools (Drank)', 'Money Trees', 'Alright', 'DNA.'],
albums: ['Good Kid, M.A.A.D City', 'To Pimp a Butterfly', 'DAMN.', 'Mr. Morale & The Big Steppers'],
playlists: ['Kendrick Essentials', 'RapCaviar', 'Hip-Hop Hits', 'Workout Mix'],
name: 'Kendrick Lamar',
description: 'Kendrick Lamar, an influential figure in contemporary music, epitomizes artistic depth and cultural resonance. His discography navigates themes of identity, societal struggle, and personal introspection with poetic precision.',
genres: ['Hip-Hop', 'Rap', 'Conscious Hip-Hop'],
similarArtists: ['J. Cole', 'Drake', 'Kanye West'],
topSongs: ['HUMBLE.', 'Swimming Pools (Drank)', 'Money Trees', 'Alright', 'DNA.'],
albums: ['Good Kid, M.A.A.D City', 'To Pimp a Butterfly', 'DAMN.', 'Mr. Morale & The Big Steppers'],
features: ['Goosebumps (with Travis Scott)', 'Control (with Big Sean)', 'Collard Greens (with ScHoolboy Q)', 'Pray for Me (with The Weeknd)'],
playlists: ['Kendrick Essentials', 'RapCaviar', 'Hip-Hop Hits', 'Workout Mix'],
};

username: string = '';

constructor(
private authService: AuthService,
private router: Router,
protected dialog: MatDialog,
private screenSizeService: ScreenSizeService,
private spotifyService: SpotifyService,
public moodService: MoodService,
private authService: AuthService,
private router: Router,
protected dialog: MatDialog,
private screenSizeService: ScreenSizeService,
private spotifyService: SpotifyService,
public moodService: MoodService,
) {
this.currentMood = this.moodService.getCurrentMood();
this.moodComponentClasses = this.moodService.getComponentMoodClasses();
this.currentMood = this.moodService.getCurrentMood();
this.moodComponentClasses = this.moodService.getComponentMoodClasses();
}

ngAfterViewInit(): void {
Expand All @@ -78,7 +76,6 @@ export class ArtistProfileComponent implements AfterViewInit {
this.imgpath = res.user.user_metadata.picture;
});
}

async ngOnInit() {
this.screenSizeService.screenSize$.subscribe(screenSize => {
this.screenSize = screenSize;
Expand All @@ -88,23 +85,35 @@ export class ArtistProfileComponent implements AfterViewInit {
}
}

getAlbumArt(item: string): string {
// Placeholder function to return a default album art
return '../assets/images/damn.jpeg';
onNavChange($event: string) {}

openDialog(): void {
const dialogRef = this.dialog.open(EditProfileModalComponent, {
width: '250px',
});

dialogRef.afterClosed().subscribe((result) => {
console.log('The dialog was closed');
});


}

playSong(song: string): void {
// Logic to play the selected song
console.log(`Playing song: ${song}`);
save() {
if (localStorage.getItem('path') !== null) {
// @ts-ignore
this.imgpath = localStorage.getItem('path');
}
}

viewAlbum(album: string): void {
// Logic to view the selected album
console.log(`Viewing album: ${album}`);

refresh() {
this.authService.currentUser().subscribe((res) => {
this.username = res.user.user_metadata.username;
});
}
viewPlaylist(playlist: string): void {
// Logic to view the selected playlist
console.log(`Viewing playlist: ${playlist}`);

getAlbumArt(song: string): string {
// Placeholder function to return a default album art
return '../assets/images/damn.jpeg';
}
}
Loading