wesselkroos/youtube-ambilight

This browser extension adds ambient light to YouTube videos

youtube-ambilight's Issues

Change the theme color based on the top edge

Firefox extension that does this already: https://addons.mozilla.org/nl/firefox/addon/vivaldifox/
Docs on how to implement it:
https://blog.mozilla.org/addons/2018/03/08/theme-api-update/
https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/theme/update

Adjust the lowest spread setting to use only one canvas element

Currently renders 2 elements depending on the edge setting

"Remove black bars" stretches the video when combined with "Sync video with ambilight"

video.requestAnimationFrame with framebuffer?

Find out if it's possible to delay video frames to make sure the video is in sync with the video. Proposed here: dalecurtis/video-animation-frame#3

Opera: Settings menu won't close

Reported by: 2 users.

From the feedback form:
I use opera 66.0.3515.44. The settings menu is always extended even though I did not click the settings icon and it doesn't collapse ever.

Browser identification:
Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/79.0.3945.130 Safari/537.36 OPR/66.0.3515.44

Version: 2.32

Release 2.32

In review

• Chrome (Awaiting review process version 2.31)
• Firefox (2019-01-14 20:22)
• Opera (2019-01-14 20:28)
• Edge Insider (Awaiting review process version 2.31)

Published

• Chrome
• Firefox (2019-01-14 20:40)
• Opera (2019-01-14 20:29)
• Edge Insider

Video sync mode: Antialiasing stutter

Happens when the ANGLE graphics backend is set to DirectX11.

Workaround
Set the Chrome flag use-angle to OpenGL: chrome://flags/#use-angle

Cause is related to: #47

Examples:
https://youtu.be/e8SkIex2zXk?t=76
https://www.youtube.com/watch?v=PaErPyEnDvk

GPU Memory leak (Opera)

After while the browser tab crashes and restarts without the ambilight effect

Reported by
@iGerman00

Browsers
Confirmed on

• Opera GX version LVL 1 (core: 64.0.3417.150)
• Opera version 65.0.3467.78

Not reproducible on

• Chrome version 79.0.3945.88 (Official Build) (64-bit)

Repro steps
It seems to be caused by a combination of the following 2 settings:

• Ambilight - Spread: >=25.7%
• Ambilight - Edge size >28.5%

Details
It might be related to this known Chromium bug: https://bugs.chromium.org/p/chromium/issues/detail?id=1015729

The blur fades out near the edges of the browser window

Describe the bug
The blur fades out near the edges of the browser window from Chrome version 85

Expected behavior
The blur effect goes past the edges without a fade-out effect

Screenshots

Desktop (please complete the following information):

• OS: Windows 10
• Browser: Chrome
• Version: 85

Additional context
Possible solutions:

1. Replace the blur effect in the css filter property with a backdrop-filter effect.
   • Pros: The blur does not fade out near the browser edge
   • Cons: The blur smears near the edge of the video and the edge of the browser. Resulting in an incorrect blur near the edges.
     

Multiple users report that the settings are visible and frozen

• Contact users that leave their contact info when providing feedback via the form. Are you a user with this issue? Then please leave your feedback here or email me at [email protected] so we can debug and fix it together!
• Find the cause
• Fix the issue
• Apply visual workaround by keeping the timeline visible

Reports:

Date	Version	Browser	Problem
2020/02/01 04:32:03	2.32	Opera 66.0.3515.44	Always open
2020/02/19 04:31:20	2.33.5	Edge	Always open
2020/03/13 01:02:42	2.33.5	Edge	Never open
2020/03/21 05:28:19	2.33.5	Opera	Always open
2020/03/21 11:41:39	2.33.5	Opera	Always open

Possible stacktrace for no settings button

