From f3320efc5c14b5530f5c9a121dd67e08326c195a Mon Sep 17 00:00:00 2001 From: Carlos Valente <34649812+cpvalente@users.noreply.github.com> Date: Wed, 17 Nov 2021 22:50:54 +0100 Subject: [PATCH] Fix/ios (#43) * remove tiny keys * fix: replace library with code * cleanup * add lodash throttle add dependency to handle event throttling * Revert "add lodash throttle" This reverts commit abcbd3556bac7d0be3fc783da08c0d9a479841b0. --- client/package.json | 1 - client/src/App.jsx | 26 ++++--- client/src/common/components/nav/NavLogo.jsx | 27 ++++--- .../src/features/editors/list/EventList.jsx | 74 +++++++++++-------- client/yarn.lock | 5 -- server/package.json | 2 +- 6 files changed, 79 insertions(+), 56 deletions(-) diff --git a/client/package.json b/client/package.json index 6f73ade7e..29f0fee87 100644 --- a/client/package.json +++ b/client/package.json @@ -23,7 +23,6 @@ "react-router-dom": "^5.2.0", "react-scripts": "4.0.3", "socket.io-client": "^4.3.2", - "tinykeys": "^1.1.2", "typeface-open-sans": "^1.1.13", "web-vitals": "^1.0.1" }, 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]); // handle incoming messages useEffect(() => { diff --git a/client/yarn.lock b/client/yarn.lock index 35a6a3416..a15a4edc8 100644 --- a/client/yarn.lock +++ b/client/yarn.lock @@ -11755,11 +11755,6 @@ tiny-warning@^1.0.0, tiny-warning@^1.0.3: resolved "https://registry.yarnpkg.com/tiny-warning/-/tiny-warning-1.0.3.tgz#94a30db453df4c643d0fd566060d60a875d84754" integrity sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA== -tinykeys@^1.1.2: - version "1.1.2" - resolved "https://registry.yarnpkg.com/tinykeys/-/tinykeys-1.1.2.tgz#f9bf567d44e57166a95ac9a6c1d6408e2caa993c" - integrity sha512-BFOdq1hPKYrgx98JgnjMuv/unHXqLULfXC9suTeC7yrNFRMGjlZMO1ZL3aF1s6EIYqwkeHkLNe1R3e2F/VoG0A== - tmpl@1.0.x: version "1.0.4" resolved "https://registry.yarnpkg.com/tmpl/-/tmpl-1.0.4.tgz#23640dd7b42d00433911140820e5cf440e521dd1" 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",