search

WesselKroos / youtube-ambilight

This browser extension adds ambient light to YouTube videos
MIT License
87 stars 8 forks source link

Picture-in-Picture button in latest Firefox is invisible #229

Closed brutlern closed 6 months ago

brutlern commented 6 months ago

Bug description

The Picture-in-Picture button in the latest version of Firefox (v124.x) is invisible while the video is playing. The button is still there, because the mouse changes when hovering over the exact location. The button does appear when the video is paused.

Steps to reproduce the behavior

  1. Open any Youtube video on Firefox
  2. Start video
  3. Picture-in-picture button is invisible
  4. Pause video and button appears
  5. Start video and button is invisible again

Browser

Firefox

Operating system

Windows

Extension version

2.38.1

The bug still happens in these conditions

Additional context and/or screenshots

I believe the bug started to happen with Firefox update 124.

WesselKroos commented 6 months ago

I think you may have (accidentally?) enabled the advanced setting "Sync video with ambient light". This draws buffered video frames on top of the video, which causes Firefox's pip button to disappear.

image

This has always worked this way.

brutlern commented 6 months ago

Screenshot 2024-03-26 182343 Sync video with ambient light is not enabled

WesselKroos commented 6 months ago

That's strange, does it still appear/disappear after you disable the ambient light and then pause/play the video?

image

brutlern commented 6 months ago

That's strange, does it still appear/disappear after you disable the ambient light and then pause/play the video?

Disabling Ambient light does indeed fix the button, but it stops working when I re-eanble it. I made a short video clip to see it working in action, I use the hotkey "A" to disable and re-enable Ambient light to show the buttons behavior.

https://github.com/WesselKroos/youtube-ambilight/assets/39137520/3876dd6a-b809-419d-b479-3ca4e40a1a1c

WesselKroos commented 6 months ago

Maybe there is a conflict between multiple addons. What other addons are you using? And does it still happen when you disable the other addons?

And what are those Tab and Mousemove icons at the bottom of your screenrecording?

brutlern commented 6 months ago

Maybe there is a conflict between multiple addons. What other addons are you using? And does it still happen when you disable the other addons?

And what are those Tab and Mousemove icons at the bottom of your screenrecording?

Disabled ALL other extensions, still the same.

The TAB and mouse icons are in the video, ignore them (it's a video game clip, it's part of the UI of the video game).

WesselKroos commented 6 months ago

Then my addon is overlaying something on top of the playing video, but I have idea what it could be. You could check that via these steps below. Could you make a screenrecording of these steps?:

  1. Press F12 to open DevTools
  2. Open the Inspector tab
  3. Make sure that the video is playing
  4. Click on the image icon
  5. Click on the playing video
  6. Normally it would highlight the <video ... > tag, but it is probably highlighting another tag on your pc.

(You could follow these same steps with a paused video to detect any differences)

https://github.com/WesselKroos/youtube-ambilight/assets/31220528/34344696-22b1-4364-927a-024e611ab753

But, in case there was no other element there must be something different between our devices:

  1. What are your exact version numbers of Windows and Firefox?
  2. Could you upload an export of your settings? (Click on the toolbar icon, then under "Import/Export settings" on "Export to file") image
  3. What hardware (CPU/GPU) do you have?
  4. Do you have any modified Firefox config values in about:config ?
brutlern commented 6 months ago

https://github.com/WesselKroos/youtube-ambilight/assets/39137520/f5752c26-a4d6-4b3a-bbdb-054f52929681

  1. Windows 11 23H2 build 22631.3374; Firefox 124.0.1

  2. ambient-light-for-youtube-settings.json

  3. 5800X3D + 7900XT
  4. I have WAY to many values modified in about:config
  5. Tried a new clean profile with only this extension, still the same issue.
WesselKroos commented 6 months ago

I'm also on the same Windows and Firefox version, created a new profile, but still do not run into the same issue. So I think we might be dealing with a Firefox bug specific to your hardware. That seems to be the only difference left. We might need to go into Firefox debugging territorium and find out what feature of Firefox is causing this bug.

You could uncheck some of these 4 css properties in the panel in the middle (Make sure to select the <video ... > tag as in stap 5). Maybe one of them is the cause.

image

They are also applied when the video is paused, so I doubt it. But who knows at this stage 😄

Another thing you can try is deleting the <div class="ambientlight"> tag in the left panel. (Click on the tag, then press the Delete key on your keyboard.)

image

If that works revert the deletion (Ctrl + Z with keyboard focus on the left panel) and try to delete the deepest tag that fixes the issue.

brutlern commented 6 months ago

Unchecking any of those css properties does nothing. Deleting anything inside <div class="ambientlight"> fixes the button but disables ambient light.

At this point, it's a minor inconvenience, I don't think it's worth digging into further since it seems to be something on my end. The only thing I can try is maybe install Firefox 123 since the problem only started after version 124.

WesselKroos commented 6 months ago

Aha, then I'm sure it's a bug in Firefox 124. Probably some z-index fighting between the ambient light canvas and the video. You can report it to Mozilla so that they can take a look and fix it in a next version.

brutlern commented 6 months ago

Aha, then I'm sure it's a bug in Firefox 124. Probably some z-index fighting between the ambient light canvas and the video. You can report it to Mozilla so that they can take a look and fix it in a next version.

Never mind, just tried version 123 with a clean profile, and it's still the same. GPU divers maybe? Some setting in the drivers maybe? I don't know. I give up :P

WesselKroos commented 6 months ago

Could be. Maybe it's caused by the hardware overlays Firefox has recently enabled to support NVidia's video super resolution feature?

You can disable the hardware overlays in the about:config by disabling these flags:

gfx.webrender.dcomp-video-hw-overlay-win-force-enabled
gfx.webrender.dcomp-video-sw-overlay-win-force-enabled
brutlern commented 6 months ago

Those settings were already disabled, changing them to enabled did nothing. I also disabled AMD's video super resolution from the driver just in case, still nothing.

WesselKroos commented 6 months ago

Then I'm out of ideas and will also give up.

The last step you could take is to report it to the Mozilla developers.

brutlern commented 5 months ago

Just an update, the issue got magically fixed. I suspect it's Firefox 125.0.2, although there is nothing in the release notes which could be related. So.... ¯ \ (ツ) / ¯