TypeError: Cannot read property 'prepend' of null
  at HTMLButtonElement.HTMLElement.prependTo(chrome-extension://paponcgjfojgemddooebbgniglhkajkj/scripts/youtube-ambilight.js:30:10)
  at Ambilight.initSettingsMenu(chrome-extension://paponcgjfojgemddooebbgniglhkajkj/scripts/youtube-ambilight.js:4301:28)
  at Ambilight.initSettings(chrome-extension://paponcgjfojgemddooebbgniglhkajkj/scripts/youtube-ambilight.js:3281:12)
  at new Ambilight(chrome-extension://paponcgjfojgemddooebbgniglhkajkj/scripts/youtube-ambilight.js:2849:12)
  at tryInitAmbilight(chrome-extension://paponcgjfojgemddooebbgniglhkajkj/scripts/youtube-ambilight.js:4644:24)
  at ambilightDetectVideoPage(chrome-extension://paponcgjfojgemddooebbgniglhkajkj/scripts/youtube-ambilight.js:4670:9)
  at ? (chrome-extension://paponcgjfojgemddooebbgniglhkajkj/scripts/youtube-ambilight.js:4693:7)
  at ? (chrome-extension://paponcgjfojgemddooebbgniglhkajkj/scripts/youtube-ambilight.js:4700:2)

TypeError in drawGradient

Extension versions
>= 2.24

Browsers

• Chromium 76.0.3809 on Ubuntu
• Yandex Browser 19.7.2 on Windows 10

StackTrace

TypeError: Failed to execute 'addColorStop' on 'CanvasGradient': The provided double value is non-finite.
  at drawGradient(chrome-extension://paponcgjfojgemddooebbgniglhkajkj/scripts/youtube-ambilight.js:911:16)
  at Ambilight.resizeCanvasses(chrome-extension://paponcgjfojgemddooebbgniglhkajkj/scripts/youtube-ambilight.js:950:5)
  at Ambilight.updateSizes(chrome-extension://paponcgjfojgemddooebbgniglhkajkj/scripts/youtube-ambilight.js:808:12)
  at Ambilight.checkVideoSize(chrome-extension://paponcgjfojgemddooebbgniglhkajkj/scripts/youtube-ambilight.js:963:19)
  at nextFrame(chrome-extension://paponcgjfojgemddooebbgniglhkajkj/scripts/youtube-ambilight.js:978:16)
  at ? (/yts/jsbin/web-animations-next-lite.min-vflluX5aW/web-animations-next-lite.min.js:96:131)

Improve main thread performance by offloading horizontal bar size detection processing to a worker thread

Decrease performance penalty for 4K videos

Goal: Reach at least 30 fps

Things to try out:

• Decrease buffer resolution
• Use multiple canvas buffers for downscaling (4x + 2x)
• Use no buffers?
• Play a lower resolution video in the background and draw the ambilight canvasses from that video
• Move buffers to another webworker

Publish as Firefox Add-on

• Read framecount for a Firefox video element
• Report Firefox bug: https://bugzilla.mozilla.org/show_bug.cgi?id=1606251
• Find a workaround for the blurred part not being updated on each video frame
• Firefox slider styling
• Firefox page events ambilight repositioning
• Fix Firefox exception when settings are saved:
  YouTube Ambilight | setSetting DOMException: "The quota has been exceeded."
• Test if "Prevent frame drops", "Sync video exactly" and Smooth motion are effective on Firefox.
  If not, only display them in Chrome.
• Package as Firefox Add-on
• Create Add-on page on mozilla.org
• Publish package

Video and ambilight (canvas) antialiasing toggling on and off

Potential workarounds for users on Chrome (Only work for some users)

Workaround 1:

1. Go to the use-angle flag: chrome://flags/#use-angle
2. Set the flag to OpenGL or D3D9.

Workaround 2:

1. Go to the enable-skia-renderer flag: chrome://flags/#enable-skia-renderer
2. Set the flag to Disabled

Potential workarounds for some users on Edge (Only work for some users)

Workaround 1:

1. Go to the use-angle flag: edge://flags/#use-angle
2. Set the flag to OpenGL or D3D9.

Workaround 2:

1. Go to the enable-skia-renderer flag: chrome://flags/#enable-skia-renderer
2. Set the flag to Disabled

Cause:
Happens when a canvas is located near a video. The video frames get corrupt in the video and/or the canvas in an inconsistent manner.

Work in progress:

• Create an isolated code example: https://codepen.io/wesselkroos/pen/oNbXYXX
• Report to the Chromium bugs site: https://bugs.chromium.org/p/chromium/issues/detail?id=1092080
• Investigate for a fix or workaround (not found, only potential workarounds for some users)
• Wait for the bug to be resolved on Chrome https://bugs.chromium.org/p/chromium/issues/detail?id=1092080

Ambilight.checkVideoSize - TypeError: Cannot read property 'elem' of undefined

TypeError: Cannot read property 'elem' of undefined
  at Ambilight.checkVideoSize(chrome-extension://paponcgjfojgemddooebbgniglhkajkj/scripts/youtube-ambilight.js:3805:98)
  at Ambilight.nextFrame(chrome-extension://paponcgjfojgemddooebbgniglhkajkj/scripts/youtube-ambilight.js:2755:21)
  at Ambilight.onNextFrame(chrome-extension://paponcgjfojgemddooebbgniglhkajkj/scripts/youtube-ambilight.js:2728:18)
  at ? (/yts/jsbin/web-animations-next-lite.min-vflluX5aW/web-animations-next-lite.min.js:96:131)

Simplify settings with a toggle between simple/advanced settings

Several users request a less complicated menu.

• Add toggle
• Decide which settings are simple
• Remove "prevent frame drops" and enabled it standard. (Since enabling it lowered GPU usage significantly.)
• Keep the advanced toggle on for existing users but off by default
• Translate highQuality settings to the new frameSync setting (false --> 0, true --> 50)
• Adjust related advanced settings when changing a setting in the simple settings menu (blur -> edge)
• Lower edge size in simple mode when blur < 32%

When the blur is higher than 100% set the ambilight to 1 color

Add an option to lower the fps of ambilight?

I thought of this option for users with crappy pc (which includes me)

Generating ambilight images can drop the performance of the pc significantly, which lowers the framerate or the quality of the video.
So, wouldn't it be nice if the user can lower the fps of the ambilight itself, by generating ambilight images less often? Users will be able to regain fps of the video by sacrificing the fps of ambilight.
The fps of ambilight wouldn't have too much impact since the images are blurred anyway. For watching videos that has a static background, it will not have any effect at all. I really hope this could be actually done in future.

Anyway, thanks for this awesome plugin!

Add support for YouTube mobile layout

Todo:

• Detect ytm-app tag
• Add settings to video container
• Add missing settings styling
• Test performance on mobile devices

Publish version 2.29 to the Chrome Web Store

Status:

• Resolve issues
• Waiting for the Pending Review state in the Chrome Web Store to disappear
  It is now blocking this release because I only changed the description. More info
• Bump manifest version to 2.29
• Publish to the Chrome Web Store
• Awaiting Pending Review state

Publish as Microsoft Edge Insider extension

• Test on Microsoft Edge Insider
• Upload to the store
• Reviewed & published

Firefox: Only apply workaround for the delayed outer blur till < Firefox version 74

Original bug as reported in: #8

Apply version check when this bugreport is validated as fixed in release version 74: https://bugzilla.mozilla.org/show_bug.cgi?id=1606251

Release 2.34.1

This release contains the hotfix for: #49 (Text is being removed like the comments, titles, etc)

In review

• Firefox
  --> 2.34 (2020-03-28 22:55)
  --> 2.34.1 (2020-07-28 11:00)
• Opera
  --> 2.34 (2020-03-28 22:55)
  --> 2.34.1 (2020-07-28 11:00)
• Chrome [Delayed by ~3 days]
  --> 2.34.1 (2020-07-28 11:00)
• Edge (Chromium) [Delayed by ~3 days]
  --> 2.34.1 (2020-07-28 11:00)

Published

• Firefox
  --> 2.34 (2020-03-28 23:00)
  --> 2.34.1 (2020-07-28 11:00)
• Opera
  --> 2.34 (2020-03-28 22:55)
  --> 2.34.1 (2020-07-28 11:00)
• Chrome [Delayed by ~3 days]
  --> 2.34.1 (2020-07-28 15:00)
• Edge (Chromium) [Delayed by ~3 days]
  --> 2.34.1 (2020-07-29 04:00)

Remove tabs permission & provide more guidelines for enabling the extension after installation

Currently the tabs permission is required to
Problem: The Chrome review process is 2 days instead of a few minutes.
Solution: Guide users via a FAQ in the extension's popup.

Video is shifted in fullscreen mode

It shifts the entire video in fullscreen or in big player mode (strangely it doesn't shift it in normal mode, but ambilight itself is still shifted). That's why I still cannot use it.
Enabled
Disabled

Extension installed from the Opera webstore, Monitor is still 21:9 aspect ratio.

Originally posted by @iGerman00 in #14 (comment)

Text is being removed like the comments, titles, etc

The text in comments and in video titles are not showing, please fix this bug, i will use it again if you fix it.

Add support for the Classic (non-polymer) YouTube layout

• Detect the classic layout
• Add classic black theme
• Test for a week (Switch between classic and polymer on a day-to-day basis)

When not signed into YouTube and ambilight enabled the YouTube settings are invisible

Screenshot

Desired result

Release 2.33

Tests

• Simple/Advanced switch + migration from 2.32
• Performance: Laptop - video resizing (Also in classic layout)
• Performance: Laptop - black bars resizing and detection (Also in classic layout)
• Performance: Laptop - All 3 quality settings
• Performance: Laptop - Full spread & blur
• Performance: Laptop - Simple mode blur adjustment
• Performance: Laptop - 4x CPU speed
• Performance: Laptop - 480p30fps 1080p30fps 1080p60fps 4k30fps 4k 60fps
• Firefox
• Opera
• Chrome
• Chrome Beta
• Edge (Chromium based)
• Classic layout
• Don't crash when localStorage is disabled
• Don't crash because of a wrong initialization order

In review

• Firefox 2.33
  --> 2.33.1 (2019-02-02 15:34)
  --> 2.33.2 (2019-02-03 22:49)
  --> 2.33.3 (2019-02-09 18:25)
  --> 2.33.4 (2019-02-09 23:53)
  --> 2.33.5 (2019-02-10 23:47)
• Opera 2.33
  --> 2.33.1 (2019-02-02 15:34)
  --> 2.33.2 (2019-02-03 22:49)
  --> 2.33.3 (2019-02-09 18:25)
  --> 2.33.4 (2019-02-09 23:53)
  --> 2.33.5 (2019-02-10 23:47)
• Chrome [Delayed by ~3 days]
  --> 2.33.5 (2019-02-15 14:43)
• Edge (Chromium) [Delayed by ~3 days]
  --> 2.33.5 (2019-02-15 14:43)

Published

• Firefox 2.33
  --> 2.33.1 (2019-02-02 15:35)
  --> 2.33.2 (2019-02-03 22:50)
  --> 2.33.3 (2019-02-09 18:25)
  --> 2.33.4 (2019-02-09 23:53)
  --> 2.33.5 (2019-02-10 23:47)
• Opera 2.33
  --> 2.33.1 (2019-02-02 15:35)
  --> 2.33.2 (2019-02-03 22:50)
  --> 2.33.3 (2019-02-09 18:25)
  --> 2.33.4 (2019-02-09 23:53)
  --> 2.33.5 (2019-02-10 23:47)
• Chrome [Delayed by ~3 days]
  --> 2.33.5 (2019-02-17)
• Edge (Chromium) [Delayed by ~3 days]
  --> 2.33.5 (2019-02-18)

Add reset setting functionality to checkboxes + Reset settings button

Add a reset button per setting

TypeError in Ambilight.updateSizes: Cannot read property 'style' of null

Possible cause: An ad is playing on a non-video page?

Properties to check:
youtube.dark | False
document.fullscreen | False
page.isVideo | False
page.isYtdApp | True
player.classes | html5-video-player ytp-transparent iv-module-loaded ytp-iv-drawer-enabled ytp-hide-info-bar ad-created playing-mode buffering-mode
video.clientHeight | 0
video.clientWidth | 0
video.currentTime | 0
video.duration | [NaN]
video.ended | False
video.readyState | 0
video.videoHeight | 0
video.videoWidth | 0
video.webkitDecodedFrameCount | 0
window.devicePixelRatio | 2
youtube.dark | False

Settings spacing incorrect from 12/1/2019

Todo: Restore the padding

Create a new showcase video

Release 2.35.3

• 04-09-2020 Testing
• 05-09-2020 Releasing to Opera & Firefox
• 05-09-2020 Released to Opera & Firefox
• 07-09-2020 Releasing to Chrome & Edge
• 09-09-2020 Released to Edge
• 09-09-2020 Released to Chrome

Release notes
Fixed:

• The blur fades out near the edges of the browser window on Chromium bases browsers from Chromium version 85
• An error when closing the settings menu

Crash: Canvas has been tainted by cross-origin data when the YouTube video comes from googlevideo.com

Example video:
https://www.youtube.com/watch?v=nFR8D03obE0

Error:
YouTube Ambilight | NextFrame: DOMException: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data.

Blur setting maxes out at 50%

The maximum blur filter in Firefox is: blur(100px)

Possible workaround
Add a second element with blur(100px)

Fill video to full width when removing black bars

New setting under the black bars section: "Fill video to screen width"
Also inform the user when a setting is controlled by another setting.

WIP

• Add setting
• Calculate video zoom
• Adjust video zoom
• Add hotkey: W
• Reset zoom on start when "Reset black bars next video" is enabled
• Inform if "video zoom" setting is controlled by "Fill video to screen width"
• Inform if "Black bars size" setting is controlled by "Remove black bars"

Original feature request:
"I really like your add on! but can i zoom into 21:9 videos? on my 21:9 monitor it looks like https://imgur.com/a/sKVY6zr .
But i really like to watch 21:9 videos like https://imgur.com/a/O63NKE0 without pressing a key, if your add on tracks black bars -> zoom into 21:9.
thank you:)"

The video page stays white when the user is not signed into YouTube

Screenshot

Desired result

Fix video visible above the end screen

Settings per view mode

I have an ultrawide monitor, and watching 16:9 videos on it creates big black bars, which i do not want. I found the only working extension to be this, but it also makes the entire page glow, while i only want a fullscreen glow. Can you add an option to disable page glow and only leave fullscreen on?

this.videoOverlay is undefined after disabling the Ambilight

Stacktrace

youtube-ambilight.js:1679 Uncaught TypeError: Cannot read property 'elem' of undefined
    at Ambilight.hide (youtube-ambilight.js:1679)
    at Ambilight.updateSizes (youtube-ambilight.js:886)
    at Ambilight.checkVideoSize (youtube-ambilight.js:1183)
    at Ambilight.disable (youtube-ambilight.js:1593)
    at HTMLDivElement.<anonymous> (youtube-ambilight.js:1888)

Method & line

 hide() {
  ...
    if(this.videoOverlay.elem.parentNode) {

Desired result
No exception is thrown

TypeError Cannot read property 'style' of null

Stacktrace

TypeError
Cannot read property 'style' of null 
On event: click 
And element: <div id="setting-enabled" class="ytp-menuitem" role="menuitemcheckbox" aria-checked="false" tabindex="0"></div>

Video with wrong shadow in theater mode

Unlock the video scale setting maximum to above 100%

Setting the maximum to 200% should be enough to zoom on a 21:9 aspect ratio in full screen when a video has black bars.

TypeError: Cannot read property 'prepend' of null

Code line

this.settingsMenuBtn.prependTo($.s('.ytp-right-controls, .ytp-chrome-controls > *:last-child'));

Stacktrace

  at HTMLButtonElement.HTMLElement.prependTo(chrome-extension://fjppfdpomekmefgdolpnnenbljgglgig/scripts/youtube-ambilight.js:30:10)
  at Ambilight.initSettingsMenu(chrome-extension://fjppfdpomekmefgdolpnnenbljgglgig/scripts/youtube-ambilight.js:4301:28)
  at Ambilight.initSettings(chrome-extension://fjppfdpomekmefgdolpnnenbljgglgig/scripts/youtube-ambilight.js:3281:12)
  at new Ambilight(chrome-extension://fjppfdpomekmefgdolpnnenbljgglgig/scripts/youtube-ambilight.js:2849:12)
  at tryInitAmbilight(chrome-extension://fjppfdpomekmefgdolpnnenbljgglgig/scripts/youtube-ambilight.js:4644:24)
  at ambilightDetectVideoPage(chrome-extension://fjppfdpomekmefgdolpnnenbljgglgig/scripts/youtube-ambilight.js:4670:9)
  at ? (chrome-extension://fjppfdpomekmefgdolpnnenbljgglgig/scripts/youtube-ambilight.js:4693:7)
  at ? (chrome-extension://fjppfdpomekmefgdolpnnenbljgglgig/scripts/youtube-ambilight.js:4700:2)

Add support for video.requestAnimationFrame (Available in Chrome Beta)

Original proposal: https://discourse.wicg.io/t/proposal-video-requestanimationframe/3691

WICG spec documentation: https://github.com/WICG/video-raf

Chromium implementation (available in Chrome Beta): https://chromium-review.googlesource.com/c/chromium/src/+/1987069

Todo:

• Fix black canvas frames when detect black bars is enabled
• Fix black canvas frames when skipping through the video

Ambilight settings menu remains cannot be hidden

Support question from the webstore:
https://chrome.google.com/webstore/detail/youtube-ambilight/paponcgjfojgemddooebbgniglhkajkj

Video Options/Menu display remains on-screen [on the youtube video]...
Hi Wessel, I recently re-enabled your Ext. to check out the updates... Is the on-screen options menu meant to stay on the youtube video?? I am unable to hide it or fully collapse it. Thanks.
Posted by Tee Dub

Release 2.35.2

• 04-08-2020 Testing
• 04-08-2020 Releasing to Opera & Firefox
• 04-08-2020 Released to Opera & Firefox
• 06-08-2020 Releasing to Chrome & Edge
• 10-08-2020 Released to Edge
• 13-08-2020 Released to Chrome

Release notes
New:

• Setting: Hide scrollbar
• Improved the smoothness of the ambilight gradient shadow
• Improved the automatic "edge" setting precision
• Improved immersive mode
• Added immersive mode to the classic YouTube layout
• Options popup styling on Firefox
• Keep progress bar visible while the ambilight settings menu is open

Fixed:

• Prevent shortkeys while typing a new comment in the classic layout
• Possible fix for that prevents a frozen settings menu
• Prevent crash when the video is streamed from the googlevideo.com domain
• Prevent "Cannot read prop prepend of null" crash
• Fill the complete range slider in fullscreen mode on Firefox
• Prevent invisible ambilight when the "Fade out start" and "Fade out curve" settings are at 100%
• Limit the minimum a negative "Fade out start" value to prevent incorrect fade out rendering
• Update the settings menu item value of a setting that goes from the controlled to uncontrolled state

Save setting without localStorage

Detailed error message:
SecurityError: Failed to read the 'localStorage' property from 'Window': Access is denied for this document.

• Use extension local storage (storage.local) https://developer.chrome.com/apps/storage
• Migrate existing settings from localStorage to the storage.local