\n \n {renderedVersions}\n
\n \n );\n }\n}\n\nexport default Versions;\n","import React from 'react';\nimport PropTypes from 'prop-types';\n\nconst VersionCount = ({ track, onDisplayVersions }) => (\n \n {track.version_count > 0 &&\n onDisplayVersions(track.id)} className=\"browse__version\">+{track.version_count}
\n }\n \n);\n\n// props validation.\nVersionCount.propTypes = {\n track: PropTypes.object,\n onDisplayVersions: PropTypes.func,\n mainVersionId: PropTypes.number,\n};\n\nexport default VersionCount;\n","import _ from 'lodash';\nimport React, { Fragment } from 'react';\nimport PropTypes from 'prop-types';\nimport { connect } from 'react-redux';\nimport { PLACEHOLDER_IMG_URL } from 'components/ImgPlaceholder';\nimport EllipsisText from 'react-ellipsis-text';\nimport NormalisedScore from 'components/NormalisedScore';\nimport A from '../../components/A';\nimport Img from '../../components/Img';\nimport Heart from '../../styles/svg-components/Heart';\nimport CrossRedSVG from 'styles/svg-components/CrossRedSVG.js';\nimport AssetAddToPlaylist from '../../styles/svg-components/AssetAddToPlaylist';\n\nimport Edit from './Edit';\nimport Styles from './Styles';\nimport PreviewAndLicense from './PreviewAndLicense';\nimport Preview from './Preview';\nimport License from './License';\nimport SubscriptionLicense from './SubscriptionLicense';\nimport Versions from './Versions';\nimport NameLink from './NameLink';\nimport VersionCount from './VersionCount';\nimport Pause from '../../styles/svg-components/Pause';\nimport SpinnerTrackPlay from '../../styles/svg-components/SpinnerTrackPlay';\nimport PlayIconSmall from '../../styles/svg-components/PlayIconSmall';\nimport PauseIconSmall from '../../styles/svg-components/PauseIconSmall';\nimport PlayCircleSmTransparent from '../../styles/svg-components/PlayCircleSmTransparent';\nimport { addNewEngagement } from 'actions/favouriteAction';\nimport { convertToMinutesAndSeconds, getImgixUrl } from '../../utils/helpers';\nimport {\n playerActive,\n addActiveTrack,\n playActiveTrack,\n addPrimaryTrack,\n pausedActiveTrack,\n setPlayerPosition,\n setTrackPosition,\n toggleVersion,\n} from '../../actions/footerPlayerAction';\n\nclass Track extends React.Component {\n constructor(props) {\n super(props);\n const showVersions = !_.isEmpty(props.isActiveTrack) ? (props.isActiveTrack.trackID === props.track.id && props.isActiveTrack.versionID !== props.mainVersionId) : false;\n this.state = {\n showVersions,\n isAudioReady: false,\n };\n this.handleToggleVersions = this.handleToggleVersions.bind(this);\n this.handleWaveFormSeek = this.handleWaveFormSeek.bind(this);\n this.userHasSubscription = this.userHasSubscription.bind(this);\n // Class property.\n this.waveSurfer = null;\n if (!_.isEmpty(props.isActiveTrack)) {\n if (props.isActiveTrack.trackID === props.track.id && props.isActiveTrack.versionID !== props.mainVersionId) {\n props.toggleVersion(props.track.id, true);\n }\n }\n }\n\n // Lifecycle method, will only fire once after first render.\n componentDidMount() {\n const { track, mainVersionId, wavesurfer, browseType } = this.props;\n if (_.isEmpty(wavesurfer)) return false;\n this.waveSurfer = wavesurfer;\n if (!_.isEmpty(this.props.isActiveTrack)) {\n if (_.isEmpty(this.props.player.currentTrack)) {\n if (track.id === this.props.isActiveTrack.trackID && mainVersionId === this.props.isActiveTrack.versionID) {\n this.props.setCurrentTrack({\n trackID: track.id,\n versionID: mainVersionId,\n });\n this.props.setPlaying(track.id, track.current_context.id, mainVersionId, browseType);\n }\n }\n }\n return false;\n }\n componentWillReceiveProps(nextProps) {\n if (nextProps.wavesurfer !== this.props.wavesurfer) {\n this.waveSurfer = nextProps.wavesurfer;\n this.handleWaveFormSeek();\n return false;\n }\n return false;\n }\n // Lifecycle method, component destroy.\n componentWillUnmount() {\n this.waveSurfer && this.waveSurfer.destroy();\n }\n\n userHasSubscription(){\n return ( this.props.subscriptionData.isActive || this.props.subscriptionData.isFreeTrial );\n }\n\n // Check if current track is playing.\n isActiveTrack() {\n const { player, track, mainVersionId } = this.props;\n return (player.currentTrack.trackID === track.id) && (player.currentTrack.versionID === mainVersionId);\n }\n handleWaveFormSeek() {\n const { track, index } = this.props;\n if (!this.waveSurfer) {\n return;\n }\n this.waveSurfer.on('seek', (pos) => {\n const { isActiveTrack, mainVersionId, playerTrack, newTrackWaves, tracksWaves, flushTrackWave, currentPage, browseType } = this.props;\n if (!_.isEmpty(newTrackWaves)) {\n if (_.findIndex(tracksWaves, ['id', track.id]) === -1) {\n flushTrackWave(currentPage || 1);\n }\n }\n if (isActiveTrack.isAudioReady && !_.isEmpty(isActiveTrack)) {\n if ((isActiveTrack.isAudioReady && isActiveTrack.trackID !== track.id && isActiveTrack.versionID !== mainVersionId)) {\n const { wavesurfer } = playerTrack;\n if (!_.isEmpty(wavesurfer)) {\n if (!wavesurfer.isDestroyed) {\n wavesurfer.play();\n }\n }\n this.props.setTrackPosition({\n position: pos,\n activeTrack: {\n trackID: track.id,\n versionID: mainVersionId,\n currentContext: track.current_context.id,\n isAudioReady: false,\n position: pos,\n },\n primaryTrack: {\n ...track,\n trackId: track.id,\n versionId: mainVersionId,\n trackIndex: index,\n versionIndex: 0,\n wavesurfer: this.waveSurfer,\n },\n });\n this.props.setCurrentTrack({\n trackID: track.id,\n versionID: mainVersionId,\n });\n if (!isActiveTrack.playing) {\n this.props.setPlaying(track.id, track.current_context.id, mainVersionId, browseType);\n this.props.playActiveTrack();\n } else {\n addNewEngagement('play', track.id, track.current_context.id, mainVersionId, browseType);\n }\n } else if (isActiveTrack.isAudioReady && isActiveTrack.trackID === track.id) {\n this.props.setPlayerPosition(pos);\n if (_.isEmpty(this.props.player.currentTrack)) {\n this.props.setCurrentTrack({\n trackID: track.id,\n versionID: mainVersionId,\n });\n this.props.setPlaying(track.id, track.current_context.id, mainVersionId, browseType);\n } else if (isActiveTrack.trackID === track.id && isActiveTrack.versionID !== mainVersionId) {\n this.props.setTrackPosition({\n position: pos,\n activeTrack: {\n trackID: track.id,\n versionID: mainVersionId,\n currentContext: track.current_context.id,\n isAudioReady: false,\n position: pos,\n },\n primaryTrack: {\n ...track,\n trackId: track.id,\n versionId: mainVersionId,\n trackIndex: index,\n versionIndex: 0,\n wavesurfer: this.waveSurfer,\n },\n });\n this.props.setCurrentTrack({\n trackID: track.id,\n versionID: mainVersionId,\n });\n } else if (isActiveTrack.trackID === track.id && isActiveTrack.versionID === mainVersionId) {\n const { wavesurfer } = playerTrack;\n if (!_.isEmpty(wavesurfer)) {\n if (!wavesurfer.isPlaying() && !isActiveTrack.playing) {\n if (!wavesurfer.isDestroyed) {\n wavesurfer.play();\n }\n this.props.setPlaying(track.id, track.current_context.id, mainVersionId, browseType);\n this.props.playActiveTrack();\n }\n }\n }\n }\n } else if (_.isEmpty(isActiveTrack) && !this.props.isAudioReady) {\n this.props.setTrackPosition({\n position: pos,\n activeTrack: {\n trackID: track.id,\n versionID: mainVersionId,\n currentContext: track.current_context.id,\n isAudioReady: false,\n position: pos,\n },\n primaryTrack: {\n ...track,\n trackId: track.id,\n versionId: mainVersionId,\n trackIndex: index,\n versionIndex: 0,\n wavesurfer: this.waveSurfer,\n },\n });\n this.props.setCurrentTrack({\n trackID: track.id,\n versionID: mainVersionId,\n });\n this.props.setPlaying(track.id, track.current_context.id, mainVersionId, browseType);\n this.props.playActiveTrack();\n this.props.playerActive();\n } else if (!isActiveTrack.isAudioReady && !_.isEmpty(isActiveTrack) && !isActiveTrack.playing) {\n if ((!isActiveTrack.playing && isActiveTrack.trackID !== track.id && isActiveTrack.versionID !== mainVersionId)) {\n this.props.setTrackPosition({\n position: pos,\n activeTrack: {\n trackID: track.id,\n versionID: mainVersionId,\n currentContext: track.current_context.id,\n isAudioReady: false,\n position: pos,\n },\n primaryTrack: {\n ...track,\n trackId: track.id,\n versionId: mainVersionId,\n trackIndex: index,\n versionIndex: 0,\n wavesurfer: this.waveSurfer,\n },\n });\n this.props.setCurrentTrack({\n trackID: track.id,\n versionID: mainVersionId,\n });\n this.props.setPlaying(track.id, track.current_context.id, mainVersionId, browseType);\n this.props.playActiveTrack();\n } else if (!isActiveTrack.playing && isActiveTrack.trackID === track.id && isActiveTrack.versionID === mainVersionId) {\n const { wavesurfer } = playerTrack;\n if (!_.isEmpty(wavesurfer)) {\n if (!wavesurfer.isPlaying() && !isActiveTrack.playing) {\n if (!wavesurfer.isDestroyed) {\n wavesurfer.play();\n }\n this.props.setPlaying(track.id, track.current_context.id, mainVersionId, browseType);\n this.props.playActiveTrack();\n }\n }\n this.props.setPlayerPosition(pos);\n }\n } else if (!isActiveTrack.isAudioReady && !_.isEmpty(isActiveTrack) && isActiveTrack.playing) {\n if (isActiveTrack.trackID === track.id && isActiveTrack.versionID === mainVersionId) {\n this.props.setPlayerPosition(pos);\n } else if (isActiveTrack.trackID === track.id && isActiveTrack.versionID !== mainVersionId) {\n const { wavesurfer } = playerTrack;\n if (!_.isEmpty(wavesurfer)) {\n if (!wavesurfer.isDestroyed) {\n wavesurfer.pause();\n }\n }\n this.props.setTrackPosition({\n position: pos,\n activeTrack: {\n trackID: track.id,\n versionID: mainVersionId,\n currentContext: track.current_context.id,\n isAudioReady: false,\n position: pos,\n },\n primaryTrack: {\n ...track,\n trackId: track.id,\n versionId: mainVersionId,\n trackIndex: index,\n versionIndex: 0,\n wavesurfer: this.waveSurfer,\n },\n });\n this.props.setCurrentTrack({\n trackID: track.id,\n versionID: mainVersionId,\n });\n } else if (isActiveTrack.trackID !== track.id && isActiveTrack.versionID !== mainVersionId) {\n const { wavesurfer } = playerTrack;\n if (!_.isEmpty(wavesurfer)) {\n if (!wavesurfer.isDestroyed) {\n wavesurfer.pause();\n }\n }\n this.props.setTrackPosition({\n position: pos,\n activeTrack: {\n trackID: track.id,\n versionID: mainVersionId,\n currentContext: track.current_context.id,\n isAudioReady: false,\n position: pos,\n },\n primaryTrack: {\n ...track,\n trackId: track.id,\n versionId: mainVersionId,\n trackIndex: index,\n versionIndex: 0,\n wavesurfer: this.waveSurfer,\n },\n });\n this.props.setCurrentTrack({\n trackID: track.id,\n versionID: mainVersionId,\n });\n addNewEngagement('play', track.id, track.current_context.id, mainVersionId, browseType);\n }\n } else {\n if (isActiveTrack.trackID === track.id && isActiveTrack.versionID === mainVersionId) return false;\n const { wavesurfer } = playerTrack;\n if (!_.isEmpty(wavesurfer)) {\n if (!wavesurfer.isDestroyed) {\n wavesurfer.pause();\n }\n }\n this.props.setTrackPosition({\n position: pos,\n activeTrack: {\n trackID: track.id,\n versionID: mainVersionId,\n currentContext: track.current_context.id,\n isAudioReady: false,\n position: pos,\n },\n primaryTrack: {\n ...track,\n trackId: track.id,\n versionId: mainVersionId,\n trackIndex: index,\n versionIndex: 0,\n wavesurfer: this.waveSurfer,\n },\n });\n this.props.setCurrentTrack({\n trackID: track.id,\n versionID: mainVersionId,\n });\n addNewEngagement('play', track.id, track.current_context.id, mainVersionId, browseType);\n }\n return false;\n });\n }\n // Play/Pause track.\n handleTrackPlayPause(track, index) {\n // Set status to playing.\n if (this.props.player.currentTrack.trackID === track.id && this.props.player.currentTrack.versionID === this.props.mainVersionId) {\n const { playerTrack } = this.props;\n const { wavesurfer } = playerTrack;\n if (!this.props.player.isPlaying) {\n if (!_.isEmpty(wavesurfer)) {\n if (!wavesurfer.isDestroyed) {\n wavesurfer.play();\n }\n }\n this.props.setPlaying(track.id, track.current_context.id, this.props.mainVersionId, this.props.browseType);\n this.props.playActiveTrack();\n } else {\n if (!_.isEmpty(wavesurfer)) {\n if (!wavesurfer.isDestroyed) {\n wavesurfer.pause();\n }\n }\n this.props.setPause();\n this.props.pausedActiveTrack();\n }\n return false;\n }\n // Dispatch events.\n this.props.setCurrentTrack({\n trackID: track.id,\n versionID: this.props.mainVersionId,\n });\n // add track to footer player\n this.props.addActiveTrack({\n trackID: track.id,\n versionID: this.props.mainVersionId,\n currentContext: track.current_context.id,\n isAudioReady: false,\n });\n this.props.addPrimaryTrack({\n ...track,\n trackId: track.id,\n versionId: this.props.mainVersionId,\n trackIndex: index,\n versionIndex: _.findIndex(track.track_version, ['id', track.track_url.id]),\n wavesurfer: this.waveSurfer,\n });\n this.props.setPlayerPosition(0);\n this.props.playActiveTrack();\n this.props.setPlaying(track.id, track.current_context.id, this.props.mainVersionId, this.props.browseType);\n this.props.playerActive();\n if (!_.isEmpty(this.props.newTrackWaves)) {\n if (_.findIndex(this.props.tracksWaves, ['id', track.id]) === -1) {\n this.props.flushTrackWave(this.props.currentPage);\n }\n }\n return false;\n }\n\n // Toggle track versions.\n handleToggleVersions(trackId) {\n this.setState({ showVersions: !this.state.showVersions }, () => {\n this.props.toggleVersion(trackId, this.state.showVersions);\n });\n }\n posToSec(pos, length) {\n return pos * length;\n }\n\n getTopStyles(tracks) {\n let topStyles = [];\n let pageStyleName = $('.hero__title.hero__title--secondary').text(); // TODO: Get this from React vars\n // let firstUniqueStyle = tracks.track_to_style[0].style;\n let firstUniqueStyle = false;\n let secondUniqueStyle = false;\n\n\n // Get first unique style\n for (var i = 0; i < tracks.track_to_style.length; i++) {\n if (tracks.track_to_style[i].style.name !== pageStyleName) {\n firstUniqueStyle = tracks.track_to_style[i].style;\n\n break;\n }\n }\n // Get second unique style\n for (var i = 0; i < tracks.track_to_style.length; i++) {\n if (tracks.track_to_style[i].style.name !== firstUniqueStyle.name && tracks.track_to_style[i].style.name !== pageStyleName) {\n secondUniqueStyle = tracks.track_to_style[i].style;\n\n break;\n }\n }\n\n return [firstUniqueStyle, secondUniqueStyle];\n }\n\n // Check if version available for this track.\n checkVersions(versions, trackId) {\n if (!_.isEmpty(versions)) {\n return versions;\n }\n return null;\n }\n\n // Track image.\n checkImage(track) {\n let avatarImage = PLACEHOLDER_IMG_URL;\n if (track.artist &&track.artist.avatar_image) {\n avatarImage = getImgixUrl(track.artist.avatar_image.image_aws_url, 100);\n }\n return avatarImage;\n }\n\n render() {\n const {\n isAudioReady,\n player,\n onResultClick,\n track,\n versions,\n onAddLicense,\n index,\n onAddTrackPlaylist,\n isEditing,\n onRemoveTrack,\n mainVersionId,\n isFavourite,\n isActiveTrack,\n userHasAdminAccount,\n onToggleFavouriteTrackVerion,\n onRemoveTrackStyle,\n } = this.props;\n const { showVersions } = this.state;\n const isCurrentTrack = (isActiveTrack.trackID === track.id && isActiveTrack.versionID === mainVersionId);\n // const isActiveTrack = this.isActiveTrack();\n // Play Button.\n let button = \n \n \n
\n ;\n }\n }\n // button = onResultClick('track', track.id)}>\n
\n );\n }\n}\n\n// Props validation.\nTrack.propTypes = {\n track: PropTypes.object,\n mainVersionId: PropTypes.number,\n onResultClick: PropTypes.func,\n onAddLicense: PropTypes.func,\n onDownloadPreview: PropTypes.func,\n onAddTrackPlaylist: PropTypes.func,\n onToggleFavouriteTrackVerion: PropTypes.func,\n};\n\n// Map redux state to local props.\nconst mapStateToProps = (state) => ({\n player: state.get('player'),\n subscriptionData: state.get('subscriptionData'),\n});\n\nconst mapDispatchToProps = (dispatch) => ({\n // setPlaying: () => dispatch({\n // type: 'PLAYER_SET_PLAYING'\n // }),\n playerActive: () => dispatch(playerActive()),\n addActiveTrack: (track) => dispatch(addActiveTrack(track)),\n addPrimaryTrack: (track) => dispatch(addPrimaryTrack(track)),\n // addTrackWave: (track) => dispatch(addTrackWave(track)),\n setPlaying: (trackId, contextId, versionId, browseType) => {\n dispatch({ type: 'PLAYER_SET_PLAYING', engagementInfo: { trackId, contextId, versionId, browseType } });\n },\n setPause: () => dispatch({\n type: 'PLAYER_SET_PAUSE',\n }),\n setCurrentTrack: (track) => dispatch({\n type: 'PLAYER_CURRENT_TRACK',\n currentTrack: track,\n }),\n playActiveTrack: () => dispatch(playActiveTrack()),\n pausedActiveTrack: () => dispatch(pausedActiveTrack()),\n setPlayerPosition: (pos) => dispatch(setPlayerPosition(pos)),\n setTrackPosition: (track) => dispatch(setTrackPosition(track)),\n toggleVersion: (trackId, isVisible) => dispatch(toggleVersion(trackId, isVisible)),\n});\n\n// Wrap the component to inject dispatch and state into it\nexport default connect(\n mapStateToProps,\n mapDispatchToProps\n)(Track);\n","import _ from \"lodash\";\nimport React from \"react\";\nimport WaveSurfer from \"wavesurfer.js\";\nimport Track from \"./Track\";\nimport Pagination from \"../../components/Pagination\";\n\n// Control whether to show Similar Music section, added for now whilst we have issues - SB\nconst SHOW_SIMILAR = true;\n\nexport default class Tracks extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n isLoading: true,\n primaryTrack: {},\n };\n }\n componentDidMount() {\n // this.props.destroyPreviousPlayer();\n if (!this.props.tracks || !this.props.tracks.page) {\n return;\n }\n\n if (!this.props.tracks.page.isFetching) {\n // Defer waveform generation to ensure DOM is ready\n setTimeout(() => {\n const trackVIds = {};\n const trackWaves = [];\n\n if (!this.props.tracks.page.results) {\n return;\n }\n\n /*\n For each track, create a wavesurfer element for the waveform\n */\n Object.values(this.props.tracks.page.results).forEach(\n (track, index) => {\n if (!track || !track.track_version) {\n return;\n }\n\n let showVersions = false;\n const { id, version_preview_uri, waveform_json } =\n track.track_url || {};\n\n if (!id) {\n return;\n }\n\n trackVIds[track.id] = id;\n const versionId = id;\n const versionIndex = _.findIndex(track.track_version, [\n \"id\",\n versionId,\n ]);\n\n // Skip if we couldn't find a valid version index\n if (versionIndex === -1) {\n return;\n }\n\n // Check if the container exists in the DOM\n const container = document.querySelector(`#waveform-${track.id}`);\n if (!container) {\n return;\n }\n\n const wavesurfer = WaveSurfer.create({\n container: `#waveform-${track.id}`,\n backend: \"MediaElement\",\n mediaType: \"audio\",\n normalize: true,\n waveColor: \"#2c2d2d\",\n // waveColor: '#f00',\n progressColor: \"#01ece3\",\n cursorColor: \"#3a7676\",\n cursorWidth: 0,\n interact: true,\n height: 40,\n hideScrollbar: true,\n });\n wavesurfer.mainTrackUrl = version_preview_uri;\n wavesurfer.mainTrackSet = false;\n\n track.current_engagement_group = 1;\n\n const audioPeaks =\n (waveform_json && JSON.parse(waveform_json)) || [];\n const audioDuration = track.precise_duration\n ? track.precise_duration\n : track.duration;\n\n wavesurfer.backend.setPeaks(audioPeaks || null, audioDuration);\n wavesurfer.drawBuffer();\n\n if (!_.isEmpty(this.props.isActiveTrack)) {\n if (\n this.props.isActiveTrack.trackID === track.id &&\n this.props.isActiveTrack.versionID !== versionId\n ) {\n showVersions = true;\n }\n }\n trackWaves.push({\n ...track,\n trackId: track.id,\n versionId,\n versionIndex,\n trackIndex: index,\n showVersion: showVersions,\n track_version: _.map(track.track_version, (version, key) => {\n if (key === versionIndex) {\n return {\n ...version,\n wavesurfer,\n };\n }\n return {\n ...version,\n };\n }),\n wavesurfer,\n });\n }\n );\n\n // this.props.onFetchVersions(trackVIds);\n\n if (_.has(this.props.tracks.page, \"pagination\")) {\n if (\n parseInt(this.props.previousPage) !==\n this.props.tracks.page.pagination.currentPage &&\n this.props.storePage !==\n this.props.tracks.page.pagination.currentPage\n ) {\n this.props.addPageTrackWave(trackWaves);\n } else {\n this.props.flushNewTrackWave();\n this.props.addTrackWave(\n trackWaves,\n this.props.tracks.page.pagination.currentPage\n );\n }\n } else {\n this.props.flushNewTrackWave();\n this.props.addTrackWave(trackWaves, 1);\n }\n this.setState({ isLoading: false });\n }, 0); // End of setTimeout\n } else {\n }\n }\n componentDidUpdate(prevProps) {\n // Only check if current props are valid - previous props might be empty during state transitions\n if (\n !this.props.tracks ||\n !this.props.tracks.page ||\n !this.props.tracks.page.results\n ) {\n return;\n }\n\n // Count tracks from `results`, NOT `result_ids`. Similar-tracks state has\n // `result_ids` deleted in its action creator (receiveSimilarTracks*)\n const countResults = (props) => {\n const results =\n props && props.tracks && props.tracks.page && props.tracks.page.results;\n if (!results) return 0;\n return Array.isArray(results) ? results.length : Object.keys(results).length;\n };\n\n // Check if we need to regenerate waveforms\n const prevLength = countResults(prevProps);\n const currentLength = countResults(this.props);\n\n if (currentLength !== prevLength) {\n // Check if this is just an expansion of existing tracks (fetchAllTracks after fetchTracks)\n // If we already have waveforms and this is adding more tracks from the same dataset, skip\n const isExpansion =\n prevLength > 0 &&\n currentLength > prevLength &&\n this.props.tracksWaves &&\n this.props.tracksWaves.length > 0;\n\n const trackVIds = {};\n const trackWaves = [];\n\n // For expansions, only process new tracks without waveforms\n // For new loads, clear existing waveforms and regenerate all\n if (!isExpansion) {\n /* Clear previous waveforms */\n $(\"[id^=waveform-]\").not(\"[id^=waveform-version-]\").empty();\n }\n\n Object.values(this.props.tracks.page.results).forEach((track, index) => {\n if (!track || !track.track_version) {\n return;\n }\n\n let showVersions = false;\n const { id, version_preview_uri, waveform_json } =\n track.track_url || {};\n\n if (!id) {\n return;\n }\n\n // During expansion, skip tracks that already have waveforms\n if (isExpansion) {\n const existingWaveform = _.find(this.props.tracksWaves, [\n \"id\",\n track.id,\n ]);\n if (existingWaveform) {\n return;\n }\n }\n\n trackVIds[track.id] = id;\n const versionId = id;\n const versionIndex = _.findIndex(track.track_version, [\n \"id\",\n versionId,\n ]);\n\n // Skip if we couldn't find a valid version index\n if (versionIndex === -1) {\n return;\n }\n\n // Check if the container exists in the DOM\n const container = document.querySelector(`#waveform-${track.id}`);\n if (!container) {\n return;\n }\n\n const wavesurfer = WaveSurfer.create({\n container: `#waveform-${track.id}`,\n backend: \"MediaElement\",\n mediaType: \"audio\",\n normalize: true,\n waveColor: \"#2c2d2d\",\n // waveColor: '#f00',\n progressColor: \"#01ece3\",\n cursorColor: \"#3a7676\",\n cursorWidth: 0,\n interact: true,\n height: 40,\n hideScrollbar: true,\n });\n wavesurfer.mainTrackUrl = version_preview_uri;\n wavesurfer.mainTrackSet = false;\n\n const audioPeaks = (waveform_json && JSON.parse(waveform_json)) || [];\n const audioDuration = track.precise_duration\n ? track.precise_duration\n : track.duration;\n\n wavesurfer.backend.setPeaks(audioPeaks || null, audioDuration);\n wavesurfer.drawBuffer();\n\n if (!_.isEmpty(this.props.isActiveTrack)) {\n if (\n this.props.isActiveTrack.trackID === track.id &&\n this.props.isActiveTrack.versionID !== versionId\n ) {\n showVersions = true;\n }\n }\n trackWaves.push({\n ...track,\n trackId: track.id,\n versionId,\n versionIndex,\n trackIndex: index,\n showVersion: showVersions,\n track_version: _.map(track.track_version, (version, key) => {\n if (key === versionIndex) {\n return {\n ...version,\n wavesurfer,\n };\n }\n return {\n ...version,\n };\n }),\n wavesurfer,\n });\n });\n\n // Only add new waveforms if we generated any\n if (trackWaves.length > 0) {\n if (isExpansion) {\n // For expansions, append the new waveforms to existing ones\n const combinedWaves = [...this.props.tracksWaves, ...trackWaves];\n this.props.flushNewTrackWave();\n this.props.addTrackWave(combinedWaves, 1);\n } else if (_.has(this.props.tracks.page, \"pagination\")) {\n if (\n parseInt(this.props.previousPage) !==\n this.props.tracks.page.pagination.currentPage &&\n this.props.storePage !==\n this.props.tracks.page.pagination.currentPage\n ) {\n this.props.addPageTrackWave(trackWaves);\n } else {\n this.props.flushNewTrackWave();\n this.props.addTrackWave(\n trackWaves,\n this.props.tracks.page.pagination.currentPage\n );\n }\n } else {\n this.props.flushNewTrackWave();\n this.props.addTrackWave(trackWaves, 1);\n }\n }\n }\n }\n\n componentWillUnmount() {\n // const { flushTrackWave } = this.props;\n // if (parseInt(this.props.previousPage) === this.props.tracks.page.pagination.currentPage && this.props.storePage === this.props.tracks.page.pagination.currentPage) {\n // flushTrackWave();\n // }\n }\n render() {\n const favouritesData = JSON.parse(\n sessionStorage.getItem(\"favourites_data\")\n );\n let noTrackError = \"Sorry, no tracks were found matching those filters.\";\n let defaultSort = \"Relevance\";\n\n // Add early validation to ensure we have valid data before rendering\n if (\n !this.props.tracks ||\n !this.props.tracks.page ||\n !this.props.tracks.page.results\n ) {\n return (\n \n
\n \n \n \n \n \n \n \n }\n
\n {(!isEditing && !this.props.isLoading) && this.checkVersions(versions, track.id) &&\n \n
\n \n this.handleTrackPlayPause(track, index)}>\n })
\n \n
\n \n
\n \n {button}\n
\n \n this.handleTrackPlayPause(track, index)}>\n \n
\n \n {buttonSm}\n
\n \n \n
\n \n
\n \n
\n \n
\n \n {track.autoclear &&\n \n \n ![{\"\"}]({\"https://cdn.musicvine.com/images/ic_autoclear_V3.svg\"})
\n \n\n {/* tooltip */}\n
\n \n \n\n {/* tooltip */}\n \n {'AutoClear available'}\n ?\n
\n \n }\n {track.is_explicit_lyrics &&\n \n E\n Explicit Lyrics\n \n }\n\n \n \n \n \n {track.artist.name}\n \n \n
\n \n {track.autoclear &&\n \n \n \n \n \n }\n {track.is_explicit_lyrics &&\n \n E\n Explicit Lyrics\n \n }\n {track.name}\n
\n \n \n \n }\n {track.is_explicit_lyrics &&\n \n E\n Explicit Lyrics\n \n }\n {track.name}\n \n \n {/* (!isAudioReady && player.isPlaying && !isActiveTrack) && */}\n
\n \n {track.track_url &&\n {convertToMinutesAndSeconds(track.track_url.version_length)}\n }\n
\n \n {!isEditing &&
\n \n {!isEditing &&
\n \n {!isEditing && this.props.onDownloadPreview(track)}\n />}\n
\n { !this.userHasSubscription() &&\n \n {! isEditing && this.props.subscriptionData.hasLoaded && this.props.onAddLicense(track)} />}\n
\n }\n { this.userHasSubscription() &&\n \n {! isEditing && this.props.subscriptionData.hasLoaded && this.props.onAddLicense(track)} />}\n
\n }\n {isEditing && \n
\n \n
\n \n Remove From Style\n
\n \n
\n );\n }\n\n if (this.props.defaultSort) {\n defaultSort = this.props.defaultSort;\n }\n\n if (this.props.url === \"/favorites\") {\n noTrackError =\n \"You haven't added any favourite tracks yet. Start exploring!\";\n } else if (this.props.url.indexOf(\"/track/\") !== -1) {\n noTrackError =\n \"Sorry, there was an issue retrieving similar music for this track.\";\n } else if (this.props.url.indexOf(\"/playlist/\") !== -1) {\n noTrackError = \"There are no tracks in this playlist.\";\n }\n\n const tracks =\n !this.props.tracks.page.isFetching &&\n _.map(this.props.tracks.page.results, (track, index) => {\n // Skip processing if the track data is invalid\n if (!track) {\n return null;\n }\n\n let mainVersionId = null;\n let wavesurfer = null;\n const versions = [];\n\n if (track && track.track_version && track.track_url) {\n track.track_version.forEach((trackVersion, versionKey) => {\n if (\n trackVersion.version_type &&\n track.track_url.id === trackVersion.id\n ) {\n mainVersionId = trackVersion.id;\n if (_.has(this.props.tracks.page, \"pagination\")) {\n if (\n parseInt(this.props.previousPage) !==\n this.props.tracks.page.pagination.currentPage &&\n this.props.storePage !==\n this.props.tracks.page.pagination.currentPage\n ) {\n const currentTrackWave = _.find(this.props.newTrackWaves, [\n \"id\",\n track.id,\n ]);\n if (!_.isEmpty(currentTrackWave)) {\n const versionIndex = _.findIndex(\n currentTrackWave.track_version,\n [\"id\", track.track_url.id]\n );\n if (versionIndex !== -1) {\n wavesurfer =\n currentTrackWave.track_version[versionIndex].wavesurfer;\n }\n }\n } else {\n const currentTrackWave = _.find(this.props.tracksWaves, [\n \"id\",\n track.id,\n ]);\n\n if (!_.isEmpty(currentTrackWave)) {\n const versionIndex = _.findIndex(\n currentTrackWave.track_version,\n [\"id\", track.track_url.id]\n );\n if (versionIndex !== -1) {\n wavesurfer =\n currentTrackWave.track_version[versionIndex].wavesurfer;\n }\n }\n }\n } else {\n const currentTrackWave = _.find(this.props.tracksWaves, [\n \"id\",\n track.id,\n ]);\n if (!_.isEmpty(currentTrackWave)) {\n const versionIndex = _.findIndex(\n currentTrackWave.track_version,\n [\"id\", track.track_url.id]\n );\n if (versionIndex !== -1) {\n wavesurfer =\n currentTrackWave.track_version[versionIndex].wavesurfer;\n }\n }\n }\n } else {\n versions.push(trackVersion);\n }\n });\n }\n\n // if current track is favorite.\n const favourite =\n mainVersionId &&\n favouritesData &&\n favouritesData.includes(mainVersionId)\n ? \"js-is-favourite-version\"\n : \"\";\n\n return (\n \n
\n \n
\n Loading tracks...
\n\n
\n \n );\n }\n}\n","import React from 'react';\nimport { connect } from 'react-redux';\n\n// Actions.\nimport {\n addTracksWave,\n addActiveTrack,\n addVersionsWave,\n addPlaylist,\n downloadPreview,\n newTracks,\n addPrimaryTrack,\n} from '../../actions/playerAction';\nimport { addLicense } from '../../actions/licenseAction';\nimport {\n addTrackWave,\n addPageTrackWave,\n flushCurrentTrackWave,\n flushNewTrackWave,\n addVersionTrackWave,\n addVersionNewTrackWave,\n} from '../../actions/footerPlayerAction';\nimport {\n removeModal,\n addModal,\n} from '../../actions/authenticationAction';\nimport {\n addNewEngagement,\n removeTrack,\n removeTrackStyle,\n toggleFavouriteTrackVerion,\n addToFavorites,\n removeFromFavorites,\n} from '../../actions/favouriteAction';\n\nimport { drip } from 'utils/drip';\nimport Tracks from './Tracks';\nimport Spinner from '../../styles/svg-components/Spinner';\n\nclass TrackPlayer extends React.Component {\n constructor(props) {\n super(props);\n this.state = {};\n this.handleAddModal = this.handleAddModal.bind(this);\n }\n handleAddModal(track) {\n const { onAddModal, reloaded } = this.props;\n onAddModal('removeStyle', { ...track, reloaded });\n $('body').addClass('modal-overlay-active');\n }\n render() {\n let tracks = null;\n const userHasAdminAccount = String(sessionStorage.getItem('admin_account') || false) === 'true';\n let onResultClick = () => (undefined);\n if (this.props.onResultClick) {\n onResultClick = this.props.onResultClick;\n }\n if (this.props.tracks.isFetching) {\n tracks = (\n \n {isSimilarTracks && (\n \n
\n )}\n {this.props.tracks.page.pagination &&\n this.props.tracks.page.pagination.pageCount > 1 && (\n Similar Music
\n )}\n\n
\n \n
\n \n
\n \n
\n {this.props.sort &&\n this.props.onSortToggle &&\n !this.props.hideSort && (\n Tracks
\n\n
\n )}\n \n
\n {!tracks || tracks.length <= 0 ? (\n
\n {this.props.tracks.isFetchingMore && (\n {noTrackError}
\n ) : (\n tracks\n )}\n\n {/*
\n Loading More
*/}\n\n \n \n \n
\n \n
\n );\n } else {\n tracks = (\n
\n Loading Music
\n\n \n \n \n
\n \n
\n }\n \n §\n
\n \n {`Context ID: ${currentContextId}`}
{`Track ID: ${this.props.track.id}`}\n
\n {`Track ID: ${this.props.track.id}`}\n
\n S{ this.props.engagementGroup }\n
\n \n Set { this.props.engagementGroup }
{groupText}\n
\n {groupText}\n
\n P: { trackeEngagementP }\n E: { trackeEngagementE }\n R: { Math.round(trackeEngagementR * 100) / 100}\n N: { Math.round(trackeEngagementN * 100) / 100}\n
\n