UNPKG

opds-web-client

Version:
54 lines (53 loc) 2.69 kB
"use strict"; var __extends = (this && this.__extends) || function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; function __() { this.constructor = d; } d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __()); }; var React = require("react"); require("../stylesheets/book_cover.scss"); var seedrandom = require("seedrandom"); var BookCover = (function (_super) { __extends(BookCover, _super); function BookCover(props) { _super.call(this, props); this.state = { error: false }; this.handleError = this.handleError.bind(this); } BookCover.prototype.handleError = function (event) { this.setState({ error: true }); }; BookCover.prototype.componentWillReceiveProps = function (nextProps) { if (this.state.error) { this.setState({ error: false }); } }; BookCover.prototype.render = function () { if (this.props.book.imageUrl && !this.state.error) { return (React.createElement("img", {src: this.props.book.imageUrl, onError: this.handleError, className: "book-cover", alt: ""})); } var _a = this.props.book, title = _a.title, authors = _a.authors; var titleFontSize = this.computeFontSize(title, 40); var authorFontSize = this.computeFontSize(authors.join(", "), 25); var hue = this.seededRandomHue(title); var bgColor = "hsla(" + hue + ", 40%, 60%, 1)"; return (React.createElement("div", {className: "auto-book-cover", style: { backgroundColor: bgColor }}, React.createElement("div", {className: "title", style: { fontSize: titleFontSize }}, title), React.createElement("div", {className: "authors", style: { fontSize: authorFontSize }}, authors.join(", ")))); }; BookCover.prototype.computeFontSize = function (text, baseFontSize, minFontSize) { if (baseFontSize === void 0) { baseFontSize = 40; } if (minFontSize === void 0) { minFontSize = 15; } // decrease size as max word length increases // decrease size as word count grows beyond 3 var words = text.split(/\s/); var wordCount = words.length; var maxLength = Math.max.apply(Math, words.map(function (word) { return word.length; })); var fontSize = Math.max(minFontSize, baseFontSize - maxLength * 2 - Math.max(0, wordCount - 3) * 2); return (fontSize / 13) + "em"; }; BookCover.prototype.seededRandomHue = function (seed) { return Math.round(360 * seedrandom(seed)()); }; return BookCover; }(React.Component)); Object.defineProperty(exports, "__esModule", { value: true }); exports.default = BookCover;