From 395246903e3ce8aa6e7149365b9a1a37b1205f95 Mon Sep 17 00:00:00 2001
From: lonkaars <loek@pipeframe.xyz>
Date: Wed, 28 Jul 2021 12:02:41 +0200
Subject: added pwa utility components

---
 components/pwatools.tsx | 26 ++++++++++++++++++++++++++
 pages/editor.tsx        | 22 +++-------------------
 pages/present.tsx       |  3 +++
 3 files changed, 32 insertions(+), 19 deletions(-)
 create mode 100644 components/pwatools.tsx
diff --git a/components/pwatools.tsx b/components/pwatools.tsx
new file mode 100644
index 0000000..c795281
--- /dev/null
+++ b/components/pwatools.tsx
@@ -0,0 +1,26 @@
+import Head from 'next/head';
+
+export function NoScroll() {
+	return <Head>
+		<style
+			children='
+				html, body {
+					position: fixed;
+					overflow: hidden;
+					width: 100vw;
+					height: 100vh;
+				}
+			'
+		/>
+	</Head>;
+}
+
+export function StatusBarOverscrollColor(props: { color?: string; }) {
+	var css = props.color || '#171d33';
+	return <Head>
+		<meta name='apple-mobile-web-app-status-bar-style' content='black-translucent' />
+		<meta name='theme-color' content={css} />
+		<style children={` body { background-color: ${css} !important; } `} />
+		<style children={` :root { background-color: ${css} !important; } `} />
+	</Head>;
+}
diff --git a/pages/editor.tsx b/pages/editor.tsx
index 8a35e2e..3cac3ef 100644
--- a/pages/editor.tsx
+++ b/pages/editor.tsx
@@ -16,6 +16,7 @@ import {
 } from '../components/icons';
 import KeybindSelector from '../components/keybindselector';
 import PlaySkipIconAni from '../components/play-skip';
+import { NoScroll, StatusBarOverscrollColor } from '../components/pwatools';
 import Selection from '../components/selection';
 import SlideProperties from '../components/slideprops';
 import Project, { arrayBufferToBase64, PresentationSettings, VideoSources, VideoSourceType } from '../project';
@@ -1444,8 +1445,8 @@ export default function Index() {
 
 	return <>
 		<Head>
-			<meta name='apple-mobile-web-app-status-bar-style' content='black-translucent' />
-			<meta name='theme-color' content='#171D33' />
+			<NoScroll />
+			<StatusBarOverscrollColor />
 			<link rel='manifest' href='/editor/manifest.json' />
 
 			<link rel='apple-touch-icon' sizes='512x512' href='/img/icon-editor-ios-512x512.png' />
@@ -1461,23 +1462,6 @@ export default function Index() {
 
 			<script src='/mediainfo/mediainfo.min.js' />
 		</Head>
-		<style
-			children='
-			html, body {
-				position: fixed;
-				overflow: hidden;
-				width: 100vw;
-				height: 100vh;
-			}
-		'
-		/>
-		<style
-			children='
-			body {
-				background-color: var(--c300);
-			}
-		'
-		/>
 		<div className='appGrid posabs a0'>
 			<TitleBar />
 			<SettingsPane />
diff --git a/pages/present.tsx b/pages/present.tsx
index c19a1e3..7f6fa62 100644
--- a/pages/present.tsx
+++ b/pages/present.tsx
@@ -2,6 +2,7 @@ import Button from '@material-ui/core/Button';
 import { useEffect, useState } from 'react';
 import Timecode from 'timecode-boss';
 import { FullScreenControls, MenuBarControls } from '../components/controls';
+import { NoScroll, StatusBarOverscrollColor } from '../components/pwatools';
 import Project, { arrayBufferToBase64 } from '../project';
 import timeline, { delaySlide, loopSlide, slide, speedChangeSlide } from '../timeline';
 
@@ -224,6 +225,8 @@ export default function Present() {
 	}, []);
 
 	return <div className='presentation posfix a0 h100vh'>
+		<NoScroll />
+		<StatusBarOverscrollColor color='#01010d' />
 		<div className='slideWrapper abscenterv posrel'>
 			<div className='slide posrel'>
 				<div className='innner posabs a0'>
-- 
cgit v1.2.3

