Rainnny/rainnny.club
Rainnny/rainnny.club
1
0
Fork 0
Code Issues 1 Pull Requests 4 Actions Activity

Make it so you can click on the Spotify activity to view the track on Spotify
All checks were successful
Deploy Site / docker (ubuntu-latest, 2.44.0) (push) Successful in 58s
Details

Browse Source
This commit is contained in:
Braydon 2024-09-04 15:15:53 -04:00
parent b04586caf2
commit 68c9f0d8ec
1 changed files with 19 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
src/components/landing/discord-status.tsx
View File

@ -15,6 +15,7 @@ import { cn, truncateText } from "@/lib/utils";
import moment from "moment"; import moment from "moment";
import { PuzzlePieceIcon } from "@heroicons/react/24/outline"; import { PuzzlePieceIcon } from "@heroicons/react/24/outline";
import SimpleTooltip from "@/components/ui/simple-tooltip"; import SimpleTooltip from "@/components/ui/simple-tooltip";
import Link from "next/link";
const statusColors = { const statusColors = {
online: "bg-green-500", online: "bg-green-500",
@ -189,6 +190,7 @@ const Username = ({
); );
const SpotifyActivity = ({ spotify }: { spotify: Spotify }): ReactElement => { const SpotifyActivity = ({ spotify }: { spotify: Spotify }): ReactElement => {
const trackUrl: string = `https://open.spotify.com/track/${spotify.track_id}`;
const startTimestamp: number = spotify.timestamps.start; // Example start timestamp const startTimestamp: number = spotify.timestamps.start; // Example start timestamp
const endTimestamp: number = spotify.timestamps.end; // Example end timestamp const endTimestamp: number = spotify.timestamps.end; // Example end timestamp
const [songProgress, setSongProgress] = useState<string | undefined>(); const [songProgress, setSongProgress] = useState<string | undefined>();
@ -210,22 +212,26 @@ const SpotifyActivity = ({ spotify }: { spotify: Spotify }): ReactElement => {
<div className="flex items-start"> <div className="flex items-start">
<div className="flex gap-2 items-center"> <div className="flex gap-2 items-center">
{/* Artwork */} {/* Artwork */}
<Image <Link href={trackUrl} target="_blank">
className="rounded-lg" <Image
src={spotify.album_art_url as string} className="rounded-lg"
alt={`Track artwork of ${spotify.song} by ${spotify.artist}`} src={spotify.album_art_url as string}
width={54} alt={`Track artwork of ${spotify.song} by ${spotify.artist}`}
height={54} width={54}
/> height={54}
/>
</Link>
{/* Track Info */} {/* Track Info */}
<div className="flex flex-col text-sm"> <div className="flex flex-col text-sm">
<h1 className="font-bold leading-none"> <Link href={trackUrl} target="_blank">
{truncateText(spotify.song, 24)} <h1 className="font-bold leading-none">
</h1> {truncateText(spotify.song, 24)}
<h2 className="font-light opacity-70"> </h1>
{truncateText(spotify.artist.replace(";", ","), 26)} <h2 className="font-light opacity-70">
</h2> {truncateText(spotify.artist.replace(";", ","), 26)}
</h2>
</Link>
<p className="text-xs font-light opacity-70"> <p className="text-xs font-light opacity-70">
{songProgress} / {moment(songDuration).format("m:ss")} {songProgress} / {moment(songDuration).format("m:ss")}
</p> </p>