From 8b5ef197648764cced1eb3c4e5cacc43815c5a49 Mon Sep 17 00:00:00 2001
From: Send_Nukez <erikjulius2701@yahoo.de>
Date: Mon, 27 Sep 2021 00:39:40 +0200
Subject: [PATCH] Changed .prog-tooltip to be a child of .progress-bar__slider

---
 dribbblish.js | 44 ++++++++++++++++++++++++++-----------------
 user.css      | 52 ++++++++++++++++++++++++++-------------------------
 2 files changed, 54 insertions(+), 42 deletions(-)

diff --git a/dribbblish.js b/dribbblish.js
index 8919ca4..257d06b 100644
--- a/dribbblish.js
+++ b/dribbblish.js
@@ -147,29 +147,39 @@ waitForElement([".Root__main-view .os-resize-observer-host"], ([resizeHost]) =>
         return;
     }
 
+    const progKnob = progBar.querySelector(".progress-bar__slider");
+
     const tooltip = document.createElement("div");
     tooltip.className = "prog-tooltip";
-    progBar.append(tooltip);
+    progKnob.append(tooltip);
 
-    const progKnob = progBar.querySelector(".progress-bar__slider");
-    
-    function updateProgTime({ data: e }) {
-        const offsetX = progKnob.offsetLeft + progKnob.offsetWidth / 2;
-        const maxWidth = progBar.offsetWidth;
-        const curWidth = Spicetify.Player.getProgressPercent() * maxWidth;
-        const ttWidth = tooltip.offsetWidth / 2;
-        if (curWidth < ttWidth) {
-            tooltip.style.left = String(offsetX) + "px";
-        } else if (curWidth > maxWidth - ttWidth) {
-            tooltip.style.left = String(offsetX - ttWidth * 2) + "px";
+    function updateProgTime() {
+        const newText = Spicetify.Player.formatTime(Spicetify.Player.getProgress()) + " / " + Spicetify.Player.formatTime(Spicetify.Player.getDuration());
+        // To reduce DOM Updates when the Song is Paused
+        if (tooltip.innerText != newText) tooltip.innerText = newText;
+
+        const tooltipWidth = tooltip.clientWidth;
+        const knobOffsets = progKnob.getBoundingClientRect();
+        const barOffsets = progBar.getBoundingClientRect();
+        const distFromLeft = knobOffsets.left + progKnob.clientWidth / 2 - barOffsets.left;
+        const distFromRight = Math.abs(knobOffsets.right - progKnob.clientWidth / 2 - barOffsets.right);
+        if (distFromLeft < tooltipWidth / 2 + 10) {
+            tooltip.style.setProperty("--padding-offset", `${tooltipWidth / 2 + 10 - distFromLeft}px`);
+        } else if (distFromRight < tooltipWidth / 2 + 10) {
+            tooltip.style.setProperty("--padding-offset", `-${tooltipWidth / 2 + 10 - distFromRight}px`);
         } else {
-            tooltip.style.left = String(offsetX - ttWidth) + "px";
+            tooltip.style.setProperty("--padding-offset", "0px");
         }
-        tooltip.innerText = Spicetify.Player.formatTime(e) + " / " +
-            Spicetify.Player.formatTime(Spicetify.Player.getDuration());
     }
-    Spicetify.Player.addEventListener("onprogress", updateProgTime);
-    updateProgTime({ data: Spicetify.Player.getProgress() });
+    const knobPosObserver = new MutationObserver((muts) => {
+        updateProgTime();
+    });
+    knobPosObserver.observe(document.querySelector(".progress-bar"), {
+        attributes: true,
+        attributeFilter: ["style"]
+    });
+    Spicetify.Player.addEventListener("songchange", () => updateProgTime());
+    updateProgTime();
 
     Spicetify.CosmosAsync.sub("sp://connect/v1", (state) => {
         const isExternal = state.devices.some(a => a.is_active);
diff --git a/user.css b/user.css
index 906eb1f..3dee48d 100644
--- a/user.css
+++ b/user.css
@@ -426,12 +426,38 @@ html.sidebar-hide-text .GlueDropTarget span {
     --bg-color: rgba(var(--spice-rgb-text), .2);
 }
 
+.progress-bar__slider {
+    display: block !important;
+    opacity: 0;
+    transition: opacity 0.2s ease;
+}
+
+.progress-bar:hover .progress-bar__slider,
+.progress-bar:active .progress-bar__slider {
+    opacity: 1;
+}
+
 .progress-bar:not(:active) .x-progressBar-progressBarBg > div:first-child > div {
     transition: transform 0.2s ease;
 }
 
 .progress-bar:not(:active) .progress-bar__slider {
-    transition: left 0.2s ease;
+    transition-property: left,opacity;
+}
+
+.playback-bar .prog-tooltip {
+    --padding-offset: 0px;
+    position: absolute;
+    min-width: 100px;
+    top: -35px;
+    left: 50%;
+    transform: translateX(calc(-50% + var(--padding-offset)));
+    padding: 0 5px;
+    border-radius: 4px;
+    text-align: center;
+    color: var(--spice-text);
+    background-color: var(--spice-button);
+    transition: transform 0.2s ease;
 }
 
 .minimal-player .player-controls__buttons {
@@ -582,30 +608,6 @@ li.GlueDropTarget {
     pointer-events: none;
 }
 
-.playback-bar .prog-tooltip {
-    position: absolute;
-    min-width: 100px;
-    width: unset;
-    height: 25px;
-    top: -35px;
-    padding: 0 5px;
-    border-radius: 4px;
-    text-align: center;
-    color: var(--spice-text);
-    background-color: var(--spice-button);
-    opacity: 0;
-    transition: opacity,left 0.2s ease;
-}
-
-.playback-bar:active .prog-tooltip {
-    opacity: 1;
-    transition: none;
-}
-
-.playback-bar:hover .prog-tooltip {
-    opacity: 1;
-}
-
 /** Rearrange player bar */
 .main-nowPlayingBar-left {
     order: 1;