From 9bcb3e9e7f407f4c7b630f0fff41320ca1f2d797 Mon Sep 17 00:00:00 2001
From: "alonso.torres" <alonso.torres@kaleidos.net>
Date: Thu, 13 Jul 2023 16:28:11 +0200
Subject: [PATCH] :bug: Fix problem with Safari thumbnails
---
frontend/src/app/config.cljs | 6 +++---
frontend/src/app/util/dom.cljs | 3 ---
frontend/src/app/util/navigator.cljs | 14 ++++++++++++
frontend/src/app/util/webapi.cljs | 32 +++++++++++++++++++++++-----
4 files changed, 44 insertions(+), 11 deletions(-)
create mode 100644 frontend/src/app/util/navigator.cljs
diff --git a/frontend/src/app/config.cljs b/frontend/src/app/config.cljs
index 704ac51b8..2222b5018 100644
--- a/frontend/src/app/config.cljs
+++ b/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"))]
diff --git a/frontend/src/app/util/dom.cljs b/frontend/src/app/util/dom.cljs
index 535d7a0d0..3c6fcbf6b 100644
--- a/frontend/src/app/util/dom.cljs
+++ b/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))
diff --git a/frontend/src/app/util/navigator.cljs b/frontend/src/app/util/navigator.cljs
new file mode 100644
index 000000000..97bb86653
--- /dev/null
+++ b/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))
+
+
+
diff --git a/frontend/src/app/util/webapi.cljs b/frontend/src/app/util/webapi.cljs
index db5fd1146..21675a01b 100644
--- a/frontend/src/app/util/webapi.cljs
+++ b/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")]
- (.drawImage offscreen-context image 0 0)
- (create-image-bitmap offscreen-canvas options))))
+
+ image-source
+ (if (cf/check-browser? :safari)
+ (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]