Muxtape With Coverflow Using Fluid

Posted by cawlin
April 17, 2008

Muxtape with Coverflow

I am making this post for three reasons:

  1. I have bee meaning to make a post about fluid for quite some time now
  2. I wanted to write something about the increasingly cool muxtape.com
  3. I needed an excuse to play with ScreenFlow

Naturally I have combined these three “to-dos” into one. Below is a quick tutorial on harnessing the power of Fluid’s new thumbnail plugin to create a simple Muxtape application with sweet coverflow previews of the featured mixes. Video after the jump.


update: If you having problems finding the thumbnail plugin or unable to edit URL patterns make sure you update your muxtape SSB to the newest version of fluid (0.8.9.1 at the time of posting this). If you downloaded the already assembled app from Tom Martin’s blog you will need to update it in the preferences.

Also make sure Leopard is up to date as some folk are experiencing difficulties on older releases. Thanks Marshall

update 2: I have gotten a couple comments and emails about the URL pattern and CSS selector. Here they are ready for copy and paste or just reference so you don’t have to scrub back through the video.

URL Pattern: http://*muxtape.com/*

CSS Link or Image Selector: ul.featured a

You can find out more about specifying thumbnail content here

update 3: If you are having problems with thumbnails loading properly make sure your SSB is updated to at least version 0.9.2.2.

Share/Save/Bookmark

Calgary, DemoCamp, fluid, mac, video

If you enjoyed this post, please consider leaving a comment or subscribe to the feed and get future articles delivered to your feed reader.

Comments
Comment by Todd Ditchendorf on April 17, 2008 @ 2:03 pm

Thanks a ton Colin! couldn’t have made a better screencast myself. Great, great stuff!!!

also, i never thought of using the plugin with muxtape, but now that i’ve seen your ‘cast i realize its such a great fit.

[Reply]

Comment by Chris Messina on April 17, 2008 @ 2:46 pm

OMG, this is so effing brilliant. I love it!

[Reply]

Erika reply on May 5, 2008 5:40 pm:

I want a Mac.

[Reply]

Comment by bethgo on April 17, 2008 @ 2:49 pm

found through @factoryjoe’s tweet. this is awesome!

[Reply]

Comment by Marshallk on April 17, 2008 @ 3:45 pm

Goddamnit, I can’t get the previews to show up! Looks awesome though. Really want to figure it out and write about it.

[Reply]

Comment by Marshallk on April 17, 2008 @ 5:01 pm

Figured out that I needed to do a software update, then worked great. Except a handful of the screens don’t preview fully. Regardless, totally hot - thanks!

[Reply]

chad reply on May 9, 2008 9:50 pm:

I can’t get it to work either… what software update did you do?

[Reply]

Comment by Trevor on April 17, 2008 @ 5:39 pm

soo genius!

[Reply]

Comment by Ivan on April 17, 2008 @ 10:20 pm

Thanks for your posting this, I am really impressed by this combination of muxtape and fluid.

However, I had problems with setting up the “thumbnail” functions, nothing shows up after I input the URL pattern and CSS link.

Is it because I am using the latest version of Fluid app?

[Reply]

admin reply on April 17, 2008 10:40 pm:

Not sure why it isn’t working for you. You must have the latest version to even be able to edit the URL pattern so it sounds like you have the correct version.

I tried this on a few systems and I did have issues getting it working on my Girlfriends mac however I did not get long enough to figure out what went wrong. I will let you know if I can figure out what went wrong.

[Reply]

Ivan reply on April 17, 2008 11:19 pm:

Hey, it works now, I found out its because I don’t have the latest version of Leopard. Thanks for helping anyway!!!

Its such a cool app!!! tHx

[Reply]

Comment by Marshallk on April 17, 2008 @ 10:37 pm

I had to do a software update on Leopard before it worked for me. Now it does and I’m loving it.

[Reply]

Comment by Duncan on April 18, 2008 @ 8:53 am

this is great

[Reply]

Comment by Marshallk on April 18, 2008 @ 9:17 am

I just downloaded the latest version of AirFoil and now I’ve got this app running through my speakers! sweet.

[Reply]

Comment by Dave Allen on April 18, 2008 @ 10:48 am

Though I’d share my Muxtape with you…
http://tinyurl.com/5lqrf2

[Reply]

admin reply on April 18, 2008 4:29 pm:

Nice, digging the fortet remix of imitosis. Thanks for the share.

[Reply]

