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

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);