idanoo/GoScrobble
1
0
Fork 0
mirror of https://github.com/idanoo/GoScrobble synced 2025-07-01 05:32:18 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Add extra info to track page + API

Browse source
This commit is contained in:
Daniel Mason 2021-08-12 20:52:47 +12:00
parent 97dd3e5bba
commit f914575e09
Signed by: idanoo
GPG key ID: 387387CDBC02F132
9 changed files with 3349 additions and 2525 deletions
Download patch file Download diff file Expand all files Collapse all files

5706
web/package-lock.json generated
View file

File diff suppressed because it is too large Load diff

3
web/package.json
View file

@ -51,7 +51,6 @@
]
},
"devDependencies": {
"redux-devtools-extension": "^2.13.9",
"webpack-dev-server": "^3.11.1"
"redux-devtools-extension": "^2.13.9"
}
}

54
web/src/Pages/Track.js
View file

@ -3,6 +3,7 @@ import '../App.css';
import './Track.css';
import ScaleLoader from 'react-spinners/ScaleLoader';
import { getTrack } from '../Api/index'
import { Link } from 'react-router-dom';
const Track = (route) => {
const [loading, setLoading] = useState(true);
@ -49,18 +50,53 @@ const Track = (route) => {
length = new Date(track.length * 1000).toISOString().substr(11, 8)
}
let artists = [];
for (let artist of track.artists) {
const row = (
<Link
key={artist.uuid}
to={"/artist/" + artist.uuid}
>{artist.name} </Link>
);
artists.push(row);
}
let albums = [];
for (let album of track.albums) {
const row = (
<Link
key={album.uuid}
to={"/album/" + album.uuid}
>{album.name} </Link>
);
albums.push(row);
}
return (
<div className="pageWrapper">
<h1>
{track.name}
</h1>
<div className="pageBody" style={{textAlign: `center`}}>
<img src={process.env.REACT_APP_API_URL + "/img/" + track.img + "_full.jpg"} alt={track.name} style={{maxWidth: `300px`, maxHeight: `300px`}}/><br/><br/>
{track.mbid && <a rel="noreferrer" target="_blank" href={"https://musicbrainz.org/track/" + track.mbid}>Open on MusicBrainz<br/></a>}
{track.spotify_id && <a rel="noreferrer" target="_blank" href={"https://open.spotify.com/track/" + track.spotify_id}>Open on Spotify<br/></a>}
Track Length: {length && length}
<div className="pageBody">
<div style={{display: `flex`, flexWrap: `wrap`, textAlign: `center`}}>
<div style={{width: `300px`, padding: `0 10px 10px 10px`, textAlign: `left`}}>
<h1 style={{margin: 0}}>
{track.name}
</h1>
<span>
{artists}
</span>
<br/>
<span>
{albums}
</span>
<img src={process.env.REACT_APP_API_URL + "/img/" + track.img + "_full.jpg"} alt={track.name} style={{maxWidth: `300px`, maxHeight: `300px`}}/><br/><br/>
{track.mbid && <a rel="noreferrer" target="_blank" href={"https://musicbrainz.org/track/" + track.mbid}>Open on MusicBrainz<br/></a>}
{track.spotify_id && <a rel="noreferrer" target="_blank" href={"https://open.spotify.com/track/" + track.spotify_id}>Open on Spotify<br/></a>}
Track Length: {length && length}
</div>
<div style={{width: `600px`, padding: `0 10px 10px 10px`}}>
<h3>Top Users</h3>
<br/>
</div>
</div>
</div>
</div>
);