fix: improved logo & watermark after page redesign

dist/BetterYTM.css

@@ -1878,19 +1878,29 @@ html[dark] {
   cursor: pointer;
 }
 
-/* ytmusic-logo a[bytm-animated="true"] .bytm-mod-logo-ellipse {
-  transform-origin: 12px 12px;
-  animation: rotate 1s ease-in-out infinite;
-} */
+ytmusic-logo a.bytm-logo-exchanged svg {
+  overflow: visible;
+}
+
+ytmusic-logo a.bytm-logo-exchanged svg > g[clip-path] {
+  transform-origin: 13px 13px;
+  animation: rotate 1s ease-in-out;
+  z-index: 3050;
+}
+
+ytmusic-logo a.bytm-logo-exchanged svg .bytm-mod-logo-remove {
+  animation: fade-out 1s ease-in-out;
+}
 
-ytmusic-logo a.bytm-logo-exchanged .bytm-mod-logo-path {
-  transform-origin: 12px 12px;
+ytmusic-logo a.bytm-logo-exchanged > #bytm-watermark {
+  transform-origin: -19px -14px;
   animation: rotate 1s ease-in-out;
+  z-index: 3050;
 }
 
 ytmusic-logo a.bytm-logo-exchanged .bytm-mod-logo-img {
-  width: 24px;
-  height: 24px;
+  width: 26px;
+  height: 26px;
   z-index: 1000;
   position: absolute;
   animation: rotate-fade-in 1s ease-in-out;
@@ -1912,6 +1922,18 @@ ytmusic-logo a.bytm-logo-exchanged .bytm-mod-logo-img {
   }
 }
 