Comment by pat on April 18, 2008 @ 10:51 am

Hi,

not sure if you up to the task but someone really needs to make an app like this for the iphone/ipod touch. right now muxtape doesn’t really work on iphones (it won’t play a whole playlist - each song has to be selected manually). If I knew how, I would do it.

[Reply]

Comment by Michael on April 19, 2008 @ 3:34 am

Hi - what a great little tutorial! I am also, however, unable to get it working - latest Fluid, latest Leopard. The thumbnail pane works with other sites, and it opens with muxtape but shows nothing… I have triple checked to make sure I typed the url & css values correctly (that is a space after ‘featured’, right?)… I wonder is it possible it’s a non-Intel Mac issue (I’m on a powerbook)? Can’t think why but ya never know! Or is it Safari 3.1.1 update that’s the issue? Anyway, many thanks!

[Reply]

Comment by Michael on April 19, 2008 @ 3:42 am

UPDATE: the problem (on my powerbook G4 at least) seems to be the split panel view - the floating hud panel version of this works fine but the panel view shows nothing… Odd.

[Reply]

admin reply on April 19, 2008 10:27 am:

Strange indeed. You might want to drop Todd a line over in the Fluid google group: http://groups.google.com/group/fluidapp

[Reply]

Comment by Cayce on April 19, 2008 @ 10:55 am

Great use of some great apps. Where can I get that awesome walle wallpaper!?

[Reply]

admin reply on April 19, 2008 11:18 am:

I cropped that wall-e wallpaper down from these ridiculously high resolution stills on /film

http://www.slashfilm.com/2008/04/12/cool-stuff-super-high-resolution-wall-e-photos/

Let me know if you want me to just post up a copy of the walllpaper instead.

[Reply]

Cayce reply on April 19, 2008 12:28 pm:

Awesome, thank you so much. I am definitely keeping an eye on your blog.

[Reply]

Comment by Tom on April 19, 2008 @ 1:03 pm

ANy way of getting the muxtape/extension to remember where you put the horizontal divider bar which splits between the cover flow at the bottom and the normal site at the top?

[Reply]

admin reply on April 20, 2008 12:32 pm:

Not that I know of. Head over to the Fluid Google group to request it as a feature http://groups.google.com/group/fluidapp

[Reply]

Comment by Ross on April 19, 2008 @ 1:52 pm

I made a video about Fluid and Socialthing! if you want to check it out. http://www.vimeo.com/805366

[Reply]

Comment by Dave on April 19, 2008 @ 2:03 pm

I put your tutorial on our blog. Nice work, man!

[Reply]

Comment by Stephen on April 19, 2008 @ 3:02 pm

Thank you very much a wonderful surprise finding fluid, muxtape and how to mod it all on the same page. Excellent work! Thanks

[Reply]

Comment by Chad Crowell on April 19, 2008 @ 4:32 pm

Hey that’s my icon on Flickr - cool! haha great tip! thanks

[Reply]

admin reply on April 20, 2008 12:33 pm:

Awesome! A good icon makes a Fluid SSB so much better.

[Reply]

Comment by alvin on April 19, 2008 @ 5:34 pm

hi
how are you able to find
CSS Link or Image Selector
for sites such as
ffffound.com
?

[Reply]

Comment by John Barker on April 19, 2008 @ 9:23 pm

Nice quicksilver appearance. Care to share?

[Reply]

Comment by huh on April 19, 2008 @ 10:10 pm

I dont get it … I thought it was going to pull album cover art for each and much more. THough it gives me some ideas!

Well nice job you landed on Digg’s front page in turn promoting MuxTape, creation.net and FluidApp and this site too! I am now familiar with all these apps. Was familiar with MuxTape before. Social Media bended FTW!

[Reply]

Comment by Ian on April 20, 2008 @ 9:00 am

Cool tutorial! I was wondering what application you used to create your video? I like the screen zoom and spotlight effects!

[Reply]

admin reply on April 20, 2008 12:33 pm:

Screenflow: http://www.varasoftware.com/products/screenflow/

[Reply]

Comment by jim on April 20, 2008 @ 9:41 am

Great tip - kind of a off topic question, but what app are you using for screen captures? The zoom function is great.

[Reply]

admin reply on April 20, 2008 12:33 pm:

Check the comment above you :)

[Reply]

Comment by Ashby on April 20, 2008 @ 9:44 am

