opds-web-client
Version:
54 lines (53 loc) • 2.69 kB
JavaScript
;
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;