From e49c4ea6158bfb6a622e00f088fa8a154e10a459 Mon Sep 17 00:00:00 2001
From: Varun Patil <varunpatil@ucla.edu>
Date: Tue, 25 Oct 2022 09:19:36 -0700
Subject: [PATCH] Fix blurry breakouts (fix #112)

---
 src/components/Timeline.vue    |  4 ++--
 src/components/frame/Photo.vue | 24 +++++++++++++++++++-----
 2 files changed, 21 insertions(+), 7 deletions(-)

diff --git a/src/components/Timeline.vue b/src/components/Timeline.vue
index 0442637b..2e8210e0 100644
--- a/src/components/Timeline.vue
+++ b/src/components/Timeline.vue
@@ -60,7 +60,7 @@
                 <template v-else>
                     <div class="photo" v-for="photo of item.photos" :key="photo.fileid"
                         :style="{
-                            height: (photo.dispH || item.size) + 'px',
+                            height: photo.dispH + 'px',
                             width: photo.dispW + 'px',
                             transform: `translate(${photo.dispX}px, ${photo.dispY}px`,
                         }">
@@ -902,7 +902,7 @@ export default class Timeline extends Mixins(GlobalMixin, UserConfig) {
             const setPos = () => {
                 photo.dispW = utils.roundHalf(jbox.width);
                 photo.dispX = utils.roundHalf(jbox.left);
-                photo.dispH = squareMode ? utils.roundHalf(jbox.height) : 0;
+                photo.dispH = utils.roundHalf(jbox.height);
                 photo.dispY = 0;
                 photo.dispRowNum = row.num;
             };
diff --git a/src/components/frame/Photo.vue b/src/components/frame/Photo.vue
index c75939f6..b01ab3f3 100644
--- a/src/components/frame/Photo.vue
+++ b/src/components/frame/Photo.vue
@@ -86,16 +86,30 @@ export default class Photo extends Mixins(GlobalMixin) {
         } else if (this.data.flag & this.c.FLAG_LOAD_FAIL) {
             return errorsvg;
         } else {
-            return this.url;
+            return this.url();
         }
     }
 
     /** Get url of the photo */
-    get url() {
-        let size = 256;
-        if (this.data.w && this.data.h) {
-            size = Math.floor(size * Math.max(this.data.w, this.data.h) / Math.min(this.data.w, this.data.h));
+    url() {
+        let base = 256;
+
+        // Check if displayed size is larger than the image
+        if (this.data.dispH > base && this.data.dispW > base) {
+            // Get a bigger image
+            // 1. No trickery here, just get one size bigger. This is to
+            //    ensure that the images can be cached even after reflow.
+            // 2. Nextcloud only allows 4**x sized images, so technically
+            //    this ends up being equivalent to 1024x1024.
+            base = 512;
         }
+
+        // Make the shorter dimension equal to base
+        let size = base;
+        if (this.data.w && this.data.h) {
+            size = Math.floor(base * Math.max(this.data.w, this.data.h) / Math.min(this.data.w, this.data.h));
+        }
+
         return getPreviewUrl(this.data.fileid, this.data.etag, false, size)
     }