internal corporate restructuring

src/components/windows/mainWindow/Me.tsx

@@ -0,0 +1,161 @@
+import "@css/me.css";
+import { initLanyard } from "@js/lanyard/lanyard";
+import { type LanyardPresence } from "../../../js/lanyard/types";
+import { useEffect, useState } from "react";
+
+export default function Me() {
+	// me-e-eeeee
+	const [presence, setPresence] = useState<LanyardPresence | undefined>();
+	const [currentlyPlaying, setCurrentlyPlaying] = useState<
+		| {
+				title: string;
+				artist: string;
+				album: string;
+				albumArt: string;
+				loved: boolean;
+				streak: number;
+		  }
+		| undefined
+	>();
+
+	useEffect(() => {
+		initLanyard(presence => {
+			console.log(presence);
+			setPresence(presence);
+		});
+
+		async function getLastFmTracks() {
+			const params = new URLSearchParams({
+				method: "user.getrecenttracks",
+				api_key: "3c5623fa1abbd11c49f53ca18e992ead",
+				user: "nin0dev",
+				limit: "50",
+				format: "json",
+				extended: "true"
+			});
+
+			const res = await (
+				await fetch(`https://ws.audioscrobbler.com/2.0/?${params}`)
+			).json();
+
+			if (
+				res.recenttracks.track.some(t => {
+					try {
+						return t["@attr"].nowplaying === "true";
+					} catch (e) {
+						return false;
+					}
+				})
+			) {
+				const currentlyPlayingTrack = res.recenttracks.track[0];
+				setCurrentlyPlaying({
+					title: currentlyPlayingTrack.name,
+					artist: currentlyPlayingTrack.artist.name,
+					album: currentlyPlayingTrack.album["#text"],
+					albumArt: currentlyPlayingTrack.image[1]["#text"],
+					loved: currentlyPlayingTrack.loved === "1",
+					streak: (() => {
+						let current = 0;
+						for (const track of res.recenttracks.track) {
+							if (track.name === currentlyPlayingTrack.name)
+								current++;
+							else return current;
+						}
+					})()
+				});
+			} else {
+				setCurrentlyPlaying(undefined);
+			}
+		}
+
+		getLastFmTracks();
+		setInterval(getLastFmTracks, 10000);
+	}, []);
+
+	return (
+		<>
+			<div className="me-container">
+				<img src="logo.png" alt="the nin0 logo" />
+				<h3>
+					nin0 <span style={{ fontSize: "0.9rem" }}>(he/him)</span>
+				</h3>
+			</div>
+
+			{currentlyPlaying && (
+				<div className="spotify-card">
+					<h3>Listening to</h3>
+					<div
+						className="spotify-card-background"
+						style={{
+							backgroundImage: `url(${currentlyPlaying.albumArt})`
+						}}
+					></div>
+					<div
+						className="spotify-card-content"
+						style={{
+							display: "flex",
+							alignItems: "center",
+							marginBottom: "10px"
+						}}
+					>
+						<img
+							src={currentlyPlaying.albumArt}
+							style={{
+								marginRight: "10px",
+								width: "50px",
+								borderRadius: "5px"
+							}}
+						/>
+						<div>
+							<p style={{ margin: "0", fontWeight: "600" }}>
+								{currentlyPlaying.title}
+							</p>
+							<p style={{ margin: "0" }}>
+								<span className="prefix">by </span>
+								{currentlyPlaying.artist}
+							</p>
+							<p style={{ margin: "0" }}>
+								<span className="prefix">on </span>
+								{currentlyPlaying.album}
+							</p>
+						</div>
+					</div>
+					<p style={{ fontSize: "0.9rem" }} className="emoji">
+						{(() => {
+							const flags: {
+								color: string;
+								data: string;
+							}[] = [];
+							if (currentlyPlaying.loved)
+								flags.push({
+									color: "#f38ba8",
+									data: "💞 Loved track"
+								});
+							if (currentlyPlaying.streak > 1) {
+								flags.push({
+									color: "#f9e2af",
+									data: `⚡ Played ${currentlyPlaying.streak} times in a row`
+								});
+							}
+							return flags.map(flag => (
+								<span
+									style={{ color: flag.color }}
+									className="emoji"
+									key={flag.color}
+								>
+									{flag.data}{" "}
+									{flags.indexOf(flag) !==
+										flags.length - 1 && (
+										<span style={{ color: "white" }}>
+											{"  "}•{"  "}
+										</span>
+									)}
+								</span>
+							));
+						})()}
+					</p>
+				</div>
+			)}
+		</>
+	);
+}