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 (); @@ -128,7 +170,9 @@ class Posters extends React.PureComponent { } return ( -
+
this.move(event)} + > this.props.onClick(imdbId)} + onClick={() => this.props.selectPoster(imdbId)} />
)