SWAP and FIXED Feature - Comments as Sidebar & Sidebar as comments

[D-Rekk]

⚬ PROBLEM: Youtube UI in Desktop is pretty crap and outdated. While scrolling, your video hides on top. Wanna give a glance through the recommended videos and then read some comments? Ok so you'll have to scroll back to the top because while scrolling you also passed down the comments. In the meantime the player you can't see is still playing.
People nowadays like to multitask: watch videos and see the comments aside.

⚬ SOLUTION: Give the chance to swap Comments and Sidebar. Also, give the chance to set the Sidebar in fixed position.

⚬ ALTERNATIVES:

• Shrink the sidebar to a min of 20px and give it an :hover, just like the "Header- Position- hover" option in Appearance.
• The default behavior (so ugly).

⚬ RELEVANCE / SCOPE: We already have this layout on Youtube App(both mobile and TV), so re-creating this layout on Desktop would bring familiarity and UI consistency. IMO this should be activated by default.

⚬ "SIDE EFFECTS": This may conflict logically with the feature "Comments - Sidebar" in Aspect. This last one might be renamed to something like "Sidebar with Comments", so the new feature would be called "Swap Comments and Sidebar".
One main "side effect" of putting setting a position:fixed is that, once the width gets shrunk and media query apply, there will be visual bugs. This should be handled with an eventListener.

⚬ CONTEXT: since there's no documentation and I can't figure out where to start modifying the files, I achieved the result in the GIF with some Vanilla JS and disabled extension since it overrode my code.

Code

const body = document.querySelector("body");

// Options for the observer (which mutations to observe)
const config = {childList: true, subtree: true};

// Callback function to execute when mutations are observed
const callback = function (mutationsList, observer) {
  // Look for the primary and comments elements
  const primary = document.getElementById("primary");
  const secondary = document.getElementById("secondary");

  // If both primary and comments are present, run the script and disconnect the observer
  if (primary && secondary) {
    // Get the parent elements of videos and comments

    let videos = document.getElementById("related");
    let comments = document.getElementById("comments");
    const videosParent = videos.parentNode;
    const commentsParent = comments.parentNode;

    // Swap the position of videos and comments
    videosParent.removeChild(videos);
    commentsParent.removeChild(comments);
    const toVideo = document.querySelector("#below")
    toVideo.appendChild(videos);
    videosParent.appendChild(comments);

    primary.style.paddingRight = "0";
    comments.style.position = "fixed";
    comments.style.paddingLeft = "var(--ytd-margin-6x)";
    comments.style.paddingRight = "var(--ytd-margin-6x)";
    comments.style.height = `calc(100vh - 56px - var(--ytd-margin-6x))`;
    comments.style.overflow = "scroll";

    comments.addEventListener("mousewheel", function (event) {
      const scrollTop = this.scrollTop;
      const scrollHeight = this.scrollHeight;
      const height = this.clientHeight;
      const wheelDelta = event.wheelDelta;
      const isDeltaPositive = wheelDelta > 0;

      if (
        (isDeltaPositive && scrollTop <= wheelDelta) ||
        (!isDeltaPositive && scrollHeight - height - scrollTop <= -1 * wheelDelta)
      ) {
        // If the user is scrolling up and is already at the top
        // or if the user is scrolling down and is already at the bottom,
        // prevent the scroll from triggering body scroll
        event.preventDefault();
      }
    });

    // Disconnect the observer
    observer.disconnect();
  }
};

// Create an observer instance linked to the callback function
const observer = new MutationObserver(callback);

// Start observing the target node for configured mutations
observer.observe(body, config);

SHORT Table	(Summary)
Problem	Outdated UI
Solution	Bring Youtube App layout
Alternatives	Hover
Scope	Consistency
Side effects	Name Convention & Code collision
Context	Example Code

[ImprovedTube]

Hi @D-Rekk! Did you try our existing feature in different window sizes (width)?
( Try to zoom between 1200px to 5000px or so. It swaps on small screens, while beyond that it seemed more useful to have both on the side. You can also have the player in the middle between both.

While this is new, our code is mostly tidy & split in (too many?) files like sidebar.css and sidebar.js (So i'm hopeful for your pullrequest🥰☺)

---

We can also easily bring a feature to use m.youtube on desktops, as the page is much more lightweight then too. (Besides that our other layout features might not work there. Still a big feature. And many users might only use player features yet.)

• In this github org is another extension called useragent which will show a method. Another could maybe be a youtube cookie but could change)
• wondering to bring this feature saving settings per domain name as a single icon extension [x] mobile site. (Only supporting left click (no popup menu). Just the twin/reverse option for [x] desktop site on chrome one phones)

[ImprovedTube]

(Just sharing what's in my head already)

[ImprovedTube]

... hi @D-Rekk! sounds like you should get credit for a Pull Request. The code is split in several files & you might not need other documention to find the right 1-2 spots for your line/s quickly. Else what about pasting your JS & CSS?

[D-Rekk]

Closing this issue. Continuing in the fork above