50 lines
1.1 KiB
JavaScript
50 lines
1.1 KiB
JavaScript
import React, {Fragment, useEffect, useState} from 'react';
|
|
|
|
import {capitalize, toDuration} from "../services/utils";
|
|
import {getSong} from "../services/entity_service";
|
|
|
|
import {Entity} from "../components/Entity";
|
|
import {Comments} from "../components/Comments";
|
|
|
|
const Song = (props) => {
|
|
const song = props.song;
|
|
|
|
if(!song) {
|
|
return <Fragment/>
|
|
}
|
|
|
|
let subtitle = ''
|
|
|
|
if(song.disambiguation && song.length) {
|
|
subtitle = <span>{capitalize(song.disambiguation)} - [{toDuration(song.length)}]</span>
|
|
}else if (song.disambiguation) {
|
|
subtitle = <span>{capitalize(song.disambiguation)}</span>
|
|
}else if (song.length) {
|
|
subtitle = <span>[{toDuration(song.length)}]</span>
|
|
}
|
|
|
|
return <Entity title={song.title} subtitle={subtitle}/>
|
|
|
|
}
|
|
|
|
export const SongView = (props) => {
|
|
const mbid = props.match.params.mbid;
|
|
const [song, setSong] = useState(null);
|
|
|
|
useEffect(() => {
|
|
if (mbid) {
|
|
getSong(mbid).then((result) => setSong(result));
|
|
}
|
|
}, [mbid]);
|
|
|
|
return (
|
|
<div>
|
|
<Song song={song}/>
|
|
{song &&
|
|
<Comments/>
|
|
}
|
|
</div>
|
|
)
|
|
|
|
}
|