From ead64a18200f61e198ee03b2830fe6b29ce8d27f Mon Sep 17 00:00:00 2001
From: "alonso.torres" <alonso.torres@kaleidos.net>
Date: Tue, 24 Jan 2023 11:56:59 +0100
Subject: [PATCH] :bug: Fix thumbnails for Safari browsers

---
 frontend/src/app/main/ui/shapes/frame.cljs    | 29 +++++++++++++------
 .../shapes/frame/thumbnail_render.cljs        | 28 +++++++++++++-----
 2 files changed, 40 insertions(+), 17 deletions(-)

diff --git a/frontend/src/app/main/ui/shapes/frame.cljs b/frontend/src/app/main/ui/shapes/frame.cljs
index 05c9c3ec7..4d124f29f 100644
--- a/frontend/src/app/main/ui/shapes/frame.cljs
+++ b/frontend/src/app/main/ui/shapes/frame.cljs
@@ -8,6 +8,7 @@
   (:require
    [app.common.data.macros :as dm]
    [app.common.geom.shapes :as gsh]
+   [app.config :as cf]
    [app.main.ui.context :as muc]
    [app.main.ui.shapes.attrs :as attrs]
    [app.main.ui.shapes.custom-stroke :refer [shape-fills shape-strokes]]
@@ -90,15 +91,25 @@
         bounds (or (obj/get props "bounds") (gsh/points->selrect (:points shape)))]
 
     (when (:thumbnail shape)
-      [:image.frame-thumbnail
-       {:id (dm/str "thumbnail-" (:id shape))
-        :href (:thumbnail shape)
-        :x (:x bounds)
-        :y (:y bounds)
-        :width (:width bounds)
-        :height (:height bounds)
-        ;; DEBUG
-        :style {:filter (when (debug? :thumbnails) "sepia(1)")}}])))
+      [:*
+       [:image.frame-thumbnail
+        {:id (dm/str "thumbnail-" (:id shape))
+         :href (:thumbnail shape)
+         :x (:x bounds)
+         :y (:y bounds)
+         :width (:width bounds)
+         :height (:height bounds)
+         ;; DEBUG
+         :style {:filter (when (and (not (cf/check-browser? :safari))(debug? :thumbnails)) "sepia(1)")}}]
+
+       ;; Safari don't support filters so instead we add a rectangle around the thumbnail
+       (when (and (cf/check-browser? :safari) (debug? :thumbnails))
+         [:rect {:x (+ (:x bounds) 4)
+                 :y (+ (:y bounds) 4)
+                 :width (- (:width bounds) 8)
+                 :height (- (:height bounds) 8)
+                 :stroke "red"
+                 :stroke-width 2}])])))
 
 (mf/defc frame-thumbnail
   {::mf/wrap-props false}
diff --git a/frontend/src/app/main/ui/workspace/shapes/frame/thumbnail_render.cljs b/frontend/src/app/main/ui/workspace/shapes/frame/thumbnail_render.cljs
index f6a990346..8b96a5607 100644
--- a/frontend/src/app/main/ui/workspace/shapes/frame/thumbnail_render.cljs
+++ b/frontend/src/app/main/ui/workspace/shapes/frame/thumbnail_render.cljs
@@ -10,6 +10,7 @@
    [app.common.data.macros :as dm]
    [app.common.geom.shapes :as gsh]
    [app.common.math :as mth]
+   [app.config :as cf]
    [app.main.data.workspace.thumbnails :as dwt]
    [app.main.refs :as refs]
    [app.main.store :as st]
@@ -251,15 +252,26 @@
           :width fixed-width
           :height fixed-height
           ;; DEBUG
-          :style {:filter (when (debug? :thumbnails) "invert(1)")
+          :style {:filter (when (and (not (cf/check-browser? :safari)) (debug? :thumbnails)) "invert(1)")
                   :width "100%"
                   :height "100%"}}]]
 
+       ;; Safari don't support filters so instead we add a rectangle around the thumbnail
+       (when (and (cf/check-browser? :safari) (debug? :thumbnails))
+         [:rect {:x (+ x 2)
+                 :y (+ y 2)
+                 :width (- width 4)
+                 :height (- height 4)
+                 :stroke "blue"
+                 :stroke-width 2}])
+
        (when (some? @image-url)
-         [:image {:ref frame-image-ref
-                  :x x
-                  :y y
-                  :href @image-url
-                  :width width
-                  :height height
-                  :on-load on-image-load}])])]))
+         [:foreignObject {:x x
+                          :y y
+                          :width width
+                          :height height}
+          [:img {:ref frame-image-ref
+                 :src @image-url
+                 :width width
+                 :height height
+                 :on-load on-image-load}]])])]))