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

add jamtrack and artist landing pages

This commit is contained in:
Nuwan 2025-01-30 11:57:01 +05:30
parent 46111f041d
commit 3677181e09
7 changed files with 103 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
jam-ui/cypress/e2e/jamtracks/my-jamtracks-page.cy.js
View File

@ -32,7 +32,7 @@ describe('JamTracks Page', () => {
cy.get('input[type="search"]').type('ba');
cy.wait('@getMyJamTracks_page1');
cy.get('[data-testid=myJamTrackList] a').first().click();
cy.url().should('include', '/jamtracks/1');
cy.url().should('include', '/jamtrack/1');
});
})

74
jam-ui/src/components/affiliate/JKAffiliateLinks.js
View File

@ -3,10 +3,11 @@ import { Card, CardBody } from 'reactstrap';
import FalconCardHeader from '../common/FalconCardHeader';
import { useTranslation } from 'react-i18next';
import JKJamTracksAutoComplete from '../jamtracks/JKJamTracksAutoComplete';
import { getJamTracks, getAffiliatePartnerData, autocompleteJamTracks } from '../../helpers/rest';
import { getJamTracks, getJamTrackArtists, getAffiliatePartnerData, autocompleteJamTracks } from '../../helpers/rest';
import { useAuth } from '../../context/UserAuth';
import { useHistory } from 'react-router-dom';
import { useResponsive } from '@farfetch/react-context-responsive';
import { Link } from 'react-router-dom';
const JKAffiliateLinks = () => {
const { t } = useTranslation('affiliate');
@ -16,6 +17,7 @@ const JKAffiliateLinks = () => {
const [affiliatePartnerId, setAffiliatePartnerId] = useState('xxxxx');
const [affiliate, setAffiliate] = useState(null);
const [jamTracks, setJamTracks] = useState([]);
const [jamTrackArtists, setJamTrackArtists] = useState([]);
const [showDropdown, setShowDropdown] = useState(false);
const [autoCompleteInputValue, setAutoCompleteInputValue] = useState('');
const [jamTracksNextPage, setJamTracksNextPage] = useState(null);
@ -42,11 +44,22 @@ const JKAffiliateLinks = () => {
const resp = await getJamTracks(options);
const data = await resp.json();
console.log('data', data);
setJamTrackArtists([]);
setJamTracks(data.jamtracks);
setJamTracksNextPage(data.next);
} catch (error) {}
};
const fetchJamTrackArtists = async options => {
try {
const resp = await getJamTrackArtists(options);
const data = await resp.json();
console.log('data', data);
setJamTracks([]);
setJamTrackArtists(data.artists);
} catch (error) {}
};
const queryOptions = selected => {
const options = {
limit: 100
@ -75,14 +88,25 @@ const JKAffiliateLinks = () => {
if (!jamTrack) {
return '';
}
return `${process.env.REACT_APP_CLIENT_BASE_URL}/jamtrack/landing/${jamTrack.plan_code}?affiliate=${affiliatePartnerId}`;
return `${process.env.REACT_APP_CLIENT_BASE_URL}/jamtracks/${encodeURIComponent(jamTrack.original_artist)}/${jamTrack.slug}?affiliate=${affiliatePartnerId}`;
}, [affiliatePartnerId]);
const jamTrackArtistLink = useMemo(() => artist => {
if (!artist) {
return '';
}
return `${process.env.REACT_APP_CLIENT_BASE_URL}/jamtracks/${encodeURIComponent(artist.original_artist)}?affiliate=${affiliatePartnerId}`;
}, [affiliatePartnerId]);
//autocomplete related code
const handleOnSelect = selected => {
console.log('onSelect', selected);
const params = queryOptions(selected);
fetchJamTracks(params);
if(selected.type === 'artist') {
fetchJamTrackArtists(params);
}else {
fetchJamTracks(params);
}
};
const handleOnEnter = queryStr => {
@ -132,18 +156,52 @@ const JKAffiliateLinks = () => {
</div>
<div>
{affiliate ? (
<a href={jamTrackLink(jamTrack)} target="_blank">
// <a href={jamTrackLink(jamTrack)} target="_blank">
// {jamTrackLink(jamTrack)}
// </a>
<Link to={`/jamtracks/${jamTrack.original_artist}/${jamTrack.slug}`}>
{jamTrackLink(jamTrack)}
</a>
</Link>
) : (
<a href="javascript:void(0);" onClick={() => history.push('/affiliate/agreement')}>
// <a href="javascript:void(0);" onClick={() => history.push('/affiliate/agreement')}>
// {jamTrackLink(jamTrack)}
// </a>
<Link to={`/affiliate/agreement`} target="_blank">
{jamTrackLink(jamTrack)}
</a>
</Link>
)}
</div>
</div>
);
})}
})}
{jamTrackArtists &&
jamTrackArtists.map(artist => {
return (
<div key={artist.original_artist}>
<div>
{t('links.affiliate_link_for')} {artist.original_artist}:
</div>
<div>
{affiliate ? (
// <a href={jamTrackArtistLink(artist)} target="_blank">
// {jamTrackArtistLink(artist)}
// </a>
<Link to={`/jamtracks/${artist.original_artist}`}>
{jamTrackArtistLink(artist)}
</Link>
) : (
// <a href="javascript:void(0);" onClick={() => history.push('/affiliate/agreement')}>
// {jamTrackArtistLink(artist)}
// </a>
<Link to={`/affiliate/agreement`} target="_blank">
{jamTrackArtistLink(artist)}
</Link>
)}
</div>
</div>
);
})}
</CardBody>
</Card>
);

