update webpack, fix soundcloud, remove tests, remove sass, update npm…

… scripts

.babelrc

@@ -1,3 +1,3 @@
 {
-  "presets": ["airbnb", "es2015", "stage-0"]
+  "presets": ["airbnb", "es2015", "stage-0", "react"]
 }

.gitignore

@@ -1,3 +1,3 @@
-node_modules/
 npm-debug.log
-app/bundle/
+node_modules/
+src/bundle/

app/bootstrap.js → bootstrap.js

@@ -1,2 +1,2 @@
 require('babel-register');
-require('./index');
+require('./src/index');

package.json

@@ -1,16 +1,17 @@
 {
   "name": "catz",
   "version": "0.1.0",
+  "homepage": "https://catz.io",
   "repository": {
     "type": "git",
     "url": "git://github.com/cadejscroggins/catz.git"
   },
+  "main": "bootstrap.js",
   "scripts": {
-    "start": "concurrently --kill-others \"webpack --config webpack.config.dev.js --watch\" \"electron .\"",
-    "test": "mocha -t 100000000 --require babel-core/register --require babel-polyfill test/**/*.jsx",
-    "build": "cross-env NODE_ENV=production webpack --config webpack.config.prod.js --progress --profile --colors",
-    "electron": "cross-env NODE_ENV=production electron .",
-    "release": "gh-release"
+    "watch": "webpack --env.dev --watch",
+    "build": "webpack --env.prod",
+    "electron": "electron .",
+    "start": "concurrently -rk \"npm run watch\" \"npm run electron\""
   },
   "devDependencies": {
     "babel-core": "^6.18.2",
@@ -21,22 +22,15 @@
     "babel-preset-react": "^6.16.0",
     "babel-preset-stage-0": "^6.16.0",
     "babel-register": "^6.18.0",
-    "chai": "^3.5.0",
     "concurrently": "^3.1.0",
-    "cross-env": "^3.1.3",
-    "css-loader": "^0.25.0",
-    "electron": "^1.4.6",
-    "enzyme": "^2.6.0",
+    "css-loader": "^0.26.1",
+    "electron": "^1.4.11",
     "gh-release": "^2.1.0",
-    "mocha": "^3.1.2",
-    "node-sass": "^3.11.2",
     "react-addons-test-utils": "^15.3.2",
-    "sass-lint": "^1.10.2",
-    "sass-loader": "^4.0.2",
-    "sasslint-webpack-plugin": "^1.0.4",
     "style-loader": "^0.13.1",
-    "webpack": "^1.13.3",
-    "webpack-livereload-plugin": "^0.9.0"
+    "webpack": "^2.1.0-beta.27",
+    "webpack-livereload-plugin": "^0.9.0",
+    "webpack2-externals-plugin": "^1.0.0"
   },
   "dependencies": {
     "browser-id3-writer": "^2.3.1",
@@ -52,8 +46,9 @@
     "react-dom": "^15.3.2",
     "read-chunk": "^2.0.0",
     "request": "^2.78.0",
-    "request-progress": "^2.0.1",
-    "sanitize-filename": "^1.6.1"
+    "request-progress": "^3.0.0",
+    "sanitize-filename": "^1.6.1",
+    "soundcloud-resolve": "^1.0.2"
   },
   "license": "MIT",
   "private": true

app/scss/_main.scss → src/app/Main.css

@@ -1,18 +1,16 @@
-@import 'variables';
-
 .instructions {
   position: absolute;
   top: 50%;
   left: 50%;
   margin: 0;
   transform: translate(-50%, -50%);
   transition: opacity 1s;
-  color: $gray-dark;
+  color: #555;
   font-size: 1.2rem;
   text-align: center;
+}
 
-  &[data-toggled='false'] {
-    opacity: 0;
-    z-index: -10;
-  }
+.instructions[data-toggled='false'] {
+  opacity: 0;
+  z-index: -10;
 }

app/js/Main.jsx → src/app/Main.jsx

@@ -1,7 +1,8 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import _ from 'lodash';
-import Media from './Media.jsx';
+import Media from 'Media.jsx';
+import 'Main.css';
 
 export default class Main extends React.Component {
   constructor() {

app/scss/_media.scss → src/app/Media.css

@@ -1,5 +1,3 @@
-@import 'variables';
-
 .media {
   margin: 10px;
 }

app/js/Media.jsx → src/app/Media.jsx

@@ -1,8 +1,9 @@
 import React from 'react';
 import url from 'url';
-import MediaInfo from './MediaInfo.jsx';
-import EightTracks from './supported-sites/EightTracks.jsx';
-import SoundCloud from './supported-sites/SoundCloud.jsx';
+import MediaInfo from 'MediaInfo.jsx';
+import EightTracks from 'supported-sites/EightTracks.jsx';
+import SoundCloud from 'supported-sites/SoundCloud.jsx';
+import 'Media.css';
 
 export default class Media extends React.Component {
   componentDidMount() {

src/app/MediaInfo.css

@@ -0,0 +1,35 @@
+.media-info {
+  width: 100%;
+  padding: 10px;
+  font-size: .8rem;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+.media-info__title {
+  color: #777;
+}
+
+.media-info__tag {
+  margin-right: 10px;
+  padding: 2px 4px;
+  border-radius: 3px;
+  color: #fff;
+}
+
+.media-info__tag.type-nonsense {
+  background-color: #000;
+}
+
+.media-info__tag.type-8tracks {
+  background-color: #2f364a;
+}
+
+.media-info__tag.type-sound-cloud {
+  background-color: #f50;
+}
+
+.media-info__tag.error {
+  background-color: #d12f3e;;
+}

app/js/MediaInfo.jsx → src/app/MediaInfo.jsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import 'MediaInfo.css';
 
 export default function MediaInfo(props) {
   const camelCaseToDashed = (str) => {

app/scss/_song.scss → src/app/Song.css

@@ -1,12 +1,10 @@
-@import 'variables';
-
 .song {
   display: flex;
   position: relative;
   margin: 0 10px;
   padding: 0;
   transition: box-shadow 1s linear;
-  border-bottom: solid 1px $white-dark;
+  border-bottom: solid 1px #f0f0f0;
   font-size: .8rem;
   line-height: 50px;
   white-space: nowrap;
@@ -18,27 +16,27 @@
   left: 0;
   height: 1px;
   transition: width 1s linear, opacity 3s;
-  background-color: $gray-dark;
+  background-color: #555;
   z-index: 100;
+}
 
-  &[data-toggled='false'] {
-    opacity: 0;
-  }
+.song__progress[data-toggled='false'] {
+  opacity: 0;
 }
 
 .song__artwork {
   flex-shrink: 0;
   width: 30px;
   height: 30px;
   margin: 10px 0;
-  border: solid 1px $white-dark;
+  border: solid 1px #f0f0f0;
   border-radius: 3px;
   vertical-align: middle;
 }
 
 .song__num {
   margin: 0 5px 0 15px;
-  color: $gray;
+  color: #777;
 }
 
 .song__title {
@@ -47,7 +45,7 @@
 
 .song__artist {
   flex-grow: 1;
-  color: $gray;
+  color: #777;
 }
 
 .song__title,
@@ -65,19 +63,19 @@
   border: 0;
   border-radius: 0;
   background-color: transparent;
-  color: $gray-dark;
+  color: #777;
   font-size: .6rem;
   line-height: 35px;
   text-decoration: underline;
   cursor: pointer;
   opacity: 0;
   vertical-align: top;
+}
 
-  &:focus {
-    outline: none;
-  }
+.song__show:focus {
+  outline: none;
+}
 
-  &[data-toggled='true'] {
-    opacity: 1;
-  }
+.song__show[data-toggled='true'] {
+  opacity: 1;
 }

app/js/media-types/Song.jsx → src/app/Song.jsx

@@ -13,6 +13,7 @@ import ID3Writer from 'browser-id3-writer';
 import open from 'open';
 import sanitize from 'sanitize-filename';
 import leftPad from 'left-pad';
+import 'Song.css';
 
 export default class Song extends React.Component {
   constructor() {
@@ -39,7 +40,7 @@ export default class Song extends React.Component {
       const tmpSong = `${osTmpdir()}/${md5(this.props.url)}`;
 
       progress(request(this.props.url))
-        .on('progress', p => this.setState({ percentage: p.percentage * 100 }))
+        .on('progress', p => this.setState({ percentage: p.percent * 100 }))
         .on('error', error => reject(error))
         .on('end', () => {
           this.setState({ percentage: 100 });

app/scss/_timer.scss → src/app/Timer.css

@@ -1,8 +1,6 @@
-@import 'variables';
-
 .timer {
   padding: 15px;
-  color: $color-error;
+  color: #d12f3e;
   font-size: .8rem;
   text-align: center;
 }

app/js/Timer.jsx → src/app/Timer.jsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import prettySeconds from 'pretty-seconds';
+import 'Timer.css';
 
 export default class Timer extends React.Component {
   constructor() {