improvements to JamTracks pages
This commit is contained in:
Nuwan
parent
5673d9b21e
commit
6b66764082
|
|
@ -1,101 +0,0 @@
|
|||
import React, { useState, useEffect, useMemo } 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 useJamTrackAudio from '../../hooks/useJamTrackAudio';
|
||||
|
||||
const JKJamTrackPlayer = ({ jamTrack }) => {
|
||||
const [mixes, setMixes] = useState([]);
|
||||
const [options, setOptions] = useState([]);
|
||||
const [selectedMix, setSelectedMix] = useState(null);
|
||||
const { audioUrls, loadJamTrack } = useJamTrackAudio(jamTrack);
|
||||
|
||||
const handleChange = selectedOption => {
|
||||
const mix = mixes.find(mix => mix.value === selectedOption.value);
|
||||
setSelectedMix(mix);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (jamTrack) {
|
||||
console.log('_JamTrack_ jamTrack', jamTrack);
|
||||
const _opts = jamTrack.mixdowns.map(mix => ({ value: mix.id, label: mix.name }));
|
||||
_opts.unshift({ value: 'original', label: 'Original' });
|
||||
setOptions(_opts);
|
||||
|
||||
//set the default mix to the original
|
||||
const activeMix = jamTrack.mixdowns.find(mix => mix.id === jamTrack.last_mixdown_id)
|
||||
|
||||
console.log('_JamTrack_ activeMix', activeMix);
|
||||
|
||||
setSelectedMix(activeMix);
|
||||
}
|
||||
}, [jamTrack]);
|
||||
|
||||
const activateMasterTrack = async () => {
|
||||
console.log('playing original');
|
||||
await markMixdownActive({ id: jamTrack.id, mixdown_id: null });
|
||||
await loadJamTrack();
|
||||
};
|
||||
|
||||
const activateCustomMix = async () => {
|
||||
console.log('playing mix', selectedMix.value);
|
||||
try {
|
||||
await markMixdownActive({ id: jamTrack.id, mixdown_id: selectedMix.value });
|
||||
await loadJamTrack();
|
||||
}catch(error){
|
||||
console.log('Error when activating custom mix', error);
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (!selectedMix) {
|
||||
return;
|
||||
}
|
||||
|
||||
console.log('_JamTrack_ selectedMix', selectedMix);
|
||||
|
||||
if (selectedMix.value === 'original') {
|
||||
//console.log('_JAMTRACK_ activating master track');
|
||||
activateMasterTrack().then(() => {
|
||||
//TODO: commiunicate with the client back end. Following is copied from the Rails front end
|
||||
//SessionActions.mixdownActive({id:null})
|
||||
});
|
||||
} else {
|
||||
//console.log('_JAMTRACK_ activating custom mix:', selectedMix);
|
||||
activateCustomMix().then(() => {
|
||||
//TODO: commiunicate with the client back end. Following is copied from the Rails front end
|
||||
//context.jamClient.JamTrackStopPlay();
|
||||
//SessionActions.mixdownActive(mixdown)
|
||||
});
|
||||
}
|
||||
}, [selectedMix]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Select options={mixes} placeholder="Select Mix" onChange={handleChange} value={selectedMix} />
|
||||
{ JSON.stringify(audioUrls)}
|
||||
<Row className='mt-2'>
|
||||
<Col>
|
||||
{audioUrls.length > 0 && (
|
||||
<figure>
|
||||
<audio controls style={{ width: '100%'}}>
|
||||
{audioUrls.map((url, index) => (
|
||||
<source key={index} src={url} type={`audio/${url.split('.').pop()}`} />
|
||||
))}
|
||||
</audio>
|
||||
</figure>
|
||||
)}
|
||||
</Col>
|
||||
</Row>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
JKJamTrackPlayer.propTypes = {
|
||||
jamTrack: PropTypes.object.isRequired
|
||||
};
|
||||
|
||||
export default JKJamTrackPlayer;
|
||||
|
|
@ -1,117 +0,0 @@
|
|||
import React, { useState, useEffect, useMemo } from 'react';
|
||||
import Select from 'react-select';
|
||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
||||
import { Row, Col, Progress } from 'reactstrap';
|
||||
import PropTypes from 'prop-types';
|
||||
import { markMixdownActive } from '../../helpers/rest';
|
||||
import useBrowserMedia from '../../hooks/useBrowserMedia';
|
||||
import JKProgressSlider from './JKProgressSlider';
|
||||
|
||||
const JKJamTrackPlayer = ({ jamTrack }) => {
|
||||
const [mixes, setMixes] = useState([]);
|
||||
const [selectedMix, setSelectedMix] = useState(null);
|
||||
const { play, stop, pause, loading, loaded, playing, paused, loadError, playPosition } = useBrowserMedia(jamTrack);
|
||||
|
||||
const handleChange = selectedOption => {
|
||||
//console.log('selectedOption', selectedOption);
|
||||
setSelectedMix(selectedOption);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (jamTrack) {
|
||||
const mixes = jamTrack.mixdowns.map(mix => ({ value: mix.id, label: mix.name, mix }));
|
||||
mixes.unshift({ value: 'original', label: 'Original', jamTrack });
|
||||
setMixes(mixes);
|
||||
}
|
||||
}, [jamTrack]);
|
||||
|
||||
const trackDuration = useMemo(() => {
|
||||
if (jamTrack && jamTrack.duration) {
|
||||
return (jamTrack.duration/60).toFixed(2);
|
||||
}
|
||||
}, [jamTrack]);
|
||||
|
||||
const trackCurrentTime = useMemo(() => {
|
||||
if (playPosition) {
|
||||
return (playPosition/60).toFixed(2);
|
||||
}else{
|
||||
return '0.00';
|
||||
}
|
||||
}, [playPosition]);
|
||||
|
||||
useEffect(() => {
|
||||
if(!selectedMix) {
|
||||
return;
|
||||
}
|
||||
|
||||
const handlePlayOriginal = async () => {
|
||||
console.log('playing original');
|
||||
await markMixdownActive({id: selectedMix.jamTrack.id, mixdown_id: null});
|
||||
}
|
||||
|
||||
const handlePlayMix = async () => {
|
||||
console.log('playing mix', selectedMix.value);
|
||||
await markMixdownActive({id: selectedMix.jamTrack.id, mixdown_id: selectedMix.value});
|
||||
}
|
||||
|
||||
|
||||
if(selectedMix.value === 'original') {
|
||||
console.log('playing original');
|
||||
handlePlayOriginal();
|
||||
} else {
|
||||
console.log('playing mix', selectedMix.value);
|
||||
handlePlayMix();
|
||||
}
|
||||
}, [selectedMix]);
|
||||
|
||||
const playAudio = () => {
|
||||
console.log('playing');
|
||||
play();
|
||||
}
|
||||
|
||||
const stopAudio = () => {
|
||||
console.log('stopping');
|
||||
stop();
|
||||
}
|
||||
|
||||
const pauseAudio = () => {
|
||||
console.log('pausing');
|
||||
pause();
|
||||
}
|
||||
|
||||
|
||||
return (
|
||||
<>
|
||||
<Select options={mixes} placeholder="Select Mix" onChange={handleChange} />
|
||||
{/* <Row className="mt-2 align-items-center">
|
||||
<Col className="col-md-2">
|
||||
<div className="d-flex">
|
||||
{ playing && <FontAwesomeIcon icon="pause-circle" size="2x" onClick={pauseAudio} /> }
|
||||
{ !playing && <FontAwesomeIcon icon="play-circle" size="2x" onClick={playAudio} /> }
|
||||
<FontAwesomeIcon icon="stop-circle" size="2x" onClick={stopAudio} />
|
||||
</div>
|
||||
</Col>
|
||||
<Col>
|
||||
<div className='d-flex'>
|
||||
<span>{trackCurrentTime}</span>
|
||||
<JKProgressSlider />
|
||||
<span>{trackDuration}</span>
|
||||
</div>
|
||||
|
||||
</Col>
|
||||
</Row> */}
|
||||
<Row>
|
||||
<Col>
|
||||
|
||||
</Col>
|
||||
</Row>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
JKJamTrackPlayer.propTypes = {
|
||||
jamTrack: PropTypes.object.isRequired,
|
||||
|
||||
};
|
||||
|
||||
export default JKJamTrackPlayer;
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
import React, { Fragment, useState } from 'react';
|
||||
import { Row, Col, Container } from 'reactstrap';
|
||||
import { Row, Col } from 'reactstrap';
|
||||
import JKJamTrackTrack from './JKJamTrackTrack';
|
||||
import PropTypes from 'prop-types';
|
||||
import { useResponsive } from '@farfetch/react-context-responsive';
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
import React from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { Link } from 'react-router-dom';
|
||||
|
||||
const JKJamTrackResourceLinks = ({jamTrack}) => {
|
||||
const { t } = useTranslation('jamtracks');
|
||||
|
|
@ -23,7 +24,7 @@ const JKJamTrackResourceLinks = ({jamTrack}) => {
|
|||
</div>
|
||||
<div className="mb-3">
|
||||
<div>
|
||||
<a target="_blank" href="https://www.jamkazam.com/client#/jamtrack">
|
||||
<a target="_blank" href="https://jamkazam.com/jamtracks">
|
||||
{t('jamtrack.help_resources.jamtracks_home.title')}
|
||||
</a>
|
||||
</div>
|
||||
|
|
@ -31,14 +32,17 @@ const JKJamTrackResourceLinks = ({jamTrack}) => {
|
|||
</div>
|
||||
<div className="mb-3">
|
||||
<div>
|
||||
<a
|
||||
{/* <a
|
||||
target="_blank"
|
||||
href={`https://www.jamkazam.com/client?artist=${encodeURIComponent(
|
||||
jamTrack.original_artist
|
||||
)}#/jamtrack/search`}
|
||||
>
|
||||
{t('jamtrack.help_resources.see_more.title')}
|
||||
</a>
|
||||
</a> */}
|
||||
<Link to={`/jamtracks?artist=${encodeURIComponent(jamTrack.original_artist)}`}>
|
||||
{t('jamtrack.help_resources.see_more.title')}
|
||||
</Link>
|
||||
</div>
|
||||
{t('jamtrack.help_resources.see_more.description')}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
import React, { useState, useEffect } from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
import { useBrowserQuery } from '../../context/BrowserQuery';
|
||||
import { Card, CardBody, Row, Col } from 'reactstrap';
|
||||
import FalconCardHeader from '../common/FalconCardHeader';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
|
|
@ -24,6 +25,9 @@ const JKJamTracksFilter = () => {
|
|||
const PER_PAGE = 10;
|
||||
const { shoppingCart } = useShoppingCart();
|
||||
const { greaterThan } = useResponsive();
|
||||
const queryString = useBrowserQuery();
|
||||
const query = queryString.get('query');
|
||||
const artist = queryString.get('artist');
|
||||
|
||||
useEffect(() => {
|
||||
if (selected) {
|
||||
|
|
@ -31,6 +35,17 @@ const JKJamTracksFilter = () => {
|
|||
}
|
||||
}, [selected]);
|
||||
|
||||
useEffect(() => {
|
||||
if(query && !artist) {
|
||||
//setAutoCompleteInputValue(query);
|
||||
handleOnEnter(query);
|
||||
}
|
||||
if(artist && !query) {
|
||||
//setAutoCompleteInputValue(artist);
|
||||
handleOnEnter(artist);
|
||||
}
|
||||
}, [query]);
|
||||
|
||||
const queryOptions = selected => {
|
||||
const options = {
|
||||
per_page: PER_PAGE,
|
||||
|
|
|
|||
Loading…
Reference in New Issue