Icon structure; Adding Genius icon; Fixing LastFM me loader

mopidy_iris/static/index.html

@@ -98,7 +98,7 @@
 
 	// Release details
 	// These are automatically injected to built HTML
-	var build = "1534844405";
+	var build = "1534879749";
 	var version = "3.23.2";
 
 	// Construct the script tag

src/assets/icons/genius.svg

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 22.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 192 192" style="enable-background:new 0 0 192 192;" xml:space="preserve">
+<path fill="white" d="M54.8,38.5c-10,33.6-5.1,64.3,20,89.4s55.9,29.7,89.5,20.2c-17.7,17.6-39.2,24.3-63.4,21.6
+	c-35-4.1-59.6-30.3-66.6-59.5C27.2,80.8,39.6,50.9,54.8,38.5z"/>
+<path fill="white" d="M91,43.9c2.3-4.1,5.5-7.6,9.1-10.7c17.3-14.7,43.6-14.7,61-0.1c2.9,2.4,4.5,5,4.1,9c-0.4,4.6-0.1,9.3-0.1,14.5
+	c-6.3,0-12.3,0.1-18.2-0.1c-0.8,0-1.6-0.8-2.3-1.3c-14.9-12.7-31.7-16.5-50.5-10.9c-0.8,0.2-1.7,0.3-2.5,0.5
+	C91.5,44.6,91.2,44.2,91,43.9z"/>
+<path fill="white" d="M143,118.2c-0.1-2.4-0.2-4.6-0.3-7.3c-1.3-0.1-2.6-0.2-3.8-0.3c-3.9-0.1-7.8,0.2-11.7-0.1
+	c-9.3-0.5-16.9-8.2-17-17.1c-0.2-9.6,6.9-17.1,17-17.9c0.2,0.8,0.4,1.6,0.5,2.5c2,9.3,9,15,18.6,15.1c4.8,0.1,9.6,0,14.4,0
+	c1.2,0,2.6,0.1,4.4,0.2c0,4.7,0.1,9.2-0.1,13.7c0,0.8-0.7,1.6-1.2,2.3C159.7,113.3,149.8,117.6,143,118.2z"/>
+</svg>

src/js/components/Icon.js

@@ -15,17 +15,20 @@ export default class Icon extends React.Component{
 	}
 
 	render(){
-		var className = "icon";
+		var className = "icon icon--"+(this.props.type ? this.props.type : 'material');
 		if (this.props.className){
 			className += ' '+this.props.className;
 		}
 
 		switch (this.props.type){
+			case 'svg':	
+				var src = require('../../assets/icons/'+this.props.name+'.svg');
+				return <img className={className} src={src} onClick={e => this.handleClick(e)} />;
+
 			case 'fontawesome':	
 				return <FontAwesome className={className} type="fontawesome" name={this.props.name} onClick={e => this.handleClick(e)} />;
 
 			default:
-				className += ' material-icon';		
 				return <i className={className} onClick={e => this.handleClick(e)}>{this.props.name}</i>;
 		}
 	}

src/js/components/Services.js

