Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-01-08 07:50:43 -05:00
Code Issues Activity

✨ Resolve file thumbnail on frontend instead of backend

Browse source
This commit is contained in:
Andrey Antukh 2024-07-25 15:14:16 +02:00
parent 5ed49995f0
commit defcef3e59
4 changed files with 20 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
backend/src/app/rpc/commands/files.clj
View file

@ -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)]
(-> row
(dissoc :media-id)
(assoc :thumbnail-uri (resolve-public-uri media-id)))
(if-let [media-id (:thumbnail-id row)]
(assoc row :thumbnail-uri (resolve-public-uri media-id))
(dissoc row :media-id))))))
(def ^:private schema:get-team-recent-files

3
backend/src/app/rpc/commands/files_thumbnails.clj
View file

@ -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)})))))

11
frontend/src/app/main/data/dashboard.cljs
View file

@ -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->
(not is-shared)
(cond-> (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-recent-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-id thumbnail-id)
(d/update-when :dashboard-search-result update-search-files))))))
;; --- EVENT: create-file

19
frontend/src/app/main/ui/dashboard/grid.cljs
View file

@ -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]
(when (and visible? (not thumbnail-uri))
(mf/with-effect [file-id revn visible? thumbnail-id]
(when (and visible? (not thumbnail-id))
(->> (ask-for-thumbnail file-id revn)
(rx/subs! (fn [url]
(st/emit! (dd/set-file-thumbnail file-id url)))
(rx/subs! (fn [thumbnail-id]
(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?))