From e6967238cd54570a5330830286abf66ec45440f1 Mon Sep 17 00:00:00 2001
From: Luca Casonato <hello@lcas.dev>
Date: Tue, 10 May 2022 23:13:49 +0200
Subject: [PATCH] Add exit fullscreen button

On some devices, there are no dedicated hardware buttons for leaving
fullscreen mode (for example browsers on the Steamdeck). This adds a
software "exit fullscreen" button to the bottom bar.
---
 .../components/bottom-bar/index.tsx           | 33 ++++++++++++---
 .../components/bottom-bar/style.css           | 42 +++++++++++++++----
 .../components/icons/initial.tsx              |  8 +++-
 3 files changed, 69 insertions(+), 14 deletions(-)

diff --git a/src/main/services/preact-canvas/components/bottom-bar/index.tsx b/src/main/services/preact-canvas/components/bottom-bar/index.tsx
index 5597cbdf..0b131d41 100644
--- a/src/main/services/preact-canvas/components/bottom-bar/index.tsx
+++ b/src/main/services/preact-canvas/components/bottom-bar/index.tsx
@@ -13,12 +13,19 @@
 import { Component, h } from "preact";
 import { isFeaturePhone } from "src/main/utils/static-display";
 import { bind } from "src/utils/bind";
-import { Back, Fullscreen, Information } from "../icons/initial";
+import {
+  Back,
+  FullscreenEnter,
+  FullscreenExit,
+  Information
+} from "../icons/initial";
 import {
   bottomBar,
   checkbox,
   fpToggle,
   fullscreen,
+  fullscreenEnter,
+  fullscreenExit,
   hidden,
   leftIcon,
   leftKeyIcon,
@@ -41,6 +48,12 @@ function goFullscreen() {
   }
 }
 
+function exitFullscreen() {
+  if (document.exitFullscreen) {
+    document.exitFullscreen();
+  }
+}
+
 const fullscreenSupported: boolean = !!(
   document.documentElement.requestFullscreen ||
   document.documentElement.webkitRequestFullscreen
@@ -184,20 +197,30 @@ export default class BottomBar extends Component<Props, State> {
       ""
     ) : fullscreenSupported ? (
       <button
-        class={fullscreen}
+        class={fullscreenEnter}
         onClick={goFullscreen}
-        aria-label="fullscreen mode"
+        aria-label="enter fullscreen mode"
       >
-        <Fullscreen />
+        <FullscreenEnter />
       </button>
     ) : (
       <div class={noFullscreen} />
     );
+
     return (
       <div class={[bottomBar, display ? "" : hidden].join(" ")} role="menubar">
         {buttonType === "back" ? backBtn : infoBtn}
         {showDangerModeToggle && toggleBtn}
-        {fullscreenSupported ? fullscreenBtn : <div class={noFullscreen} />}
+        <div class={fullscreen}>
+          <button
+            class={fullscreenExit}
+            onClick={exitFullscreen}
+            aria-label="exit fullscreen mode"
+          >
+            <FullscreenExit />
+          </button>
+          {fullscreenSupported ? fullscreenBtn : <div class={noFullscreen} />}
+        </div>
       </div>
     );
   }
diff --git a/src/main/services/preact-canvas/components/bottom-bar/style.css b/src/main/services/preact-canvas/components/bottom-bar/style.css
index 3f8b0cda..f6ba432f 100644
--- a/src/main/services/preact-canvas/components/bottom-bar/style.css
+++ b/src/main/services/preact-canvas/components/bottom-bar/style.css
@@ -28,7 +28,8 @@
   position: absolute;
 }
 
-.bottom-bar > button {
+.bottom-bar > button,
+.bottom-bar > .fullscreen {
   margin: var(--bar-padding) 0;
 }
 
@@ -64,30 +65,55 @@
 }
 
 .fullscreen {
-  composes: icons;
+  display: flex;
+  align-items: center;
+
   /* PostCSS gets the order wrong :( */
   margin-left: auto !important;
 }
 
+.fullscreen-enter {
+  composes: icons;
+}
+
+.fullscreen-exit {
+  composes: icons;
+  display: none;
+}
+
 .no-fullscreen {
   margin-left: auto;
   width: var(--icon-size);
   height: var(--icon-size);
 }
 
-html:fullscreen .fullscreen {
-  visibility: hidden;
+html:fullscreen .fullscreen-enter {
+  display: none;
 }
 
 /* For Safari. This can't be combined with the rule above, as Safari sees :fullscreen as invalid,
 and craps itself. */
-html:-webkit-full-screen .fullscreen {
-  visibility: hidden;
+html:-webkit-full-screen .fullscreen-enter {
+  display: none;
+}
+
+html:fullscreen .fullscreen-exit {
+  display: block;
+}
+
+/* For Safari. This can't be combined with the rule above, as Safari sees :fullscreen as invalid,
+and craps itself. */
+html:-webkit-full-screen .fullscreen-exit {
+  display: block;
 }
 
 @media (display-mode: fullscreen) {
-  .fullscreen {
-    visibility: hidden;
+  .fullscreen-enter {
+    display: none;
+  }
+
+  .fullscreen-exit {
+    display: block;
   }
 }
 
diff --git a/src/main/services/preact-canvas/components/icons/initial.tsx b/src/main/services/preact-canvas/components/icons/initial.tsx
index 5bfbf22f..a1a1c664 100644
--- a/src/main/services/preact-canvas/components/icons/initial.tsx
+++ b/src/main/services/preact-canvas/components/icons/initial.tsx
@@ -16,12 +16,18 @@ import { h } from "preact";
 
 // tslint:disable:max-line-length variable-name
 
-export const Fullscreen = (props: JSX.HTMLAttributes) => (
+export const FullscreenEnter = (props: JSX.HTMLAttributes) => (
   <svg viewBox="0 0 24 24" {...props}>
     <path d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z" />
   </svg>
 );
 
+export const FullscreenExit = (props: JSX.HTMLAttributes) => (
+  <svg viewBox="0 0 24 24" {...props}>
+    <path d="M14 14h5v2h-3v3h-2v-5m-9 0h5v5H8v-3H5v-2m3-9h2v5H5V8h3V5m11 3v2h-5V5h2v3h3Z" />
+  </svg>
+);
+
 export const Information = (props: JSX.HTMLAttributes) => (
   <svg viewBox="0 0 24 24" {...props}>
     <path d="M11 7h2v2h-2zm0 4h2v6h-2zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z" />