diff --git a/frontend/js/components/list/posters.js b/frontend/js/components/list/posters.js
index f89a509..d205328 100644
--- a/frontend/js/components/list/posters.js
+++ b/frontend/js/components/list/posters.js
@@ -1,5 +1,6 @@
import React from "react"
+import { Map } from "immutable"
import fuzzy from "fuzzy";
import InfiniteScroll from "react-infinite-scroller";
@@ -103,7 +104,7 @@ export default class ListPosters extends React.PureComponent {
hasMore={this.state.hasMore}
loadMore={this.loadMore}
selectedImdbId={this.props.selectedImdbId}
- onClick={this.props.onClick}
+ selectPoster={this.props.onClick}
/>
);
@@ -114,6 +115,47 @@ class Posters extends React.PureComponent {
constructor(props) {
super(props);
}
+
+ move(event) {
+ // Detect which direction to go
+ const keyToDiff = Map({
+ "ArrowRight": 1,
+ "l": 1,
+ "ArrowLeft": -1,
+ "h": -1,
+ "ArrowUp": -6,
+ "k": -6,
+ "ArrowDown": 6,
+ "j": 6,
+ });
+
+ if (! keyToDiff.has(event.key) ) {
+ return;
+ }
+ var diff = keyToDiff.get(event.key);
+
+ // Don't scroll when changing poster
+ event.preventDefault();
+
+ // Get the index of the currently selected item
+ const idx = this.props.elmts.keySeq().findIndex(k => k === this.props.selectedImdbId);
+
+ var newIdx = idx + diff;
+
+ // Handle edge cases
+ if (newIdx > this.props.elmts.size -1) {
+ newIdx = this.props.elmts.size -1;
+ } else if (newIdx < 0) {
+ newIdx = 0;
+ }
+
+ // Get the imdbID of the newly selected item
+ var selectedImdb = Object.keys(this.props.elmts.toJS())[newIdx];
+
+ // Select the movie
+ this.props.selectPoster(selectedImdb);
+ }
+
render() {
if (this.props.loading) {
return (