added basic tags to AssetInfo component
This commit is contained in:
bill bittner
parent
f7e50597e6
commit
37442cd9e6
2 changed files with 169 additions and 9 deletions
|
|
@ -1,12 +1,173 @@
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
|
|
||||||
const AssetTitle = ({claimId}) => {
|
class AssetInfo extends React.Component {
|
||||||
|
constructor (props) {
|
||||||
|
super(props);
|
||||||
|
this.toggleSection = this.toggleSection.bind(this);
|
||||||
|
this.copyToClipboard = this.copyToClipboard.bind(this);
|
||||||
|
}
|
||||||
|
toggleSection (event) {
|
||||||
|
var dataSet = event.target.dataset;
|
||||||
|
var status = dataSet.status;
|
||||||
|
var toggle = document.getElementById('show-details-toggle');
|
||||||
|
var details = document.getElementById('show-details');
|
||||||
|
if (status === 'closed') {
|
||||||
|
details.hidden = false;
|
||||||
|
toggle.innerText = '[less]';
|
||||||
|
toggle.dataset.status = 'open';
|
||||||
|
} else {
|
||||||
|
details.hidden = true;
|
||||||
|
toggle.innerText = '[more]';
|
||||||
|
toggle.dataset.status = 'closed';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
copyToClipboard (event) {
|
||||||
|
var elementToCopy = event.target.dataset.elementtocopy;
|
||||||
|
var element = document.getElementById(elementToCopy);
|
||||||
|
element.select();
|
||||||
|
try {
|
||||||
|
document.execCommand('copy');
|
||||||
|
} catch (err) {
|
||||||
|
this.setState({error: 'Oops, unable to copy'});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
render () {
|
||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
<p>Show asset info here</p>
|
{this.props.channelName &&
|
||||||
<p>claimId: {claimId}</p>
|
<div className="row row--padded row--wide row--no-top">
|
||||||
|
<div className="column column--2 column--med-10">
|
||||||
|
<span className="text">Channel:</span>
|
||||||
|
</div>
|
||||||
|
<div className="column column--8 column--med-10">
|
||||||
|
<span className="text"><a href={`/${this.props.channelName}:${this.props.certificateId}`}>{this.props.channelName}</a></span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
|
||||||
|
{this.props.description &&
|
||||||
|
<div className="row row--padded row--wide row--no-top">
|
||||||
|
<span className="text">{this.props.description}</span>
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
|
||||||
|
<div className="row row--padded row--wide row--no-top">
|
||||||
|
<div id="show-short-link">
|
||||||
|
<div className="column column--2 column--med-10">
|
||||||
|
<a className="link--primary" href={`/${this.props.shortId}/${this.props.name}.${this.props.fileExt}`}><span
|
||||||
|
className="text">Link:</span></a>
|
||||||
|
</div>
|
||||||
|
<div className="column column--8 column--med-10">
|
||||||
|
<div className="row row--short row--wide">
|
||||||
|
<div className="column column--7">
|
||||||
|
<div className="input-error" id="input-error-copy-short-link" hidden="true">error here</div>
|
||||||
|
<input type="text" id="short-link" className="input-disabled input-text--full-width" readOnly
|
||||||
|
spellCheck="false"
|
||||||
|
value={`${this.props.host}/${this.props.shortId}/${this.props.name}.${this.props.fileExt}`}
|
||||||
|
onClick={this.select}/>
|
||||||
|
</div>
|
||||||
|
<div className="column column--1"> </div>
|
||||||
|
<div className="column column--2">
|
||||||
|
<button className="button--primary" data-elementtocopy="short-link"
|
||||||
|
onClick={this.copyToClipboard}>copy
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div id="show-embed-code">
|
||||||
|
<div className="column column--2 column--med-10">
|
||||||
|
<span className="text">Embed:</span>
|
||||||
|
</div>
|
||||||
|
<div className="column column--8 column--med-10">
|
||||||
|
<div className="row row--short row--wide">
|
||||||
|
<div className="column column--7">
|
||||||
|
<div className="input-error" id="input-error-copy-embed-text" hidden="true">error here</div>
|
||||||
|
{(this.props.contentType === 'video/mp4') ? (
|
||||||
|
<input type="text" id="embed-text" className="input-disabled input-text--full-width" readOnly
|
||||||
|
onClick={this.select} spellCheck="false"
|
||||||
|
value={`<video width="100%" controls poster="${this.props.thumbnail}" src="${this.props.host}/{claimInfo.claimId}/${this.props.name}.${this.props.fileExt}"/></video>`}/>
|
||||||
|
) : (
|
||||||
|
<input type="text" id="embed-text" className="input-disabled input-text--full-width" readOnly
|
||||||
|
onClick={this.select} spellCheck="false"
|
||||||
|
value={`<img src="${this.props.host}/${this.props.claimId}/${this.props.name}.${this.props.fileExt}"/>`}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<div className="column column--1"> </div>
|
||||||
|
<div className="column column--2">
|
||||||
|
<button className="button--primary" data-elementtocopy="embed-text"
|
||||||
|
onClick={this.copyToClipboard}>copy
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="show-share-buttons">
|
||||||
|
<div className="row row--padded row--wide row--no-top">
|
||||||
|
<div className="column column--2 column--med-10">
|
||||||
|
<span className="text">Share:</span>
|
||||||
|
</div>
|
||||||
|
<div className="column column--7 column--med-10">
|
||||||
|
<div
|
||||||
|
className="row row--short row--wide flex-container--row flex-container--space-between-bottom flex-container--wrap">
|
||||||
|
<a className="link--primary" target="_blank"
|
||||||
|
href={`https://twitter.com/intent/tweet?text=${this.props.host}/${this.props.shortId}/${this.props.name}`}>twitter</a>
|
||||||
|
<a className="link--primary" target="_blank"
|
||||||
|
href={`https://www.facebook.com/sharer/sharer.php?u=${this.props.host}/${this.props.shortId}/${this.props.name}`}>facebook</a>
|
||||||
|
<a className="link--primary" target="_blank"
|
||||||
|
href={`http://tumblr.com/widgets/share/tool?canonicalUrl=${this.props.host}/${this.props.shortId}/${this.props.name}`}>tumblr</a>
|
||||||
|
<a className="link--primary" target="_blank"
|
||||||
|
href={`https://www.reddit.com/submit?url=${this.props.host}/${this.props.shortId}/${this.props.name}&title=${this.props.name}`}>reddit</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="show-details" className="row--padded row--wide row--no-top" hidden="true">
|
||||||
|
<div id="show-claim-name">
|
||||||
|
<div className="column column--2 column--med-10">
|
||||||
|
<span className="text">Claim Name:</span>
|
||||||
|
</div>
|
||||||
|
<div className="column column--8 column--med-10">
|
||||||
|
{this.props.name}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div id="show-claim-id">
|
||||||
|
<div className="column column--2 column--med-10">
|
||||||
|
<span className="text">Claim Id:</span>
|
||||||
|
</div>
|
||||||
|
<div className="column column--8 column--med-10">
|
||||||
|
{this.props.claimId}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div id="show-claim-id">
|
||||||
|
<div className="column column--2 column--med-10">
|
||||||
|
<span className="text">File Type:</span>
|
||||||
|
</div>
|
||||||
|
<div className="column column--8 column--med-10">
|
||||||
|
{this.props.contentType ? `${this.props.contentType}` : 'unknown'}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div id="show-claim-id">
|
||||||
|
<div className="column column--10">
|
||||||
|
<a target="_blank" href="https://lbry.io/dmca">Report</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="row row--wide">
|
||||||
|
<a className="text link--primary" id="show-details-toggle" href="#" onClick={this.toggleSection}
|
||||||
|
data-status="closed">[more]</a>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
export default AssetTitle;
|
// required props
|
||||||
|
// {channelName, certificateId, description, shortId, name, fileExt, claimId, contentType, thumbnail, host}
|
||||||
|
|
||||||
|
export default AssetInfo;
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,4 @@
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import NavBar from 'containers/NavBar';
|
|
||||||
import AssetPreview from 'components/AssetPreview';
|
import AssetPreview from 'components/AssetPreview';
|
||||||
import request from 'utils/request';
|
import request from 'utils/request';
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue