Last.fm scrobbling framework and connecting

app/App.js

@@ -57,7 +57,7 @@ class App extends React.Component {
               <div style={{textAlign: "center"}}>
                 <img
                   width="150px"
-                  src="./resources/media/nuclear/logo_full_light.png"
+                  src="./resources/media/logo_full_light.png"
                 />
                 <div className={styles.version_string}>Version 0.4.0</div>
               </div>

app/actions/player.js

@@ -5,7 +5,6 @@ export const PAUSE_PLAYBACK = 'PAUSE_PLAYBACK';
 export const UPDATE_PLAYBACK_PROGRESS = 'UPDATE_PLAYBACK_PROGRESS';
 
 export function togglePlayback(currentState) {
-  console.log(currentState);
   return dispatch => {
     if (currentState == Sound.status.PLAYING) {
       dispatch(pausePlayback());

app/actions/scrobbling.js

@@ -0,0 +1,24 @@
+import { lastfmLoginConnect } from '../rest/Lastfm';
+import globals from '../globals';
+const electron = window.require('electron');
+
+export const LASTFM_CONNECT = 'LASTFM_CONNECT';
+
+export function lastFmConnect() {
+  return dispatch => {
+    lastfmLoginConnect()
+    .then(response => response.json())
+    .then(response => {
+      let authToken = response.token;
+      electron.shell.openExternal(
+        'http://www.last.fm/api/auth/?api_key=' + globals.lastfmApiKey + '&token=' + authToken
+      );
+      console.log(authToken);
+    });
+
+    dispatch({
+      type: LASTFM_CONNECT,
+      payload: null
+    });
+  };
+}

app/app.global.scss

@@ -93,6 +93,13 @@ a {
   }
 }
 
+.ui.red.button,
+.ui.red.button:hover,
+.ui.red.button:focus,
+.ui.red.button:active {
+  background-color: $red;
+}
+
 hr {
   border: 1px solid $background2;
 }

app/components/Settings/index.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import FontAwesome from 'react-fontawesome';
-import {Radio} from 'semantic-ui-react';
+import { Button, Radio } from 'semantic-ui-react';
 
 import Header from '../Header';
 import Spacer from '../Spacer';
@@ -28,6 +28,11 @@ class Settings extends React.Component {
             </label>
           </div>
 
+          <div className={styles.settings_item}>
+            <span>User: <strong>Not logged in</strong></span>
+            <Spacer />
+            <Button onClick={this.props.lastFmConnect} color='red'>Connect with Last.fm</Button>
+          </div>
 
           <div className={styles.settings_item}>
             <label>Enable scrobbling to last.fm</label>

app/components/Settings/styles.scss

@@ -20,6 +20,11 @@
     flex-flow: row;
     align-items: baseline;
     justify-content: left;
+    margin: 2rem 0;
+
+    button {
+
+    }
 
     label {
       flex: 1 1 auto;

app/components/VolumeControls/styles.scss

@@ -5,7 +5,7 @@
   height: 100%;
   margin: 1rem;
 
-  flex: 0 0 33%;
+  flex: 1 1 33%;
   flex-flow: row;
   align-items: center;
   justify-content: flex-end;

app/containers/SettingsContainer/index.js

@@ -1,29 +1,29 @@
 import React from 'react';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
-import * as Actions from '../../actions';
+import * as ScrobblingActions from '../../actions/scrobbling';
 
 import Settings from '../../components/Settings';
 
 class SettingsContainer extends React.Component {
   render() {
     return (
       <Settings
-
+        lastFmConnect={this.props.actions.lastFmConnect}
       />
     );
   }
 }
 
 function mapStateToProps(state) {
   return {
-
+    scrobbling: state.scrobbling
   }
 }
 
 function mapDispatchToProps(dispatch) {
   return {
-    actions: bindActionCreators(Actions, dispatch)
+    actions: bindActionCreators(ScrobblingActions, dispatch)
   };
 }
 

app/globals.js

@@ -1,3 +1,5 @@
 module.exports = {
-  ytApiKey: "AIzaSyCIM4EzNqi1in22f4Z3Ru3iYvLaY8tc3bo"
+  ytApiKey: "AIzaSyCIM4EzNqi1in22f4Z3Ru3iYvLaY8tc3bo",
+  lastfmApiKey: "2b75dcb291e2b0c9a2c994aca522ac14",
+  lastfmApiSecret: "2ee49e35f08b837d43b2824198171fc8"
 };

app/plugins/MusicSources/YoutubePlugin.js

@@ -21,7 +21,6 @@ class YoutubePlugin extends MusicSourcePlugin {
     })
     .then(videoInfo => {
       let formatInfo = _.head(videoInfo.formats.filter(e => e.itag=='140'));
-      console.log(videoInfo);
       return {stream: formatInfo.url, duration: videoInfo.length_seconds};
     });
   }

app/reducers/index.js

@@ -3,13 +3,15 @@ import { combineReducers } from 'redux';
 import PlayerReducer from './player';
 import PluginsReducer from './plugins';
 import QueueReducer from './queue';
+import ScrobblingReducer from './scrobbling';
 import SearchReducer from './search';
 
 const rootReducer = combineReducers({
   search: SearchReducer,
   queue: QueueReducer,
   plugin: PluginsReducer,
-  player: PlayerReducer
+  player: PlayerReducer,
+  scrobbling: ScrobblingReducer
 });
 
 export default rootReducer;

app/reducers/scrobbling.js

@@ -0,0 +1,15 @@
+import {
+  LASTFM_CONNECT
+} from '../actions/scrobbling';
+
+const initialState = {
+  lastFmName: null,
+  lastFmSessionKey: null
+};
+
+export default function ScrobblingReducer(state=initialState, action) {
+  switch(action.type) {
+    default:
+      return state;
+  }
+}

app/rest/Lastfm.js

@@ -0,0 +1,27 @@
+import globals from '../globals';
+
+const apiUrl = 'http://www.last.fm/api/';
+const scrobblingApiUrl = 'http://ws.audioscrobbler.com/2.0/';
+
+function sign(url) {
+  var tokens = decodeURIComponent((url.split('?')[1].split('&').sort().join()).replace(/,/g, '').replace(/=/g,''));
+
+  return require('md5')(tokens+globals.lastfmApiSecret);
+}
+
+function prepareUrl(url) {
+  var withApiKey = `${url}&api_key=${globals.lastfmApiKey}`;
+  return `${withApiKey}&api_sig=${sign(withApiKey)}` ;
+}
+
+function addApiKey(url) {
+  return `${url}&api_key=${globals.lastfmApiKey}`;
+}
+
+function lastfmLoginConnect() {
+  return fetch(prepareUrl(scrobblingApiUrl + '?method=auth.getToken&format=json'));
+}
+
+module.exports = {
+  lastfmLoginConnect
+};

package.json

@@ -27,6 +27,7 @@
   "dependencies": {
     "dbus": "^1.0.0",
     "font-awesome": "^4.7.0",
+    "md5": "^2.2.1",
     "mpris-service": "^1.1.3",
     "react": "^15.5.4",
     "react-dom": "^15.5.4",