Description on right [Always Enabled]Retro themeRetro playerTitle on topSmaller player size
Dark Mode is supported (toggle in Youtube Settings)"+(unsupportedBrowser?"
Your browser may not be fully supported and may experience some issues. If you would like to report a bug, please include the name and version number of your browser.":""))
.appendTo("body");
PrepSettings();
async function PrepSettings() {
if (await GM.getValue("retrotheme", true)) {
$("#rsd-menu-retrotheme").attr("checked", "");
}
if (await GM.getValue("retroplayer", true)) {
$("#rsd-menu-retroplayer").attr("checked", "");
}
if (await GM.getValue("titletop", true)) {
$("#rsd-menu-titletop").attr("checked", "");
}
if (await GM.getValue("altplayersize", false)) {
$("#rsd-menu-altplayersize").attr("checked", "");
}
}
$("#rsd-menu paper-toggle-button:not([disabled])").click(async function() {
var state = ($(this).attr("checked")?true:false);
if (this.id=="rsd-menu-retrotheme") {
await GM.setValue("retrotheme", state);
} else if (this.id=="rsd-menu-retroplayer") {
await GM.setValue("retroplayer", state);
} else if (this.id=="rsd-menu-titletop") {
await GM.setValue("titletop", state);
} else if (this.id=="rsd-menu-altplayersize") {
await GM.setValue("altplayersize", state);
}
watchApply(); // apply changed settings
});
// Settings button in header
$(document.createElement("div"))
.attr("id", "bwp-retrostyle-toggle")
.attr("class", "style-scope ytd-menu-renderer style-default")
.attr("is-icon-button", "")
.attr("button-renderer","")
.html("\"Right Side Description\" Script Menu"+(unsupportedBrowser?"":""))
.click( function() {
if ($("#rsd-menu").attr("hidden") ) {
$("#rsd-menu").removeAttr("hidden");
$("#bwp-retrostyle-toggle").addClass("open");
$("#rsd-menu .arrow").css("right", (document.body.clientWidth - $("#bwp-retrostyle-toggle")[0].getBoundingClientRect().right) + "px");
} else {
$("#rsd-menu").attr("hidden","hidden");
$("#bwp-retrostyle-toggle").removeClass("open");
}
})
.prependTo("ytd-masthead #end");
// Inject a function to resize the player, based on user setting
var playerSizeInjector = function() {
var customPlayerSize = function(ogfuncname) {
if (document.querySelector("html").classList.contains("rsdAltSize") && document.querySelector("ytd-app").hasAttribute("is-watch-page")) { // check if this should run, based on user setting & only run on watch page
// Sizing logic to match 'old youtube' (non-polymer youtube)
var wWidth = window.innerWidth; var wHeight = window.innerHeight;
var width = 640; var height = 360;
if (document.querySelector("ytd-watch-flexy").hasAttribute("theater")) {
width = 854; height = 480;
if (wWidth >= 1320 && wHeight >= 870) {
width = 1280; height = 720;
}
} else {
if (wWidth >= 1720 && wHeight >= 980) {
width = 1280; height = 720;
} else if (wWidth >= 1294 && wHeight >= 630) {
width = 854; height = 480;
} else if (wWidth <= 656) {
width = 426; height = 240;
}
}
return {width:width, height:height};
} else { // call the original function
if (ogfuncname == "calculateNormalPlayerSize_") {
return document.querySelector("ytd-watch-flexy").calculateNormalPlayerSize_OG();
} else { // ogfuncname == "calculateCurrentPlayerSize_"
return document.querySelector("ytd-watch-flexy").calculateCurrentPlayerSize_OG();
}
}
}
// Save the original functions
document.querySelector("ytd-watch-flexy").calculateNormalPlayerSize_OG = document.querySelector("ytd-watch-flexy").calculateNormalPlayerSize_;
document.querySelector("ytd-watch-flexy").calculateCurrentPlayerSize_OG = document.querySelector("ytd-watch-flexy").calculateCurrentPlayerSize_;
// Override the original functions with custom
document.querySelector("ytd-watch-flexy").calculateNormalPlayerSize_ = function() {return customPlayerSize("calculateNormalPlayerSize_")};
document.querySelector("ytd-watch-flexy").calculateCurrentPlayerSize_ = function() {return customPlayerSize("calculateCurrentPlayerSize_")};
}
// Inject into page
injector = document.createElement("script");
injector.textContent = "var rsdInjectFunction = " + playerSizeInjector.toString() + "; rsdInjectFunction();";
document.documentElement.appendChild(injector);
typeChange();
$("ytd-app").on("yt-page-type-changed", typeChange);
}
function typeChange() {
// Runs: Every time the page type changes
console.log("typeChange");
setTimeout(function() { // delay only seems to be needed for miniplayer closing
console.log("typeChange - delayed section");
if ($("#page-manager ytd-watch-flexy:not([hidden]), #page-manager ytd-watch-flexy.loading").length > 0) {
if (!script.watchSetupDone) {
watchSetup();
}
watchApply();
} else {
if (script.watchSetupDone) {
watchCleanup();
}
}
}, 1);
}
function watchSetup() {
// Runs: First time a watch page has loaded
// Purpose: Single-time watch page modification and event hooks
console.log("watchSetup");
script.watchSetupDone = true;
$('').prependTo( $("ytd-watch-flexy #primary-inner") );
$('').prependTo("ytd-watch-flexy #related");
dataRun();
$("ytd-app").on("yt-update-title", dataRun);
//yt-page-data-updated ?
}
async function watchApply() {
// Changed TO a watch page, or a setting has changed
console.log("watchApply");
loadCSS();
applyRetroPlayer(await GM.getValue("retroplayer", true));
}
function watchCleanup() {
// Changed FROM a watch page (undo watchApply)
console.log("watchCleanup");
unloadCSS();
$("#bwp-retrostyle-toggle").removeClass("open");
$("#rsd-menu").attr("hidden","hidden");
applyRetroPlayer(false);
}
function dataRun() {
// Runs: Navigating from one video to another
// Purpose: Modify the page in ways that need to happen after every video change
console.log("dataRun");
setTimeout(function() { // These don't generate until after yt-update-title, need to find another event to listen to
console.log("dataRun - delayed section");
// Title above video
var title = $("ytd-video-primary-info-renderer > #container > h1 > yt-formatted-string").html();
$("#rsd-title").html(title);
// Description panel
var meta = $("ytd-watch-flexy #primary-inner > #meta").addClass("rsd-description");
$(meta).prependTo( $("#rsd-description-entry") );
// Expand description
$("#meta.rsd-description ytd-expander #more").click();
if ($("#meta.rsd-description ytd-expander[collapsed]").length > 0) {
console.log("Expand didn't work, manually expanding ");
$("#meta.rsd-description ytd-expander[collapsed]").removeAttr("collapsed");
}
// Upload date - move from below video to description panel
$("ytd-video-primary-info-renderer #info #date").insertAfter("ytd-video-owner-renderer #channel-name");
// Sub count
if ( $("#meta.rsd-description #subscribe-button").text() ) { // prevent picking up the skeleton
$("#owner-sub-count").appendTo("#meta.rsd-description ytd-video-secondary-info-renderer #subscribe-button");
}
// Collapse music rights info
$("#meta.rsd-description ytd-video-secondary-info-renderer ytd-metadata-row-renderer").each(function(){
var title = $("#title", this).text().trim();
if (musicrightsStrings.includes(title)) {
$("#content", this).addClass("rsdMusicCollapse"); // collapse handled by CSS
}
});
// Below video
// Viewcount
//$("ytd-video-primary-info-renderer #info #count").prependTo("ytd-video-primary-info-renderer #info #menu-container");
// New container for shifted buttons, move them into it (all except like/dislike)
/* $("#menu-container-left-rsd").remove(); // remove old copies
$("").prependTo("ytd-video-primary-info-renderer #info");
$("ytd-video-primary-info-renderer #info #menu-container #top-level-buttons > *").each(function() {
if (this.nodeName != "YTD-TOGGLE-BUTTON-RENDERER") {
$(this).appendTo("#menu-container-left-rsd");
}
});
$("ytd-video-primary-info-renderer #info #menu-container #top-level-buttons + *").insertAfter("#menu-container-left-rsd");*/
}, 1);
}
// Initiate script
if ($("ytd-watch-flexy").length > 0) {
console.log("Page already loaded, initiate setup");
pageSetup();
} else {
console.log("Page not ready or otherwise not a video page, wait for ready");
$(document).one("yt-navigate-finish", pageSetup);
}
// possible script points [old test notes]
// yt-update-title on ytd-app - seems to run when data changes?
// yt-page-type-changed on ytd-app - for detecting if they've move away from video or back
// yt-page-data-updated on body - may run after all data changed?
// yt-navigate-finish on document - same as above?
async function loadCSS() {
if (!script.cssMainLoaded) {
script.cssMainLoaded = GM_addStyle(script.mainCSS);
}
$("html").addClass("rsdLoaded");
if (await GM.getValue("retrotheme", true)) {
$("html").addClass("rsdRetro");
} else {
$("html").removeClass("rsdRetro");
}
if (await GM.getValue("retroplayer", true)) {
$("html").addClass("rsdPlayer");
applyRetroPlayer(true);
} else {
$("html").removeClass("rsdPlayer");
applyRetroPlayer(false);
}
if (await GM.getValue("titletop", true)) {
$("html").addClass("rsdTitle");
} else {
$("html").removeClass("rsdTitle");
}
if (await GM.getValue("altplayersize", false)) {
$("html").addClass("rsdAltSize");
window.dispatchEvent(new Event('resize')); // Triggers player size resizing, if the setting has been applied or changed
} else {
$("html").removeClass("rsdAltSize");
window.dispatchEvent(new Event('resize')); // Triggers player size resizing, if the setting has changed
}
}
function unloadCSS() {
if (script.cssMainLoaded) {
$(script.cssMainLoaded).remove();
script.cssMainLoaded = null;
}
applyRetroPlayer(false);
$("html").removeClass("rsdLoaded");
$("html").removeClass("rsdRetro");
$("html").removeClass("rsdPlayer");
$("html").removeClass("rsdTitle");
$("html").removeClass("rsdAltSize");
window.dispatchEvent(new Event('resize')); // Triggers player size resizing, so miniplayer works
}
function applyRetroPlayer(activate) { // Also used by legacy script
if (activate) {
if (!script.forceControlsTimer) {
var mouseMoveEvent = new Event('mousemove');
script.forceControlsTimer = setInterval(function() {
if (!document.hidden) {
$("#movie_player.playing-mode:not(.ytp-fullscreen)")[0].dispatchEvent(mouseMoveEvent);
}
}, 1000);
}
if (!script.forceControlsListener) {
script.forceControlsListener = function() {
if (!document.hidden) {
var mouseMoveEvent = new Event('mousemove');
$("#movie_player.playing-mode:not(.ytp-fullscreen)")[0].dispatchEvent(mouseMoveEvent);
}
};
$(document).on("visibilitychange", script.forceControlsListener);
}
} else {
if (script.forceControlsTimer) {
clearInterval(script.forceControlsTimer);
script.forceControlsTimer = null;
}
if (script.forceControlsListener) {
$(document).off("visibilitychange", script.forceControlsListener);
script.forceControlsListener = null;
}
}
}
// Legacy Script
async function mainScriptLegacy() {
// Don't run on New Youtube
if ($("body > ytd-app").length > 0) {
console.log("RSD - Aborting legacy script. Modern script should handle this page.");
return;
}
// Don't run in Youtube+ Popups
if ($("html").hasClass("part_popout")) return;
// Abort and clean up on non-video pages.
if (!$("#page").hasClass("watch")) {
$("#page > #watch7-headline").remove();
$("#bwp-menu").attr("hidden","hidden");
$("#bwp-settings-button").removeClass("open");
unloadCSSLegacy();
return;
}
if (!($("#bwp-menu").length > 0)) {
firstTimeLoad();
}
// Insert CSS
loadCSSLegacy();
// Add listen event to player state to apply retro style (based on setting) when other scripts prevent autoplay
async function postloadRetroApply() {
loadCSSLegacy();
$("#player-api").off("click", "#movie_player.unstarted-mode", postloadRetroApply);
}
$("#player-api").on("click", "#movie_player.unstarted-mode", postloadRetroApply);
// Add button to toggle retro style
$(document.createElement("li"))
.attr("id", "bwp-retrostyle-toggle")
.appendTo("#action-panel-overflow-menu");
$(document.createElement("button"))
.attr("class", "yt-ui-menu-item has-icon")
.html("Toggle 'Retro Style'")
.click(async function() {
alert("Retro Style toggle has moved to the new Settings Menu - the menu will open now. You can close it again by clicking the icon.");
$("#bwp-settings-button").click();
})
.appendTo("#bwp-retrostyle-toggle");
// Remove VEVO branding
$("#watch7-container")
.removeClass("watch-branded")
.removeClass("watch-branded-banner");
$("#player")
.attr("style", "")
.removeClass("watch-branded-banner");
$("#watch7-branded-banner").remove();
// Move description & channel details to the right-side column
$(document.createElement("div"))
.attr("id","bwp-sidebar-container")
.attr("class", "yt-card yt-card-has-padding")
.insertBefore("#watch7-sidebar-contents");
$("#watch7-user-header").appendTo("#bwp-sidebar-container");
$("#action-panel-details")
.removeClass("yt-uix-expander-collapsed")
.removeClass("yt-card")
.removeClass("yt-card-has-padding")
.appendTo("#bwp-sidebar-container");
// Move Upload time into user info
$("#watch-uploader-info").appendTo("#watch7-user-header");
$("#watch-uploader-info strong").text(function() { return $(this).text().replace("Published on ",""); });
// Collapse music rights info in description
$("#bwp-sidebar-container #watch-description-extras .watch-meta-item").each(function(){
var title = $(".title", this).text().trim();
if (musicrightsStrings.includes(title)) {
$(".watch-info-tag-list", this).addClass("rsdMusicCollapse"); // collapse handled by CSS
}
});
// Relocate views for correct styling
$("#watch7-views-info").appendTo("#watch-header");
// Move title above video
$("#page > #watch7-headline").remove(); // Remove any existing
$("#watch-header #watch7-headline").insertBefore("#player").addClass("content-alignment");
$(document.createElement("div")) // Container for non-title content such as Youtube Red
.attr("id", "watch-headline-additional")
.attr("class", "yt-card")
.appendTo("#watch-headline-title");
$("#watch7-headline > *:not(#watch-headline-title):not(#watch-headline-additional)").prependTo("#watch-headline-additional");
}
mainScriptLegacy();
$(document).on("spfdone", mainScriptLegacy);
async function loadCSSLegacy() {
if (!script.cssMainLoadedLegacy) {
script.cssMainLoadedLegacy = GM_addStyle(script.mainCSSLegacy);
}
$("html").addClass("bwpScript");
if (await GM.getValue("retrotheme", true)) {
$("html").addClass("bwpRetro");
} else {
$("html").removeClass("bwpRetro");
}
if (await GM.getValue("retroplayer", true)) {
$("html").addClass("bwpPlayer");
applyRetroPlayer(true);
} else {
$("html").removeClass("bwpPlayer");
applyRetroPlayer(false);
}
if (isDark($("body").css("background-color"))) {
$("html").addClass("bwpDark");
} else {
$("html").removeClass("bwpDark");
}
}
function unloadCSSLegacy() {
if (script.cssMainLoadedLegacy) {
$(script.cssMainLoadedLegacy).remove();
script.cssMainLoadedLegacy = null;
}
applyRetroPlayer(false);
$("html").removeClass("bwpScript");
$("html").removeClass("bwpRetro");
$("html").removeClass("bwpPlayer");
$("html").removeClass("bwpDark");
}
function isDark(rgb) {
var re = /rgb\([ ]*(\d+),[ ]*(\d+),[ ]*(\d+)[ ]*\)/;
var match = rgb.match(re);
if (match == null) {
return false;
}
var luma = 0.2126 * match[1] + 0.7152 * match[2] + 0.0722 * match[3];
if (luma < 40) {
return true;
}
return false;
}
function firstTimeLoad() {
$(document.createElement("div"))
.attr("id", "bwp-menu")
.attr("class", "yt-uix-clickcard-card yt-uix-clickcard-card-reverse yt-uix-clickcard-card-border")
.attr("hidden","hidden")
.html("Version "+script.version+" Updates & Help
'"+script.name+"' Script Settings
'Old Youtube' Settings
Some settings are only available on 'New Youtube' and are not displayed here.
Support for 'Old Youtube' will be removed from this script soon as Old Youtube does not seem to be available, yet you're here! Please post what method you are using to access Old Youtube so the script creator can access it again and keep support for Old Youtube.")
.appendTo("body");
PrepSettings();
async function PrepSettings() {
if (await GM.getValue("retrotheme", true)) {
$("#rsd-menu-retrotheme").prop("checked", true);
}
if (await GM.getValue("retroplayer", true)) {
$("#rsd-menu-retroplayer").prop("checked", true);
}
}
$("#bwp-menu input:not([disabled])").click(async function() {
var state = ($(this).prop("checked")?true:false);
if (this.id=="rsd-menu-retrotheme") {
await GM.setValue("retrotheme", state);
} else if (this.id=="rsd-menu-retroplayer") {
await GM.setValue("retroplayer", state);
}
loadCSSLegacy(); // apply changed settings
});
$(document.createElement("span"))
.attr("id", "bwp-settings-button")
.attr("class", "")
.html("")
.click( function() {
if ($("#bwp-menu").attr("hidden") ) {
$("#bwp-menu").removeAttr("hidden");
$("#bwp-settings-button").addClass("open");
$("#bwp-menu .arrow").css("right", (document.body.clientWidth - $("#bwp-settings-button")[0].getBoundingClientRect().right - 9) + "px");
} else {
$("#bwp-menu").attr("hidden","hidden");
$("#bwp-settings-button").removeClass("open");
}
})
.prependTo("#yt-masthead-user, #yt-masthead-signin");
}
})();