From ff463f2db15af52059e01bd462b418adcbbec5fe Mon Sep 17 00:00:00 2001
From: wandji20 <wbertrand10@gmail.com>
Date: Tue, 5 Sep 2023 15:40:13 +0100
Subject: [PATCH 1/2] Fix issue previewing large image after edit [SCI-8914]


From 3dd7d0fdb31e66d5265675abb595340c410bf1ff Mon Sep 17 00:00:00 2001
From: wandji20 <wbertrand10@gmail.com>
Date: Fri, 22 Sep 2023 09:36:07 +0100
Subject: [PATCH 2/2] Fix issue previweing and realoding assets on hover and
 after viewmode change [SCI-8914]

---
 .../sitewide/active_storage_previews.js       |  4 +--
 .../javascripts/sitewide/image_editor.js      |  9 +++----
 .../content/attachments/context_menu.vue      |  6 +++++
 .../vue/shared/content/attachments/inline.vue |  7 ++++--
 .../shared/content/attachments/thumbnail.vue  | 25 ++++++++++++++++---
 app/views/assets/_asset.html.erb              | 16 ++++++------
 6 files changed, 46 insertions(+), 21 deletions(-)

diff --git a/app/assets/javascripts/sitewide/active_storage_previews.js b/app/assets/javascripts/sitewide/active_storage_previews.js
index 7596bf168..fe0ab846e 100644
--- a/app/assets/javascripts/sitewide/active_storage_previews.js
+++ b/app/assets/javascripts/sitewide/active_storage_previews.js
@@ -32,8 +32,8 @@ var ActiveStoragePreviews = (function() {
     },
     reloadPreview: function(target) {
       $(target)
-        .one('error', (event) => this.reCheckPreview(event))
-        .one('load', (event) => this.showPreview(event))
+        .on('error', event => this.reCheckPreview(event))
+        .on('load', event => this.showPreview(event))
         .trigger('error');
     }
   });
diff --git a/app/assets/javascripts/sitewide/image_editor.js b/app/assets/javascripts/sitewide/image_editor.js
index 7875945f7..03d1349eb 100644
--- a/app/assets/javascripts/sitewide/image_editor.js
+++ b/app/assets/javascripts/sitewide/image_editor.js
@@ -365,13 +365,10 @@ var ImageEditorModal = (function() {
         contentType: false,
         processData: false,
         success: function(res) {
-          $(`.asset[data-asset-id=${data.id}] .image-container img`)
-            .replaceWith($(res.html).find('.image-container img'));
-          $(`.asset[data-asset-id=${data.id}] .attachment-preview img`)
-            .replaceWith($(res.html).find('.attachment-preview img'));
+          $(`.asset[data-asset-id=${data.id}] img`)
+            .replaceWith($(res.html).find(`.asset[data-asset-id=${data.id}] img`));
+          ActiveStoragePreviews.reloadPreview(`.asset[data-asset-id=${data.id}] img`);
           $(`.asset[data-asset-id=${data.id}]`).closest('.attachments').trigger('reorder');
-          ActiveStoragePreviews.reloadPreview(`.asset[data-asset-id=${data.id}] .attachment-preview img,
-          .asset[data-asset-id=${data.id}] .image-container img`);
           closeEditor();
         }
       });
diff --git a/app/javascript/vue/shared/content/attachments/context_menu.vue b/app/javascript/vue/shared/content/attachments/context_menu.vue
index 1c22cc6d0..0d8138726 100644
--- a/app/javascript/vue/shared/content/attachments/context_menu.vue
+++ b/app/javascript/vue/shared/content/attachments/context_menu.vue
@@ -138,6 +138,12 @@
           type: 'PATCH',
           dataType: 'json',
           data: { asset: { view_mode: viewMode } }
+        }).done(data => {
+          this.$nextTick(function() {
+            $(`.asset[data-asset-id=${this.attachment.id}] img`)
+              .replaceWith($(data.html).find(`.asset[data-asset-id=${this.attachment.id}] img`));
+            ActiveStoragePreviews.reloadPreview(`.asset[data-asset-id=${this.attachment.id}] img`);
+          })
         });
       },
       deleteAttachment() {
diff --git a/app/javascript/vue/shared/content/attachments/inline.vue b/app/javascript/vue/shared/content/attachments/inline.vue
index 03ac6758c..ae29e91d6 100644
--- a/app/javascript/vue/shared/content/attachments/inline.vue
+++ b/app/javascript/vue/shared/content/attachments/inline.vue
@@ -57,8 +57,6 @@
     <template v-else-if="attachment.attributes.large_preview !== null">
       <div class="image-container">
         <img :src="attachment.attributes.large_preview"
-             @error="ActiveStoragePreviews.reCheckPreview"
-             @load="ActiveStoragePreviews.showPreview"
              style='opacity: 0' />
       </div>
     </template>
@@ -98,6 +96,11 @@
     },
     mounted() {
       this.showWopi = this.attachment.attributes.file_size > 0;
+      $(this.$nextTick(function() {
+        $(`.image-container img`)
+          .on('error', (event) => ActiveStoragePreviews.reCheckPreview(event))
+          .on('load', (event) => ActiveStoragePreviews.showPreview(event))
+      }))
     },
     methods: {
       reloadAsset() {
diff --git a/app/javascript/vue/shared/content/attachments/thumbnail.vue b/app/javascript/vue/shared/content/attachments/thumbnail.vue
index 6cc3e96bf..755b6193c 100644
--- a/app/javascript/vue/shared/content/attachments/thumbnail.vue
+++ b/app/javascript/vue/shared/content/attachments/thumbnail.vue
@@ -4,7 +4,7 @@
        @mouseover="isHovered = true"
        @mouseleave="isHovered = false"
   >
-    <a v-if="!isHovered"
+    <a  :class="{ hidden: isHovered }"
         :href="attachment.attributes.urls.blob"
         class="file-preview-link file-name"
         :id="`modal_link${attachment.id}`"
@@ -17,8 +17,6 @@
         <img v-if="attachment.attributes.medium_preview !== null"
             class="rounded-sm"
             :src="attachment.attributes.medium_preview"
-            @error="ActiveStoragePreviews.reCheckPreview"
-            @load="ActiveStoragePreviews.showPreview"
             style='opacity: 0' />
         <div v-else class="w-[186px] h-[186px] bg-sn-super-light-grey rounded-sm"></div>
       </div>
@@ -32,7 +30,7 @@
         </span>
       </div>
     </a>
-    <div v-else class="hovered-thumbnail h-full">
+    <div :class="{ hidden: !isHovered }" class="hovered-thumbnail h-full">
       <a
         :href="attachment.attributes.urls.blob"
         class="file-preview-link file-name"
@@ -126,6 +124,25 @@
         isHovered: false,
         deleteModal: false
       };
+    },
+    mounted() {
+      $(this.$nextTick(function() {
+        $(`.attachment-preview img`)
+          .on('error', (event) => ActiveStoragePreviews.reCheckPreview(event))
+          .on('load', (event) => ActiveStoragePreviews.showPreview(event))
+      }))
+    },
+    watch: {
+      isHovered: function(newValue) {
+        // reload thumbnail on mouse out
+        if(newValue) return;
+
+        $(this.$nextTick(function() {
+          $(`.attachment-preview img`)
+            .on('error', (event) => ActiveStoragePreviews.reCheckPreview(event))
+            .on('load', (event) => ActiveStoragePreviews.showPreview(event))
+        }))
+      }
     }
   }
 </script>
diff --git a/app/views/assets/_asset.html.erb b/app/views/assets/_asset.html.erb
index c1d47d4b4..8819a20fb 100644
--- a/app/views/assets/_asset.html.erb
+++ b/app/views/assets/_asset.html.erb
@@ -10,10 +10,12 @@ partial_locals = {
   editable: editable
 }
 %>
-<% if asset.inline? %>
-    <%= render partial: 'assets/asset_inline', locals: partial_locals %>
-<% elsif asset.list? %>
-    <%= render partial: 'assets/asset_list', locals: partial_locals %>
-<% else %>
-    <%= render partial: 'assets/asset_thumbnail', locals: partial_locals %>
-<% end %>
+<div>
+    <% if asset.inline? %>
+        <%= render partial: 'assets/asset_inline', locals: partial_locals %>
+    <% elsif asset.list? %>
+        <%= render partial: 'assets/asset_list', locals: partial_locals %>
+    <% else %>
+        <%= render partial: 'assets/asset_thumbnail', locals: partial_locals %>
+    <% end %>
+</div>