Spotify.astro

---
export interface Props {
	id: string;
	dark?: boolean;
	compact?: boolean;
	widthPercent?: number;
}
const { id, dark = false, compact = false, widthPercent = 100 } = Astro.props;

// values based on Spotify embed generator
const height = compact ? 152 : 352;
const theme = dark ? 0 : 1;

const { pathname } = new URL(id);
let [type, ...params] = pathname.split('/').filter(Boolean);
type = type === 'user' ? 'playlist' : type;
const playlistId = params.slice(-1);

const embedUrl = `https://open.spotify.com/embed/${type}/${playlistId}?theme=${theme}`;
---

<iframe
	title=`Spotify ${type} Embed`
	style="border-radius:12px"
	src={embedUrl}
	width=`${widthPercent}%`
	height=`${height}`
	frameBorder="0"
	allowfullscreen=""
	allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture"
	loading="lazy"></iframe>