☰

Youtube Scrolling Comments Layout 2017

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.

  1. // ==UserScript==
  2. // @name         Youtube Scrolling Comments Layout 2017
  3. // @namespace    YFVP3
  4. // @website      https://greasyfork.org/en/users/10118-drhouse
  5. // @version      16.0
  6. // @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.
  7. // @author       drhouse
  8. // @contributor  Ronny John
  9. // @include      http://www.youtube.com/*
  10. // @include      https://www.youtube.com/*
  11. // @exclude      http://www.youtube.com/embed/*
  12. // @exclude      https://www.youtube.com/embed/*
  13. // @require 	 http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js
  14. // @require      https://greasemonkey.github.io/gm4-polyfill/gm4-polyfill.js
  15. // @resource spfremove https://greasyfork.org/scripts/16935-disable-spf-youtube/code/Disable%20SPF%20Youtube.user.js
  16. // @grant        GM_addStyle
  17. // @grant        GM_getResourceText
  18. // @icon         https://s.ytimg.com/yts/img/favicon-vfldLzJxy.ico
  19. // ==/UserScript==
  20.  
  21. var theurl = document.URL;
  22. var links = document.getElementById('body-container').getElementsByTagName('a');
  23.  
  24. 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)
  25. 	window.location.href = (theurl + "&list=UL&");
  26.  
  27. for(var i=0 ; i<links.length ; i++){
  28. 	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)
  29. 		links[i].setAttribute('href', links[i].getAttribute('href').split('&')[0] + '&list=UL&');
  30. }
  31.  
  32. $(document).ready(function () {
  33.  
  34. 	var bot = $('#page-container').css('height');
  35. 	$('#watch-appbar-playlist').css('height', bot);
  36. 	$('#watch-appbar-playlist').css('height', '-=1993px').css('top','60px').css('bottom','300px').css('right','0px').css('left','1605px').css('position','fixed');
  37.  
  38. 	eval(GM_getResourceText("spfremove"));
  39.  
  40. 	var dest = '#watch7-user-header > div > a';
  41. 	var channel = $(dest).attr('href');
  42. 	var link = 'https://www.youtube.com' + channel + '/videos?view=0&sort=p&flow=grid';
  43. 	var link2 = "'" + link + "'";
  44. 	var dest2 = $('#action-panel-overflow-button > span');
  45. 	var linkdd = 'https://www.youtube.com' + channel + '/videos?view=0&sort=dd&flow=grid';
  46. 	var linkdd2 = "'" + linkdd + "'";
  47. 	$('<button class="yt-uix-button yt-uix-button-size-default yt-uix-button-has-icon no-icon-markup pause-resume-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');
  48. 	$('<button class="yt-uix-button yt-uix-button-size-default yt-uix-button-has-icon no-icon-markup pause-resume-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');
  49.  
  50.  
  51. // code below created by Ronny John | http://ronnyjohn.work | Youtube Comments Sidebar | https://greasyfork.org/en/scripts/21391-youtube-comments-sidebar
  52. 	(function() {
  53. 		'use strict';
  54.  
  55. 		var mutationObserver = window.MutationObserver || window.WebKitMutationObserver;
  56. 		var watchModeObserver, sidebarAdObserver, page, sidebar, ads, related, relatedParent, relatedWrapper, comments, footer;
  57. 		var onResizeFunc = function() { setPositions(); setHeights(); console.log('resize'); };
  58. 		var onScrollFunc = function() { setHeights(); };
  59. 		var modificationDone = false;
  60.  
  61. 		if (typeof mutationObserver === 'undefined') return;
  62.  
  63. 		// a little style adjustment
  64. 		if (typeof(GM_addStyle) === typeof(Function)) {
  65. 			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; }');
  66. 		}
  67.  
  68. 		initialize();
  69.  
  70. 		var contentObserver = createContentObserver();
  71. 		contentObserver.observe(document.getElementById('content'), {childList: true, subtree: true});
  72.  
  73. 		function initialize() {
  74. 			page = document.getElementById('page');
  75. 			sidebar = document.getElementById('watch7-sidebar-contents');
  76. 			related = document.getElementById('watch-related');
  77. 			comments = document.getElementById('watch-discussion');
  78. 			footer = document.getElementById('footer-container');
  79.  
  80. 			// if modification is already done, stop initialization (can be cached on browser navigate back and forward)
  81. 			if (related && comments && related.parentNode.parentNode == comments.parentNode) {
  82. 				return;
  83. 			}
  84.  
  85. 			removeListeners();
  86. 			if (watchModeObserver) watchModeObserver.disconnect();
  87. 			if (sidebarAdObserver) sidebarAdObserver.disconnect();
  88.  
  89. 			// skip if no video is shown or playlist is open
  90. 			if (!sidebar || !comments || !related) {
  91. 				return;
  92. 			}
  93.  
  94. 			relatedParent = related.parentNode;
  95.  
  96. 			watchModeObserver = createWatchModeObserver();
  97. 			watchModeObserver.observe(page, {attributes: true});
  98.  
  99. 			// if stage mode is active, do not run modifications
  100. 			if (page.classList.contains('watch-stage-mode')) {
  101. 				return;
  102. 			}
  103.  
  104. 			runModifications();
  105.  
  106. 			// if ads are inserted in the sidebar, the position of the comments must be updated
  107. 			ads = document.getElementById('google_companion_ad_div');
  108. 			if (ads) {
  109. 				sidebarAdObserver = createSidebarAdObserver();
  110. 				sidebarAdObserver.observe(ads, {childList: true});
  111. 			}
  112. 		}
  113.  
  114. 		function runModifications() {
  115. 			// move ads and related
  116. 			relatedWrapper = document.createElement('div');
  117. 			relatedWrapper.className = comments.className;
  118. 			relatedWrapper.appendChild(related);
  119. 			comments.parentNode.insertBefore(relatedWrapper, comments);
  120.  
  121. 			// comments node can't be moved, because loading of replies is not working properly then
  122. 			sidebar.classList.add('sidebar-comments');
  123. 			comments.className = 'sidebar-comments';
  124.  
  125. 			window.addEventListener('resize', onResizeFunc);
  126. 			window.addEventListener('scroll', onScrollFunc);
  127.  
  128. 			onResizeFunc();
  129. 			modificationDone = true;
  130. 		}
  131.  
  132. 		function revertModifications() {
  133. 			sidebar.classList.remove('sidebar-comments');
  134. 			sidebar.style.width = 'auto';
  135. 			sidebar.style.height = 'auto';
  136. 			relatedParent.appendChild(related);
  137. 			comments.className = relatedWrapper.className;
  138. 			comments.style.width = 'auto';
  139. 			comments.style.height = 'auto';
  140. 			relatedWrapper.remove();
  141.  
  142. 			removeListeners();
  143.  
  144. 			modificationDone = false;
  145. 		}
  146.  
  147. 		function removeListeners() {
  148. 			window.removeEventListener('resize', onResizeFunc);
  149. 			window.removeEventListener('scroll', onScrollFunc);
  150. 		}
  151.  
  152. 		function setPositions() {        
  153. 			var sidebarParentRect = sidebar.parentNode.getBoundingClientRect();
  154. 			sidebar.style.top = (sidebarParentRect.top + scrollY) + 'px';
  155. 			sidebar.style.left = sidebarParentRect.left + 'px';
  156. 			sidebar.style.width = (sidebarParentRect.right - sidebarParentRect.left) + 'px';
  157.  
  158. 			var containerRect = relatedParent.getBoundingClientRect();
  159. 			comments.style.top = containerRect.bottom + 'px';
  160. 			comments.style.left = containerRect.left + 'px';
  161. 			comments.style.width = (containerRect.right - containerRect.left) + 'px';
  162.  
  163. 		}
  164.  
  165. 		function setHeights() {
  166. 			var sidebarRect = sidebar.getBoundingClientRect();
  167. 			var containerRect = relatedParent.getBoundingClientRect();
  168. 			var footerRect = footer.getBoundingClientRect();
  169. 			var bottom = document.documentElement.clientHeight;
  170.  
  171. 			if (footerRect.top < bottom) {
  172. 				bottom = footerRect.top;   
  173. 			}
  174.  
  175. 			var commentsHeight = bottom - containerRect.bottom - 20;
  176. 			sidebar.style.height = (containerRect.bottom - sidebarRect.top + commentsHeight + 10) + 'px';
  177. 			comments.style.height = commentsHeight + 'px';
  178. 		}
  179.  
  180. 		function createContentObserver() {
  181. 			return new mutationObserver(function(mutations) {
  182. 				mutations.forEach(function(mutation) {
  183. 					if (mutation.addedNodes !== null) {
  184. 						for (var i=0; i < mutation.addedNodes.length; i++) {
  185. 							var node = mutation.addedNodes[i];
  186. 							if (node.id == 'watch7-container' || node.id == 'watch7-main-container') {
  187. 								initialize();
  188. 								break;
  189. 							}
  190. 						}
  191. 					}
  192. 				});
  193. 			});
  194. 		}
  195.  
  196. 		function createWatchModeObserver() {
  197. 			return new mutationObserver(function(mutations) {
  198. 				for (var i=0; i<mutations.length; i++) {
  199. 					if (mutations[i].attributeName === "class") {
  200. 						if (page.classList.contains('watch-stage-mode') && modificationDone) {
  201. 							revertModifications();
  202. 						} else if (!page.classList.contains('watch-stage-mode') && !modificationDone) {
  203. 							runModifications();   
  204. 						}
  205. 					}
  206. 				}
  207. 			});
  208. 		}
  209.  
  210. 		function createSidebarAdObserver() {
  211. 			return new mutationObserver(function(mutations) {
  212. 				mutations.forEach(function(mutation) {
  213. 					if (mutation.addedNodes !== null) {
  214. 						onResizeFunc();
  215. 					}
  216. 				});
  217. 			});
  218. 		}
  219. 	})();
  220. });