From 4d219ea0752804cfd8c9f9394f2eb24af5d8ff67 Mon Sep 17 00:00:00 2001
From: Aran-Fey <rawing7@gmail.com>
Date: Sun, 2 Mar 2025 19:37:25 +0100
Subject: [PATCH] add pause_on_hover parameter to Slideshow

---
 frontend/code/components/slideshow.ts | 11 ++++++++---
 rio/components/slideshow.py           |  6 ++++++
 2 files changed, 14 insertions(+), 3 deletions(-)

diff --git a/frontend/code/components/slideshow.ts b/frontend/code/components/slideshow.ts
index c5a41818..9fb27e0c 100644
--- a/frontend/code/components/slideshow.ts
+++ b/frontend/code/components/slideshow.ts
@@ -9,6 +9,7 @@ export type SlideshowState = ComponentState & {
     _type_: "Slideshow-builtin";
     children?: ComponentId[];
     linger_time?: number;
+    pause_on_hover?: boolean;
     corner_radius?: [number, number, number, number];
 };
 
@@ -18,7 +19,7 @@ export class SlideshowComponent extends ComponentBase {
     private childContainer: HTMLElement;
     private progressBar: HTMLElement;
 
-    private isPaused: boolean = false;
+    private isHovered: boolean = false;
     private lastUpdateAt: number;
 
     private currentChildIndex: number = 0;
@@ -52,11 +53,11 @@ export class SlideshowComponent extends ComponentBase {
 
         // Connect to events
         element.addEventListener("pointerenter", () => {
-            this.isPaused = true;
+            this.isHovered = true;
         });
 
         element.addEventListener("pointerleave", () => {
-            this.isPaused = false;
+            this.isHovered = false;
         });
 
         // Initialize state
@@ -112,6 +113,10 @@ export class SlideshowComponent extends ComponentBase {
         }
     }
 
+    private get isPaused(): boolean {
+        return this.state.pause_on_hover && this.isHovered;
+    }
+
     async updateLoop() {
         // If the slideshow has been removed from the DOM, stop updating
         if (!this.element.isConnected) {
diff --git a/rio/components/slideshow.py b/rio/components/slideshow.py
index 1cf84be8..8eff171c 100644
--- a/rio/components/slideshow.py
+++ b/rio/components/slideshow.py
@@ -33,6 +33,9 @@ class Slideshow(FundamentalComponent):
     `linger_time`: The time in seconds to display each component before
         switching to the next one.
 
+    `pause_on_hover`: Whether to pause the slideshow while the mouse cursor
+        hovers over it.
+
     `corner_radius`: How rounded the slideshow's corners should be. If set to
         `None`, the slideshow will use a default corner radius from the current
         theme.
@@ -67,12 +70,14 @@ class Slideshow(FundamentalComponent):
     children: list[rio.Component]
     _: dataclasses.KW_ONLY
     linger_time: float
+    pause_on_hover: bool
     corner_radius: None | float | tuple[float, float, float, float]
 
     def __init__(
         self,
         *children: rio.Component,
         linger_time: float | timedelta = timedelta(seconds=10),
+        pause_on_hover: bool = True,
         corner_radius: None | float | tuple[float, float, float, float] = None,
         key: str | int | None = None,
         margin: float | None = None,
@@ -119,6 +124,7 @@ class Slideshow(FundamentalComponent):
 
         self.children = list(children)
         self.linger_time = linger_time
+        self.pause_on_hover = pause_on_hover
         self.corner_radius = corner_radius
 
     def _custom_serialize_(self) -> JsonDoc: