{(() => {
switch (contentType) {
@@ -15,7 +15,7 @@ const AssetPreview = ({ defaultThumbnail, claimData: { name, claimId, fileExt, c
case 'image/gif':
return (
@@ -23,7 +23,7 @@ const AssetPreview = ({ defaultThumbnail, claimData: { name, claimId, fileExt, c
case 'video/mp4':
return (
diff --git a/client/src/components/ButtonPrimary/index.jsx b/client/src/components/ButtonPrimary/index.jsx
new file mode 100644
index 00000000..1011f902
--- /dev/null
+++ b/client/src/components/ButtonPrimary/index.jsx
@@ -0,0 +1,14 @@
+import React from 'react';
+
+const ButtonPrimary = ({ value, onClickHandler }) => {
+ return (
+
+ );
+};
+
+export default ButtonPrimary;
diff --git a/client/src/components/ButtonPrimaryJumbo/index.jsx b/client/src/components/ButtonPrimaryJumbo/index.jsx
new file mode 100644
index 00000000..d1631c15
--- /dev/null
+++ b/client/src/components/ButtonPrimaryJumbo/index.jsx
@@ -0,0 +1,14 @@
+import React from 'react';
+
+const ButtonPrimaryJumbo = ({ value, onClickHandler }) => {
+ return (
+
+ );
+};
+
+export default ButtonPrimaryJumbo;
diff --git a/client/src/components/ButtonSecondary/index.jsx b/client/src/components/ButtonSecondary/index.jsx
new file mode 100644
index 00000000..96627829
--- /dev/null
+++ b/client/src/components/ButtonSecondary/index.jsx
@@ -0,0 +1,14 @@
+import React from 'react';
+
+const ButtonPrimary = ({ value, onClickHandler }) => {
+ return (
+
+ );
+};
+
+export default ButtonPrimary;
diff --git a/client/src/components/ButtonTertiary/index.jsx b/client/src/components/ButtonTertiary/index.jsx
new file mode 100644
index 00000000..a1930a05
--- /dev/null
+++ b/client/src/components/ButtonTertiary/index.jsx
@@ -0,0 +1,14 @@
+import React from 'react';
+
+const ButtonTertiary = ({ value, onClickHandler }) => {
+ return (
+
+ );
+};
+
+export default ButtonTertiary;
diff --git a/client/src/components/ChannelAbout/index.jsx b/client/src/components/ChannelAbout/index.jsx
new file mode 100644
index 00000000..2e04f18f
--- /dev/null
+++ b/client/src/components/ChannelAbout/index.jsx
@@ -0,0 +1,11 @@
+import React from 'react';
+
+const ChannelAbout = () => {
+ return (
+ 
+ );
+ }
+};
+
+PublishPreview.propTypes = {
+ dimPreview: PropTypes.bool.isRequired,
+ file : PropTypes.object.isRequired,
+ thumbnail : PropTypes.object,
+};
+
+export default PublishPreview;
diff --git a/client/src/components/FormFeedbackDisplay/index.jsx b/client/src/components/FormFeedbackDisplay/index.jsx
new file mode 100644
index 00000000..7dd62d7e
--- /dev/null
+++ b/client/src/components/FormFeedbackDisplay/index.jsx
@@ -0,0 +1,21 @@
+import React from 'react';
+
+const FormFeedbackDisplay = ({ errorMessage, defaultMessage }) => {
+ return (
+
+
+ );
+};
+
+export default ChannelAbout;
diff --git a/client/src/components/ChannelCreateNameInput/index.jsx b/client/src/components/ChannelCreateNameInput/index.jsx
new file mode 100644
index 00000000..4cf9558d
--- /dev/null
+++ b/client/src/components/ChannelCreateNameInput/index.jsx
@@ -0,0 +1,38 @@
+import React from 'react';
+import Label from '@components/Label';
+import RowLabeled from '@components/RowLabeled';
+
+const ChannelCreateNameInput = ({ value, error, handleNameInput }) => {
+ return (
+ Channels allow you to publish and group content under an identity. You can create a channel for yourself, or share one with like-minded friends. You can create 1 channel, or 100, so whether you're documenting important events, or making a public repository for cat gifs (password: '1234'), try creating a channel for it!
+
+ @
+
+ { (value && !error) && (
+
+ {'\u2713'}
+
+ )}
+ { error && (
+
+ {'\u2716'}
+
+ )}
+
+ }
+ />
+ );
+};
+
+export default ChannelCreateNameInput;
diff --git a/client/src/components/ChannelCreatePasswordInput/index.jsx b/client/src/components/ChannelCreatePasswordInput/index.jsx
new file mode 100644
index 00000000..1a056fcc
--- /dev/null
+++ b/client/src/components/ChannelCreatePasswordInput/index.jsx
@@ -0,0 +1,26 @@
+import React from 'react';
+import Label from '@components/Label';
+import RowLabeled from '@components/RowLabeled';
+
+const ChannelCreatePasswordInput = ({ value, handlePasswordInput }) => {
+ return (
+
+
+
+ }
+ />
+ );
+};
+
+export default ChannelCreatePasswordInput;
diff --git a/client/src/components/ChannelInfoDisplay/index.jsx b/client/src/components/ChannelInfoDisplay/index.jsx
new file mode 100644
index 00000000..051ad1c4
--- /dev/null
+++ b/client/src/components/ChannelInfoDisplay/index.jsx
@@ -0,0 +1,13 @@
+import React from 'react';
+
+const ChannelInfoDisplay = ({name, longId, shortId}) => {
+ return (
+
+
+ );
+};
+
+export default ChannelInfoDisplay;
diff --git a/client/src/components/ChannelLoginNameInput/index.jsx b/client/src/components/ChannelLoginNameInput/index.jsx
new file mode 100644
index 00000000..fce913cb
--- /dev/null
+++ b/client/src/components/ChannelLoginNameInput/index.jsx
@@ -0,0 +1,29 @@
+import React from 'react';
+import RowLabeled from '@components/RowLabeled';
+import Label from '@components/Label';
+
+const ChannelLoginNameInput = ({ channelName, handleInput }) => {
+ return (
+ channel name: {name}
+full channel id: {longId}
+short channel id: {shortId}
+
+ @
+
+
+ }
+ />
+ );
+};
+
+export default ChannelLoginNameInput;
diff --git a/client/src/components/ChannelLoginPasswordInput/index.jsx b/client/src/components/ChannelLoginPasswordInput/index.jsx
new file mode 100644
index 00000000..db42775c
--- /dev/null
+++ b/client/src/components/ChannelLoginPasswordInput/index.jsx
@@ -0,0 +1,28 @@
+import React from 'react';
+import RowLabeled from '@components/RowLabeled';
+import Label from '@components/Label';
+
+const ChannelLoginPasswordInput = ({ channelPassword, handleInput }) => {
+ return (
+
+
+
+ }
+ />
+ );
+};
+
+export default ChannelLoginPasswordInput;
diff --git a/client/src/components/ChannelSelectDropdown/index.jsx b/client/src/components/ChannelSelectDropdown/index.jsx
new file mode 100644
index 00000000..fee212c7
--- /dev/null
+++ b/client/src/components/ChannelSelectDropdown/index.jsx
@@ -0,0 +1,20 @@
+import React from 'react';
+import { LOGIN, CREATE } from '../../constants/publish_channel_select_states';
+
+const ChannelSelectDropdown = ({ selectedChannel, handleSelection, loggedInChannelName }) => {
+ return (
+
+ );
+};
+
+export default ChannelSelectDropdown;
diff --git a/client/src/components/ChannelTools/index.jsx b/client/src/components/ChannelTools/index.jsx
new file mode 100644
index 00000000..5e640dd9
--- /dev/null
+++ b/client/src/components/ChannelTools/index.jsx
@@ -0,0 +1,21 @@
+import React from 'react';
+import ChannelLoginForm from '@containers/ChannelLoginForm';
+import ChannelCreateForm from '@containers/ChannelCreateForm';
+import Row from '@components/Row';
+
+const ChannelTools = () => {
+ return (
+
+
+
+
+
+
+ );
+};
+
+export default ChannelTools;
diff --git a/client/src/components/ChooseAnonymousPublishRadio/index.jsx b/client/src/components/ChooseAnonymousPublishRadio/index.jsx
new file mode 100644
index 00000000..f3cadac7
--- /dev/null
+++ b/client/src/components/ChooseAnonymousPublishRadio/index.jsx
@@ -0,0 +1,25 @@
+import React from 'react';
+
+const ChooseAnonymousPublishRadio = ({ publishInChannel, toggleAnonymousPublish }) => {
+ return (
+ Log in to an existing channel:
+Create a brand new channel:
+
+
+
+
+ );
+};
+
+export default ChooseAnonymousPublishRadio;
diff --git a/client/src/components/ChooseChannelPublishRadio/index.jsx b/client/src/components/ChooseChannelPublishRadio/index.jsx
new file mode 100644
index 00000000..b7f99332
--- /dev/null
+++ b/client/src/components/ChooseChannelPublishRadio/index.jsx
@@ -0,0 +1,25 @@
+import React from 'react';
+
+const ChooseChannelPublishRadio = ({ publishInChannel, toggleAnonymousPublish }) => {
+ return (
+
+
+
+
+ );
+}
+
+export default ChooseChannelPublishRadio;
diff --git a/client/src/components/Column/index.jsx b/client/src/components/Column/index.jsx
new file mode 100644
index 00000000..dcd2e2bc
--- /dev/null
+++ b/client/src/components/Column/index.jsx
@@ -0,0 +1,13 @@
+import React from 'react';
+
+class Column extends React.Component {
+ render () {
+ return (
+
+ {this.props.children}
+
+ );
+ }
+}
+
+export default Column;
diff --git a/client/src/components/DropzoneDropItDisplay/index.jsx b/client/src/components/DropzoneDropItDisplay/index.jsx
new file mode 100644
index 00000000..beaf820b
--- /dev/null
+++ b/client/src/components/DropzoneDropItDisplay/index.jsx
@@ -0,0 +1,11 @@
+import React from 'react';
+
+const DropzoneDropItDisplay = () => {
+ return (
+
+
+ );
+}
+
+export default DropzoneDropItDisplay;
diff --git a/client/src/components/DropzoneInstructionsDisplay/index.jsx b/client/src/components/DropzoneInstructionsDisplay/index.jsx
new file mode 100644
index 00000000..cb06392b
--- /dev/null
+++ b/client/src/components/DropzoneInstructionsDisplay/index.jsx
@@ -0,0 +1,18 @@
+import React from 'react';
+import FormFeedbackDisplay from '@components/FormFeedbackDisplay';
+
+const DropzoneInstructionsDisplay = ({fileError}) => {
+ return (
+ Drop it.
+
+
+ );
+};
+
+export default DropzoneInstructionsDisplay;
diff --git a/client/src/components/DropzonePreviewImage/index.jsx b/client/src/components/DropzonePreviewImage/index.jsx
new file mode 100644
index 00000000..d94d976a
--- /dev/null
+++ b/client/src/components/DropzonePreviewImage/index.jsx
@@ -0,0 +1,61 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+class PublishPreview extends React.Component {
+ constructor (props) {
+ super(props);
+ this.state = {
+ imgSource : '',
+ defaultThumbnail: '/assets/img/video_thumb_default.png',
+ };
+ }
+ componentDidMount () {
+ this.setPreviewImageSource(this.props.file);
+ }
+ componentWillReceiveProps (newProps) {
+ if (newProps.file !== this.props.file) {
+ this.setPreviewImageSource(newProps.file);
+ }
+ if (newProps.thumbnail !== this.props.thumbnail) {
+ if (newProps.thumbnail) {
+ this.setPreviewImageSourceFromFile(newProps.thumbnail);
+ } else {
+ this.setState({imgSource: this.state.defaultThumbnail});
+ }
+ }
+ }
+ setPreviewImageSourceFromFile (file) {
+ const previewReader = new FileReader();
+ previewReader.readAsDataURL(file);
+ previewReader.onloadend = () => {
+ this.setState({imgSource: previewReader.result});
+ };
+ }
+ setPreviewImageSource (file) {
+ if (file.type !== 'video/mp4') {
+ this.setPreviewImageSourceFromFile(file);
+ } else {
+ if (this.props.thumbnail) {
+ this.setPreviewImageSourceFromFile(this.props.thumbnail);
+ }
+ this.setState({imgSource: this.state.defaultThumbnail});
+ }
+ }
+ render () {
+ return (
+ Drag & drop image or video here to publish
+OR
+CHOOSE FILE
+
+ { errorMessage ? (
+
+ );
+};
+
+export default FormFeedbackDisplay;
diff --git a/client/src/components/HorizontalSplit/index.jsx b/client/src/components/HorizontalSplit/index.jsx
new file mode 100644
index 00000000..c5151fa3
--- /dev/null
+++ b/client/src/components/HorizontalSplit/index.jsx
@@ -0,0 +1,18 @@
+import React from 'react';
+
+class HorizontalSplit extends React.Component {
+ render () {
+ return (
+ {errorMessage}
+ ) : ( +
+ { defaultMessage ? (
+
+ )}
+ {defaultMessage}
+ ) : ( ++ )} +
+
+ );
+ }
+}
+
+export default HorizontalSplit;
diff --git a/client/src/components/InactiveStatusBar/index.jsx b/client/src/components/InactiveStatusBar/index.jsx
index 353477be..8c8d78f9 100644
--- a/client/src/components/InactiveStatusBar/index.jsx
+++ b/client/src/components/InactiveStatusBar/index.jsx
@@ -1,7 +1,7 @@
import React from 'react';
const InactiveStatusBar = () => {
- return | ;
+ return | ;
};
export default InactiveStatusBar;
diff --git a/client/src/components/Label/index.jsx b/client/src/components/Label/index.jsx
new file mode 100644
index 00000000..6fa96a5a
--- /dev/null
+++ b/client/src/components/Label/index.jsx
@@ -0,0 +1,12 @@
+import React from 'react';
+
+const Label = ({ value }) => {
+ return (
+
+ );
+}
+export default Label;
diff --git a/client/src/components/NavBar/index.jsx b/client/src/components/NavBar/index.jsx
new file mode 100644
index 00000000..bd1028a3
--- /dev/null
+++ b/client/src/components/NavBar/index.jsx
@@ -0,0 +1,21 @@
+import React from 'react';
+import SpaceBetween from '@components/SpaceBetween';
+import Logo from '@components/Logo';
+import SiteDescription from '@containers/SiteDescription';
+import NavigationLinks from '@containers/NavigationLinks';
+
+class NavBar extends React.Component {
+ render () {
+ return (
+
+ {this.props.leftSide}
+
+
+ {this.props.rightSide}
+
+
+
+
+
+ );
+ }
+}
+
+export default NavBar;
diff --git a/client/src/components/NavBarChannelOptionsDropdown/index.jsx b/client/src/components/NavBarChannelOptionsDropdown/index.jsx
index e832fdbf..4274df26 100644
--- a/client/src/components/NavBarChannelOptionsDropdown/index.jsx
+++ b/client/src/components/NavBarChannelOptionsDropdown/index.jsx
@@ -2,12 +2,20 @@ import React from 'react';
function NavBarChannelDropdown ({ channelName, handleSelection, defaultSelection, VIEW, LOGOUT }) {
return (
-
+
+
+
);
-};
+}
export default NavBarChannelDropdown;
diff --git a/client/src/components/PageLayout/index.jsx b/client/src/components/PageLayout/index.jsx
new file mode 100644
index 00000000..9ad66dd2
--- /dev/null
+++ b/client/src/components/PageLayout/index.jsx
@@ -0,0 +1,25 @@
+import React from 'react';
+
+import SEO from '@containers/SEO';
+import NavBar from '@components/NavBar';
+
+class PageLayout extends React.Component {
+ render () {
+ return (
+
+
+ );
+ }
+}
+
+export default PageLayout;
diff --git a/client/src/components/PageLayoutShowLite/index.jsx b/client/src/components/PageLayoutShowLite/index.jsx
new file mode 100644
index 00000000..e60d18c6
--- /dev/null
+++ b/client/src/components/PageLayoutShowLite/index.jsx
@@ -0,0 +1,21 @@
+import React from 'react';
+
+import SEO from '@containers/SEO';
+
+class PageLayoutShowLite extends React.Component {
+ shouldComponentUpdate () {
+ return false;
+ }
+ render () {
+ return (
+
+ {this.props.children}
+
+
+
+ );
+ }
+}
+
+export default PageLayoutShowLite;
diff --git a/client/src/components/PublishDescriptionInput/index.jsx b/client/src/components/PublishDescriptionInput/index.jsx
new file mode 100644
index 00000000..ade0a178
--- /dev/null
+++ b/client/src/components/PublishDescriptionInput/index.jsx
@@ -0,0 +1,29 @@
+import React from 'react';
+import RowLabeled from '@components/RowLabeled';
+import Label from '@components/Label';
+import ExpandingTextArea from '@components/ExpandingTextArea';
+
+const PublishDescriptionInput = ({ description, handleInput }) => {
+ return (
+
+ {this.props.children}
+
+ + By clicking 'Publish', you affirm that you have the rights to publish this content to the LBRY network, and that you understand the properties of publishing it to a decentralized, user-controlled network. Read more. +
+ ); +}; + +export default PublishFinePrint; diff --git a/client/src/components/PublishLicenseInput/index.jsx b/client/src/components/PublishLicenseInput/index.jsx new file mode 100644 index 00000000..c4ee43f5 --- /dev/null +++ b/client/src/components/PublishLicenseInput/index.jsx @@ -0,0 +1,28 @@ +import React from 'react'; +import RowLabeled from '@components/RowLabeled'; +import Label from '@components/Label'; + +const PublishLicenseInput = ({ handleSelect }) => { + return ( +
+
+
+
);
}
};
-PublishPreview.propTypes = {
- dimPreview: PropTypes.bool.isRequired,
- file : PropTypes.object.isRequired,
- thumbnail : PropTypes.object,
-};
-
export default PublishPreview;
diff --git a/client/src/components/PublishUrlMiddleDisplay/index.jsx b/client/src/components/PublishUrlMiddleDisplay/index.jsx
index d9a7e74e..28f8b7ba 100644
--- a/client/src/components/PublishUrlMiddleDisplay/index.jsx
+++ b/client/src/components/PublishUrlMiddleDisplay/index.jsx
@@ -4,13 +4,13 @@ import PropTypes from 'prop-types';
function UrlMiddle ({publishInChannel, selectedChannel, loggedInChannelName, loggedInChannelShortId}) {
if (publishInChannel) {
if (selectedChannel === loggedInChannelName) {
- return {loggedInChannelName}:{loggedInChannelShortId} /;
+ return {loggedInChannelName}:{loggedInChannelShortId} /;
}
- return @channel@channelSelect a channel below /;
}
return (
- xyzThis will be a random id /
+ xyzThis will be a random id /
);
}
diff --git a/client/src/components/Row/index.jsx b/client/src/components/Row/index.jsx
new file mode 100644
index 00000000..82c0e806
--- /dev/null
+++ b/client/src/components/Row/index.jsx
@@ -0,0 +1,13 @@
+import React from 'react';
+
+class Row extends React.Component {
+ render () {
+ return (
+
+ {this.props.children}
+
+ );
+ }
+}
+
+export default Row;
diff --git a/client/src/components/RowLabeled/index.jsx b/client/src/components/RowLabeled/index.jsx
new file mode 100644
index 00000000..c175d32f
--- /dev/null
+++ b/client/src/components/RowLabeled/index.jsx
@@ -0,0 +1,14 @@
+import React from 'react';
+
+class RowLabeled extends React.Component {
+ render () {
+ return (
+
+
+ );
+ }
+}
+
+export default RowLabeled;
diff --git a/client/src/components/SpaceAround/index.jsx b/client/src/components/SpaceAround/index.jsx
new file mode 100644
index 00000000..9c6f5a51
--- /dev/null
+++ b/client/src/components/SpaceAround/index.jsx
@@ -0,0 +1,13 @@
+import React from 'react';
+
+class SpaceAround extends React.Component {
+ render () {
+ return (
+ {this.props.label}
+ {this.props.content}
+
+ {this.props.children}
+
+ );
+ }
+}
+
+export default SpaceAround;
diff --git a/client/src/components/SpaceBetween/index.jsx b/client/src/components/SpaceBetween/index.jsx
new file mode 100644
index 00000000..64db3173
--- /dev/null
+++ b/client/src/components/SpaceBetween/index.jsx
@@ -0,0 +1,13 @@
+import React from 'react';
+
+class SpaceBetween extends React.Component {
+ render () {
+ return (
+
+ {this.props.children}
+
+ );
+ }
+}
+
+export default SpaceBetween;
diff --git a/client/src/components/VerticalSplit/index.jsx b/client/src/components/VerticalSplit/index.jsx
new file mode 100644
index 00000000..dfd0b82e
--- /dev/null
+++ b/client/src/components/VerticalSplit/index.jsx
@@ -0,0 +1,14 @@
+import React from 'react';
+
+class VerticalSplit extends React.Component {
+ render () {
+ return (
+
+ {this.props.top}
+ {this.props.bottom}
+
+ );
+ }
+}
+
+export default VerticalSplit;
diff --git a/client/src/containers/AssetDisplay/view.jsx b/client/src/containers/AssetDisplay/view.jsx
index 3271f5bf..277a4980 100644
--- a/client/src/containers/AssetDisplay/view.jsx
+++ b/client/src/containers/AssetDisplay/view.jsx
@@ -10,7 +10,7 @@ class AssetDisplay extends React.Component {
render () {
const { status, error, asset: { claimData: { name, claimId, contentType, fileExt, thumbnail } } } = this.props;
return (
-
+
{(status === LOCAL_CHECK) &&
- );
case 'image/gif':
return (
);
case 'video/mp4':
return (
-
Checking to see if Spee.ch has your asset locally...
@@ -35,26 +35,21 @@ class AssetDisplay extends React.Component { case 'image/jpeg': case 'image/jpg': case 'image/png': - return ( -