From 54c428083ca8e0a5d26fb1fdaa5fc48c90f82485 Mon Sep 17 00:00:00 2001
From: FrostyBiscuit <128132341+frostybiscuit@users.noreply.github.com>
Date: Fri, 15 Mar 2024 06:39:31 +0100
Subject: [PATCH] Improve ambient mode (#1853)

---
 src/plugins/ambient-mode/index.ts  | 26 +++++++--------------
 src/plugins/ambient-mode/style.css | 37 +++++++++++++-----------------
 2 files changed, 24 insertions(+), 39 deletions(-)

diff --git a/src/plugins/ambient-mode/index.ts b/src/plugins/ambient-mode/index.ts
index 7d40809e..296b3f47 100644
--- a/src/plugins/ambient-mode/index.ts
+++ b/src/plugins/ambient-mode/index.ts
@@ -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;
diff --git a/src/plugins/ambient-mode/style.css b/src/plugins/ambient-mode/style.css
index e1dd9845..e0f332b1 100644
--- a/src/plugins/ambient-mode/style.css
+++ b/src/plugins/ambient-mode/style.css
@@ -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;
 }