Saturday, March 29, 2008

Hacking picasaweb's flash player

As ive mentioned in my last post, im currently transferring all of my photos to picasaweb :)
I love the service, and im really happy with everything (maybe except the weight of the javascript on the site itself).

Well - since ive effectively killed off my own gallery to for this to make sense, i needed to show off my flashy new gallery on this blog :)

I had a couple of ways to do this:
1) get a drupal module that would do this for me
2) use the embed player that picasaweb offers
3) make my own view using the picasaweb's public api

1) proved to be a no-go, the module is there, but doesnt do any of the things i need
2) is cool, but lacks certain functionality i needed
3) yeah, like i have the time to do that ;)

well, that really left me with only one choice - be happy with the standart player...
or did it ? >:)

The picasaweb flash slideshow player is pretty much like any other slideshow player out there.
Its always album specific, and allows you to only enable/disable the captions, and autoplaying.
This is how the source for the embed player looks like:
<embed type="application/x-shockwave-flash" 
src="http://picasaweb.google.com/s/c/bin/slideshow.swf" 
width="288" 
height="192" 
flashvars="host=picasaweb.google.com&RGB=0x000000&
feed=http%3A%2F%2Fpicasaweb.google.com%2Fdata%2Ffeed%2Fapi%2Fuser%2Flandrzejak%2Falbumid%2F5183182292933551745%3Fkind
%3Dphoto%26alt%3Drss" 
pluginspage="http://www.macromedia.com/go/getflashplayer"></embed>



It takes a list of photos and plays them...
You can already see how to change the size of the embed object by hand - so that it makes a better fit to your site.
Wait, back up - a list of photos, right ?
Where does it get this list from i wonder....

Well, a look at the source told me that it uses flashvars to deterimine what and how its going to get a feed.
feed ? :>
Yes, it uses a simple xml feed from picasaweb, just as described on the api docs.
It also uses some other variables, doesnt it ?
What might those do ? =)

RGB - is a pretty simple one - its the players background color.
Usefull - the default is black, so it wont fit this website at all, i made it white right away.
host - is pretty self explaining as well, and i dont think i need to change this one.
feed - is pretty straightforward as well, and it contains the feed supplying the list of photos to be played.

When you try to change the autoplay and cation options, two new items appear on the list of params:

noautoplay when present in the list disables the automatic slideshow, which now has to be stared manually
captions when present this displays the photo's caption

not too many, huh ?
i actually wanted to make the images repeat themselves and maybe randomize, by default the player just plays them as it gets them, and stops playing when it reaches the last image in the album.
maybe there are others ?
lets check ! :)
lets get ourselves a flash action script extractor, preferebly one that works under linux, and let it loose on the player that picasa provides.
Flare creates a nice text file that contains all of the action script present in the player.

How does action script extract the flashvars from an embed object ?
I googled out that those vars are present in _root.varname, so i grepped the action script produced by flare.
The results:

if (_root.host.length > 0) {
this.hostname_ = _root.host.toLowerCase();
this.hostname_ = 'http://' + _root.host;
if (_root.port.length > 0) {
var v14 = _global.parseInt(_root.port);
if (_root.scalemax != undefined) {
if (_root.interval != undefined) {
var v16 = _global.parseInt(_root.interval);
com.google.photos.slideshow.LH_Viewer.viewer = com.google.photos.slideshow.LH_Viewer(_root.attachMovie(com.google.photos.slideshow.LH_Viewer.symbolName, 'viewer', _root.getNextHighestDepth()));
var v2 = _root.feed;
if (_root.font.length > 0) {
v2 = _global.parseInt(_root.font);
if (_root.text.length > 0) {
this.caption_.rgb = _global.parseInt(_root.text, 16);
if (_root.textBackground.length > 0) {
this.caption_.background = _global.parseInt(_root.textBackground, 16);
if (_root.textAlpha.length > 0) {
this.caption_.alpha = _global.parseInt(_root.textAlpha);
if (_root.captions.length > 0 || _root.capti..1 != undefined) {
if (_root.noautoplay != undefined) {
if (_root.RGB.length > 0) {
var v2 = _global.parseInt(_root.RGB, 16);
if (_root.font.length > 0) {
v3 = _global.parseInt(_root.font);


WHOA ! What do we have here ?
It seems that apart from the ones we already know, there are severall other variables !
Ill save you the gueswork and explain the ones i found:
text - define the captions text color in hex
font - no idea, maybe it was supposed to be the font size, but it doesnt work for me
textAlpha - cation text backgrounds alpha
textBackground - caption text backgrounds hex color
scalemax - not sure, it seems to change the resize algorythm possibly producing images of a closer fit to the embed objects size (instead of just panning them out)
interval - how many seconds per image

As you can see - the ones i was looking for (repeat, random) are not there, but its still pretty interesting.
In the least, it lets you get a more personalized slideshow player :)

Now, playing just one of my albums was pointless, since i had no intention to change the the object every time i added new photos to picasa.
I couldhave just changed the feed to:
http://picasaweb.google.com/data/feed/api/user/landrzejak?kind=photo
i couldhave also changed the number of photos from the default 100 by changing the feed to:
http://picasaweb.google.com/data/feed/api/user/landrzejak?kind=photo
&max-results=100&alt=rss

The limit for the list of photos is 500 - and trust me, its too much for firefox and flash - the xml feed weighs about 1meg at that point.

And whats the point of showing the images, if i cant show all of them, or change their order.
Even i get bored when forced to watch all of my images from just one album - check them out, i pretty much make up in numbers what i lack in photographic skills.
Besides, i didnt want to show all of them, just the best ones....
Like the ones i set up to be the albums main image !
I changed my feed to get all of my albums, along with the preview images:

http://picasaweb.google.com/data/feed/api/user/landrzejak/?kind=album&alt=rss

That worked like a charm ! Looks like the player accepts any kind of picasa's feeds :D

So what did i end up with ?
You can see for yourselves on the right side of this page :)
The player now shows my albums covers, at the proper pace of one image every 5 seconds :)

Hope anyone found this usefull in using picasaweb on their website :)

7 comments:

南大网侍郎 said...

Nice job, Meltir.

Could you explain how do I change the interval of the player ? (say, one image every 5 seconds) ?

-- boon

Meltir said...

append an 'interval=5' to the flashvars :)

南大网侍郎 said...

Yes, it works. You are a genius!

Unknown said...

Brilliant. Exactly what I was after.

Unknown said...

Any way to remove the author's name from the feed?
In addition to your ones you have found, I have found these:

Show Captions
captions = 1

Disable Autoplay
noautoplay = 1

Thanks!

Anonymous said...

Thanks for this, seriously. I was already looking and instead I found that if I remove the RGB entirely, then set the wmode to transparent, I can set the color how ever I wan in my div container...which is usually transparent.

Now, how can I make it loop...or did I miss that part :p

Fabu said...

damnit you just saved me a lot of time and work.. i was doing exactly the same thing right now!