Add support for other sites

[SkipRollins]

Ambient light is a great way to watch full screen video content on oled monitors when the content dies not full the screen to prevent uneven burn in from the black bars the ambient light fills. This would be great on other sites as well. Is it possible for ambient light support to be added to more sites than just YouTube?

[WesselKroos]

Thanks for the suggestion. It's something I'm not planning to add to this extension, but I've slowly been preparing the code for sharing the core ambient light effect with a new and more general ambient light extension.

This is due to the settings menu being integrated into the YouTube player and some other functionalities being specific to the YouTube layout. Once the core functionality has been separated enough I might take a crack at a new extension that supports any webpage with a video element. I'll let you know in this issue once there is a testable version of a new extension.

[SkipRollins]

That is very exciting to hear! Thank you!

[WesselKroos]

For now I'm going to misuse this issue as a progress/todo log

I've been playing around with a generic ambient light effect on any video element on any website. It mostly works, but here are the details/limitations that require attention:

• [ ] It will not work on DRM protected video's (Like Netflix, Disney+, F1 livestreams). I've tested this with a 2D, WebGL and WebGPU canvas. https://registry.khronos.org/EGL/extensions/EXT/EGL_EXT_protected_content.txt https://chromium.googlesource.com/angle/angle/+/refs/heads/main/src/libANGLE/validationEGL.cpp#1788 https://gpuweb.github.io/gpuweb/explainer/#questionnaire-18 Example video
• [ ] It will not work on videos hosted on cross origin domains where the server is not allowing cross origin requests on a video element with the attribute crossOrigin="use-credentials or crossOrigin="anonymous" Example video (Twitch Clips)
• [ ] Some sites have complex layouts, causing weird behaviour. These sites require some kind of custom configuration. It is important to have a sensible default configuration and to host custom configurations somewhere so that they can be maintained by the community and quickly updated in case of a layout change. Example video
• [ ] Impacts scrolling performance (1ms per scroll on an AMD Ryzen 7 7800X3D) when the scroller is not the html/body element. Because then the ambient light is not located in the scrolling element. Such layouts require a resync of the video position for every scroll.
• [x] It doesn't work on local files by default due to cross origin (file:// protocol) security measures. The user needs to select (aka "upload") the local file via a file input button to allow the extension to duplicate the video pixels onto the ambient light canvas.
• [x] Videos that are embedded via an iframe only work in fullscreen. Because video data cannot be passed from an iframe to the host frame. Example video
• [x] For videos in shadom DOM a custom shadow querySelector can be used. Shadow querySelector Example video

Sites on which it worked

YouTube

Vimeo

France24

• [x] fullscreen YouTube embedded iframe

Nu.nl

Local files

• [x] Local video files do not work initially due to cross origin (file:// protocol) security measures of the browser. The user need to manually select the video file via a file input to allow the extension to duplicate the video pixels onto the ambient light canvas.

Sites with layout issues

Formula 1

• [ ] white background
• [ ] a striped white pattern

Formula 1 TV Pro

• [ ] DRM on livestreams

BBC

• [x] Scrolling down reveals that the html document is the height of the viewport (Fixed by using the scrollHeight instead)
• [x] in fullscreen the video player contains extra shadow dom elements with black backgrounds
• [ ] white background

Twitch

• [ ] Gray backgrounds on panels require custom css

  .channel-root,
  .channel-root--watch .channel-root__info,
  .channel-root__player [class^="Layout-"] > div,
  .channel-root__info .channel-info-content,
  .channel-root__right-column,
  .channel-root__right-column [class^="Layout-"],
  .channel-root__player-background {
  background: transparent !important;
  }

  

• [ ] Transparent background in fullscreen mode because the fullscreen element is the root element instead of only the video player. Requires custom css

• [ ] (Clips) Videos from another domain (origin) do not load when the crossOrigin attribute is applied on the video element.

[brutlern]

Awesome sauce.