From 76083a8397f07d0a31f241538fca3ca333263a14 Mon Sep 17 00:00:00 2001
From: AnarchistHoneybun <thatonebipanda@gmail.com>
Date: Fri, 6 Mar 2026 16:58:42 +0530
Subject: [PATCH] fix: show grabbing cursor when dragging sliders

- Make isSliderThumbMovable public to allow template binding
- Bind .grabbing class to slider container when thumb is being dragged
- Add grabbing cursor CSS rules to slider component
- Bind .grabbing class to progress bar container when dragging
- Add grabbing cursor CSS rules to playback progress component
---
 .../playback-progress/playback-progress.component.html       | 1 +
 .../playback-progress/playback-progress.component.scss       | 5 +++++
 src/app/ui/components/slider/slider.component.html           | 1 +
 src/app/ui/components/slider/slider.component.scss           | 5 +++++
 src/app/ui/components/slider/slider.component.ts             | 2 +-
 5 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/src/app/ui/components/playback-progress/playback-progress.component.html b/src/app/ui/components/playback-progress/playback-progress.component.html
index a9c14828a..4ec9c1fba 100644
--- a/src/app/ui/components/playback-progress/playback-progress.component.html
+++ b/src/app/ui/components/playback-progress/playback-progress.component.html
@@ -1,5 +1,6 @@
 <div
     class="app-playback-progress-container"
+    [class.grabbing]="isProgressThumbDown || isProgressContainerDown"
     (mouseenter)="progressContainerMouseEnter()"
     (mouseleave)="progressContainerMouseLeave()"
     (mousedown)="progressContainerMouseDown($event)"
diff --git a/src/app/ui/components/playback-progress/playback-progress.component.scss b/src/app/ui/components/playback-progress/playback-progress.component.scss
index 0bf39ccae..b253e8865 100644
--- a/src/app/ui/components/playback-progress/playback-progress.component.scss
+++ b/src/app/ui/components/playback-progress/playback-progress.component.scss
@@ -3,6 +3,11 @@
     width: 100%;
     height: 12px;
     cursor: pointer;
+
+    &.grabbing,
+    &.grabbing .app-playback-progress-thumb {
+        cursor: grabbing;
+    }
 }
 
 .app-playback-progress-bar {
diff --git a/src/app/ui/components/slider/slider.component.html b/src/app/ui/components/slider/slider.component.html
index 642c1a60b..988a20add 100644
--- a/src/app/ui/components/slider/slider.component.html
+++ b/src/app/ui/components/slider/slider.component.html
@@ -1,5 +1,6 @@
 <div
     class="app-slider-container"
+    [class.grabbing]="isSliderThumbMovable"
     (mouseenter)="onSliderContainerMouseEnter()"
     (mouseleave)="onSliderContainerMouseLeave()"
     (mousedown)="onSliderContainerMouseDown($event)"
diff --git a/src/app/ui/components/slider/slider.component.scss b/src/app/ui/components/slider/slider.component.scss
index a644509fa..2c64121bf 100644
--- a/src/app/ui/components/slider/slider.component.scss
+++ b/src/app/ui/components/slider/slider.component.scss
@@ -3,6 +3,11 @@
     width: 100%;
     height: 12px;
     cursor: pointer;
+
+    &.grabbing,
+    &.grabbing .app-slider-thumb {
+        cursor: grabbing;
+    }
 }
 
 .app-slider-bar {
diff --git a/src/app/ui/components/slider/slider.component.ts b/src/app/ui/components/slider/slider.component.ts
index 67c2f8ca2..ce556dcf8 100644
--- a/src/app/ui/components/slider/slider.component.ts
+++ b/src/app/ui/components/slider/slider.component.ts
@@ -60,7 +60,7 @@ export class SliderComponent implements AfterViewInit {
     public sliderTrack!: ElementRef;
 
     public showSliderThumb: boolean = false;
-    private isSliderThumbMovable: boolean = false;
+    public isSliderThumbMovable: boolean = false;
 
     public sliderBarPosition: number = 0;
     public sliderThumbPosition: number = 0;