fix: replace library with code

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 (
     <SocketProvider>

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 (
     <motion.div
       initial={{ opacity: 0.5 }}

client/src/features/editors/list/EventList.jsx

@@ -1,7 +1,6 @@
 import style from './List.module.css';
-import { createRef, useEffect, useMemo, useState } from 'react';
+import { createRef, useCallback, useEffect, useMemo, useState } from 'react';
 import { useSocket } from 'app/context/socketContext';
-import tinykeys from 'tinykeys';
 import Empty from 'common/state/Empty';
 import EventListItem from './EventListItem';
 import { DragDropContext, Droppable } from 'react-beautiful-dnd';
@@ -19,37 +18,86 @@ export default function EventList(props) {
   const cursorRef = createRef();
 
   // Handle keyboard shortcuts
+  const handleKeyPress = useCallback(
+    (e) => {
+      // 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(() => {

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",