diff --git a/CHANGELOG.md b/CHANGELOG.md index 3cf61cd1a..49180440f 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -8,6 +8,8 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/). ### Added +- Desktop: Enable 'Alt+Left/Right' for history navigation _community pr!_ ([#5203](https://github.com/lbryio/lbry-desktop/pull/5203)) + ### Changed ### Fixed diff --git a/ui/component/app/view.jsx b/ui/component/app/view.jsx index 9d01f23bb..8908c9f0f 100644 --- a/ui/component/app/view.jsx +++ b/ui/component/app/view.jsx @@ -22,6 +22,7 @@ import Spinner from 'component/spinner'; import SyncFatalError from 'component/syncFatalError'; // @if TARGET='app' import useZoom from 'effects/use-zoom'; +import useHistoryNav from 'effects/use-history-nav'; // @endif // @if TARGET='web' import OpenInAppLink from 'web/component/openInAppLink'; @@ -192,6 +193,11 @@ function App(props: Props) { useZoom(); // @endif + // Enable 'Alt + Left/Right' for history navigation on Desktop. + // @if TARGET='app' + useHistoryNav(history); + // @endif + useEffect(() => { if (referredRewardAvailable && sanitizedReferrerParam && isRewardApproved) { setReferrer(sanitizedReferrerParam, true); diff --git a/ui/effects/use-history-nav.js b/ui/effects/use-history-nav.js new file mode 100644 index 000000000..aa82b4077 --- /dev/null +++ b/ui/effects/use-history-nav.js @@ -0,0 +1,25 @@ +import { useEffect } from 'react'; + +export default function useHistoryNav(history) { + useEffect(() => { + const handleKeyPress = e => { + if ((e.metaKey || e.altKey) && !e.ctrlKey && !e.shiftKey) { + switch (e.code) { + case 'ArrowLeft': + e.preventDefault(); + history.goBack(); + break; + case 'ArrowRight': + e.preventDefault(); + history.goForward(); + break; + default: + // Do nothing + break; + } + } + }; + window.addEventListener('keydown', handleKeyPress); + return () => window.removeEventListener('keydown', handleKeyPress); + }, []); +}