sidebar: allow seeking

4 files changed, 15 insertions, 5 deletions

diff --git a/src/modules/sidebar/dashboard.tsx b/src/modules/sidebar/dashboard.tsx
index c38d584..bad4695 100644
--- a/src/modules/sidebar/dashboard.tsx
+++ b/src/modules/sidebar/dashboard.tsx
@@ -108,7 +108,7 @@ const Media = ({ player }: { player: AstalMpris.Player | null }) => {
                         label="󰒭"
                     />
                 </box>
-                <Slider value={bind(position)} />
+                <Slider value={bind(position)} onChange={(_, v) => player?.set_position(v * player.length)} />
                 <box className="time">
                     <label label={player ? bind(player, "position").as(lengthStr) : "-1:-1"} />
                     <box hexpand />
diff --git a/src/modules/sidebar/modules/media.tsx b/src/modules/sidebar/modules/media.tsx
index 4af388b..4872f9e 100644
--- a/src/modules/sidebar/modules/media.tsx
+++ b/src/modules/sidebar/modules/media.tsx
@@ -60,7 +60,7 @@ const Player = ({ player }: { player: AstalMpris.Player }) => {
                 {bind(player, "coverArt").as(a => (a ? <box visible={false} /> : <label xalign={0.4} label="" />))}
             </box>
             <box vertical className="progress">
-                <Slider value={bind(position)} />
+                <Slider value={bind(position)} onChange={(_, v) => player.set_position(v * player.length)} />
                 <box className="time">
                     <label label={bind(player, "position").as(lengthStr)} />
                     <box hexpand />
diff --git a/src/modules/sidebar/modules/streams.tsx b/src/modules/sidebar/modules/streams.tsx
index 5eb0cf7..16812fd 100644
--- a/src/modules/sidebar/modules/streams.tsx
+++ b/src/modules/sidebar/modules/streams.tsx
@@ -27,7 +27,6 @@ const Stream = ({ stream, playing }: IStream) => (
             showFillLevel
             restrictToFillLevel={false}
             fillLevel={2 / 3}
-            cursor="pointer"
             value={bind(stream, "volume").as(v => v * (2 / 3))}
             setup={self => self.connect("value-changed", () => stream.set_volume(self.value * 1.5))}
         />
diff --git a/src/widgets/slider.tsx b/src/widgets/slider.tsx
index fb219bd..c047d5f 100644
--- a/src/widgets/slider.tsx
+++ b/src/widgets/slider.tsx
@@ -1,8 +1,14 @@
 import { bind, type Binding } from "astal";
-import { Gtk } from "astal/gtk3";
+import { Gdk, Gtk, type Widget } from "astal/gtk3";
 import type cairo from "cairo";
 
-export default ({ value }: { value: Binding<number> }) => (
+export default ({
+    value,
+    onChange,
+}: {
+    value: Binding<number>;
+    onChange?: (self: Widget.DrawingArea, value: number) => void;
+}) => (
     <drawingarea
         hexpand
         valign={Gtk.Align.CENTER}
@@ -48,6 +54,11 @@ export default ({ value }: { value: Binding<number> }) => (
                 cr.arc(radius, height - radius, radius, halfPi, Math.PI); // Bottom left
                 cr.fill();
             });
+
+            self.add_events(Gdk.EventMask.BUTTON_PRESS_MASK);
+            self.connect("button-press-event", (_, event: Gdk.Event) =>
+                onChange?.(self, event.get_coords()[1] / self.get_allocated_width())
+            );
         }}
     />
 );