Topic: Ipoding

Self explanatory mystery - as long as you are willing to read between the lines.
For the time being you may have to click twice to get it started.

And I am just getting warm.

...muhuhahahahahaha

quote:

---

javascript:myList... (line 1)
invalid assignment left-hand side
[Break on this error] myListener&interval=1000&useHandCursor=0&bgcolor=000000&buffer=9&width=0&height=...

---

Also, the rollover of your nav are not accessible ( no ALT ) and the technique is a bit dated. Image swap, really ?

[edit] Humm, it's a bit shaky. It worked when I clicked twice on the play button in Safari ( btw the layout is foobar in Sf3b4 ) and Opera 9.2+. Firebug reports the error I pasted above about every second, and the layout is ... inexistent. I guess you're tweaking it as I write this post. [/edit]



(Edited by poi on 01-13-2008 17:45)

Feedback is always welcome. With that in mind - and the fact that it's beta - let's explain :
---------------------------------------------------------------------------------------------------
Yeah, good old school image swap - no preload- I don't see a problem with images weighing 17kb for rollovers, do you?

Alt for who? Visually impaired wanting to check the blue tint (pardon my french)? I think I still validate anyway - according to Firefox, didn't poke at
other validators.

So screw alt attributes - I favored the users who will be bothered by an alt for the time being, visually impaired visitors will get a newsfeed,
faster to download and containing all the informations in the graphic site.

It may be some encoding problem in your case - or a quick tweak of mine, yup - because the layout is perfect here on FF2+, Op9.2+ and IE7+ (which were the target browsers).

On Ipod Safari and on a nifty Imac with Leopard, as well as on Safari Beta 3 in Windows, the layout is "almost ok" with the exception of the player icon,
"pushed" downwards below the images - gotta figure out how to keep it centered, keep it positionned at 23% of the bottom border AND
layer it on top of the rest, but that's far from.. an inexistent layout methinks ,)

Firebug does report the error pasted above, due to some problem with the encoding of Flash vars (for the moment, I am relying on the best "trade"
I could get to work, but I may have a simple one at hands - if I fixed the encoding for Firebug, it stopped working in IE, this way, it works
but it whines - so filed under "last steps debugging").

Had you cared to read between the lines (eg. poke at the "radio.js" source), you'd see :
--------------------------------------------------------------------------------------------------
- that I have listeners for anything flv, and can control anything happenning inside the player from javascript (position of cursor, volume, etc..).
- that it beautifully blends with other scripts in the same page (only one global var).
- that it just transforms a list of youtube embed links by ripping the ugly player off, and replacing it with what I want - an Ipod like interface in javascript/png/xhtml/css.
- that it bypasses the XSS Ajax restrictions using a (small) php/curl widget of mine.
- that, all in all, it weighs almost nothing.

The "click twice" bug I mentionned firsthand is due to the iframe being empty at first (no default val),
but it will be replaced by some startup value later on as I progress.

The main obstacle for me is getting the Ipod controls right in Photoshop

Sooo... up next :
- SWFObject instead of Satay
- Web designers using the script will be able to copy/paste a list of youtube embed links in a div, and have the player build it's playlist based on that.
- ..Which will help fix the double click bug.
- And it will get the fast forward, pause, rewind, shuffle, and volume controls it requires.

After that, GPL, an explanation page, another demo with a "flower power" effect based on the Disco Inferno thread,
and I'll post the php, js, and a template html for download.

Until then : I get to be able to play my tunes anywhere, provided I have headphones and access to internet.
(if you still feel the layout is berzerk, please post me with a screencap and some more details)

Cheers,

---------------------------------------------
Besides, it does everything the Asylum BB Flash tag is supposed to do AND everything it's not supposed to do - eg xss Flash "reembedding",
call that an "exercise" - hence the "getting warm" comment ,) And give me some time to get my hands on a working, free ActionScript dev environment.

(Edited by argo navis on 01-13-2008 18:43)

Sorry, I don't have much time. I'm at work.


Hum... have you tried you page with Images off ? That's why I mentionned ALT.

Using a CSS navigation matrix, would require a single image ( hence a single HTTP request ) instead of 6 and greatly decrease the total weight of the graphics.

While validation is a good thing, it certainly does not imply automagically accessiblity or best practices. A table based layout with navigation in Flash or Java ( without any fallback ) can still validate, but it's a still an horror.

