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 abcbd3556b.

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

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,54 @@ 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]);
 
   // handle incoming messages
   useEffect(() => {

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"

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