Theater Mode feature - scrolling comments/links

[cycle4passion]

⚬ PROBLEM: In Theater Mode, Comments and Sidebar are combine below video. When they are scrolled, the video moves out of view.

⚬ SOLUTION:

1. Make Video fixed and keep it on top

   #full-bleed-container {
   position: fixed;
   z-index:999;
   }

2. Pad the top of Comments/SIdebar (Making video "fixed" removes from flow, and columns moved up behind video)

   --videoHeight: 700px;
   #columns {
   padding-top: var(--videoHeight);
   }

   Above gives you and idea of what it would look like, but it need a little love.

   • The videoHeight css var is the tough part. Currently set as fixed, but it varies depending on the height of the window, and also the width of the window as the video gets taller as the page widens. The height could probably be found in one the default css vars. If not is will have to be calculated and updated with resizes.

   ⚬ RELEVANCE / SCOPE: I think it would be good for default of Theater Mode.

⚬ "SIDE EFFECTS":
None I can think of

[cpwallah]

hi i would like to work on this issue @cycle4passion

[ImprovedTube]

thanks! @cycle4passion @cpwallah great for vertical screens.

videoHeight

yes, we needed some of that before, feature could also allow to adjust the video's height to taste.

[ImprovedTube]

• Please try our custom mini player:

  • maybe drag it above youtubes's player and resize it to a similar size, or a little less.

• increasingly our challenge is structuring contents, keeping it easy, avoiding redundancy increase efficiency for users & developers

[cycle4passion]

This code does the trick. Not sure about interference with other customizations.

If you don't already have theater mode enabled in the extension, just hit 't' to enable it natively. Paste the code beiow into the console. and you can see it adjust window resizes in the x and y plane.

const resizeObserver = new ResizeObserver((entries) => {
  for (const entry of entries) {
    document.querySelector("#columns").style.paddingTop = window.getComputedStyle(entry.target).getPropertyValue("height"); 
  }
});

fbc = document.querySelector("#full-bleed-container");
fbc.style.position = 'fixed';
fbc.style.zIndex = '999';
resizeObserver.observe(fbc);
}

@cpwallah - happy to have you take it on.