opds-web-client
Version:
71 lines (70 loc) • 3.59 kB
JavaScript
;
var __extends = (this && this.__extends) || (function () {
var extendStatics = function (d, b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
return extendStatics(d, b);
};
return function (d, b) {
if (typeof b !== "function" && b !== null)
throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
Object.defineProperty(exports, "__esModule", { value: true });
var React = require("react");
var seedrandom = require("seedrandom");
/** Shows a cover image from the OPDS feed or an automatically generated cover for
a single book. */
var BookCover = /** @class */ (function (_super) {
__extends(BookCover, _super);
function BookCover(props) {
var _this = _super.call(this, props) || this;
_this.state = { error: false };
_this.handleError = _this.handleError.bind(_this);
return _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 () {
var _a;
var _b = this.props.book, title = _b.title, authors = _b.authors, imageUrl = _b.imageUrl;
if (imageUrl && !this.state.error) {
return (React.createElement("img", { src: imageUrl, onError: this.handleError, className: "book-cover", role: "presentation", alt: "" }));
}
var titleFontSize = this.computeFontSize(title, 40);
var authorFontSize = this.computeFontSize((_a = authors === null || authors === void 0 ? void 0 : authors.join(", ")) !== null && _a !== void 0 ? _a : "", 25);
var hue = this.seededRandomHue(title);
var bgColor = "hsla(".concat(hue, ", 40%, 60%, 1)");
return (React.createElement("div", { className: "auto-book-cover", style: { backgroundColor: bgColor } },
React.createElement("div", { className: "title", style: { fontSize: titleFontSize } }, title),
(authors === null || authors === void 0 ? void 0 : authors.length) && (React.createElement("div", { className: "authors", style: { fontSize: authorFontSize } },
"By ",
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));
exports.default = BookCover;