Chrome Youtube Extension

ytc.js

//Modified version of Youtube Automatic Quality changer that supports:
//    Wide-Mode with white background and reset to default when wide-mode is removed
//    Full-screen resize with auto-resize on window change
//    Quicklist detection and auto-resize using timer
//    Disable annotations. Perform manually using: http://www.youtube.com/account#playback/annotations
//Original source: https://chrome.google.com/extensions/detail/hgijgnfdfpfnkfliikinfajhdmphahpj
//Apply changes to "C:\Users\<username>\AppData\Local\Google\Chrome\User Data\Default\Extensions\hgijgnfdfpfnkfliikinfajhdmphahpj\1.31_0\ytc.js"
//TODO:
//    Add page action for max video size and channel->standard page link. (see comments page)
//    Add support for detecting non-widescreen aspect ratio? (still works resonably well)
//    Detect when scrollbars are visible and resize accordingly (sometimes happens when window is resized too small)
//    Drag and drop to quick play list?
//Test video with all video sizes: http://www.youtube.com/watch?v=izeBoPOpmY8
//NOTE: for testing in javascript console use mplayer = document.getElementById("movie_player") 
//Documentation for mplayer ActionScript api: http://code.google.com/apis/youtube/flash_api_reference.html

var qualitychanger = {
mplayer: undefined, //see http://code.google.com/apis/youtube/flash_api_reference.html#setPlaybackQuality
MaxQuality: "hd720", //one of "highres", "hd1080", "hd720", "large", "medium", "small" or "default" to let youtube pick
count: 0, 
hOffset: 0,
ssStyles: null, //Stylesheet used to modify wide styles;
waitForYT: function()
{
    qualitychanger.count++;
    if( qualitychanger.count > 10 )
    {
        return;
    }
    if( !document.getElementById("movie_player") )
    {
        qualitychanger.count++;
        window.setTimeout('qualitychanger.waitForYT()', 100 );
        return;
    }
    if( typeof document.getElementById("movie_player").getPlaybackQuality == "function" )
    {
        qualitychanger.mplayer = document.getElementById("movie_player");
        qualitychanger.changeQuality();
    }
    else
    {
        window.setTimeout('qualitychanger.waitForYT()', 100 );
    }
},
changeQuality: function()
{
    //Change quality up to MaxQuality requested. Should default to next available as per http://code.google.com/apis/youtube/flash_api_reference.html#setPlaybackQuality
    //levels = qualitychanger.mplayer.getAvailableQualityLevels();
    //if(levels.indexOf(qualitychanger.MaxQuality) > 0){
        qualitychanger.mplayer.setPlaybackQuality(qualitychanger.MaxQuality);
    //} else { //Selected is not listed use highest available.
        //qualitychanger.mplayer.setPlaybackQuality(levels[0]);
    //}
    
    qualitychanger.resizePlayer(); //Resize player on load
    
    //Set background color to white instead of gray
    document.getElementById("watch-video-container").style.backgroundColor = "white";
},
resizePlayer: function()
{
        //Set Wide mode
        var A = document.getElementById("baseDiv");
        if (A.className.indexOf("watch-wide-mode") == -1) {
            A.className += " watch-wide-mode";
        }
        A = document.getElementById("content");
        if (A.className.indexOf("watch-wide") == -1) {
            A.className += " watch-wide";
        }
        A = document.getElementById("watch-video");
        if (A.className.indexOf("wide") == -1) {
            A.className += " wide";
        }
        
        //detect quicklist and adjust hOffset accordingly
        if(window.location.toString().indexOf("&videos=") > 0){ //Leave space for quick play bar
            if(document.getElementById("quicklist").className.indexOf("max") > 0){
                qualitychanger.hOffset = 127;
            } else { //quicklist is minimized
                qualitychanger.hOffset = 27;
            }
            //register callback to resize player when toolbar is expanded
            var btn = document.getElementsByClassName("yt-uix-button-icon-quicklist-toggle")[0];
            btn.parentElement.onclick = function fn(event){qualitychanger.resizePlayer();return false;};
            //TODO: fix issue with "Your subscriptions" popup menu
            //qualitychanger.mplayer.addEventListener("onStateChange", "qualitychanger.Testing"); //DOESNT WORK :-( http://code.google.com/apis/youtube/js_api_reference.html#addEventListener
            window.setTimeout("qualitychanger.checkQuicklist()", 500); //HACK: set timer to resize player to deal with quicklist changes...
        } else {
            qualitychanger.hOffset = 0;
        }

        //detect optimal video size
        var h = window.innerHeight - qualitychanger.hOffset;
        var w = window.innerWidth;
        var wv = document.getElementById("watch-video");        
        var wp = document.getElementById("watch-player");
        //Use yt.config_.IS_WIDESCREEN to detect aspect ratio of video
        //16:9 for Widescreen (see http://www.youtube.com/watch?v=uofWfXOzX-g)
        //4:3 for Standard (see http://www.youtube.com/watch?v=LiRWu2ElRpI)
        //Decided to just use 16:9 for all videos... it will just leave some black bars on the side
        var intW = (w-20); //Leave room for scrollbars
        var intH = ((((w)*9)/16)+20);
        if(intH > h){
            //alert("Resize to fit screen:\r\nWas "+intW+":"+intH+"\r\nNow "+Math.floor((16/9)*h-20)+":"+h);
            intH = h;     
            intW = Math.floor((16/9)*h)-20;//Still need space for scroll bars
            if(intW > (w-20)){ //Video still too wide. Just change width without using widescreen aspect ratio
                intH = h;     
                intW = w-20; //not the right ratio, but will just add small black bars on the sides.
            }
        }
        
        //Set video player size
        //wv.style.width=intW+"px";
        //wp.style.width='100%';
        //wp.style.height=intH+"px";
        
        //Apply changes to .wide style instead of element so that they will be removed when the wide setting is removed
        if(qualitychanger.ssStyles == null){ //Add new stylesheet on first load
            var head = document.getElementsByTagName('head')[0],
                style = document.createElement('style'),
                rules = document.createTextNode(".wide {width: "+intW+"px !important} .wide .flash-player {height: "+intH+"px !important;width: 100% !important;}");
            style.type = 'text/css';
            style.appendChild(rules);
            head.appendChild(style);
            qualitychanger.ssStyles=style.sheet;
        } else { //Re-use existing stylesheet
            qualitychanger.ssStyles.deleteRule(0);//Delete old rules
            qualitychanger.ssStyles.deleteRule(0);
            qualitychanger.ssStyles.insertRule(".wide {width: "+intW+"px !important}", 0);
            qualitychanger.ssStyles.insertRule(".wide .flash-player {height: "+intH+"px !important;width: 100% !important;}", 1);
        }
        
        window.scrollTo(0,wv.offsetTop);//Scroll so that video is in window. TODO: set timer to fix scroll in case video is reloaded and browser returns to previous scroll position?
},
checkQuicklist: function()
{
    //Check to see if the quicklist element has changed
    if(document.getElementById("quicklist")){
        var bMin = document.getElementById("quicklist").className.indexOf("min") > 0;
        if(bMin && (qualitychanger.hOffset != 27)){//resize to min size
            qualitychanger.resizePlayer();
        }else if(!bMin && (qualitychanger.hOffset != 127)){//resize to max size
            qualitychanger.resizePlayer();
        } else { //Fine for now, check again in 1 second
            window.setTimeout("qualitychanger.checkQuicklist()", 1000); 
        }
    }
}
};
//alert(document.getElementById("movie_player").getDuration() );
window.addEventListener('load', qualitychanger.waitForYT, false);
window.addEventListener('resize', qualitychanger.resizePlayer, false);//Resize player on window resize

Still a work in progress. I want to add a few more features, write a blog post, make a video, and then post it to the Extensions library