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

Merge pull request #40 from SendNukez/main

Browse source 
Change the way the Progress Tooltip is shown
This commit is contained in:
Julien 2021-09-29 13:30:22 +02:00 committed by GitHub
commit 97f4cf1562
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 53 additions and 45 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

36
dribbblish.js
View file

@ -147,29 +147,27 @@ 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";
} else {
tooltip.style.left = String(offsetX - ttWidth) + "px";
}
tooltip.innerText = Spicetify.Player.formatTime(e) + " / " +
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;
}
Spicetify.Player.addEventListener("onprogress", updateProgTime);
updateProgTime({ data: Spicetify.Player.getProgress() });
const knobPosObserver = new MutationObserver((muts) => {
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,
attributeFilter: ["style"]
});
Spicetify.Player.addEventListener("songchange", () => updateProgTime());
updateProgTime();
Spicetify.CosmosAsync.sub("sp://connect/v1", (state) => {
const isExternal = state.devices.some(a => a.is_active);

62
user.css
View file

@ -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;
@ -5,6 +10,7 @@
--main-corner-radius: 10px;
--scrollbar-vertical-size: 8px;
--cover-border-radius: 8px;
--playbar-movement-anim-speed: 0.5s;
--os-windows-icon-dodge: 0;
}
@ -426,12 +432,40 @@ 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;
transition: transform var(--playbar-movement-anim-speed) ease;
}
.progress-bar:not(:active) .progress-bar__slider {
transition: left 0.2s ease;
transition-property: left,opacity;
}
.playback-bar .prog-tooltip {
position: absolute;
min-width: 100px;
top: -35px;
left: 50%;
transform: translateX(calc(-50%));
padding: 0 5px;
border-radius: 4px;
text-align: center;
color: var(--spice-text);
background-color: var(--spice-button);
}
.playback-bar:not(:active) .prog-tooltip {
transition: transform var(--playbar-movement-anim-speed) ease;
}
.minimal-player .player-controls__buttons {
@ -582,30 +616,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;