dan/dribbblish-dynamic-theme
1
0
Fork 0
mirror of https://github.com/danbulant/dribbblish-dynamic-theme synced 2026-05-27 14:02:13 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Changed .prog-tooltip to be a child of .progress-bar__slider

Browse source
This commit is contained in:
Send_Nukez 2021-09-27 00:39:40 +02:00
parent 8e095818d5
commit 8b5ef19764
2 changed files with 54 additions and 42 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

46
dribbblish.js
View file

@ -147,29 +147,39 @@ waitForElement([".Root__main-view .os-resize-observer-host"], ([resizeHost]) =>
return; return;
} }
const tooltip = document.createElement("div");
tooltip.className = "prog-tooltip";
progBar.append(tooltip);
const progKnob = progBar.querySelector(".progress-bar__slider"); const progKnob = progBar.querySelector(".progress-bar__slider");
function updateProgTime({ data: e }) { const tooltip = document.createElement("div");
const offsetX = progKnob.offsetLeft + progKnob.offsetWidth / 2; tooltip.className = "prog-tooltip";
const maxWidth = progBar.offsetWidth; progKnob.append(tooltip);
const curWidth = Spicetify.Player.getProgressPercent() * maxWidth;
const ttWidth = tooltip.offsetWidth / 2; function updateProgTime() {
if (curWidth < ttWidth) { const newText = Spicetify.Player.formatTime(Spicetify.Player.getProgress()) + " / " + Spicetify.Player.formatTime(Spicetify.Player.getDuration());
tooltip.style.left = String(offsetX) + "px"; // To reduce DOM Updates when the Song is Paused
} else if (curWidth > maxWidth - ttWidth) { if (tooltip.innerText != newText) tooltip.innerText = newText;
tooltip.style.left = String(offsetX - ttWidth * 2) + "px";
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 { } 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); const knobPosObserver = new MutationObserver((muts) => {
updateProgTime({ data: Spicetify.Player.getProgress() }); updateProgTime();
});
knobPosObserver.observe(document.querySelector(".progress-bar"), {
attributes: true,
attributeFilter: ["style"]
});
Spicetify.Player.addEventListener("songchange", () => updateProgTime());
updateProgTime();
Spicetify.CosmosAsync.sub("sp://connect/v1", (state) => { Spicetify.CosmosAsync.sub("sp://connect/v1", (state) => {
const isExternal = state.devices.some(a => a.is_active); const isExternal = state.devices.some(a => a.is_active);

52
user.css
View file

@ -426,12 +426,38 @@ html.sidebar-hide-text .GlueDropTarget span {
--bg-color: rgba(var(--spice-rgb-text), .2); --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 { .progress-bar:not(:active) .x-progressBar-progressBarBg > div:first-child > div {
transition: transform 0.2s ease; transition: transform 0.2s ease;
} }
.progress-bar:not(:active) .progress-bar__slider { .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 { .minimal-player .player-controls__buttons {
@ -582,30 +608,6 @@ li.GlueDropTarget {
pointer-events: none; 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 */ /** Rearrange player bar */
.main-nowPlayingBar-left { .main-nowPlayingBar-left {
order: 1; order: 1;