Utils y mejoras en release

src/services/utils.js

@@ -0,0 +1,24 @@
+export const capitalize = (string) => {
+  return string.charAt(0).toUpperCase() + string.slice(1);
+}
+
+export const pad2 = (n) => {
+  if(n <= 99 && n >= 0) {
+    n = (`0${n}`).slice(-2);
+  }
+  return n;
+}
+
+export const toDuration = (miliseconds) => {
+  const base =  Math.round(miliseconds / 1000);
+
+  const hours = Math.floor(base / 3600);
+  const minutes = Math.floor((base % 3600) / 60);
+  const seconds = base % 60;
+
+  if(hours > 0){
+    return pad2(hours) + ':' + pad2(minutes) + ':' + pad2(seconds)
+  }else{
+    return pad2(minutes) + ':' + pad2(seconds)
+  }
+}

src/views/Disc.jsx

@@ -1,6 +1,8 @@
 import React, {Fragment, useEffect, useState} from 'react';
+import {Link} from 'react-router-dom'
 import queryString from "query-string";
 
+import {capitalize} from "../services/utils";
 import {getDisc, getDiscVersions} from "../services/entity_service";
 
 import {CoverArt} from "../components/CoverArt";
@@ -8,10 +10,6 @@ import {Entity} from "../components/Entity";
 import {EntityList} from "../components/EntityList";
 import {Paginate} from "../components/Paginate";
 
-const capitalize = (string) => {
-  return string.charAt(0).toUpperCase() + string.slice(1);
-}
-
 const Versions = (props) => {
   const versions = props.versions ? props.versions : null;
   const paginate = props.paginate ? props.paginate : null;
@@ -59,8 +57,13 @@ const Versions = (props) => {
 const Disc = (props) => {
   const disc = props.disc;
   if (disc){
+    const subtitle = (
+      <Link to={`/artist/${disc.artist.id}`}>
+        {`${disc.artist.name} (${disc.first_release_date})`}
+      </Link>
+    )
     return <Entity title={disc.title}
-      subtitle={`${disc.artist.name} - [${disc.first_release_date}]`}
+      subtitle={subtitle}
       buttonText='Agregar a mi lista'
       cover={<CoverArt disc={disc}/>}/>
   }else {

src/views/Release.jsx

@@ -1,14 +1,13 @@
 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 capitalize = (string) => {
-  return string.charAt(0).toUpperCase() + string.slice(1);
-}
 
 const Recordings = (props) => {
   const recordings = props.recordings ? props.recordings : null;
@@ -20,8 +19,8 @@ const Recordings = (props) => {
       'link': props.makeLink(recording.id),
       'title': recording.title,
       'subtitle': (<Fragment>
-                    <div>{recording.length}</div>
-                    <div>{capitalize(recording.disambiguation)}</div>
+                    {recording.length && <div>[{toDuration(recording.length)}]</div>}
+                    {recording.disambiguation && <div>{capitalize(recording.disambiguation)}</div>}
                   </Fragment>),
       'selected': props.selected === recording.id
 
@@ -40,8 +39,13 @@ const Recordings = (props) => {
 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={`${release.artist.name} - [${release.date}]`}
+      subtitle={subtitle}
       buttonText='Agregar a mi lista'
       cover={<CoverArt release={release}/>}/>
   }else {