fix(full-screen): queue and progress ba bugs

daksh2k · Sep 14, 2024 · a8a9b25 · a8a9b25
1 parent 489c361
commit a8a9b25
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 14 deletions.
diff --git a/Extensions/full-screen/dist/fullScreen.js b/Extensions/full-screen/dist/fullScreen.js
diff --git a/Extensions/full-screen/src/app.tsx b/Extensions/full-screen/src/app.tsx
@@ -331,7 +331,7 @@ async function main() {
         deactivate();
         setTimeout(() => {
             Spicetify.Platform.History.push(formattedUri);
-        }, 500);
+        }, 100);
     }
 
     async function updateInfo() {
@@ -555,7 +555,7 @@ async function main() {
             "lyrics-unavailable",
             !(evt.detail.available && (evt.detail?.synced?.length ?? 5) > 1),
         );
-        if (CFM.get("extraControls") !== "never") {
+        if (CFM.get("extraControls") !== "never" && !CFM.get("sidebarQueue")) {
             lyrics.classList.toggle("hidden", container.classList.contains("lyrics-unavailable"));
         }
     }

diff --git a/Extensions/full-screen/src/ui/components/ProgressBar/ProgressBar.tsx b/Extensions/full-screen/src/ui/components/ProgressBar/ProgressBar.tsx
@@ -117,6 +117,8 @@ const SeekableProgressBar = ({ state }: { state: string }) => {
         // console.log("Progress Effect called");
         if (state === "mousemove") {
             hideProgressBar();
+        } else {
+            setVisibility(true);
         }
         const updateInterval = setInterval(updateProgress, 500);
 

diff --git a/Extensions/full-screen/src/ui/components/VolumeBar/VolumeBar.tsx b/Extensions/full-screen/src/ui/components/VolumeBar/VolumeBar.tsx
@@ -5,10 +5,12 @@ import classNames from "classnames";
 import { SeekbarProps } from "../../../types/fullscreen";
 
 const SeekableVolumeBar = ({ state }: { state: string }) => {
+    const DEFAULT_VOLUME = -100;
+
     const [curVolume, setVolume] = React.useState<number>(
         Spicetify.Platform?.PlaybackAPI?._isAvailable
             ? Math.round(Spicetify.Player.getVolume() * 100)
-            : -100,
+            : DEFAULT_VOLUME,
     );
 
     const [changingProgress, setChangingProgress] = React.useState<SeekbarProps>({
@@ -18,12 +20,12 @@ const SeekableVolumeBar = ({ state }: { state: string }) => {
 
     const [visibility, setVisibility] = React.useState(true);
 
-    const progSlider = React.useRef(null) as React.MutableRefObject<HTMLDivElement | null>;
+    const progSlider = React.useRef<HTMLDivElement>(null);
 
-    const volumeTimer = React.useRef(null) as React.MutableRefObject<NodeJS.Timeout | null>;
+    const volumeTimer = React.useRef<NodeJS.Timeout | null>(null);
 
     const onMouseDown = (evt: MouseEvent) => {
-        if (evt.button == 0) {
+        if (evt.button === 0) {
             const sliderHeight = progSlider.current?.getBoundingClientRect().height ?? 250;
             const newData = {
                 isChanging: true,
@@ -40,6 +42,10 @@ const SeekableVolumeBar = ({ state }: { state: string }) => {
         }
     };
 
+    const debouncedVolume = debounce((newPercentage: number) => {
+        Spicetify.Player.setVolume(newPercentage / 100);
+    }, 20);
+
     const onMouseMove = (evt: MouseEvent) => {
         if (changingProgress.isChanging && changingProgress.data) {
             const moveY = changingProgress.data.beginClient - evt.clientY;
@@ -50,11 +56,7 @@ const SeekableVolumeBar = ({ state }: { state: string }) => {
             );
             const newPercentage = Math.round((newPosY / sliderHeight) * 100);
             setVolume(newPercentage);
-            const debouncedVolume = debounce(
-                () => Spicetify.Player.setVolume(newPercentage / 100),
-                20,
-            );
-            debouncedVolume();
+            debouncedVolume(newPercentage);
             setChangingProgress({
                 isChanging: true,
                 data: { ...changingProgress.data, positionCoord: newPosY },