Skip to content

A native module that allows you to use the Spotify SDK API with react-native

Notifications You must be signed in to change notification settings

moooji/react-native-spotify

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

45 Commits
 
 
 
 
 
 
 
 

Repository files navigation

React Native Spotify Module (IOS)

##Intro A native module that allows you to use the Spotify SDK API (IOS beta 17) with JavaScript through react-native.


Overview


##Set-up: ###Using npm

Recomended

  1. Use npm install react-native-spotify from the directory of your project in your command line.

  2. Download the Spotify IOS SDK beta 17 here and unzip it.

  3. Open your react native project in Xcode and drag the unzipped Spotify.framework file into the Frameworks group in your Xcode project (create the group if it doesn’t already exist). In the import dialog, tick the box for Copy items into destinations group folder (or Destination: Copy items if needed).

  4. Please folow the instructions on the "Creating Your Client ID, Secret and Callback URI" and "Setting Up Your Build Environment" sections of the Spotify iOS SDK Tutorial

Important Note! When adding frameworks to the list in the "Link Binary With Libraries" section you wll need to add WebKit.framework in addition to those mentioned in the tutorial.

  1. Go to node-modules/react-native-spotify/ and copy the following files to the ios directory of your project:
    • SpotifyLoginViewController.m
    • SpotifyLoginViewController.h
    • SpotifyAuth.m
    • SpotifyAuth.h

###Using git

  1. Fork and clone the repo.

  2. Download the Spotify IOS SDK beta 17 here and unzip it.

  3. Open your react native project in Xcode and drag the unzipped Spotify.framework file into the Frameworks group in your Xcode project (create the group if it doesn’t already exist). In the import dialog, tick the box for Copy items into destinations group folder (or Destination: Copy items if needed).

  4. Please folow the instructions on the "Creating Your Client ID, Secret and Callback URI" and "Setting Up Your Build Environment" sections of the Spotify iOS SDK Tutorial

Important Note! When adding frameworks to the list in the "Link Binary With Libraries" section you wll need to add WebKit.framework in addition to those mentioned in the tutorial.

  1. From this project directory, go to react-native-spotify/spotifyModule/ios and copy the following files to the ios directory of your project:
    • SpotifyLoginViewController.m
    • SpotifyLoginViewController.h
    • SpotifyAuth.m
    • SpotifyAuth.h

##How to use:

//You need to import NativeModules to your view
import { NativeModules } from 'react-native';

//Assign our module from NativeModules and assign it to a variable
var SpotifyAuth = NativeModules.SpotifyAuth;

class yourComponent extends Component {
	//Some code ...

