smueller/youtube-music
1
0
Fork 0
mirror of https://github.com/th-ch/youtube-music.git synced 2026-01-11 18:41: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 { createPlugin } from '@/utils';
import { t } from '@/i18n';
import { createPlugin } from '@/utils';
export type AmbientModePluginConfig = {
enabled: boolean;
@ -135,7 +135,7 @@ export default createPlugin({
interpolationTime: defaultConfig.interpolationTime,
buffer: defaultConfig.buffer,
qualityRatio: defaultConfig.quality,
sizeRatio: defaultConfig.size / 100,
size: defaultConfig.size,
blur: defaultConfig.blur,
opacity: defaultConfig.opacity,
isFullscreen: defaultConfig.fullscreen,
@ -146,9 +146,7 @@ export default createPlugin({
start() {
const injectBlurImage = () => {
const songImage = document.querySelector<HTMLImageElement>(
'#song-image',
);
const songImage = document.querySelector<HTMLImageElement>('#song-image');
const image = document.querySelector<HTMLImageElement>(
'#song-image yt-img-shadow > img',
);
@ -171,12 +169,8 @@ export default createPlugin({
if (this.isFullscreen) blurImage.classList.add('fullscreen');
else blurImage.classList.remove('fullscreen');
const leftOffset = (newWidth * (this.sizeRatio - 1)) / 2;
const topOffset = (newHeight * (this.sizeRatio - 1)) / 2;
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('--width', `${this.size}%`);
blurImage.style.setProperty('--height', `${this.size}%`);
blurImage.style.setProperty('--blur', `${this.blur}px`);
blurImage.style.setProperty('--opacity', `${this.opacity}`);
};
@ -277,16 +271,12 @@ export default createPlugin({
blurCanvas.height = Math.floor(
(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');
else blurCanvas.classList.remove('fullscreen');
const leftOffset = (newWidth * (this.sizeRatio - 1)) / 2;
const topOffset = (newHeight * (this.sizeRatio - 1)) / 2;
blurCanvas.style.setProperty('--left', `${-1 * leftOffset}px`);
blurCanvas.style.setProperty('--top', `${-1 * topOffset}px`);
blurCanvas.style.setProperty('--width', `${this.size}%`);
blurCanvas.style.setProperty('--height', `${this.size}%`);
blurCanvas.style.setProperty('--blur', `${this.blur}px`);
blurCanvas.style.setProperty('--opacity', `${this.opacity}`);
};
@ -386,7 +376,7 @@ export default createPlugin({
this.interpolationTime = newConfig.interpolationTime;
this.buffer = newConfig.buffer;
this.qualityRatio = newConfig.quality;
this.sizeRatio = newConfig.size / 100;
this.size = newConfig.size;
this.blur = newConfig.blur;
this.opacity = newConfig.opacity;
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));
opacity: var(--opacity, 1);
width: var(--width, 100%);
height: var(--height, 100%);
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;
left: var(--left, 0px);
top: var(--top, 0px);
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
#song-video canvas.html5-blur-canvas.fullscreen {
position: fixed;
left: 0;
top: 0;
width: 100% !important;
height: 100% !important;
left: 0 !important;
top: 0 !important;
width: 100%;
height: 100%;
}
#song-video .html5-video-container > video {
top: 0 !important;
}
#song-image .html5-blur-image {
position: absolute;
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;
#player:not([video-mode]):not(.video-mode) {
margin: 0 auto !important;
overflow: visible;
}