Added 'play now' button to top charts (nukeop#215)

* added 'play now' button to top charts * added 'play button' to top charts * fixed issues with pull request!
siweiwei2015 · Jan 28, 2019 · dfcb667 · dfcb667
1 parent db40658
commit dfcb667
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 2 deletions.
diff --git a/app/components/ArtistView/PopularTracks/index.js b/app/components/ArtistView/PopularTracks/index.js
@@ -2,7 +2,6 @@ import React from 'react';
 import FontAwesome from 'react-fontawesome';
 import numeral from 'numeral';
 import artPlaceholder from '../../../../resources/media/art_placeholder.png';
-
 import ContextPopup from '../../ContextPopup';
 
 import styles from './styles.scss';

diff --git a/app/components/Dashboard/ChartsTab/index.js b/app/components/Dashboard/ChartsTab/index.js
@@ -5,6 +5,8 @@ import numeral from 'numeral';
 import FontAwesome from 'react-fontawesome';
 import ContextPopup from '../../ContextPopup';
 
+
+
 import styles from './styles.scss';
 
 class ChartsTab extends React.Component {
@@ -51,6 +53,25 @@ class ChartsTab extends React.Component {
         >
           <FontAwesome name='plus' /> Add to queue
         </a>
+        <a
+          href='#'
+          className='add_button'
+          onClick={() => {
+            this.props.clearQueue();
+            addToQueue(musicSources, {
+              artist: track.artist.name,
+              name: track.name,
+              thumbnail: track.image[1]['#text']
+            });
+            this.props.selectSong(0);
+            this.props.startPlayback();
+            this.props.startPlayback();
+
+          }}
+          aria-label='Play Song Right Now'
+        >
+          <FontAwesome name='play' /> Play now
+        </a>
       </ContextPopup>
     );
   }

diff --git a/app/components/Dashboard/index.js b/app/components/Dashboard/index.js
@@ -25,6 +25,9 @@ class Dashboard extends React.Component {
           <ChartsTab
             topTracks={this.props.dashboardData.topTracks}
             addToQueue={this.props.addToQueue}
+            selectSong={this.props.selectSong}
+            clearQueue={this.props.clearQueue}
+            startPlayback={this.props.startPlayback}
             musicSources={this.props.musicSources}
           />
         )

diff --git a/app/containers/DashboardContainer/index.js b/app/containers/DashboardContainer/index.js
@@ -4,6 +4,8 @@ import { bindActionCreators } from 'redux';
 import * as Actions from '../../actions';
 import * as DashboardActions from '../../actions/dashboard';
 import * as QueueActions from '../../actions/queue';
+import * as PlayerActions from '../../actions/player';
+
 
 import Dashboard from '../../components/Dashboard';
 
@@ -24,6 +26,9 @@ class DashboardContainer extends React.Component {
         history={history}
         addToQueue={actions.addToQueue}
         musicSources={this.props.musicSources}
+        startPlayback={actions.startPlayback}
+        clearQueue={actions.clearQueue}
+        selectSong={actions.selectSong}
       />
     );
   }
@@ -39,7 +44,7 @@ function mapStateToProps(state) {
 function mapDispatchToProps(dispatch) {
   return {
     actions: bindActionCreators(
-      Object.assign({}, Actions, DashboardActions, QueueActions),
+      Object.assign({}, Actions, DashboardActions, QueueActions, PlayerActions),
       dispatch
     )
   };