six browsers able to display it, 4 as I expect, 2 close to what I expect, on three different OS's, at this point in space and time imply enough accessibility for my target audience,
so why not re-checking / re-reading when you have time?

I'll check the css navigation matrix, but am I not at the risk of killing the last bit of backwards compatibility remaining in there? (thus, do I risk
to kill all possibilites for people using old old browsers to get a glimpse of it?)

I'll pay back your review with one of mine : I keep IE in mind all the time, sadly - it sucks, but it still exists. In most of your scripts, IE is not even considered
(even in the Christmas card for Opera - the layout is broken in IE7).

I sometimes get the impression that you tend to mix "Opera best practices" and "web best practices" - hence some restraint from me regarding your tips, which I still value
as what they are : usually very good.

[offtopic]

I know the Xmas card thing sucked in IE6, I just didn't have the time. I wasted almost an entire day working around IE7. What was wrong for you with the script in IE7 ? AFAIK it degrades "well". I know there is no opacity fading at all, but that's due to a bug in IE7. The f*cker still doesn't support PNGs correctly ... try changing the opacity of a PNG32. Ditto when using exCanvas the Canvas-VML wrapper. The alpha blended parts become fully opaque and get a black background.

It makes no doubt I've become an accessibility & standard nazi. Those are the main concerns at work, and people don't hesitate to bash me when I forget it ... for good reason I must say.

Most of the scripts you've seen from me where some crazy size-optimized "shit". They are by definition full of quirks. I try to make them behave in several browsers but there is a limit to what one can do in 4k of 256b.

[/offtopic]

I am NOT calling you a standard nazi, I'd be that myself if there was anything like crystal clear standards.
Iframe with/without readystated, DOMlisteners here, embeds there, objects here.

I understand you're "hammered" with views from the Opera personel all the time, and this casually leads to some confusion :
CSS "matrix" is not a standard per se, and I don't see the benefit when opposed to this approach. It's slick. But?
YOU certainly see the benefit and can do great web stuff - I just do not get this special case and to me it would transpose all my images to css - so with css disabled, no images.

The Christmas card in IE7 : sometimes it shifted to some "align left", completely out of the main column.
But then, my "constellation clipping based scriplet" was crippled as well in IE7, sometimes it would fail
to detect the proper window size.

IE7 is hell for compatibility, this is clear, but not all the rest is as smooth as it should be in all browsers (what's with Safari ruining my CSS centering?).

Most of your tips are good as I said : just rediscovered that iframe is not yet a standard (wtf?) and that I can shove readystate in contexts other than use of xhr.

...But in the end, I guess it boils down to "all browsers suck" and "working on Sunday is bad for a person's nerves" So I'll grant you one point : this beta is lacking in stability.
I still am proud of the idea and mix of technologies so let's call it even and have a cup of coffe

*hands a cup of coffee to poi*

I am calling myself a standard nazi. Note that I'm a wuss compared to some people here, at work.

CSS navigation matrix is not a standard. It's a technique to do CSS+(x)HTML navigations reducing HTTP requests. You can/should couple it with the image replacement technique of your choice to cover the special cases ( images on/off + CSS on/off ) so that you still have a plain text fallback. All that makes for a fast ( to download ) and accessible navigation. OTOH having IMG tags in a navigation doesn't bring anything or make much sense. Navigations are not illustrations. Oh well ...

Ah, I think that bug in IE7 appeared when you resized the window

IFRAMEs are part of HTML 4.01 and XHTML 1.0

quote:

---

But in the end, I guess it boils down to "all browsers suck"

---

TRUE! They all rock and suck at the same time. Each one in its own special way.

*sip*

1) Yeah, I know the CSS matrix, thanks for the clarification, will try that somewhere else and see if it works for me.
2) I also found a hack for CSS centering with absolute positionning.
3) I have not yet fixed the "1000 milliseconds error", not certain how to work around it, but it's not hindering functionality.

4) Now a question.

Basically, I query my php snippet, on www.mydomain.com , which in turn extracts and returns the proper identifier for a given flv resource.
So far, so good.

I load it to an iframe, which messes up things because I have no control on the readystate for that - silly. And I do not like dojo or jquery workarounds.
I'd rather xhr the same php snippet - are there known cases I should worry about when retrieving the readystate for that?

