aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--components/pwatools.tsx26
-rw-r--r--pages/editor.tsx22
-rw-r--r--pages/present.tsx3
3 files changed, 32 insertions, 19 deletions
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'>