// ==UserScript==// @name         Youtube Scrolling Comments Layout 2017// @namespace    YFVP3// @website      https://greasyfork.org/en/users/10118-drhouse// @version      16.0// @description  Modern layout for 1080p res, lets you watch videos while being able to scroll and read the entire comments section, by pinning the YouTube video to the left-side page. Plus, a sleek 'More Videos by same user' playlist feed is auto-generated for the current channel and 2 very useful quicklinks are added: 'Most Popular' and 'Newest' sorted user videos. See screenshot for preview.// @author       drhouse// @contributor  Ronny John// @include      http://www.youtube.com/*// @include      https://www.youtube.com/*// @exclude      http://www.youtube.com/embed/*// @exclude      https://www.youtube.com/embed/*// @require 	 http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js// @require      https://greasemonkey.github.io/gm4-polyfill/gm4-polyfill.js// @resource spfremove https://greasyfork.org/scripts/16935-disable-spf-youtube/code/Disable%20SPF%20Youtube.user.js// @grant        GM_addStyle// @grant        GM_getResourceText// @icon         https://s.ytimg.com/yts/img/favicon-vfldLzJxy.ico// ==/UserScript==var theurl = document.URL;var links = document.getElementById('body-container').getElementsByTagName('a');if (location.href.toString().indexOf("list") == -1 && parent.location.href.toString().indexOf("watch") != -1 && parent.location.href.toString().indexOf("feed") == -1 && parent.location.href.toString().indexOf("watch_") == -1)window.location.href = (theurl + "&list=UL&");for(var i=0 ; i<links.length ; i++){if (links[i].href.toString().indexOf("watch") != -1 && links[i].href.toString().indexOf("list") <= -1 && links[i].href.toString().indexOf("feed") == -1 && links[i].href.toString().indexOf("watch_") == -1)links[i].setAttribute('href', links[i].getAttribute('href').split('&')[0] + '&list=UL&');}$(document).ready(function () {var bot = $('#page-container').css('height');$('#watch-appbar-playlist').css('height', bot);$('#watch-appbar-playlist').css('height', '-=1993px').css('top','60px').css('bottom','300px').css('right','0px').css('left','1605px').css('position','fixed');eval(GM_getResourceText("spfremove"));var dest = '#watch7-user-header > div > a';var channel = $(dest).attr('href');var link = 'https://www.youtube.com' + channel + '/videos?view=0&sort=p&flow=grid';var link2 = "'" + link + "'";var dest2 = $('#action-panel-overflow-button > span');var linkdd = 'https://www.youtube.com' + channel + '/videos?view=0&sort=dd&flow=grid';var linkdd2 = "'" + linkdd + "'";$('<button class="yt-uix-button yt-uix-button-size-default yt-uix-button-has-icon no-icon-markup pause-r###me-autoplay yt-uix-menu-triggerx yt-uix-tooltip addto-button" type="button" onclick="window.open(' + link2 + ')" title="More actions" aria-pressed="false" id="popular" role="button" aria-haspopup="false" data-tooltip-text="Popular videos" aria-labelledby="yt-uix-tooltip93-arialabel"><span class="yt-uix-button-content"><a href="' + link + '">Most popular videos</a></span></button>').insertAfter(dest2).css('color', '#666');$('<button class="yt-uix-button yt-uix-button-size-default yt-uix-button-has-icon no-icon-markup pause-r###me-autoplay yt-uix-menu-triggerx yt-uix-tooltip addto-button" type="button" onclick="window.open(' + linkdd2 + ')" title="More actions" aria-pressed="false" id="popular" role="button" aria-haspopup="false" data-tooltip-text="Newest videos" aria-labelledby="yt-uix-tooltip93-arialabel"><span class="yt-uix-button-content"><a href="' + linkdd + '">Newest videos</a></span></button>').insertAfter(dest2).css('color', '#666');// code below created by Ronny John | http://ronnyjohn.work | Youtube Comments Sidebar | https://greasyfork.org/en/scripts/21391-youtube-comments-sidebar(function() {'use strict';var mutationObserver = window.MutationObserver || window.WebKitMutationObserver;var watchModeObserver, sidebarAdObserver, page, sidebar, ads, related, relatedParent, relatedWrapper, comments, footer;var onResizeFunc = function() { setPositions(); setHeights(); console.log('resize'); };var onScrollFunc = function() { setHeights(); };var modificationDone = false;if (typeof mutationObserver === 'undefined') return;// a little style adjustmentif (typeof(GM_addStyle) === typeof(Function)) {GM_addStyle('#watch7-sidebar-contents.sidebar-comments { position: fixed; z-index: 1; } #watch-discussion.sidebar-comments { position: fixed; padding: 0 6px; overflow: hidden; overflow-y: auto; z-index: 2; } #watch-discussion.sidebar-comments .comment-section-renderer-paginator { margin: 0; } #watch7-sidebar { -moz-transition: all 0s !important; -webkit-transition: all 0s !important; -o-transition: all 0s !important; transition: all 0s !important; }');}initialize();var contentObserver = createContentObserver();contentObserver.observe(document.getElementById('content'), {childList: true, subtree: true});function initialize() {page = document.getElementById('page');sidebar = document.getElementById('watch7-sidebar-contents');related = document.getElementById('watch-related');comments = document.getElementById('watch-discussion');footer = document.getElementById('footer-container');// if modification is already done, stop initialization (can be cached on browser navigate back and forward)if (related && comments && related.parentNode.parentNode == comments.parentNode) {return;}removeListeners();if (watchModeObserver) watchModeObserver.disconnect();if (sidebarAdObserver) sidebarAdObserver.disconnect();// skip if no video is shown or playlist is openif (!sidebar || !comments || !related) {return;}relatedParent = related.parentNode;watchModeObserver = createWatchModeObserver();watchModeObserver.observe(page, {attributes: true});// if stage mode is active, do not run modificationsif (page.classList.contains('watch-stage-mode')) {return;}runModifications();// if ads are inserted in the sidebar, the position of the comments must be updatedads = document.getElementById('google_companion_ad_div');if (ads) {sidebarAdObserver = createSidebarAdObserver();sidebarAdObserver.observe(ads, {childList: true});}}function runModifications() {// move ads and relatedrelatedWrapper = document.createElement('div');relatedWrapper.className = comments.className;relatedWrapper.appendChild(related);comments.parentNode.insertBefore(relatedWrapper, comments);// comments node can't be moved, because loading of replies is not working properly thensidebar.classList.add('sidebar-comments');comments.className = 'sidebar-comments';window.addEventListener('resize', onResizeFunc);window.addEventListener('scroll', onScrollFunc);onResizeFunc();modificationDone = true;}function revertModifications() {sidebar.classList.remove('sidebar-comments');sidebar.style.width = 'auto';sidebar.style.height = 'auto';relatedParent.appendChild(related);comments.className = relatedWrapper.className;comments.style.width = 'auto';comments.style.height = 'auto';relatedWrapper.remove();removeListeners();modificationDone = false;}function removeListeners() {window.removeEventListener('resize', onResizeFunc);window.removeEventListener('scroll', onScrollFunc);}function setPositions() {var sidebarParentRect = sidebar.parentNode.getBoundingClientRect();sidebar.style.top = (sidebarParentRect.top + scrollY) + 'px';sidebar.style.left = sidebarParentRect.left + 'px';sidebar.style.width = (sidebarParentRect.right - sidebarParentRect.left) + 'px';var containerRect = relatedParent.getBoundingClientRect();comments.style.top = containerRect.bottom + 'px';comments.style.left = containerRect.left + 'px';comments.style.width = (containerRect.right - containerRect.left) + 'px';}function setHeights() {var sidebarRect = sidebar.getBoundingClientRect();var containerRect = relatedParent.getBoundingClientRect();var footerRect = footer.getBoundingClientRect();var bottom = document.documentElement.clientHeight;if (footerRect.top < bottom) {bottom = footerRect.top;}var commentsHeight = bottom - containerRect.bottom - 20;sidebar.style.height = (containerRect.bottom - sidebarRect.top + commentsHeight + 10) + 'px';comments.style.height = commentsHeight + 'px';}function createContentObserver() {return new mutationObserver(function(mutations) {mutations.forEach(function(mutation) {if (mutation.addedNodes !== null) {for (var i=0; i < mutation.addedNodes.length; i++) {var node = mutation.addedNodes[i];if (node.id == 'watch7-container' || node.id == 'watch7-main-container') {initialize();break;}}}});});}function createWatchModeObserver() {return new mutationObserver(function(mutations) {for (var i=0; i<mutations.length; i++) {if (mutations[i].attributeName === "class") {if (page.classList.contains('watch-stage-mode') && modificationDone) {revertModifications();} else if (!page.classList.contains('watch-stage-mode') && !modificationDone) {runModifications();}}}});}function createSidebarAdObserver() {return new mutationObserver(function(mutations) {mutations.forEach(function(mutation) {if (mutation.addedNodes !== null) {onResizeFunc();}});});}})();});