🐛 Fix thumbnails in viewer thumbnails

backend/src/app/rpc/queries/viewer.clj

@@ -53,8 +53,10 @@
   [{:keys [pool] :as cfg} {:keys [profile-id file-id share-id] :as params}]
   (p/let [slink  (slnk/retrieve-share-link pool file-id share-id)
           perms  (files/get-permissions pool profile-id file-id share-id)
+          thumbs (files/retrieve-object-thumbnails cfg file-id)
           bundle (p/-> (retrieve-bundle cfg file-id)
-                       (assoc :permissions perms))]
+                       (assoc :permissions perms)
+                       (assoc-in [:file :thumbnails] thumbs))]
 
     ;; When we have neither profile nor share, we just return a not
     ;; found response to the user.

frontend/src/app/main/refs.cljs

@@ -349,15 +349,18 @@
 
 ;; ---- Viewer refs
 
-(def viewer-file
-  (l/derived :viewer-file st/state))
-
-(def viewer-project
-  (l/derived :viewer-file st/state))
-
 (def viewer-data
   (l/derived :viewer st/state))
 
+(def viewer-file
+  (l/derived :file viewer-data))
+
+(def viewer-thumbnails
+  (l/derived :thumbnails viewer-file))
+
+(def viewer-project
+  (l/derived :project viewer-data))
+
 (def viewer-state
   (l/derived :viewer st/state))
 

frontend/src/app/main/ui/viewer.cljs

@@ -267,7 +267,8 @@
       [:& thumbnails-panel {:frames frames
                             :show? (:show-thumbnails local false)
                             :page page
-                            :index index}]
+                            :index index
+                            :thumbnail-data (:thumbnails file)}]
       [:section.viewer-section {:id "viewer-section"
                                 :ref viewer-section-ref
                                 :class (if fullscreen? "fullscreen" "")}

frontend/src/app/main/ui/viewer/thumbnails.cljs

@@ -7,6 +7,7 @@
 (ns app.main.ui.viewer.thumbnails
   (:require
    [app.common.data :as d]
+   [app.common.data.macros :as dm]
    [app.main.data.viewer :as dv]
    [app.main.render :as render]
    [app.main.store :as st]
@@ -74,21 +75,24 @@
 (mf/defc thumbnail-item
   {::mf/wrap [mf/memo
               #(mf/deferred % ts/idle-then-raf)]}
-  [{:keys [selected? frame on-click index objects]}]
+  [{:keys [selected? frame on-click index objects page-id thumbnail-data]}]
+
   [:div.thumbnail-item {:on-click #(on-click % index)}
    [:div.thumbnail-preview
     {:class (dom/classnames :selected selected?)}
-    [:& render/frame-svg {:frame frame :objects objects :show-thumbnails? true}]]
+    [:& render/frame-svg {:frame (-> frame
+                                     (assoc :thumbnail (get thumbnail-data (dm/str page-id (:id frame)))))
+                          :objects objects
+                          :show-thumbnails? true}]]
    [:div.thumbnail-info
     [:span.name {:title (:name frame)} (:name frame)]]])
 
 (mf/defc thumbnails-panel
-  [{:keys [frames page index show?] :as props}]
+  [{:keys [frames page index show? thumbnail-data] :as props}]
   (let [expanded? (mf/use-state false)
         container (mf/use-ref)
 
         objects   (:objects page)
-
         on-close  #(st/emit! dv/toggle-thumbnails-panel)
         selected  (mf/use-var false)
 
@@ -115,6 +119,8 @@
       (for [[i frame] (d/enumerate frames)]
         [:& thumbnail-item {:index i
                             :frame frame
+                            :page-id (:id page)
                             :objects objects
                             :on-click on-item-click
-                            :selected? (= i index)}])]]))
+                            :selected? (= i index)
+                            :thumbnail-data thumbnail-data}])]]))