Infrastructure/immich
0
Fork 0
mirror of https://github.com/immich-app/immich.git synced 2025-02-11 01:18:24 -05:00
Code Issues Activity

fix(web): exiting a slideshow will no longer hide the cursor (#9931)

Browse source
This commit is contained in:
Snowknight26 2024-06-01 17:55:59 -05:00 • committed by GitHub
parent 21718cc343
commit 4e16e2520d
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 19 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

29
web/src/lib/components/asset-viewer/slideshow-bar.svelte
View file

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