Merge pull request #3418 from penpot/alotor-fix-safari-thumbs

🐛 Fix problem with safari thumbnails

frontend/src/app/config.cljs

@@ -11,8 +11,8 @@
    [app.common.uri :as u]
    [app.common.version :as v]
    [app.util.avatars :as avatars]
-   [app.util.dom :as dom]
    [app.util.globals :refer [global location]]
+   [app.util.navigator :as nav]
    [app.util.object :as obj]
    [cuerdas.core :as str]))
 
@@ -28,7 +28,7 @@
 
 (defn- parse-browser
   []
-  (let [user-agent (-> (dom/get-user-agent) str/lower)
+  (let [user-agent (-> (nav/get-user-agent) str/lower)
         check-chrome? (fn [] (str/includes? user-agent "chrom"))
         check-firefox? (fn [] (str/includes? user-agent "firefox"))
         check-edge? (fn [] (str/includes? user-agent "edg"))
@@ -42,7 +42,7 @@
 
 (defn- parse-platform
   []
-  (let [user-agent     (str/lower (dom/get-user-agent))
+  (let [user-agent     (str/lower (nav/get-user-agent))
         check-windows? (fn [] (str/includes? user-agent "windows"))
         check-linux?   (fn [] (str/includes? user-agent "linux"))
         check-macos?   (fn [] (str/includes? user-agent "mac os"))]

frontend/src/app/util/dom.cljs

@@ -519,9 +519,6 @@
   (when (and (some? node1) (some? node2))
     (.contains ^js node2 ^js node1)))
 
-(defn get-user-agent []
-  (.-userAgent globals/navigator))
-
 (defn get-active []
   (.-activeElement globals/document))
 

frontend/src/app/util/navigator.cljs

@@ -0,0 +1,14 @@
+;; This Source Code Form is subject to the terms of the Mozilla Public
+;; License, v. 2.0. If a copy of the MPL was not distributed with this
+;; file, You can obtain one at http://mozilla.org/MPL/2.0/.
+;;
+;; Copyright (c) KALEIDOS INC
+
+(ns app.util.navigator
+  (:require [app.util.globals :as globals]))
+
+(defn get-user-agent []
+  (.-userAgent globals/navigator))
+
+
+

frontend/src/app/util/webapi.cljs

@@ -10,6 +10,7 @@
    [app.common.data :as d]
    [app.common.exceptions :as ex]
    [app.common.logging :as log]
+   [app.config :as cf]
    [app.util.object :as obj]
    [app.util.thumbnails :as th]
    [beicon.core :as rx]
@@ -150,20 +151,41 @@
   ([image options]
    (js/createImageBitmap image options)))
 
+(defn create-image
+  [src width height]
+  (p/create
+   (fn [resolve reject]
+     (let [img (.createElement js/document "img")]
+       (obj/set! img "width" width)
+       (obj/set! img "height" height)
+       (obj/set! img "src" src)
+       (obj/set! img "onload" #(resolve img))
+       (obj/set! img "onerror" reject)))))
+
 ;; Why this? Because as described in https://bugs.chromium.org/p/chromium/issues/detail?id=1463435
 ;; the createImageBitmap seems to apply premultiplied alpha multiples times on the same image
 ;; which results in harsh borders around text being rendered. This is a workaround to avoid this issue.
 (defn create-image-bitmap-with-workaround
   ([image]
    (create-image-bitmap-with-workaround image nil))
-  ([image options]
+  ([^js image options]
    (let [width (.-value (.-baseVal (.-width image)))
          height (.-value (.-baseVal (.-height image)))
          [width height] (th/get-proportional-size width height)
-         offscreen-canvas (create-offscreen-canvas width height)
+
-         offscreen-context (.getContext offscreen-canvas "2d")]
+         image-source
-     (.drawImage offscreen-context image 0 0)
+         (if (cf/check-browser? :safari)
-     (create-image-bitmap offscreen-canvas options))))
+           (let [src (.-baseVal (.-href image))]
+             (create-image src width height))
+           (p/resolved image))]
+
+     (-> image-source
+         (p/then
+          (fn [html-img]
+            (let [offscreen-canvas (create-offscreen-canvas width height)
+                  offscreen-context (.getContext offscreen-canvas "2d")]
+              (.drawImage offscreen-context html-img 0 0)
+              (create-image-bitmap offscreen-canvas options))))))))
 
 (defn request-fullscreen
   [el]