From a00a85a56a7ec48e406fc887f85aae8210332700 Mon Sep 17 00:00:00 2001
From: Sli <antoine@bartuccio.fr>
Date: Mon, 30 Sep 2024 14:42:29 +0200
Subject: [PATCH] Fix recursive link history updates for picture viewer

---
 core/templates/core/user_pictures.jinja | 2 +-
 sas/static/sas/js/viewer.js             | 7 ++++++-
 sas/templates/sas/album.jinja           | 2 +-
 3 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/core/templates/core/user_pictures.jinja b/core/templates/core/user_pictures.jinja
index 62acaf56..addd9d97 100644
--- a/core/templates/core/user_pictures.jinja
+++ b/core/templates/core/user_pictures.jinja
@@ -38,7 +38,7 @@
         <h4 x-text="album"></h4>
         <div class="photos">
           <template x-for="picture in pictures">
-            <a :href="`/sas/picture/${picture.id}#pict`">
+            <a :href="`/sas/picture/${picture.id}`">
               <div
                 class="photo"
                 :class="{not_moderated: !picture.is_moderated}"
diff --git a/sas/static/sas/js/viewer.js b/sas/static/sas/js/viewer.js
index 715383bc..665cf9ad 100644
--- a/sas/static/sas/js/viewer.js
+++ b/sas/static/sas/js/viewer.js
@@ -137,7 +137,12 @@ document.addEventListener("alpine:init", () => {
       this.current_picture = this.pictures.find(
         (i) => i.id === first_picture_id,
       );
-      this.$watch("current_picture", () => this.update_picture());
+      this.$watch("current_picture", (current, previous) => {
+        if (current === previous){ /* Avoid recursive updates */
+          return;
+        }
+        this.update_picture();
+      });
       window.addEventListener("popstate", async (event) => {
         if (!event.state || event.state.sas_picture_id === undefined) {
           return;
diff --git a/sas/templates/sas/album.jinja b/sas/templates/sas/album.jinja
index 1afa43b4..277a6337 100644
--- a/sas/templates/sas/album.jinja
+++ b/sas/templates/sas/album.jinja
@@ -63,7 +63,7 @@
     <h4>{% trans %}Pictures{% endtrans %}</h4>
     <div class="photos" :aria-busy="loading">
       <template x-for="picture in pictures.results">
-        <a :href="`/sas/picture/${picture.id}#pict`">
+        <a :href="`/sas/picture/${picture.id}`">
           <div
             class="photo"
             :class="{not_moderated: !picture.is_moderated}"