Compare commits

...

2 Commits

Author SHA1 Message Date
k00b 62556d2154 fix multiple nostr embed race and link clicks 2024-09-07 19:45:37 -05:00
ekzyis 597d1087f6
Fix jest module resolution (#1372) 2024-09-07 12:45:17 -05:00
2 changed files with 15 additions and 17 deletions

View File

@ -205,28 +205,21 @@ function TweetSkeleton ({ className }) {
) )
} }
export const useFrameHeight = ( export const NostrEmbed = memo(function NostrEmbed ({ src, className, topLevel, id }) {
iframeRef const [show, setShow] = useState(false)
) => { const iframeRef = useRef(null)
const [height, setHeight] = useState(0)
const iframeCurrent = iframeRef.current
useEffect(() => { useEffect(() => {
const setHeightFromIframe = (e) => { const setHeightFromIframe = (e) => {
if (e.origin !== 'https://njump.me' || !e?.data?.height) return if (e.origin !== 'https://njump.me' || !e?.data?.height || e.source !== iframeRef.current.contentWindow) return
setHeight(e.data.height) iframeRef.current.height = `${e.data.height}px`
} }
window?.addEventListener('message', setHeightFromIframe) window?.addEventListener('message', setHeightFromIframe)
return () => { return () => {
window?.removeEventListener('message', setHeightFromIframe) window?.removeEventListener('message', setHeightFromIframe)
} }
}, [iframeCurrent]) }, [iframeRef.current])
return height
}
export const NostrEmbed = memo(function NostrEmbed ({ src, className, topLevel, id }) {
const [show, setShow] = useState(false)
const iframeRef = useRef(null)
const frameHeight = useFrameHeight(iframeRef)
return ( return (
<div className={classNames(styles.nostrContainer, !show && styles.twitterContained, className)}> <div className={classNames(styles.nostrContainer, !show && styles.twitterContained, className)}>
<iframe <iframe
@ -234,9 +227,9 @@ export const NostrEmbed = memo(function NostrEmbed ({ src, className, topLevel,
src={`https://njump.me/${id}?embed=yes`} src={`https://njump.me/${id}?embed=yes`}
width={topLevel ? '550px' : '350px'} width={topLevel ? '550px' : '350px'}
style={{ maxWidth: '100%' }} style={{ maxWidth: '100%' }}
height={frameHeight ? `${frameHeight}px` : topLevel ? '200px' : '150px'} height={iframeRef.current?.height || (topLevel ? '200px' : '150px')}
frameBorder='0' frameBorder='0'
sandbox='allow-scripts allow-same-origin' sandbox='allow-scripts allow-same-origin allow-popups'
allow='' allow=''
/> />
{!show && {!show &&

View File

@ -122,5 +122,10 @@
"eslint": "^8.51.0", "eslint": "^8.51.0",
"jest": "^29.7.0", "jest": "^29.7.0",
"standard": "^17.1.0" "standard": "^17.1.0"
},
"jest": {
"moduleNameMapper": {
"@/(.*)": "<rootDir>/$1"
}
} }
} }