You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
51 lines
1.4 KiB
51 lines
1.4 KiB
import { spotifyOpenUrlToEmbedSrc } from '@/lib/spotify-url' |
|
import { cn } from '@/lib/utils' |
|
import { useContentPolicyOptional } from '@/providers/ContentPolicyProvider' |
|
import { useLayoutEffect, useMemo, useState } from 'react' |
|
import ExternalLink from '../ExternalLink' |
|
import LazyMediaTapPlaceholder from '../MediaPlayer/LazyMediaTapPlaceholder' |
|
|
|
export default function SpotifyEmbeddedPlayer({ |
|
url, |
|
className, |
|
mustLoad = false |
|
}: { |
|
url: string |
|
className?: string |
|
mustLoad?: boolean |
|
}) { |
|
const contentPolicy = useContentPolicyOptional() |
|
const autoLoadMedia = contentPolicy?.autoLoadMedia ?? true |
|
const [userClickedLoad, setUserClickedLoad] = useState(false) |
|
const embedSrc = useMemo(() => spotifyOpenUrlToEmbedSrc(url), [url]) |
|
const showEmbed = mustLoad || autoLoadMedia || userClickedLoad |
|
|
|
useLayoutEffect(() => { |
|
if (!autoLoadMedia) setUserClickedLoad(false) |
|
}, [autoLoadMedia]) |
|
|
|
if (!embedSrc) { |
|
return <ExternalLink url={url} /> |
|
} |
|
|
|
if (!mustLoad && !showEmbed) { |
|
return ( |
|
<LazyMediaTapPlaceholder |
|
src={url} |
|
mediaKind="audio" |
|
onActivate={() => setUserClickedLoad(true)} |
|
className={cn('min-h-[152px]', className)} |
|
/> |
|
) |
|
} |
|
|
|
return ( |
|
<iframe |
|
title="Spotify" |
|
src={embedSrc} |
|
className={cn('rounded-lg border w-full max-w-[400px] min-h-[152px]', className)} |
|
allow="encrypted-media; clipboard-write" |
|
loading="lazy" |
|
/> |
|
) |
|
}
|
|
|