import React, { Fragment } from 'react'
import PropTypes from 'prop-types'
import classNames from 'classnames'
import Link from './link'
import { InlineCode } from './code'
import { markdownToReact } from './util'
import classes from '../styles/embed.module.sass'
const YouTube = ({ id, ratio = '16x9' }) => {
const embedClassNames = classNames(classes.root, classes.responsive, {
[classes.ratio16x9]: ratio === '16x9',
[classes.ratio4x3]: ratio === '4x3',
})
const url = `https://www.youtube.com/embed/${id}`
return (
)
}
YouTube.propTypes = {
id: PropTypes.string.isRequired,
ratio: PropTypes.oneOf(['16x9', '4x3']),
}
const SoundCloud = ({ id, color = '09a3d5', title }) => {
const url = `https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/${id}&color=%23${color}&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true`
return (
)
}
SoundCloud.propTypes = {
id: PropTypes.string.isRequired,
title: PropTypes.string.isRequired,
color: PropTypes.string,
}
function formatHTML(html) {
const encoded = encodeURIComponent(html)
return `${encoded}`
}
const Iframe = ({ title, src, html, width = 800, height = 300 }) => {
const source = html ? `data:text/html,${formatHTML(html)}` : src
return (
)
}
Iframe.propTypes = {
title: PropTypes.string.isRequired,
src: PropTypes.string,
html: PropTypes.string,
width: PropTypes.number,
height: PropTypes.number,
}
const Image = ({ src, alt, title, ...props }) => {
// This is only needed for image types that are NOT handled by
// gatsby-remark-images, i.e. mostly SVGs. The plugin adds formatting
// and support for captions, so this normalises that behaviour.
const linkClassNames = classNames('gatsby-resp-image-link', classes.imageLink)
const markdownComponents = { code: InlineCode, p: Fragment, a: Link }
return (
{title && (
{markdownToReact(title, markdownComponents)}
)}
)
}
export { YouTube, SoundCloud, Iframe, Image }