+@keyframes fade-out {
+  0% {
+    opacity: 1;
+  }
+  90% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+
 .bytm-no-select {
   user-select: none;
   -ms-user-select: none;
@@ -2046,11 +2068,11 @@ yt-multi-page-menu-section-renderer.ytd-multi-page-menu-renderer {
 /* #region watermark */
 
 #bytm-watermark {
-  font-size: 10px;
+  font-size: 9px;
   display: inline-block;
   position: absolute;
-  left: 97px;
-  top: 45px;
+  left: 99px;
+  top: 46px;
   z-index: 10;
   color: #f1f1f1;
   text-decoration: none;

src/features/layout.css

@@ -148,19 +148,29 @@ html[dark] {
   cursor: pointer;
 }
 
-/* ytmusic-logo a[bytm-animated="true"] .bytm-mod-logo-ellipse {
-  transform-origin: 12px 12px;
-  animation: rotate 1s ease-in-out infinite;
-} */
+ytmusic-logo a.bytm-logo-exchanged svg {
+  overflow: visible;
+}
+
+ytmusic-logo a.bytm-logo-exchanged svg > g[clip-path] {
+  transform-origin: 13px 13px;
+  animation: rotate 1s ease-in-out;
+  z-index: 3050;
+}
+
+ytmusic-logo a.bytm-logo-exchanged svg .bytm-mod-logo-remove {
+  animation: fade-out 1s ease-in-out;
+}
 
-ytmusic-logo a.bytm-logo-exchanged .bytm-mod-logo-path {
-  transform-origin: 12px 12px;
+ytmusic-logo a.bytm-logo-exchanged > #bytm-watermark {
+  transform-origin: -19px -14px;
   animation: rotate 1s ease-in-out;
+  z-index: 3050;
 }
 
 ytmusic-logo a.bytm-logo-exchanged .bytm-mod-logo-img {
-  width: 24px;
-  height: 24px;
+  width: 26px;
+  height: 26px;
   z-index: 1000;
   position: absolute;
   animation: rotate-fade-in 1s ease-in-out;
@@ -182,6 +192,18 @@ ytmusic-logo a.bytm-logo-exchanged .bytm-mod-logo-img {
   }
 }
 
+@keyframes fade-out {
+  0% {
+    opacity: 1;
+  }
+  90% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+
 .bytm-no-select {
   user-select: none;
   -ms-user-select: none;
@@ -316,11 +338,11 @@ yt-multi-page-menu-section-renderer.ytd-multi-page-menu-renderer {
 /* #region watermark */
 
 #bytm-watermark {
-  font-size: 10px;
+  font-size: 9px;
   display: inline-block;
   position: absolute;
-  left: 97px;
-  top: 45px;
+  left: 99px;
+  top: 46px;
   z-index: 10;
   color: #f1f1f1;
   text-decoration: none;

src/features/layout.ts

@@ -17,15 +17,15 @@ let logoExchanged = false, improveLogoCalled = false;
 
 /** Adds a watermark beneath the logo */
 export async function addWatermark() {
-  const watermark = document.createElement("a");
-  watermark.role = "button";
-  watermark.id = "bytm-watermark";
-  watermark.classList.add("style-scope", "ytmusic-nav-bar", "bytm-no-select");
-  watermark.textContent = scriptInfo.name;
-  watermark.ariaLabel = watermark.title = t("open_menu_tooltip", scriptInfo.name);
-  watermark.tabIndex = 0;
+  const watermarkEl = document.createElement("a");
+  watermarkEl.role = "button";
+  watermarkEl.id = "bytm-watermark";
+  watermarkEl.classList.add("style-scope", "ytmusic-nav-bar", "bytm-no-select");
+  watermarkEl.textContent = scriptInfo.name;
+  watermarkEl.ariaLabel = watermarkEl.title = t("open_menu_tooltip", scriptInfo.name);
+  watermarkEl.tabIndex = 0;
 
-  improveLogo();
+  await improveLogo();
 
   const watermarkOpenMenu = (e: MouseEvent | KeyboardEvent) => {
     e.stopImmediatePropagation();
@@ -36,10 +36,10 @@ export async function addWatermark() {
       exchangeLogo();
   };
 
-  onInteraction(watermark, (e) => watermarkOpenMenu(e));
+  onInteraction(watermarkEl, (e) => watermarkOpenMenu(e));
 
-  addSelectorListener("navBar", "ytmusic-nav-bar #left-content", {
-    listener: (logoElem) => logoElem.insertAdjacentElement("afterend", watermark),
+  addSelectorListener("navBar", "ytmusic-logo a", {
+    listener: (logoElem) => logoElem.appendChild(watermarkEl),
   });
 
   log("Added watermark element");
@@ -55,17 +55,12 @@ export async function improveLogo() {
     const res = await fetchAdvanced("https://music.youtube.com/img/on_platform_logo_dark.svg");
     const svg = await res.text();
 
-    addSelectorListener("navBar", "ytmusic-logo a", {
+    addSelectorListener("navBar", "ytmusic-logo > a", {
       listener: (logoElem) => {
         logoElem.classList.add("bytm-mod-logo", "bytm-no-select");
         setInnerHtml(logoElem, svg);
 
-        logoElem.querySelectorAll("ellipse").forEach((e) => {
-          e.classList.add("bytm-mod-logo-ellipse");
-        });
-
-        logoElem.querySelector("path")?.classList.add("bytm-mod-logo-path");
-
+        logoElem.querySelectorAll("svg > g > path").forEach((el) => el.classList.add("bytm-mod-logo-remove"));
         log("Swapped logo to inline SVG");
       },
     });
@@ -98,7 +93,7 @@ function exchangeLogo() {
       });
 
       setTimeout(() => {
-        logoElem.querySelectorAll(".bytm-mod-logo-ellipse").forEach(e => e.remove());
+        logoElem.querySelectorAll(".bytm-mod-logo-remove").forEach(e => e.remove());
       }, 1000);
     },
   });

src/index.ts

@@ -1,4 +1,4 @@
-import { compress, decompress, fetchAdvanced, isDomLoaded, pauseFor, setInnerHtmlUnsafe, type Stringifiable } from "@sv443-network/userutils";
+import { compress, decompress, fetchAdvanced, getUnsafeWindow, isDomLoaded, pauseFor, setInnerHtmlUnsafe, type Stringifiable } from "@sv443-network/userutils";
 import { addStyle, addStyleFromResource, getResourceUrl, reloadTab, setGlobalCssVars, warn } from "./utils/index.js";
 import { clearConfig, getFeatures, initConfig } from "./config.js";
 import { buildNumber, compressionFormat, defaultLogLevel, mode, scriptInfo } from "./constants.js";
@@ -315,6 +315,9 @@ async function onDomLoad() {
       ),
     ]);
 
+    // ensure site adjusts itself to new CSS files
+    getUnsafeWindow().dispatchEvent(new Event("resize", { bubbles: true, cancelable: true }));
+
     emitInterface("bytm:ready");
     info(`Done initializing ${ftInit.length} features after ${Math.floor(Date.now() - initStartTs)}ms`);