New YouTube update hides ambient light behind a black backdrop in fullscreen video's

Envious-Gaming commented 3 days ago

Bug description

Ambient light does not show while watching a video in fullscreen. Appears to be related to the new update.

Steps to reproduce the behavior

Have an account enrolled into the new youtube update (where you cannot scroll while fullscreened).
Fullscreen the video.

Browser

Chrome, Opera

Operating system

Windows

Extension version

2.38.10

The bug still happens in these conditions

[ ] The bug still persist when I disable all other extensions (ex. in incognito mode with only this extension enabled)
[ ] When I logged out of my YouTube account (ex. in incognito mode)
[ ] In incognito mode

Additional context and/or screenshots

My main account was enrolled into the new update where you can't scroll down to the comments section of a video while you're in fullscreen (why did they do this!?). The issues goes away if I sight out or use a different account.

WesselKroos commented 3 days ago

Thanks for letting me know that there is a new YouTube update with a bug.

Since I don't have the new update yet, could you:

Make a screenshot of what the fullscreen view looks like
Share the experimental flags which trigger the updated layout when you are are signed in, so that I can reproduce the updated layout

You can get the experimental flags by typing (or pasting) a javascript line in the DevTools console:

Open the Devtools panel by pressing the F12 key
In the Console tab type: ytcfg.get('EXPERIMENT_FLAGS')
Press the Enter key
Then on the ouputted text: Right click > Copy object

Envious-Gaming commented 3 days ago

Sorry for the delay, I was cooking up some dinner. Thanks for the quick response though! Lemme if I did anything wrong.

Screenshot 2024-11-15 220357

experiment-flags.json

WesselKroos commented 2 days ago

Thanks for listing the experiment flags. Sadly I'm unable to get the new layout with the experiment flags enabled.

I think an element with a black background is overlaying the ambient light. So I think I need the new html of the webpage as well to create a fix. But I don't want your userdata, so I have written a few javascript lines that only logs the html of the video, it's the elements that contain the video and the backgrounds. Could you go to fullscreen, open Devtools again and execute these javascript lines? (Via the same steps as the experiment flags).

const getTag = (element) => {
  const background = element.computedStyleMap().get('background').toString();
  const html = element.outerHTML;
  const startTag = `${html.substring(0, html.indexOf('>'))} style="background: ${background}">`;
  const endTag = `</${element.localName}>`;
  return { startTag, endTag };
};
const getHtmlParts = (element) => {
  const { startTag, endTag } = getTag(element);
  let startHtml = startTag, endHtml = endTag;
  if(element.parentElement) {
    const parentHtml = getHtmlParts(element.parentElement);
    const indent = new Array(getLevel(element)).fill(' ').join('');
    startHtml = `${parentHtml.startHtml}\n${indent}${startHtml}`;
    endHtml = `${indent}${endHtml}\n${parentHtml.endHtml}`;
  }
  return { startHtml, endHtml };
};
const getHtml = (element) => {
  const { startHtml, endHtml } = getHtmlParts(element);
  return `${startHtml}\n${endHtml}`;
};
const getLevel = (element) => {
  for(let i = 0; true; i++) {
    if(element.parentElement) { element = element.parentElement } else { return i };
  }
};
const videos = document.querySelectorAll('video');
const html = [...videos].map(video => getHtml(video)).join('\n');
console.log(html);

The output should look something like this (This is the html it outputs for my old YouTube layout):

