New: Add index views for all books

2026-04-20 21:54:25 -04:00 · 2021-09-01 21:04:39 +01:00
parent a774cf0682
commit 2558660b7b
65 changed files with 5433 additions and 12 deletions
@@ -0,0 +1,278 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import TextTruncate from 'react-text-truncate';
+import AuthorPoster from 'Author/AuthorPoster';
+import DeleteAuthorModal from 'Author/Delete/DeleteAuthorModal';
+import EditAuthorModalConnector from 'Author/Edit/EditAuthorModalConnector';
+import BookIndexProgressBar from 'Book/Index/ProgressBar/BookIndexProgressBar';
+import IconButton from 'Components/Link/IconButton';
+import Link from 'Components/Link/Link';
+import SpinnerIconButton from 'Components/Link/SpinnerIconButton';
+import { icons } from 'Helpers/Props';
+import dimensions from 'Styles/Variables/dimensions';
+import fonts from 'Styles/Variables/fonts';
+import stripHtml from 'Utilities/String/stripHtml';
+import translate from 'Utilities/String/translate';
+import BookIndexOverviewInfo from './BookIndexOverviewInfo';
+import styles from './BookIndexOverview.css';
+
+const columnPadding = parseInt(dimensions.authorIndexColumnPadding);
+const columnPaddingSmallScreen = parseInt(dimensions.authorIndexColumnPaddingSmallScreen);
+const defaultFontSize = parseInt(fonts.defaultFontSize);
+const lineHeight = parseFloat(fonts.lineHeight);
+
+// Hardcoded height beased on line-height of 32 + bottom margin of 10.
+// Less side-effecty than using react-measure.
+const titleRowHeight = 42;
+
+function getContentHeight(rowHeight, isSmallScreen) {
+  const padding = isSmallScreen ? columnPaddingSmallScreen : columnPadding;
+
+  return rowHeight - padding;
+}
+
+class BookIndexOverview extends Component {
+
+  //
+  // Lifecycle
+
+  constructor(props, context) {
+    super(props, context);
+
+    this.state = {
+      isEditAuthorModalOpen: false,
+      isDeleteAuthorModalOpen: false
+    };
+  }
+
+  //
+  // Listeners
+
+  onEditAuthorPress = () => {
+    this.setState({ isEditAuthorModalOpen: true });
+  }
+
+  onEditAuthorModalClose = () => {
+    this.setState({ isEditAuthorModalOpen: false });
+  }
+
+  onDeleteAuthorPress = () => {
+    this.setState({
+      isEditAuthorModalOpen: false,
+      isDeleteAuthorModalOpen: true
+    });
+  }
+
+  onDeleteAuthorModalClose = () => {
+    this.setState({ isDeleteAuthorModalOpen: false });
+  }
+
+  //
+  // Render
+
+  render() {
+    const {
+      id,
+      title,
+      overview,
+      monitored,
+      titleSlug,
+      nextAiring,
+      statistics,
+      images,
+      posterWidth,
+      posterHeight,
+      qualityProfile,
+      overviewOptions,
+      showSearchAction,
+      showRelativeDates,
+      shortDateFormat,
+      longDateFormat,
+      timeFormat,
+      rowHeight,
+      isSmallScreen,
+      isRefreshingBook,
+      isSearchingBook,
+      onRefreshBookPress,
+      onSearchPress,
+      ...otherProps
+    } = this.props;
+
+    const {
+      bookCount,
+      sizeOnDisk,
+      bookFileCount,
+      totalBookCount
+    } = statistics;
+
+    const {
+      isEditAuthorModalOpen,
+      isDeleteAuthorModalOpen
+    } = this.state;
+
+    const link = `/book/${titleSlug}`;
+
+    const elementStyle = {
+      width: `${posterWidth}px`,
+      height: `${posterHeight}px`,
+      objectFit: 'contain'
+    };
+
+    const contentHeight = getContentHeight(rowHeight, isSmallScreen);
+    const overviewHeight = contentHeight - titleRowHeight;
+
+    return (
+      <div className={styles.container}>
+        <div className={styles.content}>
+          <div className={styles.posterContainer}>
+            {
+              status === 'ended' &&
+                <div
+                  className={styles.ended}
+                  title={translate('Ended')}
+                />
+            }
+
+            <Link
+              className={styles.link}
+              style={elementStyle}
+              to={link}
+            >
+              <AuthorPoster
+                className={styles.poster}
+                style={elementStyle}
+                images={images}
+                coverType={'cover'}
+                size={250}
+                lazy={false}
+                overflow={true}
+                blurBackground={true}
+              />
+            </Link>
+
+            <BookIndexProgressBar
+              monitored={monitored}
+              bookCount={bookCount}
+              bookFileCount={bookFileCount}
+              totalBookCount={totalBookCount}
+              posterWidth={posterWidth}
+              detailedProgressBar={overviewOptions.detailedProgressBar}
+            />
+          </div>
+
+          <div className={styles.info} style={{ maxHeight: contentHeight }}>
+            <div className={styles.titleRow}>
+              <Link
+                className={styles.title}
+                to={link}
+              >
+                {title}
+              </Link>
+
+              <div className={styles.actions}>
+                <SpinnerIconButton
+                  name={icons.REFRESH}
+                  title={translate('RefreshBook')}
+                  isSpinning={isRefreshingBook}
+                  onPress={onRefreshBookPress}
+                />
+
+                {
+                  showSearchAction &&
+                    <SpinnerIconButton
+                      className={styles.action}
+                      name={icons.SEARCH}
+                      title={translate('SearchForMonitoredBooks')}
+                      isSpinning={isSearchingBook}
+                      onPress={onSearchPress}
+                    />
+                }
+
+                <IconButton
+                  name={icons.EDIT}
+                  title={translate('EditAuthor')}
+                  onPress={this.onEditAuthorPress}
+                />
+              </div>
+            </div>
+
+            <div className={styles.details}>
+
+              <Link
+                className={styles.overview}
+                to={link}
+              >
+                <TextTruncate
+                  line={Math.floor(overviewHeight / (defaultFontSize * lineHeight))}
+                  text={stripHtml(overview)}
+                />
+              </Link>
+
+              <BookIndexOverviewInfo
+                height={overviewHeight}
+                monitored={monitored}
+                sizeOnDisk={sizeOnDisk}
+                qualityProfile={qualityProfile}
+                showRelativeDates={showRelativeDates}
+                shortDateFormat={shortDateFormat}
+                longDateFormat={longDateFormat}
+                timeFormat={timeFormat}
+                {...overviewOptions}
+                {...otherProps}
+              />
+            </div>
+          </div>
+        </div>
+
+        <EditAuthorModalConnector
+          isOpen={isEditAuthorModalOpen}
+          authorId={id}
+          onModalClose={this.onEditAuthorModalClose}
+          onDeleteAuthorPress={this.onDeleteAuthorPress}
+        />
+
+        <DeleteAuthorModal
+          isOpen={isDeleteAuthorModalOpen}
+          authorId={id}
+          onModalClose={this.onDeleteAuthorModalClose}
+        />
+      </div>
+    );
+  }
+}
+
+BookIndexOverview.propTypes = {
+  id: PropTypes.number.isRequired,
+  title: PropTypes.string.isRequired,
+  overview: PropTypes.string.isRequired,
+  monitored: PropTypes.bool.isRequired,
+  titleSlug: PropTypes.string.isRequired,
+  nextAiring: PropTypes.string,
+  statistics: PropTypes.object.isRequired,
+  images: PropTypes.arrayOf(PropTypes.object).isRequired,
+  posterWidth: PropTypes.number.isRequired,
+  posterHeight: PropTypes.number.isRequired,
+  rowHeight: PropTypes.number.isRequired,
+  qualityProfile: PropTypes.object.isRequired,
+  overviewOptions: PropTypes.object.isRequired,
+  showSearchAction: PropTypes.bool.isRequired,
+  showRelativeDates: PropTypes.bool.isRequired,
+  shortDateFormat: PropTypes.string.isRequired,
+  longDateFormat: PropTypes.string.isRequired,
+  timeFormat: PropTypes.string.isRequired,
+  isSmallScreen: PropTypes.bool.isRequired,
+  isRefreshingBook: PropTypes.bool.isRequired,
+  isSearchingBook: PropTypes.bool.isRequired,
+  onRefreshBookPress: PropTypes.func.isRequired,
+  onSearchPress: PropTypes.func.isRequired
+};
+
+BookIndexOverview.defaultProps = {
+  statistics: {
+    bookCount: 0,
+    bookFileCount: 0,
+    totalBookCount: 0
+  }
+};
+
+export default BookIndexOverview;