68 lines
2.3 KiB
TypeScript
68 lines
2.3 KiB
TypeScript
import { useEffect, useState } from "react";
|
|
import { Music } from "lucide-react";
|
|
|
|
interface SpotifyConsentPlayerProps {
|
|
playlist: string;
|
|
title: string;
|
|
accentColor?: string;
|
|
}
|
|
|
|
function normalizePlaylistId(value: string): string | null {
|
|
const trimmed = value.trim();
|
|
const urlMatch = trimmed.match(/open\.spotify\.com\/playlist\/([a-zA-Z0-9]+)/);
|
|
const candidate = urlMatch?.[1] || trimmed;
|
|
return /^[a-zA-Z0-9]+$/.test(candidate) ? candidate : null;
|
|
}
|
|
|
|
export default function SpotifyConsentPlayer({ playlist, title, accentColor = "#34d399" }: SpotifyConsentPlayerProps) {
|
|
const [isLoaded, setIsLoaded] = useState(false);
|
|
const playlistId = normalizePlaylistId(playlist);
|
|
|
|
useEffect(() => {
|
|
setIsLoaded(false);
|
|
}, [playlist]);
|
|
|
|
if (!playlistId) return null;
|
|
|
|
if (isLoaded) {
|
|
return (
|
|
<div className="space-y-2">
|
|
<iframe
|
|
title={title}
|
|
src={`https://open.spotify.com/embed/playlist/${playlistId}?utm_source=generator&theme=0`}
|
|
width="100%"
|
|
height="152"
|
|
allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture"
|
|
loading="lazy"
|
|
className="rounded-xl border-0"
|
|
/>
|
|
<button
|
|
type="button"
|
|
onClick={() => setIsLoaded(false)}
|
|
className="text-[10px] text-slate-500 underline underline-offset-2 hover:text-slate-300 cursor-pointer"
|
|
>
|
|
Spotify-Player wieder deaktivieren
|
|
</button>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="rounded-xl border border-white/10 bg-black/20 p-4 space-y-3">
|
|
<div className="flex items-center gap-2 text-xs font-semibold uppercase tracking-wider" style={{ color: accentColor }}>
|
|
<Music className="h-4 w-4" />
|
|
<span>Spotify-Playlist</span>
|
|
</div>
|
|
<p className="text-xs leading-relaxed text-slate-400">
|
|
Der Player wird erst nach Ihrer Zustimmung von Spotify geladen. Dabei wird eine Verbindung zu Spotify hergestellt.
|
|
</p>
|
|
<button
|
|
type="button"
|
|
onClick={() => setIsLoaded(true)}
|
|
className="rounded-lg border border-white/15 bg-white/10 px-4 py-2 text-xs font-semibold text-white hover:bg-white/15 transition-colors cursor-pointer"
|
|
>
|
|
Spotify-Player laden
|
|
</button>
|
|
</div>
|
|
);
|
|
}
|