<html style="font-size: 10px;font-family: Roboto, Arial, sans-serif;" lang="en" darker-dark-theme="" darker-dark-theme-deprecate="" dark="" system-icons="" typography="" typography-spacing="" refresh="" data-ambientlight-hide-scrollbar="true" data-ambientlight-related-scrollbar="" data-ambientlight-enabled="" data-ambientlight-layout-performance-improvements="true" data-ambientlight-immersive="" style="background: rgb(15, 15, 15) none repeat scroll 0% 0% / auto padding-box border-box">
 <body dir="ltr" rounded-container="" data-ambientlight-text-shadow="" style="--ytal-image-opacity: 0.715; --ytal-button-shadow: drop-shadow(0 0 3px rgba(0,0,0,0.6)); --ytal-button-shadow-inverted: drop-shadow(0 0 3px rgba(255,255,255,0.6)); --ytal-text-shadow: rgba(0,0,0,0.3) 0 0 6px,
        rgba(0,0,0,0.3) 0 0 6px; --ytal-text-shadow-inverted: rgba(255,255,255,0.3) 0 0 6px,
        rgba(255,255,255,0.3) 0 0 6px; --ytal-video-debanding-background: url('chrome-extension://cokcldclnicoojbmfmbeoiajibcoilgn/images/noise-1.png'); --ytal-video-debanding-opacity: 0.84; --ytal-debanding-content: ''; --ytal-debanding-background: url('chrome-extension://cokcldclnicoojbmfmbeoiajibcoilgn/images/noise-1.png'); --ytal-debanding-opacity: 0.96;" class="" style="background: rgba(0, 0, 0, 0) none repeat scroll 0% 0% / auto padding-box border-box">
  <ytd-app darker-dark-theme="" frosted-glass-mode="none" style="--ytd-app-fullerscreen-scrollbar-width: 17px; --ytd-masthead-height: 56px; --ytd-network-status-banner-display: unset;" style="background: rgb(0, 0, 0) none repeat scroll 0% 0% / auto padding-box border-box">
   <div id="content" class="style-scope ytd-app" style="background: rgba(0, 0, 0, 0) none repeat scroll 0% 0% / auto padding-box border-box">
    <ytd-page-manager id="page-manager" class="style-scope ytd-app" style="background: rgba(0, 0, 0, 0) none repeat scroll 0% 0% / auto padding-box border-box">
     <ytd-watch-flexy class="style-scope ytd-page-manager watch-root-element hide-skeleton" theater-requested_="" video-id="00000000" js-panel-height_="" flexy-enable-small-window-sizing="" flexy-enable-large-window-sizing="" cinematics-enabled="" rounded-player-large="" flexy="" rounded-info-panel="" is-dark-theme="" is-four-three-to-sixteen-nine-video_="" is-two-columns_="" theater="" full-bleed-player="" style="--ytd-watch-flexy-scrollbar-width: 17px; --ytd-watch-flexy-max-player-width-wide-screen: 1280px; --ytd-watch-flexy-space-below-player: 136px; --ytd-watch-flexy-panel-max-height: 460px; --ytd-watch-flexy-chat-max-height: 460px; --ytd-watch-flexy-structured-description-max-height: 460px; --ytd-watch-flexy-comments-panel-max-height: 460px; --ytd-comments-engagement-panel-content-height: 460px;" role="main" playlist="" cinematic-light-theme="" watch-metadata-refresh="" has-metadata="" data-ytal-elem="ytd-watch" response-has-comments="" flexy-small-window_="" style="background: rgba(0, 0, 0, 0) none repeat scroll 0% 0% / auto padding-box border-box">
      <div id="full-bleed-container" class="style-scope ytd-watch-flexy" style="background: rgba(0, 0, 0, 0) none repeat scroll 0% 0% / auto padding-box border-box">
       <div id="player-full-bleed-container" class="style-scope ytd-watch-flexy" style="background: rgba(0, 0, 0, 0) none repeat scroll 0% 0% / auto padding-box border-box">
        <div id="player-container" role="complementary" class="style-scope ytd-watch-flexy" style="touch-action: auto;" style="background: rgba(0, 0, 0, 0) none repeat scroll 0% 0% / auto padding-box border-box">
         <ytd-player id="ytd-player" context="WEB_PLAYER_CONTEXT_CONFIG_ID_KEVLAR_WATCH" class="style-scope ytd-watch-flexy" style="touch-action: pan-down;" style="background: rgba(0, 0, 0, 0) none repeat scroll 0% 0% / auto padding-box border-box">
          <div id="container" class="style-scope ytd-player" style="background: rgba(0, 0, 0, 0) none repeat scroll 0% 0% / auto padding-box border-box">
           <div class="html5-video-player ytp-transparent ytp-exp-bottom-control-flexbox ytp-modern-caption ytp-exp-ppp-update ytp-cairo-refresh ytp-cairo-refresh-signature-moments ytp-fit-cover-video ytp-bigboards ytp-fine-scrubbing-exp ytp-large-width-mode ytp-autonav-endscreen-cancelled-state paused-mode ytp-hide-info-bar" tabindex="-1" id="movie_player" data-version="/s/player/0ccfa671/player_ias.vflset/en_US/base.js" aria-label="YouTube Video Player" style="background: rgba(0, 0, 0, 0) none repeat scroll 0% 0% / auto padding-box border-box">
            <div class="html5-video-container" data-layer="0" draggable="true" style="width: 2020px;" style="background: rgba(0, 0, 0, 0) none repeat scroll 0% 0% / auto padding-box border-box">
             <video tabindex="-1" class="video-stream html5-main-video" controlslist="nodownload" style="width: 1022px; height: 575px; left: 128px; top: 0px;" src="blob:https://www.youtube.com/8d29e765-bae3-4408-ae99-7895c2b2644f" style="background: rgba(0, 0, 0, 0) none repeat scroll 0% 0% / auto padding-box border-box">
             </video>
            </div>
           </div>
          </div>
         </ytd-player>
        </div>
       </div>
      </div>
     </ytd-watch-flexy>
    </ytd-page-manager>
   </div>
  </ytd-app>
 </body>
</html>

Envious-Gaming commented 2 days ago

It wouldn't let me copy the object this time, so I copied all the text, but for some reason it missed "VM1693:30" at the end of the first line, so I screenshot it for accuracy as well. Sorry man.

Edit: It looks like the code I copied isn't showing, so I just attached a .txt file with it.

undefined base.js:8022

www.youtube.com-1731677864087.log

WesselKroos commented 2 days ago

Thanks, I do notice some differences already. Could you in the meantime check if the bug still persist when you disable all other extensions (ex. in incognito mode with only this extension enabled)?

Envious-Gaming commented 2 days ago

It does not. However, if I sign into my account in Incognito, it does.

WesselKroos commented 2 days ago

