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

Design cleanup

Browse source
This commit is contained in:
Minesh Mitha 2018-10-11 20:51:34 +01:00
parent 57fab11316
commit 00bebfaa8a
5 changed files with 106 additions and 62 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

39
client/scss/asset-display/_asset-display.scss
View file

@ -3,11 +3,32 @@
flex: 1 0 auto;
flex-direction: column;
justify-content: center;
background: #E9E8E8;
width: 100%;
position: relative;
&:before,
&:after {
content: '';
position: absolute;
box-shadow: inset 0 1px 3px 2px rgba(169, 173, 186, 0.2);
width: 100%;
height: 1px;
background: transparent;
left: 0;
top: 0;
}
&:after {
top: auto;
bottom: 0;
}
}
.asset-title-wrap {
margin-top: 90px;
.asset-title {
margin-top: 40px;
font-weight: normal;
font-size: 26px;
color: #2E2F31;
@ -15,10 +36,9 @@
text-align: center;
line-height: 32px;
}
}
.asset-image, .asset-video {
margin : 0;
margin : 60px 0;
max-width: 100%;
max-height: 100%;
object-fit: contain;
@ -29,10 +49,15 @@
margin: 16px;
padding: 6px;
}
.vertical-split .asset-display {
height: 90vh;
}
// .vertical-split .asset-display {
// height: 90vh;
// }
.visible-content {
width: 100%;
margin: 0 0 40px;
}
.asset-information-wrap {
max-width: 800px;

1
client/scss/page-layout/_page-layout.scss
View file

@ -7,6 +7,5 @@
display: flex;
-webkit-flex-direction: column;
flex-direction: column;
margin: $primary-padding;
}
}

18
client/src/components/VerticalCollapsibleSplit/index.jsx Normal file
View file

@ -0,0 +1,18 @@
import React from 'react';
class VerticalCollapsibleSplit extends React.Component {
render () {
return (
<div className={'vertical-split'}>
<div className='visible-content'>
{this.props.top}
</div>
<div className='collapse-content'>
{this.props.bottom}
</div>
</div>
);
}
}
export default VerticalCollapsibleSplit;

104
client/src/containers/AssetDisplay/view.jsx
View file

@ -12,58 +12,60 @@ class AssetDisplay extends React.Component {
const { status, error, asset: { claimData: { name, claimId, contentType, fileExt, thumbnail } } } = this.props;
const sourceUrl = `/${claimId}/${name}.${fileExt}`;
return (
<div className={'asset-display'}>
{(status === LOCAL_CHECK) &&
<div>
<p>Checking to see if Spee.ch has your asset locally...</p>
</div>
}
{(status === UNAVAILABLE) &&
<div>
<p>Sit tight, we're searching the LBRY blockchain for your asset!</p>
<ProgressBar size={12} />
<p>Curious what magic is happening here? <a className='link--primary' target='blank' href='https://lbry.io/faq/what-is-lbry'>Learn more.</a></p>
</div>
}
{(status === ERROR) &&
<div>
<p>Unfortunately, we couldn't download your asset from LBRY. You can help us out by sharing the below error message in the <a className='link--primary' href='https://chat.lbry.io' target='_blank'>LBRY discord</a>.</p>
<i><p id='error-message'>{error}</p></i>
</div>
}
{(status === AVAILABLE) &&
(() => {
switch (contentType) {
case 'image/jpeg':
case 'image/jpg':
case 'image/png':
case 'image/gif':
return (
<img
className='asset-image'
src={sourceUrl}
alt={name}
/>
);
case 'video/mp4':
return (
<video
className='asset-video'
controls poster={thumbnail}
>
<source
src={sourceUrl}
/>
<p>Your browser does not support the <code>video</code> element.</p>
</video>
);
default:
return (
<p>Unsupported content type</p>
);
<div className={'asset-display-wrap'}>
<div className={'asset-display'}>
{(status === LOCAL_CHECK) &&
<div>
<p>Checking to see if Spee.ch has your asset locally...</p>
</div>
}
})()
}
{(status === UNAVAILABLE) &&
<div>
<p>Sit tight, we're searching the LBRY blockchain for your asset!</p>
<ProgressBar size={12} />
<p>Curious what magic is happening here? <a className='link--primary' target='blank' href='https://lbry.io/faq/what-is-lbry'>Learn more.</a></p>
</div>
}
{(status === ERROR) &&
<div>
<p>Unfortunately, we couldn't download your asset from LBRY. You can help us out by sharing the below error message in the <a className='link--primary' href='https://chat.lbry.io' target='_blank'>LBRY discord</a>.</p>
<i><p id='error-message'>{error}</p></i>
</div>
}
{(status === AVAILABLE) &&
(() => {
switch (contentType) {
case 'image/jpeg':
case 'image/jpg':
case 'image/png':
case 'image/gif':
return (
<img
className='asset-image'
src={sourceUrl}
alt={name}
/>
);
case 'video/mp4':
return (
<video
className='asset-video'
controls poster={thumbnail}
>
<source
src={sourceUrl}
/>
<p>Your browser does not support the <code>video</code> element.</p>
</video>
);
default:
return (
<p>Unsupported content type</p>
);
}
})()
}
</div>
<AssetTitle />
</div>

6
client/src/pages/ShowAssetDetails/view.jsx
View file

@ -1,7 +1,8 @@
import React from 'react';
import PageLayout from '@components/PageLayout';
import VerticalSplit from '@components/VerticalSplit';
import VerticalCollapsibleSplit from '@components/VerticalCollapsibleSplit';
// import VerticalSplit from '@components/VerticalSplit';
// import AssetTitle from '@containers/AssetTitle';
import AssetDisplay from '@containers/AssetDisplay';
import AssetInfo from '@containers/AssetInfo';
@ -17,8 +18,7 @@ class ShowAssetDetails extends React.Component {
pageTitle={`${name} - details`}
asset={asset}
>
<VerticalSplit
<VerticalCollapsibleSplit
top={<AssetDisplay />}
bottom={<AssetInfo />}
/>