diff --git a/package.json b/package.json index fb43222..48b0094 100644 --- a/package.json +++ b/package.json @@ -45,7 +45,7 @@ "react-scripts": "5.0.0", "sass": "^1.49.9", "styled-components": "^5.3.3", - "tubeyou-components": "^0.0.14", + "tubeyou-components": "^0.6.1", "typescript": "^4.4.2", "web-vitals": "^2.1.0" }, diff --git a/src/home/Home.tsx b/src/home/Home.tsx index dff4668..86479d3 100644 --- a/src/home/Home.tsx +++ b/src/home/Home.tsx @@ -10,6 +10,7 @@ import { A, Sidebar, Modal, + Switch, } from "tubeyou-components"; import { ThemeContext } from "tubeyou-components/dist/context"; import { themes } from "tubeyou-components/dist/constants"; @@ -17,6 +18,7 @@ import { useDarkMode, useResizeObserver, useEventListener, + useLocalStorage, } from "tubeyou-components/dist/hooks"; import { TyIcon, EmailIcon } from "tubeyou-components/dist/icons"; import { Grid, IconSize } from "tubeyou-components/dist/utils"; @@ -62,6 +64,10 @@ const Home = () => { const [youtubeID, setYoutubeID] = useState(null); const [darkModeEnabled, setDarkModeEnabled] = useDarkMode(themes.dark); const [shortcutsModal, setShortcutsModal] = useState(false); + const [shortcutsEnabled, setShortcutsEnabled] = useLocalStorage( + "tubeyou-shortcuts", + true + ); const [mainGrid, setMainGrid] = useState({}); const [gridPosition, setGridPosition] = useState(homeGridItems); @@ -76,16 +82,20 @@ const Home = () => { }); const holdStartListener = useCallback(() => { - holdTime = Date.now(); - }, []); + if (shortcutsEnabled) { + holdTime = Date.now(); + } + }, [shortcutsEnabled]); const holdEndListener = useCallback(async () => { - holdTime = Date.now() - holdTime; - if (holdTime >= MIN_MOUSE_HOLD_TIME) { - const clipboard = await navigator.clipboard.readText(); - setYtLink(clipboard); + if (shortcutsEnabled) { + holdTime = Date.now() - holdTime; + if (holdTime >= MIN_MOUSE_HOLD_TIME) { + const clipboard = await navigator.clipboard.readText(); + setYtLink(clipboard); + } + holdTime = 0; } - holdTime = 0; - }, []); + }, [shortcutsEnabled]); useEventListener("touchstart", holdStartListener, document.body); useEventListener("touchend", holdEndListener, document.body); @@ -95,7 +105,7 @@ const Home = () => { useEventListener( "keydown", - (e) => e.keyCode === 27 && setShortcutsModal(false), + (e) => shortcutsEnabled && e.keyCode === 27 && setShortcutsModal(false), document.body ); @@ -140,6 +150,12 @@ const Home = () => { {MIN_MOUSE_HOLD_TIME} milliseconds to paste the last shit you copied
  • Press `ESC` or click the logo again to close this modal
  • + setShortcutsEnabled((prev: boolean) => !prev)} + > + Shortcuts are {shortcutsEnabled ? "enabled" : "disabled"} +