@@ -162,7 +162,7 @@ class Services extends React.Component{
 	}
 
 	renderLastfm(){
-		var user_object = (this.props.lastfm.session ? this.props.core.users["lastfm:user:"+this.props.lastfm.session.name] : null);
+		var user_object = (this.props.lastfm.me ? this.props.core.users["lastfm:user:"+this.props.lastfm.me.name] : null);
 		if (user_object){
 			var user = (
 				<span className="user">
@@ -298,9 +298,10 @@ class Services extends React.Component{
 		if (this.props.genius.me && this.props.core.users["genius:user:"+this.props.genius.me.id]){
 			var genius_icon = <Thumbnail circle={true} size="small" image={this.props.core.users["genius:user:"+this.props.genius.me.id].photo_url} />
 		} else {
-			var genius_icon = <Icon name="extension" />
+			var genius_icon = <Icon name="genius" type="svg" />
 		}
 		
+
 		return (
 			<div className="menu">
 				<div className="menu-item-wrapper">

src/js/services/lastfm/actions.js

@@ -147,7 +147,9 @@ export function authorizationGranted(data){
 }
 
 export function revokeAuthorization(){
-    return { type: 'LASTFM_AUTHORIZATION_REVOKED' }
+    return {
+    	type: 'LASTFM_AUTHORIZATION_REVOKED'
+    }
 }
 
 

src/js/services/lastfm/middleware.js

@@ -1,51 +1,27 @@
 
-var helpers = require('./../../helpers')
+var helpers = require('./../../helpers');
-var lastfmActions = require('./actions')
+var coreActions = require('../core/actions');
-var uiActions = require('../ui/actions')
-var pusherActions = require('../pusher/actions')
 
 const LastfmMiddleware = (function(){
 
-    /**
-     * The actual middleware inteceptor
-     **/
     return store => next => action => {
-        var state = store.getState();
-
         switch(action.type){
 
-            case 'LASTFM_SET':
-            	console.log(action);
-            	next(action);
-            	break;
-
             case 'LASTFM_ME_LOADED':
-            	store.dispatch({
-            		type: 'LASTFM_USER_LOADED',
-            		user: action.me
-            	});
-            	next(action);
-            	break;
-
-            case 'LASTFM_USER_LOADED':
                 var user = Object.assign(
                     {},
-                    action.user,
+                    action.me,
                     {
-                        uri: "lastfm:user:"+action.user.name
+                        uri: "lastfm:user:"+action.me.name
                     }
                 );
                 store.dispatch(coreActions.userLoaded(user));
-                next(action);
                 break;
 
-
-            // This action is irrelevant to us, pass it on to the next middleware
             default:
                 return next(action);
         }
     }
-
 })();
 
 export default LastfmMiddleware

src/js/services/localstorage/middleware.js

@@ -121,7 +121,7 @@ const localstorageMiddleware = (function(){
                 helpers.setStorage(
                     'lastfm',
                     {
-                        me: action.data.session.user
+                        me: action.me
                     }
                 );
                 break;

src/scss/components/_icon.scss

@@ -1,7 +1,58 @@
 
-/**
+@font-face {
- * Iris icon font
+    font-family: 'Material Icons';
- **/
+    font-style: normal;
+    font-weight: 400;;
+    src: url(../assets/fonts/MaterialIcons-Regular.eot); /* For IE6-8 */
+    src: local('Material Icons'),
+      local('MaterialIcons-Regular'),
+      url(../assets/fonts/MaterialIcons-Regular.woff2) format('woff2'),
+      url(../assets/fonts/MaterialIcons-Regular.woff) format('woff'),
+      url(../assets/fonts/MaterialIcons-Regular.ttf) format('truetype');
+}
+
+@font-face {
+	font-family: 'iris';
+	src:
+		url('../assets/fonts/iris.ttf?wncwx9') format('truetype'),
+		url('../assets/fonts/iris.woff?wncwx9') format('woff'),
+		url('../assets/fonts/iris.svg?wncwx9#iris') format('svg');
+	font-weight: normal;
+	font-style: normal;
+}
+
+.icon {
+	@include noselect();
+
+	&--material {
+	    font-family: 'Material Icons';
+	    font-weight: normal;
+	    font-style: normal;
+	    display: inline-block;
+	    line-height: 1;
+	    text-transform: none;
+	    letter-spacing: normal;
+	    word-wrap: normal;
+	    white-space: nowrap;
+	    direction: ltr;
+	    vertical-align: bottom;
+	    font-size: 1.3em;
+	    margin-bottom: 0.1em;
+	    -webkit-font-smoothing: antialiased;
+	    text-rendering: optimizeLegibility;
+	    -moz-osx-font-smoothing: grayscale;
+	    font-feature-settings: 'liga';
+	}
+
+	&--fontawesome {
+
+	}
+
+	&--svg {
+	}
+}
+
+/*
 
 @font-face {
 	font-family: 'iris';
@@ -168,40 +219,4 @@ $icon-websocket: \e920;
   content: "\e922";
 }
 
-
+*/
-/**
-* Material icons
-**/
-
-@font-face {
-    font-family: 'Material Icons';
-    font-style: normal;
-    font-weight: 400;;
-    src: url(../assets/fonts/MaterialIcons-Regular.eot); /* For IE6-8 */
-    src: local('Material Icons'),
-      local('MaterialIcons-Regular'),
-      url(../assets/fonts/MaterialIcons-Regular.woff2) format('woff2'),
-      url(../assets/fonts/MaterialIcons-Regular.woff) format('woff'),
-      url(../assets/fonts/MaterialIcons-Regular.ttf) format('truetype');
-}
-
-.material-icon {
-    @include noselect();
-    font-family: 'Material Icons';
-    font-weight: normal;
-    font-style: normal;
-    display: inline-block;
-    line-height: 1;
-    text-transform: none;
-    letter-spacing: normal;
-    word-wrap: normal;
-    white-space: nowrap;
-    direction: ltr;
-    vertical-align: bottom;
-    font-size: 1.3em;
-    margin-bottom: 0.1em;
-    -webkit-font-smoothing: antialiased;
-    text-rendering: optimizeLegibility;
-    -moz-osx-font-smoothing: grayscale;
-    font-feature-settings: 'liga';
-}

src/scss/components/_services.scss

@@ -68,6 +68,10 @@
 					height: 40px;
 					margin-top: 10px;
 					margin-bottom: 15px;
+
+					&--svg {
+						opacity: 0.8;
+					}
 				}
 
 				.title {