Popularity component

src/js/components/Popularity.js

@@ -0,0 +1,27 @@
+
+import React from 'react'
+import Icon from './Icon'
+import * as helpers from '../helpers'
+
+export default class Popularity extends React.Component{
+
+	constructor(props){
+		super(props)
+	}
+
+	render(){
+		if (this.props.popularity === undefined || this.props.popularity === null){
+			return null;
+		}
+
+		return (
+			<span className="popularity-diagram">
+				<span className={"bar"+(this.props.popularity > 10 ? " filled" : "")}></span>
+				<span className={"bar"+(this.props.popularity > 30 ? " filled" : "")}></span>
+				<span className={"bar"+(this.props.popularity > 50 ? " filled" : "")}></span>
+				<span className={"bar"+(this.props.popularity > 70 ? " filled" : "")}></span>
+				<span className={"bar"+(this.props.popularity > 90 ? " filled" : "")}></span>
+			</span>
+		);
+	}
+}

src/js/components/Track.js

@@ -7,6 +7,7 @@ import ArtistSentence from './ArtistSentence'
 import Dater from './Dater'
 import URILink from './URILink'
 import ContextMenuTrigger from './ContextMenuTrigger'
+import Popularity from './Popularity'
 
 import * as helpers from '../helpers'
 
@@ -311,6 +312,11 @@ export default class Track extends React.Component{
 					{track.duration ? <Dater type="length" data={track.duration} /> : '-'}
 				</span>
 			)
+			track_columns.push(
+				<span className="col popularity" key="popularity">
+					<Popularity popularity={track.popularity} />
+				</span>
+			)
 		}
 
 		track_actions.push(
@@ -338,10 +344,8 @@ export default class Track extends React.Component{
 				onMouseDown={e => this.handleMouseDown(e)}
 				onMouseUp={e => this.handleMouseUp(e)}
 				onMouseMove={e => this.handleMouseMove(e)}
-
 				onDoubleClick={e => this.handleDoubleClick(e)}
 				onContextMenu={e => this.props.handleContextMenu(e)}
-
 				onTouchStart={e => this.handleTouchStart(e)}
 				onTouchEnd={e => this.handleTouchEnd(e)}>
 					{track_actions}

src/js/components/TrackList.js

@@ -423,6 +423,7 @@ class TrackList extends React.Component{
 							<span className="col artists">Artists</span>
 							<span className="col album">Album</span>
 							<span className="col duration">Duration</span>
+							<span className="col popularity"></span>
 						</div>
 					</div>
 				)