smueller/youtube-music
1
0
Fork 0
mirror of https://github.com/th-ch/youtube-music.git synced 2026-01-15 12:21:47 +00:00
Code Issues Packages Projects Releases Wiki Activity

Improve ambient mode (#1853)

Browse Source
This commit is contained in:
FrostyBiscuit
2024-03-15 06:39:31 +01:00
committed by GitHub
parent 60228a387a
commit 54c428083c
2 changed files with 24 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
src/plugins/ambient-mode/index.ts
View File

@ -1,7 +1,7 @@
import style from './style.css?inline'; import style from './style.css?inline';
import { createPlugin } from '@/utils';
import { t } from '@/i18n'; import { t } from '@/i18n';
import { createPlugin } from '@/utils';
export type AmbientModePluginConfig = { export type AmbientModePluginConfig = {
enabled: boolean; enabled: boolean;
@ -135,7 +135,7 @@ export default createPlugin({
interpolationTime: defaultConfig.interpolationTime, interpolationTime: defaultConfig.interpolationTime,
buffer: defaultConfig.buffer, buffer: defaultConfig.buffer,
qualityRatio: defaultConfig.quality, qualityRatio: defaultConfig.quality,
sizeRatio: defaultConfig.size / 100, size: defaultConfig.size,
blur: defaultConfig.blur, blur: defaultConfig.blur,
opacity: defaultConfig.opacity, opacity: defaultConfig.opacity,
isFullscreen: defaultConfig.fullscreen, isFullscreen: defaultConfig.fullscreen,
@ -146,9 +146,7 @@ export default createPlugin({
start() { start() {
const injectBlurImage = () => { const injectBlurImage = () => {
const songImage = document.querySelector<HTMLImageElement>( const songImage = document.querySelector<HTMLImageElement>('#song-image');
'#song-image',
);
const image = document.querySelector<HTMLImageElement>( const image = document.querySelector<HTMLImageElement>(
'#song-image yt-img-shadow > img', '#song-image yt-img-shadow > img',
); );
@ -171,12 +169,8 @@ export default createPlugin({
if (this.isFullscreen) blurImage.classList.add('fullscreen'); if (this.isFullscreen) blurImage.classList.add('fullscreen');
else blurImage.classList.remove('fullscreen'); else blurImage.classList.remove('fullscreen');
const leftOffset = (newWidth * (this.sizeRatio - 1)) / 2; blurImage.style.setProperty('--width', `${this.size}%`);
const topOffset = (newHeight * (this.sizeRatio - 1)) / 2; blurImage.style.setProperty('--height', `${this.size}%`);
blurImage.style.setProperty('--left', `${-1 * leftOffset}px`);
blurImage.style.setProperty('--top', `${-1 * topOffset}px`);
blurImage.style.setProperty('--width', `${newWidth * this.sizeRatio}px`);
blurImage.style.setProperty('--height', `${newHeight * this.sizeRatio}px`);
blurImage.style.setProperty('--blur', `${this.blur}px`); blurImage.style.setProperty('--blur', `${this.blur}px`);
blurImage.style.setProperty('--opacity', `${this.opacity}`); blurImage.style.setProperty('--opacity', `${this.opacity}`);
}; };
@ -277,16 +271,12 @@ export default createPlugin({
blurCanvas.height = Math.floor( blurCanvas.height = Math.floor(
(newHeight / newWidth) * this.qualityRatio, (newHeight / newWidth) * this.qualityRatio,
); );
blurCanvas.style.width = `${newWidth * this.sizeRatio}px`;
blurCanvas.style.height = `${newHeight * this.sizeRatio}px`;
if (this.isFullscreen) blurCanvas.classList.add('fullscreen'); if (this.isFullscreen) blurCanvas.classList.add('fullscreen');
else blurCanvas.classList.remove('fullscreen'); else blurCanvas.classList.remove('fullscreen');
const leftOffset = (newWidth * (this.sizeRatio - 1)) / 2; blurCanvas.style.setProperty('--width', `${this.size}%`);
const topOffset = (newHeight * (this.sizeRatio - 1)) / 2; blurCanvas.style.setProperty('--height', `${this.size}%`);
blurCanvas.style.setProperty('--left', `${-1 * leftOffset}px`);
blurCanvas.style.setProperty('--top', `${-1 * topOffset}px`);
blurCanvas.style.setProperty('--blur', `${this.blur}px`); blurCanvas.style.setProperty('--blur', `${this.blur}px`);
blurCanvas.style.setProperty('--opacity', `${this.opacity}`); blurCanvas.style.setProperty('--opacity', `${this.opacity}`);
}; };
@ -386,7 +376,7 @@ export default createPlugin({
this.interpolationTime = newConfig.interpolationTime; this.interpolationTime = newConfig.interpolationTime;
this.buffer = newConfig.buffer; this.buffer = newConfig.buffer;
this.qualityRatio = newConfig.quality; this.qualityRatio = newConfig.quality;
this.sizeRatio = newConfig.size / 100; this.size = newConfig.size;
this.blur = newConfig.blur; this.blur = newConfig.blur;
this.opacity = newConfig.opacity; this.opacity = newConfig.opacity;
this.isFullscreen = newConfig.fullscreen; this.isFullscreen = newConfig.fullscreen;

37
src/plugins/ambient-mode/style.css
View File

@ -1,40 +1,35 @@
#song-video canvas.html5-blur-canvas { #song-video canvas.html5-blur-canvas,
#song-image .html5-blur-image {
filter: blur(var(--blur, 100px)); filter: blur(var(--blur, 100px));
opacity: var(--opacity, 1); opacity: var(--opacity, 1);
width: var(--width, 100%);
height: var(--height, 100%);
pointer-events: none; pointer-events: none;
} }
#song-video canvas.html5-blur-canvas:not(.fullscreen) { #song-video canvas.html5-blur-canvas:not(.fullscreen),
#song-image .html5-blur-image {
position: absolute; position: absolute;
left: 50%;
left: var(--left, 0px); top: 50%;
top: var(--top, 0px); transform: translate(-50%, -50%);
} }
#song-video canvas.html5-blur-canvas.fullscreen { #song-video canvas.html5-blur-canvas.fullscreen {
position: fixed; position: fixed;
left: 0;
top: 0;
width: 100% !important; width: 100%;
height: 100% !important; height: 100%;
left: 0 !important;
top: 0 !important;
} }
#song-video .html5-video-container > video { #song-video .html5-video-container > video {
top: 0 !important; top: 0 !important;
} }
#song-image .html5-blur-image { #player:not([video-mode]):not(.video-mode) {
position: absolute; margin: 0 auto !important;
overflow: visible;
left: var(--left, 0px);
top: var(--top, 0px);
width: var(--width, 100%) !important;
height: var(--height, 100%) !important;
filter: blur(var(--blur, 100px));
opacity: var(--opacity, 1);
pointer-events: none;
} }