Fix slideshow timer burst when returning from background tab

Use Page Visibility API to cancel the timer when the tab hides and
reschedule fresh on return, so no queued ticks fire in a burst.
Also fix stale #photo= → ?photo= in stage click-through.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

1 files changed, 10 insertions, 1 deletions

diff --git a/public/js/slideshow.js b/public/js/slideshow.js
index a732962..7df0955 100644
--- a/public/js/slideshow.js
+++ b/public/js/slideshow.js
@@ -139,6 +139,15 @@ function onFsChange() {
 document.addEventListener('fullscreenchange',       onFsChange);
 document.addEventListener('webkitfullscreenchange', onFsChange);
 
+// Pause timer while tab is hidden; reschedule fresh on return so no burst catch-up.
+document.addEventListener('visibilitychange', () => {
+  if (document.hidden) {
+    clearTimeout(ssTimer);
+  } else if (ssPlaying) {
+    ssSchedule();
+  }
+});
+
 // Click/tap anywhere in the stage → open photo in its album lightbox.
 // Skip when the video element is the target so its native controls still work.
 // Read the live src attribute rather than ssIdx, which updates ahead of the
@@ -150,7 +159,7 @@ document.getElementById('ss-stage').addEventListener('click', ev => {
   if (!e) return;
   const lastSlash = e.file_rel.lastIndexOf('/');
   const albumRel  = lastSlash >= 0 ? e.file_rel.slice(0, lastSlash) : '';
-  window.location.href = '/browse/' + (albumRel ? albumRel + '/' : '') + '#photo=' + encodeURIComponent(e.name);
+  window.location.href = '/browse/' + (albumRel ? albumRel + '/' : '') + '?photo=' + encodeURIComponent(e.name);
 });
 
 // ── Keyboard & touch ───────────────────────────────────────────────────────────