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.

UShout Chrome Plugin ver 2014.2.6.2 update log

New testing version: 2014.2.6.2.

Changes from ver. 2013.12.9.0:

I almost removed everything that was working. You heard me right, I rolled back. I just want to re-write it so that everything is better organized and easier to understand, hopefully.

Screenshot 2014-02-07 05.23.54

Some files are re-named. Many files have been commented out. I might add some of them back but I think most likely I’ll just re-write all of them.

Now the ‘main.js’ is replaced by the ‘content_document_start.js’, which I think has a better name. 🙂

So what has been done in this brand new version? Well, very little.

But I did added something I think useful. I brought 4 new libraries of mine in to enrich the features. The PQUEUE, SETRACE and UNIQUE-IT are just small tools to help with coding, but the iNotiC could be something more interesting to the users; it’s a notification-center-like logging system!

Previously I only used console logs to give feedbacks to myself and some caring users. Then it got to the point there were just too many logs, mixed along with errors and warnings from Youtube page itself! Catching one specific log line got harder and harder. Also when Chrome is re-rendering the DOM (when there are changes in the DOM structure) and the Inspector is activated, things will slow down, if not freeze up, badly because Chrome needs to do tons of updates in the Inspector as well. Well now I put this new logging system in, it looks, at least I think, much better!

The way this iNotiC library helps is that I’m using it to prompt critical messages, and even in a good-looking way! Here are some snapshots:

Screenshot 2014-02-07 05.41.27

Screenshot 2014-02-07 05.45.22

See those red/gray blocks top right? They are prompted by ushout plugin through iNotiC. Don’t they look nice? 😀

So with that, what I’ve finished so far, that really is related with the ushout project itself, are the follows:

  • Detection of push state. Youtube is using html5 push state to change the url while NOT reloading the page, but only use ajax to load the new page. Successful detecting new states being pushed is crucial to knowing user is getting to another page and therefore the plugin needs to reset whatever changes it has done to the page and prepare to modify the new one.
  • Detection of youtubePlayerReady. It’s only safe to request Youtube Player APIs when youtubePlayerReady is detected.
  • A code structure for the outer most loop of logic of the plugin. This is done with the help of PQUEUE.


Plan for next?

Now that I know exactly when the user is on a page watching a video, I know when the plugin needs to make modifications to the video player. Maybe I’ll add a ‘full-window’ button first (because I really want one) but before adding any other controllers, I need to make sure I can detect all the events happening during a video such as buffering, pausing, playing, ad playing, stopping, seeking, etc.

I’ll see what I can do over this weekend.

Now I need to head to my bed!

Start working on U-Shout (again)

Well I made a proof-of-concept demo here a long time ago, but I really see the need out there and I think people will really like this, so I decided to make it into something more than a demo, a working thing hopefully.

The idea of the ‘You Shout’, or ‘UShout’ for short, is a special type of commenting service that allows you to post and see comments along with the video playing.

The whole project will be two parts. The first part is the server side program, which handles user authentication (I’m thinking of Google OAuth 2.0) and all the comment data (since I haven’t found a way to let Youtube do that :P). The second part is browser plugin for Chrome (firstly, and maybe Firefox, Safari and IE later. Yes, IE is for sure the last.) to modify Youtube pages for this service.

The code for the browser plugin is hosted on Github at the moment. I’m thinking about moving it to google code later if I see more benefits (I don’t really know what those would be, just saying).

I’ll try to keep my blogs up on the progress of this project.

Hope you like it. Thanks. 🙂