import moment from 'moment'; import PropTypes from 'prop-types'; import React, { Component } from 'react'; import TextTruncate from 'react-text-truncate'; import AuthorNameLink from 'Author/AuthorNameLink'; 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 './BookDetailsHeader.css'; const defaultFontSize = parseInt(fonts.defaultFontSize); const lineHeight = parseFloat(fonts.lineHeight); function getFanartUrl(images) { return images.find((x) => x.coverType === 'fanart')?.url; } class BookDetailsHeader extends Component { // // Lifecycle constructor(props) { super(props); this.state = { overviewHeight: 0, titleWidth: 0 }; } // // Listeners onOverviewMeasure = ({ height }) => { this.setState({ overviewHeight: height }); }; onTitleMeasure = ({ width }) => { this.setState({ titleWidth: width }); }; // // Render render() { const { width, titleSlug, title, seriesTitle, pageCount, overview, statistics = {}, monitored, releaseDate, ratings, images, links, isSaving, shortDateFormat, author, isSmallScreen, onMonitorTogglePress } = this.props; const { overviewHeight, titleWidth } = this.state; const fanartUrl = getFanartUrl(author.images); const marqueeWidth = titleWidth - (isSmallScreen ? 85 : 160); return (