diff --git a/src/components/Message/InlineMedia.tsx b/src/components/Message/InlineMedia.tsx index b41b270a8..641a9b936 100644 --- a/src/components/Message/InlineMedia.tsx +++ b/src/components/Message/InlineMedia.tsx @@ -17,28 +17,59 @@ interface InlineFileProps { 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) => { const containerRef = useRef(null) const [didRenderingMediaFail, setDidRenderingMediaFail] = useState(false) + const [isMediaSupported, setIsMediaSupported] = useState(true) const shellContext = useContext(ShellContext) useEffect(() => { - ;(async () => { - const { current: container } = containerRef + const { current: container } = containerRef - if (!container) return + if (!container) return - try { - file.appendTo(container) - } catch (e) { - console.error(e) - setDidRenderingMediaFail(true) - } - })() + const { name } = file + const fileNameExtension = name.split('.').pop() ?? '' + + if (!supportedMediaExtensions.includes(`.${fileNameExtension}`)) { + setIsMediaSupported(false) + return + } + + try { + file.appendTo(container) + } catch (e) { + console.error(e) + setDidRenderingMediaFail(true) + } }, [file, containerRef, shellContext.roomId]) return ( + {!isMediaSupported && ( + + Media preview not supported + + )} {didRenderingMediaFail && ( Media failed to render