Add view mode to hide away menu and status bars (#1587)

Part of #728, stacked onto #1586. As demonstrated and discussed [in the original proof-of-concept branch](#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](#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](#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>
tiny-pilot · Aug 24, 2023 · 2dd5354 · 2dd5354
1 parent 7222d29
commit 2dd5354
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 2 deletions.
diff --git 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
@@ -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
@@ -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'