{"version":3,"sources":["webpack:///./Avensia.Common/Features/Shared/Blocks/Instagram/InstagramBlock.tsx"],"names":["Post","div","flexBasis","margin","y","x","Placeholder","props","slicedImages","instagramMedia","slice","placeholders","length","mappedPosts","map","post","mediaType","key","mediaUrl","url","to","instagramLink","itemProp","src","ratio","OneToOne","preset","Tiny","poster","videoPosterUrl","width","controls","preload","Div","css","display","flexFlow","justifyContent","marginTop","className","Array","fill","elem","index"],"mappings":"2FAAA,W,EAAA,sDAgBMA,EAAO,IAAOC,MAAG,GACrBC,UAAW,OACXC,OAAQ,CAAEC,EAAG,KAAcC,EAAG,KAC7B,MAA2B,CAC1BH,UAAW,OAEb,EAAC,MAA0B,CACzBA,UAAW,OAEb,EAAC,MAA4B,CAC3BA,UAAW,M,IAITI,EAAc,YAAON,EAAM,CAC/BG,OAAQ,CAAEC,EAAG,EAAGC,EAAG,KAoDN,UA7CQ,SAACE,GACtB,IACMC,IAAiBD,EAAME,gBAAkBF,EAAME,eAAeC,MAAM,EADzD,IAEXC,EAFW,GAEeH,EAAaI,OACvCC,IACFN,EAAME,gBACRD,EAAaM,KAAI,SAAAC,GACf,MAAuB,UAAnBA,EAAKC,UAEL,kBAAChB,EAAI,CAACiB,IAAKF,EAAKG,SAASC,KACvB,kBAAC,IAAI,CAACC,GAAIL,EAAKM,eACb,kBAAC,IAAK,CAACC,SAAS,QAAQC,IAAKR,EAAKG,SAASC,IAAKK,MAAO,IAAWC,SAAUC,OAAQ,IAAYC,SAI1E,UAAnBZ,EAAKC,UAEZ,kBAAChB,EAAI,CAACiB,IAAKF,EAAKG,SAASC,KACvB,kBAAC,IAAI,CAACC,GAAIL,EAAKM,eACb,2BAAOE,IAAKR,EAAKG,SAASC,IAAKS,OAAQb,EAAKc,eAAgBC,MAAM,OAAOC,UAAQ,EAACC,QAAQ,gBAJ3F,KAWX,OACEnB,GACAA,EAAYD,OAAS,GACnB,kBAAC,IAAOqB,IAAG,CACTC,IAAK,CACHC,QAAS,OACTC,SAAU,WACVC,eAAgB,gBAChBC,UAAW,KAAmB,KAEhCC,UAAW,KAEV1B,EACAF,EAAe,GA1Cf,IAAI6B,MA0CmC7B,GA1CV8B,KAAK,GAAG3B,KAAI,SAAC4B,EAAMC,GAAU,yBAACrC,EAAW,CAACW,IAAK0B","file":"assets/61.chunk.bdb077ca6a195256e8d0.js","sourcesContent":["/**\r\n * @ComponentFor InstagramBlockViewModel\r\n */\r\n\r\nimport React from 'react';\r\nimport { styled } from '@glitz/react';\r\nimport { Link } from '@avensia/scope';\r\nimport RequiredPropType from './InstagramBlockViewModel.type';\r\nimport * as style from '../../Style';\r\nimport Image, { Ratio as ImageRatio, Preset as ImagePreset } from 'Shared/Image/Ratio';\r\nimport { BOX_ITEM_CLASSNAME } from 'Shared/BoxLayout';\r\n\r\ntype PropType = RequiredPropType & {\r\n  currentBreakpoint: number;\r\n};\r\n\r\nconst Post = styled.div({\r\n  flexBasis: '100%',\r\n  margin: { y: style.medium, x: 0 },\r\n  [style.minMicroMediaQuery]: {\r\n    flexBasis: '48%',\r\n  },\r\n  [style.minTinyMediaQuery]: {\r\n    flexBasis: '32%',\r\n  },\r\n  [style.minMediumMediaQuery]: {\r\n    flexBasis: '8%',\r\n  },\r\n});\r\n\r\nconst Placeholder = styled(Post, {\r\n  margin: { y: 0, x: 0 },\r\n});\r\n\r\nfunction renderPlaceholders(numOfPlaceholders: number) {\r\n  return new Array(numOfPlaceholders).fill(0).map((elem, index) => <Placeholder key={index} />);\r\n}\r\n\r\nconst InstagramBlock = (props: PropType) => {\r\n  const maxItems = 12;\r\n  const slicedImages = !!props.instagramMedia && props.instagramMedia.slice(0, maxItems);\r\n  const placeholders = maxItems - slicedImages.length;\r\n  const mappedPosts =\r\n    !!props.instagramMedia &&\r\n    slicedImages.map(post => {\r\n      if (post.mediaType === 'image') {\r\n        return (\r\n          <Post key={post.mediaUrl.url}>\r\n            <Link to={post.instagramLink}>\r\n              <Image itemProp=\"image\" src={post.mediaUrl.url} ratio={ImageRatio.OneToOne} preset={ImagePreset.Tiny} />\r\n            </Link>\r\n          </Post>\r\n        );\r\n      } else if (post.mediaType === 'video') {\r\n        return (\r\n          <Post key={post.mediaUrl.url}>\r\n            <Link to={post.instagramLink}>\r\n              <video src={post.mediaUrl.url} poster={post.videoPosterUrl} width=\"100%\" controls preload=\"none\" />\r\n            </Link>\r\n          </Post>\r\n        );\r\n      }\r\n    });\r\n\r\n  return (\r\n    mappedPosts &&\r\n    mappedPosts.length > 0 && (\r\n      <styled.Div\r\n        css={{\r\n          display: 'flex',\r\n          flexFlow: 'row wrap',\r\n          justifyContent: 'space-between',\r\n          marginTop: style.pixelsToUnit(30),\r\n        }}\r\n        className={BOX_ITEM_CLASSNAME}\r\n      >\r\n        {mappedPosts}\r\n        {placeholders > 0 && renderPlaceholders(placeholders)}\r\n      </styled.Div>\r\n    )\r\n  );\r\n};\r\n\r\nexport default InstagramBlock;\r\n"],"sourceRoot":""}