What a great idea — finally, a way to find great featured playlists easily on Muxtape! I am having one issue, however; if I want to see more playlists by refreshing the page, the thumbnails do not automatically update. I have to exit the Muxtape app and open it again to get new thumbs. Any ideas?

[Reply]

admin reply on April 20, 2008 3:40 pm:

I spoke to Todd abut this one. It will be addressed in the next release which should come out any time now.

[Reply]

Ashby reply on April 21, 2008 10:45 am:

Works perfectly now. Great app!

[Reply]

Comment by Bernard Ramsey on April 20, 2008 @ 1:32 pm

Awesome! Killer video and overview.

[Reply]

Comment by John Barker on April 20, 2008 @ 2:10 pm

Still hoping you’ll share your Quicksilver theme/appearance with us!

[Reply]

admin reply on April 20, 2008 2:56 pm:

I can’t find the exact HUD theme I use for quicksilver but this one is very popular:

http://www.mygnu.com/julius/proj_bezel.html

[Reply]

John Barker reply on April 20, 2008 3:16 pm:

Thanks! This is exactly what I was looking for.

[Reply]

Comment by Marshallk on April 20, 2008 @ 6:31 pm

I just noticed that if you search site:http://muxtape.com artist name - coverflow shows up for whatever artists were present when mixes were indexed too!

[Reply]

admin reply on April 20, 2008 6:38 pm:

Brilliant! Good find!

[Reply]

Comment by chelseeee on April 20, 2008 @ 9:58 pm

I eagerly await your next blog post.

[Reply]

Comment by Shigatsu on April 21, 2008 @ 12:17 am

Outstanding.

[Reply]

Comment by Heather R. on April 21, 2008 @ 9:07 am

This rocks! Think I’ve found something to fill the void that the Twitter outage has created. Thanks for sharing with such clear directions.

[Reply]

Comment by thomp361 on April 21, 2008 @ 3:10 pm

Where did you get that robot background, thing is tight.

[Reply]

Comment by LFOM on April 23, 2008 @ 7:37 am

Could you please add the Thumbnail plugin settings to the text so one does not have to wait for the video to play all over again to get it? Thanks. ;)

[Reply]

admin reply on April 23, 2008 8:27 am:

Done and done. You weren’t the only one requesting this.

[Reply]

LFOM reply on April 23, 2008 3:48 pm:

Great! Thanks again. :)

[Reply]

LFOM reply on April 23, 2008 4:03 pm:

Just to let you know that it was misspelled:
CSS Link or Image Selector: ul.featured a

[Reply]

admin reply on April 23, 2008 4:16 pm:

Woops! Fixed now, thanks!

[Reply]

Comment by YungSang on April 26, 2008 @ 8:20 am

For ‘favorited’ on each tape as well.

URL Pattern: http://*muxtape.com/
CSS Link or Image Selector: .featured a

[Reply]

admin reply on April 26, 2008 11:27 am:

Nice one, hadn’t noticed that you can pop that tab down to reveal users tapes.

[Reply]

Comment by antieight on April 27, 2008 @ 11:47 pm

thanks for this tutorial. now i’m hooked on muxtape and fluid.

I did some searching and found a great muxtape search site, then added the coverflow fluid combo.

here you go:

