Forgot to stage the rest of my code, thanks VS Code.
This commit is contained in:
parent
81f97c1331
commit
e0b15691b9
3 changed files with 124 additions and 99 deletions
|
@ -6,6 +6,10 @@ a, a:visited {
|
|||
color: $interactive-color;
|
||||
}
|
||||
|
||||
.link--brand, .link--brand:visited {
|
||||
color: $brand-color;
|
||||
}
|
||||
|
||||
.link--secondary, .link--secondary:visited {
|
||||
margin: 0px;
|
||||
padding: 0.3em;
|
||||
|
|
|
@ -18,6 +18,23 @@
|
|||
width: 70%;
|
||||
}
|
||||
|
||||
.row-labeled-alt {
|
||||
display: column;
|
||||
flex-direction: row;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: flex-start;
|
||||
|
||||
.row-labeled-label {
|
||||
align-self: flex-start;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.row-labeled-content {
|
||||
align-self: center;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media (max-width: $break-point-medium ) {
|
||||
|
||||
|
|
|
@ -12,7 +12,7 @@ class AssetInfo extends React.Component {
|
|||
render () {
|
||||
const { asset: { shortId, claimData : { channelName, certificateId, description, name, claimId, fileExt, contentType, thumbnail, host } } } = this.props;
|
||||
return (
|
||||
<div className='asset-information'>
|
||||
<div className='asset-information-wrap'>
|
||||
<HorizontalSplit
|
||||
leftSide={
|
||||
<div className='asset-description'>
|
||||
|
@ -21,106 +21,110 @@ class AssetInfo extends React.Component {
|
|||
)}
|
||||
</div>
|
||||
}
|
||||
rightSide={''}
|
||||
rightSide={
|
||||
<div className='asset-information'>
|
||||
{channelName && (
|
||||
<Row>
|
||||
<RowLabeled
|
||||
label={
|
||||
<Label value={'Channel'} />
|
||||
}
|
||||
content={
|
||||
<span className='text'>
|
||||
<Link className='link--brand' to={`/${channelName}:${certificateId}`}>{channelName}</Link>
|
||||
</span>
|
||||
}
|
||||
/>
|
||||
</Row>
|
||||
)}
|
||||
|
||||
<Row>
|
||||
<RowLabeled
|
||||
label={
|
||||
<Label value={'Share'} />
|
||||
}
|
||||
content={
|
||||
<AssetShareButtons
|
||||
host={host}
|
||||
name={name}
|
||||
shortId={shortId}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
</Row>
|
||||
|
||||
<Row>
|
||||
<RowLabeled
|
||||
label={
|
||||
<Label value={'Link'} />
|
||||
}
|
||||
content={
|
||||
<ClickToCopy
|
||||
id={'short-link'}
|
||||
value={`${host}/${shortId}/${name}`}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
</Row>
|
||||
|
||||
<Row>
|
||||
<RowLabeled
|
||||
label={
|
||||
<Label value={'Embed'} />
|
||||
}
|
||||
content={
|
||||
<div>
|
||||
{(contentType === 'video/mp4') ? (
|
||||
<ClickToCopy
|
||||
id={'embed-text-video'}
|
||||
value={`<video width="100%" controls poster="${thumbnail}" src="${host}/${claimId}/${name}.${fileExt}"/></video>`}
|
||||
/>
|
||||
) : (
|
||||
<ClickToCopy
|
||||
id={'embed-text-image'}
|
||||
value={`<img src="${host}/${claimId}/${name}.${fileExt}"/>`}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
}
|
||||
/>
|
||||
</Row>
|
||||
|
||||
<Row>
|
||||
<SpaceBetween>
|
||||
<a
|
||||
className='link--brand'
|
||||
href={`${host}/${claimId}/${name}.${fileExt}`}
|
||||
>
|
||||
Direct Link
|
||||
</a>
|
||||
<a
|
||||
className={'link--brand'}
|
||||
href={`${host}/${claimId}/${name}.${fileExt}`}
|
||||
download={name}
|
||||
>
|
||||
Download
|
||||
</a>
|
||||
<a
|
||||
className={'link--brand'}
|
||||
target='_blank'
|
||||
href='https://lbry.io/dmca'
|
||||
>
|
||||
Report
|
||||
</a>
|
||||
</SpaceBetween>
|
||||
</Row>
|
||||
|
||||
<Row>
|
||||
<p>
|
||||
Hosted via the <a className={'link--brand'} href={'https://lbry.io/get'} target={'_blank'}>LBRY</a> blockchain
|
||||
</p>
|
||||
</Row>
|
||||
|
||||
</div>
|
||||
}
|
||||
/>
|
||||
|
||||
{channelName && (
|
||||
<Row>
|
||||
<RowLabeled
|
||||
label={
|
||||
<Label value={'Channel:'} />
|
||||
}
|
||||
content={
|
||||
<span className='text'>
|
||||
<Link to={`/${channelName}:${certificateId}`}>{channelName}</Link>
|
||||
</span>
|
||||
}
|
||||
/>
|
||||
</Row>
|
||||
)}
|
||||
|
||||
<Row>
|
||||
<RowLabeled
|
||||
label={
|
||||
<Label value={'Share:'} />
|
||||
}
|
||||
content={
|
||||
<AssetShareButtons
|
||||
host={host}
|
||||
name={name}
|
||||
shortId={shortId}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
</Row>
|
||||
|
||||
<Row>
|
||||
<RowLabeled
|
||||
label={
|
||||
<Label value={'Link:'} />
|
||||
}
|
||||
content={
|
||||
<ClickToCopy
|
||||
id={'short-link'}
|
||||
value={`${host}/${shortId}/${name}`}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
</Row>
|
||||
|
||||
<Row>
|
||||
<RowLabeled
|
||||
label={
|
||||
<Label value={'Embed:'} />
|
||||
}
|
||||
content={
|
||||
<div>
|
||||
{(contentType === 'video/mp4') ? (
|
||||
<ClickToCopy
|
||||
id={'embed-text-video'}
|
||||
value={`<video width="100%" controls poster="${thumbnail}" src="${host}/${claimId}/${name}.${fileExt}"/></video>`}
|
||||
/>
|
||||
) : (
|
||||
<ClickToCopy
|
||||
id={'embed-text-image'}
|
||||
value={`<img src="${host}/${claimId}/${name}.${fileExt}"/>`}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
}
|
||||
/>
|
||||
</Row>
|
||||
|
||||
<Row>
|
||||
<SpaceBetween>
|
||||
<a
|
||||
className='link--primary'
|
||||
href={`${host}/${claimId}/${name}.${fileExt}`}
|
||||
>
|
||||
Direct Link
|
||||
</a>
|
||||
<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>
|
||||
</SpaceBetween>
|
||||
</Row>
|
||||
|
||||
<Row>
|
||||
<p>
|
||||
Hosted via the <a className={'link--primary'} href={'https://lbry.io/get'} target={'_blank'}>LBRY</a> blockchain
|
||||
</p>
|
||||
</Row>
|
||||
|
||||
</div>
|
||||
);
|
||||
|
|
Loading…
Reference in a new issue