Merge pull request #1429 from penpot/cache-thumbnails-v2

 Cache thumbnails with browser cache
This commit is contained in:
Andrey Antukh 2021-12-29 13:03:40 +01:00 committed by GitHub
commit 2962dc1faa
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23

View file

@ -22,44 +22,69 @@
[app.util.dom.dnd :as dnd] [app.util.dom.dnd :as dnd]
[app.util.i18n :as i18n :refer [tr]] [app.util.i18n :as i18n :refer [tr]]
[app.util.keyboard :as kbd] [app.util.keyboard :as kbd]
[app.util.storage :as stg]
[app.util.time :as dt] [app.util.time :as dt]
[app.util.timers :as ts] [app.util.timers :as ts]
[app.util.webapi :as wapi] [app.util.webapi :as wapi]
[beicon.core :as rx] [beicon.core :as rx]
[cuerdas.core :as str]
[promesa.core :as p]
[rumext.alpha :as mf])) [rumext.alpha :as mf]))
;; --- Grid Item Thumbnail ;; --- Grid Item Thumbnail
(def ^:const CACHE-NAME "penpot")
(def ^:const CACHE-URL "https://penpot.app/cache/")
(defn use-thumbnail-cache (defn use-thumbnail-cache
"Creates some hooks to handle the files thumbnails cache" "Creates some hooks to handle the files thumbnails cache"
[file] [file]
(let [get-thumbnail (let [cache-url (str CACHE-URL (:id file) "/" (:revn file) ".svg")
get-thumbnail
(mf/use-callback (mf/use-callback
(mf/deps file) (mf/deps file)
(fn [] (fn []
(let [[revn thumb-data] (get-in @stg/storage [:thumbnails (:id file)])] (p/let [response (.match js/caches cache-url)]
(when (= revn (:revn file)) (when (some? response)
thumb-data)))) (p/let [blob (.blob response)
svg-content (.text blob)
headers (.-headers response)
fonts-header (or (.get headers "X-PENPOT-FONTS") "")
fonts (into #{}
(remove #(= "" %))
(str/split fonts-header ","))]
{:svg svg-content
:fonts fonts})))))
cache-thumbnail cache-thumbnail
(mf/use-callback (mf/use-callback
(mf/deps file) (mf/deps file)
(fn [thumb-data] (fn [{:keys [svg fonts]}]
(swap! stg/storage #(assoc-in % [:thumbnails (:id file)] [(:revn file) thumb-data])))) (p/let [cache (.open js/caches CACHE-NAME)
blob (js/Blob. #js [svg] #js {:type "image/svg"})
fonts (str/join "," fonts)
headers (js/Headers. #js {"X-PENPOT-FONTS" fonts})
response (js/Response. blob #js {:headers headers})]
(.put cache cache-url response))))
generate-thumbnail generate-thumbnail
(mf/use-callback (mf/use-callback
(mf/deps file) (mf/deps file)
(fn [] (fn []
(let [thumb-data (get-thumbnail)] (->> (rx/from (get-thumbnail))
(if (some? thumb-data) (rx/merge-map
(rx/of thumb-data) (fn [thumb-data]
(->> (wrk/ask! {:cmd :thumbnails/generate (if (some? thumb-data)
:file-id (:id file) (rx/of thumb-data)
:page-id (get-in file [:data :pages 0])}) (->> (wrk/ask! {:cmd :thumbnails/generate
#_(rx/tap cache-thumbnail))))))] :file-id (:id file)
:page-id (get-in file [:data :pages 0])})
(rx/tap cache-thumbnail)))))
;; If we have a problem we delegate to the thumbnail generation
(rx/catch #(wrk/ask! {:cmd :thumbnails/generate
:file-id (:id file)
:page-id (get-in file [:data :pages 0])})))))]
generate-thumbnail)) generate-thumbnail))