{"version":3,"file":"js/react/mls-match-hub-broadcasters-app.js?_t=6b3123d488d20a69deb3","mappings":";;;;;;;;;;;;;;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;ACAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AAEA;AAAA;AACA;AACA;AACA;AAGA;AAEA;AAEA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAGA;AAEA;AAEA;AAEA;AAEA;AACA;AAEA;AAGA;AAEA;AACA;AAAA;AAGA;AACA;AAAA;AAGA;AAwBA;AACA;AACA;AAAA;AACA;AACA;AACA;AAGA;AACA;AAAA;AAAA;AAAA;AAAA;AACA;AAAA;AACA;AACA;AAUA;AAGA;AAEA;;;;;;;;;;;;;;;;ACnHA;AAEA;AACA;AAAA;AAEA;AAOA;AAEA;;;;;;;;;;;;;;;;ACdA;;;;;;;;;;;;;;;;;ACAA;AACA;AAEA;AACA;AAEA;AACA;AAEA;;;;;;;;;;;;;;;;ACTA;;;;;;;;;;;;;;;ACAA;AAAA;AAEA;;;;;;;;;;;;;;;;;;;;;;ACFA;AACA;AACA;AACA;AACA;AAEA;AAAA;AACA;AAEA;AAEA;AACA;AAAA;AAEA;AAAA;AACA;AAEA;AAAA;AACA;AAGA;AAAA;AACA;AAEA;AAEA;AACA;AACA;AAEA;AACA;AACA;AAEA;AAEA;AACA;AACA;AACA;AAIA;AAMA;AAGA;AAAA;AACA;AACA;AACA;AACA;AACA;AAGA;AAEA;AACA;AACA;AAAA;AAEA;AACA;AAEA;AAIA;AAAA;AAGA;AAGA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA","sources":["webpack://@mlssoccer/netcore/./scripts/react/mls-match-hub-broadcasters/app.js","webpack://@mlssoccer/netcore/./scripts/react/mls-match-hub-broadcasters/main.js","webpack://@mlssoccer/netcore/./scripts/react/shared/components/ErrorDisplay/ErrorDisplay.js","webpack://@mlssoccer/netcore/./scripts/react/shared/components/ErrorDisplay/index.js","webpack://@mlssoccer/netcore/./scripts/react/shared/components/LoadingDisplay/LoadingDisplay.js","webpack://@mlssoccer/netcore/./scripts/react/shared/components/LoadingDisplay/index.js","webpack://@mlssoccer/netcore/./scripts/react/shared/components/LoadingDisplay/utils.js","webpack://@mlssoccer/netcore/./scripts/react/shared/hooks/useMatchStatus.js"],"sourcesContent":["export { default } from './main';\n","import React from 'react';\nimport { useQuery } from \"react-query\";\nimport { apiURL, d3SingleMatchAPI } from \"../shared/api/variables\";\nimport { fetchClient } from \"../shared/api/fetching\";\nimport ErrorDisplay from \"../shared/components/ErrorDisplay\";\nimport { statusTypes, useMediaProviders } from \"../mls-match-list/utils\";\nimport LoadingDisplay from \"../shared/components/LoadingDisplay\";\nimport Picture from \"../shared/components/Picture\";\nimport { useMatchStatus } from \"../shared/hooks/useMatchStatus\";\nimport { useReactAppState } from \"../shared/containers/utils\";\nimport { composeGeoLocatedProviders } from \"../shared/utils\";\n\nfunction MatchHubBroadcasters({ options }) {\n  const { match: appMatch, t, matchStatusOverride, location } = useReactAppState();\n  const { country } = location || {};\n  const matchOptaId = options.matchOptaId || appMatch?.optaId;\n  const homeFromServer = options.home;\n  const awayFromServer = options.away;\n\n  const { error, isLoading, isError, status: matchStatus, queryConfig } = useMatchStatus({\n    initialState: {\n      matchOptaId\n    }\n  });\n\n  const status = matchStatusOverride?.abbreviation ? matchStatusOverride : matchStatus;\n\n  const matchEndpoint = d3SingleMatchAPI({ matchOptaId });\n\n  const {\n    isLoading: isLoadingMatch,\n    isError: isErrorMatch,\n    data: match,\n    error: matchError\n  } = useQuery({\n    queryKey: [`d3-match`, { matchOptaId }],\n    queryFn: () => fetchClient({ endpoint: matchEndpoint, apiURL: apiURL.d3SportsAPI }),\n    ...queryConfig\n  });\n\n  const { broadcasters, homeClubBroadcasters, awayClubBroadcasters, clubBroadcasters } = match || {};\n\n  const mediaProviders = useMediaProviders({ broadcasters, clubBroadcasters, homeClubBroadcasters, awayClubBroadcasters, homeClub: homeFromServer, awayClub: awayFromServer });\n\n  const { national, streaming, radio } = composeGeoLocatedProviders(mediaProviders, country);\n\n  const { homeLinear, awayLinear, homeStreaming, awayStreaming, clubLinear, clubStreaming, clubRadio } = mediaProviders || {};\n  \n  const internationalStreamers =\n  mediaProviders?.allProvidersList?.filter(\n    (provider) =>\n      provider?.broadcasterTypeLabel === \"brd_type_international_streaming\"\n  ) || [];\n\n  const mergedProviders = [...internationalStreamers, ...national, ...streaming, ...radio, ...(homeLinear != null ? homeLinear : []), ...(awayLinear != null ? awayLinear : []), ...(homeStreaming != null ? homeStreaming : []), ...(awayStreaming != null ? awayStreaming : []), ...(clubLinear != null ? clubLinear : []), ...(clubStreaming != null ? clubStreaming : []), ...(clubRadio != null ? clubRadio : [])];\n\n  if (!matchOptaId) {\n    return null;\n  }\n\n  if (status?.abbreviation !== statusTypes.pre && status?.abbreviation !== statusTypes.live) {\n    return null;\n  }\n\n  return (\n    isLoadingMatch || isLoading\n      ? (\n        <div role=\"region\" className={`mls-o-match-hub-broadcasters`}>\n          <LoadingDisplay />\n        </div>\n      )\n      : isErrorMatch || isError\n        ? (\n          <div role=\"region\" className={`mls-o-match-hub-broadcasters`}>\n            <ErrorDisplay error={matchError || error} />\n          </div>\n        )\n        : status?.abbreviation !== statusTypes.post && mergedProviders && mergedProviders.length > 0\n          ? (\n            <div role=\"region\" className={`mls-o-match-hub-broadcasters`}>\n              <div className=\"mls-o-match-hub-broadcasters__background-container\">\n                <Picture loadingSrc={null} fallbackSrc={null} src=\"/assets/images/slashpattern-600x600-e1e1e1.png\" title=\"card background light\" extraClasses=\"mls-o-match-hub-broadcasters__background mls-o-match-hub-broadcasters__background--light\" />\n              </div>\n              <div className=\"mls-o-match-hub-broadcasters__content\">\n                <span className=\"mls-o-match-hub-broadcasters__label\">{status?.abbreviation === statusTypes.live ? t(\"match_watch_live\") : t(\"match_how_to_watch\")}</span>\n                <div className=\"mls-o-match-hub-broadcasters__broadcasters-list\">\n                  {\n                    mergedProviders.map((provider, index) => {\n                      const { broadcasterShortName, broadcasterName } = provider || {};\n                      const name = broadcasterShortName ? broadcasterShortName : broadcasterName;\n                      const trackingData = {\n                        name,\n                        creative: 'broadcaster',\n                        position: index + 1\n                      };\n\n                      return (\n                        <span key={`${name}-${index}`} className=\"mls-o-match-hub-broadcasters__broadcaster\"\n                          data-tracking-block-impression={JSON.stringify(trackingData)}>\n                          {`${name}${index < mergedProviders.length - 1 ? \",\" : \"\"}`}\n                        </span>\n                      );\n                    })\n                  }\n                </div>\n              </div>\n            </div>\n          )\n          : null\n  );\n}\n\n// eslint-disable-next-line no-func-assign\nMatchHubBroadcasters = React.memo(MatchHubBroadcasters);\n\nexport default MatchHubBroadcasters;\n","import React from 'react';\n\nconst ErrorDisplay = ({ error }) => {\n  if (!error || !error.message) return null;\n\n  return (\n    <div className={\"mls-o-error\"}>\n      <p>\n        {error.message}\n      </p>\n    </div>\n  );\n};\n\nexport default ErrorDisplay;\n","export { default } from './ErrorDisplay';\n","import React from 'react';\nimport { loadingTypes } from \"./utils\";\n\nconst LoadingDisplay = (props) => {\n  const { width = \"100\", type = loadingTypes.line, ...otherProps } = props || {};\n\n  return <div {...otherProps} data-testid={\"loading\"} className={`mls-o-loading mls-o-loading--glow mls-o-loading--${type} mls-o-loading--${width}`} />;\n};\n\nexport default LoadingDisplay;\n","export { default } from './LoadingDisplay';\n","export const loadingTypes = {\n  line: 'line'\n};\n","import React, { useEffect } from \"react\";\nimport { composeMatchStatus, periodTypes, statusTypes } from \"../../mls-match-list/utils\";\nimport { apiURL, mlsSingleMatchStatsAPI } from \"../api/variables\";\nimport { useQuery } from \"react-query\";\nimport { fetchClient } from \"../api/fetching\";\n\nexport const actionTypes = {\n  status: 'status',\n  matchOptaId: \"matchOptaId\"\n};\n\nexport function matchStatusReducer(state, action) {\n  switch (action.type) {\n    case actionTypes.status: {\n      return { ...state, status: action.payload };\n    }\n    case actionTypes.matchOptaId: {\n      return { ...state, matchOptaId: action.payload };\n    }\n\n    default: {\n      throw new Error(`Unsupported type: ${action.type}`);\n    }\n  }\n}\n\nexport function useMatchStatus({ matchData = null, initialState, reducer = matchStatusReducer } = {}) {\n  const { current: currentState } = React.useRef(initialState);\n  const [state, dispatch] = React.useReducer(reducer, currentState);\n\n  const { status: matchStatus, matchOptaId, matchStatusOverride } = state || {};\n  const mlsMatchEndpoint = mlsSingleMatchStatsAPI({ matchOptaId });\n  const updateMatchStatus = React.useCallback(({ type, payload }) => dispatch({ type, payload }), [dispatch]);\n\n  const status = matchStatusOverride?.abbreviation ? matchStatusOverride : matchStatus;\n\n  const queryConfig = status\n    ? {\n      enabled: true,\n      refetchIntervalInBackground: true,\n      staleTime:\n        status?.abbreviation === statusTypes.live || status?.abbreviation === statusTypes.pre\n          ? 0\n          : Infinity,\n      refetchInterval:\n        status?.abbreviation === statusTypes.live\n          ? 30000\n          : status?.abbreviation === statusTypes.pre\n            ? 200000\n            : null\n    } : { enabled: false };\n\n  const { data, error, isLoading, isError, isIdle } = useQuery({\n    queryKey: [`mls-match`, { matchOptaId }],\n    queryFn: () => fetchClient({ endpoint: mlsMatchEndpoint, apiURL: apiURL.statsAPI }),\n    select: data => data && data.length > 0 ? data[0] : null,\n    ...queryConfig,\n    enabled: matchOptaId > 0 && !matchData,\n  });\n\n  const mlsMatch = matchData ? matchData : data;\n\n  useEffect(() => {\n    if (!mlsMatch) {\n      return;\n    }\n    const { period } = mlsMatch || {};\n    const { delayedMatch } = initialState;\n\n    const matchStatus = matchStatusOverride\n      ? matchStatusOverride\n      : composeMatchStatus({ period, delayedMatch });\n\n    updateMatchStatus({ type: actionTypes.status, payload: matchStatus });\n  }, [mlsMatch, initialState.delayedMatch]);\n\n  const isShootout = status?.value === periodTypes.ShootOut;\n\n\n  return {\n    mlsMatch,\n    error,\n    isLoading,\n    isIdle,\n    isError,\n    status,\n    isShootout,\n    queryConfig,\n    updateMatchStatus\n  };\n}\n"],"names":[],"sourceRoot":""}