{"version":3,"file":"js/react/brightcove-single-video-app.js?_t=dab8c9ddf2caac634718","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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AAAA;AACA;AAGA;AACA;AAEA;AAEA;AACA;AAEA;AACA;AACA;AACA;AAAA;AACA;AAGA;AACA;AAAA;AACA;AACA;AAEA;AAAA;AAGA;AACA;AACA;AACA;AAAA;AACA;AACA;AAGA;AACA;AACA;AACA;AACA;AACA;AAAA;AAQA;AACA;AACA;AAGA;AACA;AAAA;AACA;AACA;AACA;AACA;AACA;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AAIA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AACA;AAEA;AACA;AACA;AAAA;AACA;AAGA;AACA;AACA;AACA;AACA;AACA;AAAA;AACA;AAGA;AACA;AAEA;AACA;AACA;AACA;AAAA;AACA;AAEA;AACA;AAAA;AACA;AACA;AACA;AAEA;AAAA;AACA;AAIA;AAEA;AACA;AACA;AACA;AAAA;AACA;AAKA;AACA;AAEA;AACA;AACA;AAAA;AAGA;AAEA;AAAA;AAAA;AACA;AACA;AACA;AAAA;AAGA;AAAA;AAAA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAKA;AAEA;;;;;;;;;;;;;;;;;ACvLA;AAEA;AACA;AAEA;AACA;AACA;AACA;AAAA;AAEA;AACA;;;;;;;;;;;;;;;;ACXA","sources":["webpack://@mlssoccer/netcore/./scripts/libraries/_modules/tracking/helpers.js","webpack://@mlssoccer/netcore/./scripts/react/brightcove-single-video/app.js","webpack://@mlssoccer/netcore/./scripts/react/brightcove-single-video/main.js","webpack://@mlssoccer/netcore/./scripts/react/shared/containers/utils.js","webpack://@mlssoccer/netcore/./scripts/react/shared/svg/ReplayIcon/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';","import React, { useEffect, useRef, useState } from 'react';\nimport { useInView } from 'react-intersection-observer';\nimport { render } from \"react-dom\";\nimport ReplayIcon from \"../shared/svg/ReplayIcon\";\nimport { useReactAppState } from \"../shared/containers/utils\";\nimport { getUserPlayVideoPermission, isMobileBrowser } from '../brightcove-video-playlist/utils';\nimport useAuth0Session from '../brightcove-video-playlist/hooks/useAuth0Session';\nimport RequiredAuthModal from '../brightcove-video-playlist/components/RequiredAuthModal';\nimport { trackUserFreemiumLoginWallCtaClicked } from '../../libraries/_modules/tracking/helpers';\n\nexport const BrightCoveSingleVideo = ({ options }) => {\n  const { urlList, t } = useReactAppState();\n  const { defaultAdUrl } = urlList || {};\n  const isUserLogged = useAuth0Session();\n  const [modalVisible, setModalVisible] = useState(false);\n\n  const _child = useRef(null);\n  const [isVideoEnded, setIsVideoEnded] = useState(false);\n  const { ref, inView } = useInView({\n    threshold: .9,\n  });\n\n  const playerId = `mls-o-video-player__instance-${options?.accountId}-${options?.videoId}`;\n  const containerId = `mls-c-${playerId}`;\n\n  const { accountWall } = options || {};\n\n  const addIcons = (brightCovePlayerInstance) => {\n    const $player = brightCovePlayerInstance?.el();\n\n    if ($player) {\n      const endScreen = document.createElement('div');\n      endScreen.className = `mls-o-video-player__end-screen vjs-hidden`;\n      $player.append(endScreen);\n    }\n  };\n\n  const handleGoBackClick = () => {\n    trackUserFreemiumLoginWallCtaClicked({\n      freemiumType: \"video\",\n      ctaAction: \"goback\",\n    });\n    setModalVisible(false);\n  }\n\n  useEffect(() => {\n    if (_child?.current?.player) {\n      if (!inView && !_child.current.player.isFullscreen()) {\n        _child.current.player.pause();\n      }\n    }\n  }, [ref, inView, _child]);\n\n  useEffect(() => {\n    const endScreen = _child?.current?.querySelector('.mls-o-video-player__end-screen');\n    if (endScreen) {\n      if (isVideoEnded) {\n        endScreen.className = `mls-o-video-player__end-screen`;\n        render(\n          <div className=\"mls-o-video-player__end-screen-details\">\n            <div className=\"mls-o-video-player__end-screen-button-group\">\n              <div className=\"mls-o-video-player__end-screen-replay\">\n                <ReplayIcon handleClick={() => _child.current.player.play()} size=\"large\" />\n                <div className=\"mls-o-video-player__end-screen-text\">{t(\"replay\")}</div>\n              </div>\n            </div>\n          </div>,\n          endScreen\n        );\n      }\n      else {\n        endScreen.className = `mls-o-video-player__end-screen vjs-hidden`;\n        render(\n          null,\n          endScreen\n        );\n      }\n    }\n  }, [isVideoEnded]);\n\n  useEffect(() => {\n    if (isUserLogged !== undefined) {\n      console.log(\"IS USER LOGGED\", isUserLogged)\n      const $script = document.createElement(\"script\");\n      $script.async = true;\n      $script.src = `https://players.brightcove.net/${options?.accountId}/default_default/index.min.js`;\n      $script.charset = \"utf-8\";\n      $script.onload = () => {\n        const bc = window.bc;\n        const player = bc(`${playerId}`);\n  \n        player.ready(function () {\n          addIcons(player);\n          player.ima3.settings.serverUrl = options?.adUrl || defaultAdUrl || \"\";\n  \n          // confirm isUserLogged has loaded when mounted\n  \n          const canUserPlayVideo = getUserPlayVideoPermission({ accountWall, isUserLogged });\n          if (!canUserPlayVideo) {\n            player.off();\n            player.controlBar?.progressControl?.disable();\n            player.controlBar?.fullscreenToggle?.disable();\n            if (options.isAutoplay) {\n              setModalVisible(true);\n            }\n          } else {\n            const isMobile = isMobileBrowser();\n            if (isMobile && options.isAutoplay) {\n              player.play();\n            }\n          }\n  \n          player.on('play', handleVideoPlay);\n          player.on('touchend', handleVideoPlay);\n          player.on('ended', () => {\n            setIsVideoEnded(true);\n            if (!player.el().classList.contains('vjs-controls-disabled')) {\n              player.el().classList.add('vjs-controls-disabled');\n            }\n          });\n  \n          function handleVideoPlay() {\n            const canUserPlayVideo = getUserPlayVideoPermission({ accountWall, isUserLogged });\n  \n            if (canUserPlayVideo) {\n              setIsVideoEnded(false);\n              if (player.el().classList.contains('vjs-controls-disabled')) {\n                player.el().classList.remove('vjs-controls-disabled');\n              }\n            } else {\n              setModalVisible(true);\n              player.pause();\n            }\n          }\n        });\n      };\n      document.getElementById(containerId)?.append($script);\n    }\n  }, [isUserLogged]);\n\n\n  React.useEffect(() => {\n    // check if userLogged doesn't affect re-render this logic\n    const canUserPlayVideo = getUserPlayVideoPermission({ accountWall, isUserLogged });\n    if (canUserPlayVideo) {\n      const lockIcon = document.querySelector('h2.fa-text__title .fa-text__icon');\n      lockIcon?.remove();\n    }\n\n    \n  }, [accountWall, isUserLogged])\n\n  const canUserPlayVideo = getUserPlayVideoPermission({ accountWall, isUserLogged });\n  const isMobile = isMobileBrowser();\n\n  let autoPlay = {};\n  if (canUserPlayVideo && options?.isAutoplay && !isMobile) {\n    autoPlay = { autoplay: true };\n  }\n\n  return (\n    <div ref={ref} id={`mls-c-${playerId}`} className=\"mls-c-video-component__player d3-o-media-object\">\n      <RequiredAuthModal\n        visible={modalVisible}\n        onGoBackClick={handleGoBackClick}\n        accountWall={accountWall}\n      />\n      <div className=\"mls-o-video-player\">\n        <video-js ref={_child}\n          id={playerId}\n          data-account={options?.accountId}\n          data-video-id={options?.videoId}\n          class=\"vjs-fluid\"\n          preload=\"auto\"\n          controls=\"\"\n          playsinline\n          {...autoPlay}\n        />\n      </div>\n    </div>\n  );\n};\n\nexport default BrightCoveSingleVideo;\n","import { createContext, useContext } from \"react\";\n\nexport const ReactAppState = createContext();\nReactAppState.displayName = 'ReactMLS';\n\nexport function useReactAppState() {\n  const context = useContext(ReactAppState);\n  if (context === undefined) {\n    throw new Error('useAppState must be used within a <App />');\n  }\n  return context;\n}\n","export { default } from './ReplayIcon';\n"],"names":[],"sourceRoot":""}