Upgrading webpack

mopidy_iris/__init__.py

@@ -12,7 +12,7 @@ from handlers import WebsocketHandler, HttpHandler
 from core import IrisCore
 
 logger = logging.getLogger(__name__)
-__version__ = '2.13.1'
+__version__ = '2.13.2'
 
 ##
 # Core extension class

mopidy_iris/handlers.py

@@ -1,18 +1,13 @@
 
 from __future__ import unicode_literals
-import tornado.ioloop, tornado.web, tornado.websocket, tornado.template
-import random, string, logging, uuid, subprocess, pykka, ast
 from datetime import datetime
 from tornado.escape import json_encode, json_decode
-import logging, json, urllib, urllib2
-import tornado.web
 from spotipy import Spotify
-
+import tornado.ioloop, tornado.web, tornado.websocket, tornado.template
-import mem
+import random, string, logging, uuid, subprocess, pykka, ast, logging, json, urllib, urllib2, mem
 
 logger = logging.getLogger(__name__)
 
-
 class WebsocketHandler(tornado.websocket.WebSocketHandler):
     
     # initiate (not the actual object __init__, but run shortly after)

package.json

@@ -10,17 +10,24 @@
 	},
 	"main": "app.js",
 	"dependencies": {
-		"babel": "^5.8.29",
+		"webpack": "2.2.1",
-		"babel-core": "6.14.0",
+		"webpack-strip": "*",
-		"babel-loader": "6.2.5",
+	    "sass-loader": "6.0.2",
-		"babel-preset-es2015": "*",
+	    "style-loader": "0.13.2",
-		"babel-preset-react": "*",
+	    "css-loader": "0.26.2",
-		"babel-preset-stage-2": "*",
+	    "url-loader": "0.5.8",
-		"sass-loader": "*",
+	    "file-loader": "0.10.1",
-		"style-loader": "*",
+	    "expose-loader": "0.7.3",
-		"css-loader": "*",
+
-		"url-loader": "*",
+	    "node-sass": "4.5.0",
-		"file-loader": "*",
+	    "extract-text-webpack-plugin": "2.0.0",	    
+
+		"babel-core": "^6.23.1",
+		"babel-loader": "^6.3.0",
+		"babel-preset-es2015": "^6.22.0",
+		"babel-preset-react": "^6.22.0",
+		"babel-preset-stage-0": "^6.22.0",
+
 		"flux": "^2.1.1",
 		"redux": "*",
 		"react": "*",
@@ -30,13 +37,9 @@
 		"react-redux": "*",
 		"redux-devtools": "*",
 		"redux-thunk": "*",
-		"webpack": "^1.13.2",
+
-		"webpack-strip": "*",
-		"node-sass": "*",
-		"extract-text-webpack-plugin": "*",
 		"jquery": "3.1.1",
     	"mopidy": "^0.5.0",
-		"expose-loader": "*",
 		"react-fontawesome": "*",
 		"react-ga": "2.1.2"
 	},

setup.py

