added basic asset preview

This commit is contained in:
bill bittner 2018-01-31 10:40:26 -08:00
parent 6ac91046b1
commit e6e50a1253
2 changed files with 46 additions and 10 deletions

View file

@ -1,11 +1,48 @@
import React from 'react';
const AssetPreview = ({ name, claimId, contentType }) => {
return (
<div>
<p>name: {name}, claimId: {claimId}, contentType: {contentType}</p>
</div>
);
const AssetPreview = ({ name, claimId, fileExt, contentType }) => {
const directSourceLink = `${claimId}/${name}.${fileExt}`;
const previewHolderStyle = {
clear: 'both',
display: 'inline-block',
width: '31%',
padding: '0px',
margin: '1%',
backgroundColor: 'black',
};
const assetStyle = {
width: '100%',
padding: '0px',
margin: '0px',
};
switch (contentType) {
case 'image/jpeg':
case 'image/jpg':
case 'image/png':
return (
<div style={previewHolderStyle}>
<img style={assetStyle} className={'asset-preview--image'} src={directSourceLink} alt={name} />
</div>
);
case 'image/gif':
return (
<div style={previewHolderStyle}>
<img style={assetStyle} className={'asset-preview--gif'} src={directSourceLink} alt={name} />
</div>
);
case 'video/mp4':
return (
<div style={previewHolderStyle}>
<video style={assetStyle}>
<source src={directSourceLink} type={contentType} />
</video>
</div>
);
default:
return (
<p>unsupported file type</p>
);
}
};
export default AssetPreview;

View file

@ -21,19 +21,18 @@ class ShowChannel extends React.Component {
this.updateChannelData = this.updateChannelData.bind(this);
}
componentDidMount () {
console.log(this.props);
this.updateChannelData(1);
}
updateChannelData (page) {
const that = this;
const channelName = this.props.channelName;
const channelClaimId = this.props.channelClaimId || 'none';
const url = `/api/channel-get-content/${channelName}/${channelClaimId}/${page}`;
const that = this;
return request(url)
.then(({ success, message, data }) => {
console.log('get channel data response:', data);
if (!success) {
return this.setState({error: message});
return that.setState({error: message});
}
that.setState({
channelName : data.channelName,
@ -67,7 +66,7 @@ class ShowChannel extends React.Component {
<h2>channel name: {this.props.channelName}</h2>
<p>full channel id: {this.state.longChannelClaimId ? this.state.longChannelClaimId : 'loading...'}</p>
<p>short channel id: {this.state.shortChannelClaimId ? this.state.shortChannelClaimId : 'loading...'}</p>
<p># of claims in channel: {this.state.totalResults ? this.state.totalResults : 'loading...' }</p>
<p># of claims in channel: {this.state.totalResults >= 0 ? this.state.totalResults : 'loading...' }</p>
</div>
<div className="column column--10">
<div>