(this.mapRef = el)} />\n \n )\n }\n}\n\nconst styleMap = {\n position: 'absolute',\n top: 0,\n bottom: 0,\n right: 0,\n left: 0,\n}\n\nexport default withTheme(MapComponent)\n","import React, {Component} from 'react'\nimport {} from 'prop-types'\nimport glamorous from 'glamorous'\nimport {getThemeStyles} from '../css/themes'\n\nconst ButtonStyled = glamorous.button({}, getThemeStyles('button'))\n\nexport default class Button extends Component {\n render() {\n return
{this.props.children}\n }\n}\n","import _ from 'lodash'\nimport React from 'react'\nimport {object, shape, arrayOf} from 'prop-types'\n\nimport {decimalToFraction} from '../utils'\nimport {default as MapComponent} from '../components/map'\nimport Button from '../components/button'\nimport Image from '../components/image'\nimport Video from '../components/video'\nimport Gallery from '../components/gallery'\nimport {H1, H2, H3, H4, H5, H6, P, A, I, EM, Strong, HR} from '../components/common'\n\n// Construct a map of [originalName] -> imageFluidData\nconst makeImageMap = images => {\n const imageData = _.map(_.compact(images), 'childImageSharp.fluid')\n return _.reduce(\n imageData,\n (map, {originalName, ...fluidData}) => ({\n ...map,\n [originalName]: fluidData,\n }),\n {}\n )\n}\n\nconst CustomComponents = (props = {}) => {\n const imageMap = makeImageMap(props.images) || {}\n return {\n h1: H1,\n h2: H2,\n h3: H3,\n h4: H4,\n h5: H5,\n h6: H6,\n p: P,\n a: A,\n i: I,\n em: EM,\n strong: Strong,\n hr: HR,\n button: Button,\n map: MapComponent,\n gallery: galleryProps => {\n let photos = []\n try {\n photos = JSON.parse(galleryProps.photos)\n } catch (e) {}\n // Transform gatsby-plugin-sharp fluid properties into react-photo-gallery properties\n // - Convert aspectRatio decimal to fraction\n const newPhotos = _.map(photos, ({src}) => {\n const imageData = imageMap[src]\n if (!imageData) return null\n\n const {numerator: width, denominator: height} = decimalToFraction(imageData.aspectRatio)\n // Remove these fields to Gallery>img\n delete imageData.originalImg\n delete imageData.aspectRatio\n delete imageData.base64\n // Add height/width values for Gallery\n return {\n ...imageData,\n width,\n height,\n }\n })\n return
\n },\n img: imgProps => {\n const fluid = imageMap[imgProps.src]\n return
\n },\n video: videoProps => {\n let sourcesArr = []\n try {\n sourcesArr = JSON.parse(videoProps.sources)\n } catch (e) {}\n\n const newProps = {\n ...props,\n controls: videoProps.controls === 'true',\n sources: sourcesArr,\n }\n return
\n },\n }\n}\n\nCustomComponents.propTypes = {\n images: arrayOf(\n shape({\n childImageSharp: object.isRequired,\n })\n ),\n}\nexport default CustomComponents\n","import _ from 'lodash'\nimport React, {Component} from 'react'\nimport {bool, string, arrayOf} from 'prop-types'\nimport glamorous from 'glamorous'\n\nimport {isBrowser, isInViewport} from '../utils'\nimport {colors, hexToRgba} from '../css/themes'\n\nconst VideoWrapper = glamorous.span({})\n\nexport default class VideoComponent extends Component {\n static propTypes = {\n sources: arrayOf(string).isRequired,\n loop: bool,\n autoplay: bool,\n controls: bool,\n }\n\n static defaultProps = {\n loop: true,\n autoplay: true,\n controls: false,\n }\n\n _videoRef = null\n _playPromise = null\n\n _handleScroll = _.debounce(() => {\n if (isInViewport(this._videoRef)) {\n this._playPromise = this._videoRef.play()\n } else {\n if (!this._playPromise) return\n this._playPromise.then(() => {\n this._videoRef.pause()\n this._playPromise = null\n })\n }\n }, 100)\n\n componentDidMount() {\n if (!this._videoRef) return\n if (!isBrowser()) return\n window.addEventListener('scroll', this._handleScroll)\n }\n\n componentWillUnmount() {\n if (!isBrowser()) return\n window.removeEventListener('scroll', this._handleScroll)\n }\n\n render() {\n const data = _.map(this.props.sources, src => {\n const type = _.last(src.split('.'))\n return {src, type}\n })\n\n return (\n
\n (this._videoRef = el)}\n loop={this.props.loop}\n playsInline={this.props.autoplay}\n controls={this.props.controls}\n css={{\n height: 'auto',\n width: '100%',\n backgroundColor: hexToRgba(colors.orange, 0.3),\n }}\n >\n {_.map(data, ({src, type}) => {\n return \n })}\n \n \n )\n }\n}\n","import React, {Component} from 'react'\nimport {string, number, func, arrayOf, shape} from 'prop-types'\nimport Img from 'gatsby-image'\nimport Gallery from 'react-photo-gallery'\nimport Lightbox from 'react-images'\n\nclass ImageGallery extends Component {\n static propTypes = {\n photos: arrayOf(\n shape({\n src: string.isRequired,\n alt: string,\n key: string,\n width: number.isRequired,\n height: number.isRequired,\n })\n ).isRequired,\n columns: number,\n margin: number,\n onClick: func,\n ImageComponent: func,\n }\n\n state = {\n currentImage: 0,\n lightboxIsOpen: false,\n }\n\n _handleOpen = image => {\n this.setState({\n currentImage: image.index,\n lightboxIsOpen: true,\n })\n }\n\n _handleClose = () => {\n this.setState({\n currentImage: 0,\n lightboxIsOpen: false,\n })\n }\n\n _handlePrev = () => {\n this.setState({\n currentImage: this.state.currentImage - 1,\n })\n }\n\n _handleNext = () => {\n this.setState({\n currentImage: this.state.currentImage + 1,\n })\n }\n\n render() {\n return (\n
\n this._handleOpen(image)} />\n \n
\n )\n }\n}\nexport default ImageGallery\n"],"sourceRoot":""}