{"version":3,"file":"js/scripts_react_mls-match-list_v2_MatchBroadcaster_MatchBroadcaster_js-scripts_react_mls-match--2fe50e.js?_t=a2bbc6b16e80f6d3150c","mappings":";;;;;;;;;;;;;;;;;;;AAAA;AACA;AAGA;AAEA;AAKA;AAEA;AAEA;AACA;AACA;AACA;AAEA;AAGA;AAMA;AAQA;AAAA;AACA;AACA;AAGA;AACA;AAAA;AAAA;AACA;AACA;AAAA;AAWA;AAIA;;;;;;;;;;;;;;;;;;;;;;;AC5DA;AACA;AAEA;AAAA;AACA;AAAA;AAAA;AAGA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAUA;AAEA;AAAA;AAAA;AAAA;AAAA;AAAA;AAKA;AAAA;AAIA;AAAA;AAAA;AAAA;AAAA;AAAA;AAKA;AAAA;AAIA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAWA;AAGA;AAAA;AACA;AAGA;AAAA;AAAA;AAAA;AAMA;AAAA;AAAA;AAKA;;;;;;;;;;;;;;;AClEA;AACA;AACA;AAAA;AAGA;AACA;AACA;AAIA;AACA;AAAA;AAEA;AAAA;AAEA;;;;;;;;;;;;;;;;;;;;AChBA;AACA;AACA;AACA;AACA;AAEA;AACA;AAEA;AACA;AAAA;AAGA;AAOA;AAEA;;;;;;;;;;;;;;;;;;;;;ACtBA;AACA;AACA;AAKA;AAEA;AACA;AAEA;AAAA;AACA;AACA;AACA;AACA;AAEA;AACA;AAEA;AACA;AAAA;AAGA;AACA;AAAA;AAGA;AAKA;AAAA;AAAA;AACA;AACA;AAAA;AAEA;AAWA;;;;;;;;;;;;;;;;ACjDA;AAEA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACFA;AACA;AAEA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQA;AAAA;AAAA;AAAA;AAAA;AAMA;AAEA;AAAA;AAAA;AAAA;AAAA;AAMA;AAAA;AAAA;AAEA;AACA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAUA;AAAA;AACA;AAGA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAeA;AAAA;AAAA;AAAA;AASA;AAAA;AAIA;AAAA;AAAA;AAEA;AACA;AAAA;AAEA;AAAA;AAAA;AAAA;AAMA;AAAA;AAAA;AAEA;AACA;AAAA;AAEA;AAAA;AAAA;AAAA;AAMA;AAEA;AAEA;AAAA;AAAA;AAEA;AACA;AAAA;AAEA;AAAA;AAAA;AAKA;AAAA;AACA;AACA;AAAA;AAEA;AACA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAsBA;AAAA;AAAA;AAEA;AACA;AAAA;AAEA;AAAA;AAAA;AAAA;;;;;;;;;;;;;;;;AC5IA;AACA;AAEA;AACA;AAEA;AACA;AACA;AACA;AAAA;AAEA;AAAA;AACA;AAGA;AACA;AAEA;AACA;AAAA;AACA;AAGA;AACA;AAEA;;;;;;;;;;;;;;;;AC1BA;AAEA;AAAA;AACA;AACA;AACA;AAEA;AACA;AAEA;AAAA;AAAA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGA;AAAA;AAAA;AACA;AACA;AACA;AAAA;AAEA;AACA;AAAA;AAAA;AACA;AACA;AACA;AAAA;AACA;AAIA","sources":["webpack://@mlssoccer/netcore/./scripts/react/mls-match-list/v2/MatchBroadcaster/MatchBroadcaster.js","webpack://@mlssoccer/netcore/./scripts/react/mls-match-list/v2/MatchBroadcaster/StyledMatchBroadcaster.js","webpack://@mlssoccer/netcore/./scripts/react/mls-match-list/v2/MatchBroadcaster/utils.js","webpack://@mlssoccer/netcore/./scripts/react/mls-match-list/v2/MatchWatch/Chevron.js","webpack://@mlssoccer/netcore/./scripts/react/mls-match-list/v2/MatchWatch/MatchWatchLive.js","webpack://@mlssoccer/netcore/./scripts/react/mls-match-list/v2/MatchWatch/StyledChevron.js","webpack://@mlssoccer/netcore/./scripts/react/mls-match-list/v2/MatchWatch/StyledMatchWatch.js","webpack://@mlssoccer/netcore/./scripts/react/shared/hooks/useIsMobile.js","webpack://@mlssoccer/netcore/./scripts/react/shared/svg/RightArrowIcon/RightArrowIcon.js"],"sourcesContent":["import React from \"react\";\nimport { useReactAppState } from \"../../../shared/containers/utils\";\nimport {\n  composeGeoLocatedProviders,\n  stringifyProviders,\n} from \"../../../shared/utils\";\nimport { statusTypes, useMatchData } from \"../../utils\";\nimport {\n  StyledMatchBroadcaster,\n  StyledMatchBroadcasterLabel,\n  StyledMatchBroadcasterStringified,\n  StyledMatchBroadcasterStringifiedWrapper,\n} from \"./StyledMatchBroadcaster\";\nimport { composeAppleProviders } from \"./utils\";\n\nexport const MatchBroadcaster = () => {\n  const { location } = useReactAppState();\n  const { country } = location || {};\n  const { mediaProviders, status } = useMatchData() || {};\n\n  const appleProviders =\n    composeAppleProviders(mediaProviders?.allProvidersList) || [];\n\n  const { national, streaming, radio } =\n    status?.abbreviation === statusTypes.pre ||\n    status?.abbreviation === statusTypes.live\n      ? composeGeoLocatedProviders(mediaProviders, country)\n      : { national: null, streaming: null, radio: null };\n\n  const broadcastersProviders = national?.length\n    ? national\n    : streaming?.length\n    ? streaming\n    : radio?.length\n    ? radio\n    : [];\n\n  const stringifiedProviders = stringifyProviders([\n    ...appleProviders,\n    ...broadcastersProviders,\n  ]);\n\n  return (\n    <StyledMatchBroadcaster\n      className=\"mls-c-match-list__match-broadcaster\"\n      title={stringifiedProviders}\n    >\n      {stringifiedProviders &&\n        (status?.abbreviation === statusTypes.live ||\n          status?.abbreviation === statusTypes.pre) && (\n          <StyledMatchBroadcasterLabel>\n            <StyledMatchBroadcasterStringifiedWrapper className=\"mls-c-match-list__broadcaster\">\n              <StyledMatchBroadcasterStringified>\n                {stringifiedProviders}\n              </StyledMatchBroadcasterStringified>\n            </StyledMatchBroadcasterStringifiedWrapper>\n          </StyledMatchBroadcasterLabel>\n        )}\n    </StyledMatchBroadcaster>\n  );\n};\n","import styled from \"styled-components\";\nimport { themeTypes } from \"../../../shared/styled/Theme\";\n\nexport const StyledMatchBroadcaster = styled.div`\n  font-family: ${(props) => props.theme.figma.base.fontfamily_mlstifo_standard};\n  font-weight: 500;\n  color: rgba(0, 0, 0, 0.4);\n  font-size: ${(props) => props.theme.mixins.pxToRem(11)};\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  overflow: hidden;\n  display: flex;\n  justify-content: center;\n  position: relative;\n  color: ${(props) =>\n    props.theme.type === themeTypes.light\n      ? props.theme.rgba.black_100_60\n      : props.theme.rgba.white_100_60};\n`;\nexport const StyledMatchBroadcasterApple = styled.span`\n  // + span {\n  //   margin-left: -2px;\n  // }\n  svg {\n    fill: ${(props) => (props.isLive ? \"#000\" : \"auto\")};\n  }\n`;\n\nexport const StyledMatchBroadcasterLabel = styled.span`\n  display: flex;\n  height: 15px;\n\n  svg {\n    fill: ${(props) => props.theme.rgba.white_178};\n  }\n`;\n\nexport const StyledMatchBroadcasterStringifiedWrapper = styled.div`\n  position: absolute;\n  left: 0;\n  width: 100%;\n  text-align: center;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  overflow: hidden;\n  color: ${(props) =>\n    props.theme.type === themeTypes.light\n      ? props.theme.rgba.black_100_60\n      : props.theme.rgba.white_100_60};\n`;\n\nexport const StyledMatchBroadcasterStringified = styled.span`\n  font-size: ${(props) => props.theme.mixins.pxToRem(10)};\n`;\n\nexport const StyledPipe = styled.span`\n  display: inline-block;\n  border-right: 1.6px solid\n    ${(props) =>\n      props.theme.type === themeTypes.light\n        ? \"rgba(0, 0, 0, 0.3)\"\n        : \"rgba(255, 255, 255, 0.3)\"};\n  margin: 0 4px;\n  height: 15px;\n`;\n\nexport const StyledMatchBroadcasterAppleWrapper = styled.div``;\n","export const composeAppleProviders = (allProviders = []) => {\n  if (!allProviders?.length) {\n    return null;\n  }\n\n  const appleProviders = allProviders?.filter((broadcaster) => {\n    return (\n      broadcaster?.broadcasterTypeLabel === \"brd_type_international_streaming\"\n    );\n  });\n\n  if (appleProviders?.length) {\n    return appleProviders;\n  } else {\n    return null;\n  }\n};\n","import React from \"react\";\nimport { Link } from \"../../../shared/components/Link/Link\";\nimport { useMatchData } from \"../../utils\";\nimport { RightArrowIcon } from \"../../../shared/svg/RightArrowIcon/RightArrowIcon\";\nimport { StyledChevron } from \"./StyledChevron\";\n\nfunction Chevron() {\n  const { matchPageUrl, matchOptaId } = useMatchData();\n\n  if (matchOptaId <= 0) {\n    return null;\n  }\n\n  return (\n    <StyledChevron>\n      <Link url={matchPageUrl} rel=\"noopener noreferrer\">\n        <RightArrowIcon width={5} height={10} />\n      </Link>\n    </StyledChevron>\n  );\n}\n\nexport default Chevron;\n","import React from \"react\";\nimport { Link } from \"../../../shared/components/Link/Link\";\nimport { WatchOnAppleIcon } from \"../../../shared/components/WatchOnAppleIcon/WatchOnAppleIcon\";\nimport {\n  StyledMatchDetails,\n  StyledMatchWatchLive,\n  StyledMatchWatchLiveButton,\n  StyledMatchWatchLiveWrapper,\n} from \"./StyledMatchWatch\";\nimport Chevron from \"./Chevron\";\nimport { useReactAppState } from \"../../../shared/containers/utils\";\n\nexport const MatchWatchLive = ({\n  appleStreamURL = null,\n  trackFn = () => null,\n  forceLightVersion = false,\n  showChevron = false,\n  matchPageUrl,\n}) => {\n  const { t } = useReactAppState();\n\n  const handleClick = () => {\n    trackFn();\n  };\n\n  if (showChevron) {\n    return <Chevron />;\n  }\n\n  return (\n    <StyledMatchWatchLive forceLightVersion={forceLightVersion}>\n      {appleStreamURL ? (\n        <StyledMatchWatchLiveWrapper onClick={handleClick}>\n          <Link url={appleStreamURL} target=\"_blank\">\n            <StyledMatchWatchLiveButton\n              className=\"mls-c-match-list__match-watch-live-button\"\n              forceLightVersion={forceLightVersion}\n            >\n              <WatchOnAppleIcon width={80} height={12} />\n            </StyledMatchWatchLiveButton>\n          </Link>\n        </StyledMatchWatchLiveWrapper>\n      ) : (\n        <StyledMatchDetails>\n          <Link url={matchPageUrl}>{t(\"match_details\")}</Link>\n        </StyledMatchDetails>\n      )}\n    </StyledMatchWatchLive>\n  );\n};\n","import styled from \"styled-components\";\n\nexport const StyledChevron = styled.div`\n  a {\n    margin-left: auto;\n    width: 20px;\n    display: block;\n\n    span {\n      svg {\n        width: 10px;\n      }\n    }\n  }\n`;\n","import styled from \"styled-components\";\nimport { themeTypes } from \"../../../shared/styled/Theme\";\n\nexport const StyledMatchWatch = styled.div`\n  width: 180px;\n  text-align: right;\n  cursor: pointer;\n  display: flex;\n  gap: 8px;\n`;\n\nexport const StyledMatchWatchPost = styled.div`\n  svg {\n    vertical-align: middle;\n  }\n`;\n\nexport const StyledMatchWatchPre = styled.div``;\n\nexport const StyledMatchWatchPreWrapper = styled.div`\n  svg {\n    vertical-align: middle;\n  }\n`;\n\nexport const StyledMatchWatchLive = styled.div`\n  text-transform: capitalize;\n  font-family: ${(props) => props.theme.figma.base.fontfamily_mlstifo_standard};\n  color: ${(props) => props.theme.figma.base.color_offblack_100};\n  font-size: ${(props) => props.theme.mixins.pxToRem(11)};\n  font-style: normal;\n  font-weight: 700;\n  line-height: 14px;\n  letter-spacing: -0.02em;\n  display: flex;\n  justify-content: flex-end;\n  gap: 4px;\n`;\n\nexport const StyledAppleTvIconWrapper = styled.div`\n  display: ${(props) => (props.showChevron ? \"inline\" : \"none\")};\n`;\n\nexport const StyledMatchWatchLiveButton = styled.div`\n  width: 140px;\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n  padding: 11px 0;\n  box-shadow: 0px 1px 2px 2px rgba(0, 0, 0, 0.07),\n    0px 0px 0px 0px rgba(0, 0, 0, 0.16);\n  border-radius: 4px;\n  background-color: ${(props) =>\n    props.forceLightVersion\n      ? props.theme.figma.base.color_white_100\n      : props.theme.type === themeTypes.light\n        ? props.theme.figma.base.color_offblack_100\n        : props.theme.figma.base.color_white_100};\n\n  svg {\n    filter: none;\n    fill: ${(props) =>\n    props.forceLightVersion\n      ? props.theme.figma.base.color_offblack_100\n      : props.theme.type === themeTypes.light\n        ? props.theme.figma.base.color_white_100\n        : props.theme.figma.base.color_offblack_100};\n  }\n`;\n\nexport const StyledMatchWatchPostLabel = styled.span`\n  text-transform: capitalize;\n  font-family: ${(props) => props.theme.figma.base.fontfamily_mlstifo_standard};\n  color: ${(props) => props.theme.figma.base.color_offblack_100};\n  opacity: 0.6;\n  font-size: ${(props) => props.theme.mixins.pxToRem(12)};\n  font-weight: 500;\n  line-height: 15px;\n  margin-right: 8px;\n`;\n\nexport const StyledMatchWatchPreLabel = styled.span`\n  text-transform: capitalize;\n  font-family: ${(props) => props.theme.figma.base.fontfamily_mlstifo_standard};\n  color: ${(props) => props.theme.figma.base.color_offblack_100};\n  opacity: 0.6;\n  font-size: ${(props) => props.theme.mixins.pxToRem(12)};\n  font-weight: 500;\n  line-height: 15px;\n  margin-right: 4px;\n`;\n\nexport const StyledMatchWatchLiveWrapper = styled.div``;\n\nexport const StyledMatchWatchLiveLabel = styled.span``;\n\nexport const StyledMatchDetails = styled.div`\n  text-transform: capitalize;\n  font-family: ${(props) => props.theme.figma.base.fontfamily_mlstifo_standard};\n  color: ${(props) => props.theme.figma.base.color_offblack_100};\n  opacity: 0.6;\n  font-size: ${(props) => props.theme.mixins.pxToRem(12)};\n  font-weight: 500;\n  line-height: .9375rem;\n`;\n\nexport const StyledMatchCTA = styled.button`\n  background-color: ${(props) => props.theme.figma.base.color_white_100};\n  border: .0625rem solid ${(props) => props.theme.figma.base.color_white_75};\n  cursor: pointer;\n  font-family: ${(props) => props.theme.figma.base.fontfamily_mlstifo_standard};\n  color: ${(props) => props.theme.figma.base.color_offblack_100};\n  font-size: ${(props) => props.theme.mixins.pxToRem(12)};\n  padding: .25rem .5rem;\n  border-radius: .25rem;\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n  height: 1.5rem;\n  box-shadow: 0px 1px 7px 3px rgba(0, 0, 0, 0.07),\n    0px 0px 0px 0px rgba(0, 0, 0, 0.16);\n\n  > img {\n    width: 1rem;\n    height: 1rem;\n    margin-left: .25rem;\n  }\n\n  svg {\n    margin-left: .25rem;\n  }\n`;\n\nexport const StyledMatchHotelBookLabel = styled.span`\n  text-transform: capitalize;\n  font-family: ${(props) => props.theme.figma.base.fontfamily_mlstifo_standard};\n  color: ${(props) => props.theme.figma.base.color_offblack_100};\n  opacity: 0.6;\n  font-size: ${(props) => props.theme.mixins.pxToRem(12)};\n  font-weight: 500;\n  line-height: .9375rem;\n  margin-right: .25rem;\n`;\n","import { useState, useEffect } from \"react\";\nconst MAX_MOBILE_WIDTH = 768;\n\nconst useIsMobile = () => {\n  const [isMobile, setIsMobile] = useState(false);\n\n  useEffect(() => {\n    const updateDeviceType = () => {\n      if (window.innerWidth < MAX_MOBILE_WIDTH) {\n        setIsMobile(true);\n      } else {\n        setIsMobile(false);\n      }\n    };\n\n    updateDeviceType();\n    window.addEventListener(\"resize\", updateDeviceType);\n\n    return () => {\n      window.removeEventListener(\"resize\", updateDeviceType);\n    };\n  }, []);\n\n  return isMobile;\n};\n\nexport default useIsMobile;\n","import React from \"react\";\n\nexport const RightArrowIcon = ({\n  width,\n  height,\n  extraClasses,\n  maskId = \"path-1-inside-1_584_528\",\n}) => {\n  return (\n    <span role=\"img\" className={extraClasses}>\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        width={width || \"100%\"}\n        height={height || \"100%\"}\n        viewBox=\"0 0 5 10\"\n        fill=\"none\"\n      >\n        <mask id={maskId} fill=\"white\">\n          <path\n            fillRule=\"evenodd\"\n            clipRule=\"evenodd\"\n            d=\"M0.384644 0.0999756L5.38464 5.09911L0.384644 10.1\"\n          />\n        </mask>\n        <path\n          d=\"M-0.322402 0.807144C-0.71296 0.416653 -0.713015 -0.216512 -0.322525 -0.60707C0.0679659 -0.997628 0.701131 -0.997683 1.09169 -0.607193L-0.322402 0.807144ZM5.38464 5.09911L6.09169 4.39194L6.79886 5.09899L6.09181 5.80615L5.38464 5.09911ZM1.09181 10.807C0.701321 11.1976 0.0681563 11.1976 -0.322402 10.8071C-0.71296 10.4167 -0.713015 9.78349 -0.322525 9.39293L1.09181 10.807ZM1.09169 -0.607193L6.09169 4.39194L4.6776 5.80628L-0.322402 0.807144L1.09169 -0.607193ZM6.09181 5.80615L1.09181 10.807L-0.322525 9.39293L4.67748 4.39206L6.09181 5.80615Z\"\n          fill=\"#AAAAAA\"\n          mask={`url(#${maskId})`}\n        />\n      </svg>\n    </span>\n  );\n};\n"],"names":[],"sourceRoot":""}