Advanced Preferences: *muxseek.ah-huh.net/*
URL Pattern: http://muxseek.ah-huh.net/*
CSS Link or Image Selector: ul li a

[Reply]

Comment by Stuart on April 30, 2008 @ 9:27 pm

Great tip, works perfectly, if onlymuxtape auto played the playlists, I’d never have to actually see the website, and could go full scren with the coverflow mode, that would be sweet.

[Reply]

Comment by Kyle on May 1, 2008 @ 8:29 am

Here’s the link to the flickr icon if anyone was searching for it (I know I was)

http://www.flickr.com/photos/kridgway/2433201214/sizes/o/in/pool-636943@N22/

[Reply]

Comment by Music Quiz on May 4, 2008 @ 7:07 pm

i helped developed Mux and thank all the positive feedback I am seeing

[Reply]

Comment by FoxyRoxy on May 9, 2008 @ 4:37 am

Killer video and overview

[Reply]

Comment by f00fighter on May 11, 2008 @ 1:34 am

Hey Cawlin - I loved this screencast! I just got my first Mac two days ago (I’ve been a PC guy for the last 14 years) and this was an awesome little tweak! Thanks so much for putting this together!

[Reply]

Comment by John on May 14, 2008 @ 6:39 pm

Awesome screencast. I didnt even know about the plug ins. BTW now there is a better icon on the flickr page for muxtape at the following link: http://tinyurl.com/55acsc

[Reply]

cawlin reply on May 14, 2008 7:48 pm:

I like the classic feel to that icon. Check out my newer post for some other muxtape tricks as well as a great mac style icon: http://internetjogging.com/2008/04/26/pimp-my-muxtape-ssb/

[Reply]

Comment by Warren on May 19, 2008 @ 2:47 am

Excellant news this is so cool.

And now I’ve found http://www.muxtapestumbler.com its much easier to find new muxtapes.

[Reply]

Comment by max on May 22, 2008 @ 5:48 am

Hey, do you need window’s vista to do this?

[Reply]

cawlin reply on May 24, 2008 7:00 am:

Hate to burst your bubble but you actually need Leopard (Mac OSX 10.5) to run fluid. You could check out prism (http://labs.mozilla.com/2007/10/prism/) for a similar windows application.

[Reply]

max reply on May 24, 2008 1:20 pm:

thanks, i was flipping out trying to get it to work with my widows XP thinking i needed vista!

[Reply]

Comment by GLEN on May 27, 2008 @ 3:12 pm

well done….very cool

[Reply]

Comment by aitor on June 1, 2008 @ 9:22 am

Please, how do you launch the aplications? what launcher are you using?
thnx

[Reply]

cawlin reply on June 2, 2008 11:19 am:

I am using quicksilver, a free application launcher from blacktree. You can download it here: http://www.blacktree.com/

[Reply]

Comment by Rye on June 18, 2008 @ 1:54 pm

Many thanks, slick screencast.

[Reply]

Comment by josh beers on June 26, 2008 @ 9:37 am

i have it all loaded, but for some reason when i try to flip through the mixtapes in thumbnail view they don’t load up their songs, only the rectangle with a big white space….any ideas?

[Reply]

chad reply on June 26, 2008 10:16 am:

same…

[Reply]

edwardfilms reply on June 27, 2008 11:23 am:

Same. Running 10.5.3 & 0.9.2.1
So gutted - please help!

[Reply]

cawlin reply on June 27, 2008 12:10 pm:

Hey guys, I’m going to check this out with Todd as I am experiencing the same issues. The 0.9.2.1 updates included some changes to the way thumbnails are rendered (to be more efficient) I am guessing this is the root of the problem.

I’ll post an update as soon as I know what’s going on!

[Reply]

Todd Ditchendorf reply on June 27, 2008 12:25 pm:

thanks cawlin, this is Todd, the developer of Fluid.

I just tried to use Fluid 0.9.2.1 (the latest version just released) with Muxtape, and I see this issue too. I know what is going wrong, and will ship a change to Fluid in the next version to fix it.

Here’s the deal. I made a change in the latest release to *not* execute JavaScript in the offscreen webpage renderer that generates the page thumbnails for the Coverflow view. This is actually a huge performance gain, as *all* JavaScript runs on the main GUI thread… that means you could have the JS for up to 50 webpages all running at once and blocking the UI… making interaction with Fluid often very choppy while the thumbnails are loading.

unfortunately, some sites like Muxtape generate their UI programmatically via JavaScript (Muxtape does this)… its pretty rare, and on the whole I think the change to 0.9.2.1 was def a good idea, and def a keeper. (if you ask me, Muxtap should def not be doing this, but I guess nobody asked me ;0])

Anyhow, it will be easy enough to add a single special case for Muxtape.com in the plugin. I’ll do that in the next release. It may be a week or so until this comes out tho. hold tight. thanks.

[Reply]

cawlin reply on June 27, 2008 12:58 pm:

Thanks for the awesome breakdown Todd!

[Reply]

chad reply on June 28, 2008 1:01 am:

Superior!

[Reply]

edwardfilms reply on June 29, 2008 4:06 am:

Look forward to the update. Could you post here when updated perhaps and internetjoggin will alert us?
Thanks so much.

[Reply]

cawlin reply on June 29, 2008 8:16 pm:

I will try to make a post whenever the new update goes live, however you can have fluid automatically check fro updates in the preferences of your SSB.

Todd Ditchendorf reply on June 30, 2008 1:38 am:

Update: I’ve just released Fluid 0.9.2.2 which includes a fix for the Muxtape issue. Seems to be working ok… thanks all.

Comment by Trackbacks on August 28, 2008 @ 8:22 pm

[Reply]

Leave a comment

(required)

(required)