{"version":3,"file":"js/scripts_react_brightcove-video-playlist_main_js.js?_t=f9508436096d11becaa4","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 updateVideo({ type: actionTypes.currentVideoPos, payload: index })}\n tabIndex=\"0\">\n
\n
\n {\n isCurrentItem && isVideoPlaying\n ? (\n \n {t(\"brightcove_playing\")}\n \n \n )\n : null\n }\n {item?.title}\n
\n
\n
\n
\n \n {formatVideoDuration(duration)}\n \n
\n
\n \n
\n
\n {\n highQuality\n ? \n : null\n }\n
\n
\n \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
\n {\n videos.map((video, index) => {\n const isCurrentVideo = video?.fields?.brightcoveId === currentVideoID;\n return ;\n })\n }\n {\n showLoadMore && !allVideosLoaded\n ? (\n
\n handleVideoList()}>{t(\"brightcove_load_more\")}\n
\n )\n : null\n }\n
\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
\n
Next Video in: {doubleDigitIntDisplay(count)}
\n
\n
\n _child.current.player.play()} size=\"large\" />\n
{t(\"replay_video\")}
\n
\n
\n goNextVideo()} size=\"large\" />\n
{t(\"next_video\")}
\n
\n
\n
,\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(
{currentVideo?.context?.neutralSlug}
, 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 ,\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 ,\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
\n {\n videoList.length > 0 && typeof isUserLogged == \"boolean\"\n ? (\n <>\n setModalVisible(false)} />\n
\n
\n {\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
\n
\n
\n {videoList[currentVideoPos]?.title}\n
\n
\n {videoList[currentVideoPos]?.fields?.description}\n
\n
\n
\n = 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
\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
;\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 \n \n \n \n \n \n \n \n \n \n \n \n \n \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 \n \n \n \n
\n );\n}\n\nexport default PlayIcon;","/* (ignored) */"],"names":[],"sourceRoot":""}