Blog Lab You Shout

Updates on U-Shout

For the past days since last update, I’ve been working on solving some issues and here’s the story:

Last time I got to the point that the plugin was able to detect the page (by analyzing the url). Then the first problem I wanted to solve is ‘dynamically redirecting’ used by Youtube. I might not be naming this right but when you click on any links to redirect to another page (not opening in a new window), the page doesn’t actually reload. What actually happens is that Youtube intercepts the redirecting event, updates the address bar with the new pushState feature in html5, ‘rebuilds’ the page with Javascript and voila here you have the new page.

As a consequence, the scripts that get executed on document load will fail to work for new pages since there’s no ‘onload’ event when the new pages are simply rebuild with Javascript. Maybe Youtube is kind enough to fire another custom event when they are done with the page, but I’m not sure; I’ve been too lazy to finish reading all Youtube’s Javascript files to just find that out. But I found a workaround to that issue and that is by monitoring the “pushState” event of the window object. (It turned out that this workaround still caused many other not-yet-solved problems and you will see them in a minute.)

So I updated the plugin to re-analyze the address after every “pushState” events and make changes to the new pages accordingly. And there comes the first yet solved problem. Youtube first pushes the new state and then start rebuilding the page, which sounds alright. But if I also monitor “pushState” events and start modifying the page right after, my program will be in a race with Youtube’s and the result will just be unpredictable (and this is very very bad). The fix to that would be some ways to determine Youtube has finished modifying the page, or create new elements that Youtube won’t touch, and hide the ones Youtube works on. The later one might save me from lots of other troubles since I can avoid any further conflicts with Youtube, but that also means I need to handle everything taken care of by Youtube myself :(.

The next step was to detect what type of player is used on the page. Youtube has generally two types of player: the html5 player and the flash player (which has an AS3 version and an AS2 version). The plugin needs to do different modifications in either cases. But later I reverted this whole idea because I had a painful experience working with the html5 player (for one thing, it doesn’t even call “onYoutubePlayerReady”). I had to replace the player with an embedded version so things are consistent. So now the plugin will remove the player on the page right after loading and insert a new embedded version.

Then I hid the default control bar on the player and added a custom one so I can add my own controls without occupying extra space. The first thing I added was the ‘full-window’ toggle button because I like it the most :D.

And that’s about everything.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.