There are 110 previous versions of this script.
Add Syntax Highlighting (this will take a few seconds, probably freezing your browser while it works)
// ==UserScript==
// @id b77e78bb-5ab5-403b-ae45-7540077fbc64
// @name Youtube - Better Watch Page
// @namespace Takato
// @author Takato
// @copyright 2010+, Takato (http://userscripts.org/users/82358)
// @licence Summary: Free for personal non-commercial use; http://userscripts.org/scripts/show/101753
// @description Makes Youtube's "Watch" page (video page) better with a variety of features and options including a right-side description, older video player, style improvements, and more.
// @icon http://i.imgur.com/VQ8pr.png http://i.imgur.com/hfj8l.png
// @icon64 http://i.imgur.com/hfj8l.png
// @version 2013.05.16
// @require https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js
// @require https://userscripts.org/scripts/version/113580/416797.user.js
// @updateURL http://userscripts.org/scripts/source/101753.meta.js
// @downloadURL http://userscripts.org/scripts/source/101753.user.js
// @website http://userscripts.org/scripts/show/101753
// @grant GM_getValue
// @grant GM_setValue
// @grant GM_deleteValue
// @grant GM_registerMenuCommand
// @grant GM_listValues
// @grant GM_addStyle
// @include http://www.youtube.com/watch*
// @include http://youtube.com/watch*
// @include https://www.youtube.com/watch*
// @include https://youtube.com/watch*
// ==/UserScript==
var script = {};
script.version = "2013.05.16";
// SETTINGS -----------------------------
// This script has a settings screen on Youtube (a gear icon below the video)
// You need to set your settings on that screen.
// --------------------------------------
// DEBUG MODE ---------------------------
// To enable Debug Mode add "&debug=1" to the page address ( eg http://youtube.com/watch?v=jNQXAC9IVRw&debug=1 )
// To disable Debug Mode just go to a new page or remove "&debug=1"
// --------------------------------------
// Everything below this line shouldn't be edited unless you are an advanced user and know what you are doing.
// Defining script properties
script.name = "Better Watch Page";
script.shortname = "BWP";
script.website = "http://userscripts.org/scripts/show/101753";
script.discussion = "http://userscripts.org/scripts/discuss/101753";
script.icon = "http://i.imgur.com/VQ8pr.png";
script.icon64 = "http://i.imgur.com/hfj8l.png";
script.mainCSS = "";
script.mainCSS = "/* BWP Settings button */ #bwpSettingsButton img {background:url(http://s.ytimg.com/yt/img/master.png) 0px -216px !important; width:13px !important; height:12px !important;} #bwpSettingsButton:hover img {background-position: -13px -216px !important;} /* Page */ body {background:white !important;} #watch7-sidebar {width:320px !important; padding-right:0px !important;} #watch7-main {margin-left:auto !important; margin-right:auto !important; width:970px !important;} /* YousableTube Fix */ #ytf-main-div {border:0px !important; padding:4px 0px 0px 0px !important;} /* Header */ #yt-masthead-container, #masthead-expanded {z-index:2 !important; position:relative !important;} #yt-masthead-container {width:970px !important; margin:0 auto !important; margin-bottom:-5px !important; border-bottom-color:#CCCCCC !important; background:transparent !important;} #masthead-expanded-container {width:970px !important;} #logo-container {margin-left:0px !important; margin-right:16px !important; margin-top:-2px !important;} #logo-container:not(.doodle) #logo:not(.doodle) {background:url(https://s.ytimg.com/yt/imgbin/www-master.png) -79px -20px !important; width:110px !important; height:40px !important;} #logo-container .content-region {display:none !important;} /* 'Guide' Sidebar */ #guide {width:180px !important; left:50% !important; margin-left:-685px !important;} /* Player */ #player {margin-left:auto !important; margin-right:auto !important;} #watch7-container:not(.watch-wide) #player {width:970px !important;} #watch7-container.watch-wide #player #player-api {margin:0px auto !important;} /* Player 3 tweaks */ .player3 #player-api {background:transparent !important;} .player3 #player embed {height:calc(100% - 30px + 25px) !important; height:-webkit-calc(100% - 30px + 25px) !important;} .player3 #watch7-content {margin-top:-5px !important;} /* Video title */ #watch-vid-title {margin-bottom:5px !important; font-size:18px !important; font-weight:bold !important; width:970px !important; margin-left:auto !important; margin-right:auto !important;} #watch-vid-title h1 {font-size:19px !important; margin-top:0px !important; margin-bottom:5px !important; line-height:24px !important;} .watch-playlist #watch-vid-title h1 {padding-right:330px !important;} /* Playlist */ #playlist {position:absolute !important; left:50% !important; width:330px !important; margin-left:155px !important; min-width:0px !important;} #watch7-playlist-data {padding-top:0px !important; margin-bottom:0px !important; position:relative !important; top:-59px !important;} .watch7-playlist-bar {width:330px !important;} .watch7-playlist-bar-left {position:relative !important; height:22px !important; line-height:22px !important; top:19px !important; z-index:2 !important; float:none !important; width:auto !important;} .watch7-playlist-bar-left a.title {padding-left:0px !important;} .watch7-playlist-bar-right {width:inherit !important;} .watch7-playlist-bar-secondary-controls, #watch7-playlist-bar-controls {height:37px !important; line-height:52px !important;} /* Player 3 Playlist*/ .player3 #watch7-container:not(.watch-wide) #watch7-playlist-tray-container {height:358px !important;} /* Ads */ #watch-longform-ad, #watch-channel-brand-div {display:none !important;} #player {background:transparent !important;} /* Below Video */ #watch7-user-header {height:48px !important; padding-bottom:0px !important;} #watch7-user-header, #watch7-action-buttons, #watch-discussion {border-left-color:transparent !important; border-right-color:transparent !important; padding-left:0px !important; padding-right:0px !important;} #watch7-views-info {line-height:48px !important;} #watch7-action-panels {border-bottom:1px solid #E6E6E6 !important;} #watch7-action-panel-footer .yt-horizontal-rule {border-top:0px !important;} /* Video Size Button */ #videoSizeButton img {background:url(http://i.imgur.com/jAvuB.png) !important; width:16px !important; height:16px !important;} #videoSizeButton:hover img {background-position:-16px 0px !important;} .watch-wide #videoSizeButton img {background-position:-32px 0px !important;} .watch-wide #videoSizeButton:hover img {background-position:-48px 0px !important;} /* Like/dislike */ #watch-like-dislike-buttons {padding-top:1px !important; position:relative !important;} #watch-like-dislike-buttons button {margin-right:0px !important; opacity:0.9 !important; z-index:1 !important; position:relative !important;} #watch-like-dislike-buttons .video-extras-sparkbars {margin:0!important; position:absolute !important; top:0px !important; left:0px !important; width:100% !important; height:100% !important; border-radius:0 0 4px 4px !important; background:black !important;} #watch-like-dislike-buttons .video-extras-sparkbars .video-extras-sparkbar-likes {background-color:green !important; height:100% !important;} #watch-like-dislike-buttons .video-extras-sparkbars .video-extras-sparkbar-dislikes {background-color:red !important; height:100% !important; position:relative !important; left:1px !important;} #watch-like-dislike-buttons .video-extras-likes-dislikes {position:absolute !important; top:-10px !important; left:0px !important; width:100% !important; color:grey !important; font-size:11px !important; white-space:normal !important;} #watch-like-dislike-buttons .video-extras-likes-dislikes img {display:none !important;} #watch-like-dislike-buttons .video-extras-likes-dislikes .likes-count {float:left !important;} #watch-like-dislike-buttons .video-extras-likes-dislikes .dislikes-count {float:right !important;} /* Comments */ .removeCommentAvatars #comments-view .comment .yt-user-photo {display:none !important;} #comments-view .list-body + hr {display:none !important;} #comments-view .list-title {border-top:1px solid #CCCCCC !important; cursor:pointer !important; margin-bottom:0px !important;} #comments-view .list-body .comment {border-top:1px solid #EFEFEF !important; margin-top:6px !important; padding-top:7px !important; margin-bottom:0px !important;} /* Right Side Description */ #watch-channel-vids-div {background:#EEEEEE !important; border:1px solid #CCCCCC !important; margin-bottom:10px !important; width:auto !important; max-height:calc(360px + 30px) !important; max-height:-webkit-calc(360px + 30px) !important; overflow:auto; -moz-box-sizing:border-box !important; box-sizing:border-box !important; font-size:12px !important;} #watch-channel-vids-div a {color:#0033CC !important;} #watch-channel-vids-top {padding:0 5px !important; overflow:hidden !important; position:relative !important;} #watch-channel-icon {float:left !important; margin-top:6px !important; height:46px !important; width:46px !important; background-color:white !important; border:3px double #999999 !important; display:block !important; overflow:hidden !important;} #watch-channel-icon div {margin-left:-177px !important; float:left !important; text-align:center !important; width:400px !important;} #watch-channel-icon a {display:block !important;} #watch-channel-icon img {height:46px !important;} #watch-channel-stats {width:auto !important; float:left !important; line-height:18px !important; margin-left:8px !important; margin-top:2px !important;} #watch-channel-stats .contributor {font-weight:bold !important;} #watch-channel-stats .watch-video-added {color:#333333 !important; margin-right:10px !important;} #watch-channel-subscribe {float:right !important; margin-top:3px !important; padding-top:3px !important; width:116px !important; position:absolute !important; right:6px !important;} #watch-channel-subscribe button {background:url(http://s.ytimg.com/yt/img/master.gif) 0px -175px #FED81C !important; border:1px solid #ECC101 !important; font-weight:bold !important; height:23px !important; text-shadow:none !important; font-size:12px !important; float:right !important; padding:0 0px !important;} #watch-channel-subscribe button:hover {background-position: 0px -200px !important; -moz-transition:none !important; -webkit-transition:none !important; box-shadow:none !important;} #watch-channel-subscribe button .yt-uix-button-content {position:static !important;} #watch-channel-subscribe button .yt-uix-button-content span {color:#994800 !important; text-shadow:none !important; } #watch-channel-subscribe button.hover-enabled:hover .subscribed-hh-label {line-height:0px !important;} #watch-channel-subscribe .yt-uix-button-icon-wrapper {display:none !important;} #watch-video-details-toggle div {font-size:11px !important; padding-bottom:1px !important;} #watch-video-details-toggle a {cursor:pointer !important;} #watch-video-details {display:block !important; line-height:15px !important;} #watch-video-details-inner-more, #watch-description-extra-info {margin-top:4px !important; position:static !important; padding:0 6px 4px !important; overflow:hidden !important;} #watch-metadata {padding-top:5px !important; overflow:hidden !important; font-size:11px !important;} #watch-metadata h4 {color:#666666 !important; font-weight:normal !important; font-size:11px !important; display:inline-block !important; margin:0 !important; margin-top:5px !important; cursor:pointer !important; border:0 !important; padding:0 !important;} #watch-metadata div {display:inline !important;} #watch-metadata br + br {display:none !important;} #watch-metadata h4:hover {text-decoration:underline !important;} #watch-metadata #metadata-label {display:none !important;} #watch-metadata.meta-hidden h4, #watch-metadata.meta-hidden div, #watch-metadata.meta-hidden br {display:none !important;} #watch-metadata.meta-hidden #metadata-label {display:inline-block !important;} #watch-desc-extra-info, #watch-url-embed-wrapper {margin:0px 5px !important; width:auto !important; min-height:0 !important; border-top:1px solid #CCCCCC !important; padding:0 !important;} #watch-desc-extra-info .watch-extra-info-long .link-list a {display:inline !important;} #watch-url-embed-wrapper > div {font-size:11px !important; padding:1px 0 0 6px !important; padding-top:5px !important; clear:both !important; overflow:hidden !important;} #watch-url-embed-wrapper > #watch-embed-div {padding-bottom:3px !important;} #watch-url-embed-wrapper label {color:#666666 !important; float:left !important; font-size:11px !important; font-weight:bold !important; line-height:18px !important; margin-right:5px !important; min-width:40px !important; text-align:right !important;} #watch-url-embed-wrapper input {float:left !important; font-size:10px !important; width:240px !important;}";
script.settings = new Array();
script.languageStrings = new Array();
script.currentLanguage = "";
// Stop if not Watch7
watch7 = document.getElementById("watch7-container");
if (watch7 == null) {
masthead = document.getElementById("masthead");
jError = document.createElement("div");
jError.setAttribute("style", "display:inline-block; width:160px; float:right; font-size:11px; border:1px solid grey; padding:0; cursor:pointer; border-radius:4px;");
jError.innerHTML = "<B>'"+script.name+"' can not run.</B> (Click for information)";
masthead.insertBefore(jError, masthead.children[0]);
jError.addEventListener("click", function() { alert("You are on an old version of Youtube. "+script.name+" now only works on the new version. Please install an older version of "+script.shortname+" until you get the new version of Youtube - Install this: https://userscripts.org/scripts/version/101753/530292.user.js"); }, true);
return;
}
// Check for incompatible setups
var incompat = false;
var incompatMsg = "";
// Greasemonkey standards check
try {
GM_setValue("gmSupport", true);
doesIt = GM_getValue("gmSupport");
if (!doesIt) {
incompatMsg = "Not GM compatible. "
incompat = true;
}
} catch (ex) {
incompatMsg = "Not GM compatible. "
incompat = true;
}
if (!incompat) {
// Config script check
try {
if (!Config) {
incompatMsg = "No Config Script. "
incompat = true;
}
} catch (ex) {
incompatMsg = "No Config Script. "
incompat = true;
}
// jQuery check
try {
var test = $("body").attr("class");
} catch(ex) {
incompatMsg += "No jQuery.";
incompat = true;
}
}
// Abort if incompatible
if (incompat) {
masthead = document.getElementById("yt-masthead-content");
jError = document.createElement("div");
jError.setAttribute("style", "display:inline-block; width:160px; float:right; font-size:11px; border:1px solid grey; padding:6px; margin-left:4px; cursor:pointer; border-radius:4px;");
jError.innerHTML = "<B>'"+script.name+"' isn't working for you!</B> For details about how to fix it, click here.";
masthead.insertBefore(jError, masthead.children[0]);
jError.addEventListener("click", function() { alert("If you've just updated "+script.shortname+" you might just need to reload the page! Otherwise, please read the information that will now open in a new tab. Your error message is '"+incompatMsg+"'."); window.open("https://userscripts.org/topics/119618"); }, true);
return;
}
// Set up debug mode
script.debugOn = false;
script.debugMessages = "";
if (checkForDebugMode()) {
script.debugOn = true;
debugModeStart();
debug("Starting "+script.shortname+" debug log");
debug(script.shortname+" version: " + script.version);
debug("HTML lang: " + document.getElementsByTagName("html")[0].getAttribute("lang"));
debug("Body class: " + document.getElementsByTagName('body')[0].getAttribute("class"));
debug("Direction: " + document.getElementsByTagName("html")[0].getAttribute("dir"));
debug("Page class: " + document.getElementById("page").getAttribute("class"));
}
// Stop this script if this isn't a proper YT video page
debug("Stop script if not proper YT video page");
vidplayer = document.getElementById("watch7-player-unavailable");
if (vidplayer != null) {
debug("This isn't a proper YT video page. Now ending script. watch-player-unavailable.");
debugModeEnd();
return;
}
winLoc = window.location.toString();
if (winLoc.indexOf("watch_editaudio") > -1) {
debug("This isn't a proper YT video page. Now ending script. watch_editaudio.");
debugModeEnd();
return;
}
if (winLoc.indexOf("watch_popup") > -1) {
debug("This isn't a proper YT video page. Now ending script. watch_popup.");
debugModeEnd();
return;
}
// Stop if already running conflicting script
debug("Stop if already running conflicting script");
if ($("body").hasClass("rsdScript")) { // Right Side Description
alert("\"Better Watch Page\" wants to run but can't because \"Right Side Description\" is already running. Please disable one of them.");
debug("Script conflict: rsdScript");
return;
} else if ($("body").hasClass("rsdpScript")) { // Old BWP (Right Side Description Panel)
alert("\"Better Watch Page\" (BWP) has detected that you have an old version installed called \"Right Side Description Panel\" (RSDP). RSDP has been replaced by BWP, so please remove RSDP. You should then make sure BWP is up-to-date.");
debug("Script conflict: rsdpScript");
return;
} else if ($("body").hasClass("bwpScript")) { // Already running BWP
// alert("\"Better Watch Page\" (BWP) has detected that you have multiple copies of the script running. Please remove one of the copies, and then make sure the remaining one is up-to-date. ");
debug("Script conflict: bwpScript? Script possibly just updated.");
return;
} else if ($("body").hasClass("bwpandaScript")) { // BWPanda
alert("\"Better Watch Page\" (BWP) can't run at the same time as \"Better Watch Panda\" (BWPanda). Please disable one of them.");
debug("Script conflict: bwpandaScript");
} else {
$("body").addClass("bwpScript");
}
// Check for HTML5 mode
debug("Check for HTML5 video");
html5 = false;
if ($("#player").hasClass("html5-player")) {
debug("Page has HTML5 video");
html5 = true;
} else {
debug("No HTML5 video");
}
// Script crash notification
debug("Constructing crash notification");
$(document.createElement("div"))
.attr("id", "bwpCrash")
.attr("style", "font-size:12px !important; border:1px solid black !important; padding:2px !important; margin:2px !important; font-weight:bold !important;")
.html("'" + script.name + "' has crashed. Refresh the page if this is the first time. If it still crashes, try 'debug mode' and <a href='"+script.discussion+"' target='_window'>report</a> the error to the script developer. <a class='debugLink' href='" + window.location + "&debug=1'>Click here</a> to load debug mode (page will reload). Already running debug mode? The debug log should be displayed above.")
.insertBefore("#page");
if (!script.debugOn) {
GM_registerMenuCommand("Enable Debug Mode for \"" + script.name + "\"", debugEnable, "D");
}
// Insert Main CSS
debug("Inserting main CSS");
insertCSS(script.mainCSS);
debug("Main CSS is now active");
// Set up multiple language support
determineLanguage();
setUpLanguage();
// Settings
defineSettings();
fetchCurrentSettings();
setUpConfig();
// Settings button
debug("Making settings button");
$(document.createElement("span"))
.attr("id", "bwpSettingsButton")
.append($(document.createElement("button"))
.attr("class", "action-panel-trigger yt-uix-button yt-uix-button-hh-text yt-uix-button-empty yt-uix-tooltip")
.attr("onclick", ";return false;")
.attr("type", "button")
.attr("role", "button")
.attr("title", "'"+script.name+"' Script Settings")
.html("<span class='yt-uix-button-icon-wrapper'><img class='yt-uix-button-icon yt-uix-button-icon-action-panel-bwpsettings' alt='' src='//s.ytimg.com/yt/img/pixel.gif'/><span class='yt-uix-button-valign'></span></span>")
.click(displaySettings)
)
.appendTo("#watch7-secondary-actions");
debug("Settings button done");
// Center page, not left
debug("Centering page");
$("body")
.removeClass("site-left-aligned")
.removeClass("sidebar-expanded");
// Remove VEVO branding
debug("Removing VEVO branding if exists");
$("#watch7-container")
.removeClass("watch-branded")
.removeClass("watch-branded-banner");
$("#player")
.attr("style", "")
.removeClass("watch-branded-banner");
$("#watch7-branded-banner").remove();
// Change Video Player [based on setting]
if (!html5) {
debug("Change video player");
playerContainer = $("#player #player-api");
playerElement = $("#movie_player");
flvars = playerElement.attr("flashvars");
plsrc = playerElement.attr("src");
if (setting("optionPlayerStyle").val == 2) { // Player 3
debug("Using Player 3");
plsrc = "//s.ytimg.com/yt/swfbin/watch.swf";
flvars = flvars.replace("watermark=", "watermark=0&null=");
flvars += "&watermark=0";
$("body").addClass("player3");
} else { // Default player
debug("Using Default Player");
}
if (setting("optionPlayerColour").val == 1) { // White/Light
debug("Using white/light colour");
flvars = flvars.replace("theme=dark", "theme=light");
flvars += "&theme=light";
} else { // Default colour (Black/Dark);
debug("Using Default Colour");
}
// Apply the settings
debug("Applying player settings");
playerElement.attr("wmode", "transparent");
if ((setting("optionPlayerStyle").val != 0) || (setting("optionPlayerColour").val != 0)) {
debug("Refresh the player");
playerElement.attr("flashvars", flvars);
playerElement.attr("src", plsrc);
playerElement.appendTo(playerContainer);
var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver;
var vidObserver = new MutationObserver(function(mutations) {
// Re-apply the chosen player if something changes it
if ($("#movie_player").attr("src") != plsrc) {
debug("Player has been reverted by YT. Now setting back to chosen player");
$("#movie_player").attr("flashvars", flvars);
$("#movie_player").attr("src", plsrc);
$("#movie_player").appendTo(playerContainer);
debug("Player now back to chosen player");
}
});
vidObserver.observe(playerContainer[0], {attributes:true,childList:true});
}
debug("Player done");
}
// Move title above video
debug("Moving title above video");
$(document.createElement("div"))
.attr("id", "watch-vid-title")
.html("<h1>"+$("#watch-headline-title").html()+"</h1>")
.prependTo("#watch7-container");
$("#watch-vid-title span").removeClass("yt-uix-expander-head");
$("#watch7-headline").remove();
debug("Title moved");
// Right-side metadata default values
var userName = "<i>User Unknown</i>";
var userURL = "";
var userImage = "//s.ytimg.com/yt/img/no_videos_140-vfl1fDI7-.png";
var uploadDate = "<i>Date Unknown</i>";
var vidDesc = "<i>no description available</i>";
var vidMetadata = "";
var vidExtraInfo = "";
// Grab right-side metadata values
debug("Grabbing metadata");
userName = $("#watch7-user-header .yt-user-name").text();
userURL = $("#watch7-user-header .yt-user-name").attr("href");
userImage = $("#watch7-user-header .yt-user-photo img").attr("src");
uploadDate = $("#watch-uploader-info #eow-date").text();
vidDesc = $("#eow-description").html();
// Remove watch7 description bits
debug("Removing watch7 description bits");
$("#watch-description") //Un-collapse description
.removeClass("yt-uix-expander-collapsed")
.removeClass("yt-uix-button-panel");
$("#watch-description-toggle").remove(); //Un-collapse description
$("#eow-description").remove(); // Desc
$("#watch7-user-header .yt-user-photo").remove(); // Photo
$("#watch7-user-header .yt-user-name").remove(); // Name
$("#watch7-user-header .yt-user-videos").remove(); // Vid count
$("#watch7-user-header .yt-user-separator").remove(); // Separator
$("#watch-uploader-info").remove() // Date
// Create right side description panel
debug("Creating right side description panel");
$(document.createElement("div"))
.attr("id", "watch-channel-vids-div")
.insertBefore("#watch7-sidebar .watch-sidebar-section:first");
$("#watch-channel-vids-div")[0].innerHTML = "" +
"<div id='watch-channel-vids-top'>" +
" <div id='watch-channel-icon' class='user-thumb-medium'>" +
" <div>" +
" <a class='url' href='"+userURL+"'>" +
" <img class='photo' src='"+userImage+"'/>" +
" </a>" +
" </div>" +
" </div>" +
" <div id='watch-channel-subscribe' class='sub-button'>" +
" </div>" +
" <div id='watch-channel-stats'>" +
" <a class='hLink fn n contributor' href='"+userURL+"'>"+userName+"</a>" +
" <br/>" +
" <span class='watch-video-added post-date'>"+uploadDate+"</span>" +
" <br/>" +
" <div id='watch-video-details-toggle'>" +
" <div id='watch-video-details-toggle-more'>" +
//" (<a class='hLink show-less'>less info</a>)" +
" </div>" +
" </div>" +
" </div>" +
"</div>" +
"<div id='watch-video-details'>" +
" <div id='watch-video-details-inner'>" +
" <div id='watch-video-details-inner-more'>" +
" <div class='watch-video-desc description'>" +
" <span class='long-desc'>"+vidDesc+"</span>" +
" </div>" +
" <div id='watch-metadata' class='meta-data'>" +
" "+vidMetadata+
" </div>" +
" </div>" +
" </div>" +
"</div>" +
"<ul id='watch-desc-extra-info' class='meta-extra'>" +
" "+vidExtraInfo+
"</ul>" +
"";
// Move subscription button to right side description
debug("Moving subscribe button to description panel");
$("#watch7-user-header .yt-uix-button-subscription-container button.yt-uix-subscription-button")
.appendTo("#watch-channel-subscribe");
$("#watch7-user-header .yt-uix-button-subscription-container").remove();
// Remove "watch-desc-extra-info" if empty
debug("Remove 'watch-desc-extra-info' empty");
watchExtraInfo = $("#watch-desc-extra-info");
try {
if (watchExtraInfo[0].children.length < 1) {
debug("It is empty, remove it.");
watchExtraInfo.remove();
}
}catch(ex){}
// Add expand/shrink player button if using Player 3
if ((!html5) && (setting("optionPlayerStyle").val == 2)) {
debug("Creating expand/shrink player button");
$(document.createElement("span"))
.attr("id", "videoSizeButton")
.append($(document.createElement("button"))
.attr("class", "action-panel-trigger yt-uix-button yt-uix-button-text yt-uix-button-empty yt-uix-tooltip")
.attr("onclick", ";return false;")
.attr("type", "button")
.attr("role", "button")
.html("<span class='yt-uix-button-icon-wrapper'><img class='yt-uix-button-icon yt-uix-button-icon-action-panel-videosize' alt='' src='//s.ytimg.com/yt/img/pixel.gif'/><span class='yt-uix-button-valign'></span></span>")
.click(function() {
$("#watch7-container").toggleClass("watch-wide");
setPlayerSize();
})
)
.insertBefore("#bwpSettingsButton");
debug("Expand/shrink button created");
setPlayerSize();
}
// Likes/dislikes
debug("Likes/dislikes");
$("#watch-like-dislike-buttons").appendTo("#watch7-user-header");
$("#watch-like-dislike-buttons button")
.removeClass("yt-uix-button-text")
.addClass("yt-uix-button-default")
.addClass("yt-uix-tooltip-reverse");
$("#watch7-views-info .video-extras-sparkbars").appendTo("#watch-like-dislike-buttons");
$("#watch7-views-info .video-extras-likes-dislikes").appendTo("#watch-like-dislike-buttons");
// Format comment sections
debug("Format comment sections");
$("#comments-view h4").addClass("list-title");
$("#comments-view h4").each(function(){
$(this).attr("list-index", $("#comments-view h4").index(this));
});
$("#comments-view h4 + ul, #comments-view h4 + form ~ ul#all-comments").addClass("list-body");
$("#comments-view h4 + ul, #comments-view h4 + form ~ ul#all-comments").each(function(){
$(this).attr("list-index", $("#comments-view h4 + ul, #comments-view h4 + form ~ ul#all-comments").index(this));
});
$("#comments-view .comments-pagination, #comments-view .comments-pagination + ul, #comments-view #comments-loading").appendTo("#comments-view #all-comments");
// Allow toggling of comment sections
debug("Allow toggling of comment sections");
$("#comments-view h4.list-title").click(function(){
$("#comments-view ul[list-index=\""+($(this).attr("list-index"))+"\"]").toggle();
});
// Auto-toggle comment sections [based on setting]
if (setting("optionComHideUploader").val) { // Uploader Comments
debug("Hide 'Uploaders Comments' if found");
$("#comments-view h4.list-title").each(function() {
if ($(this).text().indexOf(lang("Uploaders' Comments")) > -1) {
debug("Hiding 'Uploaders Comments'");
$("#comments-view ul[list-index=\""+($(this).attr("list-index"))+"\"]").toggle();
}
})
}
if (setting("optionComHideTop").val) { // Top Comments
debug("Hide 'Top Comments' if found");
$("#comments-view h4.list-title").each(function() {
if ($(this).text().indexOf(lang("Top Comments")) > -1) {
debug("Hiding 'Top Comments'");
$("#comments-view ul[list-index=\""+($(this).attr("list-index"))+"\"]").toggle();
}
})
}
if (setting("optionComHideVid").val) { // Video Responses
debug("Hide 'Video Responses' if found");
$("#comments-view h4.list-title").each(function() {
if ($(this).text().indexOf(lang("Video Responses")) > -1) {
debug("Hiding 'Video Responses'");
$("#comments-view ul[list-index=\""+($(this).attr("list-index"))+"\"]").toggle();
}
})
}
if (setting("optionComHideAll").val) { // All Comments
debug("Hide 'All Comments' if found");
$("#comments-view h4.list-title").each(function() {
if ($(this).text().indexOf(lang("All Comments")) > -1) {
debug("Hiding 'All Comments'");
$("#comments-view ul[list-index=\""+($(this).attr("list-index"))+"\"]").toggle();
}
})
}
// Remove the "Guide" [based on setting]
if (setting("removeGuide").val) {
$("#guide-container").hide();
}
// Remove comment avatars [based on setting]
if (setting("removeCommentAvatars").val) {
$("body").addClass("removeCommentAvatars");
}
// Remove Crash notice
debug("Removing crash notice");
insertCSS("#bwpCrash {display:none !important;} ");
// ---------------------------------------
// FUNCTIONS -----------------------------
// ---------------------------------------
function determineLanguage() { debug("Function: determineLanguage");
searchHref = $("head link[rel='search'][type='application/opensearchdescription+xml']").attr("href");
currentLanguage = searchHref.substring(searchHref.length-5);
debug("User language: " + currentLanguage);
debug("End function: determineLanguage");
}
function setUpLanguage() { debug("Function: setUpLanguage");
// Default strings match English (UK) [en-gb] and mostly match English (US) [en-us]
// Other languages with some string support:
// de-DE Deutsch
// pt-PT Português
// ru-RU Русский
languageStrings={
"\"Better Watch Page\" Script Settings":{
"pt_PT":"Opções do Script \"Better Watch Page\""
},
"Expand Player Size":{
"pt_PT":"Expandir Tamanho do Reprodutor"
},
"Shrink Player Size":{
"pt_PT":"Comprimir Tamanho do Reprodutor"
},
"Popout Video":{
"pt_PT":"Ver vídeo numa janela nova"
},
"More from ":{
"pt_PT":"Mais de "
},
"less info":{
"pt_PT":"menos info"
},
"more info":{
"pt_PT":"mais info"
},
"views":{
"de_DE":"Aufrufe",
"pt_PT":"Visualizações"
},
" ratings":{
"pt_PT":" classificações"
},
"Favourite":{
"en_US":"favorite"
},
"Uploaders' Comments":{
"en_US":"Uploader Comments",
"de_DE":"Kommentare des Nutzers, der das Video hochgeladen hat",
"pt_PT":"Comentários do remetente",
"ru_RU":"Комментарии пользователя, загрузившего видео"
},
"Top Comments":{
"de_DE":"Die besten Kommentare",
"pt_PT":"Comentários Principais",
"ru_RU":"Лучшие комментарии"
},
"Video Responses":{
"de_DE":"Videoantworten",
"pt_PT":"Respostas em vídeo",
"ru_RU":"Видеоответы"
},
"All Comments":{
"de_DE":"Alle Kommentare",
"pt_PT":"Todos os comentários",
"ru_RU":"Все комментарии"
}
};
debug("End function: setUpLanguage");
}
function lang(theString) {
toReturn = languageStrings[theString][currentLanguage];
if ((toReturn == null) | (toReturn == undefined) | (toReturn == "")) {
toReturn = theString;
}
return toReturn;
}
function insertCSS(cssToInsert) {
var head=document.getElementsByTagName('head')[0];
if(!head)
return;
var style=document.createElement('style');
style.setAttribute('type','text/css');
style.appendChild(document.createTextNode(cssToInsert));
head.appendChild(style);
}
function setPlayerSize() { // Set the player size
debug("Function: setPlayerSize");
if ($("#watch7-container").hasClass("watch-wide")) { // Wide player
$("#watch7-container")
.addClass("watch-medium")
.removeClass("watch-large");
$("#videoSizeButton button")
.attr("title", lang("Shrink Player Size"))
.attr("data-tooltip-text", lang("Shrink Player Size"));
} else { // Small player
$("#watch7-container")
.removeClass("watch-medium")
.removeClass("watch-large");
$("#videoSizeButton button")
.attr("title", lang("Expand Player Size"))
.attr("data-tooltip-text", lang("Expand Player Size"));
}
debug("End function: setPlayerSize");
}
function debugDisable() {
currentPage = window.location.toString();
currentPage = currentPage.substring(0, currentPage.indexOf("&debug=1"));
window.location = currentPage;
}
function debugEnable() {
currentPage = window.location.toString();
currentPage = currentPage + "&debug=1";
window.location = currentPage;
}
function debugModeStart() {
if (script.debugOn) {
alert("\""+script.name+"\" Script - Debug Mode \n\nDebug Mode has been enabled. \n\nAfter you click \"OK\" on this message, please wait 5 seconds and another message (like this one) should appear with further instructions. \n\nIf no message appears please copy the \"debug log\" text from the box in YouTube's header, and paste it in a message on this script's page on Userscripts.org so the script author can help you.\n");
debugBox = document.createElement("div");
debugBox.innerHTML = "<h1>\""+script.name+"\" Debug Log</h1> <textarea id='bwpDebugLog' style='border:4px solid red !important; width:500px !important; height:150px !important;' readonly='readonly'>DEBUG LOG</textarea> <br/> <input type='button' value='Reload page without debug' id='bwpDebugDisable' /> - Pressing this button will also remove the debug log, so please copy/paste the debug log before pressing the button.";
document.body.insertBefore(debugBox, document.body.children[0]);
document.getElementById("bwpDebugDisable").addEventListener("click", debugDisable, true);
}
}
function debugModeEnd() {
if (script.debugOn) {
debug("Ending Debug Process");
alert("\""+script.name+"\" Script - Debug Mode \n\nDebugging has been completed. \n\nThere is now a \"debug log\" in YouTube's header. Please copy the debug log and paste it in a message on this script's page on Userscripts.org \n\nAfter you've posted the debug log, click \"Reload page without debug\" which will turn off debug mode and will reload the page.");
document.getElementById("bwpDebugLog").focus();
document.getElementById("bwpDebugLog").select();
}
}
function debug(message) {
if (script.debugOn) {
script.debugMessages = script.debugMessages + message + "\n";
try {
document.getElementById("bwpDebugLog").value = script.debugMessages;
} catch (ex) {
}
}
}
function checkForDebugMode() {
currentPage = window.location.toString();
if (currentPage.indexOf("debug=1") > -1) {
return true;
}
return false;
}
function resetSettings() { debug("Function: resetSettings");
doReset = confirm("This will reset all your 'Better Watch Page' (BWP) settings, replacing them with the default settings. \nAre you sure you want to reset to the default BWP settings? \n\n'OK' will reset your settings and refresh the page. \n'Cancel' will keep your settings.");
if (doReset) {
cssStringReset = "html > body > div {display:none !important;} html > body:before {content:'Resetting script settings and reloading page...' !important; font-size:14px !important; font-weight:bold !important; padding:4px !important;}";
var head=document.getElementsByTagName('head')[0];
var styleReset=document.createElement('style');
styleReset.setAttribute('type','text/css');
styleReset.appendChild(document.createTextNode(cssStringReset));
head.appendChild(styleReset);
// Delete all settings for BWP. Code from the Greasemonkey Wiki.
var keys = GM_listValues();
for (var i=0, key=null; key=keys[i]; i++) {
GM_deleteValue(key);
}
location.reload(true);
} else {
}
debug("End function: resetSettings");
}
function disableSettingField(id) {
document.getElementById(id).disabled = true;
document.getElementById(id).parentNode.parentNode.setAttribute("settingState", "disabled");
}
function enableSettingField(id) {
document.getElementById(id).disabled = false;
document.getElementById(id).parentNode.parentNode.setAttribute("settingState", "");
}
function checkSettingButtonStates() { debug("Function: checkSettingButtonStates");
if (document.getElementById("configInput_moveratingsbar").checked) {
enableSettingField("configInput_ratingsbarbigger");
} else {
disableSettingField("configInput_ratingsbarbigger");
}
if (document.getElementById("configInput_starratings").checked) {
disableSettingField("configInput_moveratingsbar");
disableSettingField("configInput_ratingsbarbigger");
} else {
enableSettingField("configInput_moveratingsbar");
}
debug("End function: checkSettingButtonStates");
}
function newTabPage(id) { debug("Function: newTabPage");
if (id == "configTabGeneral") {
//document.getElementById("configInput_moveratingsbar").addEventListener("click", checkSettingButtonStates, true);
//document.getElementById("configInput_starratings").addEventListener("click", checkSettingButtonStates, true);
//checkSettingButtonStates();
} else if (id == "configTabVideo_Player") {
} else if (id == "configTabHide_Comments") {
} else if (id == "configTabBWP") {
document.getElementById("bwpResetSettings").addEventListener("click", resetSettings, true);
}
debug("End function: newTabPage");
}
// Hides or shows all the embeds of the document
function setEmbedVisibility(embedVisible) { debug("Function: setEmbedVisibility");
// This function has been copied and modified from Mindeye's YousableTubeFix script.
var embeds = document.getElementsByTagName("embed");
var count = 0;
while (count < embeds.length) {
embeds[count].style.visibility = (embedVisible) ? "" : "hidden";
count++;
}
debug("End function: setEmbedVisibility");
}
function setting(name) {
for (i in settings) {
if (settings[i].jsName == name) {
return settings[i];
}
}
debug("Tried to access setting that doesn't exist, called \"" + name + "\"");
return null;
}
function displaySettings() { debug("Function: displaySettings");
setEmbedVisibility(false);
fetchCurrentSettings();
Config.show(hideSettings);
debug("End function: displaySettings");
}
function hideSettings() { debug("Function: hideSettings");
setEmbedVisibility(true);
debug("End function: hideSettings");
}
function fetchCurrentSettings() { debug("function: fetchCurrentSettings");
convertOldSettings();
// Set the setting val as the GM val
for (i in settings) {
settings[i].val = GM_getValue(settings[i].gmName);
if ((settings[i].val == undefined) | (settings[i].val == "") | (settings[i].val == null)) {
// Set to default if nothing is set
settings[i].val = settings[i].defaultVal;
GM_setValue(settings[i].gmName, settings[i].defaultVal);
}
}
debug("End function: fetchCurrentSettings");
}
function convertOldSettings() { // Convert any old settings to current format
debug("function: convertOldSettings");
if (GM_getValue("playercolour") == 2) {
// Old: Base the player colour on the page background - "playercolour" VALUE 2
// New: Make the player colour light/white - "playercolour" VALUE 1
GM_setValue("playercolour", 1);
}
if ((GM_getValue("playerstyle") == 1) || (GM_getValue("playerstyle") == 99)) {
// Old: Player 4 - "playerstyle" VALUE 1
// Old: Custom Player - "playerstyle" VALUE 99
// New: Player 3 - "playerstyle" VALUE 2
GM_setValue("playerstyle", 2);
}
// Old
GM_deleteValue("optionSettingScreen");
GM_deleteValue("collapsetags");
GM_deleteValue("videoplayer");
GM_deleteValue("hidereactions");
GM_deleteValue("optionLeaveDarkBG");
GM_deleteValue("playerhide");
GM_deleteValue("playerCustomSrc");
GM_deleteValue("playerCustomP4");
GM_deleteValue("playerCustomParams");
GM_deleteValue("disableMiniMode");
GM_deleteValue("removeembed");
GM_deleteValue("moveratingsbar");
GM_deleteValue("descheightlimit");
GM_deleteValue("autoexpand");
debug("End function: convertOldSettings");
}
function setUpConfig() { debug("Function: setUpConfig");
// "New" image - <img src="http://i.imgur.com/nfZ5X.png"/>
Config.scriptName = script.name;
Config.footerHtml = "<p>Version <B>"+script.version+"</B> <br/> Check for updates via your browser's addon update function or on <a href=\""+script.website+"\" target=\"_blank\">this page</a> (new tab)</p> ";
Config.reloadOnSave = true;
Config.activateTabReal = Config.activateTab;
Config.activateTab = function(id) {Config.activateTabReal(id); newTabPage(id);};
Config.tabs = {
"General":{
html:"<p>General settings. (Click the tabs above for more settings)</p>",
fields:{
removeGuide:{
type:'checkbox',
label:'Remove "Guide"',
text:'Remove the "Guide" sidebar"',
},
removeCommentAvatars:{
type:'checkbox',
label:'Remove comment avatars',
text:'Remove avatars from the comments section',
},
/*
collapsecattags:{
type:'checkbox',
label:'Autohide Category/Tags',
text:'Automatically hide "Category"/"Tags" in the description',
},
removeextra:{
type:'checkbox',
label:'Remove Extra Info',
text:'Remove the extra info section (artist, as seen on, show, etc) from below the description',
},
ratingsbarbigger:{
type:'checkbox',
label:'Expand ratings bar',
text:'Make the "like/dislike" bar bigger',
},
starratings:{
type:'checkbox',
label:'Star ratings',
text:'Replace "like/dislike" system with Star ratings',
},
removemorefromsub:{
type:'checkbox',
label:'Remove "More from Subscriptions"',
text:'Remove "More from Subscriptions" from the sidebar',
},
hidesuggestions:{
type:'checkbox',
label:'Auto-collapse Suggestions',
text:'Automatically collapse the "Suggestions" list in the sidebar',
},
*/
}
},
"Video Player":{
html:"<!--<span style='overflow:hidden; display:block;'>--> <img src='http://i.imgur.com/TfOdW.png' id='vidPlayerImg' style='float:right;'/> <p>Video player settings. (These settings do not apply to the HTML5 player)</p> <!--</span>--> ",
fields:{
playerstyle:{
type:'select',
label:'Player Version',
text:'',
options:{
"Default":0,
"2008-2010 Player (Player 3)":2,
},
value:0,
},
playercolour:{
type:'select',
label:'Player Colour',
text:'',
options:{
"Dark/Black [Default]":0,
"Light/White":1,
},
value:0,
},
}
},
"Hide Comments":{
html:"<p>Auto-collapse these comments sections.</p>",
fields:{
commentsHideUploader:{
type:'checkbox',
label:'"Uploader\'s Comments"',
text:'Auto-collapse "Uploader\'s Comments" section',
},
commentsHideTop:{
type:'checkbox',
label:'"Top Comments"',
text:'Auto-collapse "Top Comments" section',
},
commentsHideVid:{
type:'checkbox',
label:'"Video Responses"',
text:'Auto-collapse "Video Responses" section',
},
commentsHideAll:{
type:'checkbox',
label:'"All Comments"',
text:'Auto-collapse "All Comments" section',
},
}
},
"BWP":{
html:"<p>Version <B>"+script.version+"</B> <br/> Check for updates via your browser's addon update function or on <a href=\""+script.website+"\" target=\"_blank\">this page</a> (new tab)</p> <p> <input type='button' id='bwpResetSettings' value='Reset Script Settings' /> </p>"
}
};
debug("End function: setUpConfig");
}
function defineSettings() { debug("Function: defineSettings");
function settingObj(js, gm, def, descr) {
this.jsName = js; // Javascript name
this.gmName = gm; // GM name (for GM_getValue and GM_setValue)
this.defaultVal = def; // Default value
this.desc = descr; // Description
}
settings=[
// settingObj(Javascript name, GM name, default value, description)
removeGuide = new settingObj("removeGuide", "removeGuide", false, "Remove the 'Guide' sidebar"),
removeCommentAvatars = new settingObj("removeCommentAvatars", "removeCommentAvatars", false, "Remove avatars from comments"),
optionCollapseCatTags = new settingObj("optionCollapseCatTags", "collapsecattags", false, "Autohide \"Category\" and \"Tags\" when page loads"),
optionBiggerRatingsBar = new settingObj("optionBiggerRatingsBar", "ratingsbarbigger", false, "Make the \"like/dislike\" bar bigger"),
optionStarRatings = new settingObj("optionStarRatings", "starratings", false, "Replace \"like/dislike\" system with Star ratings"),
optionRemoveExtra = new settingObj("optionRemoveExtra", "removeextra", false, "Remove extra info from below the description"),
optionRemoveMoreFromSub = new settingObj("optionRemoveMoreFromSub", "removemorefromsub", false, "Remove the 'More from subscriptions' box"),
optionHideSuggestions = new settingObj("optionHideSuggestions", "hidesuggestions", false, "Auto-collapse 'suggestions'"),
optionPlayerStyle = new settingObj("optionPlayerStyle", "playerstyle", 0, "Video player style"),
optionPlayerColour = new settingObj("optionPlayerColour", "playercolour", 0, "Video player colour"),
optionComHideUploader = new settingObj("optionComHideUploader", "commentsHideUploader", false, "Auto-collapse \"Uploaders' Comments\" section"),
optionComHideTop = new settingObj("optionComHideTop", "commentsHideTop", false, "Auto-collapse \"Top Comments\" section"),
optionComHideVid = new settingObj("optionComHideVid", "commentsHideVid", false, "Auto-collapse \"Video Responses\" section"),
optionComHideAll = new settingObj("optionComHideAll", "commentsHideAll", false, "Auto-collapse \"All Comments\" section")
];
debug("End function: defineSettings");
}
debug("Reached sequential end of script");
debugModeEnd();
// End of script
