wesselkroos / youtube-ambilight Goto Github PK
View Code? Open in Web Editor NEWThis browser extension adds ambient light to YouTube videos
License: MIT License
This browser extension adds ambient light to YouTube videos
License: MIT License
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
Currently renders 2 elements depending on the edge setting
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
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
In review
Published
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
After while the browser tab crashes and restarts without the ambilight effect
Reported by
@iGerman00
Browsers
Confirmed on
Not reproducible on
Repro steps
It seems to be caused by a combination of the following 2 settings:
Details
It might be related to this known Chromium bug: https://bugs.chromium.org/p/chromium/issues/detail?id=1015729
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
Desktop (please complete the following information):
Additional context
Possible solutions:
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)
Extension versions
>= 2.24
Browsers
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)
Goal: Reach at least 30 fps
Things to try out:
Potential workarounds for users on Chrome (Only work for some users)
Workaround 1:
Workaround 2:
Potential workarounds for some users on Edge (Only work for some users)
Workaround 1:
Workaround 2:
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:
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)
Several users request a less complicated menu.
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!
Todo:
Status:
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
This release contains the hotfix for: #49 (Text is being removed like the comments, titles, etc)
In review
Published
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.
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)
The text in comments and in video titles are not showing, please fix this bug, i will use it again if you fix it.
Tests
In review
Published
Add a reset button per setting
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
Release notes
Fixed:
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.
The maximum blur filter in Firefox is: blur(100px)
Possible workaround
Add a second element with blur(100px)
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
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:)"
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?
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
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>
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.
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)
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:
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 notes
New:
Fixed:
Detailed error message:
SecurityError: Failed to read the 'localStorage' property from 'Window': Access is denied for this document.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.