Merge pull request #4925 from penpot/niwinz-resolve-thumbnail-on-frontend

✨ Resolve file thumbnail on frontend instead of backend

backend/src/app/rpc/commands/files.clj

@@ -671,7 +671,7 @@
             f.modified_at,
             f.name,
             f.is_shared,
-            ft.media_id,
+            ft.media_id AS thumbnail_id,
             row_number() over w as row_num
        from file as f
       inner join project as p on (p.id = f.project_id)
@@ -690,10 +690,8 @@
   [conn team-id]
   (->> (db/exec! conn [sql:team-recent-files team-id])
        (mapv (fn [row]
-               (if-let [media-id (:media-id row)]
+               (if-let [media-id (:thumbnail-id row)]
-                 (-> row
+                 (assoc row :thumbnail-uri (resolve-public-uri media-id))
-                     (dissoc :media-id)
-                     (assoc :thumbnail-uri (resolve-public-uri media-id)))
                  (dissoc row :media-id))))))
 
 (def ^:private schema:get-team-recent-files

backend/src/app/rpc/commands/files_thumbnails.clj

@@ -406,4 +406,5 @@
                     (when-not (db/read-only? conn)
                       (let [cfg   (update cfg ::sto/storage media/configure-assets-storage)
                             media (create-file-thumbnail! cfg params)]
-                        {:uri (files/resolve-public-uri (:id media))})))))
+                        {:uri (files/resolve-public-uri (:id media))
+                         :id (:id media)})))))

frontend/src/app/main/data/dashboard.cljs

@@ -898,8 +898,7 @@
       (-> state
           (d/update-in-when [:dashboard-files id :is-shared] (constantly is-shared))
           (d/update-in-when [:dashboard-recent-files id :is-shared] (constantly is-shared))
-          (cond->
+          (cond-> (not is-shared)
-           (not is-shared)
             (d/update-when :dashboard-shared-files dissoc id))))
 
     ptk/WatchEvent
@@ -909,7 +908,7 @@
              (rx/ignore))))))
 
 (defn set-file-thumbnail
-  [file-id thumbnail-uri]
+  [file-id thumbnail-id]
   (ptk/reify ::set-file-thumbnail
     ptk/UpdateEvent
     (update [_ state]
@@ -917,10 +916,10 @@
                 (->> files
                      (mapv #(cond-> %
                               (= file-id (:id %))
-                              (assoc :thumbnail-uri thumbnail-uri)))))]
+                              (assoc :thumbnail-id thumbnail-id)))))]
         (-> state
-            (d/update-in-when [:dashboard-files file-id] assoc :thumbnail-uri thumbnail-uri)
+            (d/update-in-when [:dashboard-files file-id] assoc :thumbnail-id thumbnail-id)
-            (d/update-in-when [:dashboard-recent-files file-id] assoc :thumbnail-uri thumbnail-uri)
+            (d/update-in-when [:dashboard-recent-files file-id] assoc :thumbnail-id thumbnail-id)
             (d/update-when :dashboard-search-result update-search-files))))))
 
 ;; --- EVENT: create-file

frontend/src/app/main/ui/dashboard/grid.cljs

@@ -11,6 +11,7 @@
    [app.common.data.macros :as dm]
    [app.common.geom.point :as gpt]
    [app.common.logging :as log]
+   [app.config :as cf]
    [app.main.data.dashboard :as dd]
    [app.main.data.messages :as msg]
    [app.main.features :as features]
@@ -47,7 +48,7 @@
   [file-id revn blob]
   (let [params {:file-id file-id :revn revn :media blob}]
     (->> (rp/cmd! :create-file-thumbnail params)
-         (rx/map :uri))))
+         (rx/map :id))))
 
 (defn render-thumbnail
   [file-id revn]
@@ -71,15 +72,15 @@
 
 (mf/defc grid-item-thumbnail
   {::mf/wrap-props false}
-  [{:keys [file-id revn thumbnail-uri background-color]}]
+  [{:keys [file-id revn thumbnail-id background-color]}]
   (let [container (mf/use-ref)
         visible?  (h/use-visible container :once? true)]
 
-    (mf/with-effect [file-id revn visible? thumbnail-uri]
+    (mf/with-effect [file-id revn visible? thumbnail-id]
-      (when (and visible? (not thumbnail-uri))
+      (when (and visible? (not thumbnail-id))
         (->> (ask-for-thumbnail file-id revn)
-             (rx/subs! (fn [url]
+             (rx/subs! (fn [thumbnail-id]
-                         (st/emit! (dd/set-file-thumbnail file-id url)))
+                         (st/emit! (dd/set-file-thumbnail file-id thumbnail-id)))
                        (fn [cause]
                          (log/error :hint "unable to render thumbnail"
                                     :file-if file-id
@@ -90,9 +91,9 @@
            :style {:background-color background-color}
            :ref container}
      (when visible?
-       (if thumbnail-uri
+       (if thumbnail-id
          [:img {:class (stl/css :grid-item-thumbnail-image)
-                :src thumbnail-uri
+                :src (cf/resolve-media thumbnail-id)
                 :loading "lazy"
                 :decoding "async"}]
          i/loader-pencil))]))
@@ -365,7 +366,7 @@
         [:& grid-item-thumbnail
          {:file-id (:id file)
           :revn (:revn file)
-          :thumbnail-uri (:thumbnail-uri file)
+          :thumbnail-id (:thumbnail-id file)
           :background-color (dm/get-in file [:data :options :background])}])
 
       (when (and (:is-shared file) (not library-view?))