seth
/
jam-cloud
mirror of https://bitbucket.org/jamkazam/jam-cloud.git
1
0
Fork 0
Code Issues Actions Packages Projects Releases Wiki Activity

improvements to JamTracks pages

This commit is contained in:
Nuwan 2024-12-25 18:56:16 +05:30
parent 5673d9b21e
commit 6b66764082
5 changed files with 23 additions and 222 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

101
jam-ui/src/components/jamtracks/JKJamTrackPlayer copy 2.js
View File

@ -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;

117
jam-ui/src/components/jamtracks/JKJamTrackPlayer copy.js
View File

@ -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;

2
jam-ui/src/components/jamtracks/JKJamTrackPreview.js
View File

@ -1,5 +1,5 @@
import React, { Fragment, useState } from 'react'; import React, { Fragment, useState } from 'react';
import { Row, Col, Container } from 'reactstrap'; import { Row, Col } from 'reactstrap';
import JKJamTrackTrack from './JKJamTrackTrack'; import JKJamTrackTrack from './JKJamTrackTrack';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { useResponsive } from '@farfetch/react-context-responsive'; import { useResponsive } from '@farfetch/react-context-responsive';

10
jam-ui/src/components/jamtracks/JKJamTrackResourceLinks.js
View File

@ -1,5 +1,6 @@
import React from 'react'; import React from 'react';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import { Link } from 'react-router-dom';
const JKJamTrackResourceLinks = ({jamTrack}) => { const JKJamTrackResourceLinks = ({jamTrack}) => {
const { t } = useTranslation('jamtracks'); const { t } = useTranslation('jamtracks');
@ -23,7 +24,7 @@ const JKJamTrackResourceLinks = ({jamTrack}) => {
</div> </div>
<div className="mb-3"> <div className="mb-3">
<div> <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')} {t('jamtrack.help_resources.jamtracks_home.title')}
</a> </a>
</div> </div>
@ -31,14 +32,17 @@ const JKJamTrackResourceLinks = ({jamTrack}) => {
</div> </div>
<div className="mb-3"> <div className="mb-3">
<div> <div>
<a {/* <a
target="_blank" target="_blank"
href={`https://www.jamkazam.com/client?artist=${encodeURIComponent( href={`https://www.jamkazam.com/client?artist=${encodeURIComponent(
jamTrack.original_artist jamTrack.original_artist
)}#/jamtrack/search`} )}#/jamtrack/search`}
> >
{t('jamtrack.help_resources.see_more.title')} {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> </div>
{t('jamtrack.help_resources.see_more.description')} {t('jamtrack.help_resources.see_more.description')}
</div> </div>

15
jam-ui/src/components/jamtracks/JKJamTracksFilter.js
View File

@ -1,5 +1,6 @@
import React, { useState, useEffect } from 'react'; import React, { useState, useEffect } from 'react';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
import { useBrowserQuery } from '../../context/BrowserQuery';
import { Card, CardBody, Row, Col } from 'reactstrap'; import { Card, CardBody, Row, Col } from 'reactstrap';
import FalconCardHeader from '../common/FalconCardHeader'; import FalconCardHeader from '../common/FalconCardHeader';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
@ -24,6 +25,9 @@ const JKJamTracksFilter = () => {
const PER_PAGE = 10; const PER_PAGE = 10;
const { shoppingCart } = useShoppingCart(); const { shoppingCart } = useShoppingCart();
const { greaterThan } = useResponsive(); const { greaterThan } = useResponsive();
const queryString = useBrowserQuery();
const query = queryString.get('query');
const artist = queryString.get('artist');
useEffect(() => { useEffect(() => {
if (selected) { if (selected) {
@ -31,6 +35,17 @@ const JKJamTracksFilter = () => {
} }
}, [selected]); }, [selected]);
useEffect(() => {
if(query && !artist) {
//setAutoCompleteInputValue(query);
handleOnEnter(query);
}
if(artist && !query) {
//setAutoCompleteInputValue(artist);
handleOnEnter(artist);
}
}, [query]);
const queryOptions = selected => { const queryOptions = selected => {
const options = { const options = {
per_page: PER_PAGE, per_page: PER_PAGE,