diff options
| author | lonkaars <loek@pipeframe.xyz> | 2021-07-28 12:02:41 +0200 |
|---|---|---|
| committer | lonkaars <loek@pipeframe.xyz> | 2021-07-28 12:02:41 +0200 |
| commit | 395246903e3ce8aa6e7149365b9a1a37b1205f95 (patch) | |
| tree | 6bb72dc424ba45683499a679ce45bc39d9fadba9 | |
| parent | 4d2c9a4f7861ac2b61366bbde2284a24cb915d5c (diff) | |
added pwa utility components
| -rw-r--r-- | components/pwatools.tsx | 26 | ||||
| -rw-r--r-- | pages/editor.tsx | 22 | ||||
| -rw-r--r-- | pages/present.tsx | 3 |
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'> |