Skip to content

Instantly share code, notes, and snippets.

@gbrayut
Created June 13, 2010 23:14
Show Gist options
  • Save gbrayut/437078 to your computer and use it in GitHub Desktop.
Save gbrayut/437078 to your computer and use it in GitHub Desktop.
Chrome Youtube Extension
//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
@gbrayut
Copy link
Author

gbrayut commented Aug 10, 2010

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment