From 2dd535465fe70689a8e22751db24e4b86809db35 Mon Sep 17 00:00:00 2001
From: jotaen4tinypilot <83721279+jotaen4tinypilot@users.noreply.github.com>
Date: Thu, 24 Aug 2023 15:47:29 +0200
Subject: [PATCH] Add view mode to hide away menu and status bars (#1587)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Part of https://github.com/tiny-pilot/tinypilot/issues/728, stacked onto
https://github.com/tiny-pilot/tinypilot/pull/1586.

As demonstrated and discussed [in the original proof-of-concept
branch](https://github.com/tiny-pilot/tinypilot/pull/1574), we want to
hide the status bar and menu bar in the popup window [via a query
parameter](https://github.com/tiny-pilot/tinypilot/pull/1574/files#diff-66e482e36d313dd641cd92c815c5fa30fb380bbaa601810827b30a5b84428856R351).
So by appending `?viewMode=standalone` to the TinyPilot URL, this PR
hides the status bar, the menu bar, and the on-screen keyboard.

We will use this in a later PR, when adding the menu item for opening a
“real” popup window.

<img width="783" alt="Screenshot 2023-08-23 at 18 38 09"
src="https://github.com/tiny-pilot/tinypilot/assets/83721279/c3a22b9b-b3b8-49a3-a5b1-88d2368337ec">

The query parameter can also be used independent of the popup window,
which e.g. allows for [the iframe
use-case](https://github.com/tiny-pilot/tinypilot/issues/523).

## Notes

- `prettier-ignore` is needed above `<remote-screen>`, since Prettier
cannot handle Jinja2 templates, and would enforce a pretty [bulky
formatting
otherwise](https://github.com/tiny-pilot/tinypilot/pull/1574/files#diff-a18b3b5de30df1bcf7531723d24c214d69b2acff3cd88540e1ff186409879b0aR81-R88).
- I had to pull out a `--bar-padding` CSS variable in the
`<remote-screen>` component, so that we can dynamically override the
value. I forgot that in the [earlier
PR](https://github.com/tiny-pilot/tinypilot/pull/1583).
- In `index.html`, I injected the `display: none` via a plain `<style>`
block to hide the elements from the page. Since `index.html` itself
isn’t a web component, I’m not sure we can mimic our usual pattern with
HTML attributes here
([example](https://github.com/tiny-pilot/tinypilot/blob/aa80dbdd3e58e79401008665f2199d98fa14b3d0/app/templates/custom-elements/change-hostname-dialog.html#L12-L14)),
at least not without introducing more complexity and indirection. The
`<style>` block is not super beautiful, but I thought it’s simple and
straightforward at least.
- Note sure `standalone` is the greatest name for the query parameter
value. Potential alternatives: “screen-only”, “focus-mode”,
“dedicated-screen”. (It’s maybe not *that* critical, however… 🤔) In any
event, I found something like `?viewMode=standalone` more descriptive
and flexible than `standaloneMode=true`.
<a data-ca-tag
href="https://codeapprove.com/pr/tiny-pilot/tinypilot/1587"><img
src="https://codeapprove.com/external/github-tag-allbg.png" alt="Review
on CodeApprove" /></a>
---
 app/templates/custom-elements/remote-screen.html |  5 +++--
 app/templates/index.html                         | 15 +++++++++++++++
 app/views.py                                     |  5 +++++
 3 files changed, 23 insertions(+), 2 deletions(-)

diff --git a/app/templates/custom-elements/remote-screen.html b/app/templates/custom-elements/remote-screen.html
index 896318b01..6e50ed7fa 100644
--- a/app/templates/custom-elements/remote-screen.html
+++ b/app/templates/custom-elements/remote-screen.html
@@ -5,12 +5,13 @@
     :host {
       --menu-bar-height: 45px;
       --status-bar-height: 31px;
+      --bar-padding: 10px;
       display: flex;
       flex-direction: column;
       box-sizing: border-box;
       height: 100vh;
-      padding-top: calc(var(--menu-bar-height) + 10px);
-      padding-bottom: calc(var(--status-bar-height) + 10px);
+      padding-top: calc(var(--menu-bar-height) + var(--bar-padding));
+      padding-bottom: calc(var(--status-bar-height) + var(--bar-padding));
       align-items: center;
     }
 
diff --git a/app/templates/index.html b/app/templates/index.html
index 6d0bc42fe..3c28436ff 100644
--- a/app/templates/index.html
+++ b/app/templates/index.html
@@ -10,6 +10,21 @@
     <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="csrf-token" content="{{ csrf_token() }}" />
+    {% if is_standalone_mode %}
+    <style>
+      .header-bar,
+      .footer-bar,
+      #on-screen-keyboard {
+        display: none;
+      }
+
+      #remote-screen {
+        --menu-bar-height: 0;
+        --status-bar-height: 0;
+        --bar-padding: 0;
+      }
+    </style>
+    {% endif %}
   </head>
   <body>
     <!-- prettier-ignore -->
diff --git a/app/views.py b/app/views.py
index 39bd55ed5..a0748c36d 100644
--- a/app/views.py
+++ b/app/views.py
@@ -19,6 +19,7 @@ def index_get():
         'index.html',
         use_webrtc_remote_screen=use_webrtc,
         page_title_prefix=_page_title_prefix(),
+        is_standalone_mode=_is_standalone_mode(),
         custom_elements_files=find_files.custom_elements_files())
 
 
@@ -47,3 +48,7 @@ def _page_title_prefix():
     if hostname.determine().lower() != _DEFAULT_HOSTNAME.lower():
         return f'{hostname.determine()} - '
     return ''
+
+
+def _is_standalone_mode():
+    return flask.request.args.get('viewMode') == 'standalone'