🐛 Fix header not showing when exiting fullscreen mode in viewer

CHANGES.md

@@ -47,6 +47,7 @@
 - Fix multiplayer username sometimes is not displayed correctly [Taiga #4400](https://tree.taiga.io/project/penpot/issue/4400)
 - Show warning when trying to invite a user that is already in members [Taiga #4147](https://tree.taiga.io/project/penpot/issue/4147)
 - Fix problem with text out of borders when changing from auto-width to fixed [Taiga #4308](https://tree.taiga.io/project/penpot/issue/4308)
+- Fix header not showing when exiting fullscreen mode in viewer [Taiga #4244](https://tree.taiga.io/project/penpot/issue/4244)
 
 ### :heart: Community contributions by (Thank you!)
 - To @ondrejkonec: for contributing to the code with:

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

@@ -300,6 +300,13 @@
     (update [_ state]
       (update-in state [:viewer-local :fullscreen?] not))))
 
+(defn exit-fullscreen
+  []
+  (ptk/reify ::exit-fullscreen
+    ptk/UpdateEvent
+    (update [_ state]
+      (assoc-in state [:viewer-local :fullscreen?] false))))
+
 (defn set-viewport-size
   [{:keys [size]}]
   (ptk/reify ::set-viewport-size

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

@@ -5,6 +5,7 @@
 ;; Copyright (c) KALEIDOS INC
 
 (ns app.main.ui.viewer
+  (:import goog.events.EventType)
   (:require
    [app.common.colors :as clr]
    [app.common.data :as d]
@@ -34,6 +35,7 @@
    [app.main.ui.viewer.thumbnails :refer [thumbnails-panel]]
    [app.util.dom :as dom]
    [app.util.dom.normalize-wheel :as nw]
+   [app.util.globals :as globals]
    [app.util.i18n :as i18n :refer [tr]]
    [app.util.keyboard :as kbd]
    [app.util.webapi :as wapi]
@@ -329,7 +331,13 @@
                  (dom/stop-propagation event)
                  (if shift?
                    (dom/set-h-scroll-pos! viewer-section new-scroll-pos)
-                   (dom/set-scroll-pos! viewer-section new-scroll-pos)))))))]
+                   (dom/set-scroll-pos! viewer-section new-scroll-pos)))))))
+
+        on-exit-fullscreen
+        (mf/use-callback
+         (fn []
+           (when (not (dom/fullscreen?))
+             (st/emit! (dv/exit-fullscreen)))))]
 
     (hooks/use-shortcuts ::viewer sc/shortcuts)
     (when (nil? page)
@@ -348,11 +356,19 @@
 
     (mf/with-effect []
       (dom/set-html-theme-color clr/gray-50 "dark")
-      (let [key1 (events/listen js/window "click" on-click)
-            key2 (events/listen (mf/ref-val viewer-section-ref) "wheel" on-wheel #js {"passive" false})]
+      (let [events
+            [(events/listen globals/window EventType.CLICK on-click)
+             (events/listen (mf/ref-val viewer-section-ref) EventType.WHEEL on-wheel #js {"passive" false})]]
+
+        (doseq [event dom/fullscreen-events]
+          (.addEventListener globals/document event on-exit-fullscreen false))
+
         (fn []
-          (events/unlistenByKey key1)
-          (events/unlistenByKey key2))))
+          (doseq [key events]
+            (events/unlistenByKey key))
+
+          (doseq [event dom/fullscreen-events]
+            (.removeEventListener globals/document event on-exit-fullscreen)))))
 
     (mf/use-effect
      (fn []

frontend/src/app/util/dom.cljs

@@ -368,12 +368,22 @@
   (when (some? node)
     (.blur node)))
 
+;; List of dom events for different browsers to detect the exit of fullscreen mode
+(def fullscreen-events
+  ["fullscreenchange" "mozfullscreenchange" "MSFullscreenChange" "webkitfullscreenchange"])
+
 (defn fullscreen?
   []
   (cond
     (obj/in? globals/document "webkitFullscreenElement")
     (boolean (.-webkitFullscreenElement globals/document))
 
+    (obj/in? globals/document "mozFullScreen")
+    (boolean (.-mozFullScreen globals/document))
+
+    (obj/in? globals/document "msFullscreenElement")
+    (boolean (.-msFullscreenElement globals/document))
+
     (obj/in? globals/document "fullscreenElement")
     (boolean (.-fullscreenElement globals/document))