92 lines
2.6 KiB
JavaScript
92 lines
2.6 KiB
JavaScript
import React, {Fragment, useEffect, useState} from 'react';
|
|
import {Link} from "react-router-dom";
|
|
|
|
import {capitalize, toDuration} from "../services/utils";
|
|
import {getRelease, getReleaseSongs} from "../services/entity_service";
|
|
|
|
import {CoverArt} from "../components/CoverArt";
|
|
import {Entity} from "../components/Entity";
|
|
import {EntityList} from "../components/EntityList";
|
|
|
|
|
|
const Recordings = (props) => {
|
|
const recordings = props.recordings ? props.recordings : null;
|
|
|
|
let recordingsComponent = <EntityList placeholder={true} size={25}/>;
|
|
if(recordings) {
|
|
const items = recordings.map((recording) => ({
|
|
'id': recording.id,
|
|
'link': props.makeLink(recording.id),
|
|
'title': recording.title,
|
|
'subtitle': (<Fragment>
|
|
{recording.length && <div>[{toDuration(recording.length)}]</div>}
|
|
{recording.disambiguation && <div>{capitalize(recording.disambiguation)}</div>}
|
|
</Fragment>),
|
|
'selected': props.selected === recording.id
|
|
|
|
}));
|
|
recordingsComponent = <EntityList items={items}/>
|
|
}
|
|
|
|
return (
|
|
<Fragment>
|
|
<h2>Canciones</h2>
|
|
{recordingsComponent}
|
|
</Fragment>
|
|
)
|
|
}
|
|
|
|
const Release = (props) => {
|
|
const release = props.release;
|
|
if (release){
|
|
const subtitle = (
|
|
<Link to={`/artist/${release.artist.id}`}>
|
|
{`${release.artist.name} (${release.date})`}
|
|
</Link>
|
|
)
|
|
return <Entity title={release.title}
|
|
subtitle={subtitle}
|
|
buttonText='Agregar a mi lista'
|
|
cover={<CoverArt release={release}/>}/>
|
|
}else {
|
|
return <Fragment></Fragment>
|
|
}
|
|
}
|
|
|
|
export const ReleaseView = (props) => {
|
|
const mbid = props.match.params.mbid;
|
|
|
|
const [release, setRelease] = useState(null);
|
|
const [recordings, setRecordings] = useState(null);
|
|
const currentRecording = props.location.hash ? props.location.hash.slice(1) : null
|
|
|
|
useEffect(() => {
|
|
if (mbid) {
|
|
getRelease(mbid).then((result) => setRelease(result));
|
|
getReleaseSongs(mbid).then((result) => {
|
|
setRecordings(result.medias[0].recordings);
|
|
});
|
|
}
|
|
}, [mbid])
|
|
|
|
const makeLink = (recordingID) => {
|
|
return `/release/${mbid}#${recordingID}`;
|
|
}
|
|
|
|
const handleNavigateToRecording= (recording) => {
|
|
props.history.push(makeLink(recording.id))
|
|
}
|
|
|
|
return (
|
|
<Fragment>
|
|
<Release release={release}/>
|
|
{release &&
|
|
<Recordings recordings={recordings}
|
|
selected={currentRecording}
|
|
makeLink={makeLink}
|
|
navigateToRecording={handleNavigateToRecording}/>
|
|
}
|
|
</Fragment>
|
|
)
|
|
}
|