From 8b5ef197648764cced1eb3c4e5cacc43815c5a49 Mon Sep 17 00:00:00 2001 From: Send_Nukez Date: Mon, 27 Sep 2021 00:39:40 +0200 Subject: [PATCH 1/4] 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; From 927f25867c3fc18d03df90dc5a65cbf872ffea93 Mon Sep 17 00:00:00 2001 From: Send_Nukez Date: Mon, 27 Sep 2021 01:02:46 +0200 Subject: [PATCH 2/4] Keep tooltip text updated --- dribbblish.js | 7 ++++--- user.css | 3 +++ 2 files changed, 7 insertions(+), 3 deletions(-) diff --git a/dribbblish.js b/dribbblish.js index 257d06b..31a7ff3 100644 --- a/dribbblish.js +++ b/dribbblish.js @@ -153,8 +153,8 @@ waitForElement([".Root__main-view .os-resize-observer-host"], ([resizeHost]) => tooltip.className = "prog-tooltip"; progKnob.append(tooltip); - function updateProgTime() { - const newText = Spicetify.Player.formatTime(Spicetify.Player.getProgress()) + " / " + Spicetify.Player.formatTime(Spicetify.Player.getDuration()); + function updateProgTime(timeOverride) { + const newText = Spicetify.Player.formatTime(timeOverride || 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; @@ -172,7 +172,8 @@ waitForElement([".Root__main-view .os-resize-observer-host"], ([resizeHost]) => } } const knobPosObserver = new MutationObserver((muts) => { - updateProgTime(); + const progressPercentage = Number(getComputedStyle(document.querySelector(".progress-bar")).getPropertyValue("--progress-bar-transform").replace("%", "")) / 100; + updateProgTime(Spicetify.Player.getDuration() * progressPercentage); }); knobPosObserver.observe(document.querySelector(".progress-bar"), { attributes: true, diff --git a/user.css b/user.css index 3dee48d..6e8a9ec 100644 --- a/user.css +++ b/user.css @@ -457,6 +457,9 @@ html.sidebar-hide-text .GlueDropTarget span { text-align: center; color: var(--spice-text); background-color: var(--spice-button); +} + +.playback-bar:not(:active) .prog-tooltip { transition: transform 0.2s ease; } From 324f0417292007d6aa4e8056da68b6b775a6c309 Mon Sep 17 00:00:00 2001 From: Send_Nukez Date: Tue, 28 Sep 2021 20:24:05 +0200 Subject: [PATCH 3/4] Remove tooltip constraining and vhange transition speed to variable --- dribbblish.js | 13 ------------- user.css | 8 ++++---- 2 files changed, 4 insertions(+), 17 deletions(-) diff --git a/dribbblish.js b/dribbblish.js index 31a7ff3..057a179 100644 --- a/dribbblish.js +++ b/dribbblish.js @@ -157,19 +157,6 @@ waitForElement([".Root__main-view .os-resize-observer-host"], ([resizeHost]) => const newText = Spicetify.Player.formatTime(timeOverride || 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.setProperty("--padding-offset", "0px"); - } } const knobPosObserver = new MutationObserver((muts) => { const progressPercentage = Number(getComputedStyle(document.querySelector(".progress-bar")).getPropertyValue("--progress-bar-transform").replace("%", "")) / 100; diff --git a/user.css b/user.css index 6e8a9ec..1f0e431 100644 --- a/user.css +++ b/user.css @@ -5,6 +5,7 @@ --main-corner-radius: 10px; --scrollbar-vertical-size: 8px; --cover-border-radius: 8px; + --playbar-movement-anim-speed: 0.5s; --os-windows-icon-dodge: 0; } @@ -438,7 +439,7 @@ html.sidebar-hide-text .GlueDropTarget span { } .progress-bar:not(:active) .x-progressBar-progressBarBg > div:first-child > div { - transition: transform 0.2s ease; + transition: transform var(--playbar-movement-anim-speed) ease; } .progress-bar:not(:active) .progress-bar__slider { @@ -446,12 +447,11 @@ html.sidebar-hide-text .GlueDropTarget span { } .playback-bar .prog-tooltip { - --padding-offset: 0px; position: absolute; min-width: 100px; top: -35px; left: 50%; - transform: translateX(calc(-50% + var(--padding-offset))); + transform: translateX(calc(-50%)); padding: 0 5px; border-radius: 4px; text-align: center; @@ -460,7 +460,7 @@ html.sidebar-hide-text .GlueDropTarget span { } .playback-bar:not(:active) .prog-tooltip { - transition: transform 0.2s ease; + transition: transform var(--playbar-movement-anim-speed) ease; } .minimal-player .player-controls__buttons { From 86cabfaef8b9e0a7b7530d3c6ba3cfb7dbd09c27 Mon Sep 17 00:00:00 2001 From: Send_Nukez Date: Tue, 28 Sep 2021 20:35:21 +0200 Subject: [PATCH 4/4] Temporary fix for canvas --- user.css | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/user.css b/user.css index 1f0e431..6a2ed0f 100644 --- a/user.css +++ b/user.css @@ -1,3 +1,8 @@ +/* Temporay fix for Canvas taking up half the screen */ +body > canvas[width="250"][height="250"] { + display: none; +} + :root { --bar-height: 70px; --bar-cover-art-size: 40px;