aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorlonkaars <loek@pipeframe.xyz>2021-07-27 19:27:47 +0200
committerlonkaars <loek@pipeframe.xyz>2021-07-27 19:27:47 +0200
commit88bee339d29b2e318fb2ddc3baeaa4ff8c0764a7 (patch)
tree5002ce64d4c52361fb30ae2011cb6a3e3bd47386
parente44fc7159969c5eef12266922c5bbb9a2a3343c7 (diff)
menu bar controls done soom:tm:
-rw-r--r--components/controls.tsx71
-rw-r--r--pages/present.tsx2
-rw-r--r--styles/presentation.css32
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; }
+