{"version":3,"sources":["webpack:///./src/pages/broker-centre/video-library/index.tsx"],"names":["ThumbnailImage","props","query","render","data","image","images","edges","find","n","node","relativePath","includes","fileName","alt","fluid","childImageSharp","imgStyle","width","height","backgroundSize","backgroundPosition","style","position","withTranslation","LocaleNameSpaceKeys","VIDEO_LIBRARY","t","activeLocaleTag","useLocaleContext","layoutOptions","seo","title","page","heroSection","options","accentColor","HeroSectionColors","PARROT_GREEN","heroImage","videoCategories","brokerPortal","videos","caseStudies","dealSubmissionTips","forEach","video","categoryKey","push","className","Object","keys","map","vc","key","vids","generatedRows","i","length","firstItem","secondItem","thirdItem","finalRowItem","block","titleKey","to","getPathFromRouteKey","path","defaultLocaleTag","thumbnailsFileName","Array","item","index","aria-hidden","getVideoRows"],"mappings":"8SAgBA,MAAMA,EAAkBC,GACtB,kBAAC,cAAD,CACEC,MAAK,aAiBLC,OAASC,IACP,MAAMC,EAAQD,EAAKE,OAAOC,MAAMC,KAAMC,GAC7BA,EAAEC,KAAKC,aAAaC,SAASX,EAAMY,WAE5C,OAAKR,EAWH,kBAAC,IAAD,CACES,IAAKb,EAAMa,IACXC,MAAOV,EAAMK,KAAKM,gBAAgBD,MAClCE,SAAU,CACRC,MAAO,OACPC,OAAQ,OACRC,eAAgB,QAChBC,mBAAoB,UAEtBC,MAAO,CAAEC,SAAU,WAAYL,MAAO,UAbjC,QAqIAM,sBAAgBC,IAAoBC,cAApCF,CAlHwBvB,IACrC,MAAM,EAAE0B,GAAM1B,GACR,gBAAE2B,GAAoBC,cACtBC,EAA+B,CACnCC,IAAK,CACHC,MAAOL,EAAE,cAEXM,KAAM,CACJD,MAAOL,EAAE,YAEXO,YAAa,CACXC,QAAS,CACPC,YAAaC,IAAkBC,aAC/BC,UAAW,CACT1B,SAAU,mBACVC,IAAK,YA2DP0B,EAAuB,CAC3BC,aAAc,CACZT,MAAOL,EAAE,2BACTe,OAAQ,IAEVC,YAAa,CACXX,MAAOL,EAAE,0BACTe,OAAQ,IAEVE,mBAAoB,CAClBZ,MAAOL,EAAE,iCACTe,OAAQ,KAYZ,OAJAA,IAAOG,QAASC,IACdN,EAAgBM,EAAMC,aAAaL,OAAOM,KAAKF,KAI/C,kBAAC,IAAD,CAAQX,QAASL,EAAemB,UAAU,gBACxC,yBAAKA,UAAU,kBACb,yBAAKA,UAAU,6BACb,2BAAItB,EAAE,UAEPuB,OAAOC,KAAKX,GAAiBY,IAAKC,GACjC,yBAAKJ,UAAU,4BAA4BK,IAAKD,GAC9C,4BAAKb,EAAgBa,GAAIrB,OA7DbuB,KACpB,MAAMC,EAAgB,GACtB,IAAK,IAAIC,EAAI,EAAGA,GAAKF,EAAKG,OAAQD,GAAK,EAAG,CACxC,MAAME,EAAYJ,EAAKE,GACjBG,EAAaL,EAAKE,EAAI,GACtBI,EAAYN,EAAKE,EAAI,GACrBK,EAAe,GAEjBH,IACFG,EAAad,KAAKW,GACdC,IACFE,EAAad,KAAKY,GACdC,GACFC,EAAad,KAAKa,KAKpBC,EAAaJ,QACfF,EAAcR,KACZ,yBAAKC,UAAU,uCAAuCK,IAAM,QAAOG,IA3CnDrD,EA4CE0D,EA1CtB,oCACG1D,EAAKgD,IAAI,CAACW,EAAON,IAEd,yBAAKR,UAAU,mBAAmBK,IAAM,GAAES,EAAMC,YAAYP,KAAK7B,KAC/D,kBAAC,IAAD,CAAMqC,GAAIC,YAAoBH,EAAMI,KAAKC,OACvC,kBAACpE,EAAD,CACEa,SAAUkD,EAAMM,mBAAmBzC,GACnCd,IAAKa,EAAEoC,EAAMC,aAGjB,2BAAIrC,EAAEoC,EAAMC,aAIjB,YAAIM,MAAM,EAAKlE,EAAKsD,OAAS,IAAKN,IAAI,CAACmB,EAAMC,IAC5C,yBAAKC,cAAY,OAAOxB,UAAU,mBAAmBK,IAAM,SAAQkB,SAjBnDpE,MAkDtB,OAAOoD,GAmCEkB,CAAalC,EAAgBa,GAAIX","file":"component---src-pages-broker-centre-video-library-index-tsx-615c3c8d25775683d9a9.js","sourcesContent":["import React from 'react';\nimport { PageProps, StaticQuery, graphql } from 'gatsby';\n\nimport { withTranslation, WithTranslation } from 'react-i18next';\nimport GatsbyImage from 'gatsby-image';\nimport Layout, { LayoutOptions, HeroSectionColors } from '../../../components/Layout/Layout';\nimport { LocaleNameSpaceKeys } from '../../../localization/translations';\nimport Link from '../../../components/Link/Link';\nimport { useLocaleContext } from '../../../context/Locale';\nimport './style.scss';\nimport videos, { Video } from '../../../data/video/videos';\nimport { getPathFromRouteKey } from '../../../shared/utils/getPathFromRouteKey';\nimport { defaultLocaleTag } from '../../../../config/locales';\n\ntype Props = PageProps & WithTranslation;\n\nconst ThumbnailImage = (props: { fileName: string; alt: string }) => (\n {\n const image = data.images.edges.find((n: any) => {\n return n.node.relativePath.includes(props.fileName);\n });\n if (!image) {\n if (process.env.NODE_ENV === 'development') {\n console.error(\n `Cannot find the image with name '${props.fileName}' in the '/src/assets/images' folder. Did you ensure it exists and the gatsby-config still points to the '/src/assets/images' path? `\n );\n }\n\n return null;\n }\n\n return (\n \n );\n }}\n />\n);\nconst VideoLibrary: React.FC = (props: Props) => {\n const { t } = props;\n const { activeLocaleTag } = useLocaleContext();\n const layoutOptions: LayoutOptions = {\n seo: {\n title: t('seo.title'),\n },\n page: {\n title: t('heading'),\n },\n heroSection: {\n options: {\n accentColor: HeroSectionColors.PARROT_GREEN,\n heroImage: {\n fileName: 'hero-image-4.jpg',\n alt: 'Image',\n },\n },\n },\n };\n\n const getVideoColumn = (data: Video[]) => {\n return (\n <>\n {data.map((block, i) => {\n return (\n
\n \n \n \n

{t(block.titleKey)}

\n
\n );\n })}\n {[...Array(3 - (data.length % 3))].map((item, index) => (\n
\n ))}\n \n );\n };\n\n const getVideoRows = (vids: Video[]) => {\n const generatedRows = [];\n for (let i = 0; i <= vids.length; i += 3) {\n const firstItem = vids[i];\n const secondItem = vids[i + 1];\n const thirdItem = vids[i + 2];\n const finalRowItem = [];\n\n if (firstItem) {\n finalRowItem.push(firstItem);\n if (secondItem) {\n finalRowItem.push(secondItem);\n if (thirdItem) {\n finalRowItem.push(thirdItem);\n }\n }\n }\n\n if (finalRowItem.length) {\n generatedRows.push(\n
\n {getVideoColumn(finalRowItem)}\n
\n );\n }\n }\n\n return generatedRows;\n };\n\n const videoCategories: any = {\n brokerPortal: {\n title: t('categories.brokerPortal'),\n videos: [],\n },\n caseStudies: {\n title: t('categories.caseStudies'),\n videos: [],\n },\n dealSubmissionTips: {\n title: t('categories.dealSubmissionTips'),\n videos: [],\n },\n // eliteLoyalty: {\n // title: t('categories.eliteLoyalty'),\n // videos: [],\n // },\n };\n\n videos.forEach((video) => {\n videoCategories[video.categoryKey].videos.push(video);\n });\n\n return (\n \n
\n
\n

{t('body')}

\n
\n {Object.keys(videoCategories).map((vc) => (\n
\n

{videoCategories[vc].title}

\n {getVideoRows(videoCategories[vc].videos)}\n
\n ))}\n
\n \n );\n};\n\nexport default withTranslation(LocaleNameSpaceKeys.VIDEO_LIBRARY)(VideoLibrary);\n"],"sourceRoot":""}