The inspiration for the grid view display came about as an expansion to existing functionality. At the time of creation, Lastfm's dashboard has a display of your current top five artists, you can toggle the timeframe to see your top scrobbled artists in the last week, month and year. If you want to see more artists you’re taken to a list view of artists in descending order. While I love the stats I preferred the image layout so I decided to expand that view. Today most stream music and rarely buy albums - myself included - one of the aspects I really miss about owning an album was the physically nature of it, flipping through the album leaflet and musing over the artistic stylings of the album. This display is me filling in that hole of visually connecting with the artists.
If you are familiar with Lastfm then you’ve probably heard the term 'scrobbling' it basically an rss feed of your latest music activity. It’s a really awesome feature that other music apps incorporate so you get a more comprehensive view of your listening habits and build your library. Using Lastfm’s API I created a widget that showcases the latest artists that I’ve been listening to for the past seven days.
The main tools I use to build this project include Angular, PHP and MySQL. I broke down the widget into two components, left and right, and five different possible grid styles: 1x1, 2x1, 2x2, 1x2 and one large image. The grids represent how many artists will display. This made it easy to inject specific layout partials to ensure that I could have the most diverse grid pairing with the minimal about of partials. Each grid had their unique styling based on its size so as far as I could tell I couldn't keep them in a simple repeater, as an alternative I actually ended up created two partial sets, one for the left component and one for the right. I think this code could be refactored to have one set of partials with the use of a custom directive but I still need to look into the specifics of that implementation.
Once my app was set up I noticed that my http call to lastfm’s api had a high latency so I stored the data in a MySQL database and croned the calls to Lastfm to provide a better user experience. Another way I shaved down load time was by requesting smaller image file sizes from Lastfm; unfortunately Lastfm doesn’t have a set image size for the varying file sizes so a sacrifice to image quality had to be made in order to get reasonable file sizes across the board.
There are some kinks in the project, you’ll notice when you navigate to the end of the list, depending on the number of artists and layout the final artist will be displayed correctly but a repeat artist image will display with no associated info. I would like to update this last slide to either display the n to last artists on that grid with all the info displayed or maybe a placeholder template with more stat info.
I would also like to load the image and text at the same time, possibly using ng-show.
Image quality could be improved as well using an external modules such as gm to manually resize extremely large images before loading them to the page
The code for this project can be found on my github.