comment sidebar; extra sidebars; related videos grid view;... (previously: Double sidebars at 2560px width)

[Rulawtor]

⚬ PROBLEM:

Putting the comments on the sidebar in 2560x1440 resolution makes two sidebars, one with recommendations and one with comments, unlike in 1920x1080 where the recommendations get placed beneath the player.

⚬ SOLUTION:

An option to force the recommendations to go beneath the player.

⚬ ALTERNATIVES:

I don't know if this already exists, but being able to change the size of the mini-player when scrolling down to the comments would work just as well.

⚬ RELEVANCE / SCOPE:

It would be good for people who like to read the comments while watching videos.

⚬ "SIDE EFFECTS":

People who prefer the double sidebar thing wouldn't like this, but that's why it should be an option rather than the default.

⚬ CONTEXT:
//
Thank you!

SHORT Table	(Summary)
Problem	Double sidebars when putting comments on the side
Solution	Make an option to force the recommendations beneath the player
Alternatives	Option to change the size of mini-player when scrolling to comments
Scope	People who read comments while watching videos
Side effects	Double sidebars might be a preference to some.
Context

[a1exanderklein]

Hi! I'm a student from the University of Florida looking to make a first-time contribution for an assignment. Mind if I take a look at this issue? If you could point me to the location of the issue I'd greatly appreciate it!

[Rulawtor]

Go for it, but I just found this issue and reported it, so I don't know where it comes from. If I had to guess, it's probably because in 1440 there's enough space for two sidebars.

[ImprovedTube]

hi! @Rulawtor

• we published the feature comments in sidebar(simple) last year & wanted to have two sidebars instead of scrolling as early as possible (=1599px width)
  

  youtube/js&css/web-accessible/www.youtube.com/appearance.js

  Lines 136 to 147 in f5cdcb4

  	Comments Sidebar Simple
  	------------------------------------------------------------------------------*/
  	ImprovedTube.commentsSidebarSimple = function() { if(ImprovedTube.storage.comments_sidebar_simple === true){
  	if(window.matchMedia("(min-width: 1599px)").matches) {
  	document.querySelector("#primary").insertAdjacentElement('afterend', document.querySelector("#comments"));}
  	if(window.matchMedia("(max-width: 1598px)").matches) {
  	document.querySelector("#related").insertAdjacentElement('beforebegin', document.querySelector("#comments"));
  	setTimeout(function () {
  	document.querySelector("#primary-inner").appendChild(document.querySelector("#related"));}
  	);}
  	}
  	}

