{"version":3,"sources":["webpack:///./src/components/VideosListViewer/index.js","webpack:///./src/pages/broadcast.js"],"names":["VideoList","gridTemplateColumns","Link","GatsbyLink","VideosViewer","items","placeholders","locale","length","width","map","video","title","id","slug","alt","to","key","imgData","image","description","playVisible","BroadcastPage","pageContext","t","useTranslation","broadcastVideos","returnObjects","item","usePlaceholders","maxWidth","m","alignItems","flexDirection","pt","pb","px","justifyContent","mb","SectionTitle","pageId","breadcrumb","defaultProps"],"mappings":"kPASO,IAAMA,EAAY,2CAAH,0IAShBC,sBATgB,yEAgBhBC,EAAO,kBAAOC,IAAP,qBAAH,yEAqCKC,EA/BM,SAAC,GAAqC,IAAnCC,EAAkC,EAAlCA,MAAOC,EAA2B,EAA3BA,aAAcC,EAAa,EAAbA,OACrCN,EAAsBI,EAAMG,OAASF,EAAaE,SAAW,EAC/D,CAAC,KAAM,kBACP,CAAC,KAAM,iBAAkB,kBAE7B,OACE,cAACR,EAAD,CAAWS,MAAM,OAAOR,oBAAqBA,GAC1CI,EAAMK,KAAI,gBAAGC,EAAH,EAAGA,MAAOC,EAAV,EAAUA,MAAOC,EAAjB,EAAiBA,GAAIC,EAArB,EAAqBA,KAAMC,EAA3B,EAA2BA,IAA3B,OACT,cAACb,EAAD,CAAMc,GAAOT,EAAL,cAAyBO,EAAQG,IAAKJ,GAC5C,cAAC,IAAD,CACEJ,MAAO,EACPS,QAASP,EAAMQ,MACfJ,IAAKA,GAAOJ,EAAMI,IAClBK,YAAaR,EACbS,aAAW,QAIhBf,EAAaI,KAAI,gBAAGS,EAAH,EAAGA,MAAOP,EAAV,EAAUA,MAAOC,EAAjB,EAAiBA,GAAjB,OAChB,cAAC,IAAD,CAAMJ,MAAO,EAAGQ,IAAKJ,EAAIK,QAASC,EAAOC,YAAaR,S,YC/BxDU,EAAgB,SAAC,GAAiC,IAAhBf,EAAe,EAA9BgB,YAAehB,OAC9BiB,EAAMC,YAAe,iBAArBD,EACFE,EAAkBD,YAAe,kBAAkBD,EAAE,UAAW,CACpEG,eAAe,IAGXrB,EAdgB,WAAO,IACrBkB,EAAMC,YAAe,yBAArBD,EACFZ,EAAQY,EAAE,SAGhB,OAFoBA,EAAE,eAAgB,CAAEG,eAAe,IAEpCjB,KAAI,SAACkB,GAAD,wBAAgBA,EAAhB,CAAsBhB,aASxBiB,GAErB,OACE,mBACEpB,MAAO,EACPqB,SAAS,SACTC,EAAE,OACFC,WAAW,SACXC,cAAc,SACdC,GAAI,CAAC,SAAU,WACfC,GAAI,CAAC,KAAM,KAAM,UACjBC,GAAI,CAAC,SAAU,UAEf,mBACE3B,MAAO,EACP4B,eAAgB,CAAC,SAAU,QAC3BC,GAAI,CAAC,EAAG,SAAU,UAElB,cAACC,EAAA,EAAD,CAAc3B,MAAOY,EAAE,YAEzB,cAAC,IAAD,CAASgB,OAAO,gBAAgBC,WAAW,kBAC3C,mBAAMhC,MAAO,EAAG6B,GAAG,UACjB,cAAC,EAAD,CACEjC,MAAOqB,EACPpB,aAAcA,EACdC,OAAQA,OAWlBe,EAAcoB,aAAe,CAC3BnB,YAAa,IAGAD","file":"component---src-pages-broadcast-js-568eca4161177b67d0aa.js","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from '@emotion/styled';\nimport GatsbyLink from 'gatsby-link';\nimport { gridTemplateColumns } from 'styled-system';\n\nimport { Box } from '@square-enix-private/vaquita-ui';\nimport { Item } from './elements';\n\nexport const VideoList = styled(Box)`\n  width: 100%;\n  display: flex;\n  flex-wrap: nowrap;\n  flex-direction: column;\n  justify-content: center;\n\n  @media screen and (min-width: 580px) {\n    display: grid;\n    ${gridTemplateColumns};\n    grid-template-rows: repeat(1, 1fr);\n    grid-gap: 32px;\n    grid-auto-rows: auto;\n  }\n`;\n\nconst Link = styled(GatsbyLink)`\n  width: 100%;\n  text-decoration: none;\n  color: inherit;\n`;\n\nconst VideosViewer = ({ items, placeholders, locale }) => {\n  const gridTemplateColumns = items.length + placeholders.length === 1\n    ? [null, 'repeat(1, 1fr)']\n    : [null, 'repeat(2, 1fr)', 'repeat(3, 1fr)'];\n\n  return (\n    <VideoList width=\"100%\" gridTemplateColumns={gridTemplateColumns}>\n      {items.map(({ video, title, id, slug, alt }) => (\n        <Link to={`${locale}/broadcast/${slug}`} key={id}>\n          <Item\n            width={1}\n            imgData={video.image}\n            alt={alt || video.alt}\n            description={title}\n            playVisible\n          />\n        </Link>\n      ))}\n      {placeholders.map(({ image, title, id }) => (\n        <Item width={1} key={id} imgData={image} description={title} />\n      ))}\n    </VideoList>\n  );\n};\n\nVideosViewer.propTypes = {\n  items: PropTypes.array.isRequired,\n  placeholders: PropTypes.array.isRequired,\n  locale: PropTypes.string.isRequired\n};\n\nexport default VideosViewer;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { graphql } from 'gatsby';\n\nimport { useTranslation } from 'react-i18next';\nimport GTMData from '@square-enix-private/fe-gtm/dist/GTMData';\nimport { Flex } from '@square-enix-private/vaquita-ui';\nimport VideosViewer from '~/components/VideosListViewer';\n\nimport SectionTitle from '~/components/SectionTitle/index';\n\nconst usePlaceholders = () => {\n  const { t } = useTranslation('broadcastplaceholders');\n  const title = t('title');\n  const placeholder = t('placeholders', { returnObjects: true });\n\n  return placeholder.map((item) => ({ ...item, title }));\n};\n\nconst BroadcastPage = ({ pageContext: { locale } }) => {\n  const { t } = useTranslation('broadcastpage');\n  const broadcastVideos = useTranslation('broadcastitems').t('content', {\n    returnObjects: true\n  });\n\n  const placeholders = usePlaceholders();\n\n  return (\n    <Flex\n      width={1}\n      maxWidth=\"1400px\"\n      m=\"auto\"\n      alignItems=\"center\"\n      flexDirection=\"column\"\n      pt={['xlarge', 'xxlarge']}\n      pb={[null, null, 'xlarge']}\n      px={['medium', 'large']}\n    >\n      <Flex\n        width={1}\n        justifyContent={['center', 'left']}\n        mb={[0, 'medium', 'large']}\n      >\n        <SectionTitle title={t('title')} />\n      </Flex>\n      <GTMData pageId=\"broadcastPage\" breadcrumb=\"broadcastPage\" />\n      <Flex width={1} mb=\"medium\">\n        <VideosViewer\n          items={broadcastVideos}\n          placeholders={placeholders}\n          locale={locale}\n        />\n      </Flex>\n    </Flex>\n  );\n};\n\nBroadcastPage.propTypes = {\n  pageContext: PropTypes.object\n};\n\nBroadcastPage.defaultProps = {\n  pageContext: {}\n};\n\nexport default BroadcastPage;\n\nexport const query = graphql`\n  query($locale: String) {\n    ...FooterData\n    ...GenericData\n    ...MetadataData\n    ...FlagsData\n    ...MenuData\n    ...AssetsData\n    ...AgeGateData\n    broadcastpage(filter: { localeDirectory: { eq: $locale } }) {\n      title\n    }\n    broadcastitems(filter: { localeDirectory: { eq: $locale } }) {\n      slug\n      id\n      title\n      video {\n        title\n        videoId\n      }\n      video {\n        alt\n        image {\n          ...FastlyProps\n        }\n      }\n    }\n    broadcastplaceholders(filter: { localeDirectory: { eq: $locale } }) {\n      title\n      slug\n      placeholders {\n        id\n        alt\n        image {\n          ...FastlyProps\n        }\n      }\n    }\n  }\n`;\n"],"sourceRoot":""}