GIF to css-loader; If PyPi down, don't break get_version; Playing icon in tracklist

mopidy_iris/frontend.py

@@ -170,19 +170,21 @@ class IrisFrontend(pykka.ThreadingActor, CoreListener):
     ##
     def get_version( self ):
         
-        url = 'https://pypi.python.org/pypi/Mopidy-Spotmop/json'
+        url = 'https://pypi.python.org/pypi/Mopidy-Iris/json'
         req = urllib2.Request(url)
         
         try:
             response = urllib2.urlopen(req, timeout=30).read()
             response = json.loads(response)
             latest_version = response['info']['version']
+            
+            # compare our versions, and convert result to boolean
+            upgrade_available = cmp( parse_version( latest_version ), parse_version( self.version ) )
+            upgrade_available = ( upgrade_available == 1 )
+
         except urllib2.HTTPError as e:
-            latest_version = False
-        
-        # compare our versions, and convert result to boolean
-        upgrade_available = cmp( parse_version( latest_version ), parse_version( self.version ) )
-        upgrade_available = ( upgrade_available == 1 )
+            latest_version = '0.0.0'
+            upgrade_available = False
         
         # prepare our response
         data = {

src/js/components/Track.js

@@ -59,6 +59,7 @@ export default class Track extends React.Component{
 				onDoubleClick={ e => this.props.handleDoubleClick(e) }
 				onContextMenu={ e => this.handleContextMenu(e) }>
 					{ this.props.track.selected ? <FontAwesome name="check" className="select-state" fixedWidth /> : null }
+					{ this.props.track.playing ? <FontAwesome name="play" className="play-state" fixedWidth /> : null }
 					<span className="col name">
 						{ track.name ? track.name : <span className="grey-text">{track.uri}</span> }
 					</span>

src/scss/components/_lists.scss

@@ -57,8 +57,29 @@
 			font-size: 10px;
 		}
 
+		.play-state {
+			display: none;
+			position: absolute;
+			top: 13px;
+			left: 15px;
+			font-size: 10px;
+		}
+
 		&.playing {
 			font-weight: 600;
+			.play-state {
+				display: block;
+				opacity: 1;
+			}
+		}
+
+		&.playing.selected {
+			.select-state {
+				left: 23px;
+			}
+			.play-state {
+				left: 10px;
+			}
 		}
 
 		:root .dragging &:hover {

webpack.config.js

@@ -43,7 +43,7 @@ var config = {
 			},
 			{
 				// load external resources (ie Google fonts)
-				test: /.(png|woff(2)?|eot|ttf|svg)(\?[a-z0-9=\.]+)?$/,
+				test: /.(gif|png|woff(2)?|eot|ttf|svg)(\?[a-z0-9=\.]+)?$/,
 				loader: 'url-loader?limit=100000'
 			}
 		]