From db7e60f2474a96bea148b0a337f6ca4e4e67a907 Mon Sep 17 00:00:00 2001 From: cv <34649812+cpvalente@users.noreply.github.com> Date: Tue, 16 Nov 2021 22:23:01 +0100 Subject: [PATCH] fix: replace library with code --- client/src/App.jsx | 26 +++-- client/src/common/components/nav/NavLogo.jsx | 27 +++-- .../src/features/editors/list/EventList.jsx | 106 +++++++++++++----- server/package.json | 2 +- 4 files changed, 111 insertions(+), 50 deletions(-) diff --git a/client/src/App.jsx b/client/src/App.jsx index 9e52605cf..6899e99a7 100644 --- a/client/src/App.jsx +++ b/client/src/App.jsx @@ -1,10 +1,9 @@ -import { lazy, Suspense, useEffect } from 'react'; +import { lazy, Suspense, useCallback, useEffect } from 'react'; import { Route, Switch } from 'react-router-dom'; import './App.css'; import { QueryClient, QueryClientProvider } from 'react-query'; import SocketProvider from 'app/context/socketContext'; import withSocket from 'features/viewers/ViewWrapper'; -import tinykeys from 'tinykeys'; const Editor = lazy(() => import('features/editors/Editor')); const PresenterView = lazy(() => @@ -37,21 +36,30 @@ const SLowerThird = withSocket(Lower); const SPip = withSocket(Pip); function App() { - useEffect(() => { - let unsubscribe = tinykeys(window, { - 'Alt+t': () => { + // Handle keyboard shortcuts + const handleKeyPress = useCallback((e) => { + // check if the alt key is pressed + if (e.altKey) { + if (e.key === 't' || e.key === 'T') { // if we are in electron if (window.process?.type === undefined) return; if (window.process.type === 'renderer') { // ask to see debug window.ipcRenderer.send('set-window', 'show-dev'); } - }, - }); + } + } + }, []); + + useEffect(() => { + // attach the event listener + document.addEventListener('keydown', handleKeyPress); + + // remove the event listener return () => { - unsubscribe(); + document.removeEventListener('keydown', handleKeyPress); }; - }); + }, [handleKeyPress]); return ( diff --git a/client/src/common/components/nav/NavLogo.jsx b/client/src/common/components/nav/NavLogo.jsx index 754061ee6..7d0ca6483 100644 --- a/client/src/common/components/nav/NavLogo.jsx +++ b/client/src/common/components/nav/NavLogo.jsx @@ -1,8 +1,7 @@ import { Link, Redirect } from 'react-router-dom'; import { Image } from '@chakra-ui/react'; import { AnimatePresence, motion } from 'framer-motion'; -import { useState, useEffect } from 'react'; -import tinykeys from 'tinykeys'; +import { useState, useEffect, useCallback } from 'react'; import navlogo from 'assets/images/logos/LOGO-72.png'; import style from './NavLogo.module.css'; @@ -14,17 +13,23 @@ export default function NavLogo() { }; // Handle keyboard shortcuts - useEffect(() => { - let unsubscribe = tinykeys(window, { - Space: () => { - setShowNav((s) => !s); - }, - }); - return () => { - unsubscribe(); - }; + const handleKeyPress = useCallback((e) => { + // Space bar + if (e.keyCode === 32) { + setShowNav((s) => !s); + } }, []); + useEffect(() => { + // attach the event listener + document.addEventListener('keydown', handleKeyPress); + + // remove the event listener + return () => { + document.removeEventListener('keydown', handleKeyPress); + }; + }, [handleKeyPress]); + return ( { + // Check if the alt key is pressed + if (e.altKey) { + // Arrow down + if (e.keyCode === 40) { + if (cursor == null) setCursor(0); + else if (cursor < events.length - 1) setCursor(cursor + 1); + } + // Arrow up + if (e.keyCode === 38) { + if (cursor == null) setCursor(0); + else if (cursor > 0) setCursor(cursor - 1); + } + // E + if (e.key === 'e' || e.key === 'E') { + e.preventDefault(); + if (cursor == null) return; + eventsHandler('add', { type: 'event', order: cursor + 1 }); + } + // D + if (e.key === 'd' || e.key === 'D') { + e.preventDefault(); + if (cursor == null) return; + eventsHandler('add', { type: 'delay', order: cursor + 1 }); + } + // B + if (e.key === 'b' || e.key === 'B') { + e.preventDefault(); + if (cursor == null) return; + eventsHandler('add', { type: 'block', order: cursor + 1 }); + } + } + }, + [cursor, events, eventsHandler] + ); + useEffect(() => { - let unsubscribe = tinykeys(window, { - 'Alt+ArrowDown': () => { - if (cursor == null) setCursor(0); - else if (cursor < events.length - 1) setCursor(cursor + 1); - }, - 'Alt+ArrowUp': () => { - if (cursor == null) setCursor(0); - else if (cursor > 0) setCursor(cursor - 1); - }, - 'Alt+KeyE': (event) => { - event.preventDefault(); - if (cursor == null) return; - eventsHandler('add', { type: 'event', order: cursor + 1 }); - }, - 'Alt+KeyD': (event) => { - event.preventDefault(); - if (cursor == null) return; - eventsHandler('add', { type: 'delay', order: cursor + 1 }); - }, - 'Alt+KeyB': (event) => { - event.preventDefault(); - if (cursor == null) return; - eventsHandler('add', { type: 'block', order: cursor + 1 }); - }, - }); + // attach the event listener + document.addEventListener('keydown', handleKeyPress); + if (cursor > events.length - 1) setCursor(events.length - 1); + + // remove the event listener return () => { - unsubscribe(); + document.removeEventListener('keydown', handleKeyPress); }; - }, [cursor, events, eventsHandler]); + }, [handleKeyPress, cursor, events]); + + // useEffect(() => { + // let unsubscribe = tinykeys(window, { + // 'Alt+ArrowDown': () => { + // if (cursor == null) setCursor(0); + // else if (cursor < events.length - 1) setCursor(cursor + 1); + // }, + // 'Alt+ArrowUp': () => { + // if (cursor == null) setCursor(0); + // else if (cursor > 0) setCursor(cursor - 1); + // }, + // 'Alt+KeyE': (event) => { + // event.preventDefault(); + // if (cursor == null) return; + // eventsHandler('add', { type: 'event', order: cursor + 1 }); + // }, + // 'Alt+KeyD': (event) => { + // event.preventDefault(); + // if (cursor == null) return; + // eventsHandler('add', { type: 'delay', order: cursor + 1 }); + // }, + // 'Alt+KeyB': (event) => { + // event.preventDefault(); + // if (cursor == null) return; + // eventsHandler('add', { type: 'block', order: cursor + 1 }); + // }, + // }); + // if (cursor > events.length - 1) setCursor(events.length - 1); + // return () => { + // unsubscribe(); + // }; + // }, [cursor, events, eventsHandler]); // handle incoming messages useEffect(() => { diff --git a/server/package.json b/server/package.json index cfebc9a93..f1b62729e 100644 --- a/server/package.json +++ b/server/package.json @@ -1,6 +1,6 @@ { "name": "ontime", - "version": "0.3.0", + "version": "0.3.1", "author": "Carlos Valente", "description": "Time keeping for live events", "repository": "https://github.com/cpvalente/ontime",