I want it to work on recent browsers only : Op9.2+, FF2+, IE7+, Safari 2+, and Konqueror - nothing less, and nothing more.
(edit, it's all on XHR now, and works nicely - except in some rare ocurrences on... Opera ,) (but the core functionality is there and working,
on to cosmetics)

(Edited by argo navis on 01-14-2008 00:47)

XHR is definitely the way to go here. You just want to do a GET/POST request and receive the url of th e.flv back.

IFRAMEs have their advantages ( Comet ) but it doesn't help here.

You might/will get funky results regarding the readyStates 0,1,2 and 3 when doing a send() using the same XHR object several times, but the readyState 4 is consistent and that's what matters the most.

Thank you Figured it out for myself. You and I shouldn't be coding at this time btw, but with this music, I can hardly stop.

(Oh hell, might as well finish the controls, wrap it all up and post the final now.. But you owe me a js pong revenge one of these days,
for construtively nagging to the point of keeping me working overnight )

[ *clap* take 2 ]



(Edited by argo navis on 01-14-2008 00:52)

A JS pong could be fun after the January's 20 lines contest. Making it free for all could be even more interesting : anyone could claim the next iteration of the code so that people don't work on concurent iterations.

Hehe, been watching with great glee ^_^ Fun piece of code, but haven't had a chance to dismantle it yet to see quite what's going on - real world stuff is eating my time horribly (Exams and important coursework, not to mention the general day-to-day stuff...).
Hmm...the FFA pong sounds like a great idea...but the person who wins gets to decide the format for the following month :P

Wrayal

[P.s. sorry to hi-jack the thread, especially as I don't know when I'll use this, but what are the best resources for learning about advanced canvas usage? Or should I just dismantle existing code? Cheers!]

wrayval: "advanced canvas usage" is quite broad. You can fool around with the paths, transformations, imageData, globalCompositeOperations, ... so far I've done very little with paths and curves. I've only played with the classic transformations, drawImage and a bit of globalCompositeOperation. Have a look at the HTML5 spec or on developer.mozilla.org.

No prob. "hands wrayal a cup of coffee for the exams preparation".

I'll give you some elements of the recipe, a quick rundown :

