From 1045b702594a389fe61b6aff4bcf7cdd99a4a6d7 Mon Sep 17 00:00:00 2001
From: Keith Scheiwiller <keith.scheiwiller@panopta.com>
Date: Mon, 8 Oct 2018 17:02:44 -0500
Subject: [PATCH 1/2] Implement adding individual tracks to Spotify library via
 context menu.

---
 src/js/components/ContextMenu.js   | 14 +++++++++++++-
 src/js/services/spotify/reducer.js | 10 ++++++++++
 2 files changed, 23 insertions(+), 1 deletion(-)

diff --git a/src/js/components/ContextMenu.js b/src/js/components/ContextMenu.js
index fd887e11..d0234019 100755
--- a/src/js/components/ContextMenu.js
+++ b/src/js/components/ContextMenu.js
@@ -54,6 +54,11 @@ class ContextMenu extends React.Component{
 					case 'artist':
 					case 'album':
 					case 'playlist':
+					case 'editable-playlist':
+					case 'track':
+					case 'playlist-track':
+					case 'editable-playlist-track':
+					case 'queue-track':
 						this.props.spotifyActions.following(nextProps.menu.items[0].uri)
 						break
 				}
@@ -152,6 +157,9 @@ class ContextMenu extends React.Component{
 			case 'playlist':
 				return (this.props.spotify_library_playlists && this.props.spotify_library_playlists.indexOf(item.uri) > -1);
 				break;
+			case 'track':
+				return (this.props.spotify_library_tracks && this.props.spotify_library_tracks.indexOf(item.uri) > -1);
+				break;
 		}
 		return false;
 	}
@@ -688,6 +696,7 @@ class ContextMenu extends React.Component{
 						<div className="divider" />
 						{add_to_playlist}
 						{toggle_loved}
+						{this.canBeInLibrary() ? toggle_in_library : null}
 						<div className="divider" />
 						{context.source == 'spotify' && context.items_count <= 5 ? go_to_recommendations : null}
 						{context.items_count == 1 ? go_to_track : null}
@@ -708,6 +717,7 @@ class ContextMenu extends React.Component{
 						<div className="divider" />
 						{add_to_playlist}
 						{toggle_loved}
+						{this.canBeInLibrary() ? toggle_in_library : null}
 						<div className="divider" />
 						{context.source == 'spotify' && context.items_count <= 5 ? go_to_recommendations : null}
 						{context.items_count == 1 ? go_to_track : null}
@@ -728,6 +738,7 @@ class ContextMenu extends React.Component{
 						<div className="divider" />
 						{add_to_playlist}
 						{toggle_loved}
+						{this.canBeInLibrary() ? toggle_in_library : null}
 						<div className="divider" />
 						{context.source == 'spotify' && context.items_count <= 5 ? go_to_recommendations : null}
 						{context.items_count == 1 ? go_to_album : null}
@@ -789,6 +800,7 @@ const mapStateToProps = (state, ownProps) => {
 		mopidy_library_artists: state.mopidy.library_artists,
 		spotify_library_albums: state.spotify.library_albums,
 		mopidy_library_albums: state.mopidy.library_albums,
+		spotify_library_tracks: state.spotify.library_tracks,
 		playlists: state.core.playlists,
 		tracks: state.core.tracks,
 		spotify_authorized: state.spotify.authorization,
@@ -807,4 +819,4 @@ const mapDispatchToProps = (dispatch) => {
 	}
 }
 
-export default connect(mapStateToProps, mapDispatchToProps)(ContextMenu)
\ No newline at end of file
+export default connect(mapStateToProps, mapDispatchToProps)(ContextMenu)
diff --git a/src/js/services/spotify/reducer.js b/src/js/services/spotify/reducer.js
index e3f20a42..5c0c7e57 100755
--- a/src/js/services/spotify/reducer.js
+++ b/src/js/services/spotify/reducer.js
@@ -307,6 +307,16 @@ export default function reducer(spotify = {}, action){
             }
             return Object.assign({}, spotify, { library_playlists: items });
 
+        case 'SPOTIFY_LIBRARY_TRACK_CHECK':
+            var items = Object.assign([], spotify.library_tracks)
+            var index = items.indexOf(action.key)
+            if (index > -1 && !action.in_library) {
+                items.splice(index, 1)
+            } else if (index < 0 && action.in_library){
+                items.push(action.key)
+            }
+            return Object.assign({}, spotify, { library_tracks: items });
+
 
         /**
          * Searching

From 2811cbbfba2406e7b8faf21032624563c252cda3 Mon Sep 17 00:00:00 2001
From: James Barnsley <james@barnsley.nz>
Date: Fri, 23 Nov 2018 08:20:48 +1300
Subject: [PATCH 2/2] Applying loader for context menu library checks

---
 src/js/components/ContextMenu.js      | 24 ++++++++++++++++++++++++
 src/js/views/library/LibraryTracks.js |  4 +++-
 2 files changed, 27 insertions(+), 1 deletion(-)

diff --git a/src/js/components/ContextMenu.js b/src/js/components/ContextMenu.js
index 0c203397..f60b6e9c 100755
--- a/src/js/components/ContextMenu.js
+++ b/src/js/components/ContextMenu.js
@@ -530,6 +530,30 @@ class ContextMenu extends React.Component{
 			</div>
 		)
 
+		if (!this.props.spotify_authorized){
+			var toggle_in_library = null;
+		} else if (helpers.isLoading(this.props.load_queue,['spotify_me/tracks/contains','spotify_me/playlists/contains','spotify_me/albums/contains','spotify_me/artists/contains'])){
+			var toggle_in_library = (
+				<div className="context-menu__item">
+					<a className="context-menu__item__link">
+						<span className="context-menu__item__label mid_grey-text">
+							Add to library
+						</span>
+					</a>
+				</div>
+			)
+		} else {			
+			var toggle_in_library = (
+				<div className="context-menu__item">
+					<a className="context-menu__item__link" onClick={e => this.toggleInLibrary(e, context.in_library)}>
+						<span className="context-menu__item__label">
+							{context.in_library ? 'Remove from library' : 'Add to library'}
+						</span>
+					</a>
+				</div>
+			)
+		}
+
 		if (!this.props.lastfm_authorized){
 			var toggle_loved = null;
 		} else if (helpers.isLoading(this.props.load_queue,['lastfm_track.getInfo'])){
diff --git a/src/js/views/library/LibraryTracks.js b/src/js/views/library/LibraryTracks.js
index 9030ae26..e62a3659 100755
--- a/src/js/views/library/LibraryTracks.js
+++ b/src/js/views/library/LibraryTracks.js
@@ -46,7 +46,9 @@ class LibraryTracks extends React.Component{
 	}
 
 	render(){
-		if (helpers.isLoading(this.props.load_queue,['spotify_me/tracks'])){
+		
+		// Note trailing "?" makes sure our context menu in_library checks doesn't interfere
+		if (helpers.isLoading(this.props.load_queue,['spotify_me/tracks?'])){
 			return (
 				<div className="view library-tracks-view">
 					<Header icon="music" title="My tracks" />