From 4e16e2520d9b1876a0fe7336d16a6881a5a797a8 Mon Sep 17 00:00:00 2001
From: Snowknight26 <Snowknight26@users.noreply.github.com>
Date: Sat, 1 Jun 2024 17:55:59 -0500
Subject: [PATCH] fix(web): exiting a slideshow will no longer hide the cursor
 (#9931)

---
 .../asset-viewer/slideshow-bar.svelte         | 29 ++++++++++++-------
 1 file changed, 19 insertions(+), 10 deletions(-)

diff --git a/web/src/lib/components/asset-viewer/slideshow-bar.svelte b/web/src/lib/components/asset-viewer/slideshow-bar.svelte
index 03e8c9df41..887cc092c1 100644
--- a/web/src/lib/components/asset-viewer/slideshow-bar.svelte
+++ b/web/src/lib/components/asset-viewer/slideshow-bar.svelte
@@ -25,24 +25,32 @@
   let unsubscribeRestart: () => void;
   let unsubscribeStop: () => void;
 
-  const resetTimer = () => {
-    clearTimeout(timer);
-    document.body.style.cursor = '';
-    showControls = true;
-    startTimer();
+  const setCursorStyle = (style: string) => {
+    document.body.style.cursor = style;
   };
 
-  const startTimer = () => {
+  const stopControlsHideTimer = () => {
+    clearTimeout(timer);
+    setCursorStyle('');
+  };
+
+  const showControlBar = () => {
+    showControls = true;
+    stopControlsHideTimer();
+    hideControlsAfterDelay();
+  };
+
+  const hideControlsAfterDelay = () => {
     timer = setTimeout(() => {
       if (!isOverControls) {
         showControls = false;
-        document.body.style.cursor = 'none';
+        setCursorStyle('none');
       }
     }, 10_000);
   };
 
   onMount(() => {
-    startTimer();
+    hideControlsAfterDelay();
     unsubscribeRestart = restartProgress.subscribe((value) => {
       if (value) {
         progressBar.restart(value);
@@ -52,6 +60,7 @@
     unsubscribeStop = stopProgress.subscribe((value) => {
       if (value) {
         progressBar.restart(false);
+        stopControlsHideTimer();
       }
     });
   });
@@ -75,15 +84,15 @@
   };
 </script>
 
-<svelte:window on:mousemove={resetTimer} />
+<svelte:window on:mousemove={showControlBar} />
 
 {#if showControls}
-  <!-- svelte-ignore a11y-no-static-element-interactions -->
   <div
     class="m-4 flex gap-2"
     on:mouseenter={() => (isOverControls = true)}
     on:mouseleave={() => (isOverControls = false)}
     transition:fly={{ duration: 150 }}
+    role="navigation"
   >
     <CircleIconButton buttonSize="50" icon={mdiClose} on:click={onClose} title="Exit Slideshow" />