{"version":3,"sources":["components/PodcastEpisode/StyledPodcastEpisode.ts","components/PodcastEpisode/index.tsx","components/PodcastEpisode/validation.ts"],"names":["Container","styled","div","Header","HeadingContainer","Heading","h4","headingH4","SubHeading","h5","tag14","theme","spacing","my","Description","subheading2","mt","StyledPlayerContainer","EditorOverlay","editMode","LinkButton","Link","linkWithoutVisited","button","mq","LinkWrapper","pl","md","CTA","props","link","className","fallbackTitle","field","linkTheme","compose","withEditMode","withDataSourceValidation","errorMessage","required","checkContextItem","allowEditModeRenderOnError","rendering","fields","data","datasource","contextItem","normalized","normalizeJssFields","accessibilityTitle","value","heading","description","libsynEndpoint","mediaPlayerConfigs","targetItem","libsynURL","mediaId","subHeading","uid","ctaDictionaryLabel","getDictionaryItem","shouldShowCTA","href","text","id","style","border","scrolling","allowFullScreen","webkitAllowFullScreen","mozAllowFullScreen","oAllowFullScreen","msAllowFullScreen","src","replace","title"],"mappings":"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","file":"static/js/PodcastEpisode.04a81d3a.chunk.js","sourcesContent":["import styled from 'styled-components';\r\n\r\nimport {\r\n  Link,\r\n} from '_utils/components';\r\nimport { spacing } from '_utils/props';\r\n\r\nimport {\r\n  button,\r\n  headingH4,\r\n  linkWithoutVisited,\r\n  mq,\r\n  subheading2,\r\n  tag14,\r\n} from '_utils/styles';\r\n\r\nexport const Container = styled.div``;\r\n\r\nexport const Header = styled.div`\r\n  display: flex;\r\n  flex-direction: row;\r\n`;\r\n\r\nexport const HeadingContainer = styled.div`\r\n  display: flex;\r\n  flex-direction: column;\r\n  flex-grow: 1;\r\n`;\r\n\r\nexport const Heading = styled.h4`\r\n  ${headingH4}\r\n  margin-bottom: 0 !important;\r\n`;\r\n\r\nexport const SubHeading = styled.h5`\r\n  ${tag14}\r\n  ${({ theme }) => spacing({ theme, my: 0 })}\r\n`;\r\n\r\nexport const Description = styled.div`\r\n  ${subheading2}\r\n  ${({ theme }) => spacing({ theme, mt: 3 })}\r\n`;\r\n\r\nexport const StyledPlayerContainer = styled.div`\r\n  /* This is due to the audio itself having a 0.75rem left and right margin */\r\n  margin-left: -0.75rem;\r\n  margin-right: -0.75rem;\r\n  position: relative;\r\n  width: 100%;\r\n  height: 9rem;\r\n\r\n  ${({ theme }) => spacing({ theme, mt: 3 })}\r\n\r\n  &:before {\r\n    content: '';\r\n    display: block;\r\n    width: 100%;\r\n    padding-top: 90px;\r\n  }\r\n\r\n  iframe {\r\n    bottom: 0;\r\n    height: 100%;\r\n    left: 0;\r\n    position: absolute;\r\n    top: 0;\r\n    width: 100%;\r\n  }\r\n`;\r\n\r\nexport const EditorOverlay = styled.div`\r\n  bottom: 0;\r\n  display: ${(theme) => theme.editMode ? `block` : `none`};\r\n  height: 100%;\r\n  left: 0;\r\n  position: absolute;\r\n  top: 0;\r\n  width: 100%;\r\n  z-index: 100;\r\n`;\r\n\r\nexport const EditorMsg = styled.div`\r\n  font-size: 20px;\r\n  padding: 30px;\r\n  text-align: center;\r\n`;\r\n\r\nexport const LinkButton = styled(Link)`\r\n  a {\r\n    ${linkWithoutVisited}\r\n    ${button('slim', 'tertiary')}\r\n    width: 100%;\r\n\r\n    ${mq('md')} {\r\n      width: auto;\r\n    }\r\n  }\r\n`;\r\n\r\nexport const LinkWrapper = styled.div`\r\n  ${({ theme }) => spacing(\r\n  {\r\n    theme,\r\n    pl: { md: 4 },\r\n    mt: 3,\r\n  })};\r\n\r\n  &.hideOnMobile {\r\n    display: none;\r\n  }\r\n\r\n  ${mq('md')} {\r\n    flex-shrink: 0;\r\n\r\n    &.hideOnMobile {\r\n      display: block;\r\n    }\r\n\r\n    &.showOnMobile {\r\n      display: none;\r\n    }\r\n\r\n   ${({ theme }) => spacing({ theme, my: 0 })};\r\n  }\r\n\r\n  @media print {\r\n    display: none !important;\r\n  }\r\n`;","import { compose } from 'ramda';\r\nimport React from 'react';\r\n\r\n\r\nimport {\r\n  withDataSourceValidation,\r\n  withEditMode,\r\n} from '_containers/BaseComponent';\r\n\r\nimport { getDictionaryItem } from '_utils/data/dictionaryItem';\r\nimport { normalizeJssFields } from '_utils/helpers/jss';\r\n\r\nimport { PodcastEpisodeProps } from './definitions';\r\nimport {\r\n  Container,\r\n  Description,\r\n  EditorOverlay,\r\n  Header,\r\n  Heading,\r\n  HeadingContainer,\r\n  LinkButton,\r\n  LinkWrapper,\r\n  StyledPlayerContainer,\r\n  SubHeading,\r\n} from './StyledPodcastEpisode';\r\nimport { podcastValidators } from './validation';\r\n\r\nconst CTA = (props) => {\r\n  const { link, className } = props;\r\n  return (\r\n    <LinkWrapper className={className}>\r\n      <LinkButton\r\n        fallbackTitle={link?.fallbackTitle}\r\n        field={link}\r\n        linkTheme=\"featured\"\r\n      />\r\n    </LinkWrapper>\r\n  );\r\n}\r\n\r\nconst PodcastEpisode: React.FC<PodcastEpisodeProps> = ({\r\n  editMode,\r\n  rendering,\r\n}) => {\r\n  const fields = rendering?.fields?.data?.datasource || rendering?.fields?.data?.contextItem || {};\r\n  const normalized = normalizeJssFields(fields);\r\n  const accessibilityTitle = normalized?.accessibilityTitle?.value || normalized?.heading?.value || 'podcast episode';\r\n  const description = normalized?.description?.value;\r\n  const heading = normalized?.heading?.value;\r\n  const libsynEndpoint = normalized?.mediaPlayerConfigs?.targetItem?.libsynURL?.value;\r\n  const link = normalized?.link;\r\n  const mediaId = normalized?.mediaId?.value;\r\n  const subHeading = normalized?.subHeading?.value;\r\n  const uid = rendering?.uid;\r\n\r\n  const ctaDictionaryLabel = getDictionaryItem('podcast-cta-label', 'See full details');\r\n  const shouldShowCTA: boolean = !!(editMode || (link && link?.value?.href));\r\n\r\n  // override CTA label to use dictionary item\r\n  if (link?.value?.href) {\r\n    link.value.text = ctaDictionaryLabel;\r\n  }\r\n\r\n  return (\r\n    <Container\r\n      className=\"podcast\"\r\n      data-component\r\n      id={uid}\r\n    >\r\n      <Header>\r\n        <HeadingContainer>\r\n          <SubHeading>{subHeading}</SubHeading>\r\n          <Heading>{heading}</Heading>\r\n        </HeadingContainer>\r\n        {\r\n          shouldShowCTA &&\r\n          <CTA\r\n            className=\"hideOnMobile\"\r\n            link={link}\r\n          />\r\n        }\r\n      </Header>\r\n      <Description>\r\n        {description}\r\n      </Description>\r\n      {/* mobile-only CTA */}\r\n      {\r\n        shouldShowCTA &&\r\n        <CTA\r\n          className=\"showOnMobile\"\r\n          link={link}\r\n        />\r\n      }\r\n\r\n      <StyledPlayerContainer>\r\n        <EditorOverlay editMode={editMode} />\r\n        <iframe\r\n          style={{ border: 'none' }}\r\n          scrolling='no'\r\n          allowFullScreen\r\n          //NOSONAR\r\n          webkitAllowFullScreen=\"true\" \r\n          mozAllowFullScreen=\"true\" \r\n          oAllowFullScreen=\"true\" \r\n          msAllowFullScreen=\"true\"\r\n          src={libsynEndpoint?.replace('{mediaid}', mediaId)}\r\n          title={accessibilityTitle}\r\n        />\r\n      </StyledPlayerContainer>\r\n    </Container>\r\n  )\r\n}\r\n\r\nexport default compose(\r\n  withEditMode,\r\n  withDataSourceValidation(podcastValidators, false)\r\n)(PodcastEpisode);\r\n","import { SitecoreFieldValidator } from '_utils/validationChecks/definitions'\r\n\r\nexport const podcastValidators: SitecoreFieldValidator[] = [\r\n  {\r\n    field: 'rendering.fields.data.datasource.mediaId',\r\n    errorMessage: 'A Media ID is required ',\r\n    required: true,\r\n    checkContextItem: true,\r\n  },\r\n  {\r\n    allowEditModeRenderOnError: true,\r\n    field: 'rendering.fields.data.datasource.mediaPlayerConfigs.targetItem.libsynURL.value',\r\n    errorMessage: 'A Libysn player configuration is required ',\r\n    required: true,\r\n    checkContextItem: true,\r\n  },\r\n];\r\n"],"sourceRoot":""}