🎉 Add fullscreen handling to viewer.

frontend/resources/styles/main/layouts/viewer.scss

@@ -5,7 +5,10 @@
 
   &.fullscreen {
     .viewer-header {
-      display: none;
+      opacity: 0;
+      &:hover {
+        opacity: 1;
+      }
     }
 
     .viewer-content {

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

@@ -131,6 +131,7 @@
     (update [_ state]
       (update-in state [:viewer-local :show-thumbnails] not))))
 
+;; --- Shortcuts
 
 (def shortcuts
   {"+" #(st/emit! increase-zoom)

frontend/src/uxbox/main/ui/react_hooks.cljs

@@ -15,6 +15,8 @@
    [beicon.core :as rx]
    [goog.events :as events]
    [rumext.alpha :as mf]
+   [uxbox.util.dom :as dom]
+   [uxbox.util.webapi :as wapi]
    ["mousetrap" :as mousetrap])
   (:import goog.events.EventType))
 
@@ -46,3 +48,20 @@
      (fn [] (mousetrap/reset))))
   nil)
 
+(defn use-fullscreen
+  [ref]
+  (let [state (mf/use-state (dom/fullscreen?))
+        change (mf/use-callback #(reset! state (dom/fullscreen?)))
+        toggle (mf/use-callback (mf/deps @state)
+                                #(let [el (mf/ref-val ref)]
+                                   (swap! state not)
+                                   (if @state
+                                     (wapi/exit-fullscreen)
+                                     (wapi/request-fullscreen el))))]
+    (mf/use-effect
+     (fn []
+       (.addEventListener js/document "fullscreenchange" change)
+       #(.removeEventListener js/document "fullscreenchange" change)))
+
+    [toggle @state]))
+

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

@@ -46,7 +46,11 @@
 
 (mf/defc viewer-content
   [{:keys [data local index] :as props}]
-  (let [on-mouse-wheel
+  (let [container (mf/use-ref)
+
+        [toggle-fullscreen fullscreen?] (hooks/use-fullscreen container)
+
+        on-mouse-wheel
         (fn [event]
           (when (kbd/ctrl? event)
             ;; Disable browser zoom with ctrl+mouse wheel
@@ -64,8 +68,12 @@
     (mf/use-effect on-mount)
     (hooks/use-shortcuts dv/shortcuts)
 
-    [:div.viewer-layout
+    [:div.viewer-layout {:class (classnames :fullscreen fullscreen?)
+                         :ref container}
+
      [:& header {:data data
+                 :toggle-fullscreen toggle-fullscreen
+                 :fullscreen? fullscreen?
                  :local local
                  :index index}]
      [:div.viewer-content

frontend/src/uxbox/main/ui/viewer/header.cljs

@@ -56,7 +56,7 @@
      [:span.remove-zoom {:on-click increase} "+"]]))
 
 (mf/defc header
-  [{:keys [data index local] :as props}]
+  [{:keys [data index local fullscreen? toggle-fullscreen] :as props}]
   (let [{:keys [project file page frames]} data
         total (count frames)
         on-click #(st/emit! dv/toggle-thumbnails-panel)
@@ -81,5 +81,8 @@
      [:div.options-zone
       [:span.btn-primary {:on-click on-edit} "Edit page"]
       [:& zoom-widget {:zoom (:zoom local)}]
-      [:span.btn-fullscreen.tooltip.tooltip-bottom {:alt "Full screen"} i/full-screen]]]))
+      [:span.btn-fullscreen.tooltip.tooltip-bottom
+       {:alt "Full screen"
+        :on-click toggle-fullscreen}
+       i/full-screen]]]))
 

frontend/src/uxbox/util/dom.cljs

@@ -156,3 +156,7 @@
   [event]
   (let [data-string (-> event .-dataTransfer (.getData "text"))]
     (ts/decode data-string)))
+
+(defn fullscreen?
+  []
+  (boolean (.-fullscreenElement js/document)))

frontend/src/uxbox/util/webapi.cljs

@@ -82,4 +82,10 @@
                     (catch :default e
                       nil)))))))
 
+(defn request-fullscreen
+  [el]
+  (.requestFullscreen el))
 
+(defn exit-fullscreen
+  []
+  (.exitFullscreen js/document))