// ==UserScript==
// @id 5a3ebe9b-d73f-4397-a5c3-7a382723c39e
// @name [BETA VERSION] Youtube - Right Side Description
// @namespace Takato
// @author Takato
// @copyright 2010+, Takato (https://greasyfork.dpdns.org/users/1158/)
// @licence Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International - Additional conditions apply; https://greasyfork.dpdns.org/scripts/976/
// @description Moves the video description to the right of the video (like it used to be 2009 and earlier) and makes a few 2009ish style tweaks to the video page.
// @icon https://i.imgur.com/RAHw2kQ.png https://i.imgur.com/qlQhuaa.png
// @icon64 https://i.imgur.com/qlQhuaa.png
// @resource icon https://i.imgur.com/RAHw2kQ.png
// @resource icon64 https://i.imgur.com/RAHw2kQ.png
// @version 2017.12.19
// @require https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js
// @require https://greasemonkey.github.io/gm4-polyfill/gm4-polyfill.js
// @website https://greasyfork.dpdns.org/scripts/32695/
// @noframes
// @grant GM_getValue
// @grant GM_setValue
// @grant GM_deleteValue
// @grant GM_addStyle
// @grant GM_getResourceURL
// @grant GM.getValue
// @grant GM.setValue
// @grant GM.deleteValue
// @grant GM.addStyle
// @grant GM.getResourceUrl
// @run-at document-start
// @include *//www.youtube.com/*
// ==/UserScript==
// This script is licenced under Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International (https://creativecommons.org/licenses/by-nc-sa/4.0/) with additional conditions.
// See https://greasyfork.dpdns.org/scripts/976/ for full details of the licence and conditions.
(async function() {
var script = {};
script.version = "2017.12.19";
// SETTINGS -----------------------------
// Main settings: Available by clicking "More" below the video.
// - Toggle 'retro style'
// --------------------------------------
// Everything below this line shouldn't be edited unless you are a coder. All settings are listed above.
// Defining static script properties
script.name = "Right Side Description [BETA]"; // Previously known as Better Watch Page
script.shortname = "RSD Beta";
script.website = "https://greasyfork.dpdns.org/scripts/32695/";
script.discussion = "https://greasyfork.dpdns.org/scripts/32695/feedback";
script.icon = await GM.getResourceUrl("icon");
script.icon64 = await GM.getResourceUrl("icon64");
script.mainCSS = " ytd-masthead:not(:hover) #bwp-retrostyle-toggle {display:none;} /* Title */ ytd-watch:not([theater]) #top.ytd-watch {margin-top:10px;} ytd-watch:not([theater]) #rsd-title {margin-bottom:5px;} ytd-watch[theater] #rsd-title, ytd-watch:not([theater]) ytd-video-primary-info-renderer h1.title {display:none;} /* Sidebar */ #meta.rsd-description {width:auto; padding-right:0; order:0;} ytd-video-secondary-info-renderer {max-height:390px; overflow:auto; width:auto; padding-top:0; padding-bottom:0; margin-right: 0 !important; background-color:var(--yt-playlist-background-item); padding:8px; border-bottom-width:0px;} @media screen and (min-width: 1000px) { ytd-video-secondary-info-renderer {margin-left:-14px;} } ytd-video-secondary-info-renderer #subscribe-button.ytd-video-secondary-info-renderer {justify-content: start; } ytd-video-secondary-info-renderer #subscribe-button.ytd-video-secondary-info-renderer ytd-subscribe-button-renderer {justify-content: start;} ytd-video-secondary-info-renderer #subscribe-button.ytd-video-secondary-info-renderer paper-button {padding:4px 10px;} ytd-video-secondary-info-renderer #subscribe-button.ytd-video-secondary-info-renderer ytd-toggle-button-renderer {--yt-button-icon-size:24px; --yt-button-icon-padding:0px;} ytd-video-secondary-info-renderer ytd-expander.description.ytd-video-secondary-info-renderer {margin-left:0; max-width:100%; font-size:1.3rem; line-height:normal;} ytd-video-secondary-info-renderer #less {display:none;} ytd-video-secondary-info-renderer #title.ytd-metadata-row-renderer {width:auto; font-size:1.1rem; line-height:normal;} ytd-video-secondary-info-renderer .content.ytd-metadata-row-renderer {width:auto; font-size:1.1rem; line-height:normal; white-space:normal;} #playlist.ytd-watch {margin-bottom:16px;} /* Below Video */ ytd-video-primary-info-renderer #info #menu-container {order:1;} ytd-video-primary-info-renderer #info #flex {order:2;} ytd-video-primary-info-renderer #info #rsd-likecountgroup {order:3; text-align:right;} #rsd-likecountgroup #sentiment {position:static;} ";
script.retroCSS = " /*Retro CSS*/ body:not([dark]) :not([style-scope]):not(.style-scope) {--yt-main-app-background: white;} body, input, textarea, select {font-family:arial,sans-serif;} #masthead-container.ytd-app::after {display:none;} #masthead {border-bottom: 1px solid var(--yt-swatch-primary-darker);} #container.ytd-masthead {height:49px;} /*#logo-icon.ytd-topbar-logo-renderer {background:url(https://s.ytimg.com/yt/img/master.png) 0px -641px; } #logo-icon.ytd-topbar-logo-renderer svg {visibility:hidden;} #logo-icon.ytd-topbar-logo-renderer {width:99px; height:42px;}*/ ytd-topbar-logo-renderer #country-code {display:none;} #page-manager.ytd-app {margin-top: 49px;} ytd-watch:not([theater]) #top.ytd-watch {margin-top:6px;} #rsd-title h1 {font-size:19px; font-weight:bold;} @media screen and (min-width: 1000px) { ytd-watch:not([theater]) #playlist.ytd-watch {margin-top:-30px; margin-bottom:40px;} ytd-watch:not([theater]) #meta.rsd-description {margin-top:-30px;} } ytd-video-secondary-info-renderer {background:#EEEEEE; border:1px solid #CCCCCC; font-size:12px; padding:6px; margin-bottom:8px;} body[dark] ytd-video-secondary-info-renderer {background:var(--yt-playlist-background-item); border-color:var(--yt-border-color);} ytd-video-secondary-info-renderer a.yt-simple-endpoint:not(.ytd-button-renderer), ytd-video-secondary-info-renderer a.yt-simple-endpoint:not(.ytd-button-renderer):hover {color:#0033CC;} body[dark] ytd-video-secondary-info-renderer a.yt-simple-endpoint:not(.ytd-button-renderer), body[dark] ytd-video-secondary-info-renderer a.yt-simple-endpoint:not(.ytd-button-renderer):hover {color:var(--yt-endpoint-color);} ytd-video-secondary-info-renderer #top-row.ytd-video-secondary-info-renderer {margin-bottom:2px; } ytd-video-secondary-info-renderer #avatar.ytd-video-owner-renderer {border-radius:0; border:1px solid white; outline:1px solid #999999; margin:1px; margin-right:7px;} body[dark] ytd-video-secondary-info-renderer #avatar.ytd-video-owner-renderer {outline-color:#1b1b1b; border-color:var(--yt-border-color);} ytd-video-secondary-info-renderer #upload-info.ytd-video-owner-renderer {justify-content:flex-start;} ytd-video-secondary-info-renderer #upload-info.ytd-video-owner-renderer > * {height:18px;} ytd-video-secondary-info-renderer #owner-name.ytd-video-owner-renderer {font-weight:bold; font-size:1em;} ytd-video-secondary-info-renderer #upload-info.ytd-video-owner-renderer .date.ytd-video-secondary-info-renderer { font-size:1em; color:var(--yt-primary-text-color); } ytd-video-secondary-info-renderer ytd-expander.description.ytd-video-secondary-info-renderer {font-size:1em; line-height:normal;} ytd-video-secondary-info-renderer ytd-metadata-row-container-renderer {border-top:1px solid #CCCCCC; padding-top:2px; margin-top:8px;} body[dark] ytd-video-secondary-info-renderer ytd-metadata-row-container-renderer {border-color:var(--yt-border-color);} ytd-video-secondary-info-renderer ytd-metadata-row-renderer {margin:0; margin-top:2px; } ytd-video-secondary-info-renderer #title.ytd-metadata-row-renderer {width:auto; font-size:0.9em; line-height:normal;} ytd-video-secondary-info-renderer .content.ytd-metadata-row-renderer {width:auto; font-size:0.9em; line-height:normal; white-space:normal;} #player.ytd-watch {margin-bottom:30px;} ytd-watch[theater] #player.ytd-watch {margin-bottom:46px;} #player-container {padding-bottom:30px; overflow:hidden;} #movie_player:not(.ytp-fullscreen) {overflow:visible; contain: layout style size;} #movie_player:not(.ytp-fullscreen) .ytp-player-content, #movie_player:not(.ytp-fullscreen) .ytp-settings-menu {bottom:8px;} #movie_player:not(.ytp-fullscreen) .ytp-player-content.html5-endscreen {bottom:39px; top:28px;} #movie_player:not(.ytp-fullscreen) .ytp-bottom {bottom:14px; top:auto !important;} #movie_player:not(.ytp-fullscreen) .ytp-gradient-bottom {display:none;} #movie_player:not(.ytp-fullscreen) .ytp-chrome-bottom { background-color:#ccc; color:#000; text-shadow:none; border:0px solid #ccc; border-width: 0px 12px 0 12px; left:0 !important; opacity:1; bottom:-30px; height:27px;} #movie_player:not(.ytp-fullscreen) .ytp-progress-bar-container {bottom:27px;} #movie_player:not(.ytp-fullscreen) .ytp-progress-list {transform-origin:center bottom !important; background-color:#444; margin-left:-12px; } #movie_player:not(.ytp-fullscreen) .ytp-progress-bar-container:not(:hover) .ytp-progress-list {width:calc(100% + 24px) !important; } #movie_player:not(.ytp-fullscreen) .ytp-progress-bar-container:hover .ytp-progress-list {border:0px solid transparent; border-width:0px 12px 0px 12px; margin-right:-12px;} #movie_player:not(.ytp-fullscreen) .ytp-chrome-controls {padding-left:0; padding-right:0; margin-left:-12px; margin-right:-12px; height:27px; line-height:27px;} #movie_player:not(.ytp-fullscreen) .ytp-time-display {height:34px; margin-top:-3px; font-size:95%; line-height:34px;} #movie_player:not(.ytp-fullscreen) .ytp-time-separator, #movie_player:not(.ytp-fullscreen) .ytp-time-duration {color:#666;} #movie_player:not(.ytp-fullscreen) .ytp-chrome-controls .ytp-button, #movie_player:not(.ytp-fullscreen) .ytp-chrome-controls .ytp-volume-panel {color:#4d4d4d; opacity:1; height:34px; margin-top:-3px;} #movie_player:not(.ytp-fullscreen) .ytp-chrome-controls .ytp-volume-panel .ytp-volume-slider-handle:before, #movie_player:not(.ytp-fullscreen) .ytp-chrome-controls .ytp-volume-panel .ytp-volume-slider-handle, #movie_player:not(.ytp-fullscreen) .ytp-chrome-controls .ytp-volume-panel .ytp-volume-slider-handle:after {background-color:#4d4d4d;} #movie_player:not(.ytp-fullscreen) .ytp-chrome-controls .ytp-volume-panel .ytp-volume-slider-handle:after {opacity:0.35;} #movie_player:not(.ytp-fullscreen) .ytp-chrome-controls .ytp-button:hover {color:#3d3d3d;} #movie_player:not(.ytp-fullscreen) .ytp-chrome-controls .ytp-button .ytp-svg-fill, #movie_player:not(.ytp-fullscreen) .ytp-chrome-controls .ytp-button path[fill='#fff'] {fill:currentColor;} #movie_player:not(.ytp-fullscreen) .ytp-chrome-controls .ytp-button .ytp-svg-shadow {stroke:none;} body[dark] #movie_player:not(.ytp-fullscreen) .ytp-chrome-bottom {background-color:#1b1b1b; color:#fff; border-color:#1b1b1b;} body[dark] #movie_player:not(.ytp-fullscreen) .ytp-time-separator, body[dark] #movie_player:not(.ytp-fullscreen) .ytp-time-duration {color:#999;} body[dark] #movie_player:not(.ytp-fullscreen) .ytp-chrome-controls .ytp-button, body[dark] #movie_player:not(.ytp-fullscreen) .ytp-chrome-controls .ytp-volume-panel {color:#8E8E8E; } body[dark] #movie_player:not(.ytp-fullscreen) .ytp-chrome-controls .ytp-volume-panel .ytp-volume-slider-handle:before, body[dark] #movie_player:not(.ytp-fullscreen) .ytp-chrome-controls .ytp-volume-panel .ytp-volume-slider-handle, body[dark] #movie_player:not(.ytp-fullscreen) .ytp-chrome-controls .ytp-volume-panel .ytp-volume-slider-handle:after {background-color:#8E8E8E;} body[dark] #movie_player:not(.ytp-fullscreen) .ytp-chrome-controls .ytp-button:hover {color:#EBEBEB;} ";
// Defining dynamic script properties
script.cssMainLoaded = null;
script.cssRetroLoaded = null;
script.forceControlsTimer = null;
script.forceControlsListener = null;
script.watchSetupDone = false;
// Experimental settings may be removed. Changing these will likely disable automatic update checks in your script manager
script.applyStyleEverywhere = false; // - Apply style to all pages instead of just 'watch' pages. (default is false)
function prepareTemplates() {
//console.log("prepareTemplates");
t("ytd-watch", function(){
// Add top title spot
$('<div id="rsd-title"></div>').prependTo( $("#top", this) );
// Move description & channel details to the right-side column
var oldMeta = $("#meta",this).addClass("rsd-description");
var newMeta = oldMeta[0].outerHTML;
oldMeta.remove();
$(newMeta).prependTo( $("#related", this) );
});
t("ytd-video-secondary-info-renderer", function() {
//$("ytd-expander",this).attr("collapsed","[[!collapsed_]]"); // invert the collapse status, open description by default
});
t("ytd-video-primary-info-renderer",function(){
// Group viewcount and likes
$("<div id='rsd-likecountgroup'></div>").appendTo( $("#info", this) );
var oldCount = $("#count",this);
var newCount = oldCount[0].outerHTML;
oldCount.remove();
$(newCount).appendTo( $("#rsd-likecountgroup",this) );
var oldBar = $("ytd-sentiment-bar-renderer",this);
var newBar = oldBar[0].outerHTML;
oldBar.remove();
$(newBar).appendTo( $("#rsd-likecountgroup",this) );
});
}
function pageSetup() {
//console.log("pageFirstRun");
$(document).on("yt-navigate", prepareTemplates);
$(document).on("yt-navigate-done", prepareTemplates);
$(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("<a is='yt-endpoint' tabindex='-1' class='style-scope ytd-button-renderer'><paper-icon-button src='"+script.icon+"'\" alt='Toggle Retro Style' title='Toggle Retro Style'></paper-icon-button><paper-tooltip>Toggle Retro Style</paper-tooltip></a>")
.click(async function() {
GM.setValue("retrostyle", !(await GM.getValue("retrostyle", true)));
unloadCSS();
loadCSS();
})
//.appendTo($("#top-level-buttons", buttons));
.prependTo("ytd-masthead #end");
if (script.applyStyleEverywhere) {
loadCSS();
}
typeChange();
$("ytd-app").on("yt-page-type-changed", typeChange);
}
function typeChange() {
//console.log("typeChange");
if ($("#page-manager ytd-watch:not([hidden]), #page-manager ytd-watch.loading").length > 0) {
if (!script.watchSetupDone) {
watchSetup();
}
watchApply();
} else {
if (script.watchSetupDone) {
watchCleanup();
}
}
}
function watchSetup() {
//console.log("watchSetup");
script.watchSetupDone = true;
dataRun();
$("ytd-app").on("yt-update-title", dataRun);
//yt-page-data-updated ?
}
async function watchApply() {
//console.log("watchApply");
if (!script.applyStyleEverywhere) {
loadCSS();
$("#bwp-retrostyle-toggle").removeAttr("hidden");
}
applyRetroPlayer(await GM_getValue("retrostyle", true));
}
function watchCleanup() {
//console.log("watchCleanup");
if (!script.applyStyleEverywhere) {
unloadCSS();
$("#bwp-retrostyle-toggle").attr("hidden","hidden");
}
applyRetroPlayer(false);
}
function dataRun() {
//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");
// Expand description
$("#meta.rsd-description ytd-expander #more").click();
// Video title
$("#rsd-title").empty(); // Remove any existing
//console.log($("ytd-video-primary-info-renderer #container h1"));
$("ytd-video-primary-info-renderer #container h1").clone().appendTo("#rsd-title");
// Arrange views, likes, buttons
/*var belowvid = $("ytd-watch #top ytd-video-primary-info-renderer > #container > #info");
var flex = $("> #flex", belowvid);
var buttons = $("> #menu-container", belowvid);
var views = $("> #count", belowvid);
//buttons.insertBefore(flex);
//views.insertAfter(flex);
$(document.createElement("div"))
.attr("id", "bwp-likes")
.appendTo(views);
//$("> #menu #top-level-buttons ytd-toggle-button-renderer, > ytd-sentiment-bar-renderer", buttons).appendTo("#bwp-likes");
//$(" > ytd-sentiment-bar-renderer", buttons).appendTo("#bwp-likes");
//$("> #menu #top-level-buttons ytd-toggle-button-renderer", buttons).appendTo("#bwp-likes");
*/
}, 1);
}
$(document).one("yt-navigate-finish", pageSetup);
$(document).one("HTMLImportsLoaded", prepareTemplates); // event doesn't exist on Chrome
// possible script points
// 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("bwpScript").addClass("rsd_style");
}
if (!script.cssRetroLoaded && await GM.getValue("retrostyle", true)) {
script.cssRetroLoaded = GM_addStyle(script.retroCSS);
$("html").addClass("bwpRetro").addClass("rsd_retro_style");
applyRetroPlayer(true);
}
}
function unloadCSS() {
if (script.cssMainLoaded) {
$(script.cssMainLoaded).remove();
script.cssMainLoaded = null;
$("html").removeClass("bwpScript").removeClass("rsd_style");
}
if (script.cssRetroLoaded) {
$(script.cssRetroLoaded).remove();
script.cssRetroLoaded = null;
$("html").removeClass("bwpRetro").removeClass("rsd_retro_style");
applyRetroPlayer(false);
}
}
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;
}
}
}
var nativeImports = ('import' in document.createElement('link'));
if (nativeImports) {
// This is horrible but needed until I find the right event
var foundLink = false;
var importDocument = $("link[rel='import']");
var looper = 0;
var intvl = setInterval(function() {
looper++;
if (looper > 3000) {
clearInterval(intvl) ;
}
var importDocument = $("link[rel='import']");
if (!foundLink) {
if ( $(importDocument).length > 0 ) {
foundLink = true;
clearInterval(intvl);
importDocument.each(function(){
$(this).on("load", function(){
//console.log("native imports");
prepareTemplates();
});
});
}
}
}, 1);
}
function t(template, action) {
//console.log(template + " " + nativeImports);
var tobj;
if (nativeImports) { // Chrome-based
$("link[rel='import']").each(function(){
if ($("dom-module#"+template+" template", $(this)[0].import).length > 0) {
tobj = $("dom-module#"+template+" template", $(this)[0].import);
}
});
} else { // Other browsers
tobj = $("dom-module#"+template+" template");
}
if (!($(tobj).hasClass("rsdImported"))) {
var tcontent = tobj[0].content;
$(tobj).addClass("rsdImported");
action.call(tcontent);
}
}
})();
