{"version":3,"sources":["components/MultiMediaEmbed/StyledMediaItem.ts","components/MediaEmbed/StyledMediaEmbed.ts","components/MediaEmbed/BrightcovePlayer.tsx","components/MediaEmbed/index.tsx","components/MediaEmbed/validation.ts"],"names":["brightcoveVideoClassname","Container","styled","div","theme","section","StyledContainer","$type","css","aspect","mq","$width","hideOnPrint","EditorOverlay","editMode","PlayerOverlay","multiMediaEmbed","playButtonBackground","lessThan","FooterWrapper","action","ArrowWrapper","span","svg","YoutubeWrapper","BrightcovePlayer","id","accountId","playerId","brightcoveURL","playerRef","useRef","idRef","getRandomId","domId","current","isScriptLoaded","useScript","useEffect","canUseDOM","bc","window","class","controls","ref","compose","withEditMode","withDataSourceValidation","field","errorMessage","required","rendering","datasource","fields","data","mediaPlayerConfigs","targetItem","accessibilityTitle","jss","value","description","embedType","mediaId","heading","headingLevel","params","width","uid","libsynEndpoint","libsynURL","brightcoveAccountID","brightcovePlayerID","brightcoveURLTemplate","replace","youtubeURL","MEDIAPLAYERS","type","endpoint","getEmbedType","className","HeadingWithDescription","headingField","descriptionField","allowFullScreen","frameBorder","src","title","setIframeURL"],"mappings":"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","file":"static/js/MediaEmbed.e6e547f2.chunk.js","sourcesContent":["import styled, { css } from 'styled-components';\r\nimport {\r\n  aspect,\r\n  hideOnPrint,\r\n  mq,\r\n  section,\r\n  svg\r\n} from '_utils/styles';\r\n\r\nexport const brightcoveVideoClassname = 'bc-video';\r\n\r\nexport const Container = styled.div`\r\n  display: flex;\r\n  flex-direction: column;\r\n  ${({ theme }) => section({ theme })};\r\n  height: auto;\r\n`;\r\n\r\nexport const StyledContainer = styled.div`\r\n${(theme) => {\r\n  if (theme.$type === 'podcast') {\r\n\r\n    return (`\r\n      margin-left: -0.75rem;\r\n      margin-right: -0.75rem;\r\n      position: relative;\r\n      height: 9rem;\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  } else {\r\n    return css`\r\n      ${aspect(16, 9)}\r\n      margin-left: auto;\r\n      margin-right: auto;\r\n      min-height: 222px;\r\n      margin-bottom: 12px;\r\n      `;\r\n  }\r\n}};\r\n\r\n  width: 100%;\r\n\r\n  ${mq('md')} {\r\n    width: ${(theme) => theme.$width || `100%`};\r\n  }\r\n\r\n  iframe,\r\n  .${brightcoveVideoClassname} {\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  .${brightcoveVideoClassname} {\r\n    height: 100%;\r\n    width: 100%;\r\n  }\r\n\r\n  \r\n\r\n  ${hideOnPrint}\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 PlayerOverlay = styled.div`\r\n  bottom: 0;\r\n  display: block;\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  cursor: pointer;\r\n  &:hover + .video-js  {\r\n    .vjs-big-play-button {\r\n      background-color: ${({ theme }) => theme.multiMediaEmbed.playButtonBackground};\r\n    }\r\n  }\r\n\r\n  ${mq.lessThan('md')} {\r\n    display: none;\r\n  }\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 FooterWrapper = styled.div`\r\n  display: flex;\r\n  flex-direction: row;\r\n  max-width: 250px;\r\n  font-weight: bold;\r\n  color: ${({ theme }) => theme.multiMediaEmbed.action};\r\n  cursor: pointer;\r\n  ${mq.lessThan('md')} {\r\n    display: none;\r\n  }\r\n`;\r\n\r\nexport const ArrowWrapper = styled.span`\r\n  ${svg(24, 24)}\r\n  display: flex;\r\n  width: 24px;\r\n  margin-left: 6px;\r\n  path {\r\n    fill: ${({ theme }) => theme.multiMediaEmbed.action};\r\n  }\r\n`;\r\n\r\nexport const YoutubeWrapper = styled.div`\r\n  height: 100%;\r\n  width: 100%;\r\n  iframe {\r\n    height: 100%;\r\n    width: 100%;\r\n  }\r\n}\r\n\r\n\r\n`\r\n\r\n","import styled , { css } from 'styled-components';\r\nimport {\r\n  aspect,\r\n  hideOnPrint,\r\n  mq,\r\n  section,\r\n} from '_utils/styles';\r\n\r\nexport const brightcoveVideoClassname = 'bc-video';\r\n\r\nexport const Container = styled.div`\r\n  ${({ theme }) => section({ theme })}\r\n`;\r\n\r\nexport const StyledContainer = styled.div`\r\n  ${(theme) => {\r\n    if (theme.$type === 'podcast') {\r\n\r\n      return (`\r\n        margin-left: -0.75rem;\r\n        margin-right: -0.75rem;\r\n        position: relative;\r\n        height: 9rem;\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    } else {\r\n      return css`\r\n        ${aspect(16, 9)}\r\n        margin-left: auto;\r\n        margin-right: auto;\r\n        `;\r\n    }\r\n  }};\r\n  \r\n  width: 100%;\r\n\r\n  ${mq('md')} {\r\n    width: ${(theme) => theme.$width || `100%`};\r\n  }\r\n\r\n  iframe,\r\n  .${brightcoveVideoClassname} {\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  .${brightcoveVideoClassname} {\r\n    height: 100%;\r\n    width: 100%;\r\n  }\r\n\r\n  ${hideOnPrint}\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","import canUseDOM from 'exenv';\r\nimport React, { useEffect, useRef } from 'react';\r\nimport useScript from '_utils/hooks/useScript';\r\nimport { getRandomId } from '_utils/data/';\r\n\r\nimport { BrightcoveVideoProps } from './definitions';\r\nimport { brightcoveVideoClassname } from './StyledMediaEmbed';\r\n\r\nconst BrightcovePlayer: React.FC<BrightcoveVideoProps> = ({\r\n  id,\r\n  accountId,\r\n  playerId,\r\n  brightcoveURL\r\n}) => {\r\n\r\n  const playerRef = useRef<HTMLElement>(null);\r\n  const idRef = useRef(getRandomId());\r\n  const domId = `player_${idRef?.current}`;\r\n\r\n  const [isScriptLoaded] = useScript(brightcoveURL);\r\n\r\n  useEffect(() => {\r\n\r\n    if (!canUseDOM) {\r\n      return;\r\n    }\r\n\r\n    const bc = window?.bc;\r\n\r\n    if (isScriptLoaded) {\r\n      // re-initialize player\r\n      if (window?.bc && playerRef?.current) {\r\n        bc(playerRef?.current);\r\n      }\r\n    }\r\n  }, [isScriptLoaded]);\r\n\r\n  return (\r\n    <video-js\r\n      class={`video-js ${brightcoveVideoClassname}`}\r\n      controls\r\n      data-account={accountId}\r\n      data-application-id\r\n      data-embed=\"default\"\r\n      data-player={playerId}\r\n      data-video-id={id}\r\n      id={domId}\r\n      ref={playerRef}\r\n    />\r\n  )\r\n}\r\n\r\nexport default BrightcovePlayer;\r\n","import { compose } from 'ramda';\r\nimport React from 'react';\r\n\r\nimport { withDataSourceValidation, withEditMode } from '_containers/BaseComponent';\r\n\r\nimport HeadingWithDescription from '_utils/components/HeadingWithDescription';\r\nimport { mediaValidators } from './validation';\r\nimport { MediaEmbedProps, MediaPlayerType } from './definitions';\r\n\r\nimport BrightcovePlayer from './BrightcovePlayer';\r\nimport { Container, EditorOverlay, StyledContainer } from './StyledMediaEmbed';\r\nimport { YoutubeWrapper } from '_components/MultiMediaEmbed/StyledMediaItem';\r\n\r\nconst MediaEmbed: React.FC<MediaEmbedProps> = ({\r\n  rendering,\r\n  editMode }) => {\r\n  const datasource = rendering?.fields?.data?.datasource;\r\n  const mediaPlayerConfigs = datasource?.mediaPlayerConfigs?.targetItem;\r\n  const accessibilityTitle = datasource?.accessibilityTitle?.jss?.value;\r\n  const description = datasource?.description?.jss;\r\n  const embedType = datasource?.embedType?.jss?.value;\r\n  const mediaId = datasource?.mediaId?.jss?.value;\r\n  const heading = datasource?.heading?.jss;\r\n  const headingLevel = rendering?.params?.headingLevel || 'h3';\r\n  const width = datasource?.width?.jss?.value;\r\n  const uid = rendering?.uid;\r\n  const libsynEndpoint = mediaPlayerConfigs?.libsynURL?.value;\r\n  const accountId = mediaPlayerConfigs?.brightcoveAccountID?.value;\r\n  const playerId = mediaPlayerConfigs?.brightcovePlayerID?.value;\r\n  const brightcoveURLTemplate = mediaPlayerConfigs?.brightcoveURL?.value;\r\n  const brightcoveURL = brightcoveURLTemplate?.replace('{accountId}', accountId)?.replace('{playerId}', playerId);\r\n  const youtubeURL = mediaPlayerConfigs?.youtubeURL?.value;\r\n\r\n  const MEDIAPLAYERS: MediaPlayerType = {\r\n    'BrightCove Video': {\r\n      type: 'video'\r\n    },\r\n    \"Youtube Video\": {\r\n      type: \"youtube\",\r\n    },\r\n    'Libsyn Podcast': {\r\n      endpoint: libsynEndpoint,\r\n      type: 'podcast'\r\n    }\r\n  }\r\n\r\n  const getEmbedType = (type) => {\r\n    if (!type || !MEDIAPLAYERS[type]) {\r\n      return null;\r\n    }\r\n    return MEDIAPLAYERS[type].type;\r\n  }\r\n\r\n  const setIframeURL = (type, id) => {\r\n    if (!id || !MEDIAPLAYERS[type]) {\r\n      return null;\r\n    }\r\n    // Replacing {mediaid} in the endpoint URL. Example format: 'https://html5-player.libsyn.com/embed/episode/id/{mediaid}/height/90/theme/custom/thumbnail/yes/direction/backward/render-playlist/no/custom-color/87A93A/',\r\n    return MEDIAPLAYERS[type]?.endpoint?.replace('{mediaid}', id);\r\n  }\r\n  \r\n  const type = getEmbedType(embedType);\r\n  \r\n  return (\r\n    <Container\r\n      className=\"media-embed\"\r\n      data-component\r\n      id={uid}\r\n    >\r\n      <HeadingWithDescription\r\n        headingField={heading}\r\n        descriptionField={description}\r\n        headingLevel={headingLevel}\r\n      />\r\n      <StyledContainer $width={width} $type={type}>\r\n        <EditorOverlay editMode={editMode} />\r\n        {\r\n          type === 'video' ?\r\n            <BrightcovePlayer\r\n              id={mediaId}\r\n              accountId={accountId}\r\n              playerId={playerId}\r\n              brightcoveURL={brightcoveURL}\r\n            />\r\n            : type === \"youtube\" ? (\r\n              <YoutubeWrapper>\r\n                <iframe\r\n                  allowFullScreen\r\n                  frameBorder=\"0\"\r\n                  src={`${youtubeURL}/${mediaId}`}\r\n                  title={accessibilityTitle}\r\n                />\r\n              </YoutubeWrapper>\r\n              )\r\n            :\r\n            <iframe\r\n              allowFullScreen\r\n              frameBorder=\"0\"\r\n              src={setIframeURL(embedType, mediaId)}\r\n              title={accessibilityTitle}\r\n            />\r\n        }\r\n      </StyledContainer>\r\n    </Container>\r\n  )\r\n}\r\n\r\nexport default compose(withEditMode, withDataSourceValidation(mediaValidators))(MediaEmbed);\r\n","import * as validators from '_utils/validationChecks';\r\nimport { SitecoreFieldValidator } from '_utils/validationChecks/definitions'\r\n\r\nexport const mediaValidators: 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  },\r\n  {\r\n    field: 'rendering.fields.data.datasource.embedType',\r\n    errorMessage: 'An Embed Type is required ',\r\n    required: true\r\n  },\r\n  {\r\n    field: 'rendering.fields.data.datasource.accessibilityTitle',\r\n    errorMessage: 'An accessibility title is required ',\r\n    required: true\r\n  }\r\n];\r\n"],"sourceRoot":""}