@@ -21,11 +21,11 @@ setup(
     include_package_data=True,
     install_requires=[
         'setuptools >= 3.3',
-        'pylast',
+        'pylast >= 1.6.0',
-        'spotipy',
+        'spotipy >= 2.3.8',
         'Mopidy >= 2.0',
         'Mopidy-Local-Images >= 1.0',
-        'ConfigObj'
+        'ConfigObj >= 5.0.6'
     ],
     classifiers=[
         'Environment :: No Input/Output (Daemon)',

src/js/components/Modal/AddToQueueModal.js

@@ -0,0 +1,70 @@
+
+import React, { PropTypes } from 'react'
+import FontAwesome from 'react-fontawesome'
+
+import Icon from '../Icon'
+import * as helpers from '../../helpers'
+
+export default class AddToQueueModal extends React.Component{
+
+	constructor(props){
+		super(props)
+		this.state = {
+			uris: '',
+			at_position: 'end'
+		}
+	}
+
+	handleSubmit(e){
+		var uris = this.state.uris.split(',')
+		if (this.state.at_position == 'next'){
+			this.props.mopidyActions.enqueueURIsNext(uris)
+		}else{
+			this.props.mopidyActions.enqueueURIs(uris)
+		}
+		this.props.uiActions.closeModal()
+	}
+
+	render(){
+		return (
+			<div>
+				<h4>Add URI(s) to tracklist</h4>
+
+				<form onSubmit={e => this.handleSubmit(e)}>
+					<div className="field text">
+						<input 
+							type="text"
+							placeholder="Add comma-separated URIs"
+							onChange={e => this.setState({uris: e.target.value})} 
+							value={this.state.uris} />
+					</div>
+
+					<div className="field radio white">
+						<label>
+							<input 
+								type="radio"
+								name="at_position"
+								value="end"
+								checked={ this.state.at_position == 'end' }
+								onChange={ e => this.setState({ at_position: e.target.value })} />
+							<span className="label">Add to end</span>
+						</label>
+						<label>
+							<input 
+								type="radio"
+								name="at_position"
+								value="next"
+								checked={ this.state.at_position == 'next' }
+								onChange={ e => this.setState({ at_position: e.target.value })} />
+							<span className="label">Add after current track</span>
+						</label>
+					</div>
+
+					<div className="actions centered-text">
+						<button type="submit" className="primary wide">Add</button>
+					</div>
+				</form>
+			</div>
+		)
+	}
+}

src/js/components/Modal/Modal.js

@@ -6,6 +6,7 @@ import { bindActionCreators } from 'redux'
 import * as helpers from '../../helpers'
 import Icon from '../Icon'
 import AddToPlaylistModal from './AddToPlaylistModal'
+import AddToQueueModal from './AddToQueueModal'
 import CreatePlaylistModal from './CreatePlaylistModal'
 import EditPlaylistModal from './EditPlaylistModal'
 import SendAuthorizationModal from './SendAuthorizationModal'
@@ -43,6 +44,7 @@ class Modal extends React.Component{
 				<div className="content">
 
 					{ this.props.modal.name == 'add_to_playlist' ? <AddToPlaylistModal uiActions={this.props.uiActions} playlists={this.props.playlists} tracks_uris={this.props.modal.data.tracks_uris} /> : null }
+					{ this.props.modal.name == 'add_to_queue' ? <AddToQueueModal uiActions={this.props.uiActions} mopidyActions={this.props.mopidyActions} /> : null }
 					{ this.props.modal.name == 'create_playlist' ? <CreatePlaylistModal uiActions={this.props.uiActions} /> : null }
 					{ this.props.modal.name == 'edit_playlist' ? <EditPlaylistModal uiActions={this.props.uiActions} data={this.props.modal.data} /> : null }
 					{ this.props.modal.name == 'send_authorization' ? <SendAuthorizationModal uiActions={this.props.uiActions} pusherActions={this.props.pusherActions} data={this.props.modal.data} /> : null }

src/js/views/Debug.js

@@ -42,10 +42,12 @@ class Debug extends React.Component{
 	render(){
 
 		var options = (
-			<button onClick={e => hashHistory.push(global.baseURL+'settings')}>
+			<span>
-				<FontAwesome name="reply" />&nbsp;
+				<button onClick={e => hashHistory.push(global.baseURL+'settings')}>
-				Back
+					<FontAwesome name="reply" />&nbsp;
-			</button>
+					Back
+				</button>
+			</span>
 		)
 
 		return (

src/js/views/Queue.js

@@ -59,21 +59,25 @@ class Queue extends React.Component{
 	render(){
 		var options = (
 			<span>
-				<button onClick={e => this.props.uiActions.openModal('kiosk_mode')}>
-					<FontAwesome name="television" />&nbsp;
-					Kiosk mode
-				</button>
 				<button onClick={e => this.props.uiActions.openModal('edit_radio')}>
-					<FontAwesome name="spotify" />&nbsp;
+					<FontAwesome name="podcast" />&nbsp;
 					Radio
 				</button>
+				<button onClick={e => this.props.uiActions.openModal('kiosk_mode')}>
+					<FontAwesome name="expand" />&nbsp;
+					Fullscreen
+				</button>
+				<button onClick={e => hashHistory.push(global.baseURL+'queue-history')}>
+					<FontAwesome name="history" />&nbsp;
+					History
+				</button>
 				<button onClick={e => this.props.mopidyActions.clearTracklist()}>
 					<FontAwesome name="trash" />&nbsp;
 					Clear
 				</button>
-				<button onClick={e => hashHistory.push(global.baseURL+'queue-history')}>
+				<button onClick={e => this.props.uiActions.openModal('add_to_queue', {})}>
-					<FontAwesome name="history" />&nbsp;
+					<FontAwesome name="plus" />&nbsp;
-					History
+					Add URI
 				</button>
 			</span>
 		)

src/js/views/Settings.js

@@ -164,10 +164,12 @@ class Settings extends React.Component{
 	render(){
 
 		var options = (
-			<button onClick={e => hashHistory.push(global.baseURL+'debug')}>
+			<span>
-				<FontAwesome name="flask" />&nbsp;
+				<button onClick={e => hashHistory.push(global.baseURL+'debug')}>
-				Debug
+					<FontAwesome name="flask" />&nbsp;
-			</button>
+					Debug
+				</button>
+			</span>
 		)
 
 		return (

src/js/views/User.js

@@ -72,7 +72,6 @@ class User extends React.Component{
 
 						<div className="actions">
 							<FollowButton className="secondary" uri={this.props.params.uri} addText="Follow" removeText="Unfollow" />
-							<ContextMenuTrigger onTrigger={e => this.handleContextMenu(e)} />
 						</div>
 					</div>
 					<div className="main">

src/scss/components/_context-menu.scss

@@ -131,8 +131,10 @@
 				}
 			}
 
-			.menu-item {
+			&:not(:first-child){
-				border-top: 1px solid lighten($dark_grey, 8%);
+				.menu-item {
+					border-top: 1px solid lighten($dark_grey, 8%);
+				}
 			}
 		}
 
@@ -152,7 +154,10 @@
 				text-transform: none;
 				font-weight: 300;
 				color: inherit;
-				border-top: 1px solid lighten($dark_grey, 8%);
+
+				&:not(:first-child){
+					border-top: 1px solid lighten($dark_grey, 8%);
+				}
 
 				.fa {
 					display: none;
@@ -179,16 +184,16 @@
 				.options {
 					display: block;
 					position: static;
-					background: lighten($dark_grey, 10%);
+					background: darken($dark_grey, 5%);
 
 					.option {
-						padding: 16px 20px 16px 50px;
+						padding: 12px 20px 12px 50px;
-						border-top: 1px solid lighten($dark_grey, 8%);
+						border-top: 1px solid $dark_grey;
 
 						.fa {
 							display: inline-block;
 							left: 25px;
-							top: 18px;
+							top: 14px;
 						}
 					}
 				}

src/scss/vendor/font-awesome/_icons.scss

@@ -605,6 +605,7 @@
 .#{$fa-css-prefix}-opencart:before { content: $fa-var-opencart; }
 .#{$fa-css-prefix}-expeditedssl:before { content: $fa-var-expeditedssl; }
 .#{$fa-css-prefix}-battery-4:before,
+.#{$fa-css-prefix}-battery:before,
 .#{$fa-css-prefix}-battery-full:before { content: $fa-var-battery-full; }
 .#{$fa-css-prefix}-battery-3:before,
 .#{$fa-css-prefix}-battery-three-quarters:before { content: $fa-var-battery-three-quarters; }
@@ -731,3 +732,58 @@
 .#{$fa-css-prefix}-google-plus-official:before { content: $fa-var-google-plus-official; }
 .#{$fa-css-prefix}-fa:before,
 .#{$fa-css-prefix}-font-awesome:before { content: $fa-var-font-awesome; }
+.#{$fa-css-prefix}-handshake-o:before { content: $fa-var-handshake-o; }
+.#{$fa-css-prefix}-envelope-open:before { content: $fa-var-envelope-open; }
+.#{$fa-css-prefix}-envelope-open-o:before { content: $fa-var-envelope-open-o; }
+.#{$fa-css-prefix}-linode:before { content: $fa-var-linode; }
+.#{$fa-css-prefix}-address-book:before { content: $fa-var-address-book; }
+.#{$fa-css-prefix}-address-book-o:before { content: $fa-var-address-book-o; }
+.#{$fa-css-prefix}-vcard:before,
+.#{$fa-css-prefix}-address-card:before { content: $fa-var-address-card; }
+.#{$fa-css-prefix}-vcard-o:before,
+.#{$fa-css-prefix}-address-card-o:before { content: $fa-var-address-card-o; }
+.#{$fa-css-prefix}-user-circle:before { content: $fa-var-user-circle; }
+.#{$fa-css-prefix}-user-circle-o:before { content: $fa-var-user-circle-o; }
+.#{$fa-css-prefix}-user-o:before { content: $fa-var-user-o; }
+.#{$fa-css-prefix}-id-badge:before { content: $fa-var-id-badge; }
+.#{$fa-css-prefix}-drivers-license:before,
+.#{$fa-css-prefix}-id-card:before { content: $fa-var-id-card; }
+.#{$fa-css-prefix}-drivers-license-o:before,
+.#{$fa-css-prefix}-id-card-o:before { content: $fa-var-id-card-o; }
+.#{$fa-css-prefix}-quora:before { content: $fa-var-quora; }
+.#{$fa-css-prefix}-free-code-camp:before { content: $fa-var-free-code-camp; }
+.#{$fa-css-prefix}-telegram:before { content: $fa-var-telegram; }
+.#{$fa-css-prefix}-thermometer-4:before,
+.#{$fa-css-prefix}-thermometer:before,
+.#{$fa-css-prefix}-thermometer-full:before { content: $fa-var-thermometer-full; }
+.#{$fa-css-prefix}-thermometer-3:before,
+.#{$fa-css-prefix}-thermometer-three-quarters:before { content: $fa-var-thermometer-three-quarters; }
+.#{$fa-css-prefix}-thermometer-2:before,
+.#{$fa-css-prefix}-thermometer-half:before { content: $fa-var-thermometer-half; }
+.#{$fa-css-prefix}-thermometer-1:before,
+.#{$fa-css-prefix}-thermometer-quarter:before { content: $fa-var-thermometer-quarter; }
+.#{$fa-css-prefix}-thermometer-0:before,
+.#{$fa-css-prefix}-thermometer-empty:before { content: $fa-var-thermometer-empty; }
+.#{$fa-css-prefix}-shower:before { content: $fa-var-shower; }
+.#{$fa-css-prefix}-bathtub:before,
+.#{$fa-css-prefix}-s15:before,
+.#{$fa-css-prefix}-bath:before { content: $fa-var-bath; }
+.#{$fa-css-prefix}-podcast:before { content: $fa-var-podcast; }
+.#{$fa-css-prefix}-window-maximize:before { content: $fa-var-window-maximize; }
+.#{$fa-css-prefix}-window-minimize:before { content: $fa-var-window-minimize; }
+.#{$fa-css-prefix}-window-restore:before { content: $fa-var-window-restore; }
+.#{$fa-css-prefix}-times-rectangle:before,
+.#{$fa-css-prefix}-window-close:before { content: $fa-var-window-close; }
+.#{$fa-css-prefix}-times-rectangle-o:before,
+.#{$fa-css-prefix}-window-close-o:before { content: $fa-var-window-close-o; }
+.#{$fa-css-prefix}-bandcamp:before { content: $fa-var-bandcamp; }
+.#{$fa-css-prefix}-grav:before { content: $fa-var-grav; }
+.#{$fa-css-prefix}-etsy:before { content: $fa-var-etsy; }
+.#{$fa-css-prefix}-imdb:before { content: $fa-var-imdb; }
+.#{$fa-css-prefix}-ravelry:before { content: $fa-var-ravelry; }
+.#{$fa-css-prefix}-eercast:before { content: $fa-var-eercast; }
+.#{$fa-css-prefix}-microchip:before { content: $fa-var-microchip; }
+.#{$fa-css-prefix}-snowflake-o:before { content: $fa-var-snowflake-o; }
+.#{$fa-css-prefix}-superpowers:before { content: $fa-var-superpowers; }
+.#{$fa-css-prefix}-wpexplorer:before { content: $fa-var-wpexplorer; }
+.#{$fa-css-prefix}-meetup:before { content: $fa-var-meetup; }

src/scss/vendor/font-awesome/_index.scss

@@ -1,5 +1,5 @@
 /*!
- *  Font Awesome 4.6.3 by @davegandy - http://fontawesome.io - @fontawesome
+ *  Font Awesome 4.7.0 by @davegandy - http://fontawesome.io - @fontawesome
  *  License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License)
  */
 

src/scss/vendor/font-awesome/_variables.scss

@@ -4,14 +4,18 @@
 $fa-font-path:        "../assets/fonts" !default;
 $fa-font-size-base:   14px !default;
 $fa-line-height-base: 1 !default;
-//$fa-font-path:        "//netdna.bootstrapcdn.com/font-awesome/4.6.3/fonts" !default; // for referencing Bootstrap CDN font files directly
+//$fa-font-path:        "//netdna.bootstrapcdn.com/font-awesome/4.7.0/fonts" !default; // for referencing Bootstrap CDN font files directly
 $fa-css-prefix:       fa !default;
-$fa-version:          "4.6.3" !default;
+$fa-version:          "4.7.0" !default;
 $fa-border-color:     #eee !default;
 $fa-inverse:          #fff !default;
 $fa-li-width:         (30em / 14) !default;
 
 $fa-var-500px: "\f26e";
+$fa-var-address-book: "\f2b9";
+$fa-var-address-book-o: "\f2ba";
+$fa-var-address-card: "\f2bb";
+$fa-var-address-card-o: "\f2bc";
 $fa-var-adjust: "\f042";
 $fa-var-adn: "\f170";
 $fa-var-align-center: "\f037";
@@ -60,11 +64,15 @@ $fa-var-automobile: "\f1b9";
 $fa-var-backward: "\f04a";
 $fa-var-balance-scale: "\f24e";
 $fa-var-ban: "\f05e";
+$fa-var-bandcamp: "\f2d5";
 $fa-var-bank: "\f19c";
 $fa-var-bar-chart: "\f080";
 $fa-var-bar-chart-o: "\f080";
 $fa-var-barcode: "\f02a";
 $fa-var-bars: "\f0c9";
+$fa-var-bath: "\f2cd";
+$fa-var-bathtub: "\f2cd";
+$fa-var-battery: "\f240";
 $fa-var-battery-0: "\f244";
 $fa-var-battery-1: "\f243";
 $fa-var-battery-2: "\f242";
@@ -214,19 +222,25 @@ $fa-var-dollar: "\f155";
 $fa-var-dot-circle-o: "\f192";
 $fa-var-download: "\f019";
 $fa-var-dribbble: "\f17d";
+$fa-var-drivers-license: "\f2c2";
+$fa-var-drivers-license-o: "\f2c3";
 $fa-var-dropbox: "\f16b";
 $fa-var-drupal: "\f1a9";
 $fa-var-edge: "\f282";
 $fa-var-edit: "\f044";
+$fa-var-eercast: "\f2da";
 $fa-var-eject: "\f052";
 $fa-var-ellipsis-h: "\f141";
 $fa-var-ellipsis-v: "\f142";
 $fa-var-empire: "\f1d1";
 $fa-var-envelope: "\f0e0";
 $fa-var-envelope-o: "\f003";
+$fa-var-envelope-open: "\f2b6";
+$fa-var-envelope-open-o: "\f2b7";
 $fa-var-envelope-square: "\f199";
 $fa-var-envira: "\f299";
 $fa-var-eraser: "\f12d";
+$fa-var-etsy: "\f2d7";
 $fa-var-eur: "\f153";
 $fa-var-euro: "\f153";
 $fa-var-exchange: "\f0ec";
@@ -294,6 +308,7 @@ $fa-var-fort-awesome: "\f286";
 $fa-var-forumbee: "\f211";
 $fa-var-forward: "\f04e";
 $fa-var-foursquare: "\f180";
+$fa-var-free-code-camp: "\f2c5";
 $fa-var-frown-o: "\f119";
 $fa-var-futbol-o: "\f1e3";
 $fa-var-gamepad: "\f11b";
@@ -326,6 +341,7 @@ $fa-var-google-plus-square: "\f0d4";
 $fa-var-google-wallet: "\f1ee";
 $fa-var-graduation-cap: "\f19d";
 $fa-var-gratipay: "\f184";
+$fa-var-grav: "\f2d6";
 $fa-var-group: "\f0c0";
 $fa-var-h-square: "\f0fd";
 $fa-var-hacker-news: "\f1d4";
@@ -342,6 +358,7 @@ $fa-var-hand-rock-o: "\f255";
 $fa-var-hand-scissors-o: "\f257";
 $fa-var-hand-spock-o: "\f259";
 $fa-var-hand-stop-o: "\f256";
+$fa-var-handshake-o: "\f2b5";
 $fa-var-hard-of-hearing: "\f2a4";
 $fa-var-hashtag: "\f292";
 $fa-var-hdd-o: "\f0a0";
@@ -365,8 +382,12 @@ $fa-var-hourglass-start: "\f251";
 $fa-var-houzz: "\f27c";
 $fa-var-html5: "\f13b";
 $fa-var-i-cursor: "\f246";
+$fa-var-id-badge: "\f2c1";
+$fa-var-id-card: "\f2c2";
+$fa-var-id-card-o: "\f2c3";
 $fa-var-ils: "\f20b";
 $fa-var-image: "\f03e";
+$fa-var-imdb: "\f2d8";
 $fa-var-inbox: "\f01c";
 $fa-var-indent: "\f03c";
 $fa-var-industry: "\f275";
@@ -404,6 +425,7 @@ $fa-var-line-chart: "\f201";
 $fa-var-link: "\f0c1";
 $fa-var-linkedin: "\f0e1";
 $fa-var-linkedin-square: "\f08c";
+$fa-var-linode: "\f2b8";
 $fa-var-linux: "\f17c";
 $fa-var-list: "\f03a";
 $fa-var-list-alt: "\f022";
@@ -436,8 +458,10 @@ $fa-var-maxcdn: "\f136";
 $fa-var-meanpath: "\f20c";
 $fa-var-medium: "\f23a";
 $fa-var-medkit: "\f0fa";
+$fa-var-meetup: "\f2e0";
 $fa-var-meh-o: "\f11a";
 $fa-var-mercury: "\f223";
+$fa-var-microchip: "\f2db";
 $fa-var-microphone: "\f130";
 $fa-var-microphone-slash: "\f131";
 $fa-var-minus: "\f068";
@@ -502,6 +526,7 @@ $fa-var-plus: "\f067";
 $fa-var-plus-circle: "\f055";
 $fa-var-plus-square: "\f0fe";
 $fa-var-plus-square-o: "\f196";
+$fa-var-podcast: "\f2ce";
 $fa-var-power-off: "\f011";
 $fa-var-print: "\f02f";
 $fa-var-product-hunt: "\f288";
@@ -511,10 +536,12 @@ $fa-var-qrcode: "\f029";
 $fa-var-question: "\f128";
 $fa-var-question-circle: "\f059";
 $fa-var-question-circle-o: "\f29c";
+$fa-var-quora: "\f2c4";
 $fa-var-quote-left: "\f10d";
 $fa-var-quote-right: "\f10e";
 $fa-var-ra: "\f1d0";
 $fa-var-random: "\f074";
+$fa-var-ravelry: "\f2d9";
 $fa-var-rebel: "\f1d0";
 $fa-var-recycle: "\f1b8";
 $fa-var-reddit: "\f1a1";
@@ -541,6 +568,7 @@ $fa-var-rss-square: "\f143";
 $fa-var-rub: "\f158";
 $fa-var-ruble: "\f158";
 $fa-var-rupee: "\f156";
+$fa-var-s15: "\f2cd";
 $fa-var-safari: "\f267";
 $fa-var-save: "\f0c7";
 $fa-var-scissors: "\f0c4";
@@ -565,6 +593,7 @@ $fa-var-shirtsinbulk: "\f214";
 $fa-var-shopping-bag: "\f290";
 $fa-var-shopping-basket: "\f291";
 $fa-var-shopping-cart: "\f07a";
+$fa-var-shower: "\f2cc";
 $fa-var-sign-in: "\f090";
 $fa-var-sign-language: "\f2a7";
 $fa-var-sign-out: "\f08b";
@@ -581,6 +610,7 @@ $fa-var-smile-o: "\f118";
 $fa-var-snapchat: "\f2ab";
 $fa-var-snapchat-ghost: "\f2ac";
 $fa-var-snapchat-square: "\f2ad";
+$fa-var-snowflake-o: "\f2dc";
 $fa-var-soccer-ball-o: "\f1e3";
 $fa-var-sort: "\f0dc";
 $fa-var-sort-alpha-asc: "\f15d";
@@ -626,6 +656,7 @@ $fa-var-subscript: "\f12c";
 $fa-var-subway: "\f239";
 $fa-var-suitcase: "\f0f2";
 $fa-var-sun-o: "\f185";
+$fa-var-superpowers: "\f2dd";
 $fa-var-superscript: "\f12b";
 $fa-var-support: "\f1cd";
 $fa-var-table: "\f0ce";
@@ -635,6 +666,7 @@ $fa-var-tag: "\f02b";
 $fa-var-tags: "\f02c";
 $fa-var-tasks: "\f0ae";
 $fa-var-taxi: "\f1ba";
+$fa-var-telegram: "\f2c6";
 $fa-var-television: "\f26c";
 $fa-var-tencent-weibo: "\f1d5";
 $fa-var-terminal: "\f120";
@@ -644,6 +676,17 @@ $fa-var-th: "\f00a";
 $fa-var-th-large: "\f009";
 $fa-var-th-list: "\f00b";
 $fa-var-themeisle: "\f2b2";
+$fa-var-thermometer: "\f2c7";
+$fa-var-thermometer-0: "\f2cb";
+$fa-var-thermometer-1: "\f2ca";
+$fa-var-thermometer-2: "\f2c9";
+$fa-var-thermometer-3: "\f2c8";
+$fa-var-thermometer-4: "\f2c7";
+$fa-var-thermometer-empty: "\f2cb";
+$fa-var-thermometer-full: "\f2c7";
+$fa-var-thermometer-half: "\f2c9";
+$fa-var-thermometer-quarter: "\f2ca";
+$fa-var-thermometer-three-quarters: "\f2c8";
 $fa-var-thumb-tack: "\f08d";
 $fa-var-thumbs-down: "\f165";
 $fa-var-thumbs-o-down: "\f088";
@@ -653,6 +696,8 @@ $fa-var-ticket: "\f145";
 $fa-var-times: "\f00d";
 $fa-var-times-circle: "\f057";
 $fa-var-times-circle-o: "\f05c";
+$fa-var-times-rectangle: "\f2d3";
+$fa-var-times-rectangle-o: "\f2d4";
 $fa-var-tint: "\f043";
 $fa-var-toggle-down: "\f150";
 $fa-var-toggle-left: "\f191";
@@ -693,11 +738,16 @@ $fa-var-upload: "\f093";
 $fa-var-usb: "\f287";
 $fa-var-usd: "\f155";
 $fa-var-user: "\f007";
+$fa-var-user-circle: "\f2bd";
+$fa-var-user-circle-o: "\f2be";
 $fa-var-user-md: "\f0f0";
+$fa-var-user-o: "\f2c0";
 $fa-var-user-plus: "\f234";
 $fa-var-user-secret: "\f21b";
 $fa-var-user-times: "\f235";
 $fa-var-users: "\f0c0";
+$fa-var-vcard: "\f2bb";
+$fa-var-vcard-o: "\f2bc";
 $fa-var-venus: "\f221";
 $fa-var-venus-double: "\f226";
 $fa-var-venus-mars: "\f228";
@@ -722,10 +772,16 @@ $fa-var-wheelchair: "\f193";
 $fa-var-wheelchair-alt: "\f29b";
 $fa-var-wifi: "\f1eb";
 $fa-var-wikipedia-w: "\f266";
+$fa-var-window-close: "\f2d3";
+$fa-var-window-close-o: "\f2d4";
+$fa-var-window-maximize: "\f2d0";
+$fa-var-window-minimize: "\f2d1";
+$fa-var-window-restore: "\f2d2";
 $fa-var-windows: "\f17a";
 $fa-var-won: "\f159";
 $fa-var-wordpress: "\f19a";
 $fa-var-wpbeginner: "\f297";
+$fa-var-wpexplorer: "\f2de";
 $fa-var-wpforms: "\f298";
 $fa-var-wrench: "\f0ad";
 $fa-var-xing: "\f168";

src/scss/views/_settings.scss

@@ -9,7 +9,7 @@
 			position: relative;
 			display: inline-block;
 			padding: 0 0 0 45px;
-			margin-right: 20px;
+			margin: 0 20px 10px 0;
 			min-width: 80px;
 
 			.icon {

webpack.config.js

@@ -1,57 +1,74 @@
 
-var dev = process.env.NODE_ENV !== "production";
+const isDev = process.env.NODE_ENV !== "production";
-var webpack = require('webpack');
+const path = require('path');
-var ExtractTextPlugin = require('extract-text-webpack-plugin');
+const webpack = require('webpack');
+const ExtractTextPlugin = require('extract-text-webpack-plugin');
 
-var node_dir = __dirname + '/node_modules';
+const node_dir = path.resolve(__dirname, 'node_modules');
-var output_dir = __dirname +"/mopidy_iris/static"
+const output_dir = path.resolve(__dirname, 'mopidy_iris/static');
 
-var config = {
+const config = {
 	
-	context: __dirname,
+	context: path.resolve(__dirname),
-	entry: "./src/js/index.js",
+
+	entry: {
+		js: './src/js/index'
+	},
 	
 	output: {
-		path: output_dir,
+		path: path.resolve(__dirname, 'mopidy_iris/static'),
 		filename: 'app.js'
 	},
 	
 	module: {
-		loaders: [
+		rules: [
 			{
-				test: require.resolve('jquery'), loader: 'expose?jQuery!expose?$'
+				test: require.resolve('jquery'),
+        		exclude: [
+        			/node_modules/
+        		],
+				use: 'expose-loader?jQuery!expose?$'
 			},
 			{
-				// loading JSX (aka Babel) into browser-friendly ES6
+				// JSX
 				test: /\.js$/,
 				exclude: [
-					/(node_modules|bower_components)/,
+        			/node_modules/,
 					'index.js',
 				],
-				loader: 'babel-loader',
+				use: {
-				query: {
+					loader: 'babel-loader',
-					presets: ['es2015', 'react', 'stage-2']
+					options: {
+						presets: [
+							'react',
+							'es2015',
+							'stage-2'
+						]
+					}
 				}
 			},
 			{
-				// loading sass asset files
 				test: /\.scss$/,
-				loader: ExtractTextPlugin.extract([
+				use: ExtractTextPlugin.extract({
-					'css'+(dev? '?sourceMap=true': ''),
+					fallback: 'style-loader',
-					'sass'+(dev? '?outputStyle=expanded&sourceMap=true&sourceMapContents=true': '')
+					//resolve-url-loader may be chained before sass-loader if necessary
-				])
+					use: ['css-loader', 'sass-loader']
+				})
 			},
 			{
 				// load external resources (ie Google fonts)
 				test: /.(gif|png|woff(2)?|eot|ttf|svg)(\?[a-z0-9=\.]+)?$/,
-				loader: 'url-loader?limit=100000'
+				use: { 
+					loader: 'url-loader',
+					options: {
+						'limit': 100000
+					}
+				}
 			}
 		]
 	},
 	
 	plugins: [
-		new webpack.optimize.DedupePlugin(),
-		new webpack.optimize.OccurenceOrderPlugin(),
 		new webpack.ProvidePlugin({
 		    $: "jquery",
 		    jQuery: "jquery",
@@ -63,7 +80,7 @@ var config = {
 /**
  * Development-only configuration values
  **/
-if( dev ){
+if (isDev){
 	
 	// set compiled css location
 	config.plugins.push( new ExtractTextPlugin("app.css") );
@@ -75,7 +92,7 @@ if( dev ){
 /**
  * Production-only configuration values
  **/
-}else{
+} else {
 	
 	// set our final output filename
 	config.output.filename = 'app.min.js';
@@ -90,10 +107,15 @@ if( dev ){
 	);
 	
 	// remove all debug and console code
-	config.module.loaders.push(
+	config.module.rules.push(
 		{ 
-			test: /\.(js|jsx)$/,
+			test: /\.(js)$/,
-			loader: "webpack-strip?strip[]=console.log,strip[]=console.info,strip[]=debug"
+			use: {
+				loader: 'webpack-strip',
+				options: {
+					strip: ['console.log', 'console.info', 'debug']
+				}
+			}
 		}
 	);