diff --git a/src/pages/Discover/DiscoverPage.tsx b/src/pages/Discover/DiscoverPage.tsx index e6cb860..ba409aa 100644 --- a/src/pages/Discover/DiscoverPage.tsx +++ b/src/pages/Discover/DiscoverPage.tsx @@ -29,6 +29,7 @@ export function DiscoverPage() { (keyEvent: any) => { const isDown = keybind.match("down", keyEvent); const isUp = keybind.match("up", keyEvent); + const isCycle = keybind.match("cycle", keyEvent); const isSelect = keybind.match("select", keyEvent); if (isSelect) { @@ -42,10 +43,12 @@ export function DiscoverPage() { const filteredPodcasts = discoverStore.filteredPodcasts(); if (filteredPodcasts.length === 0) return; - if (isDown && showIndex() < filteredPodcasts.length - 1) { - setShowIndex(showIndex() + 1); - } else if (isUp && showIndex() > 0) { - setShowIndex(showIndex() - 1); + if (isDown) { + setShowIndex((i) => (i + 1) % filteredPodcasts.length); + } else if (isUp) { + setShowIndex((i) => (i - 1 + filteredPodcasts.length) % filteredPodcasts.length); + } else if (isCycle) { + setShowIndex((i) => (i + 1) % filteredPodcasts.length); } }, { release: false }, diff --git a/src/pages/Feed/FeedPage.tsx b/src/pages/Feed/FeedPage.tsx index 91455e7..2badd7e 100644 --- a/src/pages/Feed/FeedPage.tsx +++ b/src/pages/Feed/FeedPage.tsx @@ -39,6 +39,7 @@ export function FeedPage() { (keyEvent: any) => { const isDown = keybind.match("down", keyEvent); const isUp = keybind.match("up", keyEvent); + const isCycle = keybind.match("cycle", keyEvent); const isSelect = keybind.match("select", keyEvent); if (isSelect) { @@ -52,10 +53,12 @@ export function FeedPage() { const episodes = allEpisodes(); if (episodes.length === 0) return; - if (isDown && focusedIndex() < episodes.length - 1) { - setFocusedIndex(focusedIndex() + 1); - } else if (isUp && focusedIndex() > 0) { - setFocusedIndex(focusedIndex() - 1); + if (isDown) { + setFocusedIndex((i) => (i + 1) % episodes.length); + } else if (isUp) { + setFocusedIndex((i) => (i - 1 + episodes.length) % episodes.length); + } else if (isCycle) { + setFocusedIndex((i) => (i + 1) % episodes.length); } }, { release: false }, diff --git a/src/pages/MyShows/MyShowsPage.tsx b/src/pages/MyShows/MyShowsPage.tsx index cc2bb14..7a983bf 100644 --- a/src/pages/MyShows/MyShowsPage.tsx +++ b/src/pages/MyShows/MyShowsPage.tsx @@ -40,6 +40,7 @@ export function MyShowsPage() { (keyEvent: any) => { const isDown = keybind.match("down", keyEvent); const isUp = keybind.match("up", keyEvent); + const isCycle = keybind.match("cycle", keyEvent); const isSelect = keybind.match("select", keyEvent); const shows = feedStore.getFilteredFeeds(); @@ -57,18 +58,22 @@ export function MyShowsPage() { } if (shows.length > 0) { - if (isDown && showIndex() < shows.length - 1) { - setShowIndex(showIndex() + 1); - } else if (isUp && showIndex() > 0) { - setShowIndex(showIndex() - 1); + if (isDown) { + setShowIndex((i) => (i + 1) % shows.length); + } else if (isUp) { + setShowIndex((i) => (i - 1 + shows.length) % shows.length); + } else if (isCycle) { + setShowIndex((i) => (i + 1) % shows.length); } } if (episodesList.length > 0) { - if (isDown && episodeIndex() < episodesList.length - 1) { - setEpisodeIndex(episodeIndex() + 1); - } else if (isUp && episodeIndex() > 0) { - setEpisodeIndex(episodeIndex() - 1); + if (isDown) { + setEpisodeIndex((i) => (i + 1) % episodesList.length); + } else if (isUp) { + setEpisodeIndex((i) => (i - 1 + episodesList.length) % episodesList.length); + } else if (isCycle) { + setEpisodeIndex((i) => (i + 1) % episodesList.length); } } }, diff --git a/src/pages/Search/SearchPage.tsx b/src/pages/Search/SearchPage.tsx index ba615d3..fd6d14e 100644 --- a/src/pages/Search/SearchPage.tsx +++ b/src/pages/Search/SearchPage.tsx @@ -34,6 +34,7 @@ export function SearchPage() { (keyEvent: any) => { const isDown = keybind.match("down", keyEvent); const isUp = keybind.match("up", keyEvent); + const isCycle = keybind.match("cycle", keyEvent); const isSelect = keybind.match("select", keyEvent); if (isSelect) { @@ -47,10 +48,12 @@ export function SearchPage() { const results = searchStore.results(); if (results.length === 0) return; - if (isDown && resultIndex() < results.length - 1) { - setResultIndex(resultIndex() + 1); - } else if (isUp && resultIndex() > 0) { - setResultIndex(resultIndex() - 1); + if (isDown) { + setResultIndex((i) => (i + 1) % results.length); + } else if (isUp) { + setResultIndex((i) => (i - 1 + results.length) % results.length); + } else if (isCycle) { + setResultIndex((i) => (i + 1) % results.length); } }, { release: false }, diff --git a/src/pages/Settings/SettingsPage.tsx b/src/pages/Settings/SettingsPage.tsx index e7cbfa0..4a01730 100644 --- a/src/pages/Settings/SettingsPage.tsx +++ b/src/pages/Settings/SettingsPage.tsx @@ -35,11 +35,15 @@ export function SettingsPage() { return nav.activeDepth() === depth; }; + // Helper function to get the current depth as a number + const currentDepth = () => nav.activeDepth() as number; + onMount(() => { useKeyboard( (keyEvent: any) => { const isDown = keybind.match("down", keyEvent); const isUp = keybind.match("up", keyEvent); + const isCycle = keybind.match("cycle", keyEvent); const isSelect = keybind.match("select", keyEvent); if (isSelect) { @@ -51,7 +55,11 @@ export function SettingsPage() { ? (nav.activeDepth() % SettingsPaneCount) + 1 : (nav.activeDepth() - 2 + SettingsPaneCount) % SettingsPaneCount + 1; - nav.setActiveDepth(nextDepth); + if (isCycle) { + nav.setActiveDepth((nav.activeDepth() % SettingsPaneCount) + 1); + } else { + nav.setActiveDepth(nextDepth); + } }, { release: false }, ); @@ -67,13 +75,13 @@ export function SettingsPage() { borderColor={theme.border} padding={0} backgroundColor={ - nav.activeDepth === section.id ? theme.primary : undefined + currentDepth() === section.id ? theme.primary : undefined } onMouseDown={() => nav.setActiveDepth(section.id)} > [{index() + 1}] {section.label}