fix(media): [closes #311] don't attempt to render unsupported media

This commit is contained in:
Jeremy Kahn 2024-06-08 11:20:07 -05:00
parent da529efb1c
commit 56dbbf2665

View File

@ -17,28 +17,59 @@ interface InlineFileProps {
file: TorrentFile file: TorrentFile
} }
// NOTE: These filename extensions are copied from render-media, the upstream
// library used to embed media files:
// https://github.com/feross/render-media/blob/a445b2ab90fcd4a248552d32027b2bc6a02600c8/index.js#L15-L72
const supportedImageExtensions = [
'.bmp',
'.gif',
'.jpeg',
'.jpg',
'.png',
'.svg',
]
const supportedAudioExtensions = ['.aac', '.oga', '.ogg', '.wav', '.flac']
const supportedMediaExtensions = [
...supportedImageExtensions,
...supportedAudioExtensions,
]
export const InlineFile = ({ file }: InlineFileProps) => { export const InlineFile = ({ file }: InlineFileProps) => {
const containerRef = useRef(null) const containerRef = useRef(null)
const [didRenderingMediaFail, setDidRenderingMediaFail] = useState(false) const [didRenderingMediaFail, setDidRenderingMediaFail] = useState(false)
const [isMediaSupported, setIsMediaSupported] = useState(true)
const shellContext = useContext(ShellContext) const shellContext = useContext(ShellContext)
useEffect(() => { useEffect(() => {
;(async () => { const { current: container } = containerRef
const { current: container } = containerRef
if (!container) return if (!container) return
try { const { name } = file
file.appendTo(container) const fileNameExtension = name.split('.').pop() ?? ''
} catch (e) {
console.error(e) if (!supportedMediaExtensions.includes(`.${fileNameExtension}`)) {
setDidRenderingMediaFail(true) setIsMediaSupported(false)
} return
})() }
try {
file.appendTo(container)
} catch (e) {
console.error(e)
setDidRenderingMediaFail(true)
}
}, [file, containerRef, shellContext.roomId]) }, [file, containerRef, shellContext.roomId])
return ( return (
<Box ref={containerRef} sx={{ '& img': { maxWidth: '100%' } }}> <Box ref={containerRef} sx={{ '& img': { maxWidth: '100%' } }}>
{!isMediaSupported && (
<Typography sx={{ fontStyle: 'italic' }}>
Media preview not supported
</Typography>
)}
{didRenderingMediaFail && ( {didRenderingMediaFail && (
<Typography sx={{ fontStyle: 'italic' }}> <Typography sx={{ fontStyle: 'italic' }}>
Media failed to render Media failed to render