{"version":3,"file":"js/react/mls-match-hub-content-carousel-app.js?_t=988063ea6817525a94e7","mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKA;AACA;AAAA;AAEA;AAEA;AAEA;AACA;AAOA;AACA;AAAA;AAEA;AAAA;AAEA;AACA;AACA;AACA;AACA;AAAA;AACA;AAEA;AAAA;AACA;AACA;AAGA;AACA;AAMA;AACA;AAAA;AACA;AACA;AAEA;AAOA;AACA;AAAA;AACA;AACA;AAEA;AAaA;AACA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAGA;AACA;AAcA;AACA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAGA;AACA;AAiBA;AACA;AACA;AAcA;AACA;AACA;AAUA;AACA;AACA;AAUA;AACA;AACA;AAcA;AACA;AACA;AAaA;AACA;AACA;AASA;AACA;AACA;AAMA;AACA;AACA;AAEA;AACA;AACA;AAEA;AACA;AACA;AAEA;AACA;AACA;AAEA;AACA;AACA;AAEA;AASA;;;;;;;;;;;;;;;;AC5PA;;;;;;;;;;;;;;;;;;;;;;;ACAA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AAAA;AACA;AACA;AACA;AAAA;AAAA;AAGA;AAGA;AACA;AAAA;AAAA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AA2BA;AAGA;AAGA;AAEA;;;;;;;;;;;;;;;;;;;;;;;;AC5EA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AAEA;AACA;AACA;AAEA;AAEA;AAIA;AAAA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAIA;AACA;AAOA;AAEA;AASA;AAKA;AAGA;AAEA;;;;;;;;;;;;;;;;;AC3EA;AACA;AAEA;AACA;AAGA;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;ACTA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AAAA;AACA;AAEA;AACA;AAEA;AAAA;AACA;AACA;AACA;AAGA;AACA;AACA;AAEA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AAGA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AAGA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AAGA;AACA;AACA;AAAA;AAGA;AAAA;AACA;AAAA;AACA;AAGA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGA;AACA;AAAA;AAGA;AACA;AAAA;AAGA;AAKA;AAGA;AAEA;;;;;;;;;;;;;;;;;AC/FA;AAEA;AACA;AACA;AAAA;AAGA;AACA;AAAA;AAGA;AACA;AAAA;AAGA;AAEA;AACA;AAAA;AAGA;AACA;AAAA;AACA;AAIA;AAiDA;AAGA;AACA;AACA;AAAA;AAGA;AACA;AAAA;AAKA;AACA;AAAA;AAGA;AACA;;;;;;;;;;;;;;;;;;;;AC/FA;AACA;AACA;AACA;AACA;AAEA;AACA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAGA;AACA;AAEA;AAAA;AAGA;AACA;AACA;AAAA;AAEA;AAEA;AAAA;AACA;AACA;AAEA;AACA;AAAA;AACA;AACA;AACA;AAGA;AACA;AACA;AAAA;AAGA;AACA;AAEA;AACA;AAAA;AACA;AAGA;AACA;AAAA;AACA;AAGA;AACA;AACA;AAAA;AAGA;AACA;AACA;AAAA;AAGA;AACA;AAAA;AAIA;AAMA;AACA;AACA;AAAA;AACA;AACA;AAGA;AACA;AACA;AAAA;AAGA;AAOA;AAAA;AACA;AAGA;AAEA;AACA;AAAA;AAGA;AAAA;AACA;AACA;AAGA;AACA;AACA;AAEA;AACA;AAAA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAEA;AAGA;AAEA;;;;;;;;;;;;;;;;AC7JA;;;;;;;;;;;;;;;;;ACAA;AACA;AAEA;AACA;AAEA;AACA;AAEA;;;;;;;;;;;;;;;;ACTA;;;;;;;;;;;;;;;ACAA;AAAA;AAEA;;;;;;;;;;;;;;;;;ACFA;AACA;AAEA;AACA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAGA;AACA;AACA;AACA;AACA;AAAA;AACA;AAGA;AACA;AAAA;AACA;AAGA;AACA;AAAA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAKA;AAIA;AAEA;;;;;;;;;;;;;;;;ACjDA;;;;;;;;;;;;;;;;ACAA;AAEA;AAEA;AACA;AAEA;AACA;AAAA;AAGA;AACA;;;;;;;;;;;;;;;;ACZA;AAEA;AAMA;AACA;AACA;AAAA;AAEA;AAAA;AACA;AAGA;AACA;AACA;AAAA;AAEA;AACA;AACA;AAAA;AACA;AAEA;;;;;;;;;;;;;;;;;;ACxBA;AACA;AAEA;AACA;AACA;AAEA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AASA;AACA;AAEA;AACA;AAAA;AAGA;AACA;AAAA;AAGA;AACA;AAAA;AAGA;AACA;AASA;AACA;AACA;AAAA;AAEA;AACA;AASA;AACA;AACA;AAEA;AACA;AAKA;AACA;AAAA;AACA;AAEA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AAAA;AACA;AASA;AACA;AAKA;AAKA;AACA;AACA;AACA;AAAA;AAEA;AAEA;AACA;AAEA;AACA;AACA;AAAA;AACA;AAGA;AACA;;;;;;;;;;;;;;;;;;;;;;AC/IA;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;;;;;;;;;;;;;;;;AC1FA;AAEA;AACA;AACA;AAEA;AACA;AAAA;AAAA;AACA;AACA;AACA;AAAA;AAKA;AAGA;AAGA;AAEA;;;;;;;;;;;;;;;;ACvBA","sources":["webpack://@mlssoccer/netcore/./scripts/libraries/_modules/tracking/helpers.js","webpack://@mlssoccer/netcore/./scripts/react/mls-match-hub-content-carousel/app.js","webpack://@mlssoccer/netcore/./scripts/react/mls-match-hub-content-carousel/components/ContentCard/ContentCard.js","webpack://@mlssoccer/netcore/./scripts/react/mls-match-hub-content-carousel/components/ContentData/ContentData.js","webpack://@mlssoccer/netcore/./scripts/react/mls-match-hub-content-carousel/loader.js","webpack://@mlssoccer/netcore/./scripts/react/mls-match-hub-content-carousel/main.js","webpack://@mlssoccer/netcore/./scripts/react/mls-match-hub-content-carousel/utils.js","webpack://@mlssoccer/netcore/./scripts/react/shared/components/ButtonBase/ButtonBase.js","webpack://@mlssoccer/netcore/./scripts/react/shared/components/ButtonBase/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/components/ToggleButton/ToggleButton.js","webpack://@mlssoccer/netcore/./scripts/react/shared/components/ToggleButton/index.js","webpack://@mlssoccer/netcore/./scripts/react/shared/hooks/useEventCallback.js","webpack://@mlssoccer/netcore/./scripts/react/shared/hooks/useForkRef.js","webpack://@mlssoccer/netcore/./scripts/react/shared/hooks/useIsFocusVisible.js","webpack://@mlssoccer/netcore/./scripts/react/shared/hooks/useMatchStatus.js","webpack://@mlssoccer/netcore/./scripts/react/shared/svg/FilledPlayIcon/FilledPlayIcon.js","webpack://@mlssoccer/netcore/./scripts/react/shared/svg/FilledPlayIcon/index.js"],"sourcesContent":["/**\n * @private\n * Push somethig in dataLayer\n * @param obj object to push\n */\nconst dataLayerPush = (obj) => {\n  if (!obj) return;\n\n  window.dataLayer = window.dataLayer ?? [];\n\n  obj = cleanupNull(obj);\n\n  window.dataLayer.push(obj);\n};\n\n/**\n * @private\n * cleanup inner props\n * @param {object} obj\n */\nconst cleanupNull = (obj) => {\n  if (obj === null) return undefined;\n\n  if (typeof obj === 'string') return obj;\n\n  for (const key in obj) {\n    if (obj.hasOwnProperty(key)) {\n      if (Array.isArray(obj[key])) {\n        for (let index = 0; index < obj[key].length; index++) {\n          obj[key][index] = cleanupNull(obj[key][index]);\n        }\n      } else {\n        obj[key] = cleanupNull(obj[key]);\n      }\n    }\n  }\n\n  return obj;\n};\n\n/**\n * Push new Core dataLayer info\n * @param data the meta data\n */\nexport const addCoreDataLayer = (data) => {\n  dataLayerPush({\n    'event': 'dataLayer-initialized',\n    ...data,\n  });\n};\n\n/**\n * Track generic event\n * @param {string} eventName event name\n * @param {any} data event data\n */\nexport const trackEvent = (eventName, data = {}) => {\n  dataLayerPush({\n    'event': eventName,\n    ...data\n  });\n};\n\n/**\n * track block impression\n * @param {string} bucketName\n * @param {string} blockType\n * @param {{\n * id: string,\n * name: string,\n * creative: string,\n * position: string,\n * }[]} promotions\n */\nexport const trackBlockImpression = (bucketName, blockType, promotions) => {\n  const impressionData = {\n    bucketName,\n    blockType,\n    'ecommerce': promotions?.length ? {\n      'promoView': {\n        promotions,\n      },\n    } : undefined,\n  };\n\n  trackEvent('block-impression', impressionData);\n};\n\n/**\n * track block click\n * @param {string} bucketName\n * @param {string} blockType\n * @param {object} data\n * @param {{\n  * id: string,\n  * name: string,\n  * creative: string,\n  * position: string,\n  * }} promotion\n  */\nexport const trackBlockClick = (bucketName, blockType, layoutName, blockLayout, blockStyle, data, promotion) => {\n  const clickData = {\n    bucketName,\n    blockType,\n    layoutName,\n    blockLayout,\n    blockStyle,\n    ...data,\n    'ecommerce': promotion ? {\n      'promoClick': {\n        promotions: [promotion],\n      },\n    } : undefined,\n  };\n\n  trackEvent('block-click', clickData);\n};\n\n/**\n * Track MatchHub click event\n * @param {{\n * clickType: string,\n * clickItem: string,\n * match: string,\n * matchState: string,\n * clubName: string,\n * playerName: string,\n * competition: string,\n * cardType: string,\n * optaEventType: string,\n * toggle: string\n * }} clickData\n */\nexport const trackMatchHubClick = (clickData) => {\n  trackEvent('match-hub-click', clickData);\n};\n\n/**\n * Track Match interaction event\n * @param {{\n  * clickType: string,\n  * clickItem: string,\n  * clickPosition: string,\n  * matchState: string,\n  * match: string,\n  * competition: string,\n  * travelType: string\n  * }} clickData\n  */\nexport const trackMatchInteraction = (clickData) => {\n  trackEvent('match-interaction', clickData);\n};\n\n/**\n * Track Week Selector event\n * @param {{\n  * selectorLocation: 'top' | 'bottom',\n  * direction: 'forward' | 'back',\n  * selection: string\n  * }} clickData\n  */\nexport const trackWeekSelector = (clickData) => {\n  trackEvent('week-selector-click', clickData);\n};\n\n/**\n * Track Filter interaction event\n * @param {{\n  * statsCategory: string,\n  * filterType: string,\n  * clickItem: string\n  * }} clickData\n  */\nexport const trackFilterClick = (clickData) => {\n  trackEvent('filter-click', clickData);\n};\n\n/**\n * Track FeaturedMatch click event\n * @param {{\n* clickType: string,\n* clickItem: string,\n* match: string,\n* matchState: string,\n* playerName: string,\n* competition: string,\n* toggle: string\n* }} clickData\n*/\nexport const trackFeaturedMatchClick = (clickData) => {\n trackEvent('featured-match-click', clickData);\n};\n\n/**\n * Track HorizontalScoreboardMatch click event\n * @param {{\n* clickType: string,\n* clickItem: string,\n* match: string,\n* matchState: string,\n* competition: string,\n* clickPosition: string,\n* }} clickData\n*/\nexport const trackHorizontalScoreboardMatch = (clickData) => {\n trackEvent('horizontal-scoreboard-match-click', clickData);\n};\n\n/**\n * Track user successful login event\n * @param {{\n* userId: string,\n* method: string,\n* }} eventData\n*/\nexport const trackUserLogin = (eventData) => {\n  trackEvent('successful-login-freemium', eventData);\n};\n\n\n/**\n * Track user login freemium login wall event\n*/\nexport const trackUserFreemiumLoginWall = (eventData) => {\n  trackEvent('freemium-login-wall', eventData);\n};\n\nexport const trackUserFreemiumLoginWallViewed = (eventData) => {\n  trackEvent('freemium-login-wall_viewed', eventData);\n};\n\nexport const trackUserFreemiumLoginWallCtaClicked = (eventData) => {\n  trackEvent('freemium-cta-click', eventData);\n};\n\nexport const trackUserFreemiumSuccessfulSignup = (eventData) => {\n  trackEvent('successful-signup', eventData);\n};\n\nexport const trackUserFreemiumSuccessfulLogin = (eventData) => {\n  trackEvent('successful-login-freemium', eventData);\n};\n\nexport const trackUserLogged = (userId) => {\n  // const dataLayerInitialized = window.dataLayer.find((e) => e.event == 'dataLayer-initialized');\n\n  // if (dataLayerInitialized) {\n  //   dataLayerPush({\n  //     ...dataLayerInitialized,\n  //     'userId': userId,\n  //   });\n  // }\n};\n","export { default } from './main';\n","import React, { useState } from 'react';\n\nimport Picture from \"../../../shared/components/Picture\";\nimport { entityCodes, formatImageUrl, svgSizes } from \"../../../shared/utils\";\nimport { formatMillisecondToHumanMinute } from \"../../../../libraries/_helpers\";\nimport FilledPlayIcon from \"../../../shared/svg/FilledPlayIcon\";\nimport { composeHref } from \"../../utils\";\nimport { useReactAppState } from \"../../../shared/containers/utils\";\nimport { trackMatchHubClick } from '../../../../libraries/_modules/tracking/helpers';\n\nfunction ContentCard({ entity, isCarousel, isLink, ...otherProps }) {\n  const { urlList, directoryList, match: appMatch } = useReactAppState();\n  const { baseUrl } = urlList || {};\n  const { storiesDir, visualStoriesDir } = directoryList || {};\n\n  const [Component] = useState(isLink ? \"a\" : \"div\");\n  const { type, entityCode, slug, thumbnail, title, _entityId, fields } = entity || {};\n  const { duration } = fields || {};\n  const composedDuration = duration != null ? formatMillisecondToHumanMinute(duration) : null;\n  const { templateUrl } = thumbnail || {};\n  const { highQuality } = templateUrl ? formatImageUrl(templateUrl, { format: \"w_400,c_scale\", extension: \"f_auto\" }) : {};\n  const href = composeHref({ slug, entityCode, type, isLink, storiesPath: `${baseUrl}/${storiesDir}`, visualStoriesPath: `${baseUrl}/${visualStoriesDir}` });\n\n  const handleClick = React.useCallback(() => {\n    trackMatchHubClick({\n      clickType: 'card',\n      match: appMatch.slug,\n      cardType: 'content'\n      // matchState: status.abbreviation,\n      // competition: competition.shortName\n    });\n  }, [appMatch]);\n\n  return (\n    <Component className={`${isCarousel ? \"fo-carousel__slide\" : \"\"} -${type} -${entityCode}`}\n      onClick={handleClick}\n      href={`/video/${slug}`}\n      title={title}\n      data-id={_entityId}\n      aria-label={title}\n      {...otherProps}\n      {...href}\n    >\n      <article className=\"fm-card -default fm-card--btn-alignment\">\n        <div className=\"fm-card__container\">\n          <div className=\"fm-card__media fm-card__media--gradient\">\n            <figure className=\"fm-card__figure fa-image -ratio-16-9\">\n              <Picture loadingSrc={null} fallbackSrc={null} src={highQuality} />\n            </figure>\n            {\n              entityCode === entityCodes.brightcoveVideo && composedDuration != null\n                ? (\n                  <div className=\"mls-o-match-hub-content-carousel__duration\">\n                    {composedDuration}\n                    <FilledPlayIcon size={svgSizes.xSmall} />\n                  </div>\n                )\n                : null\n            }\n          </div>\n          <div className=\"fm-card__content\">\n            <div className=\"fa-text\">\n              <h2 className=\"fa-text__title\">\n                {title}\n              </h2>\n            </div>\n          </div>\n        </div>\n      </article>\n    </Component>\n  );\n}\n\n// eslint-disable-next-line no-func-assign\nContentCard = React.memo(ContentCard);\n\nexport default ContentCard;\n","import React from 'react';\nimport { Swiper, SwiperSlide } from 'swiper/react';\nimport SwiperCore, { Navigation } from 'swiper';\nimport { entityCodes, svgSizes } from \"../../../shared/utils\";\nimport ContentCard from \"../ContentCard/ContentCard\";\nimport { Chevron } from \"../../../shared/svg\";\nimport { chevronDirection } from \"../../../shared/svg/Svg\";\nimport { useReactAppState } from \"../../../shared/containers/utils\";\nimport { composeForgeEntities } from \"../../utils\";\n\nSwiperCore.use([Navigation]);\n\nfunction ContentData({ forgeMatchVideos, forgeMatchStories, forgeVisualStories, toggleDialog }) {\n  const { mediaQueries } = useReactAppState();\n  const { isMediumLargeMin } = mediaQueries || {};\n\n  const composedForgeEntities = React.useMemo(() => composeForgeEntities({ forgeMatchStories, forgeMatchVideos, forgeVisualStories }), [forgeMatchVideos, forgeMatchStories, forgeVisualStories]);\n\n  return (\n    composedForgeEntities != null && composedForgeEntities.length > 0\n      ? (\n        <div role=\"region\" className={`mls-o-match-hub-content-carousel fo-carousel -default -${isMediumLargeMin ? \"four\" : \"one\"} fo-carousel--height-modifier d3-c-editorial-list__carousel mls-addons-editorial-list`}>\n          <Swiper\n            tag=\"div\"\n            grabCursor\n            navigation={{\n              prevEl: \".fo-carousel__arrow.-prev\",\n              nextEl: \".fo-carousel__arrow.-next\",\n            }}\n            // navigation\n            breakpoints={{\n              300: {\n                slidesPerView: 1.3,\n                spaceBetween: 16,\n              },\n              768: {\n                slidesPerView: 4,\n                spaceBetween: 16,\n              },\n            }}\n            spaceBetween={16}\n            slidesPerView={1.3}\n            slidesPerGroup={1}\n          >\n            {\n              composedForgeEntities.map((entity, index) => {\n                const { entityCode, slug } = entity || {};\n                return (\n                  <SwiperSlide key={`${entity._entityId}-${index}`}>\n                    {\n                      entityCode != null && entityCode === entityCodes.brightcoveVideo\n                        ? <ContentCard isCarousel onClick={() => toggleDialog(entity)} entity={entity} />\n                        : <ContentCard isCarousel isLink={slug != null} entity={entity} />\n                    }\n                  </SwiperSlide>\n                );\n              })\n            }\n            <div className={\"fo-carousel__controls\"}>\n              <div className=\"fo-carousel__arrow -prev\">\n                <Chevron direction={chevronDirection.left} size={svgSizes.small} />\n              </div>\n              <div className=\"fo-carousel__arrow -next\">\n                <Chevron direction={chevronDirection.right} size={svgSizes.small} />\n              </div>\n            </div>\n          </Swiper>\n        </div>\n      ) : null\n  );\n}\n\n// eslint-disable-next-line no-func-assign\nContentData = React.memo(ContentData);\n\nexport default ContentData;\n","import React from 'react';\nimport LoadingDisplay from \"../shared/components/LoadingDisplay\";\n\nfunction MatchHubContentCarouselLoader() {\n  return (\n    <LoadingDisplay />\n  );\n}\n\nexport default MatchHubContentCarouselLoader;\n","import React from 'react';\nimport { useQuery } from \"react-query\";\nimport { useReactAppState } from \"../shared/containers/utils\";\nimport { modalActionTypes, modalTypes } from \"../shared/hooks/useModalOptions\";\nimport VideoModal from \"../shared/components/VideoModal\";\nimport { fetchClient } from \"../shared/api/fetching\";\nimport { apiURL, forgeMatchStoriesAPI, forgeMatchContentVideosAPI, forgeVisualStoriesAPI } from \"../shared/api/variables\";\nimport { useMatchStatus } from \"../shared/hooks/useMatchStatus\";\nimport { queryStatusTypes } from \"../shared/utils\";\nimport ContentData from \"./components/ContentData/ContentData\";\nimport MatchHubContentCarouselLoader from \"./loader\";\n\nfunction ContentCarousel({ options }) {\n  const { match: appMatch, t, updateModalOptions } = useReactAppState();\n  const matchOptaId = options.matchOptaId || appMatch?.optaId;\n  const matchSlug = options.slug || appMatch?.slug;\n  const videoList = {\n    items: options.videoList\n  };\n  const storiesList = options.storiesList;\n  const visualStoriesList = options.visualStoriesList;\n  \n  const { queryConfig } = useMatchStatus({\n    initialState: {\n      matchOptaId\n    }\n  });\n\n  const forgeMatchVideosEndpoint = forgeMatchContentVideosAPI({ matchSlug });\n  const forgeMatchStoriesEndpoint = forgeMatchStoriesAPI({ matchSlug });\n  const forgeVisualStoriesEndpoint = forgeVisualStoriesAPI({ matchSlug });\n\n  const { data: forgeMatchVideos, status: forgeMatchVideosStatus } = useQuery({\n    queryKey: [`forge-match-videos`, { matchSlug }],\n    queryFn: () => fetchClient({ apiURL: apiURL.forgeDAPI, endpoint: forgeMatchVideosEndpoint }),\n    ...queryConfig,\n    enabled: !!(matchOptaId),\n    initialData: videoList,\n    select: videos => videos?.items\n  });\n\n  const { data: forgeMatchStories, forgeMatchStoriesStatus } = useQuery({\n    queryKey: [`forge-match-stories`, { matchOptaId }],\n    queryFn: () => fetchClient({ apiURL: apiURL.forgeDAPI, endpoint: forgeMatchStoriesEndpoint }),\n    ...queryConfig,\n    enabled: !!(matchSlug),\n    initialData: storiesList,\n    select: stories => stories?.items\n  });\n\n  const { data: forgeVisualStories, forgeVisualStoriesStatus } = useQuery({\n    queryKey: [`forge-visual-stories`, { matchOptaId }],\n    queryFn: () => fetchClient({ apiURL: apiURL.forgeDAPI, endpoint: forgeVisualStoriesEndpoint }),\n    ...queryConfig,\n    enabled: !!(matchSlug),\n    initialData: visualStoriesList,\n    select: stories => stories?.items\n  });\n\n  const toggleDialog = (currentVideo) => {\n    const foundVideoIndex = forgeMatchVideos.findIndex((video) => {\n      return currentVideo._entityId === video._entityId;\n    });\n\n    const videos = [\n      currentVideo, ...forgeMatchVideos.slice(0, foundVideoIndex),\n      ...forgeMatchVideos.slice(foundVideoIndex + 1)\n    ];\n\n    updateModalOptions({ type: modalActionTypes.modalClassName, payload: \"mls-o-modal mls-o-modal--dark mls-o-modal--video-playlist\" });\n    updateModalOptions({ type: modalActionTypes.modalType, payload: modalTypes.default });\n    updateModalOptions({ type: modalActionTypes.label, payload: t(\"match_highlights\") });\n    updateModalOptions({ type: modalActionTypes.component, payload: VideoModal });\n    updateModalOptions({ type: modalActionTypes.modalData, payload: { videoList: videos, video: currentVideo } });\n    updateModalOptions({ type: modalActionTypes.show });\n  };\n\n  if (!matchOptaId) {\n    return null;\n  }\n\n  if (videoList?.items?.length === 0 && storiesList?.items?.length === 0 && visualStoriesList?.items?.length) {\n    return null;\n  }\n\n  return (\n    forgeMatchStoriesStatus === queryStatusTypes.loading && forgeMatchVideosStatus === queryStatusTypes.loading && forgeVisualStoriesStatus === queryStatusTypes.loading\n      ? <MatchHubContentCarouselLoader/>\n      : <ContentData forgeMatchVideos={forgeMatchVideos} forgeMatchStories={forgeMatchStories} forgeVisualStories={forgeVisualStories} toggleDialog={toggleDialog}/>\n  );\n}\n\n// eslint-disable-next-line no-func-assign\nContentCarousel = React.memo(ContentCarousel);\n\nexport default ContentCarousel;\n","import { entityTypes } from \"../shared/utils\";\n\nexport function composeForgeEntities({ forgeMatchVideos, forgeMatchStories, forgeVisualStories }) {\n  if (forgeMatchVideos == null && forgeMatchStories == null && forgeVisualStories == null) {\n    return null;\n  }\n\n  if (forgeMatchStories == null && forgeVisualStories == null) {\n    return sortContentDate(forgeMatchVideos);\n  }\n\n  if (forgeMatchVideos == null && forgeVisualStories == null) {\n    return sortContentDate(forgeMatchStories);\n  }\n\n  function sortContentDate(array) {\n\n    if (!array || array.length === 0) {\n      return [];\n    }\n\n    return array.sort((a, b) => {\n      return Date.parse(b?.contentDate) - Date.parse(a?.contentDate);\n    });\n  }\n\n\n  return sortContentDate([...forgeMatchVideos, ...forgeMatchStories,...forgeVisualStories]);\n  \n  // const sortedVideos = sortContentDate(forgeMatchVideos);\n  // const sortedStories = sortContentDate(forgeMatchStories);\n  // const sortedVisualStories = sortContentDate(forgeVisualStories);\n\n  // const finalArray = [];\n  // const combinedLength = sortedVideos.length + sortedStories.length + sortedVisualStories.length;\n  // let currentStoriesIndex = 0;\n  // let currentVideosIndex = 0;\n  // let currentVisualStoriesIndex = 0;\n  \n  // while (finalArray.length < combinedLength) {\n  //   const currentStory = sortedStories[currentStoriesIndex];\n  //   const currentVideo = sortedVideos[currentVideosIndex];\n  //   const currentVisualStory = sortedVisualStories[currentVisualStoriesIndex];\n    \n  //   const { contentDate: storyContentDate } = currentStory || {};\n  //   const { contentDate: videoContentDate } = currentVideo || {};\n  //   const { contentDate: visualStoryContentDate } = currentVisualStory || {};\n\n  //   const parsedStoryISO = storyContentDate != null ? parseISO(storyContentDate) : null;\n  //   const parsedVideoISO = videoContentDate != null ? parseISO(videoContentDate) : null;\n  //   const parsedVisualStoryISO = visualStoryContentDate != null ? parseISO(visualStoryContentDate) : null;\n\n  //   const orderedDates = [parsedStoryISO, parsedVideoISO, parsedVisualStoryISO]\n  //     .filter((date) => date)\n  //     .sort((a, b) => Date.parse(a) - Date.parse(b));\n\n  //   if (orderedDates.length) {\n  //     if (orderedDates[0] === parsedStoryISO) {\n  //       finalArray.push(currentStory);\n  //       currentStoriesIndex++;\n  //     }\n\n  //     if (orderedDates[0] === parsedVisualStoryISO) {\n  //       finalArray.push(currentVisualStory);\n  //       currentVisualStoriesIndex++;\n  //     }\n\n  //     if (orderedDates[0] === parsedVideoISO) {\n  //       finalArray.push(currentVideo);\n  //       currentVideosIndex++;\n  //     }\n  //   }\n\n  // }\n  \n  //return finalArray;\n}\n\n\nexport function composeHref({ slug, type, entityCode, isLink, storiesPath, visualStoriesPath = \"\" }) {\n  if (!isLink) {\n    return {};\n  }\n\n  if (type === entityTypes.story) {\n    return { href: `${storiesPath}/${slug}` };\n  }\n\n  // WARN: WE ARE IDENTIFYING VISUAL STORIES WITH TYPE \"customentity\".\n  // TO BE IMPROVED WITH A NEW IDENTIFIER OF VISUAL STORIES.\n  if (type === entityTypes.customEntity) {\n    return { href: `${visualStoriesPath}/${slug}` };\n  }\n  \n  return {};\n}\n","import React, { forwardRef, useImperativeHandle } from 'react';\nimport ReactDOM from 'react-dom';\nimport useIsFocusVisible from \"../../hooks/useIsFocusVisible\";\nimport useEventCallback from \"../../hooks/useEventCallback\";\nimport useForkRef from \"../../hooks/useForkRef\";\n\nconst ButtonBase = forwardRef(function ButtonBase(props, ref) {\n  const {\n    action,\n    buttonRef: buttonRefProp,\n    children,\n    className,\n    component = 'button',\n    disabled = false,\n    onBlur,\n    onClick,\n    onFocus,\n    onFocusVisible,\n    onKeyDown,\n    onKeyUp,\n    onMouseDown,\n    onMouseLeave,\n    onMouseUp,\n    onTouchEnd,\n    onTouchMove,\n    onTouchStart,\n    onDragLeave,\n    tabIndex = 0,\n    type = 'button',\n    ...other\n  } = props;\n\n  const buttonRef = React.useRef(null);\n  function getButtonNode() {\n    // eslint-disable-next-line react/no-find-dom-node\n    return ReactDOM.findDOMNode(buttonRef.current);\n  }\n\n  const [focusVisible, setFocusVisible] = React.useState(false);\n  if (disabled && focusVisible) {\n    setFocusVisible(false);\n  }\n  const { isFocusVisible, ref: focusVisibleRef } = useIsFocusVisible();\n\n  useImperativeHandle(\n    action,\n    () => ({\n      focusVisible: () => {\n        setFocusVisible(true);\n        buttonRef.current?.focus();\n      },\n    }),\n    [],\n  );\n\n  const handleFocus = useEventCallback((event) => {\n    if (!buttonRef.current) {\n      buttonRef.current = event.currentTarget;\n    }\n\n    if (isFocusVisible(event)) {\n      setFocusVisible(true);\n\n      if (onFocusVisible) {\n        onFocusVisible(event);\n      }\n    }\n\n    if (onFocus) {\n      onFocus(event);\n    }\n  });\n\n  const isNonNativeButton = () => {\n    const button = getButtonNode();\n    return component && component !== 'button' && !(button.tagName === 'A' && button.href);\n  };\n\n  const handleKeyDown = useEventCallback((event) => {\n    if (event.target === event.currentTarget && isNonNativeButton() && event.key === ' ') {\n      event.preventDefault();\n    }\n\n    if (onKeyDown) {\n      onKeyDown(event);\n    }\n\n    // Keyboard accessibility for non interactive elements\n    if (\n      event.target === event.currentTarget &&\n      isNonNativeButton() &&\n      event.key === 'Enter' &&\n      !disabled\n    ) {\n      event.preventDefault();\n      if (onClick) {\n        onClick(event);\n      }\n    }\n  });\n\n  const handleKeyUp = useEventCallback((event) => {\n    if (onKeyUp) {\n      onKeyUp(event);\n    }\n\n    if (\n      onClick &&\n      event.target === event.currentTarget &&\n      isNonNativeButton() &&\n      event.key === ' ' &&\n      !event.defaultPrevented\n    ) {\n      onClick(event);\n    }\n  });\n\n  let ComponentProp = component;\n\n  if (other?.href) {\n    ComponentProp = 'a';\n  }\n\n  const buttonProps = {\n    type,\n    disabled\n  };\n\n  const handleUserRef = useForkRef(buttonRefProp, ref);\n  const handleOwnRef = useForkRef(focusVisibleRef, buttonRef);\n  const handleRef = useForkRef(handleUserRef, handleOwnRef);\n\n  return (\n    <ComponentProp\n      className={className}\n      onBlur={onBlur}\n      onClick={onClick}\n      onFocus={handleFocus}\n      onKeyDown={handleKeyDown}\n      onKeyUp={handleKeyUp}\n      onMouseDown={onMouseDown}\n      onMouseLeave={onMouseLeave}\n      onMouseUp={onMouseUp}\n      onDragLeave={onDragLeave}\n      onTouchEnd={onTouchEnd}\n      onTouchMove={onTouchMove}\n      onTouchStart={onTouchStart}\n      ref={handleRef}\n      tabIndex={disabled ? -1 : tabIndex}\n      {...buttonProps}\n      {...other}\n    >\n      {children}\n    </ComponentProp>\n  );\n});\n\nexport default ButtonBase;\n","export { default } from './ButtonBase';\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, { forwardRef } from 'react';\nimport ButtonBase from \"../ButtonBase\";\n\nconst ToggleButton = forwardRef(function ToggleButton(props, ref) {\n  const {\n    children,\n    label,\n    className,\n    disabled = false,\n    onChange,\n    onClick,\n    selected,\n    value,\n    ...other\n  } = props;\n\n  const handleClick = (event) => {\n    if (onClick) {\n      onClick(event, value);\n      if (event.isDefaultPrevented()) {\n        return;\n      }\n    }\n\n    if (onChange) {\n      onChange(event, value);\n    }\n  };\n\n  return (\n    <ButtonBase\n      className={className}\n      disabled={disabled}\n      ref={ref}\n      onClick={handleClick}\n      onChange={onChange}\n      value={value}\n      aria-pressed={selected}\n      {...other}\n    >\n      {\n        label\n          ? <span className={label}>{children}</span>\n          : children\n      }\n    </ButtonBase>\n  );\n});\n\nexport default ToggleButton;\n","export { default } from './ToggleButton';\n","import React, { useRef, useCallback } from 'react';\n\nconst useEnhancedEffect = typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;\n\nexport default function useEventCallback(fn) {\n  const ref = useRef(fn);\n\n  useEnhancedEffect(() => {\n    ref.current = fn;\n  });\n\n  return useCallback((...args) => (0, ref.current)(...args), []);\n}\n","import * as React from 'react';\n\nexport default function useForkRef(refA, refB) {\n  /**\n   * This will create a new function if the ref props change and are defined.\n   * This means react will call the old forkRef with `null` and the new forkRef\n   * with the ref. Cleanup naturally emerges from this behavior\n   */\n  function setRef(ref, value) {\n    if (typeof ref === 'function') {\n      ref(value);\n    } else if (ref) {\n      ref.current = value;\n    }\n  }\n\n  return React.useMemo(() => {\n    if (refA == null && refB == null) {\n      return null;\n    }\n    return (refValue) => {\n      setRef(refA, refValue);\n      setRef(refB, refValue);\n    };\n  }, [refA, refB]);\n}\n","// based on https://github.com/WICG/focus-visible/blob/v4.1.5/src/focus-visible.js\nimport * as React from 'react';\nimport * as ReactDOM from 'react-dom';\n\nlet hadKeyboardEvent = true;\nlet hadFocusVisibleRecently = false;\nlet hadFocusVisibleRecentlyTimeout = null;\n\nconst inputTypesWhitelist = {\n  text: true,\n  search: true,\n  url: true,\n  tel: true,\n  email: true,\n  password: true,\n  number: true,\n  date: true,\n  month: true,\n  week: true,\n  time: true,\n  datetime: true,\n  'datetime-local': true,\n};\n\n/**\n * Computes whether the given element should automatically trigger the\n * `focus-visible` class being added, i.e. whether it should always match\n * `:focus-visible` when focused.\n * @param {Element} node\n * @return {boolean}\n */\nfunction focusTriggersKeyboardModality(node) {\n  const { type, tagName } = node;\n\n  if (tagName === 'INPUT' && inputTypesWhitelist[type] && !node.readOnly) {\n    return true;\n  }\n\n  if (tagName === 'TEXTAREA' && !node.readOnly) {\n    return true;\n  }\n\n  if (node.isContentEditable) {\n    return true;\n  }\n\n  return false;\n}\n\n/**\n * Keep track of our keyboard modality state with `hadKeyboardEvent`.\n * If the most recent user interaction was via the keyboard;\n * and the key press did not include a meta, alt/option, or control key;\n * then the modality is keyboard. Otherwise, the modality is not keyboard.\n * @param {KeyboardEvent} event\n */\nfunction handleKeyDown(event) {\n  if (event.metaKey || event.altKey || event.ctrlKey) {\n    return;\n  }\n  hadKeyboardEvent = true;\n}\n\n/**\n * If at any point a user clicks with a pointing device, ensure that we change\n * the modality away from keyboard.\n * This avoids the situation where a user presses a key on an already focused\n * element, and then clicks on a different element, focusing it with a\n * pointing device, while we still think we're in keyboard modality.\n */\nfunction handlePointerDown() {\n  hadKeyboardEvent = false;\n}\n\nfunction handleVisibilityChange() {\n  if (this.visibilityState === 'hidden') {\n    // If the tab becomes active again, the browser will handle calling focus\n    // on the element (Safari actually calls it twice).\n    // If this tab change caused a blur on an element with focus-visible,\n    // re-apply the class when the user switches back to the tab.\n    if (hadFocusVisibleRecently) {\n      hadKeyboardEvent = true;\n    }\n  }\n}\n\nfunction prepare(doc) {\n  doc.addEventListener('keydown', handleKeyDown, true);\n  doc.addEventListener('mousedown', handlePointerDown, true);\n  doc.addEventListener('pointerdown', handlePointerDown, true);\n  doc.addEventListener('touchstart', handlePointerDown, true);\n  doc.addEventListener('visibilitychange', handleVisibilityChange, true);\n}\n\nexport function teardown(doc) {\n  doc.removeEventListener('keydown', handleKeyDown, true);\n  doc.removeEventListener('mousedown', handlePointerDown, true);\n  doc.removeEventListener('pointerdown', handlePointerDown, true);\n  doc.removeEventListener('touchstart', handlePointerDown, true);\n  doc.removeEventListener('visibilitychange', handleVisibilityChange, true);\n}\n\nfunction isFocusVisible(event) {\n  const { target } = event;\n  try {\n    return target.matches(':focus-visible');\n  } catch (error) {\n    // browsers not implementing :focus-visible will throw a SyntaxError\n    // we use our own heuristic for those browsers\n    // rethrow might be better if it's not the expected error but do we really\n    // want to crash if focus-visible malfunctioned?\n  }\n\n  // no need for validFocusTarget check. the user does that by attaching it to\n  // focusable events only\n  return hadKeyboardEvent || focusTriggersKeyboardModality(target);\n}\n\n/**\n * Should be called if a blur event is fired on a focus-visible element\n */\nfunction handleBlurVisible() {\n  // To detect a tab/window switch, we look for a blur event followed\n  // rapidly by a visibility change.\n  // If we don't see a visibility change within 100ms, it's probably a\n  // regular focus change.\n  hadFocusVisibleRecently = true;\n  window.clearTimeout(hadFocusVisibleRecentlyTimeout);\n  hadFocusVisibleRecentlyTimeout = window.setTimeout(() => {\n    hadFocusVisibleRecently = false;\n  }, 100);\n}\n\nexport default function useIsFocusVisible() {\n  const ref = React.useCallback((instance) => {\n    // eslint-disable-next-line react/no-find-dom-node\n    const node = ReactDOM.findDOMNode(instance);\n    if (node != null) {\n      prepare(node.ownerDocument);\n    }\n  }, []);\n\n  return { isFocusVisible, onBlurVisible: handleBlurVisible, ref };\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","import React, { useState } from 'react';\n\nfunction FilledPlayIcon(props) {\n  const { handleClick, extraClasses, size = \"small\", wrapperElement = \"div\" } = props || {};\n  const [WrapperComponent] = useState(wrapperElement);\n\n  return (\n    <WrapperComponent\n      role=\"img\"\n      onClick={handleClick}\n      className={`mls-o-svg transform ${extraClasses ? extraClasses : \"\"}`}>\n      <span className={`oc-o-icon--no-circle-play icon-svg fa-icon-svg fa-icon-svg--${size}`}>\n        <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 30 30\">\n          <path xmlns=\"http://www.w3.org/2000/svg\" d=\"M8 5l14 10L8 25z\" />\n        </svg>\n      </span>\n    </WrapperComponent>\n  );\n}\n\n// eslint-disable-next-line no-const-assign,no-func-assign\nFilledPlayIcon = React.memo(FilledPlayIcon);\n\nexport default FilledPlayIcon;\n","export { default } from './FilledPlayIcon';\n"],"names":[],"sourceRoot":""}