Skip to content

Commit

Permalink
feat(fullAppDisplay): seekable progress and aligned buttons (#3168)
Browse files Browse the repository at this point in the history
  • Loading branch information
@LosTigeros
LosTigeros authored Nov 2, 2024
1 parent 8663efe commit 6e93b53
Showing 1 changed file with 122 additions and 26 deletions.
148 changes: 122 additions & 26 deletions Extensions/fullAppDisplay.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
}

const { React: react, ReactDOM: reactDOM } = Spicetify;
const { useState, useEffect } = react;
const { useState, useEffect, useRef } = react;

const CONFIG = getConfig();
let updateVisual;
Expand Down Expand Up @@ -90,27 +90,47 @@
border: 0;
color: #fff;
padding: 0 5px;
cursor: pointer;
}
#fad-progress-container {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
flex-grow: 1;
gap: 10px;
}
#fad-progress {
width: 100%;
height: 6px;
border-radius: 6px;
background-color: #ffffff50;
overflow: hidden;
flex-grow: 1;
min-width: 150px;
}
#fad-progress:hover #fad-progress-inner {
background-color: var(--spice-button);
}
#fad-progress:hover #fad-thumb {
visibility: visible;
}
#fad-progress-inner {
width: var(--progress-width);
height: 100%;
border-radius: 6px;
background-color: #ffffff;
box-shadow: 4px 0 12px rgba(0, 0, 0, 0.8);
position: relative;
}
#fad-duration {
margin-left: 10px;
#fad-thumb {
position: absolute;
top: -3px;
right: -6px;
width: 12px;
height: 12px;
border-radius: 50%;
background-color: #ffffff;
cursor: pointer;
visibility: hidden;
}
#fad-background {
position: absolute;
Expand All @@ -134,6 +154,13 @@ body.video-full-screen.video-full-screen--hide-ui {
border: 0;
color: currentColor;
padding: 0 5px;
cursor: pointer;
}
#fad-controls button svg {
vertical-align: middle;
}
#fad-elapsed, #fad-duration {
font-variant-numeric: tabular-nums;
}
#fad-artist svg, #fad-album svg, #fad-release-date svg {
display: inline-block;
Expand Down Expand Up @@ -173,19 +200,16 @@ body.video-full-screen.video-full-screen--hide-ui {
}
#fad-status {
display: flex;
min-width: 400px;
max-width: 400px;
align-items: center;
flex-wrap: wrap;
gap: 10px;
}
#fad-status.active {
margin-top: 20px;
}
#fad-controls {
display: flex;
margin-right: 10px;
}
#fad-elapsed {
min-width: 52px;
margin: 0 auto;
}`,
`
#fad-art {
Expand Down Expand Up @@ -229,10 +253,8 @@ body.video-full-screen.video-full-screen--hide-ui {
margin-top: 20px;
order: 2
}
#fad-elapsed {
min-width: 56px;
margin-right: 10px;
text-align: right;
#fad-progress-container {
width: 100%;
}`,
];

Expand All @@ -257,7 +279,6 @@ body.video-full-screen.video-full-screen--hide-ui {
}
#fad-art {
max-width: 210px;
margin-left: 50px;
}`,
"",
];
Expand Down Expand Up @@ -297,26 +318,99 @@ body.video-full-screen.video-full-screen--hide-ui {
};

const ProgressBar = () => {
const [value, setValue] = useState(Spicetify.Player.getProgress());
const [progress, setProgress] = useState(Spicetify.Player.getProgress());
const duration = Spicetify.Platform.PlayerAPI._state.duration;

const progressDivRef = useRef(null);
const [isDragging, setIsDragging] = useState(false);

useEffect(() => {
const update = ({ data }) => setValue(data);
if (isDragging) {
return;
}

const update = ({ data }) => setProgress(data);
Spicetify.Player.addEventListener("onprogress", update);
return () => Spicetify.Player.removeEventListener("onprogress", update);
});
const duration = Spicetify.Platform.PlayerAPI._state.duration;
}, [isDragging]);

// Handle click on progress bar to set progress
const handleClick = (e) => {
const container = progressDivRef.current;
if (isDragging || !container) {
return;
}

const containerRect = container.getBoundingClientRect();
const clickX = e.clientX - containerRect.left;
const newProgress = (clickX / containerRect.width) * duration;
Spicetify.Player.seek(newProgress);
setProgress(newProgress);
};

// Handle dragging functionality
const handleMouseDown = () => setIsDragging(true);
const handleMouseMove = (e) => {
const container = progressDivRef.current;
if (!isDragging || !container) {
return;
}

const containerRect = container.getBoundingClientRect();
const offsetX = e.clientX - containerRect.left;
const newProgress = (offsetX / containerRect.width) * duration;
setProgress(newProgress);
};
const handleMouseUp = () => {
if (!isDragging) {
return;
}

Spicetify.Player.seek(progress);
setIsDragging(false);
};

// Attach mousemove and mouseup listeners when dragging starts
useEffect(() => {
if (isDragging) {
window.addEventListener("mousemove", handleMouseMove);
window.addEventListener("mouseup", handleMouseUp);
} else {
window.removeEventListener("mousemove", handleMouseMove);
window.removeEventListener("mouseup", handleMouseUp);
}

return () => {
window.removeEventListener("mousemove", handleMouseMove);
window.removeEventListener("mouseup", handleMouseUp);
};
}, [isDragging]);

// Calculate the thumb position
const thumbPosition = (progress / duration) * 100;

return react.createElement(
"div",
{ id: "fad-progress-container" },
react.createElement("span", { id: "fad-elapsed" }, Spicetify.Player.formatTime(value)),
react.createElement("span", { id: "fad-elapsed" }, Spicetify.Player.formatTime(progress)),
react.createElement(
"div",
{ id: "fad-progress" },
react.createElement("div", {
id: "fad-progress-inner",
{
id: "fad-progress",
ref: progressDivRef,
onClick: handleClick,
style: {
width: `${(value / duration) * 100}%`,
"--progress-width": `${thumbPosition}%`,
},
})
},
react.createElement(
"div",
{ id: "fad-progress-inner" },
react.createElement("div", {
id: "fad-thumb",
onMouseDown: handleMouseDown,
})
)
),
react.createElement("span", { id: "fad-duration" }, Spicetify.Player.formatTime(duration))
);
Expand Down Expand Up @@ -421,6 +515,7 @@ body.video-full-screen.video-full-screen--hide-ui {
artist: artistName || "",
album: albumText || "",
releaseDate: releaseDate || "",
heart: Spicetify.Player.getHeart(),
});
return;
}
Expand All @@ -439,6 +534,7 @@ body.video-full-screen.video-full-screen--hide-ui {
album: albumText || "",
releaseDate: releaseDate || "",
cover: bgImage,
heart: Spicetify.Player.getHeart(),
});
};
this.currTrackImg.onerror = () => {
Expand Down

0 comments on commit 6e93b53

Please sign in to comment.