diff options
| -rw-r--r-- | components/controls.tsx | 71 | ||||
| -rw-r--r-- | pages/present.tsx | 2 | ||||
| -rw-r--r-- | styles/presentation.css | 32 |
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; } + |