New: Swipe left/right to navigate authors/books on mobile

frontend/src/Author/Details/AuthorDetails.css

@@ -98,10 +98,13 @@
 .authorNavigationButtons {
   position: absolute;
   right: 0;
+  z-index: 1;
   margin-top: 10px;
+  padding: 30px;
   white-space: nowrap;
 }
 
+.authorUpButton,
 .authorNavigationButton {
   composes: button from '~Components/Link/IconButton.css';
 
@@ -182,9 +185,23 @@
     padding: 20px 0;
   }
 
+  .authorNavigationButtons,
   .headerContent {
     padding: 15px;
   }
+
+  .authorNavigationButtons {
+    margin-top: 5px;
+  }
+
+  .authorNavigationButton {
+    display: none;
+  }
+
+  .title {
+    font-size: 30px;
+    line-height: 50px;
+  }
 }
 
 @media only screen and (max-width: $breakpointLarge) {

frontend/src/Author/Details/AuthorDetails.js

@@ -1,60 +1,33 @@
-import _ from 'lodash';
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { Tab, TabList, TabPanel, Tabs } from 'react-tabs';
-import TextTruncate from 'react-text-truncate';
-import AuthorPoster from 'Author/AuthorPoster';
 import DeleteAuthorModal from 'Author/Delete/DeleteAuthorModal';
 import EditAuthorModalConnector from 'Author/Edit/EditAuthorModalConnector';
 import AuthorHistoryTable from 'Author/History/AuthorHistoryTable';
 import BookFileEditorTable from 'BookFile/Editor/BookFileEditorTable';
-import HeartRating from 'Components/HeartRating';
-import Icon from 'Components/Icon';
-import Label from 'Components/Label';
 import IconButton from 'Components/Link/IconButton';
 import Link from 'Components/Link/Link';
 import LoadingIndicator from 'Components/Loading/LoadingIndicator';
-import Marquee from 'Components/Marquee';
-import Measure from 'Components/Measure';
-import MonitorToggleButton from 'Components/MonitorToggleButton';
 import PageContent from 'Components/Page/PageContent';
 import PageContentBody from 'Components/Page/PageContentBody';
 import PageToolbar from 'Components/Page/Toolbar/PageToolbar';
 import PageToolbarButton from 'Components/Page/Toolbar/PageToolbarButton';
 import PageToolbarSection from 'Components/Page/Toolbar/PageToolbarSection';
 import PageToolbarSeparator from 'Components/Page/Toolbar/PageToolbarSeparator';
-import Popover from 'Components/Tooltip/Popover';
-import Tooltip from 'Components/Tooltip/Tooltip';
-import { align, icons, kinds, sizes, tooltipPositions } from 'Helpers/Props';
+import SwipeHeaderConnector from 'Components/Swipe/SwipeHeaderConnector';
+import { align, icons } from 'Helpers/Props';
 import InteractiveSearchFilterMenuConnector from 'InteractiveSearch/InteractiveSearchFilterMenuConnector';
 import InteractiveSearchTable from 'InteractiveSearch/InteractiveSearchTable';
 import OrganizePreviewModalConnector from 'Organize/OrganizePreviewModalConnector';
 import RetagPreviewModalConnector from 'Retag/RetagPreviewModalConnector';
-import QualityProfileNameConnector from 'Settings/Profiles/Quality/QualityProfileNameConnector';
-import fonts from 'Styles/Variables/fonts';
-import formatBytes from 'Utilities/Number/formatBytes';
-import stripHtml from 'Utilities/String/stripHtml';
 import selectAll from 'Utilities/Table/selectAll';
 import toggleSelected from 'Utilities/Table/toggleSelected';
 import InteractiveImportModal from '../../InteractiveImport/InteractiveImportModal';
-import AuthorAlternateTitles from './AuthorAlternateTitles';
-import AuthorDetailsLinks from './AuthorDetailsLinks';
+import AuthorDetailsHeaderConnector from './AuthorDetailsHeaderConnector';
 import AuthorDetailsSeasonConnector from './AuthorDetailsSeasonConnector';
 import AuthorDetailsSeriesConnector from './AuthorDetailsSeriesConnector';
-import AuthorTagsConnector from './AuthorTagsConnector';
 import styles from './AuthorDetails.css';
 
-const defaultFontSize = parseInt(fonts.defaultFontSize);
-const lineHeight = parseFloat(fonts.lineHeight);
-
-function getFanartUrl(images) {
-  const fanartImage = _.find(images, { coverType: 'fanart' });
-  if (fanartImage) {
-    // Remove protocol
-    return fanartImage.url.replace(/^https?:/, '');
-  }
-}
-
 function getExpandedState(newState) {
   return {
     allExpanded: newState.allSelected,
@@ -80,9 +53,7 @@ class AuthorDetails extends Component {
       allExpanded: false,
       allCollapsed: false,
       expandedState: {},
-      selectedTabIndex: 0,
-      titleWidth: 0,
-      overviewHeight: 0
+      selectedTabIndex: 0
     };
   }
 
@@ -159,14 +130,6 @@ class AuthorDetails extends Component {
     this.setState({ selectedTabIndex: index });
   }
 
-  onTitleMeasure = ({ width }) => {
-    this.setState({ titleWidth: width });
-  }
-
-  onOverviewMeasure = ({ height }) => {
-    this.setState({ overviewHeight: height });
-  }
-
   //
   // Render
 
@@ -174,18 +137,8 @@ class AuthorDetails extends Component {
     const {
       id,
       authorName,
-      ratings,
       path,
-      statistics,
-      qualityProfileId,
       monitored,
-      status,
-      overview,
-      links,
-      images,
-      alternateTitles,
-      tags,
-      isSaving,
       isRefreshing,
       isSearching,
       isFetching,
@@ -199,16 +152,10 @@ class AuthorDetails extends Component {
       hasBookFiles,
       previousAuthor,
       nextAuthor,
-      onMonitorTogglePress,
       onRefreshPress,
       onSearchPress
     } = this.props;
 
-    const {
-      bookFileCount,
-      sizeOnDisk
-    } = statistics;
-
     const {
       isOrganizeModalOpen,
       isRetagModalOpen,
@@ -218,23 +165,9 @@ class AuthorDetails extends Component {
       allExpanded,
       allCollapsed,
       expandedState,
-      selectedTabIndex,
-      titleWidth,
-      overviewHeight
+      selectedTabIndex
     } = this.state;
 
-    const marqueeWidth = (titleWidth - 165);
-
-    const continuing = status === 'continuing';
-
-    let bookFilesCountMessage = 'No book files';
-
-    if (bookFileCount === 1) {
-      bookFilesCountMessage = '1 book file';
-    } else if (bookFileCount > 1) {
-      bookFilesCountMessage = `${bookFileCount} book files`;
-    }
-
     let expandIcon = icons.EXPAND_INDETERMINATE;
 
     if (allExpanded) {
@@ -312,240 +245,40 @@ class AuthorDetails extends Component {
         </PageToolbar>
 
         <PageContentBody innerClassName={styles.innerContentBody}>
-          <div className={styles.header}>
-            <div
-              className={styles.backdrop}
-              style={{
-                backgroundImage: `url(${getFanartUrl(images)})`
-              }}
-            >
-              <div className={styles.backdropOverlay} />
-            </div>
-
-            <div className={styles.headerContent}>
-              <AuthorPoster
-                className={styles.poster}
-                images={images}
-                size={250}
-                lazy={false}
+          <SwipeHeaderConnector
+            className={styles.header}
+            nextLink={`/author/${nextAuthor.titleSlug}`}
+            nextComponent={(width) => <AuthorDetailsHeaderConnector authorId={nextAuthor.id} width={width} />}
+            prevLink={`/author/${previousAuthor.titleSlug}`}
+            prevComponent={(width) => <AuthorDetailsHeaderConnector authorId={previousAuthor.id} width={width} />}
+            currentComponent={(width) => <AuthorDetailsHeaderConnector authorId={id} width={width} />}
+          >
+            <div className={styles.authorNavigationButtons}>
+              <IconButton
+                className={styles.authorNavigationButton}
+                name={icons.ARROW_LEFT}
+                size={30}
+                title={`Go to ${previousAuthor.authorName}`}
+                to={`/author/${previousAuthor.titleSlug}`}
               />
 
-              <div className={styles.info}>
-                <Measure
-                  onMeasure={this.onTitleMeasure}
-                  className={styles.titleRow}
-                >
-                  <div className={styles.titleContainer}>
-                    <div className={styles.toggleMonitoredContainer}>
-                      <MonitorToggleButton
-                        className={styles.monitorToggleButton}
-                        monitored={monitored}
-                        isSaving={isSaving}
-                        size={40}
-                        onPress={onMonitorTogglePress}
-                      />
-                    </div>
+              <IconButton
+                className={styles.authorUpButton}
+                name={icons.ARROW_UP}
+                size={30}
+                title={'Go to author listing'}
+                to={'/'}
+              />
 
-                    <div className={styles.title} style={{ width: marqueeWidth }}>
-                      <Marquee text={authorName} />
-                    </div>
-
-                    {
-                      !!alternateTitles.length &&
-                        <div className={styles.alternateTitlesIconContainer}>
-                          <Popover
-                            anchor={
-                              <Icon
-                                name={icons.ALTERNATE_TITLES}
-                                size={20}
-                              />
-                            }
-                            title="Alternate Titles"
-                            body={<AuthorAlternateTitles alternateTitles={alternateTitles} />}
-                            position={tooltipPositions.BOTTOM}
-                          />
-                        </div>
-                    }
-                  </div>
-
-                  <div className={styles.authorNavigationButtons}>
-                    <IconButton
-                      className={styles.authorNavigationButton}
-                      name={icons.ARROW_LEFT}
-                      size={30}
-                      title={`Go to ${previousAuthor.authorName}`}
-                      to={`/author/${previousAuthor.titleSlug}`}
-                    />
-
-                    <IconButton
-                      className={styles.authorNavigationButton}
-                      name={icons.ARROW_UP}
-                      size={30}
-                      title={'Go to author listing'}
-                      to={'/'}
-                    />
-
-                    <IconButton
-                      className={styles.authorNavigationButton}
-                      name={icons.ARROW_RIGHT}
-                      size={30}
-                      title={`Go to ${nextAuthor.authorName}`}
-                      to={`/author/${nextAuthor.titleSlug}`}
-                    />
-                  </div>
-                </Measure>
-
-                <div className={styles.details}>
-                  <div>
-                    <HeartRating
-                      rating={ratings.value}
-                      iconSize={20}
-                    />
-                  </div>
-                </div>
-
-                <div className={styles.detailsLabels}>
-                  <Label
-                    className={styles.detailsLabel}
-                    size={sizes.LARGE}
-                  >
-                    <Icon
-                      name={icons.FOLDER}
-                      size={17}
-                    />
-
-                    <span className={styles.path}>
-                      {path}
-                    </span>
-                  </Label>
-
-                  <Label
-                    className={styles.detailsLabel}
-                    title={bookFilesCountMessage}
-                    size={sizes.LARGE}
-                  >
-                    <Icon
-                      name={icons.DRIVE}
-                      size={17}
-                    />
-
-                    <span className={styles.sizeOnDisk}>
-                      {
-                        formatBytes(sizeOnDisk || 0)
-                      }
-                    </span>
-                  </Label>
-
-                  <Label
-                    className={styles.detailsLabel}
-                    title="Quality Profile"
-                    size={sizes.LARGE}
-                  >
-                    <Icon
-                      name={icons.PROFILE}
-                      size={17}
-                    />
-
-                    <span className={styles.qualityProfileName}>
-                      {
-                        <QualityProfileNameConnector
-                          qualityProfileId={qualityProfileId}
-                        />
-                      }
-                    </span>
-                  </Label>
-
-                  <Label
-                    className={styles.detailsLabel}
-                    size={sizes.LARGE}
-                  >
-                    <Icon
-                      name={monitored ? icons.MONITORED : icons.UNMONITORED}
-                      size={17}
-                    />
-
-                    <span className={styles.qualityProfileName}>
-                      {monitored ? 'Monitored' : 'Unmonitored'}
-                    </span>
-                  </Label>
-
-                  <Label
-                    className={styles.detailsLabel}
-                    title={continuing ? 'More books are expected' : 'No additional books are expected'}
-                    size={sizes.LARGE}
-                  >
-                    <Icon
-                      name={continuing ? icons.AUTHOR_CONTINUING : icons.AUTHOR_ENDED}
-                      size={17}
-                    />
-
-                    <span className={styles.qualityProfileName}>
-                      {continuing ? 'Continuing' : 'Deceased'}
-                    </span>
-                  </Label>
-
-                  <Tooltip
-                    anchor={
-                      <Label
-                        className={styles.detailsLabel}
-                        size={sizes.LARGE}
-                      >
-                        <Icon
-                          name={icons.EXTERNAL_LINK}
-                          size={17}
-                        />
-
-                        <span className={styles.links}>
-                          Links
-                        </span>
-                      </Label>
-                    }
-                    tooltip={
-                      <AuthorDetailsLinks
-                        links={links}
-                      />
-                    }
-                    kind={kinds.INVERSE}
-                    position={tooltipPositions.BOTTOM}
-                  />
-
-                  {
-                    !!tags.length &&
-                      <Tooltip
-                        anchor={
-                          <Label
-                            className={styles.detailsLabel}
-                            size={sizes.LARGE}
-                          >
-                            <Icon
-                              name={icons.TAGS}
-                              size={17}
-                            />
-
-                            <span className={styles.tags}>
-                              Tags
-                            </span>
-                          </Label>
-                        }
-                        tooltip={<AuthorTagsConnector authorId={id} />}
-                        kind={kinds.INVERSE}
-                        position={tooltipPositions.BOTTOM}
-                      />
-
-                  }
-                </div>
-                <Measure
-                  onMeasure={this.onOverviewMeasure}
-                  className={styles.overview}
-                >
-                  <TextTruncate
-                    line={Math.floor(overviewHeight / (defaultFontSize * lineHeight))}
-                    text={stripHtml(overview)}
-                  />
-                </Measure>
-              </div>
+              <IconButton
+                className={styles.authorNavigationButton}
+                name={icons.ARROW_RIGHT}
+                size={30}
+                title={`Go to ${nextAuthor.authorName}`}
+                to={`/author/${nextAuthor.titleSlug}`}
+              />
             </div>
-          </div>
+          </SwipeHeaderConnector>
 
           <div className={styles.contentContainer}>
             {
@@ -742,6 +475,7 @@ AuthorDetails.propTypes = {
   hasBookFiles: PropTypes.bool.isRequired,
   previousAuthor: PropTypes.object.isRequired,
   nextAuthor: PropTypes.object.isRequired,
+  isSmallScreen: PropTypes.bool.isRequired,
   onMonitorTogglePress: PropTypes.func.isRequired,
   onRefreshPress: PropTypes.func.isRequired,
   onSearchPress: PropTypes.func.isRequired

frontend/src/Author/Details/AuthorDetailsConnector.js

@@ -14,6 +14,7 @@ import { cancelFetchReleases, clearReleases } from 'Store/Actions/releaseActions
 import { clearSeries, fetchSeries } from 'Store/Actions/seriesActions';
 import createAllAuthorSelector from 'Store/Selectors/createAllAuthorsSelector';
 import createCommandsSelector from 'Store/Selectors/createCommandsSelector';
+import createDimensionsSelector from 'Store/Selectors/createDimensionsSelector';
 import createSortedSectionSelector from 'Store/Selectors/createSortedSectionSelector';
 import { findCommand, isCommandExecuting } from 'Utilities/Command';
 import { registerPagePopulator, unregisterPagePopulator } from 'Utilities/pagePopulator';
@@ -94,7 +95,8 @@ function createMapStateToProps() {
     selectBookFiles,
     createAllAuthorSelector(),
     createCommandsSelector(),
-    (titleSlug, books, series, bookFiles, allAuthors, commands) => {
+    createDimensionsSelector(),
+    (titleSlug, books, series, bookFiles, allAuthors, commands, dimensions) => {
       const sortedAuthor = _.orderBy(allAuthors, 'sortName');
       const authorIndex = _.findIndex(sortedAuthor, { titleSlug });
       const author = sortedAuthor[authorIndex];
@@ -176,7 +178,8 @@ function createMapStateToProps() {
         series: seriesItems,
         hasBookFiles,
         previousAuthor,
-        nextAuthor
+        nextAuthor,
+        isSmallScreen: dimensions.isSmallScreen
       };
     }
   );

frontend/src/Author/Details/AuthorDetailsHeader.js

@@ -0,0 +1,330 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import TextTruncate from 'react-text-truncate';
+import AuthorPoster from 'Author/AuthorPoster';
+import HeartRating from 'Components/HeartRating';
+import Icon from 'Components/Icon';
+import Label from 'Components/Label';
+import Marquee from 'Components/Marquee';
+import Measure from 'Components/Measure';
+import MonitorToggleButton from 'Components/MonitorToggleButton';
+import Popover from 'Components/Tooltip/Popover';
+import Tooltip from 'Components/Tooltip/Tooltip';
+import { icons, kinds, sizes, tooltipPositions } from 'Helpers/Props';
+import QualityProfileNameConnector from 'Settings/Profiles/Quality/QualityProfileNameConnector';
+import fonts from 'Styles/Variables/fonts';
+import formatBytes from 'Utilities/Number/formatBytes';
+import stripHtml from 'Utilities/String/stripHtml';
+import AuthorAlternateTitles from './AuthorAlternateTitles';
+import AuthorDetailsLinks from './AuthorDetailsLinks';
+import AuthorTagsConnector from './AuthorTagsConnector';
+import styles from './AuthorDetails.css';
+
+const defaultFontSize = parseInt(fonts.defaultFontSize);
+const lineHeight = parseFloat(fonts.lineHeight);
+
+function getFanartUrl(images) {
+  const fanartImage = images.find((x) => x.coverType === 'fanart');
+
+  if (fanartImage) {
+    // Remove protocol
+    return fanartImage.url.replace(/^https?:/, '');
+  }
+}
+
+class AuthorDetailsHeader extends Component {
+
+  //
+  // Lifecyle
+
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      overviewHeight: 0
+    };
+  }
+
+  //
+  // Listeners
+
+  onOverviewMeasure = ({ height }) => {
+    console.log(`overview measure ${height}`);
+    this.setState({ overviewHeight: height });
+  }
+  //
+  // Render
+
+  render() {
+    const {
+      id,
+      width,
+      authorName,
+      ratings,
+      path,
+      statistics,
+      qualityProfileId,
+      monitored,
+      status,
+      overview,
+      links,
+      images,
+      alternateTitles,
+      tags,
+      isSaving,
+      isSmallScreen,
+      onMonitorTogglePress
+    } = this.props;
+
+    const {
+      bookFileCount,
+      sizeOnDisk
+    } = statistics;
+
+    const {
+      overviewHeight
+    } = this.state;
+
+    const marqueeWidth = width - (isSmallScreen ? 115 : 225);
+
+    const continuing = status === 'continuing';
+
+    let bookFilesCountMessage = 'No book files';
+
+    if (bookFileCount === 1) {
+      bookFilesCountMessage = '1 book file';
+    } else if (bookFileCount > 1) {
+      bookFilesCountMessage = `${bookFileCount} book files`;
+    }
+
+    return (
+      <div className={styles.header}>
+        <div
+          className={styles.backdrop}
+          style={{
+            backgroundImage: `url(${getFanartUrl(images)})`
+          }}
+        >
+          <div className={styles.backdropOverlay} />
+        </div>
+
+        <div className={styles.headerContent}>
+          <AuthorPoster
+            className={styles.poster}
+            images={images}
+            size={250}
+            lazy={false}
+          />
+
+          <div className={styles.info}>
+            <div className={styles.titleRow}>
+              <div className={styles.titleContainer}>
+                <div className={styles.toggleMonitoredContainer}>
+                  <MonitorToggleButton
+                    className={styles.monitorToggleButton}
+                    monitored={monitored}
+                    isSaving={isSaving}
+                    size={isSmallScreen ? 30: 40}
+                    onPress={onMonitorTogglePress}
+                  />
+                </div>
+
+                <div className={styles.title} style={{ width: marqueeWidth }}>
+                  <Marquee text={authorName} />
+                </div>
+
+                {
+                  !!alternateTitles.length &&
+                    <div className={styles.alternateTitlesIconContainer}>
+                      <Popover
+                        anchor={
+                          <Icon
+                            name={icons.ALTERNATE_TITLES}
+                            size={20}
+                          />
+                        }
+                        title="Alternate Titles"
+                        body={<AuthorAlternateTitles alternateTitles={alternateTitles} />}
+                        position={tooltipPositions.BOTTOM}
+                      />
+                    </div>
+                }
+              </div>
+            </div>
+
+            <div className={styles.details}>
+              <div>
+                <HeartRating
+                  rating={ratings.value}
+                  iconSize={20}
+                />
+              </div>
+            </div>
+
+            <div className={styles.detailsLabels}>
+              <Label
+                className={styles.detailsLabel}
+                size={sizes.LARGE}
+              >
+                <Icon
+                  name={icons.FOLDER}
+                  size={17}
+                />
+
+                <span className={styles.path}>
+                  {path}
+                </span>
+              </Label>
+
+              <Label
+                className={styles.detailsLabel}
+                title={bookFilesCountMessage}
+                size={sizes.LARGE}
+              >
+                <Icon
+                  name={icons.DRIVE}
+                  size={17}
+                />
+
+                <span className={styles.sizeOnDisk}>
+                  {
+                    formatBytes(sizeOnDisk || 0)
+                  }
+                </span>
+              </Label>
+
+              <Label
+                className={styles.detailsLabel}
+                title="Quality Profile"
+                size={sizes.LARGE}
+              >
+                <Icon
+                  name={icons.PROFILE}
+                  size={17}
+                />
+
+                <span className={styles.qualityProfileName}>
+                  {
+                    <QualityProfileNameConnector
+                      qualityProfileId={qualityProfileId}
+                    />
+                  }
+                </span>
+              </Label>
+
+              <Label
+                className={styles.detailsLabel}
+                size={sizes.LARGE}
+              >
+                <Icon
+                  name={monitored ? icons.MONITORED : icons.UNMONITORED}
+                  size={17}
+                />
+
+                <span className={styles.qualityProfileName}>
+                  {monitored ? 'Monitored' : 'Unmonitored'}
+                </span>
+              </Label>
+
+              <Label
+                className={styles.detailsLabel}
+                title={continuing ? 'More books are expected' : 'No additional books are expected'}
+                size={sizes.LARGE}
+              >
+                <Icon
+                  name={continuing ? icons.AUTHOR_CONTINUING : icons.AUTHOR_ENDED}
+                  size={17}
+                />
+
+                <span className={styles.qualityProfileName}>
+                  {continuing ? 'Continuing' : 'Deceased'}
+                </span>
+              </Label>
+
+              <Tooltip
+                anchor={
+                  <Label
+                    className={styles.detailsLabel}
+                    size={sizes.LARGE}
+                  >
+                    <Icon
+                      name={icons.EXTERNAL_LINK}
+                      size={17}
+                    />
+
+                    <span className={styles.links}>
+                      Links
+                    </span>
+                  </Label>
+                }
+                tooltip={
+                  <AuthorDetailsLinks
+                    links={links}
+                  />
+                }
+                kind={kinds.INVERSE}
+                position={tooltipPositions.BOTTOM}
+              />
+
+              {
+                !!tags.length &&
+                  <Tooltip
+                    anchor={
+                      <Label
+                        className={styles.detailsLabel}
+                        size={sizes.LARGE}
+                      >
+                        <Icon
+                          name={icons.TAGS}
+                          size={17}
+                        />
+
+                        <span className={styles.tags}>
+                          Tags
+                        </span>
+                      </Label>
+                    }
+                    tooltip={<AuthorTagsConnector authorId={id} />}
+                    kind={kinds.INVERSE}
+                    position={tooltipPositions.BOTTOM}
+                  />
+
+              }
+            </div>
+            <Measure
+              onMeasure={this.onOverviewMeasure}
+              className={styles.overview}
+            >
+              <TextTruncate
+                line={Math.floor(overviewHeight / (defaultFontSize * lineHeight))}
+                text={stripHtml(overview)}
+              />
+            </Measure>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+AuthorDetailsHeader.propTypes = {
+  id: PropTypes.number.isRequired,
+  width: PropTypes.number.isRequired,
+  authorName: PropTypes.string.isRequired,
+  ratings: PropTypes.object.isRequired,
+  path: PropTypes.string.isRequired,
+  statistics: PropTypes.object.isRequired,
+  qualityProfileId: PropTypes.number.isRequired,
+  monitored: PropTypes.bool.isRequired,
+  status: PropTypes.string.isRequired,
+  overview: PropTypes.string,
+  links: PropTypes.arrayOf(PropTypes.object).isRequired,
+  images: PropTypes.arrayOf(PropTypes.object).isRequired,
+  alternateTitles: PropTypes.arrayOf(PropTypes.string).isRequired,
+  tags: PropTypes.arrayOf(PropTypes.number).isRequired,
+  isSaving: PropTypes.bool.isRequired,
+  isSmallScreen: PropTypes.bool.isRequired,
+  onMonitorTogglePress: PropTypes.func.isRequired
+};
+
+export default AuthorDetailsHeader;

frontend/src/Author/Details/AuthorDetailsHeaderConnector.js

@@ -0,0 +1,71 @@
+/* eslint max-params: 0 */
+import _ from 'lodash';
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import { createSelector } from 'reselect';
+import { toggleAuthorMonitored } from 'Store/Actions/authorActions';
+import createAuthorSelector from 'Store/Selectors/createAuthorSelector';
+import createDimensionsSelector from 'Store/Selectors/createDimensionsSelector';
+import AuthorDetailsHeader from './AuthorDetailsHeader';
+
+function createMapStateToProps() {
+  return createSelector(
+    (state) => state.authors,
+    createAuthorSelector(),
+    createDimensionsSelector(),
+    (authors, author, dimensions) => {
+      const alternateTitles = _.reduce(author.alternateTitles, (acc, alternateTitle) => {
+        if ((alternateTitle.seasonNumber === -1 || alternateTitle.seasonNumber === undefined) &&
+            (alternateTitle.sceneSeasonNumber === -1 || alternateTitle.sceneSeasonNumber === undefined)) {
+          acc.push(alternateTitle.title);
+        }
+
+        return acc;
+      }, []);
+
+      return {
+        ...author,
+        isSaving: authors.isSaving,
+        alternateTitles,
+        isSmallScreen: dimensions.isSmallScreen
+      };
+    }
+  );
+}
+
+const mapDispatchToProps = {
+  toggleAuthorMonitored
+};
+
+class AuthorDetailsHeaderConnector extends Component {
+
+  //
+  // Listeners
+
+  onMonitorTogglePress = (monitored) => {
+    this.props.toggleAuthorMonitored({
+      authorId: this.props.authorId,
+      monitored
+    });
+  }
+
+  //
+  // Render
+
+  render() {
+    return (
+      <AuthorDetailsHeader
+        {...this.props}
+        onMonitorTogglePress={this.onMonitorTogglePress}
+      />
+    );
+  }
+}
+
+AuthorDetailsHeaderConnector.propTypes = {
+  authorId: PropTypes.number.isRequired,
+  toggleAuthorMonitored: PropTypes.func.isRequired
+};
+
+export default connect(createMapStateToProps, mapDispatchToProps)(AuthorDetailsHeaderConnector);

frontend/src/Book/Details/BookDetails.css

@@ -54,7 +54,7 @@
 
 .titleContainer {
   display: flex;
-  margin-top: -5px
+  margin-top: -5px;
 }
 
 .title {
@@ -85,9 +85,13 @@
 .bookNavigationButtons {
   position: absolute;
   right: 0;
+  z-index: 1;
+  margin-top: 10px;
+  padding: 30px;
   white-space: nowrap;
 }
 
+.bookUpButton,
 .bookNavigationButton {
   composes: button from '~Components/Link/IconButton.css';
 
@@ -171,9 +175,23 @@
     padding: 20px 0;
   }
 
+  .bookNavigationButtons,
   .headerContent {
     padding: 15px;
   }
+
+  .bookNavigationButtons {
+    margin-top: 5px;
+  }
+
+  .bookNavigationButton {
+    display: none;
+  }
+
+  .title {
+    font-size: 30px;
+    line-height: 50px;
+  }
 }
 
 @media only screen and (max-width: $breakpointLarge) {

frontend/src/Book/Details/BookDetails.js

@@ -1,51 +1,27 @@
-import _ from 'lodash';
-import moment from 'moment';
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { Tab, TabList, TabPanel, Tabs } from 'react-tabs';
-import TextTruncate from 'react-text-truncate';
 import AuthorHistoryTable from 'Author/History/AuthorHistoryTable';
-import BookCover from 'Book/BookCover';
 import DeleteBookModal from 'Book/Delete/DeleteBookModal';
 import EditBookModalConnector from 'Book/Edit/EditBookModalConnector';
 import BookFileEditorTable from 'BookFile/Editor/BookFileEditorTable';
-import HeartRating from 'Components/HeartRating';
-import Icon from 'Components/Icon';
-import Label from 'Components/Label';
 import IconButton from 'Components/Link/IconButton';
 import LoadingIndicator from 'Components/Loading/LoadingIndicator';
-import Marquee from 'Components/Marquee';
-import Measure from 'Components/Measure';
-import MonitorToggleButton from 'Components/MonitorToggleButton';
 import PageContent from 'Components/Page/PageContent';
 import PageContentBody from 'Components/Page/PageContentBody';
 import PageToolbar from 'Components/Page/Toolbar/PageToolbar';
 import PageToolbarButton from 'Components/Page/Toolbar/PageToolbarButton';
 import PageToolbarSection from 'Components/Page/Toolbar/PageToolbarSection';
 import PageToolbarSeparator from 'Components/Page/Toolbar/PageToolbarSeparator';
-import Tooltip from 'Components/Tooltip/Tooltip';
-import { icons, kinds, sizes, tooltipPositions } from 'Helpers/Props';
+import SwipeHeaderConnector from 'Components/Swipe/SwipeHeaderConnector';
+import { icons } from 'Helpers/Props';
 import InteractiveSearchFilterMenuConnector from 'InteractiveSearch/InteractiveSearchFilterMenuConnector';
 import InteractiveSearchTable from 'InteractiveSearch/InteractiveSearchTable';
 import OrganizePreviewModalConnector from 'Organize/OrganizePreviewModalConnector';
 import RetagPreviewModalConnector from 'Retag/RetagPreviewModalConnector';
-import fonts from 'Styles/Variables/fonts';
-import formatBytes from 'Utilities/Number/formatBytes';
-import stripHtml from 'Utilities/String/stripHtml';
-import BookDetailsLinks from './BookDetailsLinks';
+import BookDetailsHeaderConnector from './BookDetailsHeaderConnector';
 import styles from './BookDetails.css';
 
-const defaultFontSize = parseInt(fonts.defaultFontSize);
-const lineHeight = parseFloat(fonts.lineHeight);
-
-function getFanartUrl(images) {
-  const fanartImage = _.find(images, { coverType: 'fanart' });
-  if (fanartImage) {
-    // Remove protocol
-    return fanartImage.url.replace(/^https?:/, '');
-  }
-}
-
 class BookDetails extends Component {
 
   //
@@ -59,9 +35,7 @@ class BookDetails extends Component {
       isRetagModalOpen: false,
       isEditBookModalOpen: false,
       isDeleteBookModalOpen: false,
-      selectedTabIndex: 0,
-      titleWidth: 0,
-      overviewHeight: 0
+      selectedTabIndex: 0
     };
   }
 
@@ -107,43 +81,22 @@ class BookDetails extends Component {
     this.setState({ selectedTabIndex: index });
   }
 
-  onTitleMeasure = ({ width }) => {
-    this.setState({ titleWidth: width });
-  }
-
-  onOverviewMeasure = ({ height }) => {
-    this.setState({ overviewHeight: height });
-  }
-
   //
   // Render
 
   render() {
     const {
       id,
-      titleSlug,
       title,
-      seriesTitle,
-      pageCount,
-      overview,
-      statistics = {},
-      monitored,
-      releaseDate,
-      ratings,
-      images,
-      links,
-      isSaving,
       isRefreshing,
       isFetching,
       isPopulated,
       bookFilesError,
       hasBookFiles,
-      shortDateFormat,
       author,
       previousBook,
       nextBook,
       isSearching,
-      onMonitorTogglePress,
       onRefreshPress,
       onSearchPress
     } = this.props;
@@ -153,13 +106,9 @@ class BookDetails extends Component {
       isRetagModalOpen,
       isEditBookModalOpen,
       isDeleteBookModalOpen,
-      selectedTabIndex,
-      titleWidth,
-      overviewHeight
+      selectedTabIndex
     } = this.state;
 
-    const marqueeWidth = (titleWidth - 165);
-
     return (
       <PageContent title={title}>
         <PageToolbar>
@@ -214,181 +163,58 @@ class BookDetails extends Component {
         </PageToolbar>
 
         <PageContentBody innerClassName={styles.innerContentBody}>
-          <div className={styles.header}>
-            <div
-              className={styles.backdrop}
-              style={{
-                backgroundImage: `url(${getFanartUrl(author.images)})`
-              }}
-            >
-              <div className={styles.backdropOverlay} />
-            </div>
-
-            <div className={styles.headerContent}>
-              <BookCover
-                className={styles.cover}
-                images={images}
-                size={250}
-                lazy={false}
+          <SwipeHeaderConnector
+            className={styles.header}
+            nextLink={`/book/${nextBook.titleSlug}`}
+            nextComponent={(width) => (
+              <BookDetailsHeaderConnector
+                bookId={nextBook.id}
+                author={author}
+                width={width}
+              />
+            )}
+            prevLink={`/book/${previousBook.titleSlug}`}
+            prevComponent={(width) => (
+              <BookDetailsHeaderConnector
+                bookId={previousBook.id}
+                author={author}
+                width={width}
+              />
+            )}
+            currentComponent={(width) => (
+              <BookDetailsHeaderConnector
+                bookId={id}
+                author={author}
+                width={width}
+              />
+            )}
+          >
+            <div className={styles.bookNavigationButtons}>
+              <IconButton
+                className={styles.bookNavigationButton}
+                name={icons.ARROW_LEFT}
+                size={30}
+                title={`Go to ${previousBook.title}`}
+                to={`/book/${previousBook.titleSlug}`}
               />
 
-              <div className={styles.info}>
-                <Measure
-                  onMeasure={this.onTitleMeasure}
-                  className={styles.titleRow}
-                >
-                  <div className={styles.titleContainer}>
+              <IconButton
+                className={styles.bookUpButton}
+                name={icons.ARROW_UP}
+                size={30}
+                title={`Go to ${author.authorName}`}
+                to={`/author/${author.titleSlug}`}
+              />
 
-                    <div className={styles.toggleMonitoredContainer}>
-                      <MonitorToggleButton
-                        className={styles.monitorToggleButton}
-                        monitored={monitored}
-                        isSaving={isSaving}
-                        size={40}
-                        onPress={onMonitorTogglePress}
-                      />
-                    </div>
-
-                    <div className={styles.title} style={{ width: marqueeWidth }}>
-                      <Marquee text={title} />
-                    </div>
-
-                  </div>
-
-                  <div className={styles.bookNavigationButtons}>
-                    <IconButton
-                      className={styles.bookNavigationButton}
-                      name={icons.ARROW_LEFT}
-                      size={30}
-                      title={`Go to ${previousBook.title}`}
-                      to={`/book/${previousBook.titleSlug}`}
-                    />
-
-                    <IconButton
-                      className={styles.bookNavigationButton}
-                      name={icons.ARROW_UP}
-                      size={30}
-                      title={`Go to ${author.authorName}`}
-                      to={`/author/${author.titleSlug}`}
-                    />
-
-                    <IconButton
-                      className={styles.bookNavigationButton}
-                      name={icons.ARROW_RIGHT}
-                      size={30}
-                      title={`Go to ${nextBook.title}`}
-                      to={`/book/${nextBook.titleSlug}`}
-                    />
-                  </div>
-                </Measure>
-
-                <div className={styles.details}>
-                  <div>
-                    {seriesTitle}
-                  </div>
-
-                  <div>
-                    {
-                      !!pageCount &&
-                        <span className={styles.duration}>
-                          {`${pageCount} pages`}
-                        </span>
-                    }
-
-                    <HeartRating
-                      rating={ratings.value}
-                      iconSize={20}
-                    />
-                  </div>
-                </div>
-
-                <div className={styles.detailsLabels}>
-
-                  <Label
-                    className={styles.detailsLabel}
-                    size={sizes.LARGE}
-                  >
-                    <Icon
-                      name={icons.CALENDAR}
-                      size={17}
-                    />
-
-                    <span className={styles.sizeOnDisk}>
-                      {
-                        moment(releaseDate).format(shortDateFormat)
-                      }
-                    </span>
-                  </Label>
-
-                  <Label
-                    className={styles.detailsLabel}
-                    size={sizes.LARGE}
-                  >
-                    <Icon
-                      name={icons.DRIVE}
-                      size={17}
-                    />
-
-                    <span className={styles.sizeOnDisk}>
-                      {
-                        formatBytes(statistics.sizeOnDisk)
-                      }
-                    </span>
-                  </Label>
-
-                  <Label
-                    className={styles.detailsLabel}
-                    size={sizes.LARGE}
-                  >
-                    <Icon
-                      name={monitored ? icons.MONITORED : icons.UNMONITORED}
-                      size={17}
-                    />
-
-                    <span className={styles.qualityProfileName}>
-                      {monitored ? 'Monitored' : 'Unmonitored'}
-                    </span>
-                  </Label>
-
-                  <Tooltip
-                    anchor={
-                      <Label
-                        className={styles.detailsLabel}
-                        size={sizes.LARGE}
-                      >
-                        <Icon
-                          name={icons.EXTERNAL_LINK}
-                          size={17}
-                        />
-
-                        <span className={styles.links}>
-                          Links
-                        </span>
-                      </Label>
-                    }
-                    tooltip={
-                      <BookDetailsLinks
-                        titleSlug={titleSlug}
-                        links={links}
-                      />
-                    }
-                    kind={kinds.INVERSE}
-                    position={tooltipPositions.BOTTOM}
-                  />
-
-                </div>
-                <Measure
-                  onMeasure={this.onOverviewMeasure}
-                  className={styles.overview}
-                >
-                  <TextTruncate
-                    line={Math.floor(overviewHeight / (defaultFontSize * lineHeight))}
-                    text={stripHtml(overview)}
-                  />
-                </Measure>
-              </div>
+              <IconButton
+                className={styles.bookNavigationButton}
+                name={icons.ARROW_RIGHT}
+                size={30}
+                title={`Go to ${nextBook.title}`}
+                to={`/book/${nextBook.titleSlug}`}
+              />
             </div>
-          </div>
+          </SwipeHeaderConnector>
 
           <div className={styles.contentContainer}>
             {
@@ -502,7 +328,6 @@ BookDetails.propTypes = {
   seriesTitle: PropTypes.string.isRequired,
   pageCount: PropTypes.number,
   overview: PropTypes.string,
-  statistics: PropTypes.object.isRequired,
   releaseDate: PropTypes.string.isRequired,
   ratings: PropTypes.object.isRequired,
   images: PropTypes.arrayOf(PropTypes.object).isRequired,
@@ -519,6 +344,7 @@ BookDetails.propTypes = {
   author: PropTypes.object,
   previousBook: PropTypes.object,
   nextBook: PropTypes.object,
+  isSmallScreen: PropTypes.bool.isRequired,
   onMonitorTogglePress: PropTypes.func.isRequired,
   onRefreshPress: PropTypes.func,
   onSearchPress: PropTypes.func.isRequired

frontend/src/Book/Details/BookDetailsConnector.js

@@ -11,6 +11,7 @@ import { executeCommand } from 'Store/Actions/commandActions';
 import { cancelFetchReleases, clearReleases } from 'Store/Actions/releaseActions';
 import createAllAuthorSelector from 'Store/Selectors/createAllAuthorsSelector';
 import createCommandsSelector from 'Store/Selectors/createCommandsSelector';
+import createDimensionsSelector from 'Store/Selectors/createDimensionsSelector';
 import createUISettingsSelector from 'Store/Selectors/createUISettingsSelector';
 import { findCommand, isCommandExecuting } from 'Utilities/Command';
 import { registerPagePopulator, unregisterPagePopulator } from 'Utilities/pagePopulator';
@@ -45,7 +46,8 @@ function createMapStateToProps() {
     createAllAuthorSelector(),
     createCommandsSelector(),
     createUISettingsSelector(),
-    (titleSlug, bookFiles, books, authors, commands, uiSettings) => {
+    createDimensionsSelector(),
+    (titleSlug, bookFiles, books, authors, commands, uiSettings, dimensions) => {
       const sortedBooks = _.orderBy(books.items, 'releaseDate');
       const bookIndex = _.findIndex(sortedBooks, { titleSlug });
       const book = sortedBooks[bookIndex];
@@ -90,7 +92,8 @@ function createMapStateToProps() {
         bookFilesError,
         hasBookFiles,
         previousBook,
-        nextBook
+        nextBook,
+        isSmallScreen: dimensions.isSmallScreen
       };
     }
   );

frontend/src/Book/Details/BookDetailsHeader.js

@@ -0,0 +1,256 @@
+import moment from 'moment';
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import TextTruncate from 'react-text-truncate';
+import BookCover from 'Book/BookCover';
+import HeartRating from 'Components/HeartRating';
+import Icon from 'Components/Icon';
+import Label from 'Components/Label';
+import Marquee from 'Components/Marquee';
+import Measure from 'Components/Measure';
+import MonitorToggleButton from 'Components/MonitorToggleButton';
+import Tooltip from 'Components/Tooltip/Tooltip';
+import { icons, kinds, sizes, tooltipPositions } from 'Helpers/Props';
+import fonts from 'Styles/Variables/fonts';
+import formatBytes from 'Utilities/Number/formatBytes';
+import stripHtml from 'Utilities/String/stripHtml';
+import BookDetailsLinks from './BookDetailsLinks';
+import styles from './BookDetails.css';
+
+const defaultFontSize = parseInt(fonts.defaultFontSize);
+const lineHeight = parseFloat(fonts.lineHeight);
+
+function getFanartUrl(images) {
+  const fanartImage = images.find((x) => x.coverType === 'fanart');
+
+  if (fanartImage) {
+    // Remove protocol
+    return fanartImage.url.replace(/^https?:/, '');
+  }
+}
+
+class BookDetailsHeader extends Component {
+
+  //
+  // Lifecycle
+
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      overviewHeight: 0
+    };
+  }
+
+  //
+  // Listeners
+
+  onOverviewMeasure = ({ height }) => {
+    this.setState({ overviewHeight: height });
+  }
+
+  //
+  // Render
+
+  render() {
+    const {
+      width,
+      titleSlug,
+      title,
+      seriesTitle,
+      pageCount,
+      overview,
+      statistics = {},
+      monitored,
+      releaseDate,
+      ratings,
+      images,
+      links,
+      isSaving,
+      shortDateFormat,
+      author,
+      isSmallScreen,
+      onMonitorTogglePress
+    } = this.props;
+
+    const {
+      overviewHeight
+    } = this.state;
+
+    const marqueeWidth = width - (isSmallScreen ? 115 : 225);
+
+    return (
+      <div className={styles.header}>
+        <div
+          className={styles.backdrop}
+          style={{
+            backgroundImage: `url(${getFanartUrl(author.images)})`
+          }}
+        >
+          <div className={styles.backdropOverlay} />
+        </div>
+
+        <div className={styles.headerContent}>
+          <BookCover
+            className={styles.cover}
+            images={images}
+            size={250}
+            lazy={false}
+          />
+
+          <div className={styles.info}>
+            <div className={styles.titleRow}>
+              <div className={styles.titleContainer}>
+                <div className={styles.toggleMonitoredContainer}>
+                  <MonitorToggleButton
+                    className={styles.monitorToggleButton}
+                    monitored={monitored}
+                    isSaving={isSaving}
+                    size={isSmallScreen ? 30: 40}
+                    onPress={onMonitorTogglePress}
+                  />
+                </div>
+
+                <div className={styles.title} style={{ width: marqueeWidth }}>
+                  <Marquee text={title} />
+                </div>
+
+              </div>
+            </div>
+
+            <div className={styles.details}>
+              <div>
+                {seriesTitle}
+              </div>
+
+              <div>
+                {
+                  !!pageCount &&
+                    <span className={styles.duration}>
+                      {`${pageCount} pages`}
+                    </span>
+                }
+
+                <HeartRating
+                  rating={ratings.value}
+                  iconSize={20}
+                />
+              </div>
+            </div>
+
+            <div className={styles.detailsLabels}>
+              <Label
+                className={styles.detailsLabel}
+                size={sizes.LARGE}
+              >
+                <Icon
+                  name={icons.CALENDAR}
+                  size={17}
+                />
+
+                <span className={styles.sizeOnDisk}>
+                  {
+                    moment(releaseDate).format(shortDateFormat)
+                  }
+                </span>
+              </Label>
+
+              <Label
+                className={styles.detailsLabel}
+                size={sizes.LARGE}
+              >
+                <Icon
+                  name={icons.DRIVE}
+                  size={17}
+                />
+
+                <span className={styles.sizeOnDisk}>
+                  {
+                    formatBytes(statistics.sizeOnDisk)
+                  }
+                </span>
+              </Label>
+
+              <Label
+                className={styles.detailsLabel}
+                size={sizes.LARGE}
+              >
+                <Icon
+                  name={monitored ? icons.MONITORED : icons.UNMONITORED}
+                  size={17}
+                />
+
+                <span className={styles.qualityProfileName}>
+                  {monitored ? 'Monitored' : 'Unmonitored'}
+                </span>
+              </Label>
+
+              <Tooltip
+                anchor={
+                  <Label
+                    className={styles.detailsLabel}
+                    size={sizes.LARGE}
+                  >
+                    <Icon
+                      name={icons.EXTERNAL_LINK}
+                      size={17}
+                    />
+
+                    <span className={styles.links}>
+                      Links
+                    </span>
+                  </Label>
+                }
+                tooltip={
+                  <BookDetailsLinks
+                    titleSlug={titleSlug}
+                    links={links}
+                  />
+                }
+                kind={kinds.INVERSE}
+                position={tooltipPositions.BOTTOM}
+              />
+
+            </div>
+            <Measure
+              onMeasure={this.onOverviewMeasure}
+              className={styles.overview}
+            >
+              <TextTruncate
+                line={Math.floor(overviewHeight / (defaultFontSize * lineHeight))}
+                text={stripHtml(overview)}
+              />
+            </Measure>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+BookDetailsHeader.propTypes = {
+  id: PropTypes.number.isRequired,
+  width: PropTypes.number.isRequired,
+  titleSlug: PropTypes.string.isRequired,
+  title: PropTypes.string.isRequired,
+  seriesTitle: PropTypes.string.isRequired,
+  pageCount: PropTypes.number,
+  overview: PropTypes.string,
+  statistics: PropTypes.object.isRequired,
+  releaseDate: PropTypes.string.isRequired,
+  ratings: PropTypes.object.isRequired,
+  images: PropTypes.arrayOf(PropTypes.object).isRequired,
+  links: PropTypes.arrayOf(PropTypes.object).isRequired,
+  monitored: PropTypes.bool.isRequired,
+  shortDateFormat: PropTypes.string.isRequired,
+  isSaving: PropTypes.bool.isRequired,
+  author: PropTypes.object,
+  isSmallScreen: PropTypes.bool.isRequired,
+  onMonitorTogglePress: PropTypes.func.isRequired
+};
+
+BookDetailsHeader.defaultProps = {
+  isSaving: false
+};
+
+export default BookDetailsHeader;

frontend/src/Book/Details/BookDetailsHeaderConnector.js

@@ -0,0 +1,62 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import { createSelector } from 'reselect';
+import { toggleBooksMonitored } from 'Store/Actions/bookActions';
+import createBookSelector from 'Store/Selectors/createBookSelector';
+import createDimensionsSelector from 'Store/Selectors/createDimensionsSelector';
+import createUISettingsSelector from 'Store/Selectors/createUISettingsSelector';
+import BookDetailsHeader from './BookDetailsHeader';
+
+function createMapStateToProps() {
+  return createSelector(
+    createBookSelector(),
+    createUISettingsSelector(),
+    createDimensionsSelector(),
+    (book, uiSettings, dimensions) => {
+
+      return {
+        ...book,
+        shortDateFormat: uiSettings.shortDateFormat,
+        isSmallScreen: dimensions.isSmallScreen
+      };
+    }
+  );
+}
+
+const mapDispatchToProps = {
+  toggleBooksMonitored
+};
+
+class BookDetailsHeaderConnector extends Component {
+
+  //
+  // Listeners
+
+  onMonitorTogglePress = (monitored) => {
+    this.props.toggleBooksMonitored({
+      bookIds: [this.props.bookId],
+      monitored
+    });
+  }
+
+  //
+  // Render
+
+  render() {
+    return (
+      <BookDetailsHeader
+        {...this.props}
+        onMonitorTogglePress={this.onMonitorTogglePress}
+      />
+    );
+  }
+}
+
+BookDetailsHeaderConnector.propTypes = {
+  bookId: PropTypes.number,
+  toggleBooksMonitored: PropTypes.func.isRequired,
+  author: PropTypes.object
+};
+
+export default connect(createMapStateToProps, mapDispatchToProps)(BookDetailsHeaderConnector);

frontend/src/Components/Swipe/SwipeHeader.css

@@ -0,0 +1,14 @@
+.container {
+  position: relative;
+  overflow: hidden;
+  box-sizing: border-box;
+}
+
+.content {
+  position: relative;
+  display: flex;
+  width: 300%;
+  height: 100%;
+  transition: var(--transition);
+  transform: translateX(var(--translate));
+}

frontend/src/Components/Swipe/SwipeHeader.js

@@ -0,0 +1,242 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import Measure from 'Components/Measure';
+import styles from './SwipeHeader.css';
+
+function cursorPosition(event) {
+  return event.touches ? event.touches[0].clientX : event.clientX;
+}
+
+class SwipeHeader extends Component {
+
+  //
+  // Lifecycle
+
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      containerWidth: 0,
+      touching: null,
+      translate: 0,
+      stage: 'init',
+      url: null
+    };
+  }
+
+  componentWillUnmount() {
+    this.removeEventListeners();
+  }
+
+  //
+  // Listeners
+
+  onMouseDown = (e) => {
+    if (!this.props.isSmallScreen || this.state.touching) {
+      return;
+    }
+
+    this.startTouchPosition = cursorPosition(e);
+    this.initTranslate = this.state.translate;
+
+    this.setState({
+      stage: null,
+      touching: true }, () => {
+      this.addEventListeners();
+    });
+  };
+
+  addEventListeners = () => {
+    window.addEventListener('mousemove', this.onMouseMove);
+    window.addEventListener('touchmove', this.onMouseMove);
+    window.addEventListener('mouseup', this.onMouseUp);
+    window.addEventListener('touchend', this.onMouseUp);
+  }
+
+  removeEventListeners = () => {
+    window.removeEventListener('mousemove', this.onMouseMove);
+    window.removeEventListener('touchmove', this.onMouseMove);
+    window.removeEventListener('mouseup', this.onMouseUp);
+    window.removeEventListener('touchend', this.onMouseUp);
+  }
+
+  onMouseMove = (e) => {
+    const {
+      touching,
+      containerWidth
+    } = this.state;
+
+    if (!touching) {
+      return;
+    }
+
+    const translate = Math.max(Math.min(cursorPosition(e) - this.startTouchPosition + this.initTranslate, containerWidth), -1 * containerWidth);
+
+    this.setState({ translate });
+  };
+
+  onMouseUp = () => {
+    this.startTouchPosition = null;
+
+    const {
+      nextLink,
+      prevLink,
+      navWidth
+    } = this.props;
+
+    const {
+      containerWidth,
+      translate
+    } = this.state;
+
+    const newState = {
+      touching: false
+    };
+
+    const acceptableMove = navWidth * 0.7;
+    const showNav = Math.abs(translate) >= acceptableMove;
+    const navWithoutConfirm = Math.abs(translate) >= containerWidth * 0.5;
+
+    if (navWithoutConfirm) {
+      newState.translate = Math.sign(translate) * containerWidth;
+    }
+
+    if (!showNav) {
+      newState.translate = 0;
+      newState.stage = null;
+    }
+
+    if (showNav && !navWithoutConfirm) {
+      newState.translate = Math.sign(translate) * navWidth;
+      newState.stage = 'showNav';
+    }
+
+    this.setState(newState, () => {
+      if (navWithoutConfirm) {
+        this.onNavClick(translate < 0 ? nextLink : prevLink, Math.abs(translate) === containerWidth);
+      }
+    });
+
+    this.removeEventListeners();
+  }
+
+  onNavClick = (url, callTransition) => {
+    const {
+      containerWidth,
+      translate
+    } = this.state;
+
+    this.setState({
+      stage: 'navigating',
+      translate: Math.sign(translate) * containerWidth,
+      url
+    }, () => {
+      if (callTransition) {
+        this.onTransitionEnd();
+      }
+    });
+  }
+
+  onTransitionEnd = (e) => {
+    const {
+      stage,
+      url
+    } = this.state;
+
+    if (stage === 'navigating') {
+      this.setState({
+        stage: 'navigated',
+        translate: 0,
+        url: null
+      }, () => {
+        this.props.onGoTo(url);
+        this.setState({ stage: null });
+      });
+    }
+  }
+
+  onNext = () => {
+    this.onNavClick(this.props.nextLink);
+  }
+
+  onPrev = () => {
+    this.onNavClick(this.props.prevLink);
+  }
+
+  onContainerMeasure = ({ width }) => {
+    this.setState({ containerWidth: width });
+  }
+
+  //
+  // Render
+
+  render() {
+    const {
+      transitionDuration,
+      className,
+      children,
+      prevComponent,
+      currentComponent,
+      nextComponent
+    } = this.props;
+
+    const {
+      containerWidth,
+      translate,
+      touching,
+      stage
+    } = this.state;
+
+    const useTransition = !touching && stage !== 'navigated' && stage !== 'init';
+
+    const style = {
+      '--translate': `${translate - containerWidth}px`,
+      '--transition': useTransition ? `transform ${transitionDuration}ms ease-out` : undefined
+    };
+
+    console.log(`stage: ${stage} translate: ${translate} width: ${containerWidth}`);
+    console.log(style);
+
+    return (
+      <Measure
+        className={className}
+        onMeasure={this.onContainerMeasure}
+      >
+        {children}
+
+        <div
+          className={styles.content}
+          style={style}
+          onMouseDown={this.onMouseDown}
+          onTouchStart={this.onMouseDown}
+          onTransitionEnd={this.onTransitionEnd}
+        >
+          {prevComponent(containerWidth)}
+          {currentComponent(containerWidth)}
+          {nextComponent(containerWidth)}
+        </div>
+      </Measure>
+    );
+  }
+}
+
+SwipeHeader.propTypes = {
+  transitionDuration: PropTypes.number.isRequired,
+  navWidth: PropTypes.number.isRequired,
+  nextLink: PropTypes.string,
+  prevLink: PropTypes.string,
+  nextComponent: PropTypes.func.isRequired,
+  currentComponent: PropTypes.func.isRequired,
+  prevComponent: PropTypes.func.isRequired,
+  isSmallScreen: PropTypes.bool.isRequired,
+  className: PropTypes.string,
+  onGoTo: PropTypes.func.isRequired,
+  children: PropTypes.node.isRequired
+};
+
+SwipeHeader.defaultProps = {
+  transitionDuration: 250,
+  navWidth: 75
+};
+
+export default SwipeHeader;

frontend/src/Components/Swipe/SwipeHeaderConnector.js

@@ -0,0 +1,46 @@
+import { push } from 'connected-react-router';
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import { createSelector } from 'reselect';
+import createDimensionsSelector from 'Store/Selectors/createDimensionsSelector';
+import SwipeHeader from './SwipeHeader';
+
+function createMapStateToProps() {
+  return createSelector(
+    createDimensionsSelector(),
+    (dimensions) => {
+      return {
+        isSmallScreen: dimensions.isSmallScreen
+      };
+    }
+  );
+}
+
+function createMapDispatchToProps(dispatch, props) {
+  return {
+    onGoTo(url) {
+      dispatch(push(`${window.Readarr.urlBase}${url}`));
+    }
+  };
+}
+
+class SwipeHeaderConnector extends Component {
+
+  //
+  // Render
+
+  render() {
+    return (
+      <SwipeHeader
+        {...this.props}
+      />
+    );
+  }
+}
+
+SwipeHeaderConnector.propTypes = {
+  onGoTo: PropTypes.func.isRequired
+};
+
+export default connect(createMapStateToProps, createMapDispatchToProps)(SwipeHeaderConnector);