diff --git a/src/js/components/Dater.js b/src/js/components/Dater.js index 70e76ec0..d8a5f5e8 100755 --- a/src/js/components/Dater.js +++ b/src/js/components/Dater.js @@ -1,130 +1,115 @@ -import React from 'react' +import React, { memo } from 'react' -export default class Dater extends React.Component{ +/** + * Format time duration + * + * @param milliseconds int + * @return string (HH:mm:ss) + **/ +const durationTime = (milliseconds = null) => { + if (!milliseconds ) return null - constructor(props){ - super(props); - } + var string = ''; + var total_hours, total_minutes, total_seconds, minutes, seconds; - /** - * Format time duration - * - * @param milliseconds int - * @return string (HH:mm:ss) - **/ - durationTime(milliseconds = null){ - if (!milliseconds ) return null + // get total values for each + total_seconds = Math.floor(milliseconds / 1000 ) + total_minutes = Math.floor(milliseconds / (1000 * 60) ) + total_hours = Math.floor(milliseconds / (1000 * 60 * 60)) - var string = ''; - var total_hours, total_minutes, total_seconds, minutes, seconds; + // get left-over number of seconds + seconds = total_seconds - (total_minutes * 60 ) + if (seconds <= 9) seconds = '0'+ seconds + if (seconds == 0) seconds = '00' - // get total values for each - total_seconds = Math.floor(milliseconds / 1000 ) - total_minutes = Math.floor(milliseconds / (1000 * 60) ) - total_hours = Math.floor(milliseconds / (1000 * 60 * 60)) + // get left-over number of minutes + minutes = total_minutes - (total_hours * 60 ) + if (minutes <= 9 && total_hours) minutes = '0'+ minutes + if (minutes == 0) minutes = '0' - // get left-over number of seconds - seconds = total_seconds - (total_minutes * 60 ) - if (seconds <= 9) seconds = '0'+ seconds - if (seconds == 0) seconds = '00' - - // get left-over number of minutes - minutes = total_minutes - (total_hours * 60 ) - if (minutes <= 9 && total_hours) minutes = '0'+ minutes - if (minutes == 0) minutes = '0' - - if (total_hours) string += total_hours+':' - if (minutes) string += minutes+':' - if (seconds) string += seconds - - return string - } - - /** - * Format time duration as a human-friendly sentence - * - * @param milliseconds int - * @return string (eg 2+ hours) - **/ - durationSentence(milliseconds = null){ - if (!milliseconds ) return null - - var string = ''; - var total_hours, total_minutes, total_seconds, minutes, seconds; - - // get total values for each - total_seconds = Math.floor(milliseconds / 1000 ) - total_minutes = Math.floor(milliseconds / (1000 * 60) ) - total_hours = Math.floor(milliseconds / (1000 * 60 * 60)) - - if (total_hours > 1 ) return total_hours+'+ hrs' - if (total_minutes > 1 ) return total_minutes+' mins' - if (total_seconds ) return total_seconds+' sec' - } - - calculate(){ - switch(this.props.type){ - - case 'total-time': - var duration = 0; - var tracks = this.props.data - for(var i = 0; i < tracks.length; i++){ - if (tracks[i].duration ){ - duration += parseInt(tracks[i].duration); - } - } - return this.durationSentence(duration); - - case 'length': - return this.durationTime(this.props.data); - - case 'date': - - // A four-character date indicates just a year (rather than a full date) - if (this.props.data.length == 4){ - return this.props.data; - - // Digest as a date string - } else { - var date = new Date(this.props.data); - return date.getDate()+'/'+(date.getMonth()+1)+'/'+date.getFullYear(); - } - - case 'ago': - var date = new Date(this.props.data) - var diff = new Date() - date - - var seconds = Math.floor(diff / 1000) - var minutes = Math.floor(diff / (1000 * 60)) - var hours = Math.floor(diff / (1000 * 60 * 60)) - var days = Math.floor(diff / (1000 * 60 * 60 * 24)) - - if (seconds < 60){ - return seconds + " seconds"; - }else if (minutes < 60){ - return minutes + " minutes"; - }else if (hours < 24){ - return hours + " hours"; - } else { - return days + " days" - }; - - default: - return null; - } - } - - render(){ - if (!this.props.data){ - return null; - } - - var calculation = this.calculate(); - if (!calculation){ - return null; - } + if (total_hours) string += total_hours+':' + if (minutes) string += minutes+':' + if (seconds) string += seconds - return {calculation}; - } + return string } + +/** + * Format time duration as a human-friendly sentence + * + * @param milliseconds int + * @return string (eg 2+ hours) + **/ +const durationSentence = (milliseconds = null) => { + if (!milliseconds ) return null + + var string = ''; + var total_hours, total_minutes, total_seconds, minutes, seconds; + + // get total values for each + total_seconds = Math.floor(milliseconds / 1000 ) + total_minutes = Math.floor(milliseconds / (1000 * 60) ) + total_hours = Math.floor(milliseconds / (1000 * 60 * 60)) + + if (total_hours > 1 ) return total_hours+'+ hrs' + if (total_minutes > 1 ) return total_minutes+' mins' + if (total_seconds ) return total_seconds+' sec' +} + +export default memo((props) => { + + if (!props.data){ + return null; + } + + switch(props.type){ + + case 'total-time': + var duration = 0; + var tracks = props.data + for(var i = 0; i < tracks.length; i++){ + if (tracks[i].duration ){ + duration += parseInt(tracks[i].duration); + } + } + return durationSentence(duration); + + case 'length': + return durationTime(props.data); + + case 'date': + + // A four-character date indicates just a year (rather than a full date) + if (props.data.length == 4){ + return props.data; + + // Digest as a date string + } else { + var date = new Date(props.data); + return date.getDate()+'/'+(date.getMonth()+1)+'/'+date.getFullYear(); + } + + case 'ago': + var date = new Date(props.data) + var diff = new Date() - date + + var seconds = Math.floor(diff / 1000) + var minutes = Math.floor(diff / (1000 * 60)) + var hours = Math.floor(diff / (1000 * 60 * 60)) + var days = Math.floor(diff / (1000 * 60 * 60 * 24)) + + if (seconds < 60){ + return seconds + " seconds"; + }else if (minutes < 60){ + return minutes + " minutes"; + }else if (hours < 24){ + return hours + " hours"; + } else { + return days + " days" + }; + + default: + return null; + } +}); diff --git a/src/js/components/NiceNumber.js b/src/js/components/NiceNumber.js index 6194782b..016bfc97 100755 --- a/src/js/components/NiceNumber.js +++ b/src/js/components/NiceNumber.js @@ -1,35 +1,25 @@ -import React from 'react' +import React, { memo } from 'react' -export default class NiceNumber extends React.Component{ +export default memo((props) => { - constructor(props){ - super(props); + let formatted = parseInt(props.value); + + // > 1 million + if (formatted > 1000000){ + formatted = formatted / 1000000; + formatted = Math.round( formatted * 10 ) / 10; + formatted = formatted+'m'; + + // > 1 thousand + } else if (formatted > 1000){ + formatted = formatted / 1000; + formatted = Math.round( formatted * 10 ) / 10; + formatted = formatted+'k'; + + } else { + formatted = formatted.toLocaleString(); } - format(){ - var formatted = parseInt(this.props.value); - - // > 1 million - if (formatted > 1000000){ - formatted = formatted / 1000000; - formatted = Math.round( formatted * 10 ) / 10; - formatted = formatted+'m'; - - // > 1 thousand - } else if (formatted > 1000){ - formatted = formatted / 1000; - formatted = Math.round( formatted * 10 ) / 10; - formatted = formatted+'k'; - - } else { - formatted = formatted.toLocaleString(); - } - - return formatted; - } - - render(){ - return {this.format()}; - } -} + return formatted; +}); \ No newline at end of file diff --git a/src/js/views/Artist.js b/src/js/views/Artist.js index f511e9c6..b20f5355 100755 --- a/src/js/views/Artist.js +++ b/src/js/views/Artist.js @@ -8,8 +8,6 @@ import { Route, Switch } from 'react-router-dom'; import ErrorMessage from '../components/ErrorMessage'; import Link from '../components/Link'; import LazyLoadListener from '../components/LazyLoadListener' -import Header from '../components/Header' -import NiceNumber from '../components/NiceNumber'; import TrackList from '../components/TrackList' import AlbumGrid from '../components/AlbumGrid' import Thumbnail from '../components/Thumbnail'