30
jam-ui/src/components/dashboard/JKDashboardMain.js
View File

@ -51,6 +51,7 @@ import JKCheckout from '../shopping-cart/JKCheckout';
import JKCheckoutSuccess from '../shopping-cart/JKCheckoutSuccess';
import JKMyJamTracks from '../jamtracks/JKMyJamTracks';
import JKJamTrackShow from '../jamtracks/JKJamTrackShow';
import JKJamTracksLanding from '../jamtracks/JKJamTracksLanding';
//import loadable from '@loadable/component';
//const DashboardRoutes = loadable(() => import('../../layouts/JKDashboardRoutes'));
@ -121,15 +122,15 @@ function JKDashboardMain() {
// };
const initJKScripts = () => {
if (scriptLoaded.current) {
return;
}
const app = window.JK.JamKazam();
const jamServer = new window.JK.JamServer(app, function(event_type) {
const jamServer = new window.JK.JamServer(app, function (event_type) {
console.log('EVENT_TYPE', event_type);
});
jamServer.initialize();
@ -139,11 +140,11 @@ function JKDashboardMain() {
clientInit.init();
window.JK.JamServer.connect() // singleton here defined in JamServer.js
.done(function() {
.done(function () {
console.log('Jamserver connected...');
//_initAfterConnect(true);
})
.fail(function() {
.fail(function () {
console.log('Jamserver connection error...');
//_initAfterConnect(false);
});
@ -158,7 +159,7 @@ function JKDashboardMain() {
};
const registerTextMessageCallback = () => {
window.JK.JamServer.registerMessageCallback(window.JK.MessageType.TEXT_MESSAGE, function(header, payload) {
window.JK.JamServer.registerMessageCallback(window.JK.MessageType.TEXT_MESSAGE, function (header, payload) {
console.log('registerTextMessageCallback payload', payload);
//console.log('registerTextMessageCallback header', header);
const msg = {
@ -190,7 +191,7 @@ function JKDashboardMain() {
};
const registerChatMessageCallback = () => {
window.JK.JamServer.registerMessageCallback(window.JK.MessageType.CHAT_MESSAGE, function(header, payload) {
window.JK.JamServer.registerMessageCallback(window.JK.MessageType.CHAT_MESSAGE, function (header, payload) {
console.log('registerChatMessageCallback ' + JSON.stringify(payload));
if (payload !== undefined && payload.sender_id !== window.currentUser.id) {
if (visibilityState === 'hidden' && Notification.permission === 'granted') {
@ -199,7 +200,7 @@ function JKDashboardMain() {
body: `${payload.sender_name}: ${truncate(payload.msg, 100)}`
//icon: `${process.env.REACT_APP_CLIENT_BASE_URL}/assets/img/jamkazam-logo.png`
});
notification.onclick = function(event) {
notification.onclick = function (event) {
event.preventDefault(); // prevent the browser from focusing the Notification's tab
window.focus();
event.target.close();
@ -219,13 +220,13 @@ function JKDashboardMain() {
};
const registerFriendRequest = () => {
window.JK.JamServer.registerMessageCallback(window.JK.MessageType.FRIEND_REQUEST, function(header, payload) {
window.JK.JamServer.registerMessageCallback(window.JK.MessageType.FRIEND_REQUEST, function (header, payload) {
handleNotification(payload, header.type);
});
};
const registerFriendRequestAccepted = () => {
window.JK.JamServer.registerMessageCallback(window.JK.MessageType.FRIEND_REQUEST_ACCEPTED, function(
window.JK.JamServer.registerMessageCallback(window.JK.MessageType.FRIEND_REQUEST_ACCEPTED, function (
header,
payload
) {
@ -236,7 +237,7 @@ function JKDashboardMain() {
};
const registerSubscriptionCallback = () => {
window.JK.JamServer.registerMessageCallback(window.JK.MessageType.SUBSCRIPTION_MESSAGE, function(header, payload) {
window.JK.JamServer.registerMessageCallback(window.JK.MessageType.SUBSCRIPTION_MESSAGE, function (header, payload) {
console.log('registerSubscriptionCallback payload', payload);
console.log('registerSubscriptionCallback header', header);
handleSubscriptionMessage(payload);
@ -268,7 +269,7 @@ function JKDashboardMain() {
};
const handleSubscriptionMessage = payload => {
}
useScript(`${process.env.REACT_APP_CLIENT_BASE_URL}/client_scripts`, initJKScripts);
@ -299,7 +300,10 @@ function JKDashboardMain() {
<PrivateRoute path="/affiliate/signups" component={JKAffiliateSignups} />
<PrivateRoute path="/affiliate/earnings" component={JKAffiliateEarnings} />
<PrivateRoute path="/affiliate/agreement" component={JKAffiliateAgreement} />
<PrivateRoute path="/jamtracks/:id" component={JKJamTrackShow} />
<PrivateRoute path="/jamtracks/:artist/:song_slug" component={JKJamTracksLanding} />
<PrivateRoute path="/jamtracks/:artist" component={JKJamTracksLanding} />
<PrivateRoute path="/jamtracks" component={JKJamTracksFilter} />
<PrivateRoute path="/jamtrack/:id" component={JKJamTrackShow} />
<PrivateRoute path="/jamtracks" component={JKJamTracksFilter} />
<PrivateRoute path="/my-jamtracks" component={JKMyJamTracks} />
<PrivateRoute path="/shopping-cart" component={JKShoppingCart} />

16
jam-ui/src/components/jamtracks/JKJamTracksLanding.js Normal file
View File

@ -0,0 +1,16 @@
import React from 'react'
import { useParams, Link } from 'react-router-dom';
const JKJamTracksLanding = () => {
const { artist, song_slug } = useParams();
return (
<div>
<h1>JKJamTracksLanding</h1>
<p>artist: {artist}</p>
<p>song_slug: {song_slug}</p>
<Link to="/jamtracks">Back to JamTracks</Link>
</div>
)
}
export default JKJamTracksLanding

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

@ -100,7 +100,7 @@ const JKMyJamTracks = () => {
jamTracks.map((jamTrack, index) => (
<div key={jamTrack.id} ref={ref => (jamTracks.length - 1 === index ? setLastJamTrackRef(ref) : null)}>
<ListGroupItem>
<Link to={`/jamtracks/${jamTrack.id}`}>{jamTrack.name}</Link>
<Link to={`/jamtrack/${jamTrack.id}`}>{jamTrack.name}</Link>
{jamTrack.original_artist && ` by ${jamTrack.original_artist}`}
</ListGroupItem>
</div>

2
jam-ui/src/components/shopping-cart/JKCheckoutSuccess.js
View File

@ -43,7 +43,7 @@ const JKCheckoutSuccess = () => {
)}
</p>
{jamtrack && (
<Link to={`/jamtracks/${jamtrack.id}`} className="btn btn-primary">
<Link to={`/jamtrack/${jamtrack.id}`} className="btn btn-primary">
{t('open_jamtrack')}
</Link>
)}

2
web/app/views/api_jam_tracks/show.rabl
View File

@ -1,6 +1,6 @@
object @jam_track
attributes :id, :name, :description, :recording_type, :original_artist, :songwriter, :publisher, :sales_region, :price, :version, :duration, :year, :plan_code, :allow_free, :download_price, :upgrade_price
attributes :id, :name, :description, :recording_type, :original_artist, :songwriter, :publisher, :sales_region, :price, :version, :duration, :year, :plan_code, :allow_free, :download_price, :upgrade_price, :slug
node :genres do |item|
item.genres.select(:description).map(&:description)