{"version":3,"file":"js/scripts_react_mls-featured-match-v2_components_MatchButtonStreamer_MatchButtonStreamer_js-scr-d1e5ee.js?_t=e61dec04915761b59d08","mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAEA;AAGA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AAAA;AACA;AAEA;AACA;AACA;AACA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAGA;AACA;AACA;AACA;AACA;AAEA;AACA;AAEA;AACA;AAAA;AAEA;AACA;AAAA;AAEA;AAAA;AACA;AAEA;AACA;AAAA;AAEA;AAAA;AACA;AAEA;AAAA;AAEA;AAAA;AACA;AAGA;AACA;AAAA;AAEA;AAGA;AAGA;AAAA;AAEA;AAAA;AAEA;AAAA;AACA;AAGA;AACA;AAIA;AAGA;AAGA;AACA;AAAA;AAEA;AAAA;AAGA;AACA;AAAA;AAGA;AACA;AACA;AAAA;AAGA;AAAA;AAGA;AACA;AAAA;AACA;AACA;AACA;AACA;AACA;AAGA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AAGA;AAKA;AAAA;AAGA;AAKA;AACA;AACA;AAAA;AAAA;AACA;AACA;AAAA;AAEA;AAAA;AAAA;AACA;AACA;AACA;AAAA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AAIA;AACA;AAAA;AAAA;AACA;AACA;AAAA;AAEA;AAAA;AAAA;AACA;AACA;AACA;AACA;AACA;AAAA;AAEA;AAAA;AAAA;AACA;AACA;AACA;AAAA;AAEA;AACA;AACA;AAGA;AACA;;;;;;;;;;;;;;;;;ACxLA;AAEA;AAAA;AAAA;AAIA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAMA;AAAA;AAAA;AAIA;;;;;;;;;;;;;;;;;AChBA;AAIA;AAGA;AACA;AACA;AAAA;AAGA;AACA;AAAA;AAAA;AACA;AACA;AAAA;AAIA;AAGA;AAGA;AAEA;;;;;;;;;;;;;;;;;;;AC3BA;AACA;AAEA;AAAA;AACA;AAAA;AAKA;AACA;AAGA;AAAA;AAAA;AAAA;AAAA;AAAA;AAMA;AACA;AACA;AAIA;AAGA;AAAA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAOA;AACA;AAAA;AAKA;AAAA;AAAA;;;;;;;;;;;;;;;;;AC1CA;AAGA;AAGA;AACA;AAYA;AAEA;;;;;;;;;;;;;;;;;;;;ACrBA;AACA;AACA;AAAA;AAAA;AAAA;AAKA;AAEA;AAAA;AACA;AACA;AACA;AAAA;AAKA;AACA;AAAA;AAAA;AAAA;AAKA;AAAA;AAAA;AAEA;AACA;AACA;AAAA;AAKA;AACA;AAAA;AAAA;;;;;;;;;;;;;;;;;;;;ACjCA;AACA;AACA;AAKA;AAEA;AAEA;AAAA;AACA;AACA;AAEA;AACA;AACA;AACA;AAAA;AACA;AACA;AAEA;AACA;AAEA;AAEA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAGA;AAKA;AACA;AACA;AACA;AAAA;AAAA;AACA;AACA;AAAA;AACA;AAEA;AAGA;AACA;AAOA;AAIA;AAmBA;AACA","sources":["webpack://@mlssoccer/netcore/./scripts/react/mls-featured-match-v2/components/MatchButtonStreamer/MatchButtonStreamer.js","webpack://@mlssoccer/netcore/./scripts/react/mls-featured-match-v2/components/MatchButtonStreamer/StyledMatchButtonStreamer.js","webpack://@mlssoccer/netcore/./scripts/react/shared/components/BlockheaderV2/BlockheaderV2.js","webpack://@mlssoccer/netcore/./scripts/react/shared/components/BlockheaderV2/StyledBlockheader.js","webpack://@mlssoccer/netcore/./scripts/react/shared/components/VenueBroadcasterBar/DividedVenueBroadcaster.js","webpack://@mlssoccer/netcore/./scripts/react/shared/components/VenueBroadcasterBar/StyledVenueBroadcasterBar.js","webpack://@mlssoccer/netcore/./scripts/react/shared/components/VenueBroadcasterBar/VenueBroadcasterBar.js"],"sourcesContent":["import React, { useState } from \"react\";\n\nimport ReactDOM from \"react-dom\";\nimport {\n  trackFeaturedMatchClick,\n  trackMatchInteraction,\n} from \"../../../../libraries/_modules/tracking/helpers\";\nimport { statusTypes, useMatchData } from \"../../../mls-match-list/utils\";\nimport { Link } from \"../../../shared/components/Link/Link\";\nimport MatchButton from \"../../../shared/components/MatchButton/MatchButton\";\nimport TicketModal from \"../../../shared/components/TicketModal/main\";\nimport { WatchOnAppleIcon } from \"../../../shared/components/WatchOnAppleIcon/WatchOnAppleIcon\";\nimport { useReactAppState } from \"../../../shared/containers/utils\";\nimport { backgroundTypes } from \"../../../shared/styled/Theme\";\nimport { StyledMatchButtonStreamer } from \"./StyledMatchButtonStreamer\";\n\nconst MatchButtonStreamer = ({\n  backgroundColor = backgroundTypes.black,\n  size = \"100%\",\n}) => {\n  const { t, urlList, directoryList } = useReactAppState();\n  const [isOpen, setIsOpen] = useState(false);\n  const {\n    appleStreamURL,\n    competition,\n    promoInfo,\n    season,\n    slug,\n    status,\n    homeClubData,\n    awayClubData,\n  } = useMatchData();\n\n  const { baseUrl } = urlList || {};\n  const { matchHubDir } = directoryList || {};\n  const { slug: competitionSlug } = competition || {};\n  const { optaId: seasonOptaId } = season || {};\n  const matchPageUrl = `${baseUrl}/${matchHubDir}/${competitionSlug}/${seasonOptaId}/matches/${slug}`;\n\n  const homeShortName = homeClubData?.shortName;\n  const awayShortName = awayClubData?.shortName;\n\n  const getAriaLabelFromStatus = () => {\n    switch (status?.abbreviation) {\n      case statusTypes.pre:\n        if (promoInfo?.firstPartyTickets?.url || promoInfo?.thirdPartyTickets?.url) {\n          return t(\"fm_cta_buy_tickets\")?.replace(\"{0}\", homeShortName).replace(\"{1}\", awayShortName);\n        } else {\n          return t(\"fm_cta_match_details\")?.replace(\"{0}\", homeShortName).replace(\"{1}\", awayShortName);\n        }\n      case statusTypes.live:\n        if (appleStreamURL) {\n          return t(\"fm_cta_watch_on_atv\")?.replace(\"{0}\", homeShortName).replace(\"{1}\", awayShortName);\n        } else {\n          return t(\"fm_cta_match_details\")?.replace(\"{0}\", homeShortName).replace(\"{1}\", awayShortName);\n        }\n      case statusTypes.post:\n        return t(\"fm_cta_match_details\")?.replace(\"{0}\", homeShortName).replace(\"{1}\", awayShortName);\n      default:\n        return null;\n    }\n  };\n\n  const getUrlFromStatus = () => {\n    switch (status?.abbreviation) {\n      case statusTypes.pre:\n        return (\n          promoInfo?.firstPartyTickets?.url ||\n          promoInfo?.thirdPartyTickets?.url ||\n          matchPageUrl\n        );\n      case statusTypes.live:\n        return appleStreamURL || matchPageUrl;\n      case statusTypes.post:\n        return matchPageUrl;\n      default:\n        return null;\n    }\n  };\n\n  const getCtaFromStatus = () => {\n    if (\n      status?.abbreviation === statusTypes.pre &&\n      (promoInfo?.firstPartyTickets?.url || promoInfo?.thirdPartyTickets?.url)\n    ) {\n      return (\n        promoInfo?.firstPartyTickets?.displayText ||\n        promoInfo?.thirdPartyTickets?.displayText ||\n        t(\"buy_tickets\")\n      );\n    }\n    if (status?.abbreviation === statusTypes.live && appleStreamURL) {\n      return <WatchOnAppleIcon width={81} height={14} />;\n    }\n    return t(\"match_details\");\n  };\n\n  const getLiveCta = () => {\n    return `${t(\"match_watch_on\")} ${t(\"appletv\")}`.toLowerCase();\n  };\n\n  const getCtaForTacking = () => {\n    if (status?.abbreviation === statusTypes.live && appleStreamURL) {\n      return getLiveCta();\n    }\n\n    return getCtaFromStatus();\n  };\n\n  const trackButton = () => {\n    trackMatchInteraction({\n      clickType: \"button\",\n      clickItem: getCtaForTacking(),\n      match: slug,\n      matchState: status?.abbreviation,\n      competition: competition?.shortName,\n    });\n\n    trackFeaturedMatchClick({\n      clickType: \"match\",\n      clickItem: getLiveCta(),\n      match: slug,\n      matchState: status?.abbreviation,\n      competition: competition?.shortName,\n    });\n  };\n\n  if (\n    status?.abbreviation === statusTypes.cancelled ||\n    status?.abbreviation === statusTypes.abandoned ||\n    status?.abbreviation === statusTypes.postponed\n  ) {\n    return null;\n  }\n\n  const shouldOpenTicketModal =\n    status?.abbreviation === statusTypes.pre &&\n    promoInfo?.firstPartyTickets?.url &&\n    promoInfo?.thirdPartyTickets?.url;\n\n  if (shouldOpenTicketModal) {\n    return (\n      <StyledMatchButtonStreamer\n        backgroundColor={backgroundColor}\n        className=\"mls-c-matchbutton-streamer\"\n      >\n        <MatchButton\n          backgroundColor={backgroundColor}\n          size={size}\n          onClick={() => setIsOpen(true)}\n        >\n          {t(\"buy_tickets\")}\n        </MatchButton>\n        {ReactDOM.createPortal(\n          <TicketModal isOpen={isOpen} onCloseModal={() => setIsOpen(false)} />,\n          document.getElementById(\"react-root\"),\n        )}\n      </StyledMatchButtonStreamer>\n    );\n  }\n\n  return (\n    <StyledMatchButtonStreamer\n      backgroundColor={backgroundColor}\n      className=\"mls-c-matchbutton-streamer\"\n    >\n      <Link\n        url={getUrlFromStatus()}\n        target={status?.abbreviation !== statusTypes.post ? \"_blank\" : \"_self\"}\n        title={getAriaLabelFromStatus()}\n        ariaLabel={getAriaLabelFromStatus()}\n        rel=\"noopener noreferrer\"\n      >\n        <MatchButton\n          backgroundColor={backgroundColor}\n          size={size}\n          onClick={() => trackButton()}\n        >\n          {getCtaFromStatus()}\n        </MatchButton>\n      </Link>\n    </StyledMatchButtonStreamer>\n  );\n};\nexport default MatchButtonStreamer;\n","import styled from \"styled-components\";\n\nconst StyledMatchButtonStreamer = styled.div`\n  width: 100%;\n`;\n\nconst StyledMatchButtonStreamerWrapper = styled.div`\n  width: 100%;\n  .mls-match-button-wrapper {\n    &.--canc,\n    &.--ppd,\n    &.--aban {\n      height: ${(props) => props.theme.figma.base.scale_4_50}px;\n    }\n  }\n`;\nexport { StyledMatchButtonStreamer, StyledMatchButtonStreamerWrapper };\n","import React from \"react\";\nimport {\n  StyledBlockheader,\n  StyledBlockheaderSubtitle,\n  StyledBlockheaderTitle,\n} from \"./StyledBlockheader\";\n\nconst BlockheaderV2 = ({ title, subtitle, hasBorderBottom = false }) => {\n  if (!title) {\n    return null;\n  }\n\n  return (\n    <StyledBlockheader\n      className=\"mls-c-blockheader\"\n      hasBorderBottom={hasBorderBottom}\n    >\n      <StyledBlockheaderTitle className=\"mls-c-blockheader__title\">\n        {title}\n      </StyledBlockheaderTitle>\n      <StyledBlockheaderSubtitle className=\"mls-c-blockheader__subtitle\">\n        {subtitle}\n      </StyledBlockheaderSubtitle>\n    </StyledBlockheader>\n  );\n};\n\nexport default BlockheaderV2;\n","import styled from \"styled-components\";\nimport { themeTypes } from \"../../styled/Theme\";\n\nexport const StyledBlockheader = styled.div`\n  font-family: ${(props) => props.theme.figma.base.fontfamily_mlstifo_standard};\n  width: 100%;\n  border-bottom: ${(props) =>\n    props.hasBorderBottom\n      ? `1px solid ${props.theme.figma.base.color_offwhite_100}`\n      : \"none\"};\n  padding-bottom: ${(props) => props.hasBorderBottom ? \"10px\" : 0};\n`;\n\nexport const StyledBlockheaderTitle = styled.h2`\n  max-width: 250px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  font-size: ${(props) =>\n    props.theme.mixins.pxToRem(props.theme.figma.base.scale_2_25)};\n  font-weight: ${(props) => props.theme.figma.base.fontweight_bold};\n  line-height: ${(props) => props.theme.figma.base.scale_2_75}px;\n  color: ${(props) =>\n    props.theme.type == themeTypes.light\n      ? props.theme.figma.base.color_offblack_100\n      : props.theme.figma.base.color_white_100};\n`;\n\nexport const StyledBlockheaderSubtitle = styled.div`\n  font-family: ${(props) => props.theme.figma.base.fontfamily_mlstifo_headline};\n  font-weight: 500;\n  max-width: 250px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  font-size: ${(props) =>\n    props.theme.mixins.pxToRem(props.theme.figma.base.scale_1_50)};\n  line-height: ${(props) => props.theme.figma.base.scale_2}px;\n  letter-spacing: 0.04em;\n  color: ${(props) =>\n    props.theme.type === themeTypes.light\n      ? props.theme.figma.base.color_black_100\n      : props.theme.figma.base.color_white_80};\n  opacity: 0.5;\n  margin-top: 4px;\n`;\n","import React from \"react\";\nimport {\n  StyledVenueBroadcasterBar,\n  StyledVenueBroadcasterWrapper,\n} from \"./StyledVenueBroadcasterBar\";\n\nfunction DividedVenueBroadcaster({ venue, mergedProvidersText }) {\n  return (\n    <StyledVenueBroadcasterWrapper className=\"mls-c-venue-broadcaster-bar --single-broadcaster\">\n      {venue.name && (\n        <StyledVenueBroadcasterBar>{venue.name}</StyledVenueBroadcasterBar>\n      )}\n      {mergedProvidersText && (\n        <StyledVenueBroadcasterBar>\n          {mergedProvidersText}\n        </StyledVenueBroadcasterBar>\n      )}\n    </StyledVenueBroadcasterWrapper>\n  );\n}\n\nexport default DividedVenueBroadcaster;\n","import styled from \"styled-components\";\nimport { themeTypes } from \"../../styled/Theme\";\nexport const StyledVenueBroadcasterBarWrapper = styled.div`\n  display: flex;\n  flex-direction: row;\n`;\n\nexport const StyledVenueBroadcasterWrapper = styled.div``;\n\nexport const StyledVenueBroadcasterBar = styled.div`\n  font-family: ${(props) => props.theme.figma.base.fontfamily_mlstifo_headline};\n  font-size: ${(props) => props.theme.mixins.pxToRem(12)};\n  line-height: ${(props) => props.theme.figma.base.scale_1_75}px;\n  letter-spacing: 0.04em;\n  color: ${(props) =>\n    props.theme.type == themeTypes.light\n      ? props.theme.figma.base.color_black_100\n      : props.theme.figma.base.color_white_100};\n  opacity: ${(props) => (props.theme.type == themeTypes.light ? 0.45 : 0.6)};\n  font-weight: 500;\n  text-align: center;\n  position: relative;\n`;\nexport const StyledSeparator = styled.span`\n  margin: 0 10px;\n  font-family: ${(props) => props.theme.figma.base.fontfamily_mlstifo_headline};\n  font-size: ${(props) => props.theme.mixins.pxToRem(12)};\n  line-height: ${(props) => props.theme.figma.base.scale_1_75}px;\n  letter-spacing: 0.04em;\n  color: ${(props) =>\n    props.theme.type == themeTypes.light\n      ? props.theme.figma.base.color_black_100\n      : props.theme.figma.base.color_white_100};\n  opacity: ${(props) => (props.theme.type == themeTypes.light ? 0.45 : 0.6)};\n  font-weight: 500;\n  z-index: 1;\n`;\n","import React from \"react\";\nimport { useReactAppState } from \"../../containers/utils\";\nimport { composeGeoLocatedProviders } from \"../../utils\";\nimport {\n  StyledVenueBroadcasterBar,\n  StyledVenueBroadcasterBarWrapper,\n  StyledSeparator,\n  StyledVenueBroadcasterWrapper,\n} from \"./StyledVenueBroadcasterBar\";\nimport DividedVenueBroadcaster from \"./DividedVenueBroadcaster\";\n\nconst VenueBroadcasterBar = ({\n  venue,\n  mediaProviders,\n  breakStadiumAndBroadcaster,\n}) => {\n  const { location } = useReactAppState();\n  const { country } = location || {};\n  const { streaming, national, radio } = composeGeoLocatedProviders(\n    mediaProviders,\n    country\n  );\n  const internationalStreamers =\n    mediaProviders?.allProvidersList?.filter(\n      (provider) =>\n        provider?.broadcasterTypeLabel === \"brd_type_international_streaming\"\n    ) || [];\n  const {\n    homeLinear,\n    awayLinear,\n    homeStreaming,\n    awayStreaming,\n    clubLinear,\n    clubStreaming,\n    clubRadio,\n  } = mediaProviders || {};\n  const mergedProviders = [\n    ...internationalStreamers,\n    ...national,\n    ...streaming,\n    ...radio,\n    ...(homeLinear != null ? homeLinear : []),\n    ...(awayLinear != null ? awayLinear : []),\n    ...(homeStreaming != null ? homeStreaming : []),\n    ...(awayStreaming != null ? awayStreaming : []),\n    ...(clubLinear != null ? clubLinear : []),\n    ...(clubStreaming != null ? clubStreaming : []),\n    ...(clubRadio != null ? clubRadio : []),\n  ];\n\n  const mergedProvidersText = mergedProviders\n    ?.filter((provider) => provider?.broadcasterName)\n    ?.flatMap((provider) => provider?.broadcasterName)\n    .join(\", \");\n\n  if (breakStadiumAndBroadcaster) {\n    if (venue?.name || mergedProvidersText) {\n      return (\n        <DividedVenueBroadcaster\n          venue={venue}\n          mergedProvidersText={mergedProvidersText}\n        />\n      );\n    }\n  }\n\n  if (mergedProviders?.length === 1 && venue?.name) {\n    return (\n      <StyledVenueBroadcasterBar className=\"mls-c-venue-broadcaster-bar --single-broadcaster\">\n        {venue.name}\n        <StyledSeparator className=\"mls-c-venue-broadcaster-bar__dot\">\n          •\n        </StyledSeparator>\n        {mergedProviders[0].broadcasterName}\n      </StyledVenueBroadcasterBar>\n    );\n  }\n\n  return (\n    <StyledVenueBroadcasterBarWrapper className=\"mls-c-venue-broadcaster-bar-wrapper\">\n      {venue?.name ? (\n        <StyledVenueBroadcasterBar className=\"mls-c-venue-broadcaster-bar\">\n          {venue?.name}\n        </StyledVenueBroadcasterBar>\n      ) : null}\n      {venue?.name && mergedProvidersText && (\n        <StyledSeparator className=\"mls-c-venue-broadcaster-bar__dot\">\n          •\n        </StyledSeparator>\n      )}\n      {mergedProvidersText ? (\n        <StyledVenueBroadcasterBar className=\"mls-c-venue-broadcaster-bar\">\n          {mergedProvidersText}\n        </StyledVenueBroadcasterBar>\n      ) : null}\n    </StyledVenueBroadcasterBarWrapper>\n  );\n};\nexport default VenueBroadcasterBar;\n"],"names":[],"sourceRoot":""}