New: Add support for left/right arrows on the movie details to navigate through movies

New: Add support for ctrl+home and ctrl+end to jump to the top and bottom of the movie index
New: Add redirect to previous movie instead of index when deleting one

frontend/src/Movie/Delete/DeleteMovieModal.js

@@ -8,6 +8,7 @@ function DeleteMovieModal(props) {
   const {
     isOpen,
     onModalClose,
+    previousMovie,
     ...otherProps
   } = props;
 
@@ -20,6 +21,7 @@ function DeleteMovieModal(props) {
       <DeleteMovieModalContentConnector
         {...otherProps}
         onModalClose={onModalClose}
+        previousMovie={previousMovie}
       />
     </Modal>
   );
@@ -27,7 +29,8 @@ function DeleteMovieModal(props) {
 
 DeleteMovieModal.propTypes = {
   isOpen: PropTypes.bool.isRequired,
-  onModalClose: PropTypes.func.isRequired
+  onModalClose: PropTypes.func.isRequired,
+  previousMovie: PropTypes.string
 };
 
 export default DeleteMovieModal;

frontend/src/Movie/Delete/DeleteMovieModalContentConnector.js

@@ -1,3 +1,4 @@
+import { push } from 'connected-react-router';
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
@@ -16,7 +17,8 @@ function createMapStateToProps() {
 }
 
 const mapDispatchToProps = {
-  deleteMovie
+  deleteMovie,
+  push
 };
 
 class DeleteMovieModalContentConnector extends Component {
@@ -32,6 +34,10 @@ class DeleteMovieModalContentConnector extends Component {
     });
 
     this.props.onModalClose(true);
+
+    if (this.props.previousMovie) {
+      this.props.push(this.props.previousMovie);
+    }
   }
 
   //
@@ -50,7 +56,9 @@ class DeleteMovieModalContentConnector extends Component {
 DeleteMovieModalContentConnector.propTypes = {
   movieId: PropTypes.number.isRequired,
   onModalClose: PropTypes.func.isRequired,
-  deleteMovie: PropTypes.func.isRequired
+  deleteMovie: PropTypes.func.isRequired,
+  push: PropTypes.func.isRequired,
+  previousMovie: PropTypes.string
 };
 
 export default connect(createMapStateToProps, mapDispatchToProps)(DeleteMovieModalContentConnector);

frontend/src/Movie/Details/MovieDetails.js

@@ -30,6 +30,7 @@ import ExtraFileTable from 'MovieFile/Extras/ExtraFileTable';
 import OrganizePreviewModalConnector from 'Organize/OrganizePreviewModalConnector';
 import QualityProfileNameConnector from 'Settings/Profiles/Quality/QualityProfileNameConnector';
 import fonts from 'Styles/Variables/fonts';
+import * as keyCodes from 'Utilities/Constants/keyCodes';
 import formatRuntime from 'Utilities/Date/formatRuntime';
 import formatBytes from 'Utilities/Number/formatBytes';
 import translate from 'Utilities/String/translate';
@@ -91,6 +92,7 @@ class MovieDetails extends Component {
     window.addEventListener('touchend', this.onTouchEnd);
     window.addEventListener('touchcancel', this.onTouchCancel);
     window.addEventListener('touchmove', this.onTouchMove);
+    window.addEventListener('keyup', this.onKeyUp);
   }
 
   componentWillUnmount() {
@@ -173,6 +175,15 @@ class MovieDetails extends Component {
     this.setState({ titleWidth: width });
   }
 
+  onKeyUp = (event) => {
+    if (event.keyCode === keyCodes.LEFT_ARROW) {
+      this.props.onGoToMovie(this.props.previousMovie.titleSlug);
+    }
+    if (event.keyCode === keyCodes.RIGHT_ARROW) {
+      this.props.onGoToMovie(this.props.nextMovie.titleSlug);
+    }
+  }
+
   onTouchStart = (event) => {
     const touches = event.touches;
     const touchStart = touches[0].pageX;
@@ -716,6 +727,7 @@ class MovieDetails extends Component {
             isOpen={isDeleteMovieModalOpen}
             movieId={id}
             onModalClose={this.onDeleteMovieModalClose}
+            previousMovie={`/movie/${previousMovie.titleSlug}`}
           />
 
           <InteractiveImportModal

frontend/src/Movie/Index/MovieIndex.js

@@ -16,6 +16,7 @@ import InteractiveImportModal from 'InteractiveImport/InteractiveImportModal';
 import MovieEditorFooter from 'Movie/Editor/MovieEditorFooter.js';
 import OrganizeMovieModal from 'Movie/Editor/Organize/OrganizeMovieModal';
 import NoMovie from 'Movie/NoMovie';
+import * as keyCodes from 'Utilities/Constants/keyCodes';
 import getErrorMessage from 'Utilities/Object/getErrorMessage';
 import hasDifferentItemsOrOrder from 'Utilities/Object/hasDifferentItemsOrOrder';
 import translate from 'Utilities/String/translate';
@@ -75,6 +76,8 @@ class MovieIndex extends Component {
   componentDidMount() {
     this.setJumpBarItems();
     this.setSelectedState();
+
+    window.addEventListener('keyup', this.onKeyUp);
   }
 
   componentDidUpdate(prevProps) {
@@ -241,6 +244,18 @@ class MovieIndex extends Component {
     this.setState({ jumpToCharacter });
   }
 
+  onKeyUp = (event) => {
+    const jumpBarItems = this.state.jumpBarItems.order;
+    if (event.path.length === 4) {
+      if (event.keyCode === keyCodes.HOME && event.ctrlKey) {
+        this.setState({ jumpToCharacter: jumpBarItems[0] });
+      }
+      if (event.keyCode === keyCodes.END && event.ctrlKey) {
+        this.setState({ jumpToCharacter: jumpBarItems[jumpBarItems.length - 1] });
+      }
+    }
+  }
+
   onSelectAllChange = ({ value }) => {
     this.setState(selectAll(this.state.selectedState, value));
   }