soda-framework/spotify

A sweet Spotify suite built on Soda CMS

Soda Spotify

A sweet spotify platform for Made in Katana, _(*1)

Installation

1) Firstly follow the instructions to install Soda CMS at: https://github.com/soda-framework/cms, _(*2)

2) Install Soda Spotify, _(*3)

#!json
composer require soda-framework/spotify

3) Install these packages using NPM. These are needed for compiling the Vue Components in this package., _(*4)

"vue-template-es2015-compiler": "1.3.1",
"vue": "^2.1.10",
"vue-template-compiler": "^2.1.10"
"axios": ""

4) Integrate Soda Spotify into laravel by adding Soda\Spotify\Providers\SpotifyServiceProvider::class in the providers array in /config/app.php, _(*5)

    'providers' => [
        Soda\Providers\SodaServiceProvider::class,
        Soda\Spotify\Providers\SpotifyServiceProvider::class,
    ]

5) Run the database migrations php artisan migrate to generate the necessary tables., _(*6)

6) In the CMS, go to the Spotify > Settings tab and specify the Package and Action that each created playlist should use. You can also specify the Playlist Title and Playlist Image (optional) for a playlist created on a user account., _(*7)

Usage

Saving a Playlist

Include this file to create a link that will create a playlist on a users account., _(*8)

#!php
@include('soda-spotify::save',compact('playlist'))

Or, you can pass in custom text/views/html to be displayed., _(*9)

#!php
@include('soda-spotify::save',['playlist'=>$playlist, 'save_text'=>'Save Playlist', 'saved_text'=>'Playlist Saved'])

You can specify the Title and Image the created playlist will have by going to the Spotify > Settings tab and in the cms and editing the Playlist Title and Playlist Image (optional)., _(*10)

This action will send them to Spotify and log them in. They will be sent back to the /playlist/ID page with, _(*11)

#!php
$_GET['from_spotify']

present., _(*12)

If this parameter is present AND the playlist has not already been listed as added (session), then it will add the playlist to the users account before sending them back to the playlist on the site., _(*13)

Tracks

You need to include the Tracks component in your Javascript using Vue. e.g., _(*14)

#!js
var Vue = require('vue');
var Tracks = require('../../../../../vendor/mik/spotify/resources/js/Components/Tracks.vue'); // path to the Tracks component
require('../vueConfig.js');

if( $('#playlist').length ) {
    var playlist_vm = new Vue({
        el: '#playlist',
        data: {
            token: document.head.querySelector("[name=csrf-token]").content,
        },
        created: function(){
            var me = this;
        },
        methods: {

        },
        components: {
            Tracks
        }
    });
}

Displaying the Player Interface, _(*15)

#!php
@include('soda-spotify::tracks',compact('playlist'))

Or, you can pass in custom text act act as a title. e.g., _(*16)

#!php
@include('soda-spotify::tracks',['playlist'=>$playlist, 'title'=>'Now Playing'])

Routes

Save Playlist

#!php
route('spotify.login',['url'=>URL_TO_RETURN_AFTER_LOGIN])

Get Playlist Tracks

#!php
route('spotify.api.tracks',['id'=>PLAYLIST_ID])

Response , _(*17)

Storing Track Data

Tracks need to be stored in the database in the JSON with the structure:

#!json

[{
    "id": "12D0n7hKpPcjuUpcbAKjjr",
    "name": "Don't Like.1",
    "preview_url": "https:\/\/p.scdn.co\/mp3-preview\/fef716a78bda6c3ce06f3a7b12d4ad5e47035984?cid=da37dbff0615468591361d57d2118b05",
    "uri": "spotify:track:12D0n7hKpPcjuUpcbAKjjr",
    "url": "https:\/\/open.spotify.com\/track\/12D0n7hKpPcjuUpcbAKjjr",
    "artists": [{
        "id": "5K4W6rqBFWDnAN6FQUkS6x",
        "name": "Kanye West",
        "uri": "spotify:artist:5K4W6rqBFWDnAN6FQUkS6x",
        "url": "https:\/\/open.spotify.com\/artist\/5K4W6rqBFWDnAN6FQUkS6x"
    }, {
        "id": "15iVAtD3s3FsQR4w1v6M0P",
        "name": "Chief Keef",
        "uri": "spotify:artist:15iVAtD3s3FsQR4w1v6M0P",
        "url": "https:\/\/open.spotify.com\/artist\/15iVAtD3s3FsQR4w1v6M0P"
    }],
}]

There is a function to convert an array of Spotify Created tracks JSON to this format, _(*18)

#!php
Soda\Spotify\Components\Helpers::reduceResults($tracks); // $tracks is an array of Spotify Created track objects

Creating a Playlist

#!php
$playlist = \Soda\Spotify\Controllers\PlaylistController::create_seeded_playlist($seeds);

$seeds is an array of seeds as defined in https://developer.spotify.com/web-api/get-recommendations/., _(*19)

e.g., _(*20)

#!php
$seeds = [
    'target_valence'=>0.5,
    'seed_tracks'=>ARRAY_OF_SPOTIFY_TRACK_IDS
];

Important: You MUST have any one of seed_genres, seed_tracks or seed_artists., _(*21)