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

2026-04-26 22:46:37 -04:00 · 2021-04-11 19:28:24 +01:00
parent f884a2689a
commit 5192c76717
13 changed files with 1157 additions and 535 deletions
@@ -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;