- facebook
+ 
- tumblr
+ 
- reddit
+ 
+ >
+
+
+
+
);
}
}
diff --git a/client/src/components/NavBar/index.jsx b/client/src/components/NavBar/index.jsx
index bd1028a3..c58aa22d 100644
--- a/client/src/components/NavBar/index.jsx
+++ b/client/src/components/NavBar/index.jsx
@@ -10,7 +10,6 @@ class NavBar extends React.Component {
+
+ );
+ }
+}
+
+export default RowLabeledAlt;
diff --git a/client/src/components/VerticalCollapsibleSplit/index.jsx b/client/src/components/VerticalCollapsibleSplit/index.jsx
new file mode 100644
index 00000000..1dcaca48
--- /dev/null
+++ b/client/src/components/VerticalCollapsibleSplit/index.jsx
@@ -0,0 +1,38 @@
+import React from 'react';
+import * as Icon from 'react-feather';
+class VerticalCollapsibleSplit extends React.Component {
+
+ constructor (props) {
+ super(props);
+ this.collapse = this.collapse.bind(this);
+ this.state = { closed: false };
+ }
+
+ collapse () {
+ this.setState({ closed: !this.state.closed });
+ document.querySelectorAll(`[data-name='${this.props.name}']`).forEach(el => el.classList.toggle('closed'));
+ }
+
+ render () {
+ let {
+ props,
+ state,
+ } = this;
+
+ return (
+ {this.props.label}
+ {this.props.content}
+
+
+ );
+ }
+};
+
+export default VerticalCollapsibleSplit;
diff --git a/client/src/containers/AssetDisplay/view.jsx b/client/src/containers/AssetDisplay/view.jsx
index d5b37b82..be124f08 100644
--- a/client/src/containers/AssetDisplay/view.jsx
+++ b/client/src/containers/AssetDisplay/view.jsx
@@ -1,5 +1,6 @@
import React from 'react';
import Row from '@components/Row';
+import AssetTitle from '@containers/AssetTitle';
import ProgressBar from '@components/ProgressBar';
import { LOCAL_CHECK, UNAVAILABLE, ERROR, AVAILABLE } from '../../constants/asset_display_states';
@@ -12,62 +13,66 @@ class AssetDisplay extends React.Component {
const { status, error, asset: { claimData: { name, claimId, contentType, fileExt, thumbnail } } } = this.props;
const sourceUrl = `/${claimId}/${name}.${fileExt}`;
return (
-
+ {props.top}
+
+
+
+ {props.bottom}
+
+
- {(status === LOCAL_CHECK) &&
- 
- );
- case 'video/mp4':
- return (
-
- );
- default:
- return (
-
-
+
-
- }
- {(status === UNAVAILABLE) &&
- Checking to see if Spee.ch has your asset locally...
-
-
- }
- {(status === ERROR) &&
- Sit tight, we're searching the LBRY blockchain for your asset!
-Curious what magic is happening here? Learn more.
-
-
-
-
-
-
- }
- {(status === AVAILABLE) &&
- (() => {
- switch (contentType) {
- case 'image/jpeg':
- case 'image/jpg':
- case 'image/png':
- case 'image/gif':
- return (
- Unfortunately, we couldn't download your asset from LBRY. You can help us out by sharing the following error message in the LBRY discord.
-{error}
-Unsupported content type
- ); +
+
);
}
diff --git a/client/src/containers/AssetInfo/view.jsx b/client/src/containers/AssetInfo/view.jsx
index af742617..a9f35fd4 100644
--- a/client/src/containers/AssetInfo/view.jsx
+++ b/client/src/containers/AssetInfo/view.jsx
@@ -152,4 +152,4 @@ class AssetInfo extends React.Component {
}
};
-export default AssetInfo;
+export default AssetInfo;
\ No newline at end of file
diff --git a/client/src/containers/AssetTitle/view.jsx b/client/src/containers/AssetTitle/view.jsx
index a542c762..7821920a 100644
--- a/client/src/containers/AssetTitle/view.jsx
+++ b/client/src/containers/AssetTitle/view.jsx
@@ -1,11 +1,10 @@
import React from 'react';
-import Row from '@components/Row';
const AssetTitle = ({ title }) => {
return (
-
+ {(status === LOCAL_CHECK) &&
+
+ );
+ case 'video/mp4':
+ return (
+
+ );
+ default:
+ return (
+
+
}
- })()
- }
+ {(status === UNAVAILABLE) &&
+ Checking to see if Spee.ch has your asset locally...
+
+
+ }
+ {(status === ERROR) &&
+ Sit tight, we're searching the LBRY blockchain for your asset!
+Curious what magic is happening here? Learn more.
+
+
+
+
+
+
+ }
+ {(status === AVAILABLE) &&
+ (() => {
+ switch (contentType) {
+ case 'image/jpeg':
+ case 'image/jpg':
+ case 'image/png':
+ case 'image/gif':
+ return (
+ Unfortunately, we couldn't download your asset from LBRY. You can help us out by sharing the following error message in the LBRY discord.
+{error}
+Unsupported content type
+ ); + } + })() + } +{title}
-
+
);
};
diff --git a/client/src/pages/ShowAssetDetails/view.jsx b/client/src/pages/ShowAssetDetails/view.jsx
index 98c09372..628dc5bc 100644
--- a/client/src/pages/ShowAssetDetails/view.jsx
+++ b/client/src/pages/ShowAssetDetails/view.jsx
@@ -1,8 +1,7 @@
import React from 'react';
import PageLayout from '@components/PageLayout';
-import HorizontalSplit from '@components/HorizontalSplit';
-import AssetTitle from '@containers/AssetTitle';
+import VerticalCollapsibleSplit from '@components/VerticalCollapsibleSplit';
import AssetDisplay from '@containers/AssetDisplay';
import AssetInfo from '@containers/AssetInfo';
import ErrorPage from '@pages/ErrorPage';
@@ -17,10 +16,10 @@ class ShowAssetDetails extends React.Component {
pageTitle={`${name} - details`}
asset={asset}
>
- {title}
+${html}