• D-Rekk made a much more detailed implementation at Comments: Sidebar update #1697 and felt two sidebars isn't pretty below 1952px, including added scrollbars (it should work at 1920 at latest somehow, if a user wants, the most common width.)

  youtube/js&css/web-accessible/www.youtube.com/appearance.js

  Lines 150 to 288 in f5cdcb4

  	------------------------------------------------------------------------------*/
  	ImprovedTube.commentsSidebar = function() { if(ImprovedTube.storage.comments_sidebar === true){
  	const video = document.querySelector("#player .ytp-chrome-bottom") || document.querySelector("#container .ytp-chrome-bottom");
  	let hasApplied = 0;
  	if(/watch\?/.test(location.href)) {
  	sidebar();
  	styleScrollbars();
  	setGrid();
  	applyObserver();
  	window.addEventListener("resize", sidebar)
  	}
  	function sidebar(){
  	resizePlayer();
  	if(window.matchMedia("(min-width: 1952px)").matches) {
  	if (!hasApplied) {
  	initialSetup()
  	setTimeout(() => {document.getElementById("columns").appendChild(document.getElementById("related"))})
  	}
  	else if (hasApplied == 2){ //from medium to big size
  	setTimeout(() => {document.getElementById("columns").appendChild(document.getElementById("related"))})
  	}
  	hasApplied = 1
  	}
  	else if(window.matchMedia("(min-width: 1000px)").matches) {
  	if (!hasApplied) {
  	initialSetup();
  	}
  	else if (hasApplied == 1){ //from big to medium
  	document.getElementById("primary-inner").appendChild(document.getElementById("related"));
  	}
  	hasApplied = 2
  	}
  	else { /// <1000
  	if(hasApplied == 1){
  	document.getElementById("primary-inner").appendChild(document.getElementById("related"));
  	let comments = document.querySelector("#comments");
  	let below = document.getElementById("below");
  	below.appendChild(comments);
  	}
  	else if (hasApplied == 2){
  	let comments = document.querySelector("#comments");
  	let below = document.getElementById("below");
  	below.appendChild(comments);
  	}
  	hasApplied = 0;
  	}
  	}
  	function setGrid(){
  	let checkParentInterval = setInterval(() => {
  	container = document.querySelector("#related ytd-compact-video-renderer.style-scope")?.parentElement;
  	if (container) {
  	clearInterval(checkParentInterval);
  	container.style.display = "flex";
  	container.style.flexWrap = "wrap";
  	container.style.flexDirection = "row";
  	}
  	}, 250);
  	}
  	function initialSetup() {
  	let secondaryInner = document.getElementById("secondary-inner");
  	let primaryInner = document.getElementById("primary-inner");
  	let comments = document.querySelector("#comments");
  	setTimeout(() => {
  	primaryInner.appendChild(document.getElementById("panels"));
  	primaryInner.appendChild(document.getElementById("related"))
  	secondaryInner.appendChild(document.getElementById("chat-template"));
  	secondaryInner.appendChild(comments);
  	})
  	}
  	function resizePlayer() {
  	const width = video.offsetWidth + 24;
  	const player = document.querySelector("#player.style-scope.ytd-watch-flexy");
  	document.getElementById("primary").style.width = `${width}px`;
  	player.style.width = `${width}px`;
  	}
  	function styleScrollbars(){
  	if (!navigator.userAgent.toLowerCase().includes("mac")){
  	let color, colorHover
  	const isDarkMode = getComputedStyle(document.querySelector('ytd-app')).getPropertyValue('--yt-spec-base-background') == "#0f0f0f";
  	if(isDarkMode) [color,colorHover] = ["#616161", "#909090"];
  	else [color,colorHover] = ["#aaaaaa", "#717171"];
  	const style = document.createElement("style");
  	if(ImprovedTube.storage.comments_sidebar_scrollbars === true){
  	const cssRule = `
  	#primary, #secondary {
  	overflow: overlay !important;
  	}
  	::-webkit-scrollbar
  	{
  	width: 16px;
  	height: 7px;
  	}
  	::-webkit-scrollbar-thumb{
  	background-color: ${color};
  	border-radius: 10px;
  	border: 4px solid transparent;
  	background-clip: padding-box;
  	}
  	::-webkit-scrollbar-thumb:hover{
  	background-color: ${colorHover};
  	}`;
  	style.appendChild(document.createTextNode(cssRule));
  	}
  	else { const cssRule = `
  	#primary, #secondary {
  	overflow: overlay !important;
  	}
  	::-webkit-scrollbar
  	{
  	width: 0px;
  	height: 0px;
  	}`;
  	style.appendChild(document.createTextNode(cssRule));
  	}
  	document.head.appendChild(style);
  	}
  	}
  	function applyObserver(){
  	const debouncedResizePlayer = debounce(resizePlayer, 200);
  	const resizeObserver = new ResizeObserver(debouncedResizePlayer);
  	resizeObserver.observe(video);
  	}
  	function debounce(callback, delay) {
  	let timerId;
  	return function (...args) {
  	clearTimeout(timerId);
  	timerId = setTimeout(() => {
  	callback.apply(this, args);
  	}, delay);
  	};
  	}
  	}
  	}
  	/*------------------------------------------------------------------------------

• youtube changed something i think and the features might need updates.

  • bug: [bug] Sidebar to the left + Comments on sidebar dont work as intended #1936 (our features are meant to work combined as much as possible & often did work together originally until youtube changed. Did you try both comments-sidebar's @Anoaxx?)

---

University of Florida

Not the first one these days. Wonderful surprise! @a1exanderklein

To solve #1960 we got to disable one or both of these blocks conditionally:

youtube/js&css/extension/www.youtube.com/appearance/comments/comments.css

Line 80 in f5cdcb4

@media screen and (min-width: 1952px) {

youtube/js&css/extension/www.youtube.com/appearance/comments/comments.css

Line 67 in f5cdcb4

@media screen and (min-width: 1599px) {

- ..., through adding a toggle to our menu skeleton

youtube/menu/skeleton-parts/appearance.js

Line 669 in f5cdcb4

# COMMENTS

(this would often be html and with vue.js or so, besides that the original author found JS objects minimal/comfortable AFAIK in his IDE (https://github.com/code-charity/SATUS) and just loading everything at once is fast)_
- the toggle can be called: "columns" (with the message in _locales/en/ "Extra sidebar column/s (if your screen window is wide)"
- until recently CSS didn't allow nesting statements inside anything besides @media ... { ... @media ... { ... @media ... { ...} } }, so we can add :not([columns=true]) to every selector line inside the media queries. ALSO, CSS can be nested now (Breaking news: https://sass-lang.com/blog/sass-and-native-nesting/ https://www.w3.org/TR/css-nesting-1/ https://caniuse.com/css-nesting). So the new/short/convenient way must be suggestible (and SCSS & SASS lose a big original reason. However the old way will sometimes make sense if it is just two lines or starts with a block, we likely need for multiple reasons still such as @media > 1920px. )

---

more & structure:

• we made sub-options appear conditionally only, like this:

  youtube/menu/styles/sub-options.css

  Line 14 in f5cdcb4

  /*-comment sidebar scrollbars-*/

  - besides i decided not to apply this through also adding the id: "comments-sidebar" in the skeleton, to remind that this is worth to be separated as its own feature too (on a vertical screen people can just have comments below the player and only scroll in comments, not scroll away the player.) (the code is there. We can define functions called again through different toggles. We often just need more/better structure, compare: default option for auto loop #1959 )
• we made toggles enable or disable each other (see on click in the skeleton-parts/player.js). So our comments-sidebar toggles can enable/disable this automatically. @D-Rekk's feature can also show Related videos as a Grid. This could be enabled/disabled separately at appearance:sidebar:related videos:grid (if it fits). This doesn't appear on the same screen yet though. So we need to a different method. And we do not yet store if a feature was enable by automatically or not (would be necessary to decides if disabling comments in sidebar should also disable related videos:grid in turn after enabling it)
• mental reset: an alternative or extra sidebar makes an awesome feature that we can display on the minimap at "appearance" with any extra content (or comments) (and want to to move the minimap the front screen too actually.)
  • Chrome extensions also allow to appear in sidebar though since last year, so we could also provide extra content that way.

[D-Rekk]

What is going on!?

Well, this is a hidden feature available for Comments -> Sidebar on wide screens. It eventually was shipped because the feature seemed pretty nifty. Plus we could "test" and maybe receive feedbacks on users with wide screens that effectively used the feature. Yet seems that this has become problematic lately. It's strange that it's applying the media query on your screen at that resolution (my screen is 2560x1600 and it doesn't trigger). Possibly it's because of your Window Scaling or page zoom.

Why was this added

The main reason apart from aesthetic was that the Primary Container (video + description + comments) had a growing limit (around 1080px). Having an extra-wide YouTube window would only increase the page margin, basically empty space. This is why I added another bar for recommended videos, which then brought the idea of having grid view recommendations.

youtube/js&css/web-accessible/www.youtube.com/appearance.js

Lines 162 to 174 in f5cdcb4

	function sidebar(){
	resizePlayer();
	if(window.matchMedia("(min-width: 1952px)").matches) {
	if (!hasApplied) {
	initialSetup()
	setTimeout(() => {document.getElementById("columns").appendChild(document.getElementById("related"))})
	}
	else if (hasApplied == 2){ //from medium to big size
	setTimeout(() => {document.getElementById("columns").appendChild(document.getElementById("related"))})
	}
	hasApplied = 1
	}

If you also enable Sidebar -> To the left you can reproduce the below aspect.

What's next?

Well, due to the negative reception (sigh 🥲) you might:

• simply remove and adjust the above JS and the linked CSS (the entire media query)
  

  youtube/js&css/extension/www.youtube.com/appearance/comments/comments.css

  Lines 79 to 80 in f5cdcb4

  	/* 2 COLS FEATURE */
  	@media screen and (min-width: 1952px) {

• adjust/update the script and values so it works properly
• rearrange into its own feature

[ImprovedTube]

hi! @D-Rekk am i tagging you too much? (It is for appreciation / credits. And also just sharing the process, as slow or also mentally nice continuity it might be - i might feel guilty / alone not having finished each point earlier, thus happy when the topic continues a bit)

negative reception (sigh 🥲)

not negative (the wish said it should be an option, not a default. did you also try hiding related videos? @Rulawtor )

As we are a customization thing, wishes wont stop 🎉, so i put emphasis on the process & structure.
With every solution humans might find more than one new "problem/wish in average.
So naturally there seem to be unlimited questions to answer and unlimited features.

It's strange that it's applying

typo? starts > 1952px.
(and I think you originally wanted to go with the same as @Rulawtor back then, until i suggested to add this extra.)

rearrange into its own feature

( layed out the steps for adding a toggle above) (still a small task /good first PR for Florida undergraduates, who hopefully even might back one day after having felt some efficiency :D)

[a1exanderklein]

Hi! I finally received approval from my instructor to move forward with this issue (my apologies for the wait 😵‍💫). I have made a few changes that I believe add a toggle correctly.

through adding a toggle to our menu skeleton

Following @ImprovedTube guidance, I have added this to appearance.js

columns: {
	component: "switch",
	text: "toggleColumnComments"
}

And this to _locales/en/messages.json

"columns": {"message":"Extra sidebar column/s (if your screen window is wide)"}

add :not([columns=true]) to every selector line inside the media queries

I have added the :not([columns=true]) to each selector inside the queries (at least I believe I did)

@media screen and (min-width: 1599px) {	
html[data-page-type=video][it-comments-sidebar-simple='true'] #player:not([columns=true]) {   margin-left: -20px !important;}
html[data-page-type=video][it-comments-sidebar-simple='true'] #columns:not([columns=true]) {  display:flex !important; max-width:100% !important;}
html[data-page-type=video][it-comments-sidebar-simple='true'] #comments:not([columns=true]) { max-width: min(850px, 19vw) !important; margin-left:-12px; } 
html[data-page-type=video][it-comments-sidebar-simple='true'][it-sidebar-left='true'] #comments:not([columns=true]) { max-right: -25px  !important; } 
html[data-page-type=video][it-comments-sidebar-simple='true'] #related:not([columns=true]) { margin-right: -22px !important; max-width: max(360px, 18vw) !important;  }
html[data-page-type=video][it-comments-sidebar-simple='true'] #secondary:not([columns=true]) { margin-right: -22px !important; max-width: max(360px, 18vw) !important;  }

html[data-page-type=video][it-comments-sidebar-simple='true']:not([it-player-size='1080p']):not([it-player-size='1440p']):not([it-player-size='2160p']):not([it-player-size='custom']):not([it-player-size='max_width']) ytd-watch-flexy:not([fullscreen]) #primary:not([columns=true]) {
min-width: min(calc(100vw - 1000px), 1260px) !important; max-width: 1260px !important; }
}

/* 2 COLS FEATURE */
@media screen and (min-width: 1952px) {	
	html[data-page-type=video][it-comments-sidebar='true'] ytd-watch-flexy #related:not([columns=true]) { flex-shrink: 4; min-width: 300px;}
	html[data-page-type=video][it-comments-sidebar='true'] ytd-watch-flexy:not([theater]):not([fullscreen]) #related:not([columns=true]) {  width: auto !important;}
	html[data-page-type=video][it-comments-sidebar='true'] ytd-watch-flexy #columns:not([columns=true]) { max-width: 100%;}
	html[data-page-type=video][it-comments-sidebar='true'] ytd-watch-flexy #secondary:not([columns=true]) {min-width: 300px !important; max-width: 420px;}
	html[data-page-type=video][it-comments-sidebar='true'] ytd-watch-flexy #primary:not([columns=true]) {
		flex: 0 0 auto;
    max-width: 1280px !important;
	}
	html[data-page-type=video][it-comments-sidebar='true'][it-sidebar-left='true'] ytd-watch-flexy:not([theater]):not([fullscreen]) #secondary:not([columns=true]) {flex-shrink: 2;}

	/*--------------------------------------------------------------
		#TODO: there should be 2 new option in settings:
			1 - [it-comments-sidebar-left] so we can shift comments-sidebar to the left (should appear only when 'Comments:Sidebar' is activated).
			2 - [swap-sidebars] so we exchange the sidebars order (that would only apply to 1952px+ wide-screens, because player resize
			is messy AT THE MOMENT. Once resize works properly we can re-arrange this entire media-screen in its own setting option too).
		Might also think on the edge-cases were both options are active
	--------------------------------------------------------------*/
	html[data-page-type=video][it-comments-sidebar='true'][it-sidebar-left='true'] ytd-watch-flexy #secondary {order: 6;} /*TO DELETE once top is implemented*/
	
	
	/* PADDINGS */
	html[data-page-type=video][it-comments-sidebar='true']:not([it-sidebar-left='true']) ytd-watch-flexy #primary:not([columns=true]) {padding: 0 14px 0 24px;}
	html[data-page-type=video][it-comments-sidebar='true']:not([it-sidebar-left='true']) ytd-watch-flexy #secondary:not([columns=true]) {padding-right: 0;}
	html[data-page-type=video][it-comments-sidebar='true']:not([it-sidebar-left='true']) ytd-watch-flexy #secondary-inner:not([columns=true]) {padding-left: 14px; padding-right: 14px;}
	html[data-page-type=video][it-comments-sidebar='true'][it-sidebar-left='true'] ytd-watch-flexy #primary:not([columns=true]) {padding: 0 14px}
	html[data-page-type=video][it-comments-sidebar='true'][it-sidebar-left='true'] ytd-watch-flexy #secondary-inner:not([columns=true]) {padding-right: 24px; padding-left: 14px}
	html[data-page-type=video][it-comments-sidebar='true'][it-sidebar-left='true'] ytd-watch-flexy:not([theater]):not([fullscreen]) #related:not([columns=true]),
	html[data-page-type=video][it-comments-sidebar='true'] ytd-watch-flexy:not([theater]):not([fullscreen]) #related:not([columns=true]){ height: inherit; overflow-y: scroll}
	html[data-page-type=video][it-comments-sidebar='true'][it-sidebar-left='true'] ytd-watch-flexy #secondary:not([columns=true]){border-right: 1px solid var(--yt-spec-10-percent-layer)}
	html[data-page-type=video][it-comments-sidebar='true']:not([it-sidebar-left='true']) ytd-watch-flexy #secondary:not([columns=true]){border-left: 1px solid var(--yt-spec-10-percent-layer)}
	html[data-page-type=video][it-comments-sidebar='true'] ytd-watch-flexy #related:not([columns=true]) > :first-child {padding-top: 24px;}
	
	html[data-page-type=video][it-comments-sidebar='true'][it-sidebar-left='true'] ytd-watch-flexy #related:not([columns=true]){ padding: 0 14px 0 24px; border-right: 1px solid var(--yt-spec-10-percent-layer) }
	html[data-page-type=video][it-comments-sidebar='true']:not([it-sidebar-left='true']) ytd-watch-flexy #related:not([columns=true]){ padding: 0 24px 0 14px; border-left: 1px solid var(--yt-spec-10-percent-layer)}
	html[data-page-type=video][it-comments-sidebar='true'] ytd-watch-flexy[theater] #columns:not([columns=true]),
	html[data-page-type=video][it-comments-sidebar='true'] ytd-watch-flexy[fullscreen] #columns:not([columns=true]) {height: auto}
	html[data-page-type=video][it-comments-sidebar='true'][it-sidebar-left='true'] ytd-watch-flexy #secondary:not([columns=true]){border-left: 1px solid var(--yt-spec-10-percent-layer)}

	/* or unset */
	html[data-page-type=video][it-comments-sidebar='true'] #columns:not([columns=true]) {max-width: 2400px !important; }
}

My only issue is that I do not know how to test this code locally. If anyone could steer me in the right direction or let me know if there is any issues in my implementation, it would be greatly appreciated! 😆

[ImprovedTube]

I have added this to appearance.js

i just moved it up, made it true by default, but only visible when the comments sidebar (or comments sidebar-simple) are on.

[ImprovedTube]

Thank you! @a1exanderklein

add :not([columns=true]) to every selector line inside the media queries

I have added the :not([columns=true]) to each selector inside the queries (at least I believe I did)

• sorry I typed fast there. More precisely we add the user's settings as attributes of the root element <html> of every YouTube page. (As a browser extension, we can do this one thing before the page fully loaded. So this "trick" let's us add CSS styles without custom JS.)
  ...
  html[data-page-type=video][it-comments-sidebar-simple='true'][it-columns=true]
  ...

---

---

My only issue is that I do not know how to test this code locally. If anyone could steer me in the right direction or let me know if there is any issues in my implementation, it would be greatly appreciated! 😆

You can download the repo (https://github.com/code-charity/youtube/archive/refs/heads/master.zip)
and load the extension unpacked at chrome://extensions "developer mode"
(Same goes to the stores. We might use py/build.py again just to adjust some lines for different browsers and exclude the .github & py folder when uploading to the browser stores, but that's optional)

BTW https://github.com/code-charity/youtube/wiki/Contributing#developer-convenience-efficiency-methods
html[data-page-type=video][it-comments-sidebar-simple='true']

Developer convenience (/Efficiency /Methods)

• Testing Browser-Extension changes with 1 click: Extension Reloader & enable the option to reload the current tab too & set a nice shortcut like alt+E chrome://extensions/shortcuts
  
  - Alternatively fully automatic: ...

---

---

"columns": {"message":"Extra sidebar column/s (if your screen window is wide)"}

screen window viewport would be accurate but is a rare word (not user-friendly)
so: "Extra sidebar column (if the window is wide)" ?
( or 🤔: "...without moving the related videos, if the window is wide enough" (=more user-friendly to stay specific at that point? @Rulawtor
(while I was thinking of "Extra sidebar" as an independent feature already, for this sub-option #1960, we can chose whats linguistically best right here. )

[ImprovedTube]

approval from my instructor
This contribution is for credit in a course as discussed when assigned the issue.

This is great 🥰.
Can they send us more help? (Please tag teachers😃; @kjonathan024)
Could prepare and adjust to different course's curriculum (many different things to do.)
Curriculum and the real work could be the same often.
(While important projects are understaffed, education must be a big part of such mental performance/effort/work humans do, while working hours per week decrease and education increases just like license-/diploma-/hiring-requirements, and while people only get older after graduation and some lazier when earning well)

[ImprovedTube]

while the reqeust is solved, i'm leaving this thread open so that i / we remember everything else mentioned
#1960 (comment)