Use local fullsize images when rendering album.

This commit is contained in:
Bill Thiede 2020-02-09 21:18:20 -08:00
parent dbb282d73c
commit abfd04f340

View File

@ -7,7 +7,7 @@ class Album extends React.Component {
super(props);
this.state = {
error: null,
album: null,
media_items: null,
};
}
componentDidMount() {
@ -15,25 +15,26 @@ class Album extends React.Component {
fetch(process.env.PUBLIC_URL + `/photosync/${album}/album.json`)
.then(res => res.json())
.then(
(result) => this.setState({album: result}),
(result) => this.setState({media_items: result}),
(error) => this.setState({error}),
);
}
render() {
let {error, album} = this.state;
let {album} = this.props;
let {error, media_items} = this.state;
console.log(this.state);
if (error !== null) {
return <h2>Error: {JSON.stringify(error)}</h2>;
} else if (album !== null) {
console.log(album);
return album.map((a) => {
} else if (media_items !== null) {
console.log(media_items);
return media_items.map((mi) => {
// TODO(wathiede): use coverPhotoMediaItemId and fetch from a
// locally cached image.
return <figure key={ a.id } className="figure">
<img src={ a.baseUrl + "=w256-h256-c" } className="mr-3" alt={ a.filename }/>
return <figure key={ mi.id } className="figure">
<img src={ `/photosync/${album}/${mi.id}/${mi.filename}?thumb` } className="mr-3" alt={ mi.filename }/>
<figcaption className="figure-caption">
<a key={ a.id } href={ a.productUrl }>
<p className="text-truncate">{ a.filename}</p>
<a key={ mi.id } href={ mi.productUrl }>
<p className="text-truncate">{ mi.filename}</p>
</a>
</figcaption>
</figure>