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

⚬ 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

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!

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.

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) https://github.com/code-charity/youtube/blob/f5cdcb4572d69f06e4430e3c21bdece2f8fbc74b/js%26css/web-accessible/www.youtube.com/appearance.js#L136-L147
D-Rekk made a much more detailed implementation at https://github.com/code-charity/youtube/pull/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.) https://github.com/code-charity/youtube/blob/f5cdcb4572d69f06e4430e3c21bdece2f8fbc74b/js%26css/web-accessible/www.youtube.com/appearance.js#L150-L288
youtube changed something i think and the features might need updates.
- bug: https://github.com/code-charity/youtube/issues/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: https://github.com/code-charity/youtube/blob/f5cdcb4572d69f06e4430e3c21bdece2f8fbc74b/js%26css/extension/www.youtube.com/appearance/comments/comments.css#L80 https://github.com/code-charity/youtube/blob/f5cdcb4572d69f06e4430e3c21bdece2f8fbc74b/js%26css/extension/www.youtube.com/appearance/comments/comments.css#L67

..., through adding a toggle to our menu skeleton https://github.com/code-charity/youtube/blob/f5cdcb4572d69f06e4430e3c21bdece2f8fbc74b/menu/skeleton-parts/appearance.js#L669 (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: https://github.com/code-charity/youtube/blob/f5cdcb4572d69f06e4430e3c21bdece2f8fbc74b/menu/styles/sub-options.css#L14 - 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: #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.

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. https://github.com/code-charity/youtube/blob/f5cdcb4572d69f06e4430e3c21bdece2f8fbc74b/js%26css/web-accessible/www.youtube.com/appearance.js#L162-L174

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) https://github.com/code-charity/youtube/blob/f5cdcb4572d69f06e4430e3c21bdece2f8fbc74b/js%26css/extension/www.youtube.com/appearance/comments/comments.css#L79-L80
adjust/update the script and values so it works properly
rearrange into its own feature

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)

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! 😆

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.

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. )

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)

while the reqeust is solved, i'm leaving this thread open so that i / we remember everything else mentioned https://github.com/code-charity/youtube/issues/1960#issuecomment-1911517565

code-charity / youtube