🐛 Fix pixelated thumbnails

frontend/src/app/main/render.cljs

@@ -556,7 +556,7 @@
           viewbox        (str/ffmt "% % % %" x y width height)
 
           [fixed-width
-           fixed-height] (th/get-proportional-size width height)
+           fixed-height] (th/get-relative-size width height)
 
           data           (rds/renderToStaticMarkup
                           (mf/element frame-imposter

frontend/src/app/util/thumbnails.cljs

@@ -8,8 +8,31 @@
   (:require
    [app.common.math :as mth]))
 
-(def ^:const min-size 250)
+(def ^:const max-recommended-size (mth/pow 2 11)) ;; 2^11 = 2048
-(def ^:const max-size 2000)
+(def ^:const max-absolute-size (mth/pow 2 14)) ;; 2^14 = 16384
+
+(def ^:const min-size 1)
+(def ^:const max-size max-recommended-size)
+
+(def ^:const min-aspect-ratio 0.5)
+(def ^:const max-aspect-ratio 2.0)
+
+(defn get-aspect-ratio
+  "Returns the aspect ratio of a given width and height."
+  [width height]
+  (/ width height))
+
+(defn get-size-from
+  [ref-size opp-size clamped-size]
+  (/ (* opp-size clamped-size) ref-size))
+
+(defn get-height-from-width
+  ([width height clamped-width]
+   (get-size-from width height clamped-width)))
+
+(defn get-width-from-height
+  ([width height clamped-height]
+   (get-size-from height width clamped-height)))
 
 (defn get-proportional-size
   "Returns a proportional size given a width and height and some size constraints."
@@ -18,12 +41,16 @@
   ([width height min-size max-size]
    (get-proportional-size width height min-size max-size min-size max-size))
   ([width height min-width max-width min-height max-height]
-   (let [[fixed-width fixed-height]
+   (let [clamped-width  (mth/clamp width min-width max-width)
+         clamped-height (mth/clamp height min-height max-height)]
       (if (> width height)
-            [(mth/clamp width min-width max-width)
+        [clamped-width (get-height-from-width width height clamped-width)]
-             (/ (* height (mth/clamp width min-width max-width)) width)]
+        [(get-width-from-height width height clamped-height) clamped-height]))))
-            [(/ (* width (mth/clamp height min-height max-height)) height)
-             (mth/clamp height min-height max-height)])]
-      [fixed-width fixed-height])))
-
 
+(defn get-relative-size
+  "Returns a recommended size given a width and height."
+  [width height]
+  (let [aspect-ratio (get-aspect-ratio width height)]
+    (if (or (< aspect-ratio min-aspect-ratio) (> aspect-ratio max-aspect-ratio))
+      (get-proportional-size width height min-size max-absolute-size)
+      (get-proportional-size width height min-size max-recommended-size))))