Compare commits

..

No commits in common. "62556d21542c1732b5d01337da9df74e85522b8a" and "15b038cd789e6ea79ad00047f5c4415b416016a3" have entirely different histories.

2 changed files with 17 additions and 15 deletions

View File

@ -205,21 +205,28 @@ function TweetSkeleton ({ className }) {
) )
} }
export const NostrEmbed = memo(function NostrEmbed ({ src, className, topLevel, id }) { export const useFrameHeight = (
const [show, setShow] = useState(false) iframeRef
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 || e.source !== iframeRef.current.contentWindow) return if (e.origin !== 'https://njump.me' || !e?.data?.height) return
iframeRef.current.height = `${e.data.height}px` setHeight(e.data.height)
} }
window?.addEventListener('message', setHeightFromIframe) window?.addEventListener('message', setHeightFromIframe)
return () => { return () => {
window?.removeEventListener('message', setHeightFromIframe) window?.removeEventListener('message', setHeightFromIframe)
} }
}, [iframeRef.current]) }, [iframeCurrent])
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
@ -227,9 +234,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={iframeRef.current?.height || (topLevel ? '200px' : '150px')} height={frameHeight ? `${frameHeight}px` : topLevel ? '200px' : '150px'}
frameBorder='0' frameBorder='0'
sandbox='allow-scripts allow-same-origin allow-popups' sandbox='allow-scripts allow-same-origin'
allow='' allow=''
/> />
{!show && {!show &&

View File

@ -122,10 +122,5 @@
"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"
}
} }
} }