Mirrors/spicetify-themes
1
0
Fork 0
mirror of https://github.com/morpheusthewhite/spicetify-themes.git synced 2024-11-22 02:42:54 +01:00
Code Issues Projects Releases Activity

cherry picked: show elapse/duration tooltip on progress bar hover

Browse Source
This commit is contained in:
Julien Maille 2021-04-22 23:27:40 +02:00
parent 9e30494666
commit e6b17ad547
2 changed files with 48 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
DribbblishDynamic/dribbblish-dynamic.js
View File

@ -2,6 +2,7 @@
document.getElementById("popover-container").style.height = 0;
document.documentElement.style.setProperty('--warning_message', ' ');
// Get stored hidden sidebar list
let appHiddenList = [];
try {
const rawList = JSON.parse(localStorage.getItem("sidebar-app-hide-list"));
@ -353,4 +354,38 @@ window.addEventListener("message", ({data: info}) => {
});
// Add "About" item in profile menu
new Spicetify.Menu.Item("About", false, () => window.open("spotify:app:about")).register();
new Spicetify.Menu.Item("About", false, () => window.open("spotify:app:about")).register();
// Track elapsed time
(function Dribbblish() {
if (!Spicetify.Player.origin) {
setTimeout(Dribbblish, 300);
return;
}
const progBar = Spicetify.Player.origin.progressbar;
// Remove default elapsed element update since we already hide it
progBar._listenerMap["progress"].pop();
const tooltip = document.createElement("div");
tooltip.className = "handle prog-tooltip";
progBar._innerElement.append(tooltip);
function updateTooltip(e) {
const curWidth = progBar._innerElement.offsetWidth;
const maxWidth = progBar._container.offsetWidth;
const ttWidth = tooltip.offsetWidth / 2;
if (curWidth < ttWidth) {
tooltip.style.right = String(-ttWidth * 2 + curWidth) + "px";
} else if (curWidth > maxWidth - ttWidth) {
tooltip.style.right = String(curWidth - maxWidth) + "px";
} else {
tooltip.style.right = String(-ttWidth) + "px";
}
tooltip.innerText = Spicetify.Player.formatTime(e) + " / " +
Spicetify.Player.formatTime(Spicetify.Player.getDuration());
}
progBar.addListener("progress", (e) => {updateTooltip(e.value)});
updateTooltip(progBar._currentValue);
})();

12
DribbblishDynamic/user.css
View File

@ -1118,6 +1118,18 @@ body.video-full-screen .view-player {
height: 6px;
}
.progress-bar .handle.prog-tooltip {
min-width: 100px;
width: unset;
height: 25px;
top: -35px;
padding: 0 5px;
border-radius: 4px;
text-align: center;
color: var(--modspotify_secondary_fg);
box-shadow: none !important;
}
.view-player .player-controls-container .progress-container {
position: fixed;
width: calc(100% - var(--sidebar-width) - var(--main-gap));