LBRYCommunity/spee.ch
1
0
Fork 0
Code Issues 95 Pull requests 2 Packages Projects Releases 4 Wiki Activity

326 add download link #376

Merged
bones7242 merged 2 commits from 326-add-download-link into master 2018-03-08 00:22:29 +01:00
Conversation 0 Commits 2 Files changed 3 +75 -106
3 changed files with 75 additions and 106 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
public/assets/css/general.css
View file

@ -158,6 +158,13 @@ a, a:visited {
color: #4156C5;
}
.link--secondary, .link--secondary:visited {
font-size: medium;
margin: 0px;
padding: 0.3em;
color: #9b9b9b;
}
.link--nav {
color: black;
border-bottom: 2px solid white;
@ -461,6 +468,10 @@ button {
color: #9b9b9b;
}
.button--wide {
width: 100%;
}
/* TABLES */
table {

168
react/components/AssetInfo/view.jsx
View file

@ -4,18 +4,8 @@ import { Link } from 'react-router-dom';
class AssetInfo extends React.Component {
constructor (props) {
super(props);
this.state = {
showDetails: false,
};
this.toggleDetails = this.toggleDetails.bind(this);
this.copyToClipboard = this.copyToClipboard.bind(this);
}
toggleDetails () {
if (this.state.showDetails) {
return this.setState({showDetails: false});
}
this.setState({showDetails: true});
}
copyToClipboard (event) {
var elementToCopy = event.target.dataset.elementtocopy;
var element = document.getElementById(elementToCopy);
@ -31,69 +21,86 @@ class AssetInfo extends React.Component {
return (
<div>
{channelName &&
<div className="row row--padded row--wide row--no-top">
<div className="column column--2 column--med-10">
<span className="text">Channel:</span>
<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"><Link to={`/${channelName}:${certificateId}`}>{channelName}</Link></span>
<div className='column column--8 column--med-10'>
<span className='text'><Link to={`/${channelName}:${certificateId}`}>{channelName}</Link></span>
</div>
</div>
}
{description &&
<div className="row row--padded row--wide row--no-top">
<span className="text">{description}</span>
<div className='row row--padded row--wide row--no-top'>
<span className='text'>{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">
<Link className="link--primary" to={`/${shortId}/${name}.${fileExt}`}><span
className="text">Link:</span></Link>
<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--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 className='column column--8 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 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 className="column column--1"> </div>
<div className="column column--2">
<button className="button--primary" data-elementtocopy="short-link"
onClick={this.copyToClipboard}>copy
<div className='column column--1' />
<div className='column column--2'>
<button className='button--primary button--wide' 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 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>
<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>
{(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="${thumbnail}" src="${host}/${claimId}/${name}.${fileExt}"/></video>`}/>
<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="${thumbnail}" src="${host}/${claimId}/${name}.${fileExt}"/></video>`} />
) : (
<input type="text" id="embed-text" className="input-disabled input-text--full-width" readOnly
onClick={this.select} spellCheck="false"
value={`<img src="${host}/${claimId}/${name}.${fileExt}"/>`}
<input type='text' id='embed-text' className='input-disabled input-text--full-width' readOnly
onClick={this.select} spellCheck='false'
value={`<img src="${host}/${claimId}/${name}.${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
<div className='column column--1' />
<div className='column column--2'>
<button className='button--primary button--wide' data-elementtocopy='embed-text'
onClick={this.copyToClipboard}>copy
</button>
</div>
</div>
@ -101,62 +108,13 @@ class AssetInfo extends React.Component {
</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=${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 className='flex-container--row flex-container--space-between-bottom'>
<Link className='link--primary' to={`/${shortId}/${name}.${fileExt}`}><span
className='text'>Direct Link</span></Link>
<a className='link--primary' href={`${host}/${claimId}/${name}.${fileExt}`} download={name}>Download</a>
<a className='link--primary' target='_blank' href='https://lbry.io/dmca'>Report</a>
</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>
);
}

2
react/components/ShowAssetDetails/view.jsx
View file

@ -10,7 +10,7 @@ class ShowAssetDetails extends React.Component {
render () {
const { asset } = this.props;
if (asset) {
const { name } = asset.claimData;
const { claimData: { name } } = asset;
return (
<div>
<SEO pageTitle={`${name} - details`} asset={asset} />