• part 1 - is in the multimedia forum, "how to strip a youtube video from the crippled player of the damned (tm)" - transposed to php (a simple url stripper, pseudo proxy, just outputs
  
  the "t param" out of youtube link.
  
  
  
  Without that, no way to hide the movie completely (for some reason), and no way to control the playback using js + lower quality.
• part 2 - is here : my Swish trial expired as I was tweaking, so I grabbed the following swf and bug fixed some ugly things in it's implementation - http://flv-player.net/players/js/
• part 3 - could have been SWFObject, but I was concerned about the code clashing with my script
• part 4 - was all the "wtf" kind of fiddling around, like "okay... Ajax XSS, too complex, Iframe, major pain in the rear for the purpose. Now what's poi saying about my layout?

As you can see from the demo, the guy who built the swf uses a strange kind of js "listener" object, called, imho, by crafting a javascript url inside the ActionScript.
Hence the difficulty working around his "1000 milliseconds bug", I could flasm it, but...

At this point, the core works in Safari BUT that browser messes up with my nifty css centering, and the usual centering technique doesn't seem to want
to work for me - I tried all possible combinations of fixed width, relative, absolute positionning, no go.

The rest truely boils down to making the buttons, plugging them in, tailoring functionality a bit, polishing what I can (debugging as much as possible), and packaging.
But I am tired.

*Yaaaaaaawwwwwwwwwwwns*
*Smiles thinking that a php 10 liner, a short javascript, and a 5kb flash tool can do the magic, and thinking of ways other people could
play with this and expand on it*
*And smiles also at the thought of how many servers will be sold to youtube in order to compensate for my hammering their repositories *

I'll write more when I can, but the JavaScript rollover thing made me blush.

HMTL for data, CSS for presentation, Javascript for Behaviour!!! MVC, MVC!

Hm, let's not get feely feely, but I think I got your point anyway :
-------------------------------------------------------------------------
- disabled css in firefox and compared a few pages : mine, the css matrix example, p01.org.
- all degrade equally well except that mine keeps images and active rollovers for linkage.

- disabled images - oops, righto, my site is not accessible any longer.

But what about portable browsers? I'd like to see my page as close as it is now on portable devices as well - psp, mobile phone, ipod touch, you name it.

Well you can tailor different CSS style sheets for different devices if you don't have a capture and redirect script per device.

The media attribute

It's worth noting though that even though this is a standard, the handheld media property may not be associated by all handheld devices.

That's too much forking for me - Poi already pointed this out, but seriously? I don't even want to get started tailoring
to this and that rival devices - I couldn't care less : I consider it's up to devices and browser vendors to take care of the most
in terms of accessibility and standards compliance.

I am seriously serious : what does that mean, "replacing my images with a "slick" CSS trick that implies 25 stylesheets
for hundreds of different devices"? No, really? I may be a bit stubborn here, alt tags ok, but this?

Isn't it a bit overdone? Images are core. Rollovers are core. And I know of decent interfaces that do not rely 98% on the css for the sake
of saying "I am up to the latest trends".

Screw the rules : they are made for followers. Unless I am 100% confident that the "matrixxx kewl approach" is adding
considerable value to mine, I don't see the point.

Ok, well these techniques are there to aid in code efficiency. You're very accustomed to writing JavaScript so I suppose you don't see any problem with writing up a rollover script. I personally like to create one matrix image, and use CSS as I'm more familiar with doing it that way.

With regards to whether this is presentational or behavioural, well it's a bit of a grey area.

I am in agreement about not bothering writing different stylesheets for different devices, the standards are there, and with clean XHTML and a progressively enhanced site using CSS, JavaScript and even Flash, you shouldn't have any trouble using your website on other devices. If the vendors haven't created good enough software it's their problem not yours.

One more thing, I get persistent errors on your site, I can't really help you debug them, but the error is "invalid assignment left-hand side" get_video.php line 1. it keeps re-occurring every second.

Thanks Blaise Poi pointed it out - it is not really an error (at least not mine) : it's a tad long to explain,
but it comes from some ActionScript inside the 3rd party flv container I use - one variable gets "wild" for some reason,
while still acting completely normally (this may be the same as a problem reported in dojo, when Firefox whines about something
while it should not).

I have now trapped the error to oblivion for your convenience - suspect it has to do with the character encoding, am not sure sadly.

This said, I value your input enough to have gone on a "browsershot rampage" :
http://browsershots.org/http://www.beyondwonderland.com/

(Edited by argo navis on 01-14-2008 17:34)

quote:

---

I am in agreement about not bothering writing different stylesheets for different devices, the standards are there, and with clean XHTML and a progressively enhanced site using CSS, JavaScript and even Flash, you shouldn't have any trouble using your website on other devices. If the vendors haven't created good enough software it's their problem not yours.

---

Word ... except when the vendor is hUUUge and you can't ignore its quirks. As for progressive enhancements, just a tiny bit a CSS media queries can help a great deal.

Fwiw, all controls are now bound to some user interaction (even the placeholders for ff and rewing).
The volume is a bit quirky until I implement a chromey slider thing (for now it works by pressing mousedown, and it loops from 0 t0 100
so it can be confusing).

But the tune swapping, pausing, rewind, ff (in Shuffle mode for now) work a threat, and it does ressemble
a real radio + you can simply copy/paste the playlist in the "playlist" div It's loaded at startup.

Life is a bit too hectic for toys right now, but I will shortly be able to post it for download and easy integration everywhere

Me likes music, so [clap - take 3]

RAaah, I finally found again something I saw 1-2 months ago : Songza, a site using youTube as a radio channel. Who knows, that might help with your experimentations.

Cool, thanks. Well, I know how the guy does his thing, but I am "less ambitious", or rather, my ambitions aim at something else :

Goal 1 - for it to look exactly like the ipod touch pannel, pixel per pixel
Goal 2 - easy to plug out and back into any website
Goal 3 - easy to feed with tunes

And I must admit that the songza thing is well done (based on the youtube extensions for flex - they have an rdf feed or something for him to query),
but it's darn slow. From the various hispeed connections I used to test mine, I have much faster results with my much tynier snippet.

Will keep you posted.

(Added little "halo over" scritplet to simulate the original ipod touch effect, and some other things like shuffle/sequence play..)