starred/archived-linsa
1
0
Fork 0
mirror of https://github.com/linsa-io/linsa.git synced 2026-01-12 12:20:23 +01:00
Code Issues 2 Packages Projects Releases Wiki Activity

Fix Spotify now playing text and link rendering in StreamPage component

Browse Source
This commit is contained in:
Nikita
2025-12-23 14:16:48 -08:00
parent 15b92cc16b
commit 937f13581e
1 changed files with 18 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

77
packages/web/src/routes/$username.tsx
View File

@@ -241,8 +241,10 @@ function StreamPage() {
const nowPlayingArtists = nowPlayingTrack?.artists.length const nowPlayingArtists = nowPlayingTrack?.artists.length
? nowPlayingTrack.artists.join(", ") ? nowPlayingTrack.artists.join(", ")
: null : null
const nowPlayingEmbedUrl = nowPlayingTrack?.id const nowPlayingText = nowPlayingTrack
? `https://open.spotify.com/embed/${nowPlayingTrack.type}/${nowPlayingTrack.id}?utm_source=linsa&theme=0` ? nowPlayingArtists
? `${nowPlayingArtists} — ${nowPlayingTrack.title}`
: nowPlayingTrack.title
: null : null
return ( return (
@@ -318,74 +320,31 @@ function StreamPage() {
<p className="mt-6 text-3xl font-semibold"> <p className="mt-6 text-3xl font-semibold">
Not live right now Not live right now
</p> </p>
<div className="mt-6 text-lg text-neutral-300">
<div className="mt-8 w-full rounded-2xl border border-white/10 bg-neutral-900/60 p-6 shadow-[0_0_40px_rgba(0,0,0,0.45)]">
<p className="text-xs uppercase tracking-[0.3em] text-neutral-400">
{nowPlaying?.isPlaying ? "Currently playing" : "Spotify"}
</p>
{nowPlayingLoading ? ( {nowPlayingLoading ? (
<p className="mt-4 text-neutral-400">Checking Spotify...</p> <span>Checking Spotify...</span>
) : nowPlaying?.isPlaying && nowPlayingTrack ? ( ) : nowPlaying?.isPlaying && nowPlayingTrack ? (
<div className="mt-4 flex flex-col gap-4"> <span>
<div className="flex flex-col items-center gap-4 sm:flex-row sm:items-center sm:text-left"> Currently playing{" "}
{nowPlayingTrack.imageUrl ? (
<img
src={nowPlayingTrack.imageUrl}
alt="Spotify cover art"
className="h-20 w-20 rounded-lg object-cover"
/>
) : (
<div className="h-20 w-20 rounded-lg bg-neutral-800" />
)}
<div>
<p className="text-2xl font-semibold">
{nowPlayingTrack.title}
</p>
{nowPlayingArtists ? (
<p className="text-neutral-400">
{nowPlayingArtists}
</p>
) : null}
{nowPlayingTrack.album ? (
<p className="text-sm text-neutral-500">
{nowPlayingTrack.album}
</p>
) : null}
</div>
</div>
{nowPlayingEmbedUrl ? (
<iframe
src={nowPlayingEmbedUrl}
title="Spotify player"
width="100%"
height="152"
allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture"
loading="lazy"
className="rounded-xl border border-white/10"
/>
) : null}
{nowPlayingTrack.url ? ( {nowPlayingTrack.url ? (
<a <a
href={nowPlayingTrack.url} href={nowPlayingTrack.url}
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
className="text-sm uppercase tracking-[0.2em] text-neutral-300 hover:text-white transition-colors" className="text-white hover:text-neutral-300 transition-colors"
> >
Open in Spotify {nowPlayingText ?? "Spotify"}
</a> </a>
) : null} ) : (
</div> <span className="text-white">
{nowPlayingText ?? "Spotify"}
</span>
)}
</span>
) : nowPlayingError ? ( ) : nowPlayingError ? (
<p className="mt-4 text-neutral-400"> <span>Spotify status unavailable right now.</span>
Spotify status unavailable right now.
</p>
) : ( ) : (
<p className="mt-4 text-neutral-400"> <span>Not playing anything right now.</span>
Not playing anything right now.
</p>
)} )}
</div> </div>