const Youtube = props => { const { link, rest } = props const src = link.match(/\?v=(.*)/)[1] return ( <iframe width='285' height='160' src={`https://www.youtube.com/embed/${src}`} frameBorder='0' allow='accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture' allowFullScreen {...rest} /> ) } const Spotify = props => { const { link, rest } = props const src = link.match(/track\/(.*)/)[1] return ( <iframe src={`https://open.spotify.com/embed/track/${src}`} width='300' height='80' frameBorder='0' allowtransparency='true' allow='encrypted-media' {...rest} /> ) } const Media = props => { if (props.link.includes('youtube.com')) { return <Youtube {...props} /> } else if (props.link.includes('spotify.com')) { return <Spotify {...props} /> } else { return <p>Link not recognized.</p> } } export default Media