menu bar controls done soom:tm:

3 files changed, 72 insertions, 33 deletions

diff --git a/components/controls.tsx b/components/controls.tsx
index f94d25c..8e55d22 100644
--- a/components/controls.tsx
+++ b/components/controls.tsx
@@ -1,6 +1,11 @@
-import { CSSProperties, useEffect } from 'react';
+import Button from '@material-ui/core/Button';
+import { CSSProperties, useEffect, useRef } from 'react';
 import { animated, SpringRef, useSpring } from 'react-spring';
-// import { useDrag } from 'react-use-gesture';
+import { useDrag } from 'react-use-gesture';
+
+import MenuRoundedIcon from '@material-ui/icons/MenuRounded';
+import NavigateBeforeRoundedIcon from '@material-ui/icons/NavigateBeforeRounded';
+import NavigateNextRoundedIcon from '@material-ui/icons/NavigateNextRounded';
 
 interface controlsPropsType {
 	next: () => void;
@@ -22,41 +27,47 @@ interface menuBarSpringProps {
 	vertical: number;
 }
 var menuBarPosApi: SpringRef<menuBarSpringProps>;
+var mouseX = 0;
+var mouseY = 0;
+var windowWidth = typeof window !== 'undefined' ? window.innerWidth : 0;
+var windowHeight = typeof window !== 'undefined' ? window.innerHeight : 0;
+var mouseDown = false;
+var positionHistory: [number, number][] = [];
+var slopeAverage: [number, number][] = [];
+var options = {
+	margin: 48, // screen margin
+	friction: 0.2, // friction
+	edgeForce: 0.4, // force outside margin (inwards to edges)
+	centerForce: 0.4, // force inside margin (outwards to edges)
+	maxForce: 10, // limit force to not go over this value
+	doneTolerance: 0.5, // if movement per frame goes below this value the animation is considered done
+	releaseSlopeAverageCount: 3,
+};
+
 export function MenuBarControls({ next, previous, menu }: controlsPropsType) {
+	var menuBarRef = useRef(null);
 	var [menuBarSpring, api] = useSpring(() => ({
-		x: 0,
+		x: windowWidth / 2,
 		y: 0,
 		vertical: 0,
 		config: { mass: 1.6, tension: 300, friction: 20 },
 	}));
 
-	menuBarPosApi = api;
+	useDrag(({ xy: [x, y], last }) => {
+		mouseX = x;
+		mouseY = y;
+		mouseDown = true;
+		if (last) mouseDown = false;
+	}, { domTarget: menuBarRef, eventOptions: { passive: false }, threshold: 10 });
 
-	var options = {
-		margin: 48, // screen margin
-		friction: 0.2, // friction
-		edgeForce: 0.4, // force outside margin (inwards to edges)
-		centerForce: 0.4, // force inside margin (outwards to edges)
-		maxForce: 10, // limit force to not go over this value
-		doneTolerance: 0.5, // if movement per frame goes below this value the animation is considered done
-		releaseSlopeAverageCount: 3,
-	};
-
-	var positionHistory: [number, number][] = [];
-	var slopeAverage: [number, number][] = [];
+	menuBarPosApi = api;
 
 	useEffect(() => {
 		var physicsObject = {
 			velocity: [0, 0],
-			position: [0, 0],
+			position: [windowWidth / 2, windowHeight],
 		};
 
-		var mouseX = 0;
-		var mouseY = 0;
-		var windowWidth = 0;
-		var windowHeight = 0;
-		var mouseDown = false;
-
 		function draw() {
 			positionHistory.push([mouseX, mouseY]);
 			if (positionHistory.length >= options.releaseSlopeAverageCount + 1) positionHistory.shift();
@@ -169,21 +180,20 @@ export function MenuBarControls({ next, previous, menu }: controlsPropsType) {
 			requestAnimationFrame(draw);
 		}
 		draw();
+	}, []);
 
+	useEffect(() => {
 		function onresize() {
 			windowWidth = window.innerWidth;
 			windowHeight = window.innerHeight;
 		}
 		onresize();
 		window.addEventListener('resize', onresize);
-		window.addEventListener('mousemove', e => {
-			mouseX = e.clientX;
-			mouseY = e.clientY;
-			mouseDown = (e.buttons & (1 << 0)) > 0;
-		});
 	}, []);
+
 	return <div className='fullscreenControls posabs a0'>
 		<animated.div
+			ref={menuBarRef}
 			className='menuBar'
 			style={{
 				'--x': menuBarSpring.x,
@@ -191,6 +201,11 @@ export function MenuBarControls({ next, previous, menu }: controlsPropsType) {
 				'--vertical': menuBarSpring.vertical,
 			} as CSSProperties}
 		>
+			<Button children={<MenuRoundedIcon />} onClick={menu} />
+			<div className='spacing big' />
+			<Button children={<NavigateBeforeRoundedIcon />} onClick={previous} />
+			<div className='spacing small' />
+			<Button className='big' children={<NavigateNextRoundedIcon />} onClick={next} />
 		</animated.div>
 	</div>;
 }
diff --git a/pages/present.tsx b/pages/present.tsx
index 2cb8e98..c19a1e3 100644
--- a/pages/present.tsx
+++ b/pages/present.tsx
@@ -231,7 +231,7 @@ export default function Present() {
 				</div>
 			</div>
 		</div>
-		<MenuBarControls
+		<Controls
 			next={() => {
 				player.next();
 				player.player.play();
diff --git a/styles/presentation.css b/styles/presentation.css
index 75f7776..ccac8bf 100644
--- a/styles/presentation.css
+++ b/styles/presentation.css
@@ -79,14 +79,38 @@
 
 .menuBar {
 	position: absolute;
-	width: 200px;
-	height: 50px;
-	background-color: #ffff00;
+	padding: 8px;
+	background-color: var(--c300);
+	border-radius: 16px;
+	white-space: nowrap;
+	box-shadow: 0px 12px 16px 0px rgba(0, 0, 0, 0.25);
 
 	top: calc(var(--y) * 1px);
 	left: calc(var(--x) * 1px);
 
 	transform: translate(-50%, -50%) rotate(calc(var(--vertical) * 90deg));
-	pointer-events: none;
 }
 
+.menuBar .MuiButton-root .MuiButton-label {
+	transform: rotate(calc(var(--vertical) * -90deg))
+}
+
+.menuBar .MuiButton-root:hover { background-color: var(--c400); }
+.menuBar .MuiButton-root {
+	background-color: var(--c400);
+	padding: 8px;
+	border-radius: 8px !important;
+	overflow: hidden;
+	color: var(--fg);
+	min-width: 0;
+}
+
+.menuBar .MuiButton-root.big {
+	background-color: var(--blue);
+	width: 80px;
+}
+
+.menuBar .spacing { display: inline-block; }
+.menuBar .spacing.big { width: 16px; }
+.menuBar .spacing.small { width: 8px; }
+