\n
\n {images.map((image, i) => (\n \n handlers.handleImageInViewChange(\n visible,\n image\n )\n }\n >\n \n (thumbRefs.current[i] = el)\n }\n >\n \n \n \n ))}\n
\n
\n {images.map((image, i) => (\n \n handlers.handleImageInViewChange(\n visible,\n image\n )\n }\n >\n (thumbRefs.current[i] = el)}\n image={image}\n onImageSelect={handlers.handleImageSelect}\n active={\n state.selectedImageIndex === image.index\n }\n />\n \n ))}\n
\n \n )}\n \n );\n};\n\nFullscreenImageGallery.propTypes = {\n images: PropTypes.array.isRequired,\n};\n\nconst GalleryImage = ({ image, onClick }) => {\n const imageClasses = classNames(styles['ImageGallery__Image'], {\n [styles['ImageGallery__Image--Portrait']]: image.portrait,\n [styles['ImageGallery__Image--Clickable']]: onClick !== null,\n });\n\n const sizes = '(max-width: 1200px) 50vw, 1200px';\n\n const WrapperElement = onClick ? 'button' : 'div';\n\n return (\n \n \n \n );\n};\n\nGalleryImage.defaultProps = {\n image: {},\n onClick: null,\n};\n\nGalleryImage.propTypes = {\n image: PropTypes.shape({\n id: PropTypes.oneOfType([PropTypes.string, PropTypes.number])\n .isRequired,\n index: PropTypes.number.isRequired,\n src: PropTypes.string.isRequired,\n srcSet: PropTypes.string,\n alt: PropTypes.string,\n title: PropTypes.string,\n focal: PropTypes.object,\n portrait: PropTypes.bool,\n }),\n onClick: PropTypes.func,\n};\n\nconst ImageGalleryArrows = ({ images }) => {\n const { state, ...handlers } = useContext(LocalStateContext);\n\n const selectPrevImage = useCallback(\n (e) => {\n const prevImgIndex = state.selectedImageIndex - 2;\n\n if (!(prevImgIndex in images)) {\n handlers.handleImageSelect(e, images[images.length - 1]);\n return;\n }\n\n handlers.handleImageSelect(e, images[prevImgIndex]);\n },\n [state, images, handlers]\n );\n\n const selectNextImage = useCallback(\n (e) => {\n const nextImgIndex = state.selectedImageIndex;\n\n if (!(nextImgIndex in images)) {\n handlers.handleImageSelect(e, images[0]);\n return;\n }\n\n handlers.handleImageSelect(e, images[nextImgIndex]);\n },\n [state, images, handlers]\n );\n\n const handleArrowKeyPress = useCallback(\n (e) => {\n const leftArrowCode = 37;\n const rightArrowCode = 39;\n\n if (e.keyCode === leftArrowCode) {\n selectPrevImage(e);\n }\n\n if (e.keyCode === rightArrowCode) {\n selectNextImage(e);\n }\n },\n [selectPrevImage, selectNextImage]\n );\n\n useEffect(() => {\n if (state.isFullscreen) {\n document.addEventListener('keydown', handleArrowKeyPress, false);\n }\n\n return () => {\n document.removeEventListener('keydown', handleArrowKeyPress, false);\n };\n }, [handleArrowKeyPress, state.isFullscreen]);\n\n return (\n <>\n \n \n Previous image\n \n \n\n \n \n Next image\n \n \n \n );\n};\n\nImageGalleryArrows.defaultProps = {\n images: {},\n};\n\nImageGalleryArrows.propTypes = {\n images: PropTypes.array,\n};\n\nexport { ImageDescription };\nexport default ImageGallery;\n","import ImageGallery, { ImageDescription } from './ImageGallery';\n\nexport { ImageDescription };\nexport default ImageGallery;\n","import React, { useState, useRef, useEffect, useContext } from 'react';\nimport PropTypes from 'prop-types';\nimport Vimeo from '@u-wave/react-vimeo';\nimport YouTube from '@u-wave/react-youtube';\nimport throttle from 'lodash.throttle';\nimport { useTranslation } from 'next-i18next';\n\nimport classNames from 'classnames';\n\nimport { CookieStateContext } from '../../containers/BasePage/state';\nimport BackgroundImage from '../BackgroundImage';\nimport Button from '../Button';\nimport CookieOverlay from '../CookieOverlay';\n\nimport { serializeImage } from '../../utils/SerializeImage';\nimport { searchToObj } from '../../utils/url';\n\nimport styles from './VideoSegment.module.scss';\n\nconst isYoutubeVideoUrl = (url) =>\n url.indexOf('youtube.com') > -1 || url.indexOf('youtu.be') > -1;\n\nconst isVimeoVideoUrl = (url) => url.indexOf('vimeo.com') > -1;\n\n// react-vimeo supports ids OR urls directly, for react-youtube,\n// we have to parse the url (youtube.com/youtu.be) ourselves\nconst parseYoutubeVideoId = (url) => {\n let videoId = null;\n\n if (url.indexOf('youtu.be') > -1) {\n let l = document.createElement('a');\n l.href = url;\n\n videoId = l.pathname.slice(1, l.pathname.length);\n } else if (url.indexOf('youtube.com') > -1) {\n const searchString = url.split('?')[1];\n const search = searchToObj(searchString);\n\n videoId = search && search.v ? search.v : null;\n }\n\n return videoId;\n};\n\nconst VideoSegment = ({ overlayImage, videoUrl, modifier }) => {\n const { t } = useTranslation();\n\n let waitingForPlayer = useRef(null);\n let noOfTries = useRef(0);\n\n const videoPlayer = useRef(null);\n const [videoType, setVideoType] = useState('');\n\n const [videoInited, setVideoInited] = useState(false);\n const [videoError, setVideoError] = useState({\n hasError: false,\n message: '',\n });\n\n const [playVideoWithoutCookieConsent, setPlayVideoWithoutCookieConsent] =\n useState(false);\n const { state } = useContext(CookieStateContext) || {};\n const cookieConsent = state?.categories?.includes('targeting');\n\n useEffect(() => {\n if (isYoutubeVideoUrl(videoUrl)) {\n setVideoType('youtube');\n } else if (isVimeoVideoUrl(videoUrl)) {\n setVideoType('vimeo');\n } else {\n setError(\n `Unknown provider in video url \"${videoUrl}\". Only urls YouTube and Vimeo url's beginning with \"youtube.com\" and \"vimeo.com\" are supported`\n );\n }\n }, [videoUrl]);\n\n const setError = (message) =>\n setVideoError({\n hasError: true,\n message,\n });\n\n const handlePlayVideoClick = throttle(\n () => {\n // hide heading, desc, button + overlay & show player iframe\n setVideoInited(true);\n\n if (videoError.hasError) {\n return;\n }\n\n // check if player obj is available\n // necessary as the vimeo player obj is loaded\n // after the play click (whereas the youtube player obj is loaded on page load)\n if (\n !videoPlayer.current ||\n typeof videoPlayer.current.play === 'undefined'\n ) {\n if (!waitingForPlayer.current) {\n if (++noOfTries.current > 10) {\n setError('Unknown error - could not load player');\n return;\n }\n\n console.warn(\n styles['VideoSegment:'] +\n ' ' +\n styles['can'] +\n ' ' +\n styles['not'] +\n ' ' +\n styles['play'] +\n ' ' +\n styles['video'] +\n ' ' +\n styles['-'] +\n ' ' +\n styles['player'] +\n ' ' +\n styles['not'] +\n ' ' +\n styles['ready!'] +\n ' ' +\n styles['Retrying'] +\n ' ' +\n styles['in'] +\n ' ' +\n styles['500ms']\n );\n\n handlePlayVideoClick();\n }\n\n return;\n }\n\n // actually start playing\n videoPlayer.current.play();\n },\n 500,\n { leading: true }\n );\n\n const handleVimeoPlayerReady = (playerControls) => {\n videoPlayer.current = playerControls;\n };\n\n const handleYoutubePlayerReady = (event) => {\n // \"normalize\" the api to match the vimeo player\n videoPlayer.current = {\n play: () => event.target.playVideo(),\n };\n };\n\n const serializedImage = serializeImage(overlayImage, true);\n\n const classes = classNames(styles['VideoSegment'], {\n [styles[`VideoSegment--${modifier}`]]: modifier,\n });\n\n const videoClasses = classNames(styles['VideoSegment__Video'], {\n [styles['VideoSegment__Video--Playing']]: videoInited,\n });\n\n const sizes = '(max-width: 750px) 100vw, 750px';\n\n return (\n \n {!videoInited &&\n (cookieConsent ||\n playVideoWithoutCookieConsent ||\n videoType === 'vimeo') && (\n <>\n
\n \n )}\n\n
\n {!videoError.hasError && (\n <>\n {(cookieConsent || playVideoWithoutCookieConsent) &&\n videoType === 'youtube' && (\n
\n )}\n\n {videoType === 'vimeo' && (\n
\n )}\n \n )}\n\n {videoError.hasError && (\n
\n {videoError.message}\n
\n )}\n
\n\n {!(cookieConsent || playVideoWithoutCookieConsent) &&\n videoType === 'youtube' && (\n
{\n setPlayVideoWithoutCookieConsent(true);\n handlePlayVideoClick();\n }}\n icon={'/svg/icon-arrow.svg'}\n />\n )}\n \n
\n {heading &&
{heading}
}\n\n {items.map((item, i) => {\n const qaItem = {\n id: item.id ? item.id : `faq-${id}-item-${i}`,\n ...item.value,\n };\n\n return \n
\n
\n {item.question}\n \n \n \n \n \n {items && items.length > 0 && (\n <>\n {title && (\n
\n {title}\n
\n )}\n {text && (\n
\n {text}\n
\n )}\n {items.map((item, index) => (\n
\n ))}\n \n )}\n
\n {title &&
{title}
}\n {text && (\n
{text}
\n )}\n {items && (\n
\n {items.map((item, index) => (\n
\n \n \n ))}\n
{title}
\n {text}
\n \n \n );\n};\n\nListCardToolkit.propTypes = {\n title: PropTypes.string,\n text: PropTypes.string,\n items: PropTypes.array,\n};\n\nListCardToolkit.defaultProps = {\n title: '',\n text: '',\n items: [],\n};\n\nCardToolkit.propTypes = {\n icon: PropTypes.string,\n href: PropTypes.string,\n title: PropTypes.string,\n text: PropTypes.string,\n};\n\nCardToolkit.defaultProps = {\n icon: '',\n href: '',\n title: '',\n text: '',\n};\n\nexport default ListCardToolkit;\n","import ListCardToolkit from './ListCardToolkit';\n\nexport default ListCardToolkit;\n","import React, { useEffect, useState } from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport { useTranslation } from 'next-i18next';\n\nimport { isExternalUrl } from '../../utils/url';\nimport BackgroundImage from '../BackgroundImage';\nimport VideoSegment from '../VideoSegment';\nimport { serializeImage } from '../../utils/SerializeImage';\n\nimport styles from './PostSegment.module.scss';\n\nconst PostSegment = ({ items }) => (\n \n {items.map((item, index) => (\n \n ))}\n
\n);\n\nconst Card = ({ href, image, video, title, text }) => {\n const { t } = useTranslation();\n\n const hasLink = href.length > 0;\n const hasVideo = video && video.videoUrl ? true : false;\n\n const serializedImage = serializeImage(image, true);\n\n const [isExternal, setIsExternal] = useState(false);\n const classes = classNames(styles['PostSegment__Card'], {\n [styles['PostSegment__Card--Link']]: hasLink,\n [styles['PostSegment__Card--External']]: isExternal,\n });\n\n const sizes = '(max-width: 750px) 100vw, (max-width: 1200px) 50vw, 640px';\n\n useEffect(() => {\n setIsExternal(isExternalUrl(href));\n }, [href]);\n\n return (\n \n {hasVideo && (\n
\n \n
\n )}\n\n {image && image.url && !hasVideo && (\n
\n \n
\n )}\n\n
\n
{title}
\n
\n
\n {hasLink && (\n
\n {title}\n \n {t('postsegment.more')}\n \n \n )}\n \n
\n
\n {title &&
{title}
}\n {items.map((item, index) => (\n
\n {item.title || item.link.title}\n \n ))}\n \n
\n {title && (\n
\n
\n {title && (\n \n {title}\n \n )}\n {text && (\n \n {text}\n
\n )}\n \n {!!link && link.href && (\n
\n {link.title || t('listCardGeneric.viewAll')}\n \n )}\n \n )}\n
\n {items.length > 0 &&\n items.map((item, index) => (\n \n ))}\n
\n
\n
\n {image?.src && (\n
\n )}\n
\n
\n {regionButtonsData.map((buttonData, index) => (\n setRegion(index)}\n className={classNames(\n styles['CardRegion__ChangeButton'],\n {\n [styles[\n 'CardRegion__ChangeButton--Active'\n ]]: buttonData.text === buttonText,\n }\n )}\n >\n {buttonData.text}\n \n ))}\n
\n
\n
\n
{title}
\n
{preamble}
\n {!!content && (\n
\n \n
\n )}\n
\n
\n {transports.map(({ value }, i) => (\n onChange(value)}\n >\n \n Train\n \n ))}\n
\n );\n};\n\nTransportChooser.propTypes = {\n transports: PropTypes.array,\n activeTransport: PropTypes.string,\n onChange: PropTypes.func,\n name: PropTypes.string,\n modifiers: PropTypes.array,\n};\n\nTransportChooser.defaultProps = {\n transports: [],\n activeTransport: '',\n onChange: () => null,\n name: 'transport',\n modifiers: [],\n};\n\nexport default TransportChooser;\n","import TransportChooser from './TransportChooser';\n\nexport default TransportChooser;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport styles from './TravelTimeHeader.module.scss';\n\nconst TravelTimeHeader = ({ title, preamble }) => {\n return (\n \n
{title}
\n
{preamble}
\n
\n
\n
\n
\n \n
\n
\n {chooserTitle}\n
\n
\n
\n
\n {availiableTransports.map(({ value }, i) => (\n
\n ))}\n
\n
\n
\n
\n\n
\n
\n \n \n {chooserTitle}\n \n \n \n
\n
\n
\n
\n {t('worldMap.mobileInstruction')}\n
\n
\n {items.map((item, index) => (\n
\n \n {dynamicComponents}
;\n};\n\nStreamField.propTypes = {\n items: PropTypes.array,\n};\n\nStreamField.defaultProps = {\n items: [],\n};\n\nexport default StreamField;\n","import StreamField from './StreamField';\n\nexport default StreamField;\n","import React, { useState } from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport { useTranslation } from 'next-i18next';\nimport AnimateHeight from 'react-animate-height';\nimport styles from './Wysiwyg.module.scss';\n\nconst Wysiwyg = ({ html, isExpandable, modifiers = [] }) => {\n const { t } = useTranslation();\n\n const [isOpen, setIsOpen] = useState(false);\n\n const expand = () => {\n setIsOpen(true);\n };\n\n const classes = classNames(\n styles['Wysiwyg'],\n {\n [styles['Wysiwyg--Expandable']]: isExpandable & !isOpen,\n },\n modifiers.map((modifier) => styles[`Wysiwyg--${modifier}`]),\n 'Wysiwyg'\n );\n\n return (\n \n
\n \n \n {isExpandable && !isOpen && (\n \n )}\n