Then YouTube has only enabled the experiment on your account. And thanks for the html, but the html structure and the backgrounds seem correct.

Could you check in the Elements tab (instead of the Console tab) if the <div class="ambientlight"> element is in the right position in the html? It should be here:

And if the <div class="ambientlight__projector-list"> is in the same display position as the video element on the webpage? You can hover over this element to see a blue highlight of it's position:

Envious-Gaming commented 2 days ago

Here are replica screenshots of both of yours. For reference my monitor is 3840 x 1600.

WesselKroos commented 2 days ago

That looks also correct. It's slightly moved a bit to much upwards, but that's not the reason why the sides are black.

I don't know how much you know about DevTools. But you could try to find the black element for yourself. Look for a computed property with the background value rgb(0, 0, 0); or rgba(0, 0, 0, 1);. Here are some tips:

WesselKroos commented 2 days ago

You can also hover over the property and click on the blue arrow to go line where the property is coming from: And then you can click on the blue checkbox to remove that line: Then you will either see the ambient light, or you will need to continue to look for other elements with a black background and remove them.

Envious-Gaming commented 2 days ago

Hey mate, it's getting real late here. I haven't found anything like what you described yet (I'll give it another look tomorrow) but this is the closest I could get. If I hide the element highlighted in those images I could get ambient light to appear, but no video. In the third image there is something like what you described below that element, however I can't seem to change it or even hide it. I hope this helps, but if it doesn't I look some more tomorrow. Thanks for everything so far though.

WesselKroos commented 2 days ago

Hey, I think you found it in the last screenshot! The black element is the ::backdrop. I suspect it will disappear when you add this html to the webpage:

<style>
  ::backdrop {
    background: none !important;
  }
</style>

If not, I will need a screenshot of the Styles tab it points to when you click on the blue arrow of the background-color: property. Then I can write the correct html.

Envious-Gaming commented 2 days ago

How do I add that to the webpage?

WesselKroos commented 2 days ago

Right click on an element, then choose Edit html. And paste the html at the end of the text input. Then click out of the text input to complete the change.

Envious-Gaming commented 2 days ago

It does appear to have removed the "::backdrop" however ambient light does not show and it seems to break the player (I can't fullscreen or control the player with mouse).

Just to clarify I; right clicked an element (I chose the one that I highlighted in the previous post), clicked "Edit as HTML", scrolled all the way to the bottom of the text prompt, pasted the code you supplied and clicked out of the prompt. It then exited me from fullscreen and appears to have broken the player. I did try pasting in a new line btw. If I paste it in any other element I get "An error occurred. Please try again later. (Playback ID: xk9hCIFkExufEeCa)".

WesselKroos commented 2 days ago

Hmm, I think you might have malformed the html in some way. I've made a screenrecording, editing the html this way might be easier:

https://github.com/user-attachments/assets/8908316b-f001-4daf-89ef-df9e3bcc6e85

Envious-Gaming commented 2 days ago

My bad, pimp. If I edit the highlighted one in this screenshot, it fixes it. Seems to be working perfectly

Envious-Gaming commented 2 days ago

Hmm, I think you might have malformed the html in some way. I've made a screenrecording, editing the html this way might be easier:

Add.Style.Element.mp4

Yeah, I think that's what I was doing, my bad.

WesselKroos commented 2 days ago

No problemo. After adding the style element and clicking on the ::backdrop element, you should see a background property with the transparent color on the ::backdrop element:

If not, we can investigate it further look tomorrow. Since it's getting late over there 😄

Envious-Gaming commented 2 days ago

I do see that.

WesselKroos commented 2 days ago

But the sides are still black?

Envious-Gaming commented 2 days ago

No, they have ambient light, apologies for not being clearer, the player is working normally as well the only thing "wrong" now are the UI elements visible in the player now. However, that's not a big deal.

Envious-Gaming commented 2 days ago

No problemo. After adding the style element and clicking on the ::backdrop element, you should see a background property with the transparent color on the ::backdrop element:

If not, we can investigate it further look tomorrow. Since it's getting late over there 😄

To clarify, I didn't even need to touch the background-color, it was transparent by default after entering your code.

Envious-Gaming commented 2 days ago

To add to the "issues" this is what the background looks like when ambient light is disabled (in the menu or with the G shortcut).

Just pointing this out for the sake of a future fix. No pressure though, just having the ability to make ambient light work again is fucking awesome!

EDIT: uploaded a second, brighter and clearer image.

WesselKroos commented 2 days ago

Nice, then I can now reproduce YouTube's new update with the UI elements in the back:

So, with this update they now make the <div class="html5-video-player element fullscreen instead of the <div id="content" element.

So I guess I'll have to move my ambient light elements at the top of the <div id="content" into the <div class="html5-video-player element when this element is fullscreen.

Thanks for taking all this time to investigate!

Envious-Gaming commented 2 days ago

Hey, no worries man! This is probably the best extension for ultrawide users on Youtube. It's just fucking excellent. So, I'm happy to have helped. Thank you for giving me a fix. Goodnight, my guy.

Let me know if you need any more help from me.

WesselKroos / youtube-ambilight