nanovivid

Almost as soon as I started using Lala, I realized that it really needed its own Dock icon and separate browser window. Enter the wonders of Fluid, which lets you create a SSB (Site Specific Browser) to do just that. So choirs of angels were singing and whatever, except that there was still functionality missing. All was not lost though, because Fluid supports Userscripts, and I was able to add in most of what I wanted.

Download

Download

What’s Included

So far, the Userscript collection for Lala contains the following enhancements:

Growl Notifications

Whenever a track starts playing, a Growl notification with the title, artist, album, and artwork will be generated.

Mini Mode

I rarely use the iTunes mini mode (where you click the Zoom button (the +) in the title bar) since I use Growl notifications and have hotkeys for previous, next, play/pause and show playing track. However, while using Lala, I found myself wanting to be able to put the browser in a minified state that showed only the player.

This script adds a ⊖ icon to the top right of the page, allowing you to toggle between large and mini mode.

It’s not 100% true to the iTunes behavior due to some limitations:

• Fluid seems to impose a minimum window height that is taller than the mini player, so unless the address bar and/or tabs are showing, the window won’t shrink quite as small as it really should.
• For a while I was playing around with remembering the window positions of the large and small windows, but I couldn’t get it to restore them properly. I would tell the window to move to a certain position and it would end up a random number of pixels off. Plus, JavaScript is really horrible about multiple monitors. So the upper left corner of the window will stay in the same place for both modes.

Dock Integration

This script adds a Play/Pause item to the SSB’s Dock menu, allowing you to control the player. It also checks every five minutes to see if you have any new alerts (blurbs, followers, recommendations, etc.). If so, the count of those new items is displayed as a Dock badge, just like Mail does for new messages.

The dock menu has the added benefit of letting you control Lala playback via AppleScript. A sample script is included with the download.

Amazon Wish List Link

I’ve found that the Amazon Universal Wish List is a great way to keep track of digital music that I want to buy. Most sites that offer downloads (including Lala and, oddly, Amazon MP3 itself) don’t have a wish list or persistent shopping cart and this is a good way of working around that limitation. I was initially using the bookmarklet from Amazon, but then I realized that I could add a link directly into the page. When this script is active, it will insert a “Add to wish list” link below the “Share this music” link on album pages. Clicking the link will activate the Universal Wish List dialog.

Interface Tweaks

This is actually a userstyle instead of a userscript. It just cleans up the interface a bit by removing some extra borders on the edges of the site.

Instructions

Creating a Lala SSB

1. Download Fluid if you don’t already have it.
2. Open Fluid and create a new SSB for http://www.lala.com/. Here are some icon recommendations:
   • Cassettes.
   • Speakers (you’ll have to scroll a bit to find them).
   • Daft Punk Helmets (I’m currently using the Guyman Music one).
3. Launch your Lala SSB.

Applying the Userscripts

1. Click the Script menu (the icon to the right of the Window menu) and choose Open Userscripts Folder.
2. Download the userscript collection if you haven’t already, unzip it, and place all the files from the Userscripts folder files in the folder that opened in step 1.
3. Back in Lala, click the Script menu and select Reload All Userscripts.
4. Click the Script menu and place check marks next to any of the scripts you’d like to enable.
5. Reload the page to activate the changes (they’ll be loaded automatically from now on). If the scripts don’t activate after you reload, quit and relaunch your SSB.

Applying the Userstyle

1. Open preferences (Lala -> Preferences…) and click the Userstyles tab.
2. Click the + button.
3. Check the box for your new userstyle, then click once in the empty space to the right of the checkbox (under URL Pattern) and type *lala.com* (see Userstyles/Example.png for a picture).
4. Paste the contents of Userstyles/userstyle.css into the box at the bottom of the window.
5. Close preferences and reload the page to activate the changes.

Final Tweaks

(This is optional and not related to the userscripts or userstyles). I’d highly recommend checking the Closing the last browser window only hides the window option in General Preferences. This makes it so that you can close the window and music will continue to play, just like in iTunes.

Package History

1.2 - November 28, 2008

MiniMode 1.1 properly handles resizing the player when shrinking from a very wide window.

1.1 - November 25, 2008

Includes 1.0.1 update to MiniMode and Amazon for better monitoring of whether jQuery has been loaded. (Also, MiniMode wasn’t actually loading jQuery in 1.0 so it only would work if the Amazon script was also active).

1.0 - November 23, 2008

Full package released.

0.5 - November 15, 2008

First Lala userscript for Growl notifications posted.

Disclaimer

If Lala changes their JavaScript or site design significantly, the scripts will stop working, since I am depending on undocumented functionality (Lala doesn’t have an offical JavaScript API).