prevent excessive rerendering (more code splitting)

3 files changed, 80 insertions, 65 deletions

diff --git a/package.json b/package.json
index d5ea486..85414be 100644
--- a/package.json
+++ b/package.json
@@ -15,6 +15,7 @@
 	},
 	"dependencies": {
 		"@hookstate/core": "^3.0.8",
+		"@hookstate/untracked": "^3.0.0",
 		"@material-ui/core": "^4.11.4",
 		"@material-ui/icons": "^4.11.2",
 		"@material-ui/lab": "^4.0.0-alpha.58",
diff --git a/pages/editor.tsx b/pages/editor.tsx
index 5944cd2..c513e63 100644
--- a/pages/editor.tsx
+++ b/pages/editor.tsx
@@ -1,4 +1,4 @@
-import { createState, Downgraded, none, PluginCallbacks, State, StateValueAtRoot, useHookstate } from '@hookstate/core';
+import { createState, Downgraded, none, State, useHookstate } from '@hookstate/core';
 import { CSSProperties, ReactNode, Ref, useEffect, useRef, useState } from 'react';
 import { animated, useSpring } from 'react-spring';
 import { useDrag } from 'react-use-gesture';
@@ -1113,87 +1113,96 @@ function SettingsPane() {
 	var key = uuid();
 
 	settingsArr[0] = settingsArr[1];
-	settingsArr[1] = settings.node.attach(Downgraded).get();
-
-	return <FadeThroughTransition
-		key={key}
-		from={<div className='inner posabs a0' children={settingsArr[0]} />}
-		to={<div className='inner posabs a0' children={settingsArr[1]} />}
-		show={true}
-	/>;
+	settingsArr[1] = settings.node.attach(Downgraded).value;
+
+	return <div className='settings fullwidth-inputs posrel'>
+		<FadeThroughTransition
+			key={key}
+			from={<div className='inner posabs a0' children={settingsArr[0]} />}
+			to={<div className='inner posabs a0' children={settingsArr[1]} />}
+			show={true}
+		/>
+	</div>;
 }
 
-export default function Index() {
+function Player() {
 	var playing = useHookstate(global).timeline.playing;
+	var ready = useHookstate(global).ready;
 
 	var playerRef = useRef(null);
 	useEffect(() => {
 		player.registerPlayer(playerRef.current);
 	}, []);
 
+	return <div className='viewer'>
+		<div className={'player posrel ' + (ready.video.available.get() ? '' : 'disabled')}>
+			<div className='outer posabs abscenter'>
+				<video id='player' ref={playerRef} className='fullwidth' />
+			</div>
+		</div>
+		<div className={'controls ' + (ready.timeline.get() ? '' : 'disabled')}>
+			<div className='posabs abscenter'>
+				<Fab
+					size='small'
+					children={<SkipPreviousRoundedIcon />}
+					onClick={() => {
+						player.slide = 0;
+						player.previous();
+					}}
+				/>
+				<Fab
+					className={'playPause ' + (ready.video.playable.get() ? '' : 'disabled')}
+					size='medium'
+					onClick={() => {
+						player.next();
+						player.player.play();
+					}}
+					children={<PlaySkipIconAni />}
+					style={{ '--ani-state': playing.get() ? 'skip' : 'play' } as CSSProperties}
+				/>
+				<Fab size='small' children={<NavigateBeforeRoundedIcon />} onClick={() => player.previous()} />
+				<Fab
+					size='small'
+					children={<NavigateNextRoundedIcon />}
+					onClick={() => {
+						player.next(); // TODO: fix jank here
+						player.next();
+						player.previous();
+					}}
+				/>
+			</div>
+			<div className='posabs abscenterv r0'>
+				<Fab
+					size='small'
+					children={<FullscreenRoundedIcon />}
+					onClick={() => document.body.requestFullscreen()}
+				/>
+			</div>
+		</div>
+	</div>;
+}
+
+function TitleBar() {
+	return <AppBar position='static' color='transparent' elevation={0}>
+		<Toolbar>
+			<PressureIcon />
+			<h1>pressure</h1>
+		</Toolbar>
+	</AppBar>;
+}
+
+export default function Index() {
 	useEffect(() => {
 		var preventDefault = (e: Event) => e.preventDefault();
 		document.addEventListener('gesturestart', preventDefault);
 		document.addEventListener('gesturechange', preventDefault);
 	}, []);
 
-	var ready = useHookstate(global).ready;
-
 	return <>
 		<div className='appGrid posabs a0'>
-			<AppBar position='static' color='transparent' elevation={0}>
-				<Toolbar>
-					<PressureIcon />
-					<h1>pressure</h1>
-				</Toolbar>
-			</AppBar>
-			<div className='settings fullwidth-inputs posrel' children={<SettingsPane />} />
-			<div className='viewer'>
-				<div className={'player posrel ' + (ready.video.available.get() ? '' : 'disabled')}>
-					<div className='outer posabs abscenter'>
-						<video id='player' ref={playerRef} className='fullwidth' />
-					</div>
-				</div>
-				<div className={'controls ' + (ready.timeline.get() ? '' : 'disabled')}>
-					<div className='posabs abscenter'>
-						<Fab
-							size='small'
-							children={<SkipPreviousRoundedIcon />}
-							onClick={() => {
-								player.slide = 0;
-								player.previous();
-							}}
-						/>
-						<Fab
-							className={'playPause ' + (ready.video.playable.get() ? '' : 'disabled')}
-							size='medium'
-							onClick={() => {
-								player.next();
-								player.player.play();
-							}}
-							children={<PlaySkipIconAni />}
-							style={{ '--ani-state': playing.get() ? 'skip' : 'play' } as CSSProperties}
-						/>
-						<Fab size='small' children={<NavigateBeforeRoundedIcon />} onClick={() => player.previous()} />
-						<Fab
-							size='small'
-							children={<NavigateNextRoundedIcon />}
-							onClick={() => {
-								player.next(); // TODO: fix jank here
-								player.next();
-								player.previous();
-							}}
-						/>
-					</div>
-					<div className='posabs abscenterv r0'>
-						<Fab
-							size='small'
-							children={<FullscreenRoundedIcon />}
-							onClick={() => document.body.requestFullscreen()}
-						/>
-					</div>
-				</div>
-			</div>
+			<TitleBar />
+			<SettingsPane />
+			<Player />
 			<Tools />
 			<TimelineEditor />
 		</div>
diff --git a/yarn.lock b/yarn.lock
index 74f91f8..4c29e73 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -76,6 +76,11 @@
   resolved "https://registry.yarnpkg.com/@hookstate/core/-/core-3.0.8.tgz#d6838153d6d43c2f35cfca475c31248192564e62"
   integrity sha512-blQagGIVIbNoUiNCRrvaXqFmUe7WGMY35ok/LENfl2pcIsLBjkreYIZiaSFi83tkycwq7ZOmcQz/R1nvLKhH8w==
 
+"@hookstate/untracked@^3.0.0":
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/@hookstate/untracked/-/untracked-3.0.0.tgz#fcf5005f89a68956c994ffb4b04cc3bd25d7cbf6"
+  integrity sha512-NctZVu0fEXc+komMmEpJ4OAD77P1P4uhXnU8e2Y1l+k0P+ZCE+enTDvgg9rp2WmViD7s8XA2+lS7wTkHGargmw==
+
 "@material-ui/core@^4.11.4":
   version "4.11.4"
   resolved "https://registry.yarnpkg.com/@material-ui/core/-/core-4.11.4.tgz#4fb9fe5dec5dcf780b687e3a40cff78b2b9640a4"