Daft Punk filling up the screen

Check it out at https://github.com/andrewburgess/spotify-wallpaper

To access, you need to include the following section in your manifest.json file

"ApiPermissions": {
	"core": ["private"]
}

Then you can use

sp.core.user

which will return an User object

public static List<string> SplitCSVLine(string line)
{
	var ret = new List<string>();

	var quoted = false;
	var tokenQuoted = false;
	var currentToken = new StringBuilder();
	foreach (var c in line)
	{
		switch (c)
		{
			case '"':
				if (quoted == false && tokenQuoted == false)
				{
					quoted = true;
					tokenQuoted = true;
					break;
				}

				if (quoted && tokenQuoted)
				{
					quoted = false;
					break;
				}

				if (quoted == false && tokenQuoted)
				{
					currentToken.Append(c);
					quoted = true;
					break;
				}

				break;
			case ',':
				if (quoted)
				{
					currentToken.Append(c);
					break;
				}

				ret.Add(currentToken.ToString());
				currentToken = new StringBuilder();
				tokenQuoted = false;

				break;
			default:
				currentToken.Append(c);
				break;
		}
	}

	return ret;
}

Starting Things Off

There are some imports and variables to declare in order to understand the examples below.

var sp = getSpotifyApi(1);
var views = sp.require("sp://import/scripts/api/views");
var models = sp.require("sp://import/scripts/api/models");
var ui = sp.require("sp://import/scripts/ui");

Display a playlist using Spotify’s List item

var list = new views.List(playlist, function (track) {
	return new views.Track(track, views.Track.FIELD.STAR |
				views.Track.FIELD.SHARE |
				views.Track.FIELD.NAME |
				views.Track.FIELD.ARTIST |
				views.Track.FIELD.DURATION |
				views.Track.FIELD.ALBUM);
});
$("#playlist").append(list.node);

The constructor for the List class takes three arguments. In the above example, I only use the first two, which are: a playlist object to display, and a method for returning exactly how to display the tracks in the playlist. There are a number of different fields that can be added into the tail end of the views.Track() constructor, but the ones listed are a good start.

To make the list use the light theme

list.node.classList.add("sp-light");

Display Artist/Album Image

The API includes a class for displaying images based on a URI that can be resized to fit a container.

var track = sp.trackPlayer.getNowPlayingTrack().track;
var img = new ui.SPImage(track.album.cover);
$("album-cover").append(img.node);

If you want to include Player controls over the image, use this:

var player = new views.Player();
$("#album-cover").empty().append($(document.createElement("a")).attr("href", track.uri));
var img = new ui.SPImage(track.album.cover);
$(player.image).empty();
$(player.image).append(img.node);
$("#album-cover").children().append(player.node);

You can programmatically set the context/playing status of the player using player.context = playlist.uri and player.playing = true. You can also use the player.play(track, playlist.uri) method to start things off.

Hopefully these few things help, and I’ll be sure to add a new post with additional examples as I come across them

Luckily I stumbled upon this function at http://www.sql-server-helper.com/functions/initcap.aspx which is an implementation of a built in function for Oracle, but is missing in MSSQL

CREATE FUNCTION [dbo].[InitCap] ( @InputString varchar(4000) ) 
RETURNS VARCHAR(4000)
AS
BEGIN

DECLARE @Index          INT
DECLARE @Char           CHAR(1)
DECLARE @PrevChar       CHAR(1)
DECLARE @OutputString   VARCHAR(255)

SET @OutputString = LOWER(@InputString)
SET @Index = 1

WHILE @Index <= LEN(@InputString)
BEGIN
    SET @Char     = SUBSTRING(@InputString, @Index, 1)
    SET @PrevChar = CASE WHEN @Index = 1 THEN ' '
                         ELSE SUBSTRING(@InputString, @Index - 1, 1)
                    END

    IF @PrevChar IN (' ', ';', ':', '!', '?', ',', '.', '_', '-', '/', '&', '''', '(')
    BEGIN
        IF @PrevChar != '''' OR UPPER(@Char) != 'S'
            SET @OutputString = STUFF(@OutputString, @Index, 1, UPPER(@Char))
    END

    SET @Index = @Index + 1
END

RETURN @OutputString

END
GO

I realized that I could leverage this function to aid in updating my dataset to set the strings to their proper casing. In order to accomplish this, I had to write another query which would let me update each individual row in the table with a different value.

The method I chose involved an in-memory table to store the capitalized names which I could then join to my UPDATE query to complete the process

DECLARE @Names TABLE (id INT, name NVARCHAR(100))
INSERT INTO @Names (id, name)
(SELECT [id], dbo.InitCap([name]) as name FROM Counties)

UPDATE Counties
SET name = (SELECT name FROM @Names as n WHERE n.id = Counties.id)

The temporary table has two columns, id and name. I insert the id from the base table, as well as the modified name which has the InitCap function applied to it.

Once the table is created, it’s attached to the UPDATE statement to select the correct data from the temporary table and store it to the linked column in the base table.

The first thing to do is put the following in your Web.config:

<pipelines>
  <renderField>
    <processor type="Your.Namespace.AddTitleToImage, Your.Assembly" />
  </renderField>
</pipelines>

After putting that in your Web.config, create the following class with the appropriate namespace/assembly information:

public class AddTitleToImage
{
	public void Process(RenderFieldArgs args)
	{
		if (args.FieldTypeKey == "image")
		{
			args.Parameters.Add("title", ((ImageField) args.GetField()).Alt);
			var renderer = new ImageRenderer();
			renderer.Item = args.Item;
			renderer.FieldName = args.FieldName;
			renderer.FieldValue = args.FieldValue;
			renderer.Parameters = args.Parameters;
			args.WebEditParameters.AddRange(args.Parameters);
 
			var result = renderer.Render();
			args.Result.FirstPart = result.FirstPart;
			args.Result.LastPart = result.LastPart;
		}
	}
}

This works on any image that Sitecore has to render in the page that is being produced, so you can be ensured that the title attribute will be set when using a Sitecore image.

The repository is located here: https://andrewburgess.kilnhg.com/Repo/Miscellaneous/Group/Spotify-Tools

At the moment, only the similar artist generators for Last.FM and EchoNest are working, but I’m hoping to add in additional functionality when I feel more motivated, as well as create a more intuitive interface.

If you decide to build the application for yourself, you’ll need to get a Spotify API Key, Last.FM API Key, and an EchoNest API Key, then create a new class in the project root called Keys, and assign the appropriate properties with the received keys.

You can open issues in my bug tracker here: https://andrewburgess.fogbugz.com/. Just sign up for an account and click New Case on the main page.

Very catchy tune