@@ -240,8 +260,10 @@ const JKCreateCustomMix = ({ jamTrack }) => {
- Create Mix
+
+ {newMixdownLoadingStatus === 'loading' ? 'Creating Mix...' : 'Create Mix'}
+
diff --git a/jam-ui/src/components/jamtracks/JKJamTrack.js b/jam-ui/src/components/jamtracks/JKJamTrack.js
index 6acd83bdb..900e58d3a 100644
--- a/jam-ui/src/components/jamtracks/JKJamTrack.js
+++ b/jam-ui/src/components/jamtracks/JKJamTrack.js
@@ -1,37 +1,34 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect } from 'react';
import { useTranslation } from 'react-i18next';
import { useResponsive } from '@farfetch/react-context-responsive';
import { useParams } from 'react-router-dom';
-import { Card, CardBody, Row, Col, Progress } from 'reactstrap';
+import { Card, CardBody, Row, Col } from 'reactstrap';
import FalconCardHeader from '../common/FalconCardHeader';
-import { getJamTrack, getUserDetail, postUserEvent, userOpenedJamTrackWebPlayer } from '../../helpers/rest';
+import { getUserDetail, postUserEvent, userOpenedJamTrackWebPlayer } from '../../helpers/rest';
import JKJamTrackPlayer from './JKJamTrackPlayer';
import JKMyJamTrackMixes from './JKMyJamTrackMixes';
import JKCreateCustomMix from './JKCreateCustomMix';
import { useAuth } from '../../context/UserAuth';
+import { fetchJamTrack } from '../../store/features/jamTrackSlice';
+import { useDispatch, useSelector } from 'react-redux';
+
const JKJamTrack = () => {
+ console.log('JKJamTrack rendering');
+
const { t } = useTranslation('jamtracks');
const { greaterThan } = useResponsive();
const { id } = useParams();
- const [jamTrack, setJamTrack] = useState(null);
- const [loading, setLoading] = useState(false);
const { currentUser } = useAuth();
- const fetchJamTrack = async () => {
- console.log('fetching jam track', id);
- try {
- setLoading(true);
- const resp = await getJamTrack({ id });
- const data = await resp.json();
- console.log('jam track 123', data);
- setJamTrack(data);
- } catch (error) {
- console.log('Error when fetching jam track', error);
- } finally {
- setLoading(false);
- }
+ const dispatch = useDispatch();
+
+ const jamTrack = useSelector(state => state.jamTrack.jamTrack);
+ const jamTrackLoadingStatus = useSelector(state => state.jamTrack.status);
+
+ const fetchJamTrackRecord = () => {
+ dispatch(fetchJamTrack({ id }));
};
const fetchUserDetail = async () => {
@@ -58,31 +55,36 @@ const JKJamTrack = () => {
}, [currentUser, jamTrack]);
useEffect(() => {
- fetchJamTrack();
+ fetchJamTrackRecord();
}, [id]);
return (
-
-
- {jamTrack &&
-
-
- {jamTrack &&
-
-
-
-
- { jamTrack &&
-
-
-
+ <>
+ {jamTrackLoadingStatus === 'loading' || jamTrackLoadingStatus == 'idel' ? (
+
Loading...
+ ) : Object.keys(jamTrack).length ? (
+
+
+ {jamTrack &&
+
+
+ {jamTrack &&
+
+
+
+ {jamTrack &&
+
+
+
+
+ ) : null}
+
);
};
diff --git a/jam-ui/src/components/jamtracks/JKJamTrackPlayer.js b/jam-ui/src/components/jamtracks/JKJamTrackPlayer.js
index aeef561bb..7963e39f5 100644
--- a/jam-ui/src/components/jamtracks/JKJamTrackPlayer.js
+++ b/jam-ui/src/components/jamtracks/JKJamTrackPlayer.js
@@ -1,22 +1,20 @@
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';
+import { useSelector } from 'react-redux';
-const JKJamTrackPlayer = ({ jamTrack }) => {
+const JKJamTrackPlayer = () => {
const [options, setOptions] = useState([]);
const [selectedOption, setSelectedOption] = useState(null);
const fpPromise = FingerprintJS.load();
const [audioUrl, setAudioUrl] = useState(null);
const audioRef = useRef(null);
+ const jamTrack = useSelector(state => state.jamTrack.jamTrack);
useEffect(() => {
if (jamTrack) {
- console.log('_JamTrackPlayer_ jamTrack', jamTrack);
- const opts = jamTrack.mixdowns.map(mix => ({ value: mix.id, label: mix.name }));
+ const opts = jamTrack.mixdowns.map(mix => ({ value: mix.id, label: mix.name })).filter(mix => mix.value !== 'temp');
opts.unshift({ value: 'original', label: 'Original' });
setOptions(opts);
if (jamTrack.last_mixdown_id) {
@@ -37,8 +35,6 @@ const JKJamTrackPlayer = ({ jamTrack }) => {
return;
}
- console.log('_JamTrackPlayer_ selectedOption', selectedOption);
-
if (selectedOption.value === 'original') {
const audioUrl = getMasterTrack();
setAudioUrl(audioUrl);
@@ -56,7 +52,6 @@ const JKJamTrackPlayer = ({ jamTrack }) => {
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;
@@ -91,8 +86,4 @@ const JKJamTrackPlayer = ({ jamTrack }) => {
);
};
-JKJamTrackPlayer.propTypes = {
- jamTrack: PropTypes.object.isRequired
-};
-
-export default JKJamTrackPlayer;
+export default JKJamTrackPlayer;
\ No newline at end of file
diff --git a/jam-ui/src/components/jamtracks/JKMyJamTrackMixes.js b/jam-ui/src/components/jamtracks/JKMyJamTrackMixes.js
index f4387f12d..5d170f93f 100644
--- a/jam-ui/src/components/jamtracks/JKMyJamTrackMixes.js
+++ b/jam-ui/src/components/jamtracks/JKMyJamTrackMixes.js
@@ -1,71 +1,121 @@
import React, { useState, useEffect } from 'react';
import { Table } from 'reactstrap';
import FingerprintJS from '@fingerprintjs/fingerprintjs';
+import { removeMixdown } from '../../store/features/jamTrackSlice';
+import { useDispatch, useSelector } from 'react-redux';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-const JKMyJamTrackMixes = ({ jamTrack }) => {
+const JKMyJamTrackMixes = () => {
const [mixes, setMixes] = useState([]);
const fpPromise = FingerprintJS.load();
+ const dispatch = useDispatch();
+
+ const jamTrack = useSelector(state => state.jamTrack.jamTrack);
+ const mixdownsLoadingStatus = useSelector(state => state.jamTrack.mixdownsLoadingStatus);
+ const deleteMixdownStatus = useSelector(state => state.jamTrack.deleteMixdownStatus);
+ const tempMixdownLoadingStatus = useSelector(state => state.jamTrack.tempMixdownLoadingStatus);
useEffect(() => {
- if(!jamTrack) {
+ if (!jamTrack) {
return;
}
- setMixes(jamTrack.mixdowns)
- }, []);
+ if (mixdownsLoadingStatus === 'succeeded') {
+ setMixes(jamTrack.mixdowns.filter(m => m.id !== 'temp'));
+ }
+ }, [mixdownsLoadingStatus]);
+
+ useEffect(() => {
+ if (tempMixdownLoadingStatus === 'succeeded') {
+ setMixes(jamTrack.mixdowns);
+ }
+ }, [tempMixdownLoadingStatus]);
const downloadJamTrack = async () => {
console.log('Downloading JamTrack');
- if(!jamTrack.can_download) {
+ if (!jamTrack.can_download) {
console.log('Cannot download JamTrack');
- return
+ return;
}
const fp = await fpPromise;
const result = await fp.get();
- const redirectTo = `${process.env.REACT_APP_API_BASE_URL}/jamtracks/${jamTrack.id}/stems/master/download.mp3?file_type=mp3&download=1&mark=${result.visitorId}`;
- window.open(redirectTo, '_blank');
- }
+ const src = `${process.env.REACT_APP_API_BASE_URL}/jamtracks/${
+ jamTrack.id
+ }/stems/master/download.mp3?file_type=mp3&download=1&mark=${result.visitorId}`;
+ openDownload(src);
+ };
- const downloadMix = async (mixId) => {
- console.log('Download mixdown')
+ const downloadMix = async mixId => {
+ console.log('Download mixdown');
const mixdown = mixes.find(m => m.id === mixId);
const mixdownPackage = mixdown.packages.find(p => p.file_type === 'mp3');
- if(mixdownPackage?.signing_state == 'SIGNED'){
+ if (mixdownPackage?.signing_state == 'SIGNED') {
const fp = await fpPromise;
const result = await fp.get();
- const redirectTo = `${process.env.REACT_APP_API_BASE_URL}/mixdowns/${mixdown.id}/download.mp3?file_type=mp3&sample_rate=48&download=1&mark=${result.visitorId}`
- window.open(redirectTo, '_blank');
+ const src = `${process.env.REACT_APP_API_BASE_URL}/mixdowns/${
+ mixdown.id
+ }/download.mp3?file_type=mp3&sample_rate=48&download=1&mark=${result.visitorId}`;
+ openDownload(src);
+ }else{
+ console.log('Mixdown not signed');
}
- }
+ };
- const deleteMix = (mixId) => {
- if(window.confirm("Delete this custom mix?")){
- console.log("Deleting mixdown", mixId)
+ const openDownload = async src => {
+ const iframe = document.createElement('iframe');
+ iframe.src = src;
+ iframe.style.display = 'none';
+ document.body.appendChild(iframe);
+ };
+
+ const deleteMix = mixId => {
+ if (window.confirm('Delete this custom mix?')) {
+ console.log('Deleting mixdown', mixId);
+ dispatch(removeMixdown({ id: mixId }));
}
- }
+ };
return (
<>
-
You can save a maximum of 5 mixes on JamKazam. If you need to make more mixes, download a mix to save it, then delete it to make more room
-
+
+ You can save a maximum of 5 mixes on JamKazam. If you need to make more mixes, download a mix
+ to save it, then delete it to make more room
+
+
Mix
- Actions
+ Actions
Full JamTrack
-
- Download
+
+
+
{mixes.map(mix => (
{mix.name}
-
- downloadMix(mix.id)}>Download
- deleteMix(mix.id)}>Delete
+
+ {mix.id === 'temp' ? (
+ downloadMix(mix.id)} style={{ cursor: 'pointer' }}>
+
+ deleteMix(mix.id)}
+ disabled={deleteMixdownStatus === 'loading'}
+ style={{ cursor: 'pointer' }}
+ >
+
+
+ )}
))}
diff --git a/jam-ui/src/components/jamtracks/JKMyJamTracks.js b/jam-ui/src/components/jamtracks/JKMyJamTracks.js
index e4c5498c1..e6f484ed0 100644
--- a/jam-ui/src/components/jamtracks/JKMyJamTracks.js
+++ b/jam-ui/src/components/jamtracks/JKMyJamTracks.js
@@ -3,33 +3,35 @@ import { Card, CardBody, ListGroup, ListGroupItem, FormGroup, Input, InputGroup,
import FalconCardHeader from '../common/FalconCardHeader';
import { useTranslation } from 'react-i18next';
import { useResponsive } from '@farfetch/react-context-responsive';
-import { getPurchasedJamTracks } from '../../helpers/rest';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import useOnScreen from '../../hooks/useOnScreen';
import { Link } from 'react-router-dom';
+import { fetchMyJamTracks } from '../../store/features/myJamTracksSlice';
+import { useDispatch, useSelector } from 'react-redux';
const JKMyJamTracks = () => {
const { t } = useTranslation('jamtracks');
const { greaterThan } = useResponsive();
- const [jamTracks, setJamTracks] = useState([]);
- const [loading, setLoading] = useState(false);
const [inputValue, setInputValue] = useState('');
const inputRef = React.createRef();
const containerRef = useRef(null);
const [lastJamTrackRef, setLastJamTrackRef] = useState(null);
const isIntersecting = useOnScreen({ current: lastJamTrackRef });
- const [nextPage, setNextPage] = useState(1);
+
+ const dispatch = useDispatch();
+
+ const jamTracks = useSelector(state => state.myJamTrack.jamTracks);
+ const loadingStatus = useSelector(state => state.myJamTrack.status);
+ const nextPage = useSelector(state => state.myJamTrack.next);
const handleInputChange = e => {
const val = e.target.value;
setInputValue(val);
- // const params = { page: 1, search: val };
- // fetchJamTracks(params);
};
useEffect(() => {
- const getMyJamTracks = setTimeout(() => {
- fetchJamTracks({ page: 1, search: inputValue});
+ const getMyJamTracks = setTimeout(async () => {
+ await fetchJamTracks({ page: 1, search: inputValue});
}, 1000);
return () => clearTimeout(getMyJamTracks);
}, [inputValue]);
@@ -37,37 +39,23 @@ const JKMyJamTracks = () => {
const fetchJamTracks = async (params) => {
const { page } = params;
try {
- setLoading(true);
- const resp = await getPurchasedJamTracks(params);
- const data = await resp.json();
- if (page === 1) {
- setJamTracks(data.jamtracks);
- }else{
- setJamTracks(prev => [...prev, ...data.jamtracks]);
- }
- setNextPage(data.next);
-
+ dispatch(fetchMyJamTracks(params));
} catch (error) {
console.log('Error when fetching jam tracks', error);
} finally {
- setLoading(false);
+ //setLoading(false);
}
};
useEffect(() => {
if (isIntersecting) {
- if (nextPage && !loading && nextPage !== 1) {
+ if (nextPage && loadingStatus !== 'loading' && nextPage !== 1) {
const params = { page: nextPage };
fetchJamTracks(params);
}
}
}, [isIntersecting]);
- useEffect(() => {
- const params = { page: nextPage };
- fetchJamTracks(params);
- }, []);
-
const containerStyle = {
display: 'flex',
flexDirection: 'column',
@@ -83,7 +71,7 @@ const JKMyJamTracks = () => {
- {loading ? (
+ {loadingStatus === 'loading' ? (
-
- {jamTracks.map((jamTrack, index) => (
- (jamTracks.length - 1 === index ? setLastJamTrackRef(ref) : null)}>
-
-
-
-
- ))}
-
- { loading &&
Loading...
}
+ { loadingStatus === 'loading' ? (
+
Loading...
+ ) : loadingStatus === 'failed' ? (
+
Error loading jam tracks
+ ) : loadingStatus === 'succeeded' ? (
+
+ {jamTracks && jamTracks.map((jamTrack, index) => (
+ (jamTracks.length - 1 === index ? setLastJamTrackRef(ref) : null)}>
+
+
+
+
+ ))}
+
+ ) : null }
+
+