99 lines
3.0 KiB
JavaScript
99 lines
3.0 KiB
JavaScript
import React, { useState, useEffect, useRef } from 'react';
|
|
import Select from 'react-select';
|
|
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
|
import { Row, Col } from 'reactstrap';
|
|
import PropTypes from 'prop-types';
|
|
import { markMixdownActive } from '../../helpers/rest';
|
|
import FingerprintJS from '@fingerprintjs/fingerprintjs';
|
|
|
|
const JKJamTrackPlayer = ({ jamTrack }) => {
|
|
const [options, setOptions] = useState([]);
|
|
const [selectedOption, setSelectedOption] = useState(null);
|
|
const fpPromise = FingerprintJS.load();
|
|
const [audioUrl, setAudioUrl] = useState(null);
|
|
const audioRef = useRef(null);
|
|
|
|
useEffect(() => {
|
|
if (jamTrack) {
|
|
console.log('_JamTrackPlayer_ jamTrack', jamTrack);
|
|
const opts = jamTrack.mixdowns.map(mix => ({ value: mix.id, label: mix.name }));
|
|
opts.unshift({ value: 'original', label: 'Original' });
|
|
setOptions(opts);
|
|
if (jamTrack.last_mixdown_id) {
|
|
setSelectedOption(opts.find(opt => opt.value === jamTrack.last_mixdown_id));
|
|
} else {
|
|
setSelectedOption(opts[0]);
|
|
}
|
|
}
|
|
}, [jamTrack]);
|
|
|
|
const handleOnChange = selectedOption => {
|
|
const option = options.find(opt => opt.value === selectedOption.value);
|
|
setSelectedOption(option);
|
|
};
|
|
|
|
useEffect(() => {
|
|
if (!selectedOption) {
|
|
return;
|
|
}
|
|
|
|
console.log('_JamTrackPlayer_ selectedOption', selectedOption);
|
|
|
|
if (selectedOption.value === 'original') {
|
|
const audioUrl = getMasterTrack();
|
|
setAudioUrl(audioUrl);
|
|
if(audioRef.current)
|
|
audioRef.current.load();
|
|
} else {
|
|
//it's a mixdown
|
|
getMixdown().then(audioUrl => {
|
|
setAudioUrl(audioUrl);
|
|
if(audioRef.current)
|
|
audioRef.current.load();
|
|
});
|
|
}
|
|
}, [selectedOption]);
|
|
|
|
const getMasterTrack = () => {
|
|
const masterTrack = jamTrack.tracks.find(track => track.track_type === 'Master');
|
|
console.log('_JamTrackPlayer_ master', masterTrack);
|
|
if (masterTrack) {
|
|
const audioUrl = masterTrack.preview_mp3_url;
|
|
return audioUrl;
|
|
}
|
|
};
|
|
|
|
const getMixdown = async () => {
|
|
const activeMix = jamTrack.mixdowns.find(mix => mix.id === selectedOption.value);
|
|
const fp = await fpPromise;
|
|
const result = await fp.get();
|
|
const audioUrl =
|
|
process.env.REACT_APP_API_BASE_URL +
|
|
`/mixdowns/${activeMix.id}/download.mp3?file_type=mp3&sample_rate=48&mark=${result.visitorId}`;
|
|
return audioUrl;
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<Select options={options} placeholder="Select Mix" onChange={handleOnChange} value={selectedOption} />
|
|
<Row className="mt-2">
|
|
<Col>
|
|
{audioUrl && (
|
|
<figure>
|
|
<audio controls style={{ width: '100%' }} ref={audioRef}>
|
|
<source src={audioUrl} type={`audio/${audioUrl.split('.').pop()}`} />
|
|
</audio>
|
|
</figure>
|
|
)}
|
|
</Col>
|
|
</Row>
|
|
</>
|
|
);
|
|
};
|
|
|
|
JKJamTrackPlayer.propTypes = {
|
|
jamTrack: PropTypes.object.isRequired
|
|
};
|
|
|
|
export default JKJamTrackPlayer;
|