[UI] Add Banner View to Artist Index

2026-04-20 21:54:25 -04:00 · 2017-09-17 02:24:15 -04:00
parent 07b37c1575
commit 25eef250a4
22 changed files with 1496 additions and 1 deletions
@@ -0,0 +1,230 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import getRelativeDate from 'Utilities/Date/getRelativeDate';
+import { icons } from 'Helpers/Props';
+import IconButton from 'Components/Link/IconButton';
+import SpinnerIconButton from 'Components/Link/SpinnerIconButton';
+import Label from 'Components/Label';
+import Link from 'Components/Link/Link';
+import ArtistBanner from 'Artist/ArtistBanner';
+import EditArtistModalConnector from 'Artist/Edit/EditArtistModalConnector';
+import DeleteArtistModal from 'Artist/Delete/DeleteArtistModal';
+import ArtistIndexBannerProgressBar from './ArtistIndexBannerProgressBar';
+import ArtistIndexBannerInfo from './ArtistIndexBannerInfo';
+import styles from './ArtistIndexBanner.css';
+
+class ArtistIndexBanner extends Component {
+
+  //
+  // Lifecycle
+
+  constructor(props, context) {
+    super(props, context);
+
+    this.state = {
+      isEditArtistModalOpen: false,
+      isDeleteArtistModalOpen: false
+    };
+  }
+
+  //
+  // Listeners
+
+  onEditArtistPress = () => {
+    this.setState({ isEditArtistModalOpen: true });
+  }
+
+  onEditArtistModalClose = () => {
+    this.setState({ isEditArtistModalOpen: false });
+  }
+
+  onDeleteArtistPress = () => {
+    this.setState({
+      isEditArtistModalOpen: false,
+      isDeleteArtistModalOpen: true
+    });
+  }
+
+  onDeleteArtistModalClose = () => {
+    this.setState({ isDeleteArtistModalOpen: false });
+  }
+
+  //
+  // Render
+
+  render() {
+    const {
+      style,
+      id,
+      artistName,
+      monitored,
+      status,
+      nameSlug,
+      nextAiring,
+      trackCount,
+      trackFileCount,
+      images,
+      bannerWidth,
+      bannerHeight,
+      detailedProgressBar,
+      showTitle,
+      showQualityProfile,
+      qualityProfile,
+      showRelativeDates,
+      shortDateFormat,
+      timeFormat,
+      isRefreshingArtist,
+      onRefreshArtistPress,
+      ...otherProps
+    } = this.props;
+
+    const {
+      isEditArtistModalOpen,
+      isDeleteArtistModalOpen
+    } = this.state;
+
+    const link = `/artist/${nameSlug}`;
+
+    const elementStyle = {
+      width: `${bannerWidth}px`,
+      height: `${bannerHeight}px`
+    };
+
+    return (
+      <div className={styles.container} style={style}>
+        <div className={styles.content}>
+          <div className={styles.bannerContainer}>
+            <Label className={styles.controls}>
+              <SpinnerIconButton
+                className={styles.action}
+                name={icons.REFRESH}
+                title="Refresh Artist"
+                isSpinning={isRefreshingArtist}
+                onPress={onRefreshArtistPress}
+              />
+
+              <IconButton
+                className={styles.action}
+                name={icons.EDIT}
+                title="Edit Artist"
+                onPress={this.onEditArtistPress}
+              />
+            </Label>
+
+            {
+              status === 'ended' &&
+                <div
+                  className={styles.ended}
+                  title="Ended"
+                />
+            }
+
+            <Link
+              className={styles.link}
+              style={elementStyle}
+              to={link}
+            >
+              <ArtistBanner
+                className={styles.banner}
+                style={elementStyle}
+                images={images}
+                size={70}
+                lazy={false}
+                overflow={true}
+              />
+            </Link>
+          </div>
+
+          <ArtistIndexBannerProgressBar
+            monitored={monitored}
+            status={status}
+            trackCount={trackCount}
+            trackFileCount={trackFileCount}
+            bannerWidth={bannerWidth}
+            detailedProgressBar={detailedProgressBar}
+          />
+
+          {
+            showTitle &&
+              <div className={styles.title}>
+                {artistName}
+              </div>
+          }
+
+          {
+            showQualityProfile &&
+              <div className={styles.title}>
+                {qualityProfile.name}
+              </div>
+          }
+
+          <div className={styles.nextAiring}>
+            {
+              getRelativeDate(
+                nextAiring,
+                shortDateFormat,
+                showRelativeDates,
+                {
+                  timeFormat,
+                  timeForToday: true
+                }
+              )
+            }
+          </div>
+
+          <ArtistIndexBannerInfo
+            qualityProfile={qualityProfile}
+            showRelativeDates={showRelativeDates}
+            shortDateFormat={shortDateFormat}
+            timeFormat={timeFormat}
+            {...otherProps}
+          />
+
+          <EditArtistModalConnector
+            isOpen={isEditArtistModalOpen}
+            artistId={id}
+            onModalClose={this.onEditArtistModalClose}
+            onDeleteArtistPress={this.onDeleteArtistPress}
+          />
+
+          <DeleteArtistModal
+            isOpen={isDeleteArtistModalOpen}
+            artistId={id}
+            onModalClose={this.onDeleteArtistModalClose}
+          />
+        </div>
+      </div>
+    );
+  }
+}
+
+ArtistIndexBanner.propTypes = {
+  style: PropTypes.object.isRequired,
+  id: PropTypes.number.isRequired,
+  artistName: PropTypes.string.isRequired,
+  monitored: PropTypes.bool.isRequired,
+  status: PropTypes.string.isRequired,
+  nameSlug: PropTypes.string.isRequired,
+  nextAiring: PropTypes.string,
+  trackCount: PropTypes.number,
+  trackFileCount: PropTypes.number,
+  images: PropTypes.arrayOf(PropTypes.object).isRequired,
+  bannerWidth: PropTypes.number.isRequired,
+  bannerHeight: PropTypes.number.isRequired,
+  detailedProgressBar: PropTypes.bool.isRequired,
+  showTitle: PropTypes.bool.isRequired,
+  showQualityProfile: PropTypes.bool.isRequired,
+  qualityProfile: PropTypes.object.isRequired,
+  showRelativeDates: PropTypes.bool.isRequired,
+  shortDateFormat: PropTypes.string.isRequired,
+  timeFormat: PropTypes.string.isRequired,
+  isRefreshingArtist: PropTypes.bool.isRequired,
+  onRefreshArtistPress: PropTypes.func.isRequired
+};
+
+ArtistIndexBanner.defaultProps = {
+  trackCount: 0,
+  trackFileCount: 0
+};
+
+export default ArtistIndexBanner;