Dark Mode is supported (toggle in Youtube Settings)")
.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);
}
if (await GM.getValue("titletop", true)) {
$("#rsd-menu-titletop").prop("checked", true);
}
}
$("#rsd-menu input").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);
} else if (this.id=="rsd-menu-titletop") {
await GM.setValue("titletop", state);
}
watchApply(); // apply changed settings
});
$(document.createElement("div"))
.attr("id", "bwp-retrostyle-toggle")
.attr("class", "style-scope ytd-menu-renderer style-default")
.attr("is-icon-button", "")
.attr("button-renderer","")
.attr("hidden","hidden")
.html("\"Right Side Description\" Script Menu")
.click( function() {
if ($("#rsd-menu").attr("hidden") ) {
$("#rsd-menu").removeAttr("hidden");
$("#bwp-retrostyle-toggle").addClass("open");
} else {
$("#rsd-menu").attr("hidden","hidden");
$("#bwp-retrostyle-toggle").removeClass("open");
}
})
.prependTo("ytd-masthead #end");
typeChange();
$("ytd-app").on("yt-page-type-changed", typeChange);
}
function typeChange() {
// Runs: Every time the page type changes
console.log("typeChange");
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();
}
}
}
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
console.log("watchApply");
loadCSS();
$("#bwp-retrostyle-toggle").removeAttr("hidden");
applyRetroPlayer(await GM.getValue("retroplayer", true));
}
function watchCleanup() {
// Changed FROM a watch page (undo watchApply)
console.log("watchCleanup");
unloadCSS();
$("#bwp-retrostyle-toggle").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();
// Upload date
$("ytd-video-primary-info-renderer #info #date").insertAfter("ytd-video-owner-renderer #channel-name");
// Sub count
$("#owner-sub-count").appendTo("#meta.rsd-description #subscribe-button");
}, 1);
}
$(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");
}
}
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");
}
function applyRetroPlayer(activate) {
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;
}
}
}
})();