From 7977d75e3d3f066c3d1d48c081d506e69df321bb Mon Sep 17 00:00:00 2001
From: Andrey Antukh <niwi@niwi.nz>
Date: Fri, 23 Jun 2023 16:28:11 +0200
Subject: [PATCH] :sparkles: Reduce the dashboard thumbnail size

---
 frontend/src/app/main/thumbnail_renderer.cljs |  4 ++--
 frontend/src/app/main/ui/dashboard/grid.cljs  |  4 +++-
 frontend/src/app/thumbnail_renderer.cljs      | 13 +++++++------
 frontend/src/app/util/webapi.cljs             | 10 ++++++----
 4 files changed, 18 insertions(+), 13 deletions(-)

diff --git a/frontend/src/app/main/thumbnail_renderer.cljs b/frontend/src/app/main/thumbnail_renderer.cljs
index 54c668af7..7680d4f53 100644
--- a/frontend/src/app/main/thumbnail_renderer.cljs
+++ b/frontend/src/app/main/thumbnail_renderer.cljs
@@ -62,9 +62,9 @@
 
 (defn render
   "Renders a thumbnail."
-  [{:keys [data styles] :as params}]
+  [{:keys [data styles width] :as params}]
   (let [id      (dm/str (uuid/next))
-        payload #js {:data data :styles styles}
+        payload #js {:data data :styles styles :width width}
         message #js {:id id
                      :scope "penpot/thumbnail-renderer"
                      :payload payload}]
diff --git a/frontend/src/app/main/ui/dashboard/grid.cljs b/frontend/src/app/main/ui/dashboard/grid.cljs
index 27fc812ad..4da4f7255 100644
--- a/frontend/src/app/main/ui/dashboard/grid.cljs
+++ b/frontend/src/app/main/ui/dashboard/grid.cljs
@@ -62,7 +62,9 @@
          (rx/mapcat (fn [{:keys [fonts] :as result}]
                       (->> (fonts/render-font-styles fonts)
                            (rx/map (fn [styles]
-                                     (assoc result :styles styles))))))
+                                     (assoc result
+                                            :styles styles
+                                            :width 250))))))
          (rx/mapcat thr/render)
          (rx/mapcat (partial persist-thumbnail file-id revn)))))
 
diff --git a/frontend/src/app/thumbnail_renderer.cljs b/frontend/src/app/thumbnail_renderer.cljs
index aa6dab25a..3b09fcca3 100644
--- a/frontend/src/app/thumbnail_renderer.cljs
+++ b/frontend/src/app/thumbnail_renderer.cljs
@@ -40,7 +40,6 @@
        (obj/set! image "onload" #(do
                                    (rx/push! subs image)
                                    (rx/end! subs)))
-
        (obj/set! image "crossOrigin" "anonymous")
        (obj/set! image "onerror" #(rx/error! subs %))
        (obj/set! image "onabort" #(rx/error! subs (ex/error :type :internal
@@ -157,10 +156,10 @@
 
 (defn- svg-prepare
   "Prepares an SVG for rendering (resolves images to Data URIs and adds intrinsic size)."
-  [data styles]
+  [data styles width]
   (let [svg (svg-parse data)]
     (->> (svg-resolve-all! svg styles)
-         (rx/map #(svg-set-intrinsic-size! % 300))
+         (rx/map #(svg-set-intrinsic-size! % width))
          (rx/map svg-stringify))))
 
 (defn- bitmap->blob
@@ -182,13 +181,15 @@
   "Renders a thumbnail using it's SVG and returns an ArrayBuffer of the image."
   [payload]
   (let [data   (unchecked-get payload "data")
-        styles (unchecked-get payload "styles")]
-    (->> (svg-prepare data styles)
+        styles (unchecked-get payload "styles")
+        width  (d/nilv (unchecked-get payload "width") 300)]
+    (->> (svg-prepare data styles width)
          (rx/map #(wapi/create-blob % "image/svg+xml"))
          (rx/map wapi/create-uri)
          (rx/mapcat (fn [uri]
                       (->> (create-image uri)
-                           (rx/mapcat wapi/create-image-bitmap)
+                           (rx/mapcat #(wapi/create-image-bitmap % #js {:resizeWidth width
+                                                                        :resizeQuality "medium"}))
                            (rx/tap #(wapi/revoke-uri uri)))))
          (rx/mapcat bitmap->blob))))
 
diff --git a/frontend/src/app/util/webapi.cljs b/frontend/src/app/util/webapi.cljs
index 96ca465bc..183573c13 100644
--- a/frontend/src/app/util/webapi.cljs
+++ b/frontend/src/app/util/webapi.cljs
@@ -126,13 +126,15 @@
   [clipboard-data]
   (when clipboard-data
     (let [file-list (-> (.-files ^js clipboard-data))]
-      (->> (range (.-length file-list))
-           (map #(.item file-list %))
+      (->> (range (.-length ^js file-list))
+           (map #(.item ^js file-list %))
            (filter #(str/starts-with? (.-type %) "image/"))))))
 
 (defn create-image-bitmap
-  [image]
-  (js/createImageBitmap image))
+  ([image]
+   (js/createImageBitmap image))
+  ([image options]
+   (js/createImageBitmap image options)))
 
 (defn request-fullscreen
   [el]