diff --git a/components/media-or-link.js b/components/media-or-link.js
index 6a42e907..d45baff8 100644
--- a/components/media-or-link.js
+++ b/components/media-or-link.js
@@ -210,11 +210,18 @@ export const NostrEmbed = memo(function NostrEmbed ({ src, className, topLevel,
const iframeRef = useRef(null)
useEffect(() => {
+ if (!iframeRef.current) return
+
const setHeightFromIframe = (e) => {
if (e.origin !== 'https://njump.me' || !e?.data?.height || e.source !== iframeRef.current.contentWindow) return
iframeRef.current.height = `${e.data.height}px`
}
+
window?.addEventListener('message', setHeightFromIframe)
+
+ // https://github.com/vercel/next.js/issues/39451
+ iframeRef.current.src = `https://njump.me/${id}?embed=yes`
+
return () => {
window?.removeEventListener('message', setHeightFromIframe)
}
@@ -224,12 +231,11 @@ export const NostrEmbed = memo(function NostrEmbed ({ src, className, topLevel,
{!show &&
@@ -241,6 +247,49 @@ export const NostrEmbed = memo(function NostrEmbed ({ src, className, topLevel,
)
})
+const SpotifyEmbed = function SpotifyEmbed ({ src, className }) {
+ const iframeRef = useRef(null)
+
+ // https://open.spotify.com/track/1KFxcj3MZrpBGiGA8ZWriv?si=f024c3aa52294aa1
+ // Remove any additional path segments
+ const url = new URL(src)
+ url.pathname = url.pathname.replace(/\/intl-\w+\//, '/')
+
+ useEffect(() => {
+ if (!iframeRef.current) return
+
+ const id = url.pathname.split('/').pop()
+
+ // https://developer.spotify.com/documentation/embeds/tutorials/using-the-iframe-api
+ window.onSpotifyIframeApiReady = (IFrameAPI) => {
+ const options = {
+ uri: `spotify:episode:${id}`
+ }
+ const callback = (EmbedController) => {}
+ IFrameAPI.createController(iframeRef.current, options, callback)
+ }
+
+ return () => { window.onSpotifyIframeApiReady = null }
+ }, [iframeRef.current, url.pathname])
+
+ return (
+
+
+
+ )
+}
+
export const Embed = memo(function Embed ({ src, provider, id, meta, className, topLevel, onError }) {
const [darkMode] = useDarkMode()
const [overflowing, setOverflowing] = useState(true)
@@ -277,31 +326,15 @@ export const Embed = memo(function Embed ({ src, provider, id, meta, className,
)
}
if (provider === 'spotify') {
- // https://open.spotify.com/track/1KFxcj3MZrpBGiGA8ZWriv?si=f024c3aa52294aa1
- // Remove any additional path segments
- const url = new URL(src)
- url.pathname = url.pathname.replace(/\/intl-\w+\//, '/')
return (
-