diff --git a/index.html b/index.html index 48c0ec1..f5ed86f 100644 --- a/index.html +++ b/index.html @@ -2588,6 +2588,7 @@

+
`; + this.api.getArtistSocials(artist.name).then((links) => { + if (socialsEl && links.length > 0) { + socialsEl.innerHTML = links.map((link) => this.createSocialLinkHTML(link)).join(''); + } + }); + this.renderListWithTracks(tracksContainer, artist.tracks, true); // Update header like button @@ -3238,7 +3255,6 @@ export class UIRenderer { artistLikeBtn.classList.toggle('active', isLiked); } - albumsContainer.innerHTML = artist.albums.map((album) => this.createAlbumCardHTML(album)).join(''); // Render Albums albumsContainer.innerHTML = artist.albums.length ? artist.albums.map((album) => this.createAlbumCardHTML(album)).join('') @@ -3373,6 +3389,41 @@ export class UIRenderer { } } + createSocialLinkHTML(link) { + const url = link.url; + + if (url.includes('tidal.com')) return ''; + if (url.includes('qobuz.com')) return ''; + + let icon = SVG_GLOBE; + let title = 'Website'; + + if (url.includes('twitter.com') || url.includes('x.com')) { + icon = SVG_TWITTER; + title = 'Twitter'; + } else if (url.includes('instagram.com')) { + icon = SVG_INSTAGRAM; + title = 'Instagram'; + } else if (url.includes('facebook.com')) { + icon = SVG_FACEBOOK; + title = 'Facebook'; + } else if (url.includes('youtube.com')) { + icon = SVG_YOUTUBE; + title = 'YouTube'; + } else if (url.includes('spotify.com') || url.includes('open.spotify.com')) { + icon = SVG_LINK; + title = 'Spotify'; + } else if (url.includes('soundcloud.com')) { + icon = SVG_SOUNDCLOUD; + title = 'SoundCloud'; + } else if (url.includes('apple.com')) { + icon = SVG_APPLE; + title = 'Apple Music'; + } + + return `${icon}`; + } + async renderRecentPage() { this.showPage('recent'); const container = document.getElementById('recent-tracks-container'); diff --git a/styles.css b/styles.css index 7f2b73a..aba77d4 100644 --- a/styles.css +++ b/styles.css @@ -2376,6 +2376,36 @@ input[type='search']::-webkit-search-cancel-button { color: var(--foreground); } +.artist-socials { + display: flex; + gap: 0.75rem; + margin-top: 0.75rem; + flex-wrap: wrap; +} + +.social-link { + display: flex; + align-items: center; + justify-content: center; + width: 32px; + height: 32px; + border-radius: var(--radius-full); + background-color: var(--secondary); + color: var(--muted-foreground); + transition: all var(--transition-fast); +} + +.social-link:hover { + background-color: var(--highlight); + color: var(--background); + transform: translateY(-2px); +} + +.social-link svg { + width: 18px; + height: 18px; +} + .bio-link { color: var(--highlight) !important; text-decoration: underline !important;