	someMethod(){
    //You need this to Auth a user, without it you cant use any method!

    const options = {
		clientID: 'your-clientID',
		redirectURL: 'your-app-schema://callback',
		requestedScopes: ['streaming',...]
	};

	SpotifyAuth.login(options, (error) => {
		if (error) {
          //handle error
        } else {
          //handle success
        }
	});
}

##Exposed API:

###Auth:

options:callback

You need this to Auth a user, without it you cant use any other methods!

Set your Client ID, Redirect URL, Scopes and start the auth process

Option description
clientID (String) The client ID of your registered Spotify app
redirectURL (String) The Redirect URL of your registered Spotify app
requestedScopes (Array) list of scopes of your app, see here
tokenSwapURL (String) Backend URL to exchange authorization code for access token (only Authorization Code Flow see here)
tokenRefreshURL (String) Backend URL to refresh an access token (only Authorization Code Flow see here)
callback (Function)a callback to handle the login success/error

Implicit Grant Flow

const options = {
	clientID: 'your-clientID',
	redirectURL: 'your-app-schema://callback',
	requestedScopes: ['streaming',...]
};

SpotifyAuth.login(options,(error)=>{console.log(error)});

Authorization Code Flow

const options = {
	clientID: 'your-clientID',
	redirectURL: 'your-app-schema://callback',
	requestedScopes: ['streaming',...],
	tokenSwapURL: 'http://your.backend.com/token/swap',
	tokenRefreshURL: 'http://your.backend.com/token/refresh'
};

SpotifyAuth.login(options,(error)=>{console.log(error)});

###SPTAudioStreamingController Class:

Properties:

initialized

Returns true when SPTAudioStreamingController is initialized, otherwise false

Parameter description
Callback (Function)a callback to handle the response

Example:

SpotifyAuth.initialized((res)=>{console.log(res);});

loggedIn

Returns true if the receiver is logged into the Spotify service, otherwise false

Parameter description
Callback (Function)a callback to handle the response

Example:

SpotifyAuth.loggedIn((res)=>{console.log(res);});

isPlaying

Returns true if the receiver is playing audio, otherwise false

Parameter description
Callback (Function)a callback to handle the response

Example:

SpotifyAuth.isPlaying((res)=>{console.log(res);});

volume

Returns the volume

Parameter description
Callback (Function)a callback to handle the response

Example:

SpotifyAuth.volume((res)=>{console.log(res);});

shuffle

Returns true if the receiver expects shuffled playback, otherwise false

Parameter description
Callback (Function)a callback to handle the response

Example:

SpotifyAuth.shuffle((res)=>{console.log(res);});

repeat

Returns true if the receiver expects repeated playback, otherwise false

Parameter description
Callback (Function)a callback to handle the response

Example:

SpotifyAuth.repeat((res)=>{console.log(res);});

currentPlaybackPosition

Returns the current approximate playback position of the current track

Parameter description
Callback (Function)a callback to handle the response

Example:

SpotifyAuth.currentPlaybackPosition((res)=>{console.log(res);});

currentTrackDuration

Returns the length of the current track

Parameter description
Callback (Function)a callback to handle the response

Example:

SpotifyAuth.currentTrackDuration((res)=>{console.log(res);});

currentTrackURI

Returns the current track URI, playing or not

Parameter description
Callback (Function)a callback to handle the response

Example:

SpotifyAuth.currentTrackURI((res)=>{console.log(res);});

currentTrackIndex

Returns the currenly playing track index

Parameter description
Callback (Function)a callback to handle the response

Example:

SpotifyAuth.currentTrackIndex((res)=>{console.log(res);});

targetBitrate

Returns the current streaming bitrate the receiver is using

Parameter description
Callback (Function)a callback to handle the response

Example:

SpotifyAuth.targetBitrate((res)=>{console.log(res);});

Methods:

-logout:

Logout from Spotify

Parameter description
N/A N/A

Example:

SpotifyAuth.logout();

-setVolume:callback:

Set playback volume to the given level. Volume is a value between 0.0 and 1.0.

Parameter description
volume (Number)The volume to change to, value between 0.0 and 1.0
Callback (Function)a callback that will pass back an NSError object if an error ocurred

Example:

SpotifyAuth.setVolume(0.8,(error)=>{console.log(error);});

-setTargetBitrate:callback:

Set the target streaming bitrate. 0 for low, 1 for normal and 2 for high

Parameter description
bitrate (Number)The bitrate to target
Callback (Function)a callback that will pass back an NSError object if an error ocurred

Example:

SpotifyAuth.setTargetBitrate(2,(error)=>{console.log(error);});

-seekToOffset:callback:

Seek playback to a given location in the current track (in secconds).

Parameter description
offset (Number)The time to seek to
Callback (Function)a callback that will pass back an NSError object if an error ocurred

Example:

SpotifyAuth.seekToOffset(110,(error)=>{console.log(error);});

-playURIs:withOptions:callback:

Play a list of Spotify URIs.(at most 100 tracks).SPTPlayOptions containing extra information about the play request such as which track to play and from which starting position within the track.

Parameter description
uris (Array)The array of URI’s to play (at most 100 tracks)
options (Object) with trackIndex:(Number) and/or startTime:(Number) (can be null)
Callback (Function)a callback that will pass back an NSError object if an error ocurred

Example:

SpotifyAuth.playURIs(["spotify:track:6HxIUB3fLRS8W3LfYPE8tP",...], {trackIndex :0, startTime:12.0},(error)=>{console.log(error)});

-replaceURIs:withCurrentTrack:callback:

Replace the current list of tracks without stopping playback.

Parameter description
uris (Array)The array of URI’s to play
index (Number)The current track in the list
Callback (Function)a callback that will pass back an NSError object if an error ocurred

Example:

SpotifyAuth.replaceURIs(["spotify:track:6HxIUB3fLRS8W3LfYPE8tP",...], 0, (error)=>{console.log(error)});

-playURI:callback:

Play a Spotify URI.

Parameter description
uri (Number)The URI to play
Callback (Function)a callback that will pass back an NSError object if an error ocurred

Example:

SpotifyAuth.playURI("spotify:track:6HxIUB3fLRS8W3LfYPE8tP",(error)=>{console.log(error);});

-queueURI:callback:

Queue a Spotify URI.

Parameter description
uri (String)The URI to queue
Callback (Function)a callback that will pass back an NSError object if an error ocurred

Example:

SpotifyAuth.queueURI("spotify:track:6HxIUB3fLRS8W3LfYPE8tP",(error)=>{console.log(error);});

-setIsPlaying:callback:

Set the "playing" status of the receiver.

Parameter description
playing (Boolean)Pass true to resume playback, or false to pause it
Callback (Function)a callback that will pass back an NSError object if an error ocurred

Example:

SpotifyAuth.setIsPlaying(true,(error)=>{console.log(error);});

-stop:

Stop playback and clear the queue and list of tracks.

Parameter description
Callback (Function)a callback that will pass back an NSError object if an error ocurred

Example:

SpotifyAuth.stop((error)=>{console.log(error);});

-skipNext:

Go to the next track in the queue

Parameter description
Callback (Function)a callback that will pass back an NSError object if an error ocurred

Example:

SpotifyAuth.skipNext((error)=>{console.log(error);});

-skipPrevious:(RCTResponseSenderBlock)block

Go to the previous track in the queue

Parameter description
Callback (Function)a callback that will pass back an NSError object if an error ocurred

Example:

SpotifyAuth.skipPrevious((error)=>{console.log(error);});


###SPTSearch Class:

Methods:

+performSearchWithQuery:queryType:offset:accessToken:market:callback:

Go to the previous track in the queue You need to have a session first

Parameter description
searchQuery (String)The query to pass to the search
searchQueryType (String)The type of search to do ('track', 'artist', 'album' or 'playList')
offset (Number)The index at which to start returning results
market (String)Either a ISO 3166-1 country code to filter the results to, or “from_token”
Callback (Function)callback to be called when the operation is complete. The block will pass an Array filled with json Objects on success, otherwise an error.

Example:

SpotifyAuth.performSearchWithQuery('lacri','artist',0,'US',(err, res)=>{
      console.log('error', err);
      console.log('result', res);
    });

##Demo:

Included in the repo.

![alt text](https://github.com/viestat/react-native-spotify/blob/master/SpotifyAuthDemoEdit.gif?raw=true = 250x "Demo")


About

A native module that allows you to use the Spotify SDK API with react-native

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • Objective-C 97.1%
  • JavaScript 1.7%
  • Other 1.2%