added basic asset preview
This commit is contained in:
parent
6ac91046b1
commit
e6e50a1253
2 changed files with 46 additions and 10 deletions
|
@ -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;
|
||||
|
|
|
@ -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>
|
||||
|
|
Loading…
Reference in a new issue