From 4539acd239fa0d442a4245fb283e97601e1f8a91 Mon Sep 17 00:00:00 2001
From: Manav Rathi <manav@mnvr.in>
Date: Tue, 22 Apr 2025 10:06:01 +0530
Subject: [PATCH] Tweak nav behaviour

---
 .../gallery/components/viewer/photoswipe.ts   | 27 +++++++++++++++++--
 1 file changed, 25 insertions(+), 2 deletions(-)

diff --git a/web/packages/gallery/components/viewer/photoswipe.ts b/web/packages/gallery/components/viewer/photoswipe.ts
index 736b0b20c2..5c9cd4bd35 100644
--- a/web/packages/gallery/components/viewer/photoswipe.ts
+++ b/web/packages/gallery/components/viewer/photoswipe.ts
@@ -713,6 +713,11 @@ export class FileViewerPhotoSwipe {
          */
         let videoVideoEl: HTMLVideoElement | undefined;
 
+        /**
+         * The epoch time (milliseconds) when the latest slide change happened.
+         */
+        let lastSlideChangeEpochMilli = Date.now();
+
         pswp.on("change", () => {
             const itemData = currSlideData();
 
@@ -742,6 +747,8 @@ export class FileViewerPhotoSwipe {
             } else {
                 videoVideoEl = undefined;
             }
+
+            lastSlideChangeEpochMilli = Date.now();
         });
 
         /**
@@ -1085,9 +1092,25 @@ export class FileViewerPhotoSwipe {
 
         const handleNextSlide = () => pswp.next();
 
+        /**
+         * The arrow keys are used both for navigating through slides, and for
+         * scrubbing through the video.
+         *
+         * When on a video, the navigation requires the option prefix (since
+         * scrubbing through the video is a more common requirement). However
+         * this breaks the user's flow when they are navigating between slides
+         * fast by using the arrow keys - they land on a video and the
+         * navigation stops.
+         *
+         * So as a special case, we keep using arrow keys for navigation for the
+         * first 1s when the user lands on a slide.
+         */
+        const isUserLikelyNavigatingBetweenSlides = () =>
+            Date.now() - lastSlideChangeEpochMilli < 1000; /* ms */
+
         const handleSeekBackOrPreviousSlide = () => {
             const video = videoVideoEl;
-            if (video) {
+            if (video && !isUserLikelyNavigatingBetweenSlides()) {
                 video.currentTime = Math.max(video.currentTime - 5, 0);
             } else {
                 handlePreviousSlide();
@@ -1096,7 +1119,7 @@ export class FileViewerPhotoSwipe {
 
         const handleSeekForwardOrNextSlide = () => {
             const video = videoVideoEl;
-            if (video) {
+            if (video && !isUserLikelyNavigatingBetweenSlides()) {
                 video.currentTime = video.currentTime + 5;
             } else {
                 handleNextSlide();