326 add download link #376
3 changed files with 75 additions and 106 deletions
|
|
@ -158,6 +158,13 @@ a, a:visited {
|
||||||
color: #4156C5;
|
color: #4156C5;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.link--secondary, .link--secondary:visited {
|
||||||
|
font-size: medium;
|
||||||
|
margin: 0px;
|
||||||
|
padding: 0.3em;
|
||||||
|
color: #9b9b9b;
|
||||||
|
}
|
||||||
|
|
||||||
.link--nav {
|
.link--nav {
|
||||||
color: black;
|
color: black;
|
||||||
border-bottom: 2px solid white;
|
border-bottom: 2px solid white;
|
||||||
|
|
@ -461,6 +468,10 @@ button {
|
||||||
color: #9b9b9b;
|
color: #9b9b9b;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.button--wide {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
/* TABLES */
|
/* TABLES */
|
||||||
|
|
||||||
table {
|
table {
|
||||||
|
|
|
||||||
|
|
@ -4,18 +4,8 @@ import { Link } from 'react-router-dom';
|
||||||
class AssetInfo extends React.Component {
|
class AssetInfo extends React.Component {
|
||||||
constructor (props) {
|
constructor (props) {
|
||||||
super(props);
|
super(props);
|
||||||
this.state = {
|
|
||||||
showDetails: false,
|
|
||||||
};
|
|
||||||
this.toggleDetails = this.toggleDetails.bind(this);
|
|
||||||
this.copyToClipboard = this.copyToClipboard.bind(this);
|
this.copyToClipboard = this.copyToClipboard.bind(this);
|
||||||
}
|
}
|
||||||
toggleDetails () {
|
|
||||||
if (this.state.showDetails) {
|
|
||||||
return this.setState({showDetails: false});
|
|
||||||
}
|
|
||||||
this.setState({showDetails: true});
|
|
||||||
}
|
|
||||||
copyToClipboard (event) {
|
copyToClipboard (event) {
|
||||||
var elementToCopy = event.target.dataset.elementtocopy;
|
var elementToCopy = event.target.dataset.elementtocopy;
|
||||||
var element = document.getElementById(elementToCopy);
|
var element = document.getElementById(elementToCopy);
|
||||||
|
|
@ -31,69 +21,86 @@ class AssetInfo extends React.Component {
|
||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
{channelName &&
|
{channelName &&
|
||||||
<div className="row row--padded row--wide row--no-top">
|
<div className='row row--padded row--wide row--no-top'>
|
||||||
<div className="column column--2 column--med-10">
|
<div className='column column--2 column--med-10'>
|
||||||
<span className="text">Channel:</span>
|
<span className='text'>Channel:</span>
|
||||||
</div>
|
</div>
|
||||||
<div className="column column--8 column--med-10">
|
<div className='column column--8 column--med-10'>
|
||||||
<span className="text"><Link to={`/${channelName}:${certificateId}`}>{channelName}</Link></span>
|
<span className='text'><Link to={`/${channelName}:${certificateId}`}>{channelName}</Link></span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
}
|
}
|
||||||
|
|
||||||
{description &&
|
{description &&
|
||||||
<div className="row row--padded row--wide row--no-top">
|
<div className='row row--padded row--wide row--no-top'>
|
||||||
<span className="text">{description}</span>
|
<span className='text'>{description}</span>
|
||||||
</div>
|
</div>
|
||||||
}
|
}
|
||||||
|
|
||||||
<div className="row row--padded row--wide row--no-top">
|
<div id='show-share-buttons'>
|
||||||
<div id="show-short-link">
|
<div className='row row--padded row--wide row--no-top'>
|
||||||
<div className="column column--2 column--med-10">
|
<div className='column column--2 column--med-10'>
|
||||||
<Link className="link--primary" to={`/${shortId}/${name}.${fileExt}`}><span
|
<span className='text'>Share:</span>
|
||||||
className="text">Link:</span></Link>
|
|
||||||
</div>
|
</div>
|
||||||
<div className="column column--8 column--med-10">
|
<div className='column column--8 column--med-10'>
|
||||||
<div className="row row--short row--wide">
|
<div
|
||||||
<div className="column column--7">
|
className='row row--short row--wide flex-container--row flex-container--space-between-bottom flex-container--wrap'>
|
||||||
<div className="input-error" id="input-error-copy-short-link" hidden="true">error here</div>
|
<a className='link--primary' target='_blank' href={`https://twitter.com/intent/tweet?text=${host}/${shortId}/${name}`}>twitter</a>
|
||||||
<input type="text" id="short-link" className="input-disabled input-text--full-width" readOnly
|
<a className='link--primary' target='_blank' href={`https://www.facebook.com/sharer/sharer.php?u=${host}/${shortId}/${name}`}>facebook</a>
|
||||||
spellCheck="false"
|
<a className='link--primary' target='_blank' href={`http://tumblr.com/widgets/share/tool?canonicalUrl=${host}/${shortId}/${name}`}>tumblr</a>
|
||||||
value={`${host}/${shortId}/${name}.${fileExt}`}
|
<a className='link--primary' target='_blank' href={`https://www.reddit.com/submit?url=${host}/${shortId}/${name}&title=${name}`}>reddit</a>
|
||||||
onClick={this.select}/>
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className='row row--padded row--wide row--no-top'>
|
||||||
|
<div id='show-short-link'>
|
||||||
|
<div className='column column--2 column--med-10'>
|
||||||
|
<span className='text'>Link:</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-short-link' hidden='true'>error here</div>
|
||||||
|
<input type='text' id='short-link' className='input-disabled input-text--full-width' readOnly
|
||||||
|
spellCheck='false'
|
||||||
|
value={`${host}/${shortId}/${name}.${fileExt}`}
|
||||||
|
onClick={this.select} />
|
||||||
</div>
|
</div>
|
||||||
<div className="column column--1"> </div>
|
<div className='column column--1' />
|
||||||
<div className="column column--2">
|
<div className='column column--2'>
|
||||||
<button className="button--primary" data-elementtocopy="short-link"
|
<button className='button--primary button--wide' data-elementtocopy='short-link'
|
||||||
onClick={this.copyToClipboard}>copy
|
onClick={this.copyToClipboard}>copy
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div id="show-embed-code">
|
|
||||||
<div className="column column--2 column--med-10">
|
<div id='show-embed-code'>
|
||||||
<span className="text">Embed:</span>
|
<div className='column column--2 column--med-10'>
|
||||||
|
<span className='text'>Embed:</span>
|
||||||
</div>
|
</div>
|
||||||
<div className="column column--8 column--med-10">
|
<div className='column column--8 column--med-10'>
|
||||||
<div className="row row--short row--wide">
|
<div className='row row--short row--wide'>
|
||||||
<div className="column column--7">
|
<div className='column column--7'>
|
||||||
<div className="input-error" id="input-error-copy-embed-text" hidden="true">error here</div>
|
<div className='input-error' id='input-error-copy-embed-text' hidden='true'>error here</div>
|
||||||
{(contentType === 'video/mp4') ? (
|
{(contentType === 'video/mp4') ? (
|
||||||
<input type="text" id="embed-text" className="input-disabled input-text--full-width" readOnly
|
<input type='text' id='embed-text' className='input-disabled input-text--full-width' readOnly
|
||||||
onClick={this.select} spellCheck="false"
|
onClick={this.select} spellCheck='false'
|
||||||
value={`<video width="100%" controls poster="${thumbnail}" src="${host}/${claimId}/${name}.${fileExt}"/></video>`}/>
|
value={`<video width="100%" controls poster="${thumbnail}" src="${host}/${claimId}/${name}.${fileExt}"/></video>`} />
|
||||||
) : (
|
) : (
|
||||||
<input type="text" id="embed-text" className="input-disabled input-text--full-width" readOnly
|
<input type='text' id='embed-text' className='input-disabled input-text--full-width' readOnly
|
||||||
onClick={this.select} spellCheck="false"
|
onClick={this.select} spellCheck='false'
|
||||||
value={`<img src="${host}/${claimId}/${name}.${fileExt}"/>`}
|
value={`<img src="${host}/${claimId}/${name}.${fileExt}"/>`}
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
<div className="column column--1"> </div>
|
<div className='column column--1' />
|
||||||
<div className="column column--2">
|
<div className='column column--2'>
|
||||||
<button className="button--primary" data-elementtocopy="embed-text"
|
<button className='button--primary button--wide' data-elementtocopy='embed-text'
|
||||||
onClick={this.copyToClipboard}>copy
|
onClick={this.copyToClipboard}>copy
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -101,62 +108,13 @@ class AssetInfo extends React.Component {
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="show-share-buttons">
|
<div className='flex-container--row flex-container--space-between-bottom'>
|
||||||
<div className="row row--padded row--wide row--no-top">
|
<Link className='link--primary' to={`/${shortId}/${name}.${fileExt}`}><span
|
||||||
<div className="column column--2 column--med-10">
|
className='text'>Direct Link</span></Link>
|
||||||
<span className="text">Share:</span>
|
<a className='link--primary' href={`${host}/${claimId}/${name}.${fileExt}`} download={name}>Download</a>
|
||||||
</div>
|
<a className='link--primary' target='_blank' href='https://lbry.io/dmca'>Report</a>
|
||||||
<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=${host}/${shortId}/${name}`}>twitter</a>
|
|
||||||
<a className="link--primary" target="_blank"
|
|
||||||
href={`https://www.facebook.com/sharer/sharer.php?u=${host}/${shortId}/${name}`}>facebook</a>
|
|
||||||
<a className="link--primary" target="_blank"
|
|
||||||
href={`http://tumblr.com/widgets/share/tool?canonicalUrl=${host}/${shortId}/${name}`}>tumblr</a>
|
|
||||||
<a className="link--primary" target="_blank"
|
|
||||||
href={`https://www.reddit.com/submit?url=${host}/${shortId}/${name}&title=${name}`}>reddit</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{ this.state.showDetails &&
|
|
||||||
<div>
|
|
||||||
<div className="row--padded row--wide row--no-top">
|
|
||||||
<div>
|
|
||||||
<div className="column column--2 column--med-10">
|
|
||||||
<span className="text">Claim Name:</span>
|
|
||||||
</div><div className="column column--8 column--med-10">
|
|
||||||
{name}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<div className="column column--2 column--med-10">
|
|
||||||
<span className="text">Claim Id:</span>
|
|
||||||
</div><div className="column column--8 column--med-10">
|
|
||||||
{claimId}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<div className="column column--2 column--med-10">
|
|
||||||
<span className="text">File Type:</span>
|
|
||||||
</div><div className="column column--8 column--med-10">
|
|
||||||
{contentType ? `${contentType}` : 'unknown'}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="row--padded row--wide row--no-top">
|
|
||||||
<div className="column column--10">
|
|
||||||
<a target="_blank" href="https://lbry.io/dmca">Report</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
}
|
|
||||||
<div className="row row--wide">
|
|
||||||
<button className="button--secondary" onClick={this.toggleDetails}>{this.state.showDetails ? 'less' : 'more'}</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -10,7 +10,7 @@ class ShowAssetDetails extends React.Component {
|
||||||
render () {
|
render () {
|
||||||
const { asset } = this.props;
|
const { asset } = this.props;
|
||||||
if (asset) {
|
if (asset) {
|
||||||
const { name } = asset.claimData;
|
const { claimData: { name } } = asset;
|
||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
<SEO pageTitle={`${name} - details`} asset={asset} />
|
<SEO pageTitle={`${name} - details`} asset={asset} />
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue