Popularity component

mopidy_iris/static/app.css

@@ -4831,7 +4831,7 @@ aside {
     color: #a3a19f;
     position: absolute;
     top: 16px;
-    right: 36px; }
+    right: 40px; }
   :root .notouch:not(.dragging) .list .list-item:not(.header):not(.no-click).hover {
     background: rgba(255, 255, 255, 0.03);
     cursor: pointer; }
@@ -4854,11 +4854,13 @@ aside {
 .list.track-list .list-item {
   cursor: pointer; }
   .list.track-list .list-item .col.name {
-    width: 40%; }
+    width: 38%; }
   .list.track-list .list-item .col.artists, .list.track-list .list-item .col.album {
     width: 25%; }
   .list.track-list .list-item .col.duration {
     width: 5%; }
+  .list.track-list .list-item .col.popularity {
+    width: 3%; }
   :root .dragging .list.track-list .list-item.hover, .list.track-list .list-item.touch-drag-hover {
     border-top: 3px solid #32b5f2;
     margin-top: -3px;
@@ -5962,6 +5964,20 @@ main header {
   .services .service {
     margin-top: 5px; } }
 
+.popularity-diagram {
+  display: block;
+  margin: 0.15em -2px;
+  text-align: center; }
+  .popularity-diagram .bar {
+    display: inline-block;
+    width: 2px;
+    height: 0.5em;
+    margin: 0.25em 1px;
+    background: #FFFFFF;
+    opacity: 0.25; }
+    .popularity-diagram .bar.filled {
+      opacity: 1; }
+
 .artist-view .body-loader:not(.lazy-loader) {
   padding: 15vh 0; }
 

mopidy_iris/static/app.js

@@ -17346,7 +17346,8 @@ var TrackList = function (_React$Component) {
 								'span',
 								{ className: 'col duration' },
 								'Duration'
-							)
+							),
+							_react2.default.createElement('span', { className: 'col popularity' })
 						)
 					);
 			}
@@ -34530,6 +34531,10 @@ var _ContextMenuTrigger = __webpack_require__(35);
 
 var _ContextMenuTrigger2 = _interopRequireDefault(_ContextMenuTrigger);
 
+var _Popularity = __webpack_require__(471);
+
+var _Popularity2 = _interopRequireDefault(_Popularity);
+
 var _helpers = __webpack_require__(2);
 
 var helpers = _interopRequireWildcard(_helpers);
@@ -34928,6 +34933,11 @@ var Track = function (_React$Component) {
 					{ className: 'col duration', key: 'duration' },
 					track.duration ? _react2.default.createElement(_Dater2.default, { type: 'length', data: track.duration }) : '-'
 				));
+				track_columns.push(_react2.default.createElement(
+					'span',
+					{ className: 'col popularity', key: 'popularity' },
+					_react2.default.createElement(_Popularity2.default, { popularity: track.popularity })
+				));
 			}
 
 			track_actions.push(_react2.default.createElement(_ContextMenuTrigger2.default, { className: 'subtle', key: 'context', onTrigger: function onTrigger(e) {
@@ -34966,14 +34976,12 @@ var Track = function (_React$Component) {
 					onMouseMove: function onMouseMove(e) {
 						return _this2.handleMouseMove(e);
 					},
-
 					onDoubleClick: function onDoubleClick(e) {
 						return _this2.handleDoubleClick(e);
 					},
 					onContextMenu: function onContextMenu(e) {
 						return _this2.props.handleContextMenu(e);
 					},
-
 					onTouchStart: function onTouchStart(e) {
 						return _this2.handleTouchStart(e);
 					},
@@ -66987,6 +66995,10 @@ var _Icon = __webpack_require__(6);
 
 var _Icon2 = _interopRequireDefault(_Icon);
 
+var _Popularity = __webpack_require__(471);
+
+var _Popularity2 = _interopRequireDefault(_Popularity);
+
 var _helpers = __webpack_require__(2);
 
 var helpers = _interopRequireWildcard(_helpers);
@@ -67337,6 +67349,11 @@ var Track = function (_React$Component) {
 							'li',
 							null,
 							_react2.default.createElement(_Dater2.default, { type: 'length', data: track.duration })
+						) : null,
+						track.popularity ? _react2.default.createElement(
+							'li',
+							null,
+							_react2.default.createElement(_Popularity2.default, { popularity: track.popularity })
 						) : null
 					)
 				),
@@ -68922,12 +68939,15 @@ var Search = function (_React$Component) {
 			this.props.mopidyActions.clearSearchResults();
 			this.props.spotifyActions.clearSearchResults();
 
-			if (provider == 'mopidy' || this.props.mopidy_connected && this.props.uri_schemes_search_enabled) {
+			if (type && term) {
-				this.props.mopidyActions.getSearchResults(type, term);
-			}
 
-			if (provider == 'spotify' || this.props.mopidy_connected && this.props.uri_schemes_search_enabled && this.props.uri_schemes_search_enabled.includes('spotify:')) {
+				if (provider == 'mopidy' || this.props.mopidy_connected && this.props.uri_schemes_search_enabled) {
-				this.props.spotifyActions.getSearchResults(type, term);
+					this.props.mopidyActions.getSearchResults(type, term);
+				}
+
+				if (provider == 'spotify' || this.props.mopidy_connected && this.props.uri_schemes_search_enabled && this.props.uri_schemes_search_enabled.includes('spotify:')) {
+					this.props.spotifyActions.getSearchResults(type, term);
+				}
 			}
 		}
 	}, {
@@ -79299,6 +79319,101 @@ exports.default = (0, _reactRedux.connect)(mapStateToProps, mapDispatchToProps)(
 
 // removed by extract-text-webpack-plugin
 
+/***/ }),
+/* 444 */,
+/* 445 */,
+/* 446 */,
+/* 447 */,
+/* 448 */,
+/* 449 */,
+/* 450 */,
+/* 451 */,
+/* 452 */,
+/* 453 */,
+/* 454 */,
+/* 455 */,
+/* 456 */,
+/* 457 */,
+/* 458 */,
+/* 459 */,
+/* 460 */,
+/* 461 */,
+/* 462 */,
+/* 463 */,
+/* 464 */,
+/* 465 */,
+/* 466 */,
+/* 467 */,
+/* 468 */,
+/* 469 */,
+/* 470 */,
+/* 471 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+	value: true
+});
+
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+var _react = __webpack_require__(1);
+
+var _react2 = _interopRequireDefault(_react);
+
+var _Icon = __webpack_require__(6);
+
+var _Icon2 = _interopRequireDefault(_Icon);
+
+var _helpers = __webpack_require__(2);
+
+var helpers = _interopRequireWildcard(_helpers);
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+var Popularity = function (_React$Component) {
+	_inherits(Popularity, _React$Component);
+
+	function Popularity(props) {
+		_classCallCheck(this, Popularity);
+
+		return _possibleConstructorReturn(this, (Popularity.__proto__ || Object.getPrototypeOf(Popularity)).call(this, props));
+	}
+
+	_createClass(Popularity, [{
+		key: 'render',
+		value: function render() {
+			if (this.props.popularity === undefined || this.props.popularity === null) {
+				return null;
+			}
+
+			return _react2.default.createElement(
+				'span',
+				{ className: 'popularity-diagram' },
+				_react2.default.createElement('span', { className: "bar" + (this.props.popularity > 10 ? " filled" : "") }),
+				_react2.default.createElement('span', { className: "bar" + (this.props.popularity > 30 ? " filled" : "") }),
+				_react2.default.createElement('span', { className: "bar" + (this.props.popularity > 50 ? " filled" : "") }),
+				_react2.default.createElement('span', { className: "bar" + (this.props.popularity > 70 ? " filled" : "") }),
+				_react2.default.createElement('span', { className: "bar" + (this.props.popularity > 90 ? " filled" : "") })
+			);
+		}
+	}]);
+
+	return Popularity;
+}(_react2.default.Component);
+
+exports.default = Popularity;
+
 /***/ })
 /******/ ]);
 //# sourceMappingURL=app.js.map

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>
 				)

src/js/views/Search.js

@@ -94,12 +94,15 @@ class Search extends React.Component{
 		this.props.mopidyActions.clearSearchResults();
 		this.props.spotifyActions.clearSearchResults();
 
-		if (provider == 'mopidy' || (this.props.mopidy_connected && this.props.uri_schemes_search_enabled)){
+		if (type && term){
-			this.props.mopidyActions.getSearchResults(type, term)
-		}
 
-		if (provider == 'spotify' || (this.props.mopidy_connected && this.props.uri_schemes_search_enabled && this.props.uri_schemes_search_enabled.includes('spotify:'))){
+			if (provider == 'mopidy' || (this.props.mopidy_connected && this.props.uri_schemes_search_enabled)){
-			this.props.spotifyActions.getSearchResults(type, term)
+				this.props.mopidyActions.getSearchResults(type, term)
+			}
+
+			if (provider == 'spotify' || (this.props.mopidy_connected && this.props.uri_schemes_search_enabled && this.props.uri_schemes_search_enabled.includes('spotify:'))){
+				this.props.spotifyActions.getSearchResults(type, term)
+			}
 		}
 	}
 

src/js/views/Track.js

@@ -16,6 +16,7 @@ import LazyLoadListener from '../components/LazyLoadListener'
 import ContextMenuTrigger from '../components/ContextMenuTrigger'
 import URILink from '../components/URILink'
 import Icon from '../components/Icon'
+import Popularity from '../components/Popularity'
 
 import * as helpers from '../helpers'
 import * as uiActions from '../services/ui/actions'
@@ -241,6 +242,7 @@ class Track extends React.Component{
 							{track.track_number ? <span>Track {track.track_number}</span> : null}
 						</li>
 						{track.duration ? <li><Dater type="length" data={track.duration} /></li> : null}
+						{track.popularity ? <li><Popularity popularity={track.popularity} /></li> : null}
 					</ul>
 				</div>
 

src/scss/app.scss

@@ -30,6 +30,7 @@
 @import 'components/debug';
 @import 'components/tooltip';
 @import 'components/services';
+@import 'components/popularity';
 
 @import 'views/artist';
 @import 'views/user';

src/scss/components/_lists.scss

@@ -57,7 +57,7 @@
 			color: $mid_grey;
 			position: absolute;
 			top: 16px;
-			right: 36px;
+			right: 40px;
 		}
 
 		:root .notouch:not(.dragging) &:not(.header):not(.no-click).hover {
@@ -95,7 +95,7 @@
 
 			.col {
 				&.name { 
-					width: 40%;
+					width: 38%;
 				}
 				&.artists,
 				&.album { 
@@ -104,6 +104,9 @@
 				&.duration {
 					width: 5%;
 				}
+				&.popularity {
+					width: 3%;
+				}
 			}
 
 			:root .dragging &.hover,

src/scss/components/_popularity.scss

@@ -0,0 +1,19 @@
+
+.popularity-diagram {
+	display: block;
+	margin: 0.15em -2px;
+	text-align: center;
+
+	.bar {
+		display: inline-block;
+		width: 2px;
+		height: 0.5em;
+		margin: 0.25em 1px;
+		background: $white;
+		opacity: 0.25;
+
+		&.filled {
+			opacity: 1;
+		}
+	}
+}