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

fix fingerprint loading issue in jamtrack page

This commit is contained in:
Nuwan 2025-02-14 17:00:42 +05:30
parent bd2d9410b5
commit 8a8f1d14f9
9 changed files with 311 additions and 819 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1023
jam-ui/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

2
jam-ui/package.json
View File

@ -4,7 +4,7 @@
"private": true,
"dependencies": {
"@farfetch/react-context-responsive": "^1.5.0",
"@fingerprintjs/fingerprintjs": "^4.4.3",
"@fingerprintjs/fingerprintjs": "^4.6.0",
"@fortawesome/fontawesome-free": "^5.15.1",
"@fortawesome/fontawesome-svg-core": "^1.2.30",
"@fortawesome/free-brands-svg-icons": "^5.14.0",

5
jam-ui/src/components/auth/basic/JKRegistration.js
View File

@ -20,8 +20,9 @@ const Registration = () => {
const params = new URLSearchParams(search);
const jamtrackSlug = params.get('JamTrackSlug');
const artistName = params.get('JamTrackArtistName');
const jamtrackSlug = params.get('jamtrack');
const artistName = params.get('artist');
setLoading(true);
if (artistName && artistName !== "") {

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

@ -9,19 +9,22 @@ import JKSigningRetryConfirmModal from './JKSigningRetryConfirmModal';
import JKSigningEstimateTimeModal from './JKSigningEstimateTimeModal';
import { markMixdownActive } from '../../helpers/rest';
import JKAudioPlayer from './JKAudioPlayer';
import FingerprintJS from '@fingerprintjs/fingerprintjs';
import { useAppData } from '../../context/AppDataContext';
const JKJamTrackPlayer = () => {
const [options, setOptions] = useState([]);
const [selectedOption, setSelectedOption] = useState(null);
const [audioUrl, setAudioUrl] = useState(null);
const audioRef = useRef(null);
const fpPromise = FingerprintJS.load();
//const fpPromise = FingerprintJS.load();
const { appData } = useAppData();
const { jamTrack, mixdowns, getMasterAudioUrl, getMixdownAudioUrl, confirmRetryMixdownSigning, showQueueTime, setShowQueueTime, enqueueTimeMessage, retryConfirmMessage, showRetryConfirm, setShowRetryConfirm, enqueueMixdownForSigning, enqueuedMixdown, showEstimatedTime, manageWatchedMixdowns, getStemAudioUrl, trackName } = useJamTrack();
useEffect(() => {
if (jamTrack && mixdowns) {
console.log('__JKJamTrackPlayer__ jamTrack', jamTrack);
console.log('__JKJamTrackPlayer__ mixdowns', mixdowns);
if (jamTrack) {
//mixdowns
const playableMixdowns = mixdowns.filter(mix => mix.packages.find(p => p.file_type === 'mp3' && p.signing_state === 'SIGNED')?.jam_track_mixdown_id === mix.id);
const opts = playableMixdowns.map(mix => ({ value: mix.id, label: `Custom Mix: ${mix.name}`, data: { type: 'custom-mix' } }));
@ -138,20 +141,20 @@ const JKJamTrackPlayer = () => {
}
const downloadMaster = async () => {
const fp = await fpPromise;
const result = await fp.get();
//const fp = await fpPromise;
//const result = await fp.get();
const src = `${process.env.REACT_APP_API_BASE_URL}/jamtracks/${jamTrack.id
}/stems/master/download.mp3?file_type=mp3&download=1&mark=${result.visitorId}`;
}/stems/master/download.mp3?file_type=mp3&download=1&mark=${appData?.visitorId}`;
openDownload(src);
};
const downloadMixdown = async (mixdown) => {
const mixdownPackage = mixdown.packages.find(p => p.file_type === 'mp3');
if (mixdownPackage?.signing_state == 'SIGNED') {
const fp = await fpPromise;
const result = await fp.get();
//const fp = await fpPromise;
//const result = await fp.get();
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}`;
}/download.mp3?file_type=mp3&sample_rate=48&download=1&mark=${appData?.visitorId}`;
openDownload(src);
} else {
console.log('Mixdown not signed');
@ -161,10 +164,10 @@ const JKJamTrackPlayer = () => {
const downloadTrack = async (track) => {
const activeTrack = jamTrack.tracks.find(track => track.id === selectedOption.value);
if (activeTrack) {
const fp = await fpPromise;
const result = await fp.get();
//const fp = await fpPromise;
//const result = await fp.get();
const src = `${process.env.REACT_APP_API_BASE_URL}/jamtracks/${jamTrack.id
}/stems/${activeTrack.id}/download.mp3?file_type=mp3&download=1&mark=${result.visitorId}`;
}/stems/${activeTrack.id}/download.mp3?file_type=mp3&download=1&mark=${appData?.visitorId}`;
openDownload(src);
}
}
@ -178,6 +181,7 @@ const JKJamTrackPlayer = () => {
return (
<>
{/* <h4>userFingerPrint: {appData?.visitorId}</h4> */}
<Select
options={options}
placeholder="Select Mix"
@ -188,7 +192,7 @@ const JKJamTrackPlayer = () => {
menu: (base) => ({ ...base, zIndex: 9999 })
}}
/>
{ audioUrl }
<Row className="mt-2">
<Col>
{audioUrl && (

5
jam-ui/src/components/jamtracks/JKMyJamTrackMixes.js
View File

@ -1,6 +1,6 @@
import React, { useEffect, useState } from 'react';
import { Table, Spinner } from 'reactstrap';
import FingerprintJS from '@fingerprintjs/fingerprintjs';
//import { useAppData } from '../../context/AppDataContext';
import { removeMixdown } from '../../store/features/jamTrackSlice';
import { useDispatch, useSelector } from 'react-redux';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
@ -12,7 +12,8 @@ import deleteIcon from '../../assets/img/icons/delete-icon.svg';
const JKMyJamTrackMixes = () => {
const [selectedMixdown, setSelectedMixdown] = useState(null);
const fpPromise = FingerprintJS.load();
//const fpPromise = FingerprintJS.load();
//const { userFingerPrint } = useAppData();
const dispatch = useDispatch();
const deleteMixdownStatus = useSelector(state => state.jamTrack.deleteMixdownStatus);

17
jam-ui/src/context/AppDataContext.js
View File

@ -11,15 +11,20 @@ export const AppDataProvider = ({ children }) => {
const [appData, setAppData] = React.useState({});
const { currentUser } = useAuth();
const { userProfile, photoUrl } = useUserProfile({ user: currentUser, useCache: false });
const fpPromise = FingerprintJS.load();
React.useEffect(() => {
setAppData({
userProfile, currentUserPhotoUrl:
photoUrl,
fpPromise
const fpPromise = FingerprintJS.load();
fpPromise.then(fp => {
fp.get().then(result => {
console.log('visitorId', result);
setAppData(prev => ({...prev, visitorId: result.visitorId}));
});
});
}, [currentUser, userProfile, photoUrl]);
}, [])
React.useEffect(() => {
setAppData(prev => ({...prev, userProfile, currentUserPhotoUrl: photoUrl}));
}, [userProfile, photoUrl]);
return <AppDataContext.Provider value={{ appData, setAppData }}>{children}</AppDataContext.Provider>;
};

18
jam-ui/src/hooks/useJamTrack.js
View File

@ -1,4 +1,4 @@
import React, { useState, useEffect, useCallback } from 'react';
import { useState, useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import {
createMyMixdown,
@ -13,7 +13,7 @@ import { useAuth } from '../context/UserAuth';
import { useAppData } from '../context/AppDataContext';
export const useJamTrack = () => {
const { appData } = useAppData();
const jamTrack = useSelector(state => state.jamTrack.jamTrack);
const jamTrackLoadingStatus = useSelector(state => state.jamTrack.jamTrackLoadingStatus);
@ -26,7 +26,6 @@ export const useJamTrack = () => {
const watchedMixdowns = useSelector(state => state.jamTrack.watchedMixdowns);
const { currentUser } = useAuth();
const { fpPromise } = useAppData();
const dispatch = useDispatch();
const [showQueueTime, setShowQueueTime] = useState(false);
@ -157,6 +156,7 @@ export const useJamTrack = () => {
}
const getMasterAudioUrl = () => {
console.log('_DEBUG_ useJamTrack getMasterAudioUrl', jamTrack);
const masterTrack = jamTrack.tracks.find(track => track.track_type === 'Master');
if (masterTrack) {
const audioUrl = masterTrack.preview_mp3_url;
@ -166,21 +166,21 @@ export const useJamTrack = () => {
const getMixdownAudioUrl = async (mixdownId) => {
const activeMix = jamTrack.mixdowns.find(mix => mix.id === mixdownId);
const fp = await fpPromise;
const result = await fp.get();
// 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}`;
`/mixdowns/${activeMix.id}/download.mp3?file_type=mp3&sample_rate=48&mark=${appData?.visitorId}`;
return audioUrl;
};
const getStemAudioUrl = async (stemId) => {
const activeTrack = jamTrack.tracks.find(track => track.id === stemId);
const fp = await fpPromise;
const result = await fp.get();
// const fp = await fpPromise;
// const result = await fp.get();
const audioUrl =
process.env.REACT_APP_API_BASE_URL +
`/jamtracks/${jamTrack.id}/stems/${activeTrack.id}/download.mp3?file_type=mp3&mark=${result.visitorId}`;
`/jamtracks/${jamTrack.id}/stems/${activeTrack.id}/download.mp3?file_type=mp3&mark=${appData?.visitorId}`;
return audioUrl;
};

12
jam-ui/src/hooks/useJamTrackAudio.js
View File

@ -1,11 +1,13 @@
import { useState, useEffect } from 'react';
import { getJamTrack } from '../helpers/rest';
import FingerprintJS from '@fingerprintjs/fingerprintjs';
import { useAppData } from '../context/AppDataContext';
const useJamTrackAudio = jamTrack => {
const [audioUrls, setAudioUrls] = useState([]);
const [jamTrackRecord, setJamTrackRecord] = useState(jamTrack);
const fpPromise = FingerprintJS.load();
//const fpPromise = FingerprintJS.load();
const { appData } = useAppData();
const loadJamTrack = async () => {
//console.log('_JAMTRACK_ loading jam track');
@ -28,11 +30,11 @@ const useJamTrackAudio = jamTrack => {
//console.log('_JAMTRACK_ this is a stem', activeStem);
} else if (activeMixdown) {
//console.log('_JAMTRACK_ this is a mixdown', activeMixdown);
const fp = await fpPromise;
const result = await fp.get();
//const fp = await fpPromise;
//const result = await fp.get();
const audioUrl =
process.env.REACT_APP_API_BASE_URL +
`/mixdowns/${activeMixdown.id}/download.mp3?file_type=mp3&sample_rate=48&mark=${result.visitorId}`;
`/mixdowns/${activeMixdown.id}/download.mp3?file_type=mp3&sample_rate=48&mark=${appData?.visitorId}`;
console.log('mixdown audioUrl', audioUrl);
setAudioUrls([audioUrl]);
} else if (jamTrack) {

18
jam-ui/src/layouts/JKDashboardLayout.js
View File

@ -17,15 +17,15 @@ const DashboardLayout = ({ location }) => {
return (
<UserAuth path={location.pathname}>
<AppRoutesProvider>
<AppDataProvider>
<BrowserQueryProvider>
<NativeAppProvider>
<JKLobbyChatProvider>
<DashboardMain />
</JKLobbyChatProvider>
</NativeAppProvider>
</BrowserQueryProvider>
</AppDataProvider>
<AppDataProvider>
<BrowserQueryProvider>
<NativeAppProvider>
<JKLobbyChatProvider>
<DashboardMain />
</JKLobbyChatProvider>
</NativeAppProvider>
</BrowserQueryProvider>
</AppDataProvider>
</AppRoutesProvider>
</UserAuth>
);