{"version":3,"file":"js/scripts_react_brightcove-video-playlist_main_js.js?_t=22f2c5eda29f88481a59","mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AAEA;AAEA;AACA;AAAA;AAAA;AACA;AACA;AACA;AAAA;AAgCA;AAGA;AAEA;;;;;;;;;;;;;;;;;ACvDA;;;;;;;;;;;;;;;;;;;;ACAA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AAEA;AACA;AACA;AAAA;AAGA;AACA;AAEA;AAGA;AAIA;AACA;AAAA;AAcA;AAEA;;;;;;;;;;;;;;;;;AC1CA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AAAA;AAGA;AACA;AACA;AACA;AACA;AAEA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAGA;AACA;AAGA;AACA;AAAA;AAGA;AACA;AACA;AACA;AAEA;AAAA;AACA;AAGA;AACA;AACA;AACA;AAAA;AACA;AACA;AAGA;AACA;AACA;AACA;AAAA;AAGA;AAAA;AACA;AAGA;AACA;AACA;AACA;AAAA;AACA;AAGA;AACA;AACA;AACA;AAAA;AACA;AAGA;AACA;AAAA;AAGA;AAEA;AACA;AAAA;AAGA;AACA;AACA;AACA;AAEA;AAAA;AAaA;AACA;AACA;AAGA;AACA;AACA;AACA;AAAA;AACA;AAGA;AACA;AACA;AACA;AAAA;AACA;AAGA;AACA;AAEA;AACA;AACA;AAEA;AACA;AAEA;AACA;AAEA;AACA;AAEA;AACA;AAEA;AACA;AACA;AAEA;AACA;AACA;AAEA;AAEA;AAGA;AAEA;AACA;AACA;AACA;AAEA;AACA;AACA;AAEA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AAGA;AAAA;AACA;AAGA;AACA;AACA;AACA;AAEA;AACA;AACA;AAAA;AAEA;AAAA;AAGA;AACA;AAEA;AAAA;AACA;AACA;AACA;AAGA;AACA;AAEA;AAAA;AACA;AACA;AACA;AAGA;AACA;AACA;AAAA;AACA;AAGA;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","sources":["webpack://@mlssoccer/netcore/./scripts/react/brightcove-video-playlist/components/PlaylistItem/PlaylistItem.js","webpack://@mlssoccer/netcore/./scripts/react/brightcove-video-playlist/components/PlaylistItem/index.js","webpack://@mlssoccer/netcore/./scripts/react/brightcove-video-playlist/components/VideoPlaylist/VideoPlaylist.js","webpack://@mlssoccer/netcore/./scripts/react/brightcove-video-playlist/components/VideoPlaylist/index.js","webpack://@mlssoccer/netcore/./scripts/react/brightcove-video-playlist/main.js","webpack://@mlssoccer/netcore/./scripts/react/shared/components/BrightcoveReactPlayer/BrightcoveReactPlayer.js","webpack://@mlssoccer/netcore/./scripts/react/shared/components/BrightcoveReactPlayer/index.js","webpack://@mlssoccer/netcore/./scripts/react/shared/hooks/useResize.js","webpack://@mlssoccer/netcore/./scripts/react/shared/hooks/useVideo.js","webpack://@mlssoccer/netcore/./scripts/react/shared/svg/PlayDirectionIcon/PlayDirectionIcon.js","webpack://@mlssoccer/netcore/./scripts/react/shared/svg/PlayDirectionIcon/index.js","webpack://@mlssoccer/netcore/./scripts/react/shared/svg/PlayIcon/PlayIcon.js","webpack://@mlssoccer/netcore/ignored|/npm/.yarn/cache/global-npm-4.4.0-888ee8033d-9c057557c8.zip/node_modules/global|min-document"],"sourcesContent":["import React from \"react\";\nimport Picture from \"../../../shared/components/Picture\";\nimport { formatImageUrl } from \"../../../shared/utils\";\nimport { actionTypes } from \"../../../shared/hooks/useVideo\";\nimport { useReactAppState } from \"../../../shared/containers/utils\";\nimport PlayIcon from \"../../../shared/svg/PlayIcon/PlayIcon\";\nimport { formatVideoDuration } from \"../../utils\";\n\nconst PlaylistItem = ({ isVideoPlaying, isCurrentItem, updateVideo, index, item }) => {\n  const { t } = useReactAppState();\n  const { highQuality } = item?.thumbnail?.templateUrl ? formatImageUrl(item.thumbnail.templateUrl, { format: \"w_175,c_scale\", extension: \"f_png\" }) : {};\n\n  const { duration = 0 } = item?.fields || {};\n\n  return (\n    <div\n      className={`mls-c-video-component__playlist-item ${isCurrentItem ? \"mls-c-video-component__playlist-item--current\" : \"\"}`}\n      onClick={() => updateVideo({ type: actionTypes.currentVideoPos, payload: index })}\n      tabIndex=\"0\">\n      <div className=\"d3-o-media-object\">\n        <div className=\"d3-o-media-object__body\">\n          {\n            isCurrentItem && isVideoPlaying\n              ? (\n                <span className=\"mls-o-label\">\n                  {t(\"brightcove_playing\")}\n                  <Picture fallbackSrc={null} loadingSrc={null} src={'/assets/images/AudioMicroAnimation-40x40.gif'} />\n                </span>\n              )\n              : null\n          }\n          <span className=\"d3-o-media-object__title\">{item?.title}</span>\n        </div>\n        <figure className=\"d3-o-media-object__figure\">\n          <div className={`mls-o-video__lock`}>\n            <div className=\"mls-o-video__lock-label-container\">\n              <span className=\"mls-o-video__lock-label\">\n                {formatVideoDuration(duration)}\n              </span>\n            </div>\n            <div role=\"img\" className=\"mls-o-video__play-icon-container\">\n              <PlayIcon height={6} width={3} />\n            </div>\n          </div>\n          {\n            highQuality\n              ? <Picture src={highQuality} loadingSrc={null} fallbackSrc={null} title={item.title} />\n              : null\n          }\n        </figure>\n      </div>\n    </div>\n  );\n};\n\nexport default PlaylistItem;\n","export { default } from './PlaylistItem';\n","import React, { useState, useEffect } from \"react\";\nimport PlaylistItem from \"../PlaylistItem\";\nimport ToggleButton from \"../../../shared/components/ToggleButton\";\nimport { useReactAppState } from \"../../../shared/containers/utils\";\n\nconst VideoPlaylist = ({ isVideoPlaying, playerHeight, videoList, currentVideoID, updateVideo, showLoadMore }) => {\n  const { t } = useReactAppState();\n  const [videos, setVideos] = useState(showLoadMore ? videoList.slice(0, 6) : videoList);\n  const [allVideosLoaded, setAllVideosLoaded] = useState(false);\n\n  const handleVideoList = () => {\n    setAllVideosLoaded(true);\n    setVideos(videoList);\n  };\n\n  useEffect(() => {\n    showLoadMore && !allVideosLoaded\n      ? setVideos(videoList.slice(0, 6))\n      : setVideos(videoList);\n  }, [showLoadMore]);\n\n  return (\n    <div style={playerHeight ? { maxHeight: `${playerHeight}px` } : {}} className=\"mls-c-video-component__playlist\">\n      {\n        videos.map((video, index) => {\n          const isCurrentVideo = video?.fields?.brightcoveId === currentVideoID;\n          return <PlaylistItem isVideoPlaying={isVideoPlaying} item={video} key={`${video._entityId}-${index}`} isCurrentItem={isCurrentVideo} index={index} updateVideo={updateVideo} />;\n        })\n      }\n      {\n        showLoadMore && !allVideosLoaded\n          ? (\n            <div className=\"mls-c-video-component__load-more\">\n              <ToggleButton className=\"mls-o-buttons__basic mls-o-buttons__basic--dark\" onClick={() => handleVideoList()}>{t(\"brightcove_load_more\")}</ToggleButton>\n            </div>\n          )\n          : null\n      }\n    </div>\n  );\n};\n\nexport default VideoPlaylist;\n","export { default } from './VideoPlaylist';","import React, { useState, useRef, useEffect } from 'react';\nimport { render } from 'react-dom';\nimport { useInView } from \"react-intersection-observer\";\nimport ReactPlayerLoader from \"../shared/components/BrightcoveReactPlayer\";\nimport VideoPlaylist from './components/VideoPlaylist';\nimport PlayDirectionIcon from \"../shared/svg/PlayDirectionIcon\";\nimport useInterval from \"../shared/hooks/useInterval\";\nimport useResize from \"../shared/hooks/useResize\";\nimport ReplayIcon from \"../shared/svg/ReplayIcon/ReplayIcon\";\nimport { doubleDigitIntDisplay } from \"../../libraries/_helpers\";\nimport { actionTypes, useVideo } from \"../shared/hooks/useVideo\";\nimport { useReactAppState } from \"../shared/containers/utils\";\nimport { getUserPlayVideoPermission, isMobileBrowser } from './utils';\nimport useAuth0Session from './hooks/useAuth0Session';\nimport RequiredAuthModal from './components/RequiredAuthModal';\n\nexport const BrightCoveVideoPlaylist = ({ options }) => {\n  if (!options.videoList) {\n    return null;\n  }\n\n  const { mediaQueries, urlList, t } = useReactAppState();\n  const { defaultAdUrl } = urlList || {};\n  const { isMediumLargeMin } = mediaQueries || {};\n  const isUserLogged = useAuth0Session();\n  const [modalVisible, setModalVisible] = useState(false);\n\n  const { state, updateVideo } = useVideo({\n    initialState: {\n      disableUrlFragment: options.disableUrlFragment || false,\n      isVideoPlaying: false,\n      isTimerRunning: false,\n      isPlayerLoaded: false,\n      count: null,\n      isAccountIdChanged: false,\n      videoList: options.videoList,\n      initialVideoPosition: options.initialVideoPosition,\n      isAutoplay: options.isAutoplay\n    }\n  });\n\n  const { currentVideoPos, currentVideo, videoList, isVideoPlaying, isTimerRunning, isPlayerLoaded, count, isAutoplay } = state || {};\n  const { accountWall, brightcoveAccountId, brightcoveId } = currentVideo?.fields || {};\n\n\n  if (!videoList || !currentVideo) {\n    return null;\n  }\n\n  const [playerHeight, setPlayerHeight] = useState(null);\n  const _child = useRef(null);\n  const mediaPlayerRef = useRef(null);\n  const mediaPlayerBodyRef = useRef(null);\n\n  const { ref, inView } = useInView({\n    threshold: .5,\n  });\n\n  useEffect(() => {\n    if (_child?.current?.player) {\n      if (!inView) {\n        _child.current.player.pause();\n      }\n    }\n  }, [ref, inView, _child]);\n\n  const goNextVideo = () => {\n    const nextVideoPos = currentVideoPos + 1;\n    if (nextVideoPos >= 0 && nextVideoPos < videoList.length) {\n      updateVideo({ type: actionTypes.currentVideoPos, payload: nextVideoPos });\n    }\n    else {\n      updateVideo({ type: actionTypes.currentVideoPos, payload: 0 });\n    }\n  };\n\n  const goPrevVideo = () => {\n    const prevVideoPos = currentVideoPos - 1;\n    if (prevVideoPos >= 0) {\n      updateVideo({ type: actionTypes.currentVideoPos, payload: prevVideoPos });\n    }\n  };\n\n  function handleResize() {\n    if (mediaPlayerRef?.current?.offsetWidth && mediaPlayerBodyRef?.current?.offsetHeight) {\n      const playerHeight = (mediaPlayerRef.current.offsetWidth / 1.77) + mediaPlayerBodyRef.current.offsetHeight;\n      setPlayerHeight(playerHeight);\n    }\n  }\n\n  useEffect(() => {\n    handleResize();\n  }, [isPlayerLoaded, currentVideoPos]);\n\n  useResize(handleResize, 1000);\n\n  useInterval(() => {\n    updateVideo({ type: actionTypes.count, payload: count - 1 });\n  }, isTimerRunning ? 1000 : null);\n\n  useEffect(() => {\n    const endScreen = _child?.current?.refNode.querySelector('.mls-o-video-player__end-screen');\n    if (isTimerRunning && endScreen) {\n      endScreen.className = `mls-o-video-player__end-screen`;\n\n      render(\n        <div className=\"mls-o-video-player__end-screen-details\">\n          <div className=\"mls-o-video-player__end-screen-counter-wrapper\">Next Video in: <span className=\"mls-o-video-player__end-screen-counter\">{doubleDigitIntDisplay(count)}</span></div>\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_video\")}</div>\n            </div>\n            <div className=\"mls-o-video-player__end-screen-next\">\n              <PlayDirectionIcon handleClick={() => goNextVideo()} size=\"large\" />\n              <div className=\"mls-o-video-player__end-screen-text\">{t(\"next_video\")}</div>\n            </div>\n          </div>\n        </div>,\n        endScreen\n      );\n    }\n\n    if (count === 0 && isTimerRunning) {\n      endScreen.className = `mls-o-video-player__end-screen vjs-hidden`;\n      updateVideo({ type: actionTypes.isTimerRunning, payload: false });\n      goNextVideo();\n    }\n  }, [count, isTimerRunning]);\n\n  useEffect(() => {\n    if (isVideoPlaying && _child?.current?.refNode.querySelector('.mls-o-video-player__end-screen')) {\n      const endScreen = _child?.current?.refNode.querySelector('.mls-o-video-player__end-screen');\n      endScreen.className = `mls-o-video-player__end-screen vjs-hidden`;\n    }\n  }, [isVideoPlaying]);\n\n  const addIcons = (brightCovePlayerInstance) => {\n    const $player = brightCovePlayerInstance?.el();\n\n    if ($player) {\n      const logo = document.createElement('div');\n      logo.className = `vjs-control mls-o-video-player__logo`;\n\n      const nextBtn = document.createElement('div');\n      nextBtn.className = `vjs-control mls-o-video-player__next-button`;\n\n      const prevBtn = document.createElement('div');\n      prevBtn.className = `vjs-control mls-o-video-player__prev-button`;\n\n      const progressContainer = document.createElement('div');\n      progressContainer.className = 'mls-o-video-player__progress-container';\n\n      const endScreen = document.createElement('div');\n      endScreen.className = `mls-o-video-player__end-screen vjs-hidden`;\n\n      const $duration = $player.querySelector('.vjs-duration.vjs-time-control.vjs-control');\n      const $currentTime = $player.querySelector('.vjs-current-time.vjs-time-control.vjs-control');\n      const $progressBar = $player.querySelector('.vjs-progress-control.vjs-control');\n\n      progressContainer.append($currentTime);\n      progressContainer.append($progressBar);\n      progressContainer.append($duration);\n\n      const controlBar = $player.querySelector('.vjs-control-bar');\n      // remove time divider\n      controlBar.removeChild($player.querySelector('.vjs-time-divider'));\n\n      // Change the class name here to move the icon in the controlBar\n      const volumeControlNode = $player.querySelector('.vjs-control-bar .vjs-volume-panel');\n      // Insert the icon div in proper location\n      controlBar.prepend(progressContainer);\n      controlBar.insertBefore(nextBtn, volumeControlNode);\n      controlBar.insertBefore(prevBtn, nextBtn);\n      controlBar.append(logo);\n\n      const liveLabel = document.createElement('div');\n      liveLabel.className = 'mls-o-video-player__is-live';\n      controlBar.insertBefore(liveLabel, volumeControlNode.nextSibling);\n\n      const progressBall = document.createElement('div');\n      progressBall.className = 'mls-o-video-player__progress-ball';\n      const secondProgressBall = progressBall.cloneNode();\n\n      const $volumeLevel = $player.querySelector('.vjs-volume-level');\n      const $playProgress = $player.querySelector('.vjs-play-progress');\n      $volumeLevel.append(progressBall);\n      $playProgress.append(secondProgressBall);\n      $player.append(endScreen);\n\n      // setIsPlayerLoaded(true);\n      updateVideo({ type: actionTypes.isPlayerLoaded, payload: true });\n    }\n  };\n\n  useEffect(() => {\n    const prevButton = _child?.current?.refNode.querySelector('.mls-o-video-player__prev-button');\n    const nextButton = _child?.current?.refNode.querySelector('.mls-o-video-player__next-button');\n    const liveLabel = _child?.current?.refNode.querySelector('.mls-o-video-player__is-live');\n\n    if (liveLabel) {\n      if (currentVideo?.context?.neutralSlug)\n        render(<div className=\"mls-o-label\">{currentVideo?.context?.neutralSlug}</div>, liveLabel);\n      else\n        render(null, liveLabel);\n    }\n\n    if (prevButton) {\n      prevButton.className = `vjs-control mls-o-video-player__prev-button ${currentVideoPos > 0 ? '' : 'd-none'}`;\n\n      render(\n        <PlayDirectionIcon extraClasses=\"rotate--180\" handleClick={goPrevVideo} />,\n        prevButton\n      );\n    }\n\n    if (nextButton) {\n      nextButton.className = `vjs-control mls-o-video-player__next-button ${currentVideoPos < videoList.length - 1 ? '' : 'd-none'}`;\n\n      render(\n        <PlayDirectionIcon handleClick={goNextVideo} />,\n        nextButton\n      );\n    }\n\n    return () => {\n      updateVideo({ type: actionTypes.isPlayerLoaded, payload: false });\n      updateVideo({ type: actionTypes.isTimerRunning, payload: false });\n    };\n  }, [isPlayerLoaded, currentVideoPos]);\n\n  const canUserPlayVideo = getUserPlayVideoPermission({ accountWall, isUserLogged });\n  const autoPlayVideoPlayer = canUserPlayVideo ? isAutoplay : false;\n\n  const isMobile = isMobileBrowser();\n\n  console.log(isUserLogged)\n  return (\n    <div className=\"mls-c-video-component\">\n      {\n        videoList.length > 0 && typeof isUserLogged == \"boolean\"\n          ? (\n            <>\n              <RequiredAuthModal accountWall={accountWall} visible={modalVisible} onGoBackClick={() => setModalVisible(false)} />\n              <div key={brightcoveAccountId} ref={mediaPlayerRef} className=\"mls-c-video-component__player d3-o-media-object\">\n                <div ref={ref} className=\"d3-o-media-object__figure\">\n                  <ReactPlayerLoader\n                    ref={_child}\n                    accountId={brightcoveAccountId}\n                    videoId={brightcoveId}\n                    accountWall={accountWall}\n                    key={brightcoveId}\n                    onSuccess={(success) => {\n                      const videoPlayerRef = success?.ref;\n\n                      addIcons(success?.ref);\n                      videoPlayerRef.ima3.settings.serverUrl = currentVideo?.fields?.adUrl || defaultAdUrl || \"\";\n\n                      const canUserPlayVideo = getUserPlayVideoPermission({ accountWall, isUserLogged });\n                      if (!canUserPlayVideo) {\n                        videoPlayerRef.off();\n                        videoPlayerRef.controlBar?.progressControl?.disable();\n                        videoPlayerRef.controlBar?.fullscreenToggle?.disable();\n                        updateVideo({ type: actionTypes.isVideoPlaying, payload: false });\n                        \n                        if (isAutoplay) {\n                          setModalVisible(true);\n                        }\n\n                        function handleVideoPlay() {\n                          const canUserPlayVideo = getUserPlayVideoPermission({ accountWall, isUserLogged });\n\n                          if (!canUserPlayVideo) {\n                            setModalVisible(true);\n                            videoPlayerRef.pause();\n                            updateVideo({ type: actionTypes.isVideoPlaying, payload: false });\n                          }\n                        }\n                        // videoPlayerRef.on('click', handleVideoPlay)\n                        videoPlayerRef.on('touchend', handleVideoPlay)\n                        videoPlayerRef.on('play', handleVideoPlay)\n\n                      } else {\n                        if(isVideoPlaying || (isMobile && state.isAutoplay)) {\n                          videoPlayerRef.play();\n                        }\n\n                        videoPlayerRef.on(\"userinactive\", () => {\n                          const controlBar = videoPlayerRef.el().querySelector(\".vjs-control-bar\");\n                          controlBar.style.opacity = 0;\n                          controlBar.style.visibility = \"visible\";\n                          controlBar.style.pointerEvents = \"none\";\n                          controlBar.style.transition = \"visibility 1s,opacity 1s\";\n                        });\n\n                        videoPlayerRef.on(\"useractive\", () => {\n                          const controlBar = videoPlayerRef.el().querySelector(\".vjs-control-bar\");\n                          controlBar.style = null;\n                        });\n\n                        videoPlayerRef.on('play', () => {\n                          const canUserPlayVideo = getUserPlayVideoPermission({ accountWall, isUserLogged });\n\n                          if (canUserPlayVideo) {\n                            updateVideo({ type: actionTypes.isVideoPlaying, payload: true });\n                            updateVideo({ type: actionTypes.isTimerRunning, payload: false });\n                            updateVideo({ type: actionTypes.count, payload: options.timeBetweenVideos || 5 });\n\n                            if (videoPlayerRef.el().classList.contains('vjs-controls-disabled')) {\n                              videoPlayerRef.el().classList.remove('vjs-controls-disabled');\n                            }\n                          } else {\n                            videoPlayerRef.pause();\n                            updateVideo({ type: actionTypes.isVideoPlaying, payload: false });\n                          }\n                        });\n\n                        videoPlayerRef.on('pause', () => {\n                          updateVideo({ type: actionTypes.isVideoPlaying, payload: false });\n                        });\n\n                        videoPlayerRef.on('ended', () => {\n                          updateVideo({ type: actionTypes.isVideoPlaying, payload: false });\n                          updateVideo({ type: actionTypes.isTimerRunning, payload: true });\n                          if (!videoPlayerRef.el().classList.contains('vjs-controls-disabled')) {\n                            videoPlayerRef.el().classList.add('vjs-controls-disabled');\n                          }\n                        });\n                      }\n                    }}\n                    attrs={{ className: 'mls-o-video-player' }}\n                    embedType=\"in-page\"\n                    options={{ fluid: true, muted: true, preload: 'auto', playsinline: true, autoplay: isMobile ? false : autoPlayVideoPlayer }}\n                  />\n                </div>\n                <div ref={mediaPlayerBodyRef} className=\"d3-o-media-object__body\">\n                  <div className=\"d3-o-media-object__title\">\n                    {videoList[currentVideoPos]?.title}\n                  </div>\n                  <div className=\"d3-o-media-object__description\">\n                    {videoList[currentVideoPos]?.fields?.description}\n                  </div>\n                </div>\n              </div>\n              <VideoPlaylist\n                isVideoPlaying={isVideoPlaying}\n                showLoadMore={videoList.length >= 6 && !isMediumLargeMin}\n                playerHeight={playerHeight && isMediumLargeMin ? playerHeight : null}\n                videoList={videoList}\n                currentVideoID={currentVideo?.fields?.brightcoveId}\n                updateVideo={updateVideo} />\n            </>\n          )\n          : null\n      }\n    </div>\n  );\n};\n\nexport default BrightCoveVideoPlaylist;\n","import React from 'react';\nimport playerLoader from '@brightcove/player-loader';\n\n/**\n * These prop changes can be handled by an internal player state change rather\n * than a full dispose/recreate.\n *\n * @private\n * @type {Object}\n */\nconst UPDATEABLE_PROPS = [\n  'catalogSearch',\n  'catalogSequence',\n  'playlistId',\n  'playlistVideoId',\n  'videoId'\n];\n\nconst logError = (err) => {\n  /* eslint-disable no-console */\n  if (err && console && console.error) {\n    console.error(err);\n  }\n  /* eslint-enable no-console */\n};\n\n/**\n * The official React component for the Brightcove Player!\n *\n * This uses `@brightcove/player-loader` to load a player into a React\n * component based on the given props.\n */\nclass ReactPlayerLoader extends React.Component {\n  /**\n   * Create a new Brightcove player.\n   *\n   * @param {Object} props\n   *        Most options will be passed along to player-loader, except for\n   *        options that are listed. See README.md for more detail.\n   *\n   * @param {string} [props.baseUrl]\n   *        The base URL to use when requesting a player\n   *\n   * @param {Object} [props.attrs]\n   *        Used to set attributes on the component element that contains the\n   *        embedded Brightcove Player.\n   *\n   * @param {boolean} [props.manualReloadFromPropChanges]\n   *        Used to specify if reloading the player after prop changes will be handled manually.\n   *\n   */\n  constructor(props) {\n    super(props);\n    this.refNode = null;\n    this.state = {\n      accountId: null\n    };\n    this.setRefNode = ref => {\n      this.refNode = ref;\n    };\n    this.loadPlayer = this.loadPlayer.bind(this);\n  }\n\n  /**\n   * Loads a new player based on the current props.\n   */\n  // eslint-disable-next-line bam/no-react-unbound\n  loadPlayer() {\n    // this.setState((prevState) => {\n    //   return {\n    //     accountId: this.props.accountId\n    //   };\n    // }, (prevState) => {\n    // If there is any player currently loaded, dispose it before fetching a\n    // new one.\n\n    this.disposePlayer();\n\n    // We need to provide our own callbacks below, so we cache these\n    // user-provided callbacks for use later.\n    const userSuccess = this.props.onSuccess;\n    const userFailure = this.props.onFailure;\n\n    const options = Object.assign({}, this.props, {\n      refNode: this.refNode,\n      refNodeInsert: 'append',\n      onSuccess: ({ ref, type }) => {\n        // If the component is not mounted when the callback fires, dispose\n        // the player and bail out.\n        if (!this.isMounted_) {\n          this.disposePlayer(ref);\n          return;\n        }\n\n        // Store a player reference on the component.\n        this.player = ref;\n        // Null out the player reference when the player is disposed from\n        // outside the component.\n        if (type === 'in-page') {\n          ref.one('dispose', () => {\n            this.player = null;\n          });\n        }\n\n        // Add a REACT_PLAYER_LOADER property to bcinfo to indicate this player\n        // was loaded via that mechanism.\n        if (ref.bcinfo) {\n          ref.bcinfo.REACT_PLAYER_LOADER = true;\n        }\n\n        // Call a user-provided onSuccess callback.\n        if (typeof userSuccess === 'function') {\n          userSuccess({ ref, type });\n        }\n      },\n      onFailure: (error) => {\n        // Ignore errors when not mounted.\n        if (!this.isMounted_) {\n          return;\n        }\n\n        // Call a user-provided onFailure callback.\n        if (typeof userFailure === 'function') {\n          userFailure(error);\n          return;\n        }\n\n        // Fall back to throwing an error;\n        throw new Error(error);\n      }\n    });\n\n    // Delete props that are not meant to be passed to player-loader.\n    delete options.attrs;\n    delete options.baseUrl;\n    delete options.manualReloadFromPropChanges;\n\n    // If a base URL is provided, it should only apply to this player load.\n    // This means we need to back up the original base URL and restore it\n    // _after_ we call player loader.\n    const originalBaseUrl = playerLoader.getBaseUrl();\n\n    if (this.props.baseUrl) {\n      playerLoader.setBaseUrl(this.props.baseUrl);\n    }\n\n    playerLoader({ ...options });\n    playerLoader.setBaseUrl(originalBaseUrl);\n  }\n\n  /**\n   * Disposes the current player, if there is one.\n   */\n  disposePlayer() {\n    // Nothing to dispose.\n\n    playerLoader.reset();\n    if (!this.player) {\n      return;\n    }\n\n    // Dispose an in-page player\n\n    if (this.player.dispose) {\n      this.player.dispose();\n\n      // Dispose an iframe player.\n    } else if (this.player.parentNode) {\n      this.player.parentNode.removeChild(this.player);\n    }\n\n    // Null out the player reference.\n    this.player = null;\n  }\n\n  /**\n   * Find the index of the `playlistVideoId` prop within the player's playlist.\n   *\n   * @param  {Object[]} playlist\n   *         An array of playlist item objects.\n   *\n   * @return {number}\n   *         The index of the `playlistVideoId` or `-1` if the player has been\n   *         disposed, is not using the playlist plugin, or if not found.\n   */\n  findPlaylistVideoIdIndex_(playlist) {\n    const { playlistVideoId } = this.props;\n\n    if (Array.isArray(playlist) && playlistVideoId) {\n      for (let i = 0; i < playlist.length; i++) {\n        const { id, referenceId } = playlist[i];\n\n        if (id === playlistVideoId || `ref:${referenceId}` === playlistVideoId) {\n          return i;\n        }\n      }\n    }\n\n    return -1;\n  }\n\n  /**\n   * Create a Playback API callback function for the component's player.\n   *\n   * @private\n   * @param  {string} requestType\n   *         The Playback API request type (e.g. \"video\" or \"playlist\").\n   *\n   * @param  {Object} changes\n   *         An object. The keys of this object are the props that changed.\n   *\n   * @return {Function}\n   *         A callback for the Playback API request.\n   */\n  createPlaybackAPICallback_(requestType, changes) {\n    return (err, data) => {\n      if (err) {\n        logError(err);\n        return;\n      }\n\n      // If the playlistVideoId changed and this is a playlist request, we\n      // need to search through the playlist items to find the correct\n      // starting index.\n      if (requestType === 'playlist' && changes.playlistVideoId) {\n        const i = this.findPlaylistVideoIdIndex_(data);\n\n        if (i > -1) {\n          data.startingIndex = i;\n        }\n      }\n\n      this.player.catalog.load(data);\n    };\n  }\n\n  /**\n   * Update the player based on changes to certain props that do not require\n   * a full player dispose/recreate.\n   *\n   * @param {Object} changes\n   *        An object. The keys of this object are the props that changed.\n   */\n  updatePlayer(changes) {\n    // No player exists, player is disposed, or not using the catalog\n    if (!this.player || !this.player.el()) {\n      return;\n    }\n\n    // If the player is using the catalog plugin, we _may_ populate this\n    // variable with an object.\n    let catalogParams;\n\n    if (this.player.usingPlugin('catalog')) {\n      // There is a new catalog sequence request. This takes precedence over\n      // other catalog updates because it is a different call.\n      if (changes.catalogSequence && this.props.catalogSequence) {\n        const callback = this.createPlaybackAPICallback_('sequence', changes);\n\n        this.player.catalog.getLazySequence(this.props.catalogSequence, callback, this.props.adConfigId);\n        return;\n      }\n\n      if (changes.videoId && this.props.videoId) {\n        catalogParams = {\n          type: 'video',\n          id: this.props.videoId\n        };\n      } else if (changes.playlistId && this.props.playlistId) {\n        catalogParams = {\n          type: 'playlist',\n          id: this.props.playlistId\n        };\n      } else if (changes.catalogSearch && this.props.catalogSearch) {\n        catalogParams = {\n          type: 'search',\n          q: this.props.catalogSearch\n        };\n      }\n    }\n\n    // If `catalogParams` is `undefined` here, that means the player either\n    // does not have the catalog plugin or no valid catalog request can be made.\n    if (catalogParams) {\n      if (this.props.adConfigId) {\n        catalogParams.adConfigId = this.props.adConfigId;\n      }\n\n      if (this.props.deliveryConfigId) {\n        catalogParams.deliveryConfigId = this.props.deliveryConfigId;\n      }\n\n      // We use the callback style here to make tests simpler in IE11 (no need\n      // for a Promise polyfill).\n      const callback = this.createPlaybackAPICallback_(catalogParams.type, changes);\n\n      this.player.catalog.get(catalogParams, callback);\n\n      // If no catalog request is being made, we may still need to update the\n      // playlist selected video.\n    } else if (\n      changes.playlistVideoId &&\n      this.props.playlistVideoId &&\n      this.player.usingPlugin('playlist')\n    ) {\n      const i = this.findPlaylistVideoIdIndex_(this.player.playlist());\n\n      if (i > -1) {\n        this.player.playlist.currentItem(i);\n      }\n    }\n  }\n\n  /**\n   * Called just after the component has mounted.\n   */\n  componentDidMount() {\n    this.isMounted_ = true;\n    this.loadPlayer();\n  }\n\n  /**\n   * Called when the component props are updated.\n   *\n   * Some prop changes may trigger special behavior (see `propChangeHandlers`),\n   * but if ANY prop is changed that is NOT handled, the player will be\n   * disposed/recreated entirely.\n   *\n   * @param  {Object} prevProps\n   *         The previous props state before change.\n   */\n  componentDidUpdate(prevProps) {\n    // Calculate the prop changes.\n    const changes = Object.keys(prevProps).reduce((acc, key) => {\n      const previous = prevProps[key];\n      const current = this.props[key];\n\n      // Do not compare functions\n      if (typeof current === 'function') {\n        return acc;\n      }\n\n      if (typeof current === 'object' && current !== null) {\n        if (JSON.stringify(current) !== JSON.stringify(previous)) {\n          acc[key] = true;\n        }\n\n        return acc;\n      }\n\n      if (current !== previous) {\n        acc[key] = true;\n      }\n\n      return acc;\n    }, {});\n\n    if (!this.props.manualReloadFromPropChanges) {\n      // Dispose and recreate the player if any changed keys cannot be handled.\n      if (Object.keys(changes).some(k => UPDATEABLE_PROPS.indexOf(k) === -1)) {\n        this.loadPlayer();\n        return;\n      }\n    }\n\n    this.updatePlayer(changes);\n  }\n\n  /**\n   * Called just before a component unmounts. Disposes the player.\n   */\n  componentWillUnmount() {\n    this.isMounted_ = false;\n    this.disposePlayer();\n  }\n\n  /**\n   * Renders the component.\n   *\n   * @return {ReactElement}\n   *          The react element to render.\n   */\n  render() {\n    const props = Object.assign(\n      { className: 'brightcove-react-player-loader' },\n      { ...this.props.attrs },\n      { ref: this.setRefNode }\n    );\n\n    return <div {...props} />;\n  }\n}\n\nexport default ReactPlayerLoader;\n","export { default } from './BrightcoveReactPlayer';\n","import { useEffect } from 'react';\nimport { debounce } from \"lodash\";\n\nfunction useResize(fn, delay = 1000) {\n  useEffect(() => {\n    const debouncedHandleResize = debounce(fn, delay);\n\n    window.addEventListener('resize', debouncedHandleResize);\n\n    return () => {\n      window.removeEventListener('resize', debouncedHandleResize);\n    };\n  });\n}\n\nexport default useResize;\n","import React, { useEffect, useReducer } from \"react\";\n\nexport const actionTypes = {\n  isPlayerLoaded: 'isPlayerLoaded',\n  count: 'count',\n  isVideoPlaying: 'isVideoPlaying',\n  isTimerRunning: 'isTimerRunning',\n  currentVideoPos: 'currentVideoPos',\n  currentVideoSlug: 'currentVideoSlug',\n  disableUrlFragment: 'disableUrlFragment'\n};\n\nexport function videoReducer(state, action) {\n  switch (action.type) {\n    case actionTypes.isPlayerLoaded: {\n      return { ...state, isPlayerLoaded: action.payload };\n    }\n    case actionTypes.isVideoPlaying: {\n      return { ...state, isVideoPlaying: action.payload };\n    }\n    case actionTypes.count: {\n      return { ...state, count: action.payload };\n    }\n\n    case actionTypes.isTimerRunning: {\n      return { ...state, isTimerRunning: action.payload };\n    }\n    case actionTypes.currentVideoPos: {\n      const position = action.payload;\n      const { videoList, currentVideo: prevVideo } = state || {};\n\n      const currentVideo = videoList[position];\n      const isAccountIdChanged = currentVideo?.fields?.brightcoveAccountId !== prevVideo?.fields?.brightcoveAccountId;\n      return { ...state, currentVideoPos: position, currentVideo, isAccountIdChanged };\n    }\n\n    case actionTypes.reset: {\n      return { ...state, ...action.payload };\n    }\n\n    case actionTypes.disableUrlFragment: {\n      return { ...state, disableUrlFragment: action.payload };\n    }\n\n    default: {\n      throw new Error(`Unsupported type: ${action.type}`);\n    }\n  }\n}\n\nexport function useVideo({ initialState, reducer = videoReducer } = {}) {\n  const hashedVideoSlug = location.hash\n    ? location.hash.replace('#', '')\n    : null;\n\n  const { videoList, initialVideoPosition } = initialState || {};\n\n  const currentVideoPos = initialVideoPosition || initialVideoPosition === 0\n    ? initialVideoPosition\n    : hashedVideoSlug\n      ? videoList.findIndex(video => video.slug === hashedVideoSlug)\n      : 0;\n\n  const { current: currentState } = React.useRef({\n    ...initialState,\n    currentVideoPos,\n    currentVideo: videoList[currentVideoPos]\n  });\n\n  const [state, dispatch] = useReducer(reducer, currentState);\n\n  const { currentVideo, isAccountIdChanged, disableUrlFragment } = state || {};\n\n  useEffect(() => {\n    if (currentVideo && !disableUrlFragment) {\n      const state = { 'video': currentVideo.title };\n      const title = currentVideo.title || \"\";\n      const url = `#${currentVideo?.slug}`;\n      history.pushState(state, title, url);\n    }\n  }, [currentVideo, isAccountIdChanged, disableUrlFragment]);\n\n  const updateVideo = ({ type, payload }) => dispatch({ type, payload });\n  const reset = (payload) => dispatch({ type: 'reset', payload });\n\n  return {\n    state,\n    reset,\n    updateVideo\n  };\n}\n","import React from \"react\";\n\nconst PlayDirectionIcon = ({ handleClick, extraClasses, size = \"small\" }) => {\n  return (\n    <button\n      role=\"img\"\n      onClick={handleClick}\n      className={`mls-o-svg transform ${extraClasses ? extraClasses : \"\"}`}>\n      <span className={`oc-o-icon-next-video icon-svg fa-icon-svg--${size}`}>\n        <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 36 36\">\n          <g fill=\"none\" fillRule=\"evenodd\">\n            <path d=\"M0 0h36v36H0z\" />\n            <path d=\"M9.82 9v18l12.73-9L9.82 9zm.8 1.68L20.98 18l-10.36 7.33V10.68z\" fill=\"#FFF\" />\n            <path d=\"M27.4 9.5v17h-3.5v-17h3.5z\" fillRule=\"nonzero\" stroke=\"#FFF\" />\n            <g fill=\"#FFF\">\n              <path d=\"M9.82 9v18l12.73-9L9.82 9zm.8 1.68L20.98 18l-10.36 7.33V10.68z\" />\n            </g>\n          </g>\n        </svg>\n      </span>\n    </button>\n  );\n};\n\nexport default PlayDirectionIcon;\n","export { default } from './PlayDirectionIcon';\n","import React from 'react';\n\nfunction PlayIcon({ handleClick, extraClasses, height, width }) {\n  return (\n    <div\n      role=\"img\"\n      onClick={handleClick}\n      className={`mls-o-svg transform ${extraClasses ? extraClasses : \"\"}`}>\n        <svg width={width} height={height} viewBox=\"0 0 4 7\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path id=\"Play Icon\" fillRule=\"evenodd\" clipRule=\"evenodd\" d=\"M0 0V6.03738L3.5 3.01869L0 0Z\" fill=\"white\"/>\n        </svg>\n    </div>\n  );\n}\n\nexport default PlayIcon;","/* (ignored) */"],"